Skip to content

Commit 299799f

Browse files
author
marker dao ®
committed
refactor(htmleditor && chat): React
1 parent e6e4b2e commit 299799f

File tree

12 files changed

+166
-160
lines changed

12 files changed

+166
-160
lines changed

‎apps/demos/Demos/Chat/AIAndChatbotIntegration/React/data.ts‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,5 @@
11
import type { ChatTypes } from 'devextreme-react/chat';
22

3-
export const AzureOpenAIConfig = {
4-
dangerouslyAllowBrowser: true,
5-
deployment: 'gpt-4o-mini',
6-
apiVersion: '2024-02-01',
7-
endpoint: 'https://public-api.devexpress.com/demo-openai',
8-
apiKey: 'DEMO',
9-
};
10-
113
export const REGENERATION_TEXT = 'Regeneration...';
124
export const CHAT_DISABLED_CLASS = 'chat-disabled';
135
export const ALERT_TIMEOUT = 1000 * 60;

‎apps/demos/Demos/Chat/AIAndChatbotIntegration/React/service.ts‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { AzureOpenAI, OpenAI } from 'openai';
2+
import type { AIResponse } from 'devextreme/common/ai-integration';
3+
4+
type Message = (OpenAI.ChatCompletionUserMessageParam | OpenAI.ChatCompletionAssistantMessageParam) & {
5+
content: string;
6+
};
7+
8+
export const AzureOpenAIConfig = {
9+
dangerouslyAllowBrowser: true,
10+
deployment: 'gpt-4o-mini',
11+
apiVersion: '2024-02-01',
12+
endpoint: 'https://public-api.devexpress.com/demo-openai',
13+
apiKey: 'DEMO',
14+
};
15+
16+
const chatService = new AzureOpenAI(AzureOpenAIConfig);
17+
18+
const wait = (delay: number): Promise<void> =>
19+
new Promise((resolve): void => {
20+
setTimeout(resolve, delay);
21+
});
22+
23+
export async function getAIResponse(messages: Message[], delay?: number): Promise<AIResponse> {
24+
const params = {
25+
messages,
26+
model: AzureOpenAIConfig.deployment,
27+
max_tokens: 1000,
28+
temperature: 0.7,
29+
};
30+
31+
const response = await chatService.chat.completions.create(params);
32+
const data = { choices: response.choices };
33+
34+
if (delay) {
35+
await wait(delay);
36+
}
37+
38+
return data.choices[0].message?.content ?? '';
39+
}
40+
41+
export type { Message };

‎apps/demos/Demos/Chat/AIAndChatbotIntegration/React/useApi.ts‎

Lines changed: 2 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,13 @@
11
import { useCallback, useState } from 'react';
2-
import { AzureOpenAI, OpenAI } from 'openai';
32
import type { ChatTypes } from 'devextreme-react/chat';
43
import { CustomStore, DataSource } from 'devextreme-react/common/data';
5-
import type { AIResponse } from 'devextreme/common/ai-integration';
64
import {
75
ALERT_TIMEOUT,
86
assistant,
9-
AzureOpenAIConfig,
107
REGENERATION_TEXT,
118
} from './data.ts';
12-
13-
type Message = (OpenAI.ChatCompletionUserMessageParam | OpenAI.ChatCompletionAssistantMessageParam) & {
14-
content: string;
15-
};
16-
17-
const chatService = new AzureOpenAI(AzureOpenAIConfig);
18-
19-
const wait = (delay: number): Promise<void> =>
20-
new Promise((resolve): void => {
21-
setTimeout(resolve, delay);
22-
});
23-
24-
export async function getAIResponse(messages: Message[], delay?: number): Promise<AIResponse> {
25-
const params = {
26-
messages,
27-
model: AzureOpenAIConfig.deployment,
28-
max_tokens: 1000,
29-
temperature: 0.7,
30-
};
31-
32-
const response = await chatService.chat.completions.create(params);
33-
const data = { choices: response.choices };
34-
35-
if (delay) {
36-
await wait(delay);
37-
}
38-
39-
return data.choices[0].message?.content ?? '';
40-
}
9+
import { getAIResponse } from './service.ts';
10+
import type { Message } from './service.ts';
4111

