From 1c28f098ade128e455ae77fafcc054850f6076bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marker=20dao=20=C2=AE?= <youdontknow@marker-dao.eth>
Date: Fri, 9 Jan 2026 16:35:46 +0000
Subject: [PATCH 1/8] refactor(htmleditor && chat): Angular

---
 .../Angular/app/ai.service.ts                 | 33 ++++++++++
 .../Angular/app/app.component.ts              |  2 +
 .../Angular/app/app.service.ts                | 28 ++------
 .../AITextEditing/Angular/app/ai.service.ts   | 64 +++++++++++++++++++
 .../Angular/app/app.component.ts              | 61 ++----------------
 .../AITextEditing/Angular/app/app.service.ts  | 12 ----
 6 files changed, 109 insertions(+), 91 deletions(-)
 create mode 100644 apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/ai.service.ts
 create mode 100644 apps/demos/Demos/HtmlEditor/AITextEditing/Angular/app/ai.service.ts

diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/ai.service.ts b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/ai.service.ts
new file mode 100644
index 000000000000..774a600bb93b
--- /dev/null
+++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/ai.service.ts
@@ -0,0 +1,33 @@
+import { Injectable } from '@angular/core';
+import { AzureOpenAI } from 'openai';
+
+@Injectable()
+export class AiService {
+  chatService: AzureOpenAI;
+
+  AzureOpenAIConfig = {
+    dangerouslyAllowBrowser: true,
+    deployment: 'gpt-4o-mini',
+    apiVersion: '2024-02-01',
+    endpoint: 'https://public-api.devexpress.com/demo-openai',
+    apiKey: 'DEMO',
+  };
+
+  constructor() {
+    this.chatService = new AzureOpenAI(this.AzureOpenAIConfig);
+  }
+
+  async getAIResponse(messages: any[]) {
+    const params = {
+      messages,
+      model: this.AzureOpenAIConfig.deployment,
+      max_tokens: 1000,
+      temperature: 0.7,
+    };
+
+    const response = await this.chatService.chat.completions.create(params);
+    const data = { choices: response.choices };
+
+    return data.choices[0].message?.content;
+  }
+}
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.component.ts b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.component.ts
index beff93d55d76..6488d0f2fbb5 100644
--- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.component.ts
@@ -7,6 +7,7 @@ import { Observable } from 'rxjs';
 import { loadMessages } from 'devextreme-angular/common/core/localization';
 import { DataSource } from 'devextreme-angular/common/data';
 import { AppService } from './app.service';
+import { AiService } from './ai.service';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
@@ -107,5 +108,6 @@ bootstrapApplication(AppComponent, {
   providers: [
     provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
     AppService,
+    AiService,
   ],
 });
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.service.ts b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.service.ts
index b3ee9fe224d7..48a51f0645d3 100644
--- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.service.ts
+++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.service.ts
@@ -1,6 +1,5 @@
 import { Injectable } from '@angular/core';
 import { Observable, BehaviorSubject } from 'rxjs';
-import { AzureOpenAI } from 'openai';
 import { unified } from 'unified';
 import remarkParse from 'remark-parse';
 import remarkRehype from 'remark-rehype';
@@ -8,21 +7,14 @@ import rehypeStringify from 'rehype-stringify';
 import rehypeMinifyWhitespace from 'rehype-minify-whitespace';
 import { type DxChatTypes } from 'devextreme-angular/ui/chat';
 import { DataSource, CustomStore } from 'devextreme-angular/common/data';
