Feat: Added meta data to the chat configuration page #8531 (#9417)

### What problem does this PR solve?

Feat: Added meta data to the chat configuration page #8531

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/next-chats/chat/app-settings/chat-basic-settings.tsx

@@ -11,108 +11,101 @@ import {
   FormMessage,
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
 import { useTranslate } from '@/hooks/common-hooks';
 import { useFormContext } from 'react-hook-form';
-import { Subhead } from './subhead';
 
 export default function ChatBasicSetting() {
   const { t } = useTranslate('chat');
   const form = useFormContext();
 
   return (
-    <section>
-      <Subhead>Basic settings</Subhead>
-      <div className="space-y-8">
-        <FormField
-          control={form.control}
-          name={'icon'}
-          render={({ field }) => (
-            <div className="space-y-6">
-              <FormItem className="w-full">
-                <FormLabel>{t('assistantAvatar')}</FormLabel>
-                <FormControl>
-                  <FileUploader
-                    value={field.value}
-                    onValueChange={field.onChange}
-                    maxFileCount={1}
-                    maxSize={4 * 1024 * 1024}
-                    // progresses={progresses}
-                    // pass the onUpload function here for direct upload
-                    // onUpload={uploadFiles}
-                    // disabled={isUploading}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            </div>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="name"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>{t('assistantName')}</FormLabel>
+    <div className="space-y-8">
+      <FormField
+        control={form.control}
+        name={'icon'}
+        render={({ field }) => (
+          <div className="space-y-6">
+            <FormItem className="w-full">
+              <FormLabel>{t('assistantAvatar')}</FormLabel>
               <FormControl>
-                <Input {...field}></Input>
+                <FileUploader
+                  value={field.value}
+                  onValueChange={field.onChange}
+                  maxFileCount={1}
+                  maxSize={4 * 1024 * 1024}
+                />
               </FormControl>
               <FormMessage />
             </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="description"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>{t('description')}</FormLabel>
-              <FormControl>
-                <Input {...field}></Input>
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name={'prompt_config.empty_response'}
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>{t('emptyResponse')}</FormLabel>
-              <FormControl>
-                <Input {...field}></Input>
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name={'prompt_config.prologue'}
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>{t('setAnOpener')}</FormLabel>
-              <FormControl>
-                <Input {...field}></Input>
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <SwitchFormField
-          name={'prompt_config.quote'}
-          label={t('quote')}
-        ></SwitchFormField>
-        <SwitchFormField
-          name={'prompt_config.keyword'}
-          label={t('keyword')}
-        ></SwitchFormField>
-        <SwitchFormField
-          name={'prompt_config.tts'}
-          label={t('tts')}
-        ></SwitchFormField>
-        <KnowledgeBaseFormField></KnowledgeBaseFormField>
-      </div>
-    </section>
+          </div>
+        )}
+      />
+      <FormField
+        control={form.control}
+        name="name"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t('assistantName')}</FormLabel>
+            <FormControl>
+              <Input {...field}></Input>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      <FormField
+        control={form.control}
+        name="description"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t('description')}</FormLabel>
+            <FormControl>
+              <Textarea {...field}></Textarea>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      <FormField
+        control={form.control}
+        name={'prompt_config.empty_response'}
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t('emptyResponse')}</FormLabel>
+            <FormControl>
+              <Textarea {...field}></Textarea>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      <FormField
+        control={form.control}
+        name={'prompt_config.prologue'}
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t('setAnOpener')}</FormLabel>
+            <FormControl>
+              <Textarea {...field}></Textarea>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      <SwitchFormField
+        name={'prompt_config.quote'}
+        label={t('quote')}
+      ></SwitchFormField>
+      <SwitchFormField
+        name={'prompt_config.keyword'}
+        label={t('keyword')}
+      ></SwitchFormField>
+      <SwitchFormField
+        name={'prompt_config.tts'}
+        label={t('tts')}
+      ></SwitchFormField>
+      <KnowledgeBaseFormField></KnowledgeBaseFormField>
+    </div>
   );
 }

web/src/pages/next-chats/chat/app-settings/chat-model-settings.tsx

@@ -9,35 +9,31 @@ import {
 import { Textarea } from '@/components/ui/textarea';
 import { useTranslate } from '@/hooks/common-hooks';
 import { useFormContext } from 'react-hook-form';
-import { Subhead } from './subhead';
 
 export function ChatModelSettings() {
   const { t } = useTranslate('chat');
   const form = useFormContext();
 
   return (
-    <section>
-      <Subhead>Model Setting</Subhead>
-      <div className="space-y-8">
-        <FormField
-          control={form.control}
-          name="prompt_config.system"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>{t('system')}</FormLabel>
-              <FormControl>
-                <Textarea
-                  placeholder="Tell us a little bit about yourself"
-                  className="resize-none"
-                  {...field}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <LlmSettingFieldItems></LlmSettingFieldItems>
-      </div>
-    </section>
+    <div className="space-y-8">
+      <FormField
+        control={form.control}
+        name="prompt_config.system"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t('system')}</FormLabel>
+            <FormControl>
+              <Textarea
+                placeholder="Tell us a little bit about yourself"
+                className="resize-none"
+                {...field}
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      <LlmSettingFieldItems prefix="llm_setting"></LlmSettingFieldItems>
+    </div>
   );
 }

web/src/pages/next-chats/chat/app-settings/chat-prompt-engine.tsx

