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>
.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.5/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="./bundle.css" />
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
<script src="bundles/vendor/vue.vendor.js"></script>
<script src="./bundle.js"></script>
</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.