Backend API
import React, { useCallback, useMemo } 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,
} from './data.ts';
import Message from './Message.tsx';
import EmptyView from './EmptyView.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,
typingUsers,
isStreaming,
insertMessage,
fetchAIResponse,
stopStreaming,
} = useApi();
const onMessageEntered = useCallback(async ({ message }: ChatTypes.MessageEnteredEvent): Promise<void> => {
insertMessage({ id: Date.now(), ...message });
if (!alerts.length) {
await fetchAIResponse(message);
}
}, [insertMessage, alerts.length, fetchAIResponse]);
const sendSuggestion = useCallback((prompt: string): void => {
const message: ChatTypes.Message = {
id: Date.now(),
timestamp: new Date(),
author: user,
text: prompt,
};
insertMessage(message);
if (!alerts.length) {
fetchAIResponse(message);
}
}, [insertMessage, alerts.length, fetchAIResponse]);
const messageRender = useCallback(({ message }: { message: ChatTypes.Message }) => <Message text={message.text} />, []);
const emptyViewRender = useCallback(({ texts }: ChatTypes.EmptyViewTemplateData) => (
<EmptyView texts={texts} onSuggestionClick={sendSuggestion} />
), [sendSuggestion]);
const sendButtonOptions = useMemo<ChatTypes.SendButtonProperties>(() => (isStreaming ? {
action: 'custom',
icon: 'stopfilled',
onClick: stopStreaming,
} : {
action: 'send',
icon: 'arrowright',
onClick: () => {},
}), [isStreaming, stopStreaming]);
return (
<Chat
dataSource={dataSource}
reloadOnChange={false}
showAvatar={false}
showDayHeaders={false}
user={user}
height={710}
onMessageEntered={onMessageEntered}
alerts={alerts}
typingUsers={typingUsers}
messageRender={messageRender}
emptyViewRender={emptyViewRender}
sendButtonOptions={sendButtonOptions}
speechToTextEnabled={true}
/>
);
}
import React, { useCallback, useMemo } from 'react';
import Chat from 'devextreme-react/chat';
import { loadMessages } from 'devextreme-react/common/core/localization';
import { user } from './data.js';
import Message from './Message.js';
import EmptyView from './EmptyView.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, typingUsers, isStreaming, insertMessage, fetchAIResponse, stopStreaming,
} =
useApi();
const onMessageEntered = useCallback(
async ({ message }) => {
insertMessage({ id: Date.now(), ...message });
if (!alerts.length) {
await fetchAIResponse(message);
}
},
[insertMessage, alerts.length, fetchAIResponse],
);
const sendSuggestion = useCallback(
(prompt) => {
const message = {
id: Date.now(),
timestamp: new Date(),
author: user,
text: prompt,
};
insertMessage(message);
if (!alerts.length) {
fetchAIResponse(message);
}
},
[insertMessage, alerts.length, fetchAIResponse],
);
const messageRender = useCallback(({ message }) => <Message text={message.text} />, []);
const emptyViewRender = useCallback(
({ texts }) => (
<EmptyView
texts={texts}
onSuggestionClick={sendSuggestion}
/>
),
[sendSuggestion],
);
const sendButtonOptions = useMemo(
() =>
isStreaming
? {
action: 'custom',
icon: 'stopfilled',
onClick: stopStreaming,
}
: {
action: 'send',
icon: 'arrowright',
onClick: () => {},
},
[isStreaming, stopStreaming],
);
return (
<Chat
dataSource={dataSource}
reloadOnChange={false}
showAvatar={false}
showDayHeaders={false}
user={user}
height={710}
onMessageEntered={onMessageEntered}
alerts={alerts}
typingUsers={typingUsers}
messageRender={messageRender}
emptyViewRender={emptyViewRender}
sendButtonOptions={sendButtonOptions}
speechToTextEnabled={true}
/>
);
}
import React from 'react';
import type { FC } from 'react';
import type { ChatTypes } from 'devextreme-react/chat';
import { suggestionCards } from './data.ts';
interface EmptyViewProps {
texts: ChatTypes.EmptyViewTemplateData['texts'];
onSuggestionClick: (prompt: string) => void;
}
const EmptyView: FC<EmptyViewProps> = ({ texts, onSuggestionClick }: EmptyViewProps) => (
<div>
<div className='dx-chat-messagelist-empty-message'>{texts.message}</div>
<div className='dx-chat-messagelist-empty-prompt'>{texts.prompt}</div>
<div className='chat-suggestion-cards'>
{suggestionCards.map((card) => (
<button
key={card.title}
type='button'
className='chat-suggestion-card'
onClick={() => onSuggestionClick(card.prompt)}
>
<div className='chat-suggestion-card-title'>{card.title}</div>
<div className='chat-suggestion-card-prompt'>{card.description}</div>
</button>
))}
</div>
</div>
);
export default EmptyView;
import React from 'react';
import type { FC } from 'react';
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';
function convertToHtml(value: string): string {
return unified()
.use(remarkParse)
.use(remarkRehype)
.use(rehypeMinifyWhitespace)
.use(rehypeStringify)
.processSync(value)
.toString();
}
interface MessageProps {
text: string;
}
const Message: FC<MessageProps> = ({ text }: MessageProps) => (
<div className='chat-messagebubble-text'>
{HTMLReactParser(convertToHtml(text))}
</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 ALERT_TIMEOUT = 1000 * 60;
export const user: ChatTypes.User = {
id: 'user',
};
export const assistant: ChatTypes.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?',
},
];
import { AzureOpenAI, OpenAI } from 'openai';
export type AIMessage = (
OpenAI.ChatCompletionUserMessageParam
| OpenAI.ChatCompletionSystemMessageParam
| OpenAI.ChatCompletionAssistantMessageParam) & {
content: string;
};
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 });
// eslint-disable-next-line no-restricted-syntax
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;
}
}
import { useCallback, useRef, useState } from 'react';
import type { ChatTypes } from 'devextreme-react/chat';
import { CustomStore, DataSource } from 'devextreme-react/common/data';
import {
ALERT_TIMEOUT,
assistant,
} from './data.ts';
import { getAIResponseStream } 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);
interface DelayedRendererOptions {
delay?: number;
onRender: (chunk: string) => void;
}
function createDelayedRenderer({ delay = 20, onRender }: DelayedRendererOptions) {
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);
}
function pushChunk(chunk: string) {
queue.push(chunk);
if (!rendering) {
processQueue();
}
}
function stop() {
queue = [];
rendering = false;
}
return { pushChunk, stop };
}
export const useApi = () => {
const [alerts, setAlerts] = useState<ChatTypes.Alert[]>([]);
const [typingUsers, setTypingUsers] = useState<ChatTypes.User[]>([]);
const [isStreaming, setIsStreaming] = useState<boolean>(false);
const abortControllerRef = useRef<AbortController | null>(null);
const insertMessage = useCallback((data: ChatTypes.Message): void => {
dataSource.store().push([{ type: 'insert', data }]);
}, []);
const updateMessageText = useCallback((id: number, text: string): void => {
dataSource.store().push([{
type: 'update',
key: id,
data: { text },
}]);
}, []);
const insertAssistantPlaceholder = useCallback((): number => {
const id = Date.now();
dataSource.store().push([{
type: 'insert',
data: {
id,
timestamp: new Date(),
author: assistant,
text: '',
},
}]);
return id;
}, []);
const alertLimitReached = useCallback((): void => {
setAlerts([{
message: 'Request limit reached, try again in a minute.',
}]);
setTimeout(() => {
setAlerts([]);
}, ALERT_TIMEOUT);
}, []);
const stopStreaming = useCallback((): void => {
if (abortControllerRef.current) {
abortControllerRef.current.abort();
}
}, []);
const fetchAIResponse = useCallback(async (message: ChatTypes.Message): Promise<void> => {
const messages = [...getMessageHistory(), dataItemToMessage(message)];
abortControllerRef.current = new AbortController();
setTimeout(() => setIsStreaming(true), 0);
setTypingUsers([assistant]);
let assistantId: number | undefined;
let buffer = '';
let typingCleared = false;
const delayedRenderer = createDelayedRenderer({
onRender: (chunk: string) => {
if (!typingCleared) {
setTypingUsers([]);
typingCleared = true;
}
if (assistantId === undefined) {
assistantId = insertAssistantPlaceholder();
}
buffer += chunk;
updateMessageText(assistantId, buffer);
},
});
const onAborted = () => {
delayedRenderer.stop();
};
try {
await getAIResponseStream(messages, {
onAborted,
onDelta: delayedRenderer.pushChunk,
signal: abortControllerRef.current.signal,
});
setTypingUsers([]);
} catch (e: unknown) {
setTypingUsers([]);
if ((e as Error)?.name !== 'AbortError' && assistantId !== undefined) {
updateMessageText(assistantId, '');
alertLimitReached();
}
} finally {
abortControllerRef.current = null;
setIsStreaming(false);
}
}, [alertLimitReached, insertAssistantPlaceholder, updateMessageText]);
return {
alerts,
typingUsers,
isStreaming,
insertMessage,
fetchAIResponse,
stopStreaming,
};
};
window.exports = window.exports || {};
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
jsx: 'react',
},
meta: {
'react': {
'esModule': true,
},
'typescript': {
'exports': 'ts',
},
'devextreme/time_zone_utils.js': {
'esModule': true,
},
'devextreme/localization.js': {
'esModule': true,
},
'devextreme/viz/palette.js': {
'esModule': true,
},
'openai': {
'esModule': true,
},
'zod': {
'esModule': true,
},
'zod-to-json-schema': {
'esModule': true,
},
},
paths: {
'npm:': 'https://cdn.jsdelivr.net/npm/',
'bundles:': '../../../../bundles/',
'externals:': '../../../../bundles/externals/',
'anti-forgery:': '../../../../shared/anti-forgery/',
},
defaultExtension: 'js',
map: {
'anti-forgery': 'anti-forgery:fetch-override.js',
'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',
'react': 'npm:react@17.0.2/umd/react.development.js',
'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js',
'prop-types': 'npm:prop-types/prop-types.js',
'html-react-parser': 'npm:html-react-parser@1.4.14/dist/html-react-parser.min.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign',
'devextreme': 'npm:devextreme@link:../../packages/devextreme/artifacts/npm/devextreme/cjs',
'devextreme-react': 'npm:devextreme-react@link:../../packages/devextreme-react/npm/cjs',
'unified': 'externals:unified/unified.bundle.js',
'remark-parse': 'externals:unified/remark-parse.bundle.js',
'remark-rehype': 'externals:unified/remark-rehype.bundle.js',
'remark-stringify': 'externals:unified/remark-stringify.bundle.js',
'rehype-parse': 'externals:unified/rehype-parse.bundle.js',
'rehype-remark': 'externals:unified/rehype-remark.bundle.js',
'rehype-stringify': 'externals:unified/rehype-stringify.bundle.js',
'rehype-minify-whitespace': 'externals:unified/rehype-minify-whitespace.bundle.js',
'openai': 'externals:openai.bundle.js',
'zod': 'externals:zod.bundle.js',
'zod-to-json-schema': 'externals:zod-to-json-schema.bundle.js',
'devextreme-quill': 'npm:devextreme-quill@1.7.9/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.29/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.69/dist/dx-gantt.js',
'inferno': 'npm:inferno@8.2.3/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@8.2.3/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
'@preact/signals-core': 'npm:@preact/signals-core@1.14.1/dist/signals-core.min.js',
'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3',
// SystemJS plugins
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.8/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',
},
packages: {
'devextreme': {
defaultExtension: 'js',
},
'devextreme-react': {
main: 'index.js',
},
'devextreme-react/common': {
main: 'index.js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/common/core/events/utils': {
main: 'index',
},
'devextreme/localization/messages': {
format: 'json',
defaultExtension: 'json',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
window.process = {
env: {
NODE_ENV: 'production',
},
};
System.config(window.config);
// eslint-disable-next-line
const useTgzInCSB = ['openai'];
let packagesInfo = {
"openai": {
"version": "4.73.1"
},
"rehype-minify-whitespace": {
"version": "5.0.1"
},
"rehype-parse": {
"version": "8.0.5"
},
"rehype-remark": {
"version": "9.0.0"
},
"rehype-stringify": {
"version": "9.0.4"
},
"remark-parse": {
"version": "10.0.2"
},
"remark-rehype": {
"version": "10.1.0"
},
"remark-stringify": {
"version": "10.0.3"
},
"unified": {
"version": "10.1.2"
},
"zod": {
"version": "3.24.4"
},
"zod-to-json-schema": {
"version": "3.24.6"
}
};
import React from 'react';
import { suggestionCards } from './data.js';
const EmptyView = ({ texts, onSuggestionClick }) => (
<div>
<div className="dx-chat-messagelist-empty-message">{texts.message}</div>
<div className="dx-chat-messagelist-empty-prompt">{texts.prompt}</div>
<div className="chat-suggestion-cards">
{suggestionCards.map((card) => (
<button
key={card.title}
type="button"
className="chat-suggestion-card"
onClick={() => onSuggestionClick(card.prompt)}
>
<div className="chat-suggestion-card-title">{card.title}</div>
<div className="chat-suggestion-card-prompt">{card.description}</div>
</button>
))}
</div>
</div>
);
export default EmptyView;
import React from 'react';
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';
function convertToHtml(value) {
return unified()
.use(remarkParse)
.use(remarkRehype)
.use(rehypeMinifyWhitespace)
.use(rehypeStringify)
.processSync(value)
.toString();
}
const Message = ({ text }) => (
<div className="chat-messagebubble-text">{HTMLReactParser(convertToHtml(text))}</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);
export async function getAIResponseStream(messages, {
onAborted, onDelta, onError, signal,
}) {
const params = {
messages,
model: AzureOpenAIConfig.deployment,
max_completion_tokens: 1000,
temperature: 0.7,
stream: true,
};
try {
const stream = await chatService.chat.completions.create(params, { signal });
// eslint-disable-next-line no-restricted-syntax
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?.name === 'AbortError') {
onAborted();
}
onError?.(e);
throw e;
}
}
import { useCallback, useRef, useState } from 'react';
import { CustomStore, DataSource } from 'devextreme-react/common/data';
import { ALERT_TIMEOUT, assistant } from './data.js';
import { getAIResponseStream } 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);
function createDelayedRenderer({ delay = 20, onRender }) {
let queue = [];
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);
}
function pushChunk(chunk) {
queue.push(chunk);
if (!rendering) {
processQueue();
}
}
function stop() {
queue = [];
rendering = false;
}
return { pushChunk, stop };
}
export const useApi = () => {
const [alerts, setAlerts] = useState([]);
const [typingUsers, setTypingUsers] = useState([]);
const [isStreaming, setIsStreaming] = useState(false);
const abortControllerRef = useRef(null);
const insertMessage = useCallback((data) => {
dataSource.store().push([{ type: 'insert', data }]);
}, []);
const updateMessageText = useCallback((id, text) => {
dataSource.store().push([
{
type: 'update',
key: id,
data: { text },
},
]);
}, []);
const insertAssistantPlaceholder = useCallback(() => {
const id = Date.now();
dataSource.store().push([
{
type: 'insert',
data: {
id,
timestamp: new Date(),
author: assistant,
text: '',
},
},
]);
return id;
}, []);
const alertLimitReached = useCallback(() => {
setAlerts([
{
message: 'Request limit reached, try again in a minute.',
},
]);
setTimeout(() => {
setAlerts([]);
}, ALERT_TIMEOUT);
}, []);
const stopStreaming = useCallback(() => {
if (abortControllerRef.current) {
abortControllerRef.current.abort();
}
}, []);
const fetchAIResponse = useCallback(
async (message) => {
const messages = [...getMessageHistory(), dataItemToMessage(message)];
abortControllerRef.current = new AbortController();
setTimeout(() => setIsStreaming(true), 0);
setTypingUsers([assistant]);
let assistantId;
let buffer = '';
let typingCleared = false;
const delayedRenderer = createDelayedRenderer({
onRender: (chunk) => {
if (!typingCleared) {
setTypingUsers([]);
typingCleared = true;
}
if (assistantId === undefined) {
assistantId = insertAssistantPlaceholder();
}
buffer += chunk;
updateMessageText(assistantId, buffer);
},
});
const onAborted = () => {
delayedRenderer.stop();
};
try {
await getAIResponseStream(messages, {
onAborted,
onDelta: delayedRenderer.pushChunk,
signal: abortControllerRef.current.signal,
});
setTypingUsers([]);
} catch (e) {
setTypingUsers([]);
if (e?.name !== 'AbortError' && assistantId !== undefined) {
updateMessageText(assistantId, '');
alertLimitReached();
}
} finally {
abortControllerRef.current = null;
setIsStreaming(false);
}
},
[alertLimitReached, insertAssistantPlaceholder, updateMessageText],
);
return {
alerts,
typingUsers,
isStreaming,
insertMessage,
fetchAIResponse,
stopStreaming,
};
};
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
export const ALERT_TIMEOUT = 1000 * 60;
export const user = {
id: 'user',
};
export const assistant = {
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?',
},
];
<!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;
}
.dx-button {
display: inline-block;
color: var(--dx-color-icon);
}
.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;
}
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.