diff --git a/web/src/components/knowledge-base-item.tsx b/web/src/components/knowledge-base-item.tsx index 4ab096ec9..ee3b2c2ba 100644 --- a/web/src/components/knowledge-base-item.tsx +++ b/web/src/components/knowledge-base-item.tsx @@ -2,7 +2,12 @@ import { DocumentParserType } from '@/constants/knowledge'; import { useTranslate } from '@/hooks/common-hooks'; import { useFetchKnowledgeList } from '@/hooks/knowledge-hooks'; import { UserOutlined } from '@ant-design/icons'; -import { Avatar, Form, Select, Space } from 'antd'; +import { Avatar as AntAvatar, Form, Select, Space } from 'antd'; +import { Book } from 'lucide-react'; +import { useFormContext } from 'react-hook-form'; +import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar'; +import { FormControl, FormField, FormItem, FormLabel } from './ui/form'; +import { MultiSelect } from './ui/multi-select'; const KnowledgeBaseItem = () => { const { t } = useTranslate('chat'); @@ -16,7 +21,7 @@ const KnowledgeBaseItem = () => { const knowledgeOptions = filteredKnowledgeList.map((x) => ({ label: ( - } src={x.avatar} /> + } src={x.avatar} /> {x.name} ), @@ -46,3 +51,49 @@ const KnowledgeBaseItem = () => { }; export default KnowledgeBaseItem; + +export function KnowledgeBaseFormField() { + const form = useFormContext(); + const { t } = useTranslate('chat'); + + const { list: knowledgeList } = useFetchKnowledgeList(true); + + const filteredKnowledgeList = knowledgeList.filter( + (x) => x.parser_id !== DocumentParserType.Tag, + ); + + const knowledgeOptions = filteredKnowledgeList.map((x) => ({ + label: x.name, + value: x.id, + icon: () => ( + + + + + + + ), + })); + + return ( + ( + + {t('knowledgeBases')} + + + + + )} + /> + ); +} diff --git a/web/src/pages/next-chats/chat/app-settings.tsx b/web/src/pages/next-chats/chat/app-settings.tsx deleted file mode 100644 index b41a9bd3d..000000000 --- a/web/src/pages/next-chats/chat/app-settings.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export function AppSettings() { - return
app-settings
; -} diff --git a/web/src/pages/next-chats/chat/app-settings/chat-basic-settings.tsx b/web/src/pages/next-chats/chat/app-settings/chat-basic-settings.tsx new file mode 100644 index 000000000..5b19b4709 --- /dev/null +++ b/web/src/pages/next-chats/chat/app-settings/chat-basic-settings.tsx @@ -0,0 +1,163 @@ +'use client'; + +import { zodResolver } from '@hookform/resolvers/zod'; +import { useForm } from 'react-hook-form'; +import { z } from 'zod'; + +import { FileUploader } from '@/components/file-uploader'; +import { KnowledgeBaseFormField } from '@/components/knowledge-base-item'; +import { + Form, + FormControl, + FormField, + FormItem, + FormLabel, + FormMessage, +} from '@/components/ui/form'; +import { Input } from '@/components/ui/input'; +import { useTranslate } from '@/hooks/common-hooks'; +import { Subhead } from './subhead'; +import { SwitchFormField } from './switch-fom-field'; + +export default function ChatBasicSetting() { + const { t } = useTranslate('chat'); + + const promptConfigSchema = z.object({ + quote: z.boolean(), + keyword: z.boolean(), + tts: z.boolean(), + empty_response: z.string().min(1, { + message: t('emptyResponse'), + }), + prologue: z.string().min(2, {}), + }); + + const formSchema = z.object({ + name: z.string().min(1, { message: t('assistantNameMessage') }), + icon: z.array(z.instanceof(File)), + language: z.string().min(1, { + message: 'Username must be at least 2 characters.', + }), + description: z.string(), + kb_ids: z.array(z.string()).min(0, { + message: 'Username must be at least 1 characters.', + }), + prompt_config: promptConfigSchema, + }); + + const form = useForm>({ + resolver: zodResolver(formSchema), + defaultValues: { + name: '', + language: 'English', + prompt_config: { + quote: true, + keyword: false, + tts: false, + }, + }, + }); + + function onSubmit(values: z.infer) { + console.log(values); + } + + return ( +
+ Basic settings +
+ + ( +
+ + {t('assistantAvatar')} + + + + + +
+ )} + /> + ( + + {t('assistantName')} + + + + + + )} + /> + ( + + {t('description')} + + + + + + )} + /> + ( + + {t('emptyResponse')} + + + + + + )} + /> + ( + + {t('setAnOpener')} + + + + + + )} + /> + + + + + + +
+ ); +} diff --git a/web/src/pages/next-chats/chat/app-settings/chat-model-settings.tsx b/web/src/pages/next-chats/chat/app-settings/chat-model-settings.tsx new file mode 100644 index 000000000..6b7d69c07 --- /dev/null +++ b/web/src/pages/next-chats/chat/app-settings/chat-model-settings.tsx @@ -0,0 +1,9 @@ +import { Subhead } from './subhead'; + +export function ChatModelSettings() { + return ( +
+ Model Setting +
+ ); +} diff --git a/web/src/pages/next-chats/chat/app-settings/chat-prompt-engine.tsx b/web/src/pages/next-chats/chat/app-settings/chat-prompt-engine.tsx new file mode 100644 index 000000000..75491825a --- /dev/null +++ b/web/src/pages/next-chats/chat/app-settings/chat-prompt-engine.tsx @@ -0,0 +1,9 @@ +import { Subhead } from './subhead'; + +export function ChatPromptEngine() { + return ( +
+ Prompt Engine +
+ ); +} diff --git a/web/src/pages/next-chats/chat/app-settings/index.tsx b/web/src/pages/next-chats/chat/app-settings/index.tsx new file mode 100644 index 000000000..11d0936e6 --- /dev/null +++ b/web/src/pages/next-chats/chat/app-settings/index.tsx @@ -0,0 +1,16 @@ +import ChatBasicSetting from './chat-basic-settings'; +import { ChatModelSettings } from './chat-model-settings'; +import { ChatPromptEngine } from './chat-prompt-engine'; + +export function AppSettings() { + return ( +
+
+ App settings +
+ + + +
+ ); +} diff --git a/web/src/pages/next-chats/chat/app-settings/subhead.tsx b/web/src/pages/next-chats/chat/app-settings/subhead.tsx new file mode 100644 index 000000000..23cd42453 --- /dev/null +++ b/web/src/pages/next-chats/chat/app-settings/subhead.tsx @@ -0,0 +1,9 @@ +import { PropsWithChildren } from 'react'; + +export function Subhead({ children }: PropsWithChildren) { + return ( +
+ {children} +
+ ); +} diff --git a/web/src/pages/next-chats/chat/app-settings/switch-fom-field.tsx b/web/src/pages/next-chats/chat/app-settings/switch-fom-field.tsx new file mode 100644 index 000000000..d89b51562 --- /dev/null +++ b/web/src/pages/next-chats/chat/app-settings/switch-fom-field.tsx @@ -0,0 +1,38 @@ +import { + FormControl, + FormField, + FormItem, + FormLabel, +} from '@/components/ui/form'; +import { Switch } from '@/components/ui/switch'; +import { ReactNode } from 'react'; +import { useFormContext } from 'react-hook-form'; + +interface SwitchFormItemProps { + name: string; + label: ReactNode; +} + +export function SwitchFormField({ label, name }: SwitchFormItemProps) { + const form = useFormContext(); + + return ( + ( + + {label} + + + + + )} + /> + ); +}