Backend API
<template>
<div class="chat-container">
<DxChat
:height="710"
:data-source="dataSource"
:reload-on-change="false"
:show-avatar="false"
:show-day-headers="false"
:user="user"
:speech-to-text-enabled="true"
:typing-users="typingUsers"
:alerts="alerts"
:send-button-options="sendButtonOptions"
message-template="message"
empty-view-template="emptyView"
@message-entered="onMessageEntered($event)"
>
<template #message="{ data }">
<div
v-html="convertToHtml(data.message.text)"
class="chat-messagebubble-text"
/>
</template>
<template #emptyView="{ data }">
<div>
<div class="dx-chat-messagelist-empty-message">{{ data.texts.message }}</div>
<div class="dx-chat-messagelist-empty-prompt">{{ data.texts.prompt }}</div>
<div class="chat-suggestion-cards">
<button
v-for="card in suggestionCards"
:key="card.title"
type="button"
class="chat-suggestion-card"
@click="sendSuggestion(card.prompt)"
>
<div class="chat-suggestion-card-title">{{ card.title }}</div>
<div class="chat-suggestion-card-prompt">{{ card.description }}</div>
</button>
</div>
</div>
</template>
</DxChat>
</div>
</template>
<script setup lang="ts">
import { ref, computed, onBeforeMount } from 'vue';
import DxChat, { type DxChatTypes } from 'devextreme-vue/chat';
import { loadMessages } from 'devextreme-vue/common/core/localization';
import {
dictionary,
user,
assistant,
dataSource,
convertToHtml,
ALERT_TIMEOUT,
suggestionCards,
} from './data.ts';
import { getAIResponseStream } from './service.ts';
import type { AIMessage } from './service.ts';
const typingUsers = ref<DxChatTypes.User[]>([]);
const alerts = ref<DxChatTypes.Alert[]>([]);
const isStreaming = ref(false);
let abortController: AbortController | null = null;
onBeforeMount(() => {
loadMessages(dictionary);
});
const sendButtonOptions = computed<DxChatTypes.SendButtonProperties>(() => (
isStreaming.value
? { action: 'custom', icon: 'stopfilled', onClick: stopStreaming }
: { action: 'send', icon: 'arrowright', onClick: () => {} }
));
function insertMessage(data: DxChatTypes.Message): void {
dataSource.store().push([{ type: 'insert', data }]);
}
function updateMessageText(id: number, text: string): void {
dataSource.store().push([{ type: 'update', key: id, data: { text } }]);
}
function insertAssistantPlaceholder(): number {
const id = Date.now();
dataSource.store().push([{
type: 'insert',
data: { id, timestamp: new Date(), author: assistant, text: '' },
}]);
return id;
}
function alertLimitReached(): void {
alerts.value = [{ message: 'Request limit reached, try again in a minute.' }];
setTimeout(() => { alerts.value = []; }, ALERT_TIMEOUT);
}
function createDelayedRenderer(onRender: (chunk: string) => void, delay = 20) {
let queue: string[] = [];
let rendering = false;
function processQueue() {
if (!queue.length) { rendering = false; return; }
rendering = true;
const chunk = queue.shift();
if (chunk !== undefined) { onRender(chunk); }
setTimeout(processQueue, delay);
}
return {
pushChunk(chunk: string) {
queue.push(chunk);
if (!rendering) { processQueue(); }
},
stop() { queue = []; rendering = false; },
};
}
function stopStreaming(): void {
abortController?.abort();
}
async function fetchAIResponse(message: DxChatTypes.Message): Promise<void> {
const dataItemToAIMessage = (item: DxChatTypes.Message): AIMessage => ({
role: item.author?.id as AIMessage['role'],
content: item.text,
});
const messages: AIMessage[] = [
...dataSource.items().map(dataItemToAIMessage),
dataItemToAIMessage(message),
];
abortController = new AbortController();
setTimeout(() => { isStreaming.value = true; }, 0);
typingUsers.value = [assistant];
let assistantId: number | undefined;
let buffer = '';
let typingCleared = false;
const renderer = createDelayedRenderer((chunk) => {
if (!typingCleared) {
typingUsers.value = [];
typingCleared = true;
}
if (assistantId === undefined) {
assistantId = insertAssistantPlaceholder();
}
buffer += chunk;
updateMessageText(assistantId, buffer);
});
try {
await getAIResponseStream(messages, {
onAborted: () => renderer.stop(),
onDelta: renderer.pushChunk,
signal: abortController.signal,
});
typingUsers.value = [];
} catch (e: unknown) {
typingUsers.value = [];
if ((e as Error)?.name !== 'AbortError' && assistantId !== undefined) {
updateMessageText(assistantId, '');
alertLimitReached();
}
} finally {
abortController = null;
isStreaming.value = false;
}
}
function onMessageEntered({ message }: DxChatTypes.MessageEnteredEvent): void {
insertMessage({ id: Date.now(), ...message });
if (!alerts.value.length) {
fetchAIResponse(message);
}
}
function sendSuggestion(prompt: string): void {
const message: DxChatTypes.Message = {
id: Date.now(),
timestamp: new Date(),
author: user,
text: prompt,
};
insertMessage(message);
if (!alerts.value.length) {
fetchAIResponse(message);
}
}
</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;
}
.dx-chat-messagebubble-content > div > p:first-child {
margin-top: 0;
}
.dx-chat-messagebubble-content > div > p:last-child {
margin-bottom: 0;
}
.chat-messagebubble-text pre {
white-space: pre-wrap;
overflow-wrap: break-word;
}
.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-suggestion-cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
margin-top: 32px;
width: 100%;
}
.chat-suggestion-card {
border-radius: 12px;
padding: 16px;
border: 1px solid #EBEBEB;
background: #FAFAFA;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
flex: 0 1 230px;
max-width: 230px;
text-align: left;
cursor: pointer;
transition: 0.2s ease;
width: 230px;
}
.chat-suggestion-card:hover {
border: 1px solid #E0E0E0;
background: #F5F5F5;
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.04), 0 4px 24px 0 rgba(0, 0, 0, 0.02);
}
.chat-suggestion-card-title {
color: #242424;
font-size: 12px;
font-weight: 600;
line-height: 16px;
}
.chat-suggestion-card-prompt {
color: #616161;
font-size: 12px;
font-weight: 400;
line-height: 16px;
}
.dx-chat-messagelist-empty-prompt {
margin-top: 4px;
}
</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';
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 ALERT_TIMEOUT = 1000 * 60;
export const user: DxChatTypes.User = {
id: 'user',
};
export const assistant: DxChatTypes.User = {
id: 'assistant',
name: 'AI Assistant',
};
export const suggestionCards = [
{
title: '💡 What is DevExtreme?',
description: 'What is DevExtreme and how can it help me build modern web apps?',
prompt: 'What is DevExtreme, and which components and frameworks does it support?',
},
{
title: '🚀 Get Started with DevExtreme',
description: 'How do I get started with DevExtreme in my project?',
prompt: 'How can I get started with DevExtreme? Include instructions for library installation, linking required CSS/assets, applying an application theme, and coding a simple working app.',
},
{
title: '📄 DevExtreme Licensing',
description: 'What are the licensing options for DevExtreme?',
prompt: 'Which DevExtreme license do I need for a commercial project? What licensing options are available?',
},
];
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): string {
return unified()
.use(remarkParse)
.use(remarkRehype)
.use(rehypeMinifyWhitespace)
.use(rehypeStringify)
.processSync(value)
.toString();
}
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
import { AzureOpenAI, OpenAI } from 'openai';
export type AIMessage = (
OpenAI.ChatCompletionUserMessageParam
| OpenAI.ChatCompletionSystemMessageParam
| OpenAI.ChatCompletionAssistantMessageParam) & {
content: string;
};
export interface GetAIResponseStreamOptions {
onAborted: () => void;
onDelta: (delta: string) => void;
onError?: (error: unknown) => void;
signal: AbortSignal;
}
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 getAIResponseStream(
messages: AIMessage[],
{ onAborted, onDelta, onError, signal }: GetAIResponseStreamOptions,
): Promise<void> {
const params = {
messages,
model: AzureOpenAIConfig.deployment,
max_completion_tokens: 1000,
temperature: 0.7,
stream: true as const,
};
try {
const stream = await chatService.chat.completions.create(params, { signal });
for await (const event of stream) {
const delta = event.choices?.[0]?.delta?.content;
if (delta) {
onDelta(delta);
}
}
if (signal.aborted) {
onAborted();
}
} catch (e) {
if ((e as Error)?.name === 'AbortError') {
onAborted();
}
onError?.(e);
throw e;
}
}
<!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>
Streaming AI Responses
The demo calls the Azure OpenAI Chat Completions API with stream: true. Incoming delta chunks are passed through a createDelayedRenderer queue with a short display delay between chunks to produce a smooth typing effect. The demo appends each chunk to a growing buffer and updates the assistant message in the data store with every render cycle via a dataSource.store().push(...) call.
Stopping a Stream
The demo creates an AbortController before each request and passes its signal (AbortSignal) to the Azure OpenAI SDK in the request options. When the user clicks the stop button, the demo calls abortController.abort() to cancel the in-progress HTTP request.
The sendButtonOptions property switches the button's action property to 'custom' and the icon to 'stopfilled' while streaming is active, then reverts to the default (send) configuration once streaming ends.
Custom Empty View
The Chat component specifies an emptyViewTemplate that replaces the default empty state with custom suggestion cards. Clicking a card creates a message and triggers demo message send operations directly, bypassing text input.