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