React Chat - AI and Chatbot Integration

This demo leverages the Azure OpenAI service alongside the DevExtreme Chat component. You can integrate Chat with multiple AI services, including OpenAI, Google Dialogflow, and Microsoft Bot Framework.

Handling dataSource (reloadOnChange: false)

The Chat component's dataSource is a CustomStore that implements its own load and insert functions. The DevExtreme Chat component deactivates reloadOnChange to push updates directly into the store and update the conversation manually. See the onMessageEntered event handler and the processMessageSending function to review the code that manages data transfer between our Chat component and its data store.

TS JS

Backend API

import React, { useCallback, useState } from 'react'; import Chat from 'devextreme-react/chat'; import type { ChatTypes } from 'devextreme-react/chat'; import { loadMessages } from 'devextreme-react/common/core/localization'; import { user, assistant, CHAT_DISABLED_CLASS, } from './data.ts'; import Message from './Message.tsx'; import { dataSource, useApi } from './useApi.ts'; loadMessages({ en: { 'dxChat-emptyListMessage': 'Chat is Empty', 'dxChat-emptyListPrompt': 'AI Assistant is ready to answer your questions.', 'dxChat-textareaPlaceholder': 'Ask AI Assistant...', }, }); export default function App() { const { alerts, insertMessage, fetchAIResponse, regenerateLastAIResponse, } = useApi(); const [typingUsers, setTypingUsers] = useState<ChatTypes.User[]>([]); const [isProcessing, setIsProcessing] = useState<boolean>(false); const processAIRequest = useCallback(async (message: ChatTypes.Message): Promise<void> => { setIsProcessing(true); setTypingUsers([assistant]); await fetchAIResponse(message); setTypingUsers([]); setIsProcessing(false); }, [fetchAIResponse]); const onMessageEntered = useCallback(async ({ message, event }: ChatTypes.MessageEnteredEvent): Promise<void> => { insertMessage({ id: Date.now(), ...message }); if (!alerts.length) { (event?.target as HTMLElement).blur(); await processAIRequest(message); (event?.target as HTMLElement).focus(); } }, [insertMessage, alerts.length, processAIRequest]); const onRegenerateButtonClick = useCallback(async (): Promise<void> => { setIsProcessing(true); await regenerateLastAIResponse(); setIsProcessing(false); }, [regenerateLastAIResponse]); const messageRender = useCallback(({ message }: { message: ChatTypes.Message }) => <Message text={message.text} onRegenerateButtonClick={onRegenerateButtonClick} />, [onRegenerateButtonClick]); return ( <Chat className={isProcessing ? CHAT_DISABLED_CLASS : ''} dataSource={dataSource} reloadOnChange={false} showAvatar={false} showDayHeaders={false} user={user} height={710} onMessageEntered={onMessageEntered} alerts={alerts} typingUsers={typingUsers} messageRender={messageRender} speechToTextEnabled={true} /> ); }

import React, { useCallback, useState } from 'react'; import Chat from 'devextreme-react/chat'; import { loadMessages } from 'devextreme-react/common/core/localization'; import { user, assistant, CHAT_DISABLED_CLASS } from './data.js'; import Message from './Message.js'; import { dataSource, useApi } from './useApi.js'; loadMessages({ en: { 'dxChat-emptyListMessage': 'Chat is Empty', 'dxChat-emptyListPrompt': 'AI Assistant is ready to answer your questions.', 'dxChat-textareaPlaceholder': 'Ask AI Assistant...', }, }); export default function App() { const { alerts, insertMessage, fetchAIResponse, regenerateLastAIResponse, } = useApi(); const [typingUsers, setTypingUsers] = useState([]); const [isProcessing, setIsProcessing] = useState(false); const processAIRequest = useCallback( async (message) => { setIsProcessing(true); setTypingUsers([assistant]); await fetchAIResponse(message); setTypingUsers([]); setIsProcessing(false); }, [fetchAIResponse], ); const onMessageEntered = useCallback( async ({ message, event }) => { insertMessage({ id: Date.now(), ...message }); if (!alerts.length) { (event?.target).blur(); await processAIRequest(message); (event?.target).focus(); } }, [insertMessage, alerts.length, processAIRequest], ); const onRegenerateButtonClick = useCallback(async () => { setIsProcessing(true); await regenerateLastAIResponse(); setIsProcessing(false); }, [regenerateLastAIResponse]); const messageRender = useCallback( ({ message }) => ( <Message text={message.text} onRegenerateButtonClick={onRegenerateButtonClick} /> ), [onRegenerateButtonClick], ); return ( <Chat className={isProcessing ? CHAT_DISABLED_CLASS : ''} dataSource={dataSource} reloadOnChange={false} showAvatar={false} showDayHeaders={false} user={user} height={710} onMessageEntered={onMessageEntered} alerts={alerts} typingUsers={typingUsers} messageRender={messageRender} speechToTextEnabled={true} /> ); }

