React Chat - Configure Suggestions

DevExtreme Chat can display suggestion buttons (a DevExtreme ButtonGroup component) above the message input field. To enable this feature, use the suggestions object.

To display suggestion buttons, specify the suggestions.items[] array. Use ButtonGroup item fields to configure the appearance and visual elements of individual buttons. You can also specify custom fields to implement additional functionality. For instance, you can store predefined messages in a custom field and use short labels (items[].text values).

Fill the Chat Input Field with Predefined Messages

To configure suggestion items for the Chat's input field, update the inputFieldText property in the suggestions.onItemClick handler:

jQuery
index.js
$('#chat').dxChat({
    suggestions: {
        items: [
            { text: 'Summarize text' },
            { text: 'Write an email' },
            { text: 'Fix my writing' },
        ],
        onItemClick(e) {
            $('#chat').dxChat('instance').option('inputFieldText', e.itemData.text);
        },
    },
});
Angular
app.component.html
app.component.ts
<dx-chat ...
    [inputFieldText]="inputFieldText"
    [suggestions]="chatSuggestions"
>
</dx-chat>
import { DxChatModule, type DxChatTypes } from "devextreme-angular/ui/chat";

// ...
export class AppComponent {
    inputFieldText: string = '';
    chatSuggestions: DxChatTypes.Properties['suggestions'] = {
        items: [
            { text: 'Summarize text' },
            { text: 'Write an email' },
            { text: 'Fix my writing' },
        ],
        onItemClick: (e) => {
            this.inputFieldText = e.itemData.text;
        },
    };
}
Vue
App.vue
<template>
    <DxChat
        :input-field-text="inputFieldText"
        :suggestions="chatSuggestions"
    />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { DxChat, type DxChatTypes } from 'devextreme-vue/chat';

const inputFieldText = ref<string>('');
const chatSuggestions: DxChatTypes.Properties['suggestions'] = {
    items: [
        { text: 'Summarize text' },
        { text: 'Write an email' },
        { text: 'Fix my writing' },
    ],
    onItemClick(e) {
        inputFieldText.value = e.itemData.text;
    },
};
</script>
React
App.tsx
import React, { useCallback, useState } from 'react';
import { Chat, type ChatTypes } from 'devextreme-react/chat';
import { type ButtonGroupTypes } from 'devextreme-react/button-group';

function App(): JSX.Element {
    const [inputFieldText, setInputFieldText] = useState<string>('');

    const handleSuggestionClick = useCallback((e: ButtonGroupTypes.ItemClickEvent) => {
        setInputFieldText(e.itemData.text);
    }, []);

    const chatSuggestions: ChatTypes.Properties['suggestions'] = {
        items: [
            { text: 'Summarize text' },
            { text: 'Write an email' },
            { text: 'Fix my writing' },
        ],
        onItemClick: handleSuggestionClick,
    }

    return (
        <Chat
            inputFieldText={inputFieldText}
            suggestions={chatSuggestions}
        />
    );
}

Send Predefined Messages on Suggestion Click

jQuery

To send predefined messages when a suggestions button is clicked, call renderMessage() in suggestions.onItemClick:

index.js
$('#chat').dxChat({
    suggestions: {
        items: [
            { text: 'Summarize text' },
            { text: 'Write an email' },
            { text: 'Fix my writing' },
        ],
        onItemClick(e) {
            const newMessage = {
                id: Date.now(),
                timestamp: new Date(),
                text: e.itemData.text,
            };

            $('#chat').dxChat('instance').renderMessage(newMessage);
        }
    }
});
Angular

To send predefined messages when a suggestions button is clicked, update the Chat's items array or dataSource in suggestions.onItemClick. The following code snippet uses the items array:

app.component.html
app.component.ts
<dx-chat ...
    [items]="messages"
    [suggestions]="chatSuggestions"
>
</dx-chat>
import { DxChatModule, type DxChatTypes } from "devextreme-angular/ui/chat";
// ...
export class AppComponent {
    messages: DxChatTypes.Message[] = [];
    suggestions: DxChatTypes.Properties['suggestions'] = {
        items: [
            { text: 'Summarize text' },
            { text: 'Write an email' },
            { text: 'Fix my writing' },
        ],
        onItemClick(e) {
            const newMessage: DxChatTypes.Message = {
                id: Date.now(),
                timestamp: new Date(),
                text: e.itemData.text,
            };

            this.messages = [...messages, newMessage]
        }
    };
}
Vue