4212
const store: ChatTypes.Message[] = [];
4313

‎apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/data.js‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,3 @@
1-
export const AzureOpenAIConfig = {
2-
dangerouslyAllowBrowser: true,
3-
deployment: 'gpt-4o-mini',
4-
apiVersion: '2024-02-01',
5-
endpoint: 'https://public-api.devexpress.com/demo-openai',
6-
apiKey: 'DEMO',
7-
};
81
export const REGENERATION_TEXT = 'Regeneration...';
92
export const CHAT_DISABLED_CLASS = 'chat-disabled';
103
export const ALERT_TIMEOUT = 1000 * 60;

‎apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/service.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { AzureOpenAI } from 'openai';
2+
3+
export const AzureOpenAIConfig = {
4+
dangerouslyAllowBrowser: true,
5+
deployment: 'gpt-4o-mini',
6+
apiVersion: '2024-02-01',
7+
endpoint: 'https://public-api.devexpress.com/demo-openai',
8+
apiKey: 'DEMO',
9+
};
10+
const chatService = new AzureOpenAI(AzureOpenAIConfig);
11+
const wait = (delay) =>
12+
new Promise((resolve) => {
13+
setTimeout(resolve, delay);
14+
});
15+
export async function getAIResponse(messages, delay) {
16+
const params = {
17+
messages,
18+
model: AzureOpenAIConfig.deployment,
19+
max_tokens: 1000,
20+
temperature: 0.7,
21+
};
22+
const response = await chatService.chat.completions.create(params);
23+
const data = { choices: response.choices };
24+
if (delay) {
25+
await wait(delay);
26+
}
27+
return data.choices[0].message?.content ?? '';
28+
}

‎apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/useApi.js‎

Lines changed: 2 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,8 @@
11
import { useCallback, useState } from 'react';
2-
import { AzureOpenAI } from 'openai';
32
import { CustomStore, DataSource } from 'devextreme-react/common/data';
4-
import {
5-
ALERT_TIMEOUT, assistant, AzureOpenAIConfig, REGENERATION_TEXT,
6-
} from './data.js';
3+
import { ALERT_TIMEOUT, assistant, REGENERATION_TEXT } from './data.js';
4+
import { getAIResponse } from './service.js';
75