import React, { useCallback, useState } from 'react'; import type { FC } from 'react'; import { Button, type ButtonTypes } from 'devextreme-react/button'; import { unified } from 'unified'; import remarkParse from 'remark-parse'; import remarkRehype from 'remark-rehype'; import rehypeMinifyWhitespace from 'rehype-minify-whitespace'; import rehypeStringify from 'rehype-stringify'; import HTMLReactParser from 'html-react-parser'; import { REGENERATION_TEXT } from './data.ts'; function convertToHtml(value: string): string { return unified() .use(remarkParse) .use(remarkRehype) .use(rehypeMinifyWhitespace) .use(rehypeStringify) .processSync(value) .toString(); } interface MessageProps { text: string; onRegenerateButtonClick: ButtonTypes.Properties['onClick']; } const Message: FC<MessageProps> = ({ text, onRegenerateButtonClick }: MessageProps) => { const [icon, setIcon] = useState<string>('copy'); const onCopyButtonClick = useCallback(() => { navigator.clipboard?.writeText(text); setIcon('check'); setTimeout(() => { setIcon('copy'); }, 2500); }, [text]); if (text === REGENERATION_TEXT) { return <span>{REGENERATION_TEXT}</span>; } return ( <> <div className='chat-messagebubble-text'> {HTMLReactParser(convertToHtml(text))} </div> <div className='bubble-button-container'> <Button icon={icon} stylingMode='text' hint='Copy' onClick={onCopyButtonClick} /> <Button icon='refresh' stylingMode='text' hint='Regenerate' onClick={onRegenerateButtonClick} /> </div> </> ); }; export default Message;

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );

import type { ChatTypes } from 'devextreme-react/chat'; export const REGENERATION_TEXT = 'Regeneration...'; export const CHAT_DISABLED_CLASS = 'chat-disabled'; export const ALERT_TIMEOUT = 1000 * 60; export const user: ChatTypes.User = { id: 'user', }; export const assistant: ChatTypes.User = { id: 'assistant', name: 'Virtual Assistant', };

import { AzureOpenAI, OpenAI } from 'openai'; import { type AIResponse } from 'devextreme-react/common/ai-integration'; export type AIMessage = ( OpenAI.ChatCompletionUserMessageParam | OpenAI.ChatCompletionSystemMessageParam | OpenAI.ChatCompletionAssistantMessageParam) & { content: string; }; const AzureOpenAIConfig = { dangerouslyAllowBrowser: true, deployment: 'demo-mini', apiVersion: '2024-02-01', endpoint: 'https://public-api.devexpress.com/demo-openai', apiKey: 'DEMO', }; const chatService = new AzureOpenAI(AzureOpenAIConfig); const wait = (delay: number): Promise<void> => new Promise((resolve): void => { setTimeout(resolve, delay); }); export async function getAIResponse(messages: AIMessage[], delay?: number): Promise<AIResponse> { const params = { messages, model: AzureOpenAIConfig.deployment, max_completion_tokens: 1000, temperature: 0.7, }; const response = await chatService.chat.completions.create(params); const data = { choices: response.choices }; if (delay) { await wait(delay); } return data.choices[0].message?.content ?? ''; }

