refactor(htmleditor && chat): Vue

Author: marker dao ®

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;
 

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;

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

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>

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