Skip to content

Commit

Permalink
✨ feat: 增加不同模型
Browse files Browse the repository at this point in the history
  • Loading branch information
arvinxx committed Jul 16, 2023
1 parent a82f35d commit d95027d
Show file tree
Hide file tree
Showing 12 changed files with 294 additions and 89 deletions.
11 changes: 9 additions & 2 deletions public/locales/zh_CN/common.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
"agentAvatar": "头像",
"agentDescription": "描述",
"agentDescriptionPlaceholder": "请输入描述",
"agentModel": "模型",
"agentName": "名称",
"agentNamePlaceholder": "请输入名称",
"agentProfile": "助手信息",
Expand All @@ -18,7 +19,12 @@
"defaultAgent": "默认助手",
"edit": "编辑",
"editAgentProfile": "编辑助手信息",

"export": "导出",
"gpt-3.5-turbo": "GPT 3.5",
"gpt-3.5-turbo-16k": "GPT 3.5 (16K)",
"gpt-4": "GPT 4",
"gpt-4-32k": "GPT 4 (32K)",
"modelConfig": "模型配置",
"modelTemperature": "发散度",
"newAgent": "新建助手",
"noDescription": "暂无描述",
Expand All @@ -29,5 +35,6 @@
"sessionSetting": "会话设置",
"setting": "设置",
"share": "分享",
"updateAgent": "更新助理信息"
"updateAgent": "更新助理信息",
"updatePrompt": "更新提示词"
}
1 change: 0 additions & 1 deletion src/pages/api/OpenAIStream.ts
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,6 @@ export function OpenAIStream(payload: OpenAIStreamPayload) {
{
streaming: true,
...params,

callbacks: [
{
handleLLMNewToken(token) {
Expand Down
2 changes: 1 addition & 1 deletion src/pages/chat/SessionList/List/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const SessionList = memo(() => {
const { styles, cx } = useStyles();
const list = useSessionStore((s) => sessionSelectors.chatList(s), isEqual);
const [activeId, loading] = useSessionStore(
(s) => [s.activeId, s.loading.summarizingTitle],
(s) => [s.activeId, s.autocompleteLoading.title],
shallow,
);

Expand Down
106 changes: 106 additions & 0 deletions src/pages/chat/[id]/edit/AgentConfig.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
import { TextArea } from '@lobehub/ui';
import { Button, Collapse, InputNumber, Segmented, Slider } from 'antd';
import isEqual from 'fast-deep-equal';
import { useTranslation } from 'next-i18next';
import { Flexbox } from 'react-layout-kit';
import { shallow } from 'zustand/shallow';

import { agentSelectors, useSessionStore } from '@/store/session';
import { LanguageModel } from '@/types/llm';

import { FormItem } from './FormItem';
import { useStyles } from './style';

const AgentConfig = () => {
const { t } = useTranslation('common');

const { styles, theme } = useStyles();

const config = useSessionStore(agentSelectors.currentAgentConfigSafe, isEqual);

const [updateAgentConfig] = useSessionStore((s) => [s.updateAgentConfig], shallow);

return (
<>
<Flexbox
align={'center'}
distribution={'space-between'}
horizontal
paddingBlock={12}
style={{
borderBottom: `1px solid ${theme.colorBorder}`,
}}
>
<Flexbox className={styles.profile}> {t('modelConfig')}</Flexbox>
</Flexbox>
<Flexbox gap={24}>
<FormItem label={t('agentModel')}>
<Segmented
block
onChange={(value) => {
updateAgentConfig({ model: value as LanguageModel });
}}
options={Object.values(LanguageModel).map((value) => ({
label: t(value),
value,
}))}
size={'large'}
/>
</FormItem>
<FormItem label={t('agentPrompt')}>
<Flexbox gap={16}>
<TextArea
placeholder={t('agentPromptPlaceholder')}
style={{ minHeight: 160 }}
type={'block'}
value={config.systemRole}
/>
<Flexbox direction={'horizontal-reverse'}>
<Button type={'primary'}>{t('updatePrompt')}</Button>
</Flexbox>
</Flexbox>
</FormItem>
<Collapse
activeKey={['advanceSettings']}
bordered={false}
className={styles.title}
expandIconPosition={'end'}
items={[
{
children: (
<Flexbox paddingBlock={16}>
<FormItem label={t('modelTemperature')}>
<Flexbox gap={16} horizontal>
<Slider
max={1}
min={0}
onChange={(value) => {
updateAgentConfig({ params: { temperature: value } });
}}
step={0.1}
style={{ flex: 1 }}
value={Number(config.params.temperature)}
/>
<InputNumber
max={1}
min={0}
onChange={(value) => {
if (value) updateAgentConfig({ params: { temperature: value } });
}}
value={config.params.temperature}
/>
</Flexbox>
</FormItem>
</Flexbox>
),
key: 'advanceSettings',
label: t('advanceSettings'),
},
]}
/>
</Flexbox>
</>
);
};

export default AgentConfig;
84 changes: 84 additions & 0 deletions src/pages/chat/[id]/edit/AgentMeta.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
import { ActionIcon, Avatar, Input } from '@lobehub/ui';
import { Button } from 'antd';
import isEqual from 'fast-deep-equal';
import { LucideSparkles } from 'lucide-react';
import { useTranslation } from 'next-i18next';
import { Flexbox } from 'react-layout-kit';
import { shallow } from 'zustand/shallow';

import { agentSelectors, useSessionStore } from '@/store/session';

import { FormItem } from './FormItem';
import { useStyles } from './style';

const AgentMeta = () => {
const { t } = useTranslation('common');

const { styles, theme } = useStyles();

const metaData = useSessionStore(agentSelectors.currentAgentMeta, isEqual);

const [autocompleteMeta, loading] = useSessionStore(
(s) => [s.autocompleteMeta, s.autocompleteLoading],
shallow,
);

const basic = [
{ key: 'title', label: t('agentName'), placeholder: t('agentNamePlaceholder') },
{
key: 'description',
label: t('agentDescription'),
placeholder: t('agentDescriptionPlaceholder'),
},
// { key: 'tag', label: t('agentTag'), placeholder: t('agentTagPlaceholder') },
];

return (
<>
<Flexbox
align={'center'}
distribution={'space-between'}
horizontal
paddingBlock={12}
style={{
borderBottom: `1px solid ${theme.colorBorder}`,
}}
>
<Flexbox className={styles.profile}> {t('profile')}</Flexbox>
<Button size={'large'}>{t('autoGenerate')}</Button>
</Flexbox>
<Flexbox gap={80} horizontal style={{ marginTop: 16 }}>
<Flexbox flex={1} gap={24}>
{basic.map((item) => (
<FormItem key={item.key} label={item.label}>
<Input
placeholder={item.placeholder}
suffix={
<ActionIcon
icon={LucideSparkles}
loading={loading[item.key as keyof typeof loading]}
onClick={() => {
autocompleteMeta(item.key as keyof typeof metaData);
}}
size={'small'}
style={{
color: theme.purple,
}}
title={t('autoGenerate')}
/>
}
type={'block'}
value={metaData[item.key as keyof typeof metaData]}
/>
</FormItem>
))}
</Flexbox>
<FormItem label={t('agentAvatar')}>
<Avatar avatar={metaData.avatar} size={200} />
</FormItem>
</Flexbox>
</>
);
};

export default AgentMeta;
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ interface FormItemProps {
children: ReactNode;
label: string;
}
const FormItem = memo<FormItemProps>(({ label, children }) => {

export const FormItem = memo<FormItemProps>(({ label, children }) => {
const { styles } = useStyles();

return (
Expand All @@ -23,5 +24,3 @@ const FormItem = memo<FormItemProps>(({ label, children }) => {
</Flexbox>
);
});

export default FormItem;
75 changes: 13 additions & 62 deletions src/pages/chat/[id]/edit/index.page.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Avatar, ChatHeader, Input, TextArea } from '@lobehub/ui';
import { Button, Slider } from 'antd';
import { ChatHeader } from '@lobehub/ui';
import { Button } from 'antd';
import { createStyles } from 'antd-style';
import { useTranslation } from 'next-i18next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
Expand All @@ -8,7 +8,8 @@ import { memo } from 'react';
import { Flexbox } from 'react-layout-kit';

import ChatLayout from '../../layout';
import FormItem from './Form';
import AgentConfig from './AgentConfig';
import AgentMeta from './AgentMeta';

const useStyles = createStyles(({ css, token }) => ({
footer: css`
Expand All @@ -23,10 +24,6 @@ const useStyles = createStyles(({ css, token }) => ({
background: ${token.colorBgContainer};
border-bottom: 1px solid ${token.colorSplit};
`,
profile: css`
font-size: 20px;
color: ${token.colorTextTertiary};
`,
title: css`
font-size: 16px;
font-weight: 500;
Expand All @@ -36,73 +33,27 @@ const useStyles = createStyles(({ css, token }) => ({
const EditPage = memo(() => {
const { t } = useTranslation('common');

const { styles, theme } = useStyles();
const { styles } = useStyles();

const basic = [
{ label: t('agentName'), placeholder: t('agentNamePlaceholder') },
{ label: t('agentDescription'), placeholder: t('agentDescriptionPlaceholder') },
{ label: t('agentTag'), placeholder: t('agentTagPlaceholder') },
];
return (
<ChatLayout>
<Flexbox height={'100vh'} style={{ position: 'relative' }} width={'100%'}>
{/*header*/}
<ChatHeader
left={<div className={styles.title}>{t('editAgentProfile')}</div>}
onBackClick={() => Router.back()}
right={
<>
<Button>{t('share')}</Button>
<Button type={'primary'}>{t('export')}</Button>
</>
}
showBackButton
/>
{/*form*/}
<Flexbox className={styles.form} flex={1} gap={10} padding={24}>
<FormItem label={t('agentPrompt')}>
<TextArea
placeholder={t('agentPromptPlaceholder')}
// style={{ minHeight: 64 }}
type={'block'}
/>
</FormItem>

<Flexbox
align={'center'}
distribution={'space-between'}
horizontal
paddingBlock={12}
style={{
borderBottom: `1px solid ${theme.colorBorder}`,
}}
>
<Flexbox className={styles.profile}> {t('profile')}</Flexbox>
<Button size={'large'}>{t('autoGenerate')}</Button>
</Flexbox>
<Flexbox gap={80} horizontal style={{ marginTop: 16 }}>
<Flexbox flex={1} gap={24}>
{basic.map((item) => (
<FormItem key={item.label} label={item.label}>
<Input placeholder={item.placeholder} type={'block'} />
</FormItem>
))}

<Flexbox className={styles.profile}> {t('advanceSettings')}</Flexbox>

<FormItem label={t('modelTemperature')}>
<Slider />
</FormItem>
</Flexbox>
<FormItem label={t('agentAvatar')}>
<Avatar size={200} />
</FormItem>
</Flexbox>
</Flexbox>

{/*bottom*/}
<Flexbox
className={styles.footer}
direction={'horizontal-reverse'}
gap={8}
padding={'16px 24px'}
>
<Button type={'primary'}>{t('updateAgent')}</Button>
<Button>{t('reset')}</Button>
<AgentMeta />
<AgentConfig />
</Flexbox>
</Flexbox>
</ChatLayout>
Expand Down
Loading

1 comment on commit d95027d

@vercel
Copy link

@vercel vercel bot commented on d95027d Jul 16, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.