To send predefined messages when a suggestions button is clicked, update the Chat's items array or dataSource in suggestions.onItemClick. The following code snippet uses the items array:

App.vue
<template>
    <DxChat
        :items="messages"
        :suggestions="chatSuggestions"
    />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { DxChat, type DxChatTypes } from 'devextreme-vue/chat';

const messages = ref<DxChatTypes.Message[]>([]);
const chatSuggestions: DxChatTypes.Properties['suggestions'] = {
    items: [
        { text: 'Summarize text' },
        { text: 'Write an email' },
        { text: 'Fix my writing' },
    ],
    onItemClick(e) {
        const newMessage: DxChatTypes.Message = {
            id: Date.now(),
            timestamp: new Date(),
            text: e.itemData.text,
        };

        messages.value = [...messages.value, newMessage]
    },
};
</script>
React

To send predefined messages when a suggestions button is clicked, update the Chat's items array or dataSource in suggestions.onItemClick. The following code snippet uses the items array:

App.tsx
import React, { useCallback, useState } from 'react';
import { Chat, type ChatTypes } from 'devextreme-react/chat';
import { type ButtonGroupTypes } from 'devextreme-react/button-group';

function App(): JSX.Element {
    const [messages, setMessages] = useState<ChatTypes.Message[]>([]);

    const handleSuggestionClick = useCallback((e: ButtonGroupTypes.ItemClickEvent) => {
        const newMessage: ChatTypes.Message = {
            id: Date.now(),
            timestamp: new Date(),
            text: e.itemData.text,
        };

        setMessages((prevMessages) => [...prevMessages, newMessage]);
    }, []);

    const chatSuggestions: ChatTypes.Properties['suggestions'] = {
        items: [
            { text: 'Summarize text' },
            { text: 'Write an email' },
            { text: 'Fix my writing' },
        ],
        onItemClick: handleSuggestionClick,
    }

    return (
        <Chat
            items={messages}
            suggestions={chatSuggestions}
        />
    );
}

Configure Disappearing Suggestions

To hide a suggestion item after a user clicks the button, update the suggestions.items[] array:

jQuery
index.js
$('#chat').dxChat({
    suggestions: {
        items: [
            { text: 'Summarize text' },
            { text: 'Write an email' },
            { text: 'Fix my writing' },
        ],
        onItemClick(e) {
            const chatInstance = $('#chat').dxChat('instance');

            const currentSuggestions = chatInstance.option('suggestions');
            chatInstance.option('suggestions', {
                items: currentSuggestions.items.filter((item) => item.text !== e.itemData.text),
            });

            // ...
            chatInstance.renderMessage(newMessage);
        },
    },
});
Angular
app.component.html
app.component.ts
<dx-chat ...
    [suggestions]="chatSuggestions"
>
</dx-chat>
import { DxChatModule, type DxChatTypes } from "devextreme-angular/ui/chat";
import { type DxButtonGroupTypes } from "devextreme-angular/ui/button-group";

// ...
export class AppComponent {
    suggestionItems = [
        { text: 'Summarize text' },
        { text: 'Write an email' },
        { text: 'Fix my writing' },
    ];
    chatSuggestions: DxChatTypes.Properties['suggestions'] = {
        items: this.suggestionItems,
        onItemClick: this.handleSuggestionClick.bind(this),
    };
    handleSuggestionClick(e: DxButtonGroupTypes.ItemClickEvent): void {
        this.chatSuggestions = {
            items: this.chatSuggestions.items.filter((item) => item.text !== e.itemData.text),
            onItemClick: this.handleSuggestionClick.bind(this),
        };

        // ...
        this.messages = [...messages, newMessage];
    };
}
Vue
App.vue
<template>
    <DxChat
        :input-field-text="inputFieldText"
        :suggestions="chatSuggestions"
    />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { DxChat, type DxChatTypes } from 'devextreme-vue/chat';
import { type DxButtonGroupTypes } from 'devextreme-vue/button-group';