import { useCallback, useState } from 'react'; import type { ChatTypes } from 'devextreme-react/chat'; import { CustomStore, DataSource } from 'devextreme-react/common/data'; import { ALERT_TIMEOUT, assistant, REGENERATION_TEXT, } from './data.ts'; import { getAIResponse } from './service.ts'; import type { AIMessage } from './service.ts'; const store: ChatTypes.Message[] = []; const customStore = new CustomStore({ key: 'id', load: (): Promise<ChatTypes.Message[]> => new Promise((resolve) => { setTimeout(() => { resolve([...store]); }, 0); }), insert: (message: ChatTypes.Message): Promise<ChatTypes.Message> => new Promise((resolve) => { setTimeout(() => { store.push(message); resolve(message); }); }), }); export const dataSource = new DataSource({ store: customStore, paginate: false, }); const dataItemToMessage = (item: ChatTypes.Message): AIMessage => ({ role: item.author?.id as AIMessage['role'], content: item.text, }); const getMessageHistory = (): AIMessage[] => [...dataSource.items()].map(dataItemToMessage); export const useApi = () => { const [alerts, setAlerts] = useState<ChatTypes.Alert[]>([]); const insertMessage = useCallback((data: ChatTypes.Message): void => { dataSource.store().push([{ type: 'insert', data }]); }, []); const updateLastMessageContent = useCallback((text: string): void => { const lastMessage = dataSource.items().at(-1); dataSource.store().push([{ type: 'update', key: lastMessage.id, data: { text }, }]); }, []); const alertLimitReached = useCallback((): void => { setAlerts([{ message: 'Request limit reached, try again in a minute.', }]); setTimeout(() => { setAlerts([]); }, ALERT_TIMEOUT); }, []); const fetchAIResponse = useCallback(async (message: ChatTypes.Message): Promise<void> => { const messages = [...getMessageHistory(), dataItemToMessage(message)]; try { const aiResponse = await getAIResponse(messages, 200); insertMessage({ id: Date.now(), timestamp: new Date(), author: assistant, text: aiResponse, }); } catch { alertLimitReached(); } }, [alertLimitReached, insertMessage]); const regenerateLastAIResponse = useCallback(async (): Promise<void> => { const messageHistory = getMessageHistory(); updateLastMessageContent(REGENERATION_TEXT); try { const aiResponse = await getAIResponse(messageHistory.slice(0, -1)); if (typeof aiResponse === 'string') { updateLastMessageContent(aiResponse); } } catch { updateLastMessageContent(messageHistory.at(-1)?.content as string); alertLimitReached(); } }, [alertLimitReached, updateLastMessageContent]); return { alerts, insertMessage, fetchAIResponse, regenerateLastAIResponse, }; };

import React, { useCallback, useState } from 'react'; import { Button } from 'devextreme-react/button'; import { unified } from 'unified'; import remarkParse from 'remark-parse'; import remarkRehype from 'remark-rehype'; import rehypeMinifyWhitespace from 'rehype-minify-whitespace'; import rehypeStringify from 'rehype-stringify'; import HTMLReactParser from 'html-react-parser'; import { REGENERATION_TEXT } from './data.js'; function convertToHtml(value) { return unified() .use(remarkParse) .use(remarkRehype) .use(rehypeMinifyWhitespace) .use(rehypeStringify) .processSync(value) .toString(); } const Message = ({ text, onRegenerateButtonClick }) => { const [icon, setIcon] = useState('copy'); const onCopyButtonClick = useCallback(() => { navigator.clipboard?.writeText(text); setIcon('check'); setTimeout(() => { setIcon('copy'); }, 2500); }, [text]); if (text === REGENERATION_TEXT) { return <span>{REGENERATION_TEXT}</span>; } return ( <> <div className="chat-messagebubble-text">{HTMLReactParser(convertToHtml(text))}</div> <div className="bubble-button-container"> <Button icon={icon} stylingMode="text" hint="Copy" onClick={onCopyButtonClick} /> <Button icon="refresh" stylingMode="text" hint="Regenerate" onClick={onRegenerateButtonClick} /> </div> </> ); }; export default Message;

import { AzureOpenAI } from 'openai'; const AzureOpenAIConfig = { dangerouslyAllowBrowser: true, deployment: 'demo-mini', apiVersion: '2024-02-01', endpoint: 'https://public-api.devexpress.com/demo-openai', apiKey: 'DEMO', }; const chatService = new AzureOpenAI(AzureOpenAIConfig); const wait = (delay) => new Promise((resolve) => { setTimeout(resolve, delay); }); export async function getAIResponse(messages, delay) { const params = { messages, model: AzureOpenAIConfig.deployment, max_completion_tokens: 1000, temperature: 0.7, }; const response = await chatService.chat.completions.create(params); const data = { choices: response.choices }; if (delay) { await wait(delay); } return data.choices[0].message?.content ?? ''; }