8-
const chatService = new AzureOpenAI(AzureOpenAIConfig);
9-
const wait = (delay) =>
10-
new Promise((resolve) => {
11-
setTimeout(resolve, delay);
12-
});
13-
export async function getAIResponse(messages, delay) {
14-
const params = {
15-
messages,
16-
model: AzureOpenAIConfig.deployment,
17-
max_tokens: 1000,
18-
temperature: 0.7,
19-
};
20-
const response = await chatService.chat.completions.create(params);
21-
const data = { choices: response.choices };
22-
if (delay) {
23-
await wait(delay);
24-
}
25-
return data.choices[0].message?.content ?? '';
26-
}
276
const store = [];
287
const customStore = new CustomStore({
298
key: 'id',

‎apps/demos/Demos/HtmlEditor/AITextEditing/React/App.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import HtmlEditor, { Toolbar, ToolbarItem, Command } from 'devextreme-react/html-editor';
3-
import { markup, extractKeywordsPrompt, aiIntegration } from './data.ts';
3+
import { markup, extractKeywordsPrompt } from './data.ts';
4+
import { aiIntegration } from './service.ts';
45

56
export default function App() {
67
return (

‎apps/demos/Demos/HtmlEditor/AITextEditing/React/data.ts‎

Lines changed: 0 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,4 @@
11
import type { HtmlEditorTypes } from 'devextreme-react/html-editor';
2-
import { AIIntegration } from 'devextreme-react/common/ai-integration';
3-
import type { AIResponse, RequestParams, Response } from 'devextreme-react/common/ai-integration';
4-
import { AzureOpenAI, OpenAI } from 'openai';
5-
6-
type AIMessage = (OpenAI.ChatCompletionUserMessageParam | OpenAI.ChatCompletionSystemMessageParam) & {
7-
content: string;
8-
};
9-
10-
const AzureOpenAIConfig = {
11-
dangerouslyAllowBrowser: true,
12-
deployment: 'gpt-4o-mini',
13-
apiVersion: '2024-02-01',
14-
endpoint: 'https://public-api.devexpress.com/demo-openai',
15-
apiKey: 'DEMO',
16-
};
17-
18-
const aiService = new AzureOpenAI(AzureOpenAIConfig);
19-
20-
async function getAIResponse(messages: AIMessage[], signal: AbortSignal) {
21-
const params = {
22-
messages,
23-
model: AzureOpenAIConfig.deployment,
24-
max_tokens: 1000,
25-
temperature: 0.7,
26-
};
27-
28-
const response = await aiService.chat.completions.create(params, { signal });
29-
return response.choices[0].message?.content;
30-
}
31-
32-
export const aiIntegration = new AIIntegration({
33-
sendRequest({ prompt }: RequestParams): Response {
34-
const controller = new AbortController();
35-
const signal = controller.signal;
36-
37-
const aiPrompt: AIMessage[] = [
38-
{ role: 'system', content: prompt.system ?? '' },
39-
{ role: 'user', content: prompt.user ?? '' },
40-
];
41-
42-
const promise = getAIResponse(aiPrompt, signal) as Promise<AIResponse>;
43-
44-
return {
45-
promise,
46-
abort: () => {
47-
controller.abort();
48-
},
49-
};
50-
},
51-
});
522

533
export const markup = `
544
<h2>

‎apps/demos/Demos/HtmlEditor/AITextEditing/React/service.ts‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { AIIntegration } from 'devextreme-react/common/ai-integration';
2+
import type { AIResponse, RequestParams, Response } from 'devextreme-react/common/ai-integration';
3+
import { AzureOpenAI, OpenAI } from 'openai';
4+
5+
type AIMessage = (OpenAI.ChatCompletionUserMessageParam | OpenAI.ChatCompletionSystemMessageParam) & {
6+
content: string;
7+
};
8+
9+
const AzureOpenAIConfig = {
10+
dangerouslyAllowBrowser: true,
11+
deployment: 'gpt-4o-mini',
12+
apiVersion: '2024-02-01',
13+
endpoint: 'https://public-api.devexpress.com/demo-openai',
14+
apiKey: 'DEMO',
15+
};
16+
17+
const aiService = new AzureOpenAI(AzureOpenAIConfig);
18+
19+
async function getAIResponse(messages: AIMessage[], signal: AbortSignal) {
20+
const params = {
21+
messages,
22+
model: AzureOpenAIConfig.deployment,
23+
max_tokens: 1000,
24+
temperature: 0.7,
25+
};
26+
27+
const response = await aiService.chat.completions.create(params, { signal });
28+
29+
return response.choices[0].message?.content;
30+
}
31+
32+
export const aiIntegration = new AIIntegration({
33+
sendRequest({ prompt }: RequestParams): Response {
34+
const controller = new AbortController();
35+
const signal = controller.signal;
36+
37+
const aiPrompt: AIMessage[] = [
38+
{ role: 'system', content: prompt.system ?? '' },
39+
{ role: 'user', content: prompt.user ?? '' },
40+
];
41+
42+
const promise = getAIResponse(aiPrompt, signal) as Promise<AIResponse>;
43+
44+
return {
45+
promise,
46+
abort: () => {
47+
controller.abort();
48+
},
49+
};
50+
},
51+
});

‎apps/demos/Demos/HtmlEditor/AITextEditing/ReactJs/App.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import HtmlEditor, { Toolbar, ToolbarItem, Command } from 'devextreme-react/html-editor';
3-
import { markup, extractKeywordsPrompt, aiIntegration } from './data.js';
3+
import { markup, extractKeywordsPrompt } from './data.js';
4+
import { aiIntegration } from './service.js';
45

56
export default function App() {
67
return (

0 commit comments

Comments
 (0)