@@ -15,42 +15,38 @@ import { Textarea } from '@/components/ui/textarea';
 import { UseKnowledgeGraphFormField } from '@/components/use-knowledge-graph-item';
 import { useTranslate } from '@/hooks/common-hooks';
 import { useFormContext } from 'react-hook-form';
-import { Subhead } from './subhead';
 
 export function ChatPromptEngine() {
   const { t } = useTranslate('chat');
   const form = useFormContext();
 
   return (
-    <section>
-      <Subhead>Prompt engine</Subhead>
-      <div className="space-y-8">
-        <FormField
-          control={form.control}
-          name="prompt_config.system"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>{t('system')}</FormLabel>
-              <FormControl>
-                <Textarea
-                  placeholder="Tell us a little bit about yourself"
-                  className="resize-none"
-                  {...field}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <SimilaritySliderFormField></SimilaritySliderFormField>
-        <TopNFormField></TopNFormField>
-        <SwitchFormField
-          name={'prompt_config.refine_multiturn'}
-          label={t('multiTurn')}
-        ></SwitchFormField>
-        <UseKnowledgeGraphFormField name="prompt_config.use_kg"></UseKnowledgeGraphFormField>
-        <RerankFormFields></RerankFormFields>
-      </div>
-    </section>
+    <div className="space-y-8">
+      <FormField
+        control={form.control}
+        name="prompt_config.system"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t('system')}</FormLabel>
+            <FormControl>
+              <Textarea
+                placeholder="Tell us a little bit about yourself"
+                className="resize-none"
+                {...field}
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      <SimilaritySliderFormField></SimilaritySliderFormField>
+      <TopNFormField></TopNFormField>
+      <SwitchFormField
+        name={'prompt_config.refine_multiturn'}
+        label={t('multiTurn')}
+      ></SwitchFormField>
+      <UseKnowledgeGraphFormField name="prompt_config.use_kg"></UseKnowledgeGraphFormField>
+      <RerankFormFields></RerankFormFields>
+    </div>
   );
 }

web/src/pages/next-chats/chat/app-settings/chat-settings-sheet.tsx

@@ -1,23 +0,0 @@
-import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from '@/components/ui/sheet';
-import { PropsWithChildren } from 'react';
-import { ChatSettings } from './chat-settings';
-
-export function ChatSettingSheet({ children }: PropsWithChildren) {
-  return (
-    <Sheet>
-      <SheetTrigger asChild>{children}</SheetTrigger>
-      <SheetContent>
-        <SheetHeader>
-          <SheetTitle>Chat Settings</SheetTitle>
-        </SheetHeader>
-        <ChatSettings></ChatSettings>
-      </SheetContent>
-    </Sheet>
-  );
-}

web/src/pages/next-chats/chat/app-settings/chat-settings.tsx

@@ -1,6 +1,10 @@
 import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
+import { useFetchDialog } from '@/hooks/use-chat-request';
+import { transformBase64ToFile } from '@/utils/file-util';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { PanelRightClose } from 'lucide-react';
+import { useEffect } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { z } from 'zod';
 import ChatBasicSetting from './chat-basic-settings';
@@ -11,6 +15,7 @@ import { useChatSettingSchema } from './use-chat-setting-schema';
 type ChatSettingsProps = { switchSettingVisible(): void };
 export function ChatSettings({ switchSettingVisible }: ChatSettingsProps) {
   const formSchema = useChatSettingSchema();
+  const { data } = useFetchDialog();
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -34,6 +39,14 @@ export function ChatSettings({ switchSettingVisible }: ChatSettingsProps) {
     console.log(values);
   }
 
+  useEffect(() => {
+    const nextData = {
+      ...data,
+      icon: data.icon ? [transformBase64ToFile(data.icon)] : [],
+    };
+    form.reset(nextData as z.infer<typeof formSchema>);
+  }, [data, form]);
+
   return (
     <section className="p-5  w-[400px] max-w-[20%]">
       <div className="flex justify-between items-center text-base">
@@ -49,7 +62,9 @@ export function ChatSettings({ switchSettingVisible }: ChatSettingsProps) {
           className="space-y-6 overflow-auto max-h-[87vh] pr-4"
         >
           <ChatBasicSetting></ChatBasicSetting>
+          <Separator />
           <ChatPromptEngine></ChatPromptEngine>
+          <Separator />
           <ChatModelSettings></ChatModelSettings>
         </form>
       </FormProvider>

web/src/pages/next-chats/chat/app-settings/subhead.tsx

@@ -1,9 +0,0 @@
-import { PropsWithChildren } from 'react';
-
-export function Subhead({ children }: PropsWithChildren) {
-  return (
-    <div className="text-xl font-bold mb-4 text-colors-text-neutral-strong">
-      {children}
-    </div>
-  );
-}

web/src/pages/next-chats/chat/app-settings/use-chat-setting-schema.tsx

@@ -1,3 +1,4 @@
+import { LlmSettingSchema } from '@/components/llm-setting-items/next';
 import { useTranslate } from '@/hooks/common-hooks';
 import { z } from 'zod';
 
@@ -31,6 +32,7 @@ export function useChatSettingSchema() {
     top_n: z.number(),
     vector_similarity_weight: z.number(),
     top_k: z.number(),
+    llm_setting: z.object(LlmSettingSchema),
   });
 
   return formSchema;