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/components/rerank.tsx

@@ -1,7 +1,25 @@
 import { LlmModelType } from '@/constants/knowledge';
 import { useTranslate } from '@/hooks/common-hooks';
 import { useSelectLlmOptionsByModelType } from '@/hooks/llm-hooks';
-import { Form, Select, Slider } from 'antd';
+import { Select as AntSelect, Form, Slider } from 'antd';
+import { useFormContext } from 'react-hook-form';
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from './ui/form';
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from './ui/select';
+import { FormSlider } from './ui/slider';
 
 type FieldType = {
   rerank_id?: string;
@@ -18,7 +36,7 @@ export const RerankItem = () => {
       name={'rerank_id'}
       tooltip={t('rerankTip')}
     >
-      <Select
+      <AntSelect
         options={allOptions[LlmModelType.Rerank]}
         allowClear
         placeholder={t('rerankPlaceholder')}
@@ -55,3 +73,81 @@ const Rerank = () => {
 };
 
 export default Rerank;
+
+const RerankId = 'rerank_id';
+
+function RerankFormField() {
+  const form = useFormContext();
+  const { t } = useTranslate('knowledgeDetails');
+  const allOptions = useSelectLlmOptionsByModelType();
+  const options = allOptions[LlmModelType.Rerank];
+
+  return (
+    <FormField
+      control={form.control}
+      name={RerankId}
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>{t('rerankModel')}</FormLabel>
+          <FormControl>
+            <Select onValueChange={field.onChange} {...field}>
+              <SelectTrigger
+                className="w-[280px]"
+                value={field.value}
+                onReset={() => {
+                  form.resetField(RerankId);
+                }}
+              >
+                <SelectValue placeholder={t('rerankPlaceholder')} />
+              </SelectTrigger>
+              <SelectContent>
+                {options.map((x) => (
+                  <SelectGroup key={x.label}>
+                    <SelectLabel>{x.label}</SelectLabel>
+                    {x.options.map((y) => (
+                      <SelectItem
+                        value={y.value}
+                        key={y.value}
+                        disabled={y.disabled}
+                      >
+                        {y.label}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                ))}
+              </SelectContent>
+            </Select>
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+export function RerankFormFields() {
+  const { control, watch } = useFormContext();
+  const { t } = useTranslate('knowledgeDetails');
+  const rerankId = watch(RerankId);
+
+  return (
+    <>
+      <RerankFormField></RerankFormField>
+      {rerankId && (
+        <FormField
+          control={control}
+          name={'top_k'}
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t('topK')}</FormLabel>
+              <FormControl>
+                <FormSlider {...field} max={2048} min={1}></FormSlider>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      )}
+    </>
+  );
+}

web/src/components/similarity-slider/index.tsx

@@ -1,5 +1,14 @@
 import { useTranslate } from '@/hooks/common-hooks';
 import { Form, Slider } from 'antd';
+import { useFormContext } from 'react-hook-form';
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '../ui/form';
+import { FormSlider } from '../ui/slider';
 
 type FieldType = {
   similarity_threshold?: number;
@@ -40,3 +49,30 @@ const SimilaritySlider = ({
 };
 
 export default SimilaritySlider;
+
+interface SimilaritySliderFormFieldProps {
+  name?: string;
+}
+
+export function SimilaritySliderFormField({
+  name = 'vector_similarity_weight',
+}: SimilaritySliderFormFieldProps) {
+  const form = useFormContext();
+  const { t } = useTranslate('knowledgeDetails');
+
+  return (
+    <FormField
+      control={form.control}
+      name={name}
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>{t('vectorSimilarityWeight')}</FormLabel>
+          <FormControl>
+            <FormSlider {...field}></FormSlider>
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}

web/src/components/top-n-item.tsx

@@ -1,5 +1,14 @@
 import { useTranslate } from '@/hooks/common-hooks';
 import { Form, Slider } from 'antd';
+import { useFormContext } from 'react-hook-form';
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from './ui/form';
+import { FormSlider } from './ui/slider';
 
 type FieldType = {
   top_n?: number;
@@ -26,3 +35,28 @@ const TopNItem = ({ initialValue = 8, max = 30 }: IProps) => {
 };
 
 export default TopNItem;
+
+interface SimilaritySliderFormFieldProps {
+  max?: number;
+}
+
+export function TopNFormField({ max = 30 }: SimilaritySliderFormFieldProps) {
+  const form = useFormContext();
+  const { t } = useTranslate('chat');
+
+  return (
+    <FormField
+      control={form.control}
+      name={'top_n'}
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>{t('topN')}</FormLabel>
+          <FormControl>
+            <FormSlider {...field} max={max}></FormSlider>
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}

web/src/components/use-knowledge-graph-item.tsx

@@ -1,5 +1,6 @@
 import { Form, Switch } from 'antd';
 import { useTranslation } from 'react-i18next';
+import { SwitchFormField } from './switch-fom-field';
 
 type IProps = {
   filedName: string[];
@@ -19,3 +20,20 @@ export function UseKnowledgeGraphItem({ filedName }: IProps) {
     </Form.Item>
   );
 }
+
+interface UseKnowledgeGraphFormFieldProps {
+  name: string;
+}
+
+export function UseKnowledgeGraphFormField({
+  name,
+}: UseKnowledgeGraphFormFieldProps) {
+  const { t } = useTranslation();
+
+  return (
+    <SwitchFormField
+      name={name}
+      label={t('chat.useKnowledgeGraph')}
+    ></SwitchFormField>
+  );
+}

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/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;
+}