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

@@ -13,15 +13,7 @@ import {
   FormLabel,
   FormMessage,
 } from './ui/form';
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from './ui/select';
+import { RAGFlowSelect } from './ui/select';
 
 type FieldType = {
   rerank_id?: string;
@@ -117,32 +109,11 @@ function RerankFormField() {
         <FormItem>
           <FormLabel tooltip={t('rerankTip')}>{t('rerankModel')}</FormLabel>
           <FormControl>
-            <Select onValueChange={field.onChange} {...field}>
-              <SelectTrigger
-                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>
+            <RAGFlowSelect
+              allowClear
+              {...field}
+              options={options}
+            ></RAGFlowSelect>
           </FormControl>
           <FormMessage />
         </FormItem>

web/src/locales/en.ts

@@ -1278,6 +1278,7 @@ This delimiter is used to split the input text into several text pieces echo of
       modeTip: 'The mode defines how the workflow is initiated.',
       beginInputTip:
         'By defining input parameters, this content can be accessed by other components in subsequent processes.',
+      query: 'Query variables',
     },
     llmTools: {
       bad_calculator: {

web/src/locales/zh.ts

@@ -1231,6 +1231,7 @@ General：实体和关系提取提示来自 GitHub - microsoft/graphrag：基于
       openingSwitchTip: '您的用户将在开始时看到此欢迎消息。',
       modeTip: '模式定义了工作流的启动方式。',
       beginInputTip: '通过定义输入参数，此内容可以被后续流程中的其他组件访问。',
+      query: '查询变量',
     },
     footer: {
       profile: 'All rights reserved @ React',

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 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 = ({ form, node }: INextOperatorForm) => {
+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>
   );