Vue Chat - editing

Configures editing.

Selector: DxEditing

Type:

Object

View Demo

NOTE

Before allowing a user to update and delete messages, make sure that your data source supports these actions.
Set the Store's key property to "id" to ensure editing functions correctly.

jQuery

index.js

$('#chat').dxChat({
    dataSource: initialMessages,
    editing: {
        allowUpdating: true,
        allowDeleting: true
    },
    onMessageEntered({ message }) {
        e.component.renderMessage(message);
    },
    onMessageUpdated(e) {
        const message = e.message;
        message.text = e.text;
        message.isEdited = true;
        initialMessages[e.message.id] = message;
        e.component.repaint();
    },
    onMessageDeleted(e) {
        const message = e.message;
        message.isDeleted = true;
        initialMessages[e.message.id] = message;
        e.component.repaint();
    },
});

Angular

app.component.html

app.component.ts

<dx-chat 
    [dataSource]="messages"
    (onMessageEntered)="onMessageEntered($event)"
    (onMessageUpdated)="onMessageUpdated($event)"
    (onMessageDeleted)="onMessageDeleted($event)"
>
    <dxo-chat-editing 
        [allowUpdating]="true" 
        [allowDeleting]="true"
    ></dxo-chat-editing>
</dx-chat>

import { DxChatTypes } from "devextreme-angular/ui/chat";
// ...
export class AppComponent {
    messages: DxChatTypes.Message[] = [];
    onMessageEntered({ message }) {
        this.messages = [...this.messages, message];
        this.sendToBackend(message);
    }
    sendToBackend(message: DxChatTypes.Message) {
        console.log(`Message sent to backend: '${message.text}'`);
        // Backend logic goes here
    }
    onMessageUpdated(e: DxChatTypes.MessageUpdatedEvent) {
        const message = e.message;
        message.text = e.text;
        message.isEdited = true;
        initialMessages[e.message.id] = message;
        e.component.repaint();
    }
    onMessageDeleted(e: DxChatTypes.MessageDeletedEvent) {
        const message = e.message;
        message.isDeleted = true;
        initialMessages[e.message.id] = message;
        e.component.repaint();
    }
}

Vue

App.vue

<template>
<DxChat
    :data-source="messages"
    @message-entered="onMessageEntered"
    @message-updated="onMessageUpdated"
    @message-deleted="onMessageDeleted"
>
    <DxEditing :allow-updating="true" :allow-deleting="true" />
</DxChat>
</template>

<script setup lang="ts">
import DxChat, { DxChatTypes } from "devextreme-vue/chat";
const onMessageEntered = ({ message }) => {
    messages.value = [...messages.value, message];
    sendToBackend(message);
};
const sendToBackend = (message) => {
    console.log(`Message sent to backend: '${message.text}'`);
    // Backend logic goes here
};
const onMessageUpdated = (e: DxChatTypes.MessageUpdatedEvent) => {
    const message = e.message;
    message.text = e.text;
    message.isEdited = true;
    initialMessages[e.message.id] = message;
    e.component.repaint();
};
const onMessageDeleted = (e: DxChatTypes.MessageDeletedEvent) => {
    const message = e.message;
    message.isDeleted = true;
    initialMessages[e.message.id] = message;
    e.component.repaint();
};
</script>

React

App.js

import React, { useCallback, useState } from "react";
import Chat, { ChatTypes } from "devextreme-react/chat";

const onMessageUpdated = (e: ChatTypes.MessageUpdatedEvent) => {
    const message = e.message;
    message.text = e.text;
    message.isEdited = true;
    initialMessages[e.message.id] = message;
    e.component.repaint();
};
const onMessageDeleted = (e: ChatTypes.MessageDeletedEvent) => {
    const message = e.message;
    message.isDeleted = true;
    initialMessages[e.message.id] = message;
    e.component.repaint();
};

const App = () => {
    const [messages, setMessages] = useState();
    const onMessageEntered = useCallback(({ message }) => {
        setMessages((prevMessages) => [...prevMessages, message]);
        sendToBackend(message);
    }, []);
    const sendToBackend = (message) => {
        console.log(`Message sent to backend: '${message.text}'`);
        // Backend logic goes here
    }

    return (
        <Chat
            onMessageEntered={onMessageEntered}
            onMessageUpdated={onMessageUpdated}
            onMessageDeleted={onMessageDeleted}
            dataSource={messages}
        >
            <Editing allowUpdating={true} allowDeleting={true} />
        </Chat>
    );
};

allowDeleting

Specifies whether a user can delete messages. Called for each message when defined as a function.

Selector: allow-deleting

Type:

Boolean

|

Function

Function parameters:

options:

Object

Information about the current message.

Object structure:

Name	Type	Description
component	dxChat	Chat's instance.
message	Message	Message data.

Return Value:

Boolean

true if the message can be deleted; otherwise false.

Default Value: false

If false, no messages can be deleted. If true, only the current user can delete their messages.

allowUpdating

Specifies whether a user can update messages. Called for each message when defined as a function.

Selector: allow-updating

Type:

Boolean

|

Function

Function parameters:

options:

Object

Information about the current message.

Object structure:

Name	Type	Description
component	dxChat	Chat's instance.
message	Message	Message data.

Return Value:

Boolean

true if the message can be updated; otherwise false.

Default Value: false

If false, no messages can be edited. If true, only the current user can edit their messages.