refactor(ai-demos)

Author: marker dao ®

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,
     };

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]);
 

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 };

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[]>([]);

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',

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);
 

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>({

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,

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';
 

apps/demos/Demos/HtmlEditor/AITextEditing/Vue/service.ts

@@ -4,14 +4,21 @@ import {
   type RequestParams,
   type Response,
 } from 'devextreme-vue/common/ai-integration';
-import { AzureOpenAIConfig } from './data.ts';
 
 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): Promise<string> {