Feat: Construct RetrievalForm with original fields #3221 (#8012)

### What problem does this PR solve?

Feat: Construct RetrievalForm with original fields #3221

### Type of change


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

web/src/pages/agent/form/categorize-form/dynamic-example.tsx

@@ -1,4 +1,4 @@
-import { BlockButton, Button } from '@/components/ui/button';
+import { Button } from '@/components/ui/button';
 import {
   FormControl,
   FormField,
@@ -59,13 +59,6 @@ const DynamicExample = ({ name }: DynamicExampleProps) => {
             )}
           </div>
         ))}
-
-        <BlockButton
-          type="button"
-          onClick={() => append({ value: '' })} // "" will cause the inability to add, refer to: https://github.com/orgs/react-hook-form/discussions/8485#discussioncomment-2961861
-        >
-          {t('flow.addMessage')}
-        </BlockButton>
       </div>
       <FormMessage />
     </FormItem>

web/src/pages/agent/form/categorize-form/index.tsx

@@ -2,20 +2,13 @@ import { FormContainer } from '@/components/form-container';
 import { LargeModelFormField } from '@/components/large-model-form-field';
 import { LlmSettingSchema } from '@/components/llm-setting-items/next';
 import { MessageHistoryWindowSizeFormField } from '@/components/message-history-window-size-item';
-import { SelectWithSearch } from '@/components/originui/select-with-search';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form';
+import { Form } from '@/components/ui/form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
 import { INextOperatorForm } from '../../interface';
+import { QueryVariable } from '../components/query-variable';
 import DynamicCategorize from './dynamic-categorize';
 import { useValues } from './use-values';
 import { useWatchFormChange } from './use-watch-change';
@@ -26,7 +19,7 @@ const CategorizeForm = ({ node }: INextOperatorForm) => {
   const values = useValues(node);
 
   const FormSchema = z.object({
-    input: z.string().optional(),
+    query: z.string().optional(),
     parameter: z.string().optional(),
     ...LlmSettingSchema,
     message_history_window_size: z.coerce.number(),
@@ -63,22 +56,7 @@ const CategorizeForm = ({ node }: INextOperatorForm) => {
         }}
       >
         <FormContainer>
-          <FormField
-            control={form.control}
-            name="input"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel tooltip={t('chat.modelTip')}>
-                  {t('chat.input')}
-                </FormLabel>
-                <FormControl>
-                  <SelectWithSearch {...field}></SelectWithSearch>
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
+          <QueryVariable></QueryVariable>
           <LargeModelFormField></LargeModelFormField>
         </FormContainer>
         <MessageHistoryWindowSizeFormField

web/src/pages/agent/form/components/query-variable.tsx

@@ -0,0 +1,31 @@
+import { SelectWithSearch } from '@/components/originui/select-with-search';
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+export function QueryVariable() {
+  const { t } = useTranslation();
+  const form = useFormContext();
+
+  return (
+    <FormField
+      control={form.control}
+      name="query"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel tooltip={t('chat.modelTip')}>{t('flow.query')}</FormLabel>
+          <FormControl>
+            <SelectWithSearch {...field}></SelectWithSearch>
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}

web/src/pages/agent/form/retrieval-form/next.tsx

@@ -1,6 +1,12 @@
+import { FormContainer } from '@/components/form-container';
 import { KnowledgeBaseFormField } from '@/components/knowledge-base-item';
+import { LargeModelFormField } from '@/components/large-model-form-field';
 import { RerankFormFields } from '@/components/rerank';
-import { SimilaritySliderFormField } from '@/components/similarity-slider';
+import {
+  initialKeywordsSimilarityWeightValue,
+  initialSimilarityThresholdValue,
+  SimilaritySliderFormField,
+} from '@/components/similarity-slider';
 import { TopNFormField } from '@/components/top-n-item';
 import {
   Form,
@@ -11,46 +17,82 @@ import {
   FormMessage,
 } from '@/components/ui/form';
 import { Textarea } from '@/components/ui/textarea';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
 import { INextOperatorForm } from '../../interface';
-import { DynamicInputVariable } from '../components/next-dynamic-input-variable';
+import { QueryVariable } from '../components/query-variable';
 
-const RetrievalForm = ({ form, node }: INextOperatorForm) => {
+const FormSchema = z.object({
+  query: z.string().optional(),
+  similarity_threshold: z.coerce.number(),
+  keywords_similarity_weight: z.coerce.number(),
+  top_n: z.coerce.number(),
+  top_k: z.coerce.number(),
+  kb_ids: z.array(z.string()),
+  rerank_id: z.string(),
+  empty_response: z.string(),
+});
+
+const defaultValues = {
+  query: '',
+  top_n: 0.2,
+  top_k: 1024,
+  kb_ids: [],
+  rerank_id: '',
+  empty_response: '',
+  ...initialSimilarityThresholdValue,
+  ...initialKeywordsSimilarityWeightValue,
+};
+
+const RetrievalForm = ({ node }: INextOperatorForm) => {
   const { t } = useTranslation();
+
+  const form = useForm({
+    defaultValues: defaultValues,
+    resolver: zodResolver(FormSchema),
+  });
+
   return (
     <Form {...form}>
       <form
-        className="space-y-6"
+        className="space-y-6 p-4"
         onSubmit={(e) => {
           e.preventDefault();
         }}
       >
-        <DynamicInputVariable node={node}></DynamicInputVariable>
-        <SimilaritySliderFormField
-          vectorSimilarityWeightName="keywords_similarity_weight"
-          isTooltipShown
-        ></SimilaritySliderFormField>
-        <TopNFormField></TopNFormField>
-        <RerankFormFields></RerankFormFields>
-        <KnowledgeBaseFormField></KnowledgeBaseFormField>
-        <FormField
-          control={form.control}
-          name="empty_response"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>{t('chat.emptyResponse')}</FormLabel>
-              <FormControl>
-                <Textarea
-                  placeholder={t('common.namePlaceholder')}
-                  {...field}
-                  autoComplete="off"
-                  rows={4}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+        <FormContainer>
+          <QueryVariable></QueryVariable>
+          <LargeModelFormField></LargeModelFormField>
+        </FormContainer>
+        <FormContainer>
+          <SimilaritySliderFormField
+            vectorSimilarityWeightName="keywords_similarity_weight"
+            isTooltipShown
+          ></SimilaritySliderFormField>
+          <TopNFormField></TopNFormField>
+          <RerankFormFields></RerankFormFields>
+          <KnowledgeBaseFormField></KnowledgeBaseFormField>
+          <FormField
+            control={form.control}
+            name="empty_response"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t('chat.emptyResponse')}</FormLabel>
+                <FormControl>
+                  <Textarea
+                    placeholder={t('common.namePlaceholder')}
+                    {...field}
+                    autoComplete="off"
+                    rows={4}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </FormContainer>
       </form>
     </Form>
   );