Skip to content

Commit d95027d

Browse files
arvinxxarvinxx
committed
✨ feat: 增加不同模型
1 parent a82f35d commit d95027d

File tree

12 files changed

+294
-89
lines changed

12 files changed

+294
-89
lines changed

‎public/locales/zh_CN/common.json

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"agentAvatar": "头像",
44
"agentDescription": "描述",
55
"agentDescriptionPlaceholder": "请输入描述",
6+
"agentModel": "模型",
67
"agentName": "名称",
78
"agentNamePlaceholder": "请输入名称",
89
"agentProfile": "助手信息",
@@ -18,7 +19,12 @@
1819
"defaultAgent": "默认助手",
1920
"edit": "编辑",
2021
"editAgentProfile": "编辑助手信息",
21-
22+
"export": "导出",
23+
"gpt-3.5-turbo": "GPT 3.5",
24+
"gpt-3.5-turbo-16k": "GPT 3.5 (16K)",
25+
"gpt-4": "GPT 4",
26+
"gpt-4-32k": "GPT 4 (32K)",
27+
"modelConfig": "模型配置",
2228
"modelTemperature": "发散度",
2329
"newAgent": "新建助手",
2430
"noDescription": "暂无描述",
@@ -29,5 +35,6 @@
2935
"sessionSetting": "会话设置",
3036
"setting": "设置",
3137
"share": "分享",
32-
"updateAgent": "更新助理信息"
38+
"updateAgent": "更新助理信息",
39+
"updatePrompt": "更新提示词"
3340
}

