Feat: Add hatPromptEngine component #3221 (#4881)

### What problem does this PR solve?

Feat: Add hatPromptEngine component #3221

### Type of change


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

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

@@ -1,13 +1,9 @@
 '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 { SwitchFormField } from '@/components/switch-fom-field';
 import {
-  Form,
   FormControl,
   FormField,
   FormItem,
@@ -16,148 +12,107 @@ import {
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
 import { useTranslate } from '@/hooks/common-hooks';
+import { useFormContext } from 'react-hook-form';
 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<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      name: '',
-      language: 'English',
-      prompt_config: {
-        quote: true,
-        keyword: false,
-        tts: false,
-      },
-    },
-  });
-
-  function onSubmit(values: z.infer<typeof formSchema>) {
-    console.log(values);
-  }
+  const form = useFormContext();
 
   return (
     <section>
       <Subhead>Basic settings</Subhead>
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} 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}
+                    // progresses={progresses}
+                    // pass the onUpload function here for direct upload
+                    // onUpload={uploadFiles}
+                    // disabled={isUploading}
+                  />
                 </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>
-        </form>
-      </Form>
+            </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>
+                <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>
   );
 }

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

@@ -1,9 +1,56 @@
+'use client';
+
+import { RerankFormFields } from '@/components/rerank';
+import { SimilaritySliderFormField } from '@/components/similarity-slider';
+import { SwitchFormField } from '@/components/switch-fom-field';
+import { TopNFormField } from '@/components/top-n-item';
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+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>
   );
 }

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

@@ -1,16 +1,49 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { FormProvider, useForm } from 'react-hook-form';
+import { z } from 'zod';
 import ChatBasicSetting from './chat-basic-settings';
 import { ChatModelSettings } from './chat-model-settings';
 import { ChatPromptEngine } from './chat-prompt-engine';
+import { useChatSettingSchema } from './use-chat-setting-schema';
 
 export function AppSettings() {
+  const formSchema = useChatSettingSchema();
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: '',
+      language: 'English',
+      prompt_config: {
+        quote: true,
+        keyword: false,
+        tts: false,
+        use_kg: false,
+        refine_multiturn: true,
+      },
+      top_n: 8,
+      vector_similarity_weight: 0.2,
+      top_k: 1024,
+    },
+  });
+
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    console.log(values);
+  }
+
   return (
-    <section className="p-6 w-[500px] max-w-[25%]">
-      <div className="text-2xl font-bold mb-4 text-colors-text-neutral-strong">
+    <section className="py-6 w-[500px] max-w-[25%] ">
+      <div className="text-2xl font-bold mb-4 text-colors-text-neutral-strong px-6">
         App settings
       </div>
-      <ChatBasicSetting></ChatBasicSetting>
-      <ChatPromptEngine></ChatPromptEngine>
-      <ChatModelSettings></ChatModelSettings>
+      <div className="overflow-auto max-h-[88vh] px-6 space-y-6">
+        <FormProvider {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <ChatBasicSetting></ChatBasicSetting>
+            <ChatPromptEngine></ChatPromptEngine>
+            <ChatModelSettings></ChatModelSettings>
+          </form>
+        </FormProvider>
+      </div>
     </section>
   );
 }

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

@@ -1,38 +0,0 @@
-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 (
-    <FormField
-      control={form.control}
-      name={name}
-      render={({ field }) => (
-        <FormItem className="flex justify-between">
-          <FormLabel className="text-base">{label}</FormLabel>
-          <FormControl>
-            <Switch
-              checked={field.value}
-              onCheckedChange={field.onChange}
-              aria-readonly
-              className="!m-0"
-            />
-          </FormControl>
-        </FormItem>
-      )}
-    />
-  );
-}

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

@@ -0,0 +1,37 @@
+import { useTranslate } from '@/hooks/common-hooks';
+import { z } from 'zod';
+
+export function useChatSettingSchema() {
+  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(1, {}),
+    system: z.string().min(1, { message: t('systemMessage') }),
+    refine_multiturn: z.boolean(),
+    use_kg: z.boolean(),
+  });
+
+  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,
+    top_n: z.number(),
+    vector_similarity_weight: z.number(),
+    top_k: z.number(),
+  });
+
+  return formSchema;
+}