Vue 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.

Backend API

<template> <div class="chat-container" > <DxChat :class="{'chat-disabled' : isDisabled == true }" ref="chatElement" :height="710" :data-source="dataSource" :reload-on-change="false" :show-avatar="false" :show-day-headers="false" :user="user" :speech-to-text-enabled="true" message-template="message" v-model:typing-users="typingUsers" v-model:alerts="alerts" @message-entered="onMessageEntered($event)" > <template #message="{ data }"> <span v-if="data.message.text === REGENERATION_TEXT" > {{ REGENERATION_TEXT }} </span> <template v-else> <div v-html="convertToHtml(data.message.text)" class="chat-messagebubble-text" /> <div class="bubble-button-container"> <DxButton :icon="copyButtonIcon" styling-mode="text" hint="Copy" @click="onCopyButtonClick(data.message)" /> <DxButton icon="refresh" styling-mode="text" hint="Regenerate" @click="onRegenerateButtonClick()" /> </div> </template> </template> </DxChat> </div> </template> <script setup lang="ts"> import { ref, onBeforeMount } from 'vue'; import DxChat, { type DxChatTypes } from 'devextreme-vue/chat'; import DxButton from 'devextreme-vue/button'; import { loadMessages } from 'devextreme-vue/common/core/localization'; import { type Events } from 'devextreme-vue/common/core'; import { dictionary, messages, user, assistant, dataSource, convertToHtml, REGENERATION_TEXT, ALERT_TIMEOUT, } from './data.ts'; import { getAIResponse } from './service.ts'; const typingUsers = ref<{ id: string, name: string }[]>([]); const alerts = ref<{ message: string }[]>([]); const isDisabled = ref(false); const copyButtonIcon = ref('copy'); onBeforeMount(() => { loadMessages(dictionary); }); function toggleDisabledState(disabled: boolean, event?: Events.EventObject): void { isDisabled.value = disabled; if (disabled) { (event?.target as HTMLElement)?.blur(); } else { (event?.target as HTMLElement)?.focus(); } } function updateLastMessage(text: string = REGENERATION_TEXT): void { const items = dataSource.items(); const lastMessage = items.at(-1); dataSource.store().push([{ type: 'update', key: lastMessage.id, data: { text }, }]); } function renderAssistantMessage(text: string): void { const message = { id: Date.now(), timestamp: new Date(), author: assistant, text, }; dataSource.store().push([{ type: 'insert', data: message }]); } async function processMessageSending( message: DxChatTypes.TextMessage, event: Events.EventObject | undefined, ): Promise<void> { toggleDisabledState(true, event); messages.push({ role: 'user', content: message.text ?? '' }); typingUsers.value = [assistant]; try { const aiResponse = await getAIResponse(messages) as string; setTimeout(() => { typingUsers.value = []; messages.push({ role: 'assistant', content: aiResponse }); renderAssistantMessage(aiResponse); }, 200); } catch { typingUsers.value = []; messages.pop(); alertLimitReached(); } finally { toggleDisabledState(false, event); } } function alertLimitReached(): void { alerts.value = [{ message: 'Request limit reached, try again in a minute.', }]; setTimeout(() => { alerts.value = []; }, ALERT_TIMEOUT); } async function regenerate(): Promise<void> { toggleDisabledState(true); const lastMessage = messages.at(-1); try { const aiResponse = await getAIResponse(messages.slice(0, -1)) as string; updateLastMessage(aiResponse); if (lastMessage?.content) { lastMessage.content = aiResponse; } } catch { if (lastMessage?.content) { updateLastMessage(lastMessage.content); } alertLimitReached(); } finally { toggleDisabledState(false); } } function onMessageEntered({ message, event }: DxChatTypes.MessageEnteredEvent): void { dataSource.store().push([{ type: 'insert', data: { id: Date.now(), ...message } }]); if (!alerts.value.length) { processMessageSending(message, event); } } function onCopyButtonClick(message: { text: string }): void { navigator.clipboard?.writeText(message.text); copyButtonIcon.value = 'check'; setTimeout(() => { copyButtonIcon.value = 'copy'; }, 2500); } function onRegenerateButtonClick(): void { updateLastMessage(); regenerate(); } </script> <style scoped> .chat-container { width: 100%; display: flex; align-items: center; 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; } </style>

import { CustomStore, DataSource } from 'devextreme-vue/common/data'; import { type DxChatTypes } from 'devextreme-vue/chat'; import { unified } from 'unified'; import remarkParse from 'remark-parse'; import remarkRehype from 'remark-rehype'; import rehypeStringify from 'rehype-stringify'; import rehypeMinifyWhitespace from 'rehype-minify-whitespace'; import { type AIMessage } from './service'; export const dictionary = { en: { 'dxChat-emptyListMessage': 'Chat is Empty', 'dxChat-emptyListPrompt': 'AI Assistant is ready to answer your questions.', 'dxChat-textareaPlaceholder': 'Ask AI Assistant...', }, }; 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', }; export const messages: AIMessage[] = []; const store: DxChatTypes.Message[] = []; const customStore = new CustomStore<DxChatTypes.Message>({ key: 'id', load: () => new Promise((resolve) => { setTimeout(() => { resolve([...store]); }, 0); }), insert: (message: DxChatTypes.Message) => new Promise((resolve) => { setTimeout(() => { store.push(message); resolve(message); }); }), }); export const dataSource = new DataSource({ store: customStore, paginate: false, }); export function convertToHtml(value: string) { const result = unified() .use(remarkParse) .use(remarkRehype) .use(rehypeMinifyWhitespace) .use(rehypeStringify) .processSync(value) .toString(); return result; }

import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');

import { AzureOpenAI, OpenAI } from 'openai'; import { type AIResponse } from 'devextreme-vue/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); export async function getAIResponse(messages: AIMessage[]): Promise<AIResponse> { const params: Record<string, any> = { messages, model: AzureOpenAIConfig.deployment, max_completion_tokens: 1000, temperature: 0.7, }; const response = await chatService.chat.completions.create(params as any); const data = { choices: response.choices }; return data.choices[0].message?.content || ''; }

<!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" /> <script type="module"> import * as vueCompilerSFC from "https://cdn.jsdelivr.net/npm/@vue/compiler-sfc@3.4.27/dist/compiler-sfc.esm-browser.js"; window.vueCompilerSFC = vueCompilerSFC; </script> <script src="https://cdn.jsdelivr.net/npm/typescript@5.9.3/lib/typescript.js"></script> <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.ts"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>

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.