Skip to content

Commit 9c23ef3

Browse files
author
fanjin.fjy
committed
feat: Optimize AI Execution Pipeline
1 parent 7c0bec5 commit 9c23ef3

10 files changed

Lines changed: 225 additions & 202 deletions

File tree

‎chat2db-client/src/blocks/Setting/AiSetting/index.tsx‎

Lines changed: 69 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,109 @@
11
import React, { useEffect, useState } from 'react';
2-
import configService, { IChatGPTConfig } from '@/service/config';
2+
import configService from '@/service/config';
33
import { AiSqlSourceType } from '@/typings/ai';
4-
import { Button, Input, message, Radio } from 'antd';
4+
import { Button, Input, Radio } from 'antd';
55
import i18n from '@/i18n';
66
import classnames from 'classnames';
7-
import Popularize from '@/components/Popularize';
8-
import { IAIState } from '@/models/ai';
7+
import { IAiConfig } from '@/typings/setting';
98
import styles from './index.less';
10-
119
interface IProps {
12-
handleUpdateAiConfig: (payload: IAIState['keyAndAiType']) => void;
13-
chatGPTConfig: IChatGPTConfig;
10+
handleApplyAiConfig: (aiConfig: IAiConfig) => void;
11+
aiConfig: IAiConfig;
1412
}
1513

1614
// openAI 的设置项
1715
export default function SettingAI(props: IProps) {
18-
const { handleUpdateAiConfig } = props;
19-
const [chatGPTConfig, setChatGPTConfig] = useState<IChatGPTConfig>(props?.chatGPTConfig);
16+
const [aiConfig, setAiConfig] = useState<IAiConfig>(props?.aiConfig);
2017

21-
if (!chatGPTConfig) {
18+
if (!aiConfig) {
2219
return null;
2320
}
2421

2522
useEffect(() => {
26-
setChatGPTConfig(props.chatGPTConfig);
27-
}, [props.chatGPTConfig]);
23+
setAiConfig(props.aiConfig);
24+
}, [props.aiConfig]);
25+
26+
const handleAiTypeChange = async (e) => {
27+
const aiSqlSource = e.target.value;
2828

29-
function changeChatGPTApiKey() {
30-
const newChatGPTConfig = { ...chatGPTConfig };
31-
if (newChatGPTConfig.apiHost && !newChatGPTConfig.apiHost?.endsWith('/')) {
32-
newChatGPTConfig.apiHost = newChatGPTConfig.apiHost + '/';
29+
// 查询对应ai类型的配置
30+
const res = await configService.getAiSystemConfig({
31+
aiSqlSource,
32+
});
33+
setAiConfig(res);
34+
};
35+
36+
/** 应用Ai配置 */
37+
const handleApplyAiConfig = () => {
38+
const newAiConfig = { ...aiConfig };
39+
if (newAiConfig.apiHost && !newAiConfig.apiHost?.endsWith('/')) {
40+
newAiConfig.apiHost = newAiConfig.apiHost + '/';
3341
}
34-
if (chatGPTConfig?.aiSqlSource === AiSqlSourceType.CHAT2DBAI) {
35-
newChatGPTConfig.chat2dbApiHost = `${window._appGatewayParams.baseUrl || 'http://test.sqlgpt.cn/gateway'}${'/model/'}`;
42+
if (aiConfig?.aiSqlSource === AiSqlSourceType.CHAT2DBAI) {
43+
newAiConfig.apiHost = `${window._appGatewayParams.baseUrl || 'http://test.sqlgpt.cn/gateway'}${'/model/'}`;
3644
}
37-
configService.setChatGptSystemConfig(newChatGPTConfig).then((res) => {
38-
message.success(i18n('common.text.submittedSuccessfully'));
39-
});
4045

41-
handleUpdateAiConfig &&
42-
handleUpdateAiConfig({
43-
key: newChatGPTConfig.chat2dbApiHost,
44-
aiType: newChatGPTConfig.aiSqlSource,
45-
});
46-
}
46+
if (props.handleApplyAiConfig) {
47+
props.handleApplyAiConfig(newAiConfig);
48+
}
49+
};
4750

4851
return (
4952
<>
5053
<div className={styles.aiSqlSource}>
5154
<div className={styles.aiSqlSourceTitle}>{i18n('setting.title.aiSource')}:</div>
52-
<Radio.Group
53-
onChange={(e) => {
54-
setChatGPTConfig({ ...chatGPTConfig, aiSqlSource: e.target.value });
55-
}}
56-
value={chatGPTConfig?.aiSqlSource}
57-
>
55+
<Radio.Group onChange={handleAiTypeChange} value={aiConfig?.aiSqlSource}>
5856
<Radio value={AiSqlSourceType.CHAT2DBAI}>Chat2DB AI</Radio>
5957
<Radio value={AiSqlSourceType.OPENAI}>Open AI</Radio>
6058
<Radio value={AiSqlSourceType.AZUREAI}>Azure AI</Radio>
6159
<Radio value={AiSqlSourceType.RESTAI}>{i18n('setting.tab.custom')}</Radio>
6260
</Radio.Group>
6361
</div>
64-
{chatGPTConfig?.aiSqlSource === AiSqlSourceType.CHAT2DBAI && (
62+
63+
{aiConfig?.aiSqlSource === AiSqlSourceType.CHAT2DBAI && (
6564
<div>
6665
<div className={styles.title}>Api Key</div>
6766
<div className={classnames(styles.content, styles.chatGPTKey)}>
6867
<Input
6968
placeholder={i18n('setting.placeholder.chat2dbApiKey')}
70-
value={chatGPTConfig.chat2dbApiKey}
69+
value={aiConfig.apiKey}
7170
onChange={(e) => {
72-
setChatGPTConfig({ ...chatGPTConfig, chat2dbApiKey: e.target.value });
71+
setAiConfig({ ...aiConfig, apiKey: e.target.value });
7372
}}
7473
/>
7574
</div>
7675
</div>
7776
)}
78-
{chatGPTConfig?.aiSqlSource === AiSqlSourceType.OPENAI && (
77+
{aiConfig?.aiSqlSource === AiSqlSourceType.OPENAI && (
7978
<div>
8079
<div className={styles.title}>Api Key</div>
8180
<div className={classnames(styles.content, styles.chatGPTKey)}>
8281
<Input
8382
placeholder={i18n('setting.placeholder.apiKey')}
84-
value={chatGPTConfig.apiKey}
83+
value={aiConfig.apiKey}
8584
onChange={(e) => {
86-
setChatGPTConfig({ ...chatGPTConfig, apiKey: e.target.value });
85+
setAiConfig({ ...aiConfig, apiKey: e.target.value });
8786
}}
8887
/>
8988
</div>
9089
<div className={styles.title}>Api Host</div>
9190
<div className={classnames(styles.content, styles.chatGPTKey)}>
9291
<Input
9392
placeholder={i18n('setting.placeholder.apiHost')}
94-
value={chatGPTConfig.apiHost}
93+
value={aiConfig.apiHost}
9594
onChange={(e) => {
96-
setChatGPTConfig({ ...chatGPTConfig, apiHost: e.target.value });
95+
setAiConfig({ ...aiConfig, apiHost: e.target.value });
9796
}}
9897
/>
9998
</div>
10099
<div className={styles.title}>HTTP Proxy Host</div>
101100
<div className={classnames(styles.content, styles.chatGPTKey)}>
102101
<Input
103102
placeholder={i18n('setting.placeholder.httpsProxy', 'host')}
104-
value={chatGPTConfig.httpProxyHost}
103+
value={aiConfig.httpProxyHost}
105104
onChange={(e) => {
106-
setChatGPTConfig({
107-
...chatGPTConfig,
105+
setAiConfig({
106+
...aiConfig,
108107
httpProxyHost: e.target.value,
109108
});
110109
}}
@@ -114,65 +113,65 @@ export default function SettingAI(props: IProps) {
114113
<div className={classnames(styles.content, styles.chatGPTKey)}>
115114
<Input
116115
placeholder={i18n('setting.placeholder.httpsProxy', 'port')}
117-
value={chatGPTConfig.httpProxyPort}
116+
value={aiConfig.httpProxyPort}
118117
onChange={(e) => {
119-
setChatGPTConfig({
120-
...chatGPTConfig,
118+
setAiConfig({
119+
...aiConfig,
121120
httpProxyPort: e.target.value,
122121
});
123122
}}
124123
/>
125124
</div>
126125
</div>
127126
)}
128-
{chatGPTConfig?.aiSqlSource === AiSqlSourceType.AZUREAI && (
127+
{aiConfig?.aiSqlSource === AiSqlSourceType.AZUREAI && (
129128
<div>
130129
<div className={styles.title}>Api Key</div>
131130
<div className={classnames(styles.content, styles.chatGPTKey)}>
132131
<Input
133132
placeholder={i18n('setting.placeholder.azureOpenAIKey')}
134-
value={chatGPTConfig.azureApiKey}
133+
value={aiConfig.apiKey}
135134
onChange={(e) => {
136-
setChatGPTConfig({ ...chatGPTConfig, azureApiKey: e.target.value });
135+
setAiConfig({ ...aiConfig, apiKey: e.target.value });
137136
}}
138137
/>
139138
</div>
140139
<div className={styles.title}>Endpoint</div>
141140
<div className={classnames(styles.content, styles.chatGPTKey)}>
142141
<Input
143142
placeholder={i18n('setting.placeholder.azureEndpoint')}
144-
value={chatGPTConfig.azureEndpoint}
143+
value={aiConfig.apiHost}
145144
onChange={(e) => {
146-
setChatGPTConfig({ ...chatGPTConfig, azureEndpoint: e.target.value });
145+
setAiConfig({ ...aiConfig, apiHost: e.target.value });
147146
}}
148147
/>
149148
</div>
150149
<div className={styles.title}>DeploymentId</div>
151150
<div className={classnames(styles.content, styles.chatGPTKey)}>
152151
<Input
153152
placeholder={i18n('setting.placeholder.azureDeployment')}
154-
value={chatGPTConfig.azureDeploymentId}
153+
value={aiConfig.model}
155154
onChange={(e) => {
156-
setChatGPTConfig({
157-
...chatGPTConfig,
158-
azureDeploymentId: e.target.value,
155+
setAiConfig({
156+
...aiConfig,
157+
model: e.target.value,
159158
});
160159
}}
161160
/>
162161
</div>
163162
</div>
164163
)}
165-
{chatGPTConfig?.aiSqlSource === AiSqlSourceType.RESTAI && (
164+
{aiConfig?.aiSqlSource === AiSqlSourceType.RESTAI && (
166165
<div>
167166
<div className={styles.title}>{i18n('setting.label.customAiUrl')}</div>
168167
<div className={classnames(styles.content, styles.chatGPTKey)}>
169168
<Input
170169
placeholder={i18n('setting.placeholder.customUrl')}
171-
value={chatGPTConfig.restAiUrl}
170+
value={aiConfig.apiHost}
172171
onChange={(e) => {
173-
setChatGPTConfig({
174-
...chatGPTConfig,
175-
restAiUrl: e.target.value,
172+
setAiConfig({
173+
...aiConfig,
174+
apiHost: e.target.value,
176175
});
177176
}}
178177
/>
@@ -181,12 +180,12 @@ export default function SettingAI(props: IProps) {
181180
<div className={classnames(styles.content)}>
182181
<Radio.Group
183182
onChange={(e) => {
184-
setChatGPTConfig({
185-
...chatGPTConfig,
186-
restAiStream: e.target.value,
183+
setAiConfig({
184+
...aiConfig,
185+
stream: e.target.value,
187186
});
188187
}}
189-
value={chatGPTConfig.restAiStream}
188+
value={aiConfig.stream}
190189
>
191190
<Radio value={true}>{i18n('common.text.is')}</Radio>
192191
<Radio value={false}>{i18n('common.text.no')}</Radio>
@@ -195,11 +194,14 @@ export default function SettingAI(props: IProps) {
195194
</div>
196195
)}
197196
<div className={styles.bottomButton}>
198-
<Button type="primary" onClick={changeChatGPTApiKey}>
197+
{/* <Button >
198+
199+
</Button> */}
200+
<Button type="primary" onClick={handleApplyAiConfig}>
199201
{i18n('setting.button.apply')}
200202
</Button>
201203
</div>
202-
{/* {chatGPTConfig?.aiSqlSource === AiSqlSourceType.CHAT2DBAI && (
204+
{/* {aiConfig?.aiSqlSource === AiSqlSourceType.CHAT2DBAI && (
203205
<Popularize source='setting'></Popularize>
204206
)
205207
} */}

‎chat2db-client/src/blocks/Setting/index.tsx‎

Lines changed: 16 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -10,61 +10,32 @@ import About from './About';
1010
import { connect } from 'umi';
1111
import { IAIState } from '@/models/ai';
1212
import styles from './index.less';
13-
import configService, { IChatGPTConfig } from '@/service/config';
13+
import configService from '@/service/config';
1414
import { AiSqlSourceType } from '@/typings/ai';
1515
import TestVersion from '@/components/TestVersion';
16+
import { IAiConfig } from '@/typings';
1617

1718
interface IProps {
19+
aiConfig: IAiConfig;
1820
className?: string;
1921
text?: string;
2022
dispatch: Function;
2123
}
22-
const initChatGPTConfig = {
23-
chat2dbApiKey: '',
24-
chat2dbApiHost: '',
25-
apiKey: '',
26-
httpProxyHost: '',
27-
httpProxyPort: '',
28-
restAiUrl: '',
29-
apiHost: '',
30-
restAiStream: true,
31-
aiSqlSource: '',
32-
azureApiKey: '',
33-
azureEndpoint: '',
34-
azureDeploymentId: '',
35-
};
24+
3625
function Setting(props: IProps) {
3726
const { className, text, dispatch } = props;
3827
const [isModalVisible, setIsModalVisible] = useState(false);
39-
const [chatGPTConfig, setChatGPTConfig] = useState<IChatGPTConfig>(initChatGPTConfig);
4028

4129
const [currentMenu, setCurrentMenu] = useState(0);
4230

4331
useEffect(() => {
44-
getChatGptSystemConfig();
32+
getAiSystemConfig();
4533
}, []);
4634

47-
useEffect(() => {
48-
if (!isModalVisible) {
49-
return;
50-
}
51-
getChatGptSystemConfig();
52-
}, [isModalVisible]);
53-
54-
const getChatGptSystemConfig = () => {
55-
configService.getChatGptSystemConfig().then((res: IChatGPTConfig) => {
56-
if (!res) {
57-
return;
58-
}
59-
handleUpdateAiConfig({
60-
key: res.chat2dbApiHost,
61-
aiType: res.aiSqlSource,
62-
});
63-
setChatGPTConfig({
64-
...res,
65-
restAiStream: res.restAiStream || true,
66-
aiSqlSource: res.aiSqlSource || AiSqlSourceType.CHAT2DBAI,
67-
});
35+
const getAiSystemConfig = () => {
36+
/** 获取ai相关配置 */
37+
dispatch({
38+
type: 'ai/getAiSystemConfig',
6839
});
6940
};
7041

@@ -84,18 +55,13 @@ function Setting(props: IProps) {
8455
setCurrentMenu(t);
8556
}
8657

87-
const handleUpdateAiConfig = (payload: IAIState['keyAndAiType']) => {
58+
const handleApplyAiConfig = (aiConfig: IAiConfig) => {
8859
dispatch({
89-
type: 'ai/setKeyAndAiType',
90-
payload,
91-
});
92-
dispatch({
93-
type: 'ai/fetchRemainingUse',
94-
payload: {
95-
key: payload.key,
96-
},
60+
type: 'ai/setAiSystemConfig',
61+
payload: aiConfig,
9762
});
9863
};
64+
9965
const menusList = [
10066
{
10167
label: i18n('setting.nav.basic'),
@@ -105,7 +71,7 @@ function Setting(props: IProps) {
10571
{
10672
label: i18n('setting.nav.customAi'),
10773
icon: '\ue646',
108-
body: <AISetting chatGPTConfig={chatGPTConfig} handleUpdateAiConfig={handleUpdateAiConfig} />,
74+
body: <AISetting aiConfig={props.aiConfig} handleApplyAiConfig={handleApplyAiConfig} />,
10975
},
11076
{
11177
label: i18n('setting.nav.proxy'),
@@ -128,7 +94,7 @@ function Setting(props: IProps) {
12894
<Iconfont className={styles.settingIcon} code="&#xe630;"></Iconfont>
12995
)}
13096
</div>
131-
<TestVersion></TestVersion>
97+
<TestVersion />
13298
<Modal
13399
open={isModalVisible}
134100
onOk={handleOk}
@@ -166,5 +132,5 @@ function Setting(props: IProps) {
166132
}
167133

168134
export default connect(({ ai }: { ai: IAIState }) => ({
169-
remainingUse: ai.remainingUse,
135+
aiConfig: ai.aiConfig,
170136
}))(Setting);

0 commit comments

Comments
 (0)