const suggestionItems = [
    { text: 'Summarize text' },
    { text: 'Write an email' },
    { text: 'Fix my writing' },
];

const chatSuggestions = ref<DxChatTypes.Properties['suggestions']>({
    items: suggestionItems,
    onItemClick: handleSuggestionClick,
});

function handleSuggestionClick(e: DxButtonGroupTypes.ItemClickEvent): void {
    chatSuggestions.value = {
        items: chatSuggestions.value.items.filter((item) => item.text !== e.itemData.text),
        onItemClick: handleSuggestionClick,
    };

    // ...
    messages.value = [...messages.value, newMessage];
};
</script>
React
App.tsx
import React, { useCallback, useState } from 'react';
import { Chat, type ChatTypes } from 'devextreme-react/chat';
import { type ButtonGroupTypes } from 'devextreme-react/button-group';

function App(): JSX.Element {
    const [suggestionItems, setSuggestionItems] = useState([
        { text: 'Summarize text' },
        { text: 'Write an email' },
        { text: 'Fix my writing' },
    ]);

    const handleSuggestionClick = useCallback((e: ButtonGroupTypes.ItemClickEvent) => {
        setSuggestionItems((items) => items.filter((item) => item.text !== e.itemData.text));

        // ...
        setMessages((prevMessages) => [...prevMessages, newMessage]);
    }, []);

    const chatSuggestions: ChatTypes.Properties['suggestions'] = {
        items: suggestionItems,
        onItemClick: handleSuggestionClick,
    };

    return (
        <Chat
            suggestions={chatSuggestions}
        />
    );
}

Alternatively, you can disable clicked items:

jQuery
index.js
$('#chat').dxChat({
    suggestions: {
        // ...
        onItemClick(e) {
            const chatInstance = $('#chat').dxChat('instance');

            const currentSuggestions = chatInstance.option('suggestions');
            currentSuggestions.find((item) => item.text === e.itemData.text).disabled = true;

            chatInstance.option('suggestions', { items: currentSuggestions });

            // ...
            chatInstance.renderMessage(newMessage);
        },
    },
});
Angular
app.component.html
app.component.ts
<dx-chat ...
    [suggestions]="chatSuggestions"
>
</dx-chat>
import { DxChatModule, type DxChatTypes } from "devextreme-angular/ui/chat";
import { type DxButtonGroupTypes } from "devextreme-angular/ui/button-group";

// ...
export class AppComponent {
    // ...

    handleSuggestionClick(e: DxButtonGroupTypes.ItemClickEvent): void {
        this.chatSuggestions = {
            items: this.chatSuggestions.items.map((item) => (
                item.text === e.itemData.text
                    ? { ...item, disabled: true }
                    : item
            )),
            onItemClick: this.handleSuggestionClick.bind(this),
        };

        // ...
        this.messages = [...messages, newMessage];
    };
}
Vue
App.vue
<template>
    <DxChat
        :input-field-text="inputFieldText"
        :suggestions="chatSuggestions"
    />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { DxChat, type DxChatTypes } from 'devextreme-vue/chat';
import { type DxButtonGroupTypes } from 'devextreme-vue/button-group';

// ...

function handleSuggestionClick(e: DxButtonGroupTypes.ItemClickEvent): void {
    chatSuggestions.value = {
        items: chatSuggestions.value.items.map((item) => (
            item.text === e.itemData.text
                ? { ...item, disabled: true }
                : item
        )),
        onItemClick: handleSuggestionClick,
    };

    // ...
    messages.value = [...messages.value, newMessage];
};
</script>
React
App.tsx
import React, { useCallback, useState } from 'react';
import { Chat, type ChatTypes } from 'devextreme-react/chat';
import { type ButtonGroupTypes } from 'devextreme-react/button-group';

function App(): JSX.Element {
    // ...

    const handleSuggestionClick = useCallback((e: ButtonGroupTypes.ItemClickEvent) => {
        setSuggestionItems((items) => {
            return items.map((item) => (
                item.text === e.itemData.text
                    ? { ...item, disabled: true }
                    : item
            ));
        });

        // ...
        setMessages((prevMessages) => [...prevMessages, newMessage]);
    }, []);

    return (
        <Chat
            suggestions={chatSuggestions}
        />
    );
}