‎src/pages/api/OpenAIStream.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,6 @@ export function OpenAIStream(payload: OpenAIStreamPayload) {
8686
{
8787
streaming: true,
8888
...params,
89-
9089
callbacks: [
9190
{
9291
handleLLMNewToken(token) {

‎src/pages/chat/SessionList/List/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const SessionList = memo(() => {
1313
const { styles, cx } = useStyles();
1414
const list = useSessionStore((s) => sessionSelectors.chatList(s), isEqual);
1515
const [activeId, loading] = useSessionStore(
16-
(s) => [s.activeId, s.loading.summarizingTitle],
16+
(s) => [s.activeId, s.autocompleteLoading.title],
1717
shallow,
1818
);
1919

‎src/pages/chat/[id]/edit/AgentConfig.tsx

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import { TextArea } from '@lobehub/ui';
2+
import { Button, Collapse, InputNumber, Segmented, Slider } from 'antd';
3+
import isEqual from 'fast-deep-equal';
4+
import { useTranslation } from 'next-i18next';
5+
import { Flexbox } from 'react-layout-kit';
6+
import { shallow } from 'zustand/shallow';
7+
8+
import { agentSelectors, useSessionStore } from '@/store/session';
9+
import { LanguageModel } from '@/types/llm';
10+
11+
import { FormItem } from './FormItem';
12+
import { useStyles } from './style';
13+
14+
const AgentConfig = () => {
15+
const { t } = useTranslation('common');
16+
17+
const { styles, theme } = useStyles();
18+
19+
const config = useSessionStore(agentSelectors.currentAgentConfigSafe, isEqual);
20+
21+
const [updateAgentConfig] = useSessionStore((s) => [s.updateAgentConfig], shallow);
22+
23+
return (
24+
<>
25+
<Flexbox
26+
align={'center'}
27+
distribution={'space-between'}
28+
horizontal
29+
paddingBlock={12}
30+
style={{
31+
borderBottom: `1px solid ${theme.colorBorder}`,
32+
}}
33+
>
34+
<Flexbox className={styles.profile}> {t('modelConfig')}</Flexbox>
35+
</Flexbox>
36+
<Flexbox gap={24}>
37+
<FormItem label={t('agentModel')}>
38+
<Segmented
39+
block
40+
onChange={(value) => {
41+
updateAgentConfig({ model: value as LanguageModel });
42+
}}
43+
options={Object.values(LanguageModel).map((value) => ({
44+
label: t(value),
45+
value,
46+
}))}
47+
size={'large'}
48+
/>
49+
</FormItem>
50+
<FormItem label={t('agentPrompt')}>
51+
<Flexbox gap={16}>
52+
<TextArea
53+
placeholder={t('agentPromptPlaceholder')}
54+
style={{ minHeight: 160 }}
55+
type={'block'}
56+
value={config.systemRole}
57+
/>
58+
<Flexbox direction={'horizontal-reverse'}>
59+
<Button type={'primary'}>{t('updatePrompt')}</Button>
60+
</Flexbox>
61+
</Flexbox>
62+
</FormItem>
63+
<Collapse
64+
activeKey={['advanceSettings']}
65+
bordered={false}
66+
className={styles.title}
67+
expandIconPosition={'end'}
68+
items={[
69+
{
70+
children: (
71+
<Flexbox paddingBlock={16}>
72+
<FormItem label={t('modelTemperature')}>
73+
<Flexbox gap={16} horizontal>
74+
<Slider
75+
max={1}
76+
min={0}
77+
onChange={(value) => {
78+
updateAgentConfig({ params: { temperature: value } });
79+
}}
80+
step={0.1}
81+
style={{ flex: 1 }}
82+
value={Number(config.params.temperature)}
83+
/>
84+
<InputNumber
85+
max={1}
86+
min={0}
87+
onChange={(value) => {
88+
if (value) updateAgentConfig({ params: { temperature: value } });
89+
}}
90+
value={config.params.temperature}
91+
/>
92+
</Flexbox>
93+
</FormItem>
94+
</Flexbox>
95+
),
96+
key: 'advanceSettings',
97+
label: t('advanceSettings'),
98+
},
99+
]}
100+
/>
101+
</Flexbox>
102+
</>
103+
);
104+
};
105+
106+
export default AgentConfig;

‎src/pages/chat/[id]/edit/AgentMeta.tsx

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import { ActionIcon, Avatar, Input } from '@lobehub/ui';
2+
import { Button } from 'antd';
3+
import isEqual from 'fast-deep-equal';
4+
import { LucideSparkles } from 'lucide-react';
5+
import { useTranslation } from 'next-i18next';
6+
import { Flexbox } from 'react-layout-kit';
7+
import { shallow } from 'zustand/shallow';
8+
9+
import { agentSelectors, useSessionStore } from '@/store/session';
10+
11+
import { FormItem } from './FormItem';
12+
import { useStyles } from './style';
13+
14+
const AgentMeta = () => {
15+
const { t } = useTranslation('common');
16+
17+
const { styles, theme } = useStyles();
18+
19+
const metaData = useSessionStore(agentSelectors.currentAgentMeta, isEqual);
20+
21+
const [autocompleteMeta, loading] = useSessionStore(
22+
(s) => [s.autocompleteMeta, s.autocompleteLoading],
23+
shallow,
24+
);
25+
26+
const basic = [
27+
{ key: 'title', label: t('agentName'), placeholder: t('agentNamePlaceholder') },
28+
{
29+
key: 'description',
30+
label: t('agentDescription'),
31+
placeholder: t('agentDescriptionPlaceholder'),
32+
},
33+
// { key: 'tag', label: t('agentTag'), placeholder: t('agentTagPlaceholder') },
34+
];
35+
36+
return (
37+
<>
38+
<Flexbox
39+
align={'center'}
40+
distribution={'space-between'}
41+
horizontal
42+
paddingBlock={12}
43+
style={{
44+
borderBottom: `1px solid ${theme.colorBorder}`,
45+
}}
46+
>
47+
<Flexbox className={styles.profile}> {t('profile')}</Flexbox>
48+
<Button size={'large'}>{t('autoGenerate')}</Button>
49+
</Flexbox>
50+
<Flexbox gap={80} horizontal style={{ marginTop: 16 }}>
51+
<Flexbox flex={1} gap={24}>
52+
{basic.map((item) => (
53+
<FormItem key={item.key} label={item.label}>
54+
<Input
55+
placeholder={item.placeholder}
56+
suffix={
57+
<ActionIcon
58+
icon={LucideSparkles}
59+
loading={loading[item.key as keyof typeof loading]}
60+
onClick={() => {
61+
autocompleteMeta(item.key as keyof typeof metaData);
62+
}}
63+
size={'small'}
64+
style={{
65+
color: theme.purple,
66+
}}
67+
title={t('autoGenerate')}
68+
/>
69+
}
70+
type={'block'}
71+
value={metaData[item.key as keyof typeof metaData]}
72+
/>
73+
</FormItem>
74+
))}
75+
</Flexbox>
76+
<FormItem label={t('agentAvatar')}>
77+
<Avatar avatar={metaData.avatar} size={200} />
78+
</FormItem>
79+
</Flexbox>
80+
</>
81+
);
82+
};
83+
84+
export default AgentMeta;

‎src/pages/chat/[id]/edit/Form.tsx renamed to ‎src/pages/chat/[id]/edit/FormItem.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ interface FormItemProps {
1313
children: ReactNode;
1414
label: string;
1515
}
16-
const FormItem = memo<FormItemProps>(({ label, children }) => {
16+
17+
export const FormItem = memo<FormItemProps>(({ label, children }) => {
1718
const { styles } = useStyles();
1819

1920
return (
@@ -23,5 +24,3 @@ const FormItem = memo<FormItemProps>(({ label, children }) => {
2324
</Flexbox>
2425
);
2526
});
26-
27-
export default FormItem;

‎src/pages/chat/[id]/edit/index.page.tsx

Lines changed: 13 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { Avatar, ChatHeader, Input, TextArea } from '@lobehub/ui';
2-
import { Button, Slider } from 'antd';
1+
import { ChatHeader } from '@lobehub/ui';
2+
import { Button } from 'antd';
33
import { createStyles } from 'antd-style';
44
import { useTranslation } from 'next-i18next';
55
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
@@ -8,7 +8,8 @@ import { memo } from 'react';
88
import { Flexbox } from 'react-layout-kit';
99

1010
import ChatLayout from '../../layout';
11-
import FormItem from './Form';
11+
import AgentConfig from './AgentConfig';
12+
import AgentMeta from './AgentMeta';
1213

1314
const useStyles = createStyles(({ css, token }) => ({
1415
footer: css`
@@ -23,10 +24,6 @@ const useStyles = createStyles(({ css, token }) => ({
2324
background: ${token.colorBgContainer};
2425
border-bottom: 1px solid ${token.colorSplit};
2526
`,
26-
profile: css`
27-
font-size: 20px;
28-
color: ${token.colorTextTertiary};
29-
`,
3027
title: css`
3128
font-size: 16px;
3229
font-weight: 500;
@@ -36,73 +33,27 @@ const useStyles = createStyles(({ css, token }) => ({
3633
const EditPage = memo(() => {
3734
const { t } = useTranslation('common');
3835

39-
const { styles, theme } = useStyles();
36+
const { styles } = useStyles();
4037

41-
const basic = [
42-
{ label: t('agentName'), placeholder: t('agentNamePlaceholder') },
43-
{ label: t('agentDescription'), placeholder: t('agentDescriptionPlaceholder') },
44-
{ label: t('agentTag'), placeholder: t('agentTagPlaceholder') },
45-
];
4638
return (
4739
<ChatLayout>
4840
<Flexbox height={'100vh'} style={{ position: 'relative' }} width={'100%'}>
4941
{/*header*/}
5042
<ChatHeader
5143
left={<div className={styles.title}>{t('editAgentProfile')}</div>}
5244
onBackClick={() => Router.back()}
45+
right={
46+
<>
47+
<Button>{t('share')}</Button>
48+
<Button type={'primary'}>{t('export')}</Button>
49+
</>
50+
}
5351
showBackButton
5452
/>
5553
{/*form*/}
5654
<Flexbox className={styles.form} flex={1} gap={10} padding={24}>
57-
<FormItem label={t('agentPrompt')}>
58-
<TextArea
59-
placeholder={t('agentPromptPlaceholder')}
60-
// style={{ minHeight: 64 }}
61-
type={'block'}
62-
/>
63-
</FormItem>
64-
65-
<Flexbox
66-
align={'center'}
67-
distribution={'space-between'}
68-
horizontal
69-
paddingBlock={12}
70-
style={{
71-
borderBottom: `1px solid ${theme.colorBorder}`,
72-
}}
73-
>
74-
<Flexbox className={styles.profile}> {t('profile')}</Flexbox>
75-
<Button size={'large'}>{t('autoGenerate')}</Button>
76-
</Flexbox>
77-
<Flexbox gap={80} horizontal style={{ marginTop: 16 }}>
78-
<Flexbox flex={1} gap={24}>
79-
{basic.map((item) => (
80-
<FormItem key={item.label} label={item.label}>
81-
<Input placeholder={item.placeholder} type={'block'} />
82-
</FormItem>
83-
))}
84-
85-
<Flexbox className={styles.profile}> {t('advanceSettings')}</Flexbox>
86-
87-
<FormItem label={t('modelTemperature')}>
88-
<Slider />
89-
</FormItem>
90-
</Flexbox>
91-
<FormItem label={t('agentAvatar')}>
92-
<Avatar size={200} />
93-
</FormItem>
94-
</Flexbox>
95-
</Flexbox>
96-
97-
{/*bottom*/}
98-
<Flexbox
99-
className={styles.footer}
100-
direction={'horizontal-reverse'}
101-
gap={8}
102-
padding={'16px 24px'}
103-
>
104-
<Button type={'primary'}>{t('updateAgent')}</Button>
105-
<Button>{t('reset')}</Button>
55+
<AgentMeta />
56+
<AgentConfig />
10657
</Flexbox>
10758
</Flexbox>
10859
</ChatLayout>

0 commit comments

Comments
 (0)