+import { AiService } from './ai.service';
 
 @Injectable({
   providedIn: 'root',
 })
 
 export class AppService {
-  chatService: AzureOpenAI;
-
-  AzureOpenAIConfig = {
-    dangerouslyAllowBrowser: true,
-    deployment: 'gpt-4o-mini',
-    apiVersion: '2024-02-01',
-    endpoint: 'https://public-api.devexpress.com/demo-openai',
-    apiKey: 'DEMO',
-  };
+  aiService: AiService;
 
   REGENERATION_TEXT = 'Regeneration...';
 
@@ -51,8 +43,8 @@ export class AppService {
 
   alertsSubject: BehaviorSubject<DxChatTypes.Alert[]> = new BehaviorSubject([]);
 
-  constructor() {
-    this.chatService = new AzureOpenAI(this.AzureOpenAIConfig);
+  constructor(aiService: AiService) {
+    this.aiService = aiService;
     this.initDataSource();
     this.typingUsersSubject.next([]);
     this.alertsSubject.next([]);
@@ -99,17 +91,7 @@ export class AppService {
   }
 
   async getAIResponse(messages) {
-    const params = {
-      messages,
-      model: this.AzureOpenAIConfig.deployment,
-      max_tokens: 1000,
-      temperature: 0.7,
-    };
-
-    const response = await this.chatService.chat.completions.create(params);
-    const data = { choices: response.choices };
-
-    return data.choices[0].message?.content;
+    return this.aiService.getAIResponse(messages);
   }
 
   async processMessageSending(message) {
diff --git a/apps/demos/Demos/HtmlEditor/AITextEditing/Angular/app/ai.service.ts b/apps/demos/Demos/HtmlEditor/AITextEditing/Angular/app/ai.service.ts
new file mode 100644
index 000000000000..01e1fa4561ea
--- /dev/null
+++ b/apps/demos/Demos/HtmlEditor/AITextEditing/Angular/app/ai.service.ts
@@ -0,0 +1,64 @@
+import { AzureOpenAI, OpenAI } from 'openai';
+import { Injectable } from '@angular/core';
+import {
+  AIIntegration,
+  type RequestParams,
+  type Response,
+} from 'devextreme-angular/common/ai-integration';
+
+type AIMessage = (OpenAI.ChatCompletionUserMessageParam | OpenAI.ChatCompletionSystemMessageParam) & {
+  content: string;
+};
+
+const AzureOpenAIConfig = {
+  dangerouslyAllowBrowser: true,
+  deployment: 'gpt-4o-mini',
+  apiVersion: '2024-02-01',
+  endpoint: 'https://public-api.devexpress.com/demo-openai',
+  apiKey: 'DEMO',
+};
+
+const aiService = new AzureOpenAI(AzureOpenAIConfig);
+
+async function getAIResponse(messages: AIMessage[], signal: AbortSignal) {
+  const params = {
+    messages,
+    model: AzureOpenAIConfig.deployment,
+    max_tokens: 1000,
+    temperature: 0.7,
+  };
+
+  const response = await aiService.chat.completions.create(params, { signal });
+  const result = response.choices[0].message?.content;
+
+  return result;
+}
+
+const aiIntegration = new AIIntegration({
+  sendRequest({ prompt }: RequestParams): Response {
+    const controller = new AbortController();
+    const signal = controller.signal;
+
+    const aiPrompt: AIMessage[] = [
+      { role: 'system', content: prompt.system },
+      { role: 'user', content: prompt.user },
+    ];
+    const promise = getAIResponse(aiPrompt, signal);
+
+    const result: Response = {
+      promise,
+      abort: () => {
+        controller.abort();
+      },
+    };
+
+    return result;
+  },
+});
+
+@Injectable()
+export class AiService {
+  getAiIntegration() {
+    return aiIntegration;
+  }
+}
diff --git a/apps/demos/Demos/HtmlEditor/AITextEditing/Angular/app/app.component.ts b/apps/demos/Demos/HtmlEditor/AITextEditing/Angular/app/app.component.ts
index 98b7034a2bf3..d3cd25a24df0 100644
--- a/apps/demos/Demos/HtmlEditor/AITextEditing/Angular/app/app.component.ts
+++ b/apps/demos/Demos/HtmlEditor/AITextEditing/Angular/app/app.component.ts
@@ -1,13 +1,9 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
 import { DxHtmlEditorModule, type DxHtmlEditorTypes } from 'devextreme-angular/ui/html-editor';
-import {
-  AIIntegration,
-  RequestParams,
-  Response,
-} from 'devextreme-angular/common/ai-integration';
-import { AzureOpenAI, OpenAI } from 'openai';
+import type { AIIntegration } from 'devextreme-angular/common/ai-integration';
 import { Service } from './app.service';
+import { AiService } from './ai.service';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
@@ -19,74 +15,27 @@ if (window && window.config?.packageConfigPaths) {
   modulePrefix = '/app';
 }
 
-type AIMessage = (OpenAI.ChatCompletionUserMessageParam | OpenAI.ChatCompletionSystemMessageParam) & {
-  content: string;
-};
-
 @Component({
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],
-  providers: [Service],
+  providers: [Service, AiService],
   imports: [
     DxHtmlEditorModule,
   ],
 })
 
 export class AppComponent {
-  azureOpenAIConfig: any;
-
-  aiService: AzureOpenAI;
-
   aiIntegration: AIIntegration;
 
   extractKeywordsPrompt: DxHtmlEditorTypes.AICustomCommand['prompt'];
 
   valueContent: string;
 
-  constructor(service: Service) {
-    this.azureOpenAIConfig = service.getAzureOpenAIConfig();
+  constructor(service: Service, aiService: AiService) {
     this.extractKeywordsPrompt = service.getPrompt();
     this.valueContent = service.getMarkup();
-
-    this.aiService = new AzureOpenAI(this.azureOpenAIConfig);
-    this.aiIntegration = new AIIntegration({
-      sendRequest: this.sendRequest.bind(this),
-    });
-  }
-
-  sendRequest({ prompt }: RequestParams): Response {
-    const controller = new AbortController();
-    const signal = controller.signal;
-
-    const aiPrompt: AIMessage[] = [
-      { role: 'system', content: prompt.system },
-      { role: 'user', content: prompt.user },
-    ];
-    const promise = this.getAIResponse(aiPrompt, signal);
-
-    const result: Response = {
-      promise,
-      abort: () => {
-        controller.abort();
-      },
-    };
-
-    return result;
-  }
-
-  async getAIResponse(messages: AIMessage[], signal: AbortSignal) {
-    const params = {
-      messages,
-      model: this.azureOpenAIConfig.deployment,
-      max_tokens: 1000,
-      temperature: 0.7,
-    };
-
-    const response = await this.aiService.chat.completions.create(params, { signal });
-    const result = response.choices[0].message?.content;
-
-    return result;
+    this.aiIntegration = aiService.getAiIntegration();
   }
 }
 
diff --git a/apps/demos/Demos/HtmlEditor/AITextEditing/Angular/app/app.service.ts b/apps/demos/Demos/HtmlEditor/AITextEditing/Angular/app/app.service.ts
index 5d1cf9975165..f04866495dcc 100644
--- a/apps/demos/Demos/HtmlEditor/AITextEditing/Angular/app/app.service.ts
+++ b/apps/demos/Demos/HtmlEditor/AITextEditing/Angular/app/app.service.ts
@@ -1,14 +1,6 @@
 import { Injectable } from '@angular/core';
 import { type DxHtmlEditorTypes } from 'devextreme-angular/ui/html_editor';
 
-const AzureOpenAIConfig = {
-  dangerouslyAllowBrowser: true,
-  deployment: 'gpt-4o-mini',
-  apiVersion: '2024-02-01',
-  endpoint: 'https://public-api.devexpress.com/demo-openai',
-  apiKey: 'DEMO',
-};
-
 const extractKeywordsPrompt: DxHtmlEditorTypes.AICustomCommand['prompt'] = () =>
   'Extract a list of keywords from the text and return it as a comma-separated string';
 
@@ -56,8 +48,4 @@ export class Service {
   getPrompt() {
     return extractKeywordsPrompt;
   }
-
-  getAzureOpenAIConfig() {
-    return AzureOpenAIConfig;
-  }
 }

From 00a7965e0ccf4ad79be3190083e858eed414b6cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marker=20dao=20=C2=AE?= <youdontknow@marker-dao.eth>
Date: Fri, 9 Jan 2026 17:03:39 +0000
Subject: [PATCH 2/8] refactor(htmleditor && chat): React

---
 .../AIAndChatbotIntegration/React/data.ts     |  8 ---
 .../AIAndChatbotIntegration/React/service.ts  | 41 +++++++++++++++
 .../AIAndChatbotIntegration/React/useApi.ts   | 34 +------------
 .../AIAndChatbotIntegration/ReactJs/data.js   |  7 ---
 .../ReactJs/service.js                        | 28 ++++++++++
 .../AIAndChatbotIntegration/ReactJs/useApi.js | 25 +--------
 .../HtmlEditor/AITextEditing/React/App.tsx    |  3 +-
 .../HtmlEditor/AITextEditing/React/data.ts    | 50 ------------------
 .../HtmlEditor/AITextEditing/React/service.ts | 51 +++++++++++++++++++
 .../HtmlEditor/AITextEditing/ReactJs/App.js   |  3 +-
 .../HtmlEditor/AITextEditing/ReactJs/data.js  | 38 --------------
 .../AITextEditing/ReactJs/service.js          | 38 ++++++++++++++
 12 files changed, 166 insertions(+), 160 deletions(-)
 create mode 100644 apps/demos/Demos/Chat/AIAndChatbotIntegration/React/service.ts
 create mode 100644 apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/service.js
 create mode 100644 apps/demos/Demos/HtmlEditor/AITextEditing/React/service.ts
 create mode 100644 apps/demos/Demos/HtmlEditor/AITextEditing/ReactJs/service.js

diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/data.ts b/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/data.ts
index d9a1a4edd8c1..9c7f55803aaa 100644
--- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/data.ts
+++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/data.ts
@@ -1,13 +1,5 @@
 import type { ChatTypes } from 'devextreme-react/chat';
 
-export const AzureOpenAIConfig = {
-  dangerouslyAllowBrowser: true,
-  deployment: 'gpt-4o-mini',
-  apiVersion: '2024-02-01',
-  endpoint: 'https://public-api.devexpress.com/demo-openai',
-  apiKey: 'DEMO',
-};
-
 export const REGENERATION_TEXT = 'Regeneration...';
 export const CHAT_DISABLED_CLASS = 'chat-disabled';
 export const ALERT_TIMEOUT = 1000 * 60;
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/service.ts b/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/service.ts
new file mode 100644
index 000000000000..e75319bd4c5c
--- /dev/null
+++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/service.ts
@@ -0,0 +1,41 @@
+import { AzureOpenAI, OpenAI } from 'openai';
+import type { AIResponse } from 'devextreme/common/ai-integration';
+
+type Message = (OpenAI.ChatCompletionUserMessageParam | OpenAI.ChatCompletionAssistantMessageParam) & {
+  content: string;
+};
+
+export const AzureOpenAIConfig = {
+  dangerouslyAllowBrowser: true,
+  deployment: 'gpt-4o-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: Message[], delay?: number): Promise<AIResponse> {
+  const params = {
+    messages,
+    model: AzureOpenAIConfig.deployment,
+    max_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 ?? '';
+}
+
+export type { Message };
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/useApi.ts b/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/useApi.ts
index e6f4ff4d0261..6e2831241087 100644
--- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/useApi.ts
+++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/useApi.ts
@@ -1,43 +1,13 @@
 import { useCallback, useState } from 'react';
-import { AzureOpenAI, OpenAI } from 'openai';
 import type { ChatTypes } from 'devextreme-react/chat';
 import { CustomStore, DataSource } from 'devextreme-react/common/data';
-import type { AIResponse } from 'devextreme/common/ai-integration';
 import {
   ALERT_TIMEOUT,
   assistant,
-  AzureOpenAIConfig,
   REGENERATION_TEXT,
 } from './data.ts';
-
-type Message = (OpenAI.ChatCompletionUserMessageParam | OpenAI.ChatCompletionAssistantMessageParam) & {
-  content: string;
-};
-
-const chatService = new AzureOpenAI(AzureOpenAIConfig);
-
-const wait = (delay: number): Promise<void> =>
-  new Promise((resolve): void => {
-    setTimeout(resolve, delay);
-  });
-
-export async function getAIResponse(messages: Message[], delay?: number): Promise<AIResponse> {
-  const params = {
-    messages,
-    model: AzureOpenAIConfig.deployment,
-    max_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 { getAIResponse } from './service.ts';
+import type { Message } from './service.ts';
 
 const store: ChatTypes.Message[] = [];
 
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/data.js b/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/data.js
index 87d1d12667b0..66a606df2258 100644
--- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/data.js
+++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/data.js
@@ -1,10 +1,3 @@
-export const AzureOpenAIConfig = {
-  dangerouslyAllowBrowser: true,
-  deployment: 'gpt-4o-mini',
-  apiVersion: '2024-02-01',
-  endpoint: 'https://public-api.devexpress.com/demo-openai',
-  apiKey: 'DEMO',
-};
 export const REGENERATION_TEXT = 'Regeneration...';
 export const CHAT_DISABLED_CLASS = 'chat-disabled';
 export const ALERT_TIMEOUT = 1000 * 60;
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/service.js b/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/service.js
new file mode 100644
index 000000000000..9ac847465eec
--- /dev/null
+++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/service.js
@@ -0,0 +1,28 @@
+import { AzureOpenAI } from 'openai';
+
+export const AzureOpenAIConfig = {
+  dangerouslyAllowBrowser: true,
+  deployment: 'gpt-4o-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_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 ?? '';
+}
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/useApi.js b/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/useApi.js
index b8fdc6bedf9f..7f88abd8f651 100644
--- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/useApi.js
+++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/useApi.js
@@ -1,29 +1,8 @@
 import { useCallback, useState } from 'react';
-import { AzureOpenAI } from 'openai';
 import { CustomStore, DataSource } from 'devextreme-react/common/data';
-import {
-  ALERT_TIMEOUT, assistant, AzureOpenAIConfig, REGENERATION_TEXT,
-} from './data.js';
+import { ALERT_TIMEOUT, assistant, REGENERATION_TEXT } from './data.js';
+import { getAIResponse } from './service.js';
 
-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_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 ?? '';
-}
 const store = [];
 const customStore = new CustomStore({
   key: 'id',
diff --git a/apps/demos/Demos/HtmlEditor/AITextEditing/React/App.tsx b/apps/demos/Demos/HtmlEditor/AITextEditing/React/App.tsx
index 9139ea28c982..7f4ec1f4ad57 100644
--- a/apps/demos/Demos/HtmlEditor/AITextEditing/React/App.tsx
+++ b/apps/demos/Demos/HtmlEditor/AITextEditing/React/App.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import HtmlEditor, { Toolbar, ToolbarItem, Command } from 'devextreme-react/html-editor';
-import { markup, extractKeywordsPrompt, aiIntegration } from './data.ts';
+import { markup, extractKeywordsPrompt } from './data.ts';
+import { aiIntegration } from './service.ts';
 
 export default function App() {
   return (
diff --git a/apps/demos/Demos/HtmlEditor/AITextEditing/React/data.ts b/apps/demos/Demos/HtmlEditor/AITextEditing/React/data.ts
index 8bf5e56ccd39..a685e5a3d87f 100644
--- a/apps/demos/Demos/HtmlEditor/AITextEditing/React/data.ts
+++ b/apps/demos/Demos/HtmlEditor/AITextEditing/React/data.ts
@@ -1,54 +1,4 @@
 import type { HtmlEditorTypes } from 'devextreme-react/html-editor';
-import { AIIntegration } from 'devextreme-react/common/ai-integration';
-import type { AIResponse, RequestParams, Response } from 'devextreme-react/common/ai-integration';
-import { AzureOpenAI, OpenAI } from 'openai';
-
-type AIMessage = (OpenAI.ChatCompletionUserMessageParam | OpenAI.ChatCompletionSystemMessageParam) & {
-  content: string;
-};
-
-const AzureOpenAIConfig = {
-  dangerouslyAllowBrowser: true,
-  deployment: 'gpt-4o-mini',
-  apiVersion: '2024-02-01',
-  endpoint: 'https://public-api.devexpress.com/demo-openai',
-  apiKey: 'DEMO',
-};
-
-const aiService = new AzureOpenAI(AzureOpenAIConfig);
-
-async function getAIResponse(messages: AIMessage[], signal: AbortSignal) {
-  const params = {
-    messages,
-    model: AzureOpenAIConfig.deployment,
-    max_tokens: 1000,
-    temperature: 0.7,
-  };
-
-  const response = await aiService.chat.completions.create(params, { signal });
-  return response.choices[0].message?.content;
-}
-
-export const aiIntegration = new AIIntegration({
-  sendRequest({ prompt }: RequestParams): Response {
-    const controller = new AbortController();
-    const signal = controller.signal;
-
-    const aiPrompt: AIMessage[] = [
-      { role: 'system', content: prompt.system ?? '' },
-      { role: 'user', content: prompt.user ?? '' },
-    ];
-
-    const promise = getAIResponse(aiPrompt, signal) as Promise<AIResponse>;
-
-    return {
-      promise,
-      abort: () => {
-        controller.abort();
-      },
-    };
-  },
-});
 
 export const markup = `
     <h2>
diff --git a/apps/demos/Demos/HtmlEditor/AITextEditing/React/service.ts b/apps/demos/Demos/HtmlEditor/AITextEditing/React/service.ts
new file mode 100644
index 000000000000..c9ddc84ed899
--- /dev/null
+++ b/apps/demos/Demos/HtmlEditor/AITextEditing/React/service.ts
@@ -0,0 +1,51 @@
+import { AIIntegration } from 'devextreme-react/common/ai-integration';
+import type { AIResponse, RequestParams, Response } from 'devextreme-react/common/ai-integration';
+import { AzureOpenAI, OpenAI } from 'openai';
+
+type AIMessage = (OpenAI.ChatCompletionUserMessageParam | OpenAI.ChatCompletionSystemMessageParam) & {
+  content: string;
+};
+
+const AzureOpenAIConfig = {
+  dangerouslyAllowBrowser: true,
+  deployment: 'gpt-4o-mini',
+  apiVersion: '2024-02-01',
+  endpoint: 'https://public-api.devexpress.com/demo-openai',
+  apiKey: 'DEMO',
+};
+
+const aiService = new AzureOpenAI(AzureOpenAIConfig);
+
+async function getAIResponse(messages: AIMessage[], signal: AbortSignal) {
+  const params = {
+    messages,
+    model: AzureOpenAIConfig.deployment,
+    max_tokens: 1000,
+    temperature: 0.7,
+  };
+
+  const response = await aiService.chat.completions.create(params, { signal });
+
+  return response.choices[0].message?.content;
+}
+
+export const aiIntegration = new AIIntegration({
+  sendRequest({ prompt }: RequestParams): Response {
+    const controller = new AbortController();
+    const signal = controller.signal;
+
+    const aiPrompt: AIMessage[] = [
+      { role: 'system', content: prompt.system ?? '' },
+      { role: 'user', content: prompt.user ?? '' },
+    ];
+
+    const promise = getAIResponse(aiPrompt, signal) as Promise<AIResponse>;
+
+    return {
+      promise,
+      abort: () => {
+        controller.abort();
+      },
+    };
+  },
+});
diff --git a/apps/demos/Demos/HtmlEditor/AITextEditing/ReactJs/App.js b/apps/demos/Demos/HtmlEditor/AITextEditing/ReactJs/App.js
index 982bbbbdf6ed..8a2545031306 100644
--- a/apps/demos/Demos/HtmlEditor/AITextEditing/ReactJs/App.js
+++ b/apps/demos/Demos/HtmlEditor/AITextEditing/ReactJs/App.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import HtmlEditor, { Toolbar, ToolbarItem, Command } from 'devextreme-react/html-editor';
-import { markup, extractKeywordsPrompt, aiIntegration } from './data.js';
+import { markup, extractKeywordsPrompt } from './data.js';
+import { aiIntegration } from './service.js';
 
 export default function App() {
   return (
diff --git a/apps/demos/Demos/HtmlEditor/AITextEditing/ReactJs/data.js b/apps/demos/Demos/HtmlEditor/AITextEditing/ReactJs/data.js
index f7d79dab710f..160cecb3c1f8 100644
--- a/apps/demos/Demos/HtmlEditor/AITextEditing/ReactJs/data.js
+++ b/apps/demos/Demos/HtmlEditor/AITextEditing/ReactJs/data.js
@@ -1,41 +1,3 @@
-import { AIIntegration } from 'devextreme-react/common/ai-integration';
-import { AzureOpenAI } from 'openai';
-
-const AzureOpenAIConfig = {
-  dangerouslyAllowBrowser: true,
-  deployment: 'gpt-4o-mini',
-  apiVersion: '2024-02-01',
-  endpoint: 'https://public-api.devexpress.com/demo-openai',
-  apiKey: 'DEMO',
-};
-const aiService = new AzureOpenAI(AzureOpenAIConfig);
-async function getAIResponse(messages, signal) {
-  const params = {
-    messages,
-    model: AzureOpenAIConfig.deployment,
-    max_tokens: 1000,
-    temperature: 0.7,
-  };
-  const response = await aiService.chat.completions.create(params, { signal });
-  return response.choices[0].message?.content;
-}
-export const aiIntegration = new AIIntegration({
-  sendRequest({ prompt }) {
-    const controller = new AbortController();
-    const signal = controller.signal;
-    const aiPrompt = [
-      { role: 'system', content: prompt.system ?? '' },
-      { role: 'user', content: prompt.user ?? '' },
-    ];
-    const promise = getAIResponse(aiPrompt, signal);
-    return {
-      promise,
-      abort: () => {
-        controller.abort();
-      },
-    };
-  },
-});
 export const markup = `
     <h2>
         <img src="../../../../images/widgets/HtmlEditor.svg" alt="HtmlEditor">
diff --git a/apps/demos/Demos/HtmlEditor/AITextEditing/ReactJs/service.js b/apps/demos/Demos/HtmlEditor/AITextEditing/ReactJs/service.js
new file mode 100644
index 000000000000..bbbf44050c1c
--- /dev/null
+++ b/apps/demos/Demos/HtmlEditor/AITextEditing/ReactJs/service.js
@@ -0,0 +1,38 @@
+import { AIIntegration } from 'devextreme-react/common/ai-integration';
+import { AzureOpenAI } from 'openai';
+
+const AzureOpenAIConfig = {
+  dangerouslyAllowBrowser: true,
+  deployment: 'gpt-4o-mini',
+  apiVersion: '2024-02-01',
+  endpoint: 'https://public-api.devexpress.com/demo-openai',
+  apiKey: 'DEMO',
+};
+const aiService = new AzureOpenAI(AzureOpenAIConfig);
+async function getAIResponse(messages, signal) {
+  const params = {
+    messages,
+    model: AzureOpenAIConfig.deployment,
+    max_tokens: 1000,
+    temperature: 0.7,
+  };
+  const response = await aiService.chat.completions.create(params, { signal });
+  return response.choices[0].message?.content;
+}
+export const aiIntegration = new AIIntegration({
+  sendRequest({ prompt }) {
+    const controller = new AbortController();
+    const signal = controller.signal;
+    const aiPrompt = [
+      { role: 'system', content: prompt.system ?? '' },
+      { role: 'user', content: prompt.user ?? '' },
+    ];
+    const promise = getAIResponse(aiPrompt, signal);
+    return {
+      promise,
+      abort: () => {
+        controller.abort();
+      },
+    };
+  },
+});

From e2ffd032a790c037a5502f7cefb780e384b7d3fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marker=20dao=20=C2=AE?= <youdontknow@marker-dao.eth>
Date: Fri, 9 Jan 2026 17:07:12 +0000
Subject: [PATCH 3/8] fix(demos): Move files to the ai folder

---
 .../AIAndChatbotIntegration/Angular/app/{ => ai}/ai.service.ts  | 0
 .../Chat/AIAndChatbotIntegration/Angular/app/app.component.ts   | 2 +-
 .../Chat/AIAndChatbotIntegration/Angular/app/app.service.ts     | 2 +-
 .../HtmlEditor/AITextEditing/Angular/app/{ => ai}/ai.service.ts | 0
 .../Demos/HtmlEditor/AITextEditing/Angular/app/app.component.ts | 2 +-
 5 files changed, 3 insertions(+), 3 deletions(-)
 rename apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/{ => ai}/ai.service.ts (100%)
 rename apps/demos/Demos/HtmlEditor/AITextEditing/Angular/app/{ => ai}/ai.service.ts (100%)

diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/ai.service.ts b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/ai/ai.service.ts
similarity index 100%
rename from apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/ai.service.ts
rename to apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/ai/ai.service.ts
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.component.ts b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.component.ts
index 6488d0f2fbb5..40236d268098 100644
--- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.component.ts
@@ -7,7 +7,7 @@ import { Observable } from 'rxjs';
 import { loadMessages } from 'devextreme-angular/common/core/localization';
 import { DataSource } from 'devextreme-angular/common/data';
 import { AppService } from './app.service';
-import { AiService } from './ai.service';
+import { AiService } from './ai/ai.service';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.service.ts b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.service.ts
index 48a51f0645d3..98517ea729bf 100644
--- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.service.ts
+++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.service.ts
@@ -7,7 +7,7 @@ import rehypeStringify from 'rehype-stringify';
 import rehypeMinifyWhitespace from 'rehype-minify-whitespace';
 import { type DxChatTypes } from 'devextreme-angular/ui/chat';
 import { DataSource, CustomStore } from 'devextreme-angular/common/data';
-import { AiService } from './ai.service';
+import { AiService } from './ai/ai.service';
 
 @Injectable({
   providedIn: 'root',
diff --git a/apps/demos/Demos/HtmlEditor/AITextEditing/Angular/app/ai.service.ts b/apps/demos/Demos/HtmlEditor/AITextEditing/Angular/app/ai/ai.service.ts
similarity index 100%
rename from apps/demos/Demos/HtmlEditor/AITextEditing/Angular/app/ai.service.ts
rename to apps/demos/Demos/HtmlEditor/AITextEditing/Angular/app/ai/ai.service.ts
diff --git a/apps/demos/Demos/HtmlEditor/AITextEditing/Angular/app/app.component.ts b/apps/demos/Demos/HtmlEditor/AITextEditing/Angular/app/app.component.ts
index d3cd25a24df0..c3df9af5fa05 100644
--- a/apps/demos/Demos/HtmlEditor/AITextEditing/Angular/app/app.component.ts
+++ b/apps/demos/Demos/HtmlEditor/AITextEditing/Angular/app/app.component.ts
@@ -3,7 +3,7 @@ import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/
 import { DxHtmlEditorModule, type DxHtmlEditorTypes } from 'devextreme-angular/ui/html-editor';
 import type { AIIntegration } from 'devextreme-angular/common/ai-integration';
 import { Service } from './app.service';
-import { AiService } from './ai.service';
+import { AiService } from './ai/ai.service';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();

From d15a166b4d8d713057b818ac919435817bc505c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marker=20dao=20=C2=AE?= <youdontknow@marker-dao.eth>
Date: Fri, 9 Jan 2026 17:24:49 +0000
Subject: [PATCH 4/8] refactor(htmleditor && chat): Vue

---
 .../Chat/AIAndChatbotIntegration/Vue/App.vue  | 19 +------
 .../Chat/AIAndChatbotIntegration/Vue/data.ts  |  8 ---
 .../AIAndChatbotIntegration/Vue/service.ts    | 26 ++++++++++
 .../HtmlEditor/AITextEditing/Vue/App.vue      | 49 +----------------
 .../HtmlEditor/AITextEditing/Vue/service.ts   | 52 +++++++++++++++++++
 5 files changed, 80 insertions(+), 74 deletions(-)
 create mode 100644 apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/service.ts
 create mode 100644 apps/demos/Demos/HtmlEditor/AITextEditing/Vue/service.ts

diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/App.vue b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/App.vue
index b36dba52528a..53cbc18ef9b5 100644
--- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/App.vue
+++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/App.vue
@@ -49,7 +49,6 @@
 
 <script setup lang="ts">
 import { ref, onBeforeMount } from 'vue';
-import { AzureOpenAI } from 'openai';
 import DxChat, { type DxChatTypes } from 'devextreme-vue/chat';
 import DxButton from 'devextreme-vue/button';
 import { loadMessages } from 'devextreme-vue/common/core/localization';
@@ -62,12 +61,10 @@ import {
   assistant,
   dataSource,
   convertToHtml,
-  AzureOpenAIConfig,
   REGENERATION_TEXT,
   ALERT_TIMEOUT,
 } from './data.ts';
-
-const chatService = new AzureOpenAI(AzureOpenAIConfig);
+import { getAIResponse } from './service.ts';
 
 const typingUsers = ref<{ id: string, name: string }[]>([]);
 const alerts = ref<{ message: string }[]>([]);
@@ -78,20 +75,6 @@ onBeforeMount(() => {
   loadMessages(dictionary);
 });
 
-async function getAIResponse(messages: DxChatTypes.Message[]): Promise<string> {
-  const params: Record<string, any> = {
-    messages,
-    model: AzureOpenAIConfig.deployment,
-    max_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 || '';
-}
-
 function toggleDisabledState(disabled: boolean, event?: Events.EventObject): void {
   isDisabled.value = disabled;
 
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/data.ts b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/data.ts
index 5ca6309e72f0..c27e7516a133 100644
--- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/data.ts
+++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/data.ts
@@ -14,14 +14,6 @@ export const dictionary = {
   },
 };
 
-export const AzureOpenAIConfig = {
-  dangerouslyAllowBrowser: true,
-  deployment: 'gpt-4o-mini',
-  apiVersion: '2024-02-01',
-  endpoint: 'https://public-api.devexpress.com/demo-openai',
-  apiKey: 'DEMO',
-};
-
 export const REGENERATION_TEXT = 'Regeneration...';
 export const CHAT_DISABLED_CLASS = 'chat-disabled';
 export const ALERT_TIMEOUT = 1000 * 60;
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/service.ts b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/service.ts
new file mode 100644
index 000000000000..2eac7e590717
--- /dev/null
+++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/service.ts
@@ -0,0 +1,26 @@
+import { AzureOpenAI } from 'openai';
+import { type DxChatTypes } from 'devextreme-vue/chat';
+
+const AzureOpenAIConfig = {
+  dangerouslyAllowBrowser: true,
+  deployment: 'gpt-4o-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: DxChatTypes.Message[]): Promise<string> {
+  const params: Record<string, any> = {
+    messages,
+    model: AzureOpenAIConfig.deployment,
+    max_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 || '';
+}
diff --git a/apps/demos/Demos/HtmlEditor/AITextEditing/Vue/App.vue b/apps/demos/Demos/HtmlEditor/AITextEditing/Vue/App.vue
index e8f1aba8f940..c428a5a4609e 100644
--- a/apps/demos/Demos/HtmlEditor/AITextEditing/Vue/App.vue
+++ b/apps/demos/Demos/HtmlEditor/AITextEditing/Vue/App.vue
@@ -33,58 +33,11 @@ import {
   DxToolbarItem,
   DxCommand,
 } from 'devextreme-vue/html-editor';
-import { AIIntegration, type Response } from 'devextreme-vue/common/ai-integration';
-import { AzureOpenAI, OpenAI } from 'openai';
 import {
   markup,
-  AzureOpenAIConfig,
   extractKeywordsPrompt,
 } from './data.ts';
-
-type AIMessage = (
-  OpenAI.ChatCompletionUserMessageParam | OpenAI.ChatCompletionSystemMessageParam
-) & {
-  content: string;
-};
-
-const aiService = new AzureOpenAI(AzureOpenAIConfig);
-
-async function getAIResponse(messages: AIMessage[], signal: AbortSignal): Promise<string> {
-  const params = {
-    messages,
-    model: AzureOpenAIConfig.deployment,
-    max_tokens: 1000,
-    temperature: 0.7,
-  };
-
-  const response = await aiService.chat.completions.create(params, { signal });
-  const result = response.choices[0].message?.content || '';
-
-  return result;
-}
-
-const aiIntegration = new AIIntegration({
-  sendRequest({ prompt }) {
-    const controller = new AbortController();
-    const signal = controller.signal;
-
-    const aiPrompt: AIMessage[] = [
-      { role: 'system', content: prompt.system || '' },
-      { role: 'user', content: prompt.user || '' },
-    ];
-
-    const promise = getAIResponse(aiPrompt, signal);
-
-    const result: Response = {
-      promise,
-      abort: () => {
-        controller.abort();
-      },
-    };
-
-    return result;
-  },
-});
+import { aiIntegration } from './service.ts';
 
 </script>
 <style>
diff --git a/apps/demos/Demos/HtmlEditor/AITextEditing/Vue/service.ts b/apps/demos/Demos/HtmlEditor/AITextEditing/Vue/service.ts
new file mode 100644
index 000000000000..72d2e66d9496
--- /dev/null
+++ b/apps/demos/Demos/HtmlEditor/AITextEditing/Vue/service.ts
@@ -0,0 +1,52 @@
+import { AzureOpenAI, OpenAI } from 'openai';
+import {
+  AIIntegration,
+  type RequestParams,
+  type Response,
+} from 'devextreme-vue/common/ai-integration';
+import { AzureOpenAIConfig } from './data.ts';
+
+type AIMessage = (
+  OpenAI.ChatCompletionUserMessageParam | OpenAI.ChatCompletionSystemMessageParam
+) & {
+  content: string;
+};
+
+const aiService = new AzureOpenAI(AzureOpenAIConfig);
+
+async function getAIResponse(messages: AIMessage[], signal: AbortSignal): Promise<string> {
+  const params = {
+    messages,
+    model: AzureOpenAIConfig.deployment,
+    max_tokens: 1000,
+    temperature: 0.7,
+  };
+
+  const response = await aiService.chat.completions.create(params, { signal });
+  const result = response.choices[0].message?.content || '';
+
+  return result;
+}
+
+export const aiIntegration = new AIIntegration({
+  sendRequest({ prompt }: RequestParams): Response {
+    const controller = new AbortController();
+    const signal = controller.signal;
+
+    const aiPrompt: AIMessage[] = [
+      { role: 'system', content: prompt.system || '' },
+      { role: 'user', content: prompt.user || '' },
+    ];
+
+    const promise = getAIResponse(aiPrompt, signal);
+
+    const result: Response = {
+      promise,
+      abort: () => {
+        controller.abort();
+      },
+    };
+
+    return result;
+  },
+});

From 5ce38b4aa7b817e7c35700b197ae4e1655f208c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marker=20dao=20=C2=AE?= <youdontknow@marker-dao.eth>
Date: Mon, 12 Jan 2026 13:00:25 +0000
Subject: [PATCH 5/8] refactor(ai-demos)

---
 .../Angular/app/ai/ai.service.ts              | 32 ++++++++++++-------
 .../Angular/app/app.service.ts                | 10 +++---
 .../AIAndChatbotIntegration/React/service.ts  | 17 +++++-----
 .../AIAndChatbotIntegration/React/useApi.ts   |  8 ++---
 .../ReactJs/service.js                        |  2 +-
 .../Chat/AIAndChatbotIntegration/Vue/App.vue  |  4 +--
 .../Chat/AIAndChatbotIntegration/Vue/data.ts  |  4 ++-
 .../AIAndChatbotIntegration/Vue/service.ts    | 13 ++++++--
 .../HtmlEditor/AITextEditing/Vue/data.ts      |  8 -----
 .../HtmlEditor/AITextEditing/Vue/service.ts   |  9 +++++-
 10 files changed, 62 insertions(+), 45 deletions(-)

diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/ai/ai.service.ts b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/ai/ai.service.ts
index 774a600bb93b..3c7f5923364d 100644
--- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/ai/ai.service.ts
+++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/ai/ai.service.ts
@@ -1,26 +1,34 @@
 import { Injectable } from '@angular/core';
-import { AzureOpenAI } from 'openai';
+import { AzureOpenAI, OpenAI } from 'openai';
+import { type AIResponse } from 'devextreme/common/ai-integration';
+
+export type AIMessage = (
+  OpenAI.ChatCompletionUserMessageParam
+  | OpenAI.ChatCompletionSystemMessageParam
+  | OpenAI.ChatCompletionAssistantMessageParam) & {
+    content: string;
+  };
+
+const AzureOpenAIConfig = {
+  dangerouslyAllowBrowser: true,
+  deployment: 'gpt-4o-mini',
+  apiVersion: '2024-02-01',
+  endpoint: 'https://public-api.devexpress.com/demo-openai',
+  apiKey: 'DEMO',
+};
 
 @Injectable()
 export class AiService {
   chatService: AzureOpenAI;
 
-  AzureOpenAIConfig = {
-    dangerouslyAllowBrowser: true,
-    deployment: 'gpt-4o-mini',
-    apiVersion: '2024-02-01',
-    endpoint: 'https://public-api.devexpress.com/demo-openai',
-    apiKey: 'DEMO',
-  };
-
   constructor() {
-    this.chatService = new AzureOpenAI(this.AzureOpenAIConfig);
+    this.chatService = new AzureOpenAI(AzureOpenAIConfig);
   }
 
-  async getAIResponse(messages: any[]) {
+  async getAIResponse(messages: AIMessage[]): Promise<AIResponse> {
     const params = {
       messages,
-      model: this.AzureOpenAIConfig.deployment,
+      model: AzureOpenAIConfig.deployment,
       max_tokens: 1000,
       temperature: 0.7,
     };
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.service.ts b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.service.ts
index 98517ea729bf..29b7fdf00957 100644
--- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.service.ts
+++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.service.ts
@@ -7,7 +7,7 @@ import rehypeStringify from 'rehype-stringify';
 import rehypeMinifyWhitespace from 'rehype-minify-whitespace';
 import { type DxChatTypes } from 'devextreme-angular/ui/chat';
 import { DataSource, CustomStore } from 'devextreme-angular/common/data';
-import { AiService } from './ai/ai.service';
+import { AiService, type AIMessage } from './ai/ai.service';
 
 @Injectable({
   providedIn: 'root',
@@ -31,7 +31,7 @@ export class AppService {
 
   store: any[] = [];
 
-  messages: any[] = [];
+  messages: AIMessage[] = [];
 
   alerts: DxChatTypes.Alert[] = [];
 
@@ -90,11 +90,11 @@ export class AppService {
     });
   }
 
-  async getAIResponse(messages) {
-    return this.aiService.getAIResponse(messages);
+  async getAIResponse(messages: AIMessage[]): Promise<string> {
+    return this.aiService.getAIResponse(messages) as Promise<string>;
   }
 
-  async processMessageSending(message) {
+  async processMessageSending(message: DxChatTypes.Message) {
     this.messages.push({ role: 'user', content: message.text });
     this.typingUsersSubject.next([this.assistant]);
 
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/service.ts b/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/service.ts
index e75319bd4c5c..cb6db2a7f944 100644
--- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/service.ts
+++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/service.ts
@@ -1,11 +1,14 @@
 import { AzureOpenAI, OpenAI } from 'openai';
-import type { AIResponse } from 'devextreme/common/ai-integration';
+import { type AIResponse } from 'devextreme/common/ai-integration';
 
-type Message = (OpenAI.ChatCompletionUserMessageParam | OpenAI.ChatCompletionAssistantMessageParam) & {
-  content: string;
-};
+export type AIMessage = (
+  OpenAI.ChatCompletionUserMessageParam
+  | OpenAI.ChatCompletionSystemMessageParam
+  | OpenAI.ChatCompletionAssistantMessageParam) & {
+    content: string;
+  };
 
-export const AzureOpenAIConfig = {
+const AzureOpenAIConfig = {
   dangerouslyAllowBrowser: true,
   deployment: 'gpt-4o-mini',
   apiVersion: '2024-02-01',
@@ -20,7 +23,7 @@ const wait = (delay: number): Promise<void> =>
     setTimeout(resolve, delay);
   });
 
-export async function getAIResponse(messages: Message[], delay?: number): Promise<AIResponse> {
+export async function getAIResponse(messages: AIMessage[], delay?: number): Promise<AIResponse> {
   const params = {
     messages,
     model: AzureOpenAIConfig.deployment,
@@ -37,5 +40,3 @@ export async function getAIResponse(messages: Message[], delay?: number): Promis
 
   return data.choices[0].message?.content ?? '';
 }
-
-export type { Message };
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/useApi.ts b/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/useApi.ts
index 6e2831241087..03a20011b0db 100644
--- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/useApi.ts
+++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/useApi.ts
@@ -7,7 +7,7 @@ import {
   REGENERATION_TEXT,
 } from './data.ts';
 import { getAIResponse } from './service.ts';
-import type { Message } from './service.ts';
+import type { AIMessage } from './service.ts';
 
 const store: ChatTypes.Message[] = [];
 
@@ -31,12 +31,12 @@ export const dataSource = new DataSource({
   paginate: false,
 });
 
-const dataItemToMessage = (item: ChatTypes.Message): Message => ({
-  role: item.author?.id as Message['role'],
+const dataItemToMessage = (item: ChatTypes.Message): AIMessage => ({
+  role: item.author?.id as AIMessage['role'],
   content: item.text,
 });
 
-const getMessageHistory = (): Message[] => [...dataSource.items()].map(dataItemToMessage);
+const getMessageHistory = (): AIMessage[] => [...dataSource.items()].map(dataItemToMessage);
 
 export const useApi = () => {
   const [alerts, setAlerts] = useState<ChatTypes.Alert[]>([]);
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/service.js b/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/service.js
index 9ac847465eec..11528bfb03c6 100644
--- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/service.js
+++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/service.js
@@ -1,6 +1,6 @@
 import { AzureOpenAI } from 'openai';
 
-export const AzureOpenAIConfig = {
+const AzureOpenAIConfig = {
   dangerouslyAllowBrowser: true,
   deployment: 'gpt-4o-mini',
   apiVersion: '2024-02-01',
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/App.vue b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/App.vue
index 53cbc18ef9b5..9dff9ce73548 100644
--- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/App.vue
+++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/App.vue
@@ -117,7 +117,7 @@ async function processMessageSending(
   typingUsers.value = [assistant];
 
   try {
-    const aiResponse = await getAIResponse(messages);
+    const aiResponse = await getAIResponse(messages) as string;
 
     setTimeout(() => {
       typingUsers.value = [];
@@ -148,7 +148,7 @@ async function regenerate(): Promise<void> {
   const lastMessage = messages.at(-1);
 
   try {
-    const aiResponse = await getAIResponse(messages.slice(0, -1));
+    const aiResponse = await getAIResponse(messages.slice(0, -1)) as string;
 
     updateLastMessage(aiResponse);
 
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/data.ts b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/data.ts
index c27e7516a133..ccee003c46e7 100644
--- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/data.ts
+++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/data.ts
@@ -5,6 +5,7 @@ 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: {
@@ -27,7 +28,8 @@ export const assistant = {
   name: 'Virtual Assistant',
 };
 
-export const messages: DxChatTypes.Message[] = [];
+export const messages: AIMessage[] = [];
+
 const store: DxChatTypes.Message[] = [];
 
 const customStore = new CustomStore<DxChatTypes.Message>({
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/service.ts b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/service.ts
index 2eac7e590717..193ab878c03b 100644
--- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/service.ts
+++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/service.ts
@@ -1,5 +1,12 @@
-import { AzureOpenAI } from 'openai';
-import { type DxChatTypes } from 'devextreme-vue/chat';
+import { AzureOpenAI, OpenAI } from 'openai';
+import { type AIResponse } from 'devextreme/common/ai-integration';
+
+export type AIMessage = (
+  OpenAI.ChatCompletionUserMessageParam
+  | OpenAI.ChatCompletionSystemMessageParam
+  | OpenAI.ChatCompletionAssistantMessageParam) & {
+    content: string;
+  };
 
 const AzureOpenAIConfig = {
   dangerouslyAllowBrowser: true,
@@ -11,7 +18,7 @@ const AzureOpenAIConfig = {
 
 const chatService = new AzureOpenAI(AzureOpenAIConfig);
 
-export async function getAIResponse(messages: DxChatTypes.Message[]): Promise<string> {
+export async function getAIResponse(messages: AIMessage[]): Promise<AIResponse> {
   const params: Record<string, any> = {
     messages,
     model: AzureOpenAIConfig.deployment,
diff --git a/apps/demos/Demos/HtmlEditor/AITextEditing/Vue/data.ts b/apps/demos/Demos/HtmlEditor/AITextEditing/Vue/data.ts
index e7ff15066df9..df44a25972b6 100644
--- a/apps/demos/Demos/HtmlEditor/AITextEditing/Vue/data.ts
+++ b/apps/demos/Demos/HtmlEditor/AITextEditing/Vue/data.ts
@@ -1,13 +1,5 @@
 import type { DxHtmlEditorTypes } from 'devextreme-vue/html-editor';
 
-export const AzureOpenAIConfig = {
-  dangerouslyAllowBrowser: true,
-  deployment: 'gpt-4o-mini',
-  apiVersion: '2024-02-01',
-  endpoint: 'https://public-api.devexpress.com/demo-openai',
-  apiKey: 'DEMO',
-};
-
 export const extractKeywordsPrompt: DxHtmlEditorTypes.AICustomCommand['prompt'] = () =>
   'Extract a list of keywords from the text and return it as a comma-separated string';
 
diff --git a/apps/demos/Demos/HtmlEditor/AITextEditing/Vue/service.ts b/apps/demos/Demos/HtmlEditor/AITextEditing/Vue/service.ts
index 72d2e66d9496..5518b1cf88db 100644
--- a/apps/demos/Demos/HtmlEditor/AITextEditing/Vue/service.ts
+++ b/apps/demos/Demos/HtmlEditor/AITextEditing/Vue/service.ts
@@ -4,7 +4,6 @@ import {
   type RequestParams,
   type Response,
 } from 'devextreme-vue/common/ai-integration';
-import { AzureOpenAIConfig } from './data.ts';
 
 type AIMessage = (
   OpenAI.ChatCompletionUserMessageParam | OpenAI.ChatCompletionSystemMessageParam
@@ -12,6 +11,14 @@ type AIMessage = (
   content: string;
 };
 
+const AzureOpenAIConfig = {
+  dangerouslyAllowBrowser: true,
+  deployment: 'gpt-4o-mini',
+  apiVersion: '2024-02-01',
+  endpoint: 'https://public-api.devexpress.com/demo-openai',
+  apiKey: 'DEMO',
+};
+
 const aiService = new AzureOpenAI(AzureOpenAIConfig);
 
 async function getAIResponse(messages: AIMessage[], signal: AbortSignal): Promise<string> {

From 23f19bdbd66182bca907fd03d1fd992b9873e7e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marker=20dao=20=C2=AE?= <youdontknow@marker-dao.eth>
Date: Mon, 12 Jan 2026 14:34:41 +0000
Subject: [PATCH 6/8] fix(ai-demo-vue-ts)

---
 .../Chat/AIAndChatbotIntegration/Vue/App.vue  |   2 +-
 .../build/bundle-templates/dx.custom.js       | 194 ++++++++++++++++++
 2 files changed, 195 insertions(+), 1 deletion(-)
 create mode 100644 packages/devextreme/build/bundle-templates/dx.custom.js

diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/App.vue b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/App.vue
index 9dff9ce73548..ffd533ed4968 100644
--- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/App.vue
+++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/App.vue
@@ -113,7 +113,7 @@ async function processMessageSending(
 ): Promise<void> {
   toggleDisabledState(true, event);
 
-  messages.push({ role: 'user', content: message.text });
+  messages.push({ role: 'user', content: message.text ?? '' });
   typingUsers.value = [assistant];
 
   try {
diff --git a/packages/devextreme/build/bundle-templates/dx.custom.js b/packages/devextreme/build/bundle-templates/dx.custom.js
new file mode 100644
index 000000000000..3826a18f7d62
--- /dev/null
+++ b/packages/devextreme/build/bundle-templates/dx.custom.js
@@ -0,0 +1,194 @@
+"use strict";
+
+/* Comment lines below for the widgets you don't require and run "devextreme-bundler" in this directory, then include dx.custom.js in your project */
+
+/* Core (dx.module-core.js) */
+/* eslint-disable import/no-commonjs */
+const DevExpress = require('../bundles/modules/core');
+require('../bundles/modules/core.legacy');
+
+/* Integrations (dx.module-core.js) */
+
+require('../integration/jquery');
+require('../integration/knockout');
+
+require('../common/core/localization/globalize/core');
+require('../common/core/localization/globalize/message');
+require('../common/core/localization/globalize/number');
+require('../common/core/localization/globalize/date');
+require('../common/core/localization/globalize/currency');
+
+/* Events (dx.module-core.js) */
+
+require('../common/core/events/click');
+require('../common/core/events/contextmenu');
+require('../common/core/events/double_click');
+require('../common/core/events/drag');
+require('../common/core/events/hold');
+require('../common/core/events/hover');
+require('../common/core/events/pointer');
+require('../common/core/events/swipe');
+require('../common/core/events/transform');
+
+
+/* Data (dx.module-core.js) */
+
+const data = DevExpress.data = require('../bundles/modules/data');
+require('../bundles/modules/data.legacy');
+
+data.odata = require('../bundles/modules/data.odata');
+require('../bundles/modules/data.odata.legacy');
+
+
+/* UI core (dx.module-core.js) */
+
+const ui = DevExpress.ui = require('../bundles/modules/ui');
+
+ui.themes = require('../ui/themes');
+
+// deprecated
+ui.setTemplateEngine = require('../core/templates/template_engine_registry').setTemplateEngine;
+
+ui.dialog = require('../ui/dialog');
+ui.notify = require('../ui/notify');
+ui.repaintFloatingActionButton = require('../ui/speed_dial_action/repaint_floating_action_button');
+ui.hideToasts = require('../ui/toast/hide_toasts');
+
+/* Base widgets (dx.module-widgets-base.js) */
+
+ui.dxActionSheet = require('../ui/action_sheet');
+ui.dxAutocomplete = require('../ui/autocomplete');
+ui.dxBox = require('../ui/box');
+ui.dxButton = require('../ui/button');
+ui.dxDropDownButton = require('../ui/drop_down_button');
+ui.dxButtonGroup = require('../ui/button_group');
+ui.dxCalendar = require('../ui/calendar');
+ui.dxCheckBox = require('../ui/check_box');
+ui.dxColorBox = require('../ui/color_box');
+ui.dxChat = require('../ui/chat');
+ui.dxDateBox = require('../ui/date_box');
+ui.dxDateRangeBox = require('../ui/date_range_box');
+ui.dxDrawer = require('../ui/drawer');
+ui.dxDropDownBox = require('../ui/drop_down_box');
+ui.dxFileUploader = require('../ui/file_uploader');
+ui.dxForm = require('../ui/form');
+ui.dxGallery = require('../ui/gallery');
+ui.dxHtmlEditor = require('../ui/html_editor');
+ui.dxInformer = require('../ui/informer');
+ui.dxList = require('../ui/list');
+ui.dxLoadIndicator = require('../ui/load_indicator');
+ui.dxLoadPanel = require('../ui/load_panel');
+ui.dxLookup = require('../ui/lookup');
+ui.dxMap = require('../ui/map');
+ui.dxMultiView = require('../ui/multi_view');
+ui.dxNumberBox = require('../ui/number_box');
+ui.dxOverlay = require('../ui/overlay/ui.overlay');
+ui.dxPagination = require('../ui/pagination');
+ui.dxPopover = require('../ui/popover');
+ui.dxPopup = require('../ui/popup');
+ui.dxProgressBar = require('../ui/progress_bar');
+ui.dxRadioGroup = require('../ui/radio_group');
+ui.dxRangeSlider = require('../ui/range_slider');
+ui.dxResizable = require('../ui/resizable');
+ui.dxResponsiveBox = require('../ui/responsive_box');
+ui.dxScrollView = require('../ui/scroll_view');
+ui.dxSelectBox = require('../ui/select_box');
+ui.dxSlider = require('../ui/slider');
+ui.dxSpeechToText = require('../ui/speech_to_text');
+ui.dxSpeedDialAction = require('../ui/speed_dial_action');
+ui.dxStepper = require('../ui/stepper');
+ui.dxSplitter = require('../ui/splitter');
+ui.dxSwitch = require('../ui/switch');
+ui.dxTabPanel = require('../ui/tab_panel');
+ui.dxTabs = require('../ui/tabs');
+ui.dxTagBox = require('../ui/tag_box');
+ui.dxTextArea = require('../ui/text_area');
+ui.dxTextBox = require('../ui/text_box');
+ui.dxTileView = require('../ui/tile_view');
+ui.dxToast = require('../ui/toast');
+ui.dxToolbar = require('../ui/toolbar');
+ui.dxTooltip = require('../ui/tooltip');
+ui.dxTrackBar = require('../ui/track_bar');
+ui.dxDraggable = require('../ui/draggable');
+ui.dxSortable = require('../ui/sortable');
+
+/* Validation (dx.module-widgets-base.js) */
+
+DevExpress.validationEngine = require('../ui/validation_engine');
+ui.dxValidationSummary = require('../ui/validation_summary');
+ui.dxValidationGroup = require('../ui/validation_group');
+ui.dxValidator = require('../ui/validator');
+
+
+/* Web widgets (dx.module-widgets-web.js) */
+
+ui.dxAccordion = require('../ui/accordion');
+ui.dxContextMenu = require('../ui/context_menu');
+ui.dxDataGrid = require('../ui/data_grid');
+ui.dxTreeList = require('../ui/tree_list');
+ui.dxCardView = require('../ui/card_view');
+ui.dxMenu = require('../ui/menu');
+ui.dxPivotGrid = require('../ui/pivot_grid');
+ui.dxPivotGridFieldChooser = require('../ui/pivot_grid_field_chooser');
+data.PivotGridDataSource = require('../ui/pivot_grid/data_source');
+data.XmlaStore = require('../ui/pivot_grid/xmla_store');
+ui.dxScheduler = require('../ui/scheduler');
+ui.dxTreeView = require('../ui/tree_view');
+ui.dxFilterBuilder = require('../ui/filter_builder');
+ui.dxFileManager = require('../ui/file_manager');
+ui.dxDiagram = require('../ui/diagram');
+ui.dxGantt = require('../ui/gantt');
+
+
+/* Chart common */
+require('../bundles/modules/common.charts');
+
+/* Viz core (dx.module-viz-core.js) */
+
+const viz = DevExpress.viz = require('../bundles/modules/viz');
+viz.currentTheme = require('../viz/themes').currentTheme;
+viz.registerTheme = require('../viz/themes').registerTheme;
+viz.exportFromMarkup = require('../viz/export').exportFromMarkup;
+viz.getMarkup = require('../viz/export').getMarkup;
+viz.exportWidgets = require('../viz/export').exportWidgets;
+viz.currentPalette = require('../viz/palette').currentPalette;
+viz.getPalette = require('../viz/palette').getPalette;
+viz.generateColors = require('../viz/palette').generateColors;
+viz.registerPalette = require('../viz/palette').registerPalette;
+viz.refreshTheme = require('../viz/themes').refreshTheme;
+
+/* Charts (dx.module-viz-charts.js) */
+viz.dxChart = require('../viz/chart');
+viz.dxPieChart = require('../viz/pie_chart');
+viz.dxPolarChart = require('../viz/polar_chart');
+
+/* Gauges (dx.module-viz-gauges.js) */
+viz.dxLinearGauge = require('../viz/linear_gauge');
+viz.dxCircularGauge = require('../viz/circular_gauge');
+viz.dxBarGauge = require('../viz/bar_gauge');
+
+/* Range selector (dx.module-viz-rangeselector.js) */
+viz.dxRangeSelector = require('../viz/range_selector');
+
+/* Vector map (dx.module-viz-vectormap.js) */
+viz.dxVectorMap = require('../viz/vector_map');
+viz.map = {};
+viz.map.sources = {};
+viz.map.projection = require('../viz/vector_map/projection').projection;
+
+/* Sparklines (dx.module-viz-sparklines.js) */
+viz.dxSparkline = require('../viz/sparkline');
+viz.dxBullet = require('../viz/bullet');
+
+/* Treemap */
+viz.dxTreeMap = require('../viz/tree_map');
+
+/* Funnel */
+viz.dxFunnel = require('../viz/funnel');
+
+/* Sankey */
+viz.dxSankey = require('../viz/sankey');
+
+
+/* Utilities for integration with ASP.NET */
+/* DevExpress.aspnet = require('../aspnet'); */

From 77e7348f563304a3fd7f052f57221fd0ecd81905 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marker=20dao=20=C2=AE?= <youdontknow@marker-dao.eth>
Date: Mon, 12 Jan 2026 15:24:16 +0000
Subject: [PATCH 7/8] fix(dx.custom)

---
 .../build/bundle-templates/dx.custom.js       | 194 ------------------
 1 file changed, 194 deletions(-)
 delete mode 100644 packages/devextreme/build/bundle-templates/dx.custom.js

diff --git a/packages/devextreme/build/bundle-templates/dx.custom.js b/packages/devextreme/build/bundle-templates/dx.custom.js
deleted file mode 100644
index 3826a18f7d62..000000000000
--- a/packages/devextreme/build/bundle-templates/dx.custom.js
+++ /dev/null
@@ -1,194 +0,0 @@
-"use strict";
-
-/* Comment lines below for the widgets you don't require and run "devextreme-bundler" in this directory, then include dx.custom.js in your project */
-
-/* Core (dx.module-core.js) */
-/* eslint-disable import/no-commonjs */
-const DevExpress = require('../bundles/modules/core');
-require('../bundles/modules/core.legacy');
-
-/* Integrations (dx.module-core.js) */
-
-require('../integration/jquery');
-require('../integration/knockout');
-
-require('../common/core/localization/globalize/core');
-require('../common/core/localization/globalize/message');
-require('../common/core/localization/globalize/number');
-require('../common/core/localization/globalize/date');
-require('../common/core/localization/globalize/currency');
-
-/* Events (dx.module-core.js) */
-
-require('../common/core/events/click');
-require('../common/core/events/contextmenu');
-require('../common/core/events/double_click');
-require('../common/core/events/drag');
-require('../common/core/events/hold');
-require('../common/core/events/hover');
-require('../common/core/events/pointer');
-require('../common/core/events/swipe');
-require('../common/core/events/transform');
-
-
-/* Data (dx.module-core.js) */
-
-const data = DevExpress.data = require('../bundles/modules/data');
-require('../bundles/modules/data.legacy');
-
-data.odata = require('../bundles/modules/data.odata');
-require('../bundles/modules/data.odata.legacy');
-
-
-/* UI core (dx.module-core.js) */
-
-const ui = DevExpress.ui = require('../bundles/modules/ui');
-
-ui.themes = require('../ui/themes');
-
-// deprecated
-ui.setTemplateEngine = require('../core/templates/template_engine_registry').setTemplateEngine;
-
-ui.dialog = require('../ui/dialog');
-ui.notify = require('../ui/notify');
-ui.repaintFloatingActionButton = require('../ui/speed_dial_action/repaint_floating_action_button');
-ui.hideToasts = require('../ui/toast/hide_toasts');
-
-/* Base widgets (dx.module-widgets-base.js) */
-
-ui.dxActionSheet = require('../ui/action_sheet');
-ui.dxAutocomplete = require('../ui/autocomplete');
-ui.dxBox = require('../ui/box');
-ui.dxButton = require('../ui/button');
-ui.dxDropDownButton = require('../ui/drop_down_button');
-ui.dxButtonGroup = require('../ui/button_group');
-ui.dxCalendar = require('../ui/calendar');
-ui.dxCheckBox = require('../ui/check_box');
-ui.dxColorBox = require('../ui/color_box');
-ui.dxChat = require('../ui/chat');
-ui.dxDateBox = require('../ui/date_box');
-ui.dxDateRangeBox = require('../ui/date_range_box');
-ui.dxDrawer = require('../ui/drawer');
-ui.dxDropDownBox = require('../ui/drop_down_box');
-ui.dxFileUploader = require('../ui/file_uploader');
-ui.dxForm = require('../ui/form');
-ui.dxGallery = require('../ui/gallery');
-ui.dxHtmlEditor = require('../ui/html_editor');
-ui.dxInformer = require('../ui/informer');
-ui.dxList = require('../ui/list');
-ui.dxLoadIndicator = require('../ui/load_indicator');
-ui.dxLoadPanel = require('../ui/load_panel');
-ui.dxLookup = require('../ui/lookup');
-ui.dxMap = require('../ui/map');
-ui.dxMultiView = require('../ui/multi_view');
-ui.dxNumberBox = require('../ui/number_box');
-ui.dxOverlay = require('../ui/overlay/ui.overlay');
-ui.dxPagination = require('../ui/pagination');
-ui.dxPopover = require('../ui/popover');
-ui.dxPopup = require('../ui/popup');
-ui.dxProgressBar = require('../ui/progress_bar');
-ui.dxRadioGroup = require('../ui/radio_group');
-ui.dxRangeSlider = require('../ui/range_slider');
-ui.dxResizable = require('../ui/resizable');
-ui.dxResponsiveBox = require('../ui/responsive_box');
-ui.dxScrollView = require('../ui/scroll_view');
-ui.dxSelectBox = require('../ui/select_box');
-ui.dxSlider = require('../ui/slider');
-ui.dxSpeechToText = require('../ui/speech_to_text');
-ui.dxSpeedDialAction = require('../ui/speed_dial_action');
-ui.dxStepper = require('../ui/stepper');
-ui.dxSplitter = require('../ui/splitter');
-ui.dxSwitch = require('../ui/switch');
-ui.dxTabPanel = require('../ui/tab_panel');
-ui.dxTabs = require('../ui/tabs');
-ui.dxTagBox = require('../ui/tag_box');
-ui.dxTextArea = require('../ui/text_area');
-ui.dxTextBox = require('../ui/text_box');
-ui.dxTileView = require('../ui/tile_view');
-ui.dxToast = require('../ui/toast');
-ui.dxToolbar = require('../ui/toolbar');
-ui.dxTooltip = require('../ui/tooltip');
-ui.dxTrackBar = require('../ui/track_bar');
-ui.dxDraggable = require('../ui/draggable');
-ui.dxSortable = require('../ui/sortable');
-
-/* Validation (dx.module-widgets-base.js) */
-
-DevExpress.validationEngine = require('../ui/validation_engine');
-ui.dxValidationSummary = require('../ui/validation_summary');
-ui.dxValidationGroup = require('../ui/validation_group');
-ui.dxValidator = require('../ui/validator');
-
-
-/* Web widgets (dx.module-widgets-web.js) */
-
-ui.dxAccordion = require('../ui/accordion');
-ui.dxContextMenu = require('../ui/context_menu');
-ui.dxDataGrid = require('../ui/data_grid');
-ui.dxTreeList = require('../ui/tree_list');
-ui.dxCardView = require('../ui/card_view');
-ui.dxMenu = require('../ui/menu');
-ui.dxPivotGrid = require('../ui/pivot_grid');
-ui.dxPivotGridFieldChooser = require('../ui/pivot_grid_field_chooser');
-data.PivotGridDataSource = require('../ui/pivot_grid/data_source');
-data.XmlaStore = require('../ui/pivot_grid/xmla_store');
-ui.dxScheduler = require('../ui/scheduler');
-ui.dxTreeView = require('../ui/tree_view');
-ui.dxFilterBuilder = require('../ui/filter_builder');
-ui.dxFileManager = require('../ui/file_manager');
-ui.dxDiagram = require('../ui/diagram');
-ui.dxGantt = require('../ui/gantt');
-
-
-/* Chart common */
-require('../bundles/modules/common.charts');
-
-/* Viz core (dx.module-viz-core.js) */
-
-const viz = DevExpress.viz = require('../bundles/modules/viz');
-viz.currentTheme = require('../viz/themes').currentTheme;
-viz.registerTheme = require('../viz/themes').registerTheme;
-viz.exportFromMarkup = require('../viz/export').exportFromMarkup;
-viz.getMarkup = require('../viz/export').getMarkup;
-viz.exportWidgets = require('../viz/export').exportWidgets;
-viz.currentPalette = require('../viz/palette').currentPalette;
-viz.getPalette = require('../viz/palette').getPalette;
-viz.generateColors = require('../viz/palette').generateColors;
-viz.registerPalette = require('../viz/palette').registerPalette;
-viz.refreshTheme = require('../viz/themes').refreshTheme;
-
-/* Charts (dx.module-viz-charts.js) */
-viz.dxChart = require('../viz/chart');
-viz.dxPieChart = require('../viz/pie_chart');
-viz.dxPolarChart = require('../viz/polar_chart');
-
-/* Gauges (dx.module-viz-gauges.js) */
-viz.dxLinearGauge = require('../viz/linear_gauge');
-viz.dxCircularGauge = require('../viz/circular_gauge');
-viz.dxBarGauge = require('../viz/bar_gauge');
-
-/* Range selector (dx.module-viz-rangeselector.js) */
-viz.dxRangeSelector = require('../viz/range_selector');
-
-/* Vector map (dx.module-viz-vectormap.js) */
-viz.dxVectorMap = require('../viz/vector_map');
-viz.map = {};
-viz.map.sources = {};
-viz.map.projection = require('../viz/vector_map/projection').projection;
-
-/* Sparklines (dx.module-viz-sparklines.js) */
-viz.dxSparkline = require('../viz/sparkline');
-viz.dxBullet = require('../viz/bullet');
-
-/* Treemap */
-viz.dxTreeMap = require('../viz/tree_map');
-
-/* Funnel */
-viz.dxFunnel = require('../viz/funnel');
-
-/* Sankey */
-viz.dxSankey = require('../viz/sankey');
-
-
-/* Utilities for integration with ASP.NET */
-/* DevExpress.aspnet = require('../aspnet'); */

From 32a051ae7759fe8856da59f33a96608070606dc0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marker=20dao=20=C2=AE?= <youdontknow@marker-dao.eth>
Date: Mon, 12 Jan 2026 15:38:15 +0000
Subject: [PATCH 8/8] fix(ai-demps)

---
 .../Chat/AIAndChatbotIntegration/Angular/app/ai/ai.service.ts   | 2 +-
 apps/demos/Demos/Chat/AIAndChatbotIntegration/React/service.ts  | 2 +-
 apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/service.ts    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/ai/ai.service.ts b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/ai/ai.service.ts
index 3c7f5923364d..e634e0f45061 100644
--- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/ai/ai.service.ts
+++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/ai/ai.service.ts
@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { AzureOpenAI, OpenAI } from 'openai';
-import { type AIResponse } from 'devextreme/common/ai-integration';
+import { type AIResponse } from 'devextreme-angular/common/ai-integration';
 
 export type AIMessage = (
   OpenAI.ChatCompletionUserMessageParam
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/service.ts b/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/service.ts
index cb6db2a7f944..b668c1eb5e73 100644
--- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/service.ts
+++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/service.ts
@@ -1,5 +1,5 @@
 import { AzureOpenAI, OpenAI } from 'openai';
-import { type AIResponse } from 'devextreme/common/ai-integration';
+import { type AIResponse } from 'devextreme-react/common/ai-integration';
 
 export type AIMessage = (
   OpenAI.ChatCompletionUserMessageParam
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/service.ts b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/service.ts
index 193ab878c03b..c2f8ae553ca3 100644
--- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/service.ts
+++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/service.ts
@@ -1,5 +1,5 @@
 import { AzureOpenAI, OpenAI } from 'openai';
-import { type AIResponse } from 'devextreme/common/ai-integration';
+import { type AIResponse } from 'devextreme-vue/common/ai-integration';
 
 export type AIMessage = (
   OpenAI.ChatCompletionUserMessageParam