import { useCallback, useState } from 'react'; import { CustomStore, DataSource } from 'devextreme-react/common/data'; import { ALERT_TIMEOUT, assistant, REGENERATION_TEXT } from './data.js'; import { getAIResponse } from './service.js'; const store = []; const customStore = new CustomStore({ key: 'id', load: () => new Promise((resolve) => { setTimeout(() => { resolve([...store]); }, 0); }), insert: (message) => new Promise((resolve) => { setTimeout(() => { store.push(message); resolve(message); }); }), }); export const dataSource = new DataSource({ store: customStore, paginate: false, }); const dataItemToMessage = (item) => ({ role: item.author?.id, content: item.text, }); const getMessageHistory = () => [...dataSource.items()].map(dataItemToMessage); export const useApi = () => { const [alerts, setAlerts] = useState([]); const insertMessage = useCallback((data) => { dataSource.store().push([{ type: 'insert', data }]); }, []); const updateLastMessageContent = useCallback((text) => { const lastMessage = dataSource.items().at(-1); dataSource.store().push([ { type: 'update', key: lastMessage.id, data: { text }, }, ]); }, []); const alertLimitReached = useCallback(() => { setAlerts([ { message: 'Request limit reached, try again in a minute.', }, ]); setTimeout(() => { setAlerts([]); }, ALERT_TIMEOUT); }, []); const fetchAIResponse = useCallback( async (message) => { const messages = [...getMessageHistory(), dataItemToMessage(message)]; try { const aiResponse = await getAIResponse(messages, 200); insertMessage({ id: Date.now(), timestamp: new Date(), author: assistant, text: aiResponse, }); } catch { alertLimitReached(); } }, [alertLimitReached, insertMessage], ); const regenerateLastAIResponse = useCallback(async () => { const messageHistory = getMessageHistory(); updateLastMessageContent(REGENERATION_TEXT); try { const aiResponse = await getAIResponse(messageHistory.slice(0, -1)); if (typeof aiResponse === 'string') { updateLastMessageContent(aiResponse); } } catch { updateLastMessageContent(messageHistory.at(-1)?.content); alertLimitReached(); } }, [alertLimitReached, updateLastMessageContent]); return { alerts, insertMessage, fetchAIResponse, regenerateLastAIResponse, }; };

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));

export const REGENERATION_TEXT = 'Regeneration...'; export const CHAT_DISABLED_CLASS = 'chat-disabled'; export const ALERT_TIMEOUT = 1000 * 60; export const user = { id: 'user', }; export const assistant = { id: 'assistant', name: 'Virtual Assistant', };

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.3/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>

#app { display: flex; justify-content: center; } .dx-chat { max-width: 900px; } .dx-chat-messagelist-empty-image { display: none; } .dx-chat-messagelist-empty-message { font-size: var(--dx-font-size-heading-5); } .dx-chat-messagebubble-content, .chat-messagebubble-text { display: flex; flex-direction: column; } .bubble-button-container { display: none; } .dx-button { display: inline-block; color: var(--dx-color-icon); } .dx-chat-messagegroup-alignment-start:last-child .dx-chat-messagebubble:last-child .bubble-button-container { display: flex; gap: 4px; margin-top: 8px; } .dx-chat-messagebubble-content > div > p:first-child { margin-top: 0; } .dx-chat-messagebubble-content > div > p:last-child { margin-bottom: 0; } .dx-chat-messagebubble-content h1, .dx-chat-messagebubble-content h2, .dx-chat-messagebubble-content h3, .dx-chat-messagebubble-content h4, .dx-chat-messagebubble-content h5, .dx-chat-messagebubble-content h6 { font-size: revert; font-weight: revert; } .chat-disabled .dx-chat-messagebox { opacity: 0.5; pointer-events: none; }

Custom Message Template

The Chat specifies a messageTemplate that displays "Copy" and "Regenerate" buttons in bot messages.

Response Format Conversion: Markdown to HTML

The AI model outputs responses in Markdown, while the Chat requires HTML output. This example uses the unified plugin library to convert response content. Review convertToHtml function code for implementation details.

Default Caption Customization

The Chat component in this demo displays modified captions when the conversation is empty. The demo uses localization techniques to alter built-in text.

Speech Recognition

Users can enter voice-driven messages when speechToTextEnabled is set to true. Our Chat component uses Web Speech APIs for speech recognition. Use speechToTextOptions to define custom speech recognizer settings, handle related events, and customize the speech-to-text button appearance.