Feat: Add DynamicVariableForm with shadcn-ui. #3221 (#5336)

### What problem does this PR solve? Feat: Add DynamicVariableForm with shadcn-ui. #3221 ### Type of change - [x] New Feature (non-breaking change which adds functionality)
2025-12-24 07:26:47 +08:00 · 2025-02-25 16:57:46 +08:00
parent 1a41b92f77
commit 93b2e80eb8
7 changed files with 629 additions and 65 deletions
--- a/web/src/pages/agent/form/components/next-dynamic-input-variable.tsx
+++ b/web/src/pages/agent/form/components/next-dynamic-input-variable.tsx
@ -0,0 +1,109 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { RAGFlowSelect } from '@/components/ui/select';
+import { RAGFlowNodeType } from '@/interfaces/database/flow';
+import { CircleMinus, Plus } from 'lucide-react';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useBuildComponentIdSelectOptions } from '../../hooks/use-get-begin-query';
+
+interface IProps {
+  node?: RAGFlowNodeType;
+}
+
+enum VariableType {
+  Reference = 'reference',
+  Input = 'input',
+}
+
+const getVariableName = (type: string) =>
+  type === VariableType.Reference ? 'component_id' : 'value';
+
+export function DynamicVariableForm({ node }: IProps) {
+  const { t } = useTranslation();
+  const form = useFormContext();
+  const { fields, remove, append } = useFieldArray({
+    name: 'query',
+    control: form.control,
+  });
+
+  const valueOptions = useBuildComponentIdSelectOptions(
+    node?.id,
+    node?.parentId,
+  );
+
+  const options = [
+    { value: VariableType.Reference, label: t('flow.reference') },
+    { value: VariableType.Input, label: t('flow.text') },
+  ];
+
+  return (
+    <div>
+      {fields.map((field, index) => {
+        const typeField = `query.${index}.type`;
+        const typeValue = form.watch(typeField);
+        return (
+          <div key={field.id} className="flex items-center gap-1">
+            <FormField
+              control={form.control}
+              name={typeField}
+              render={({ field }) => (
+                <FormItem className="w-2/5">
+                  {/* <FormLabel>City</FormLabel> */}
+                  <FormDescription />
+                  <FormControl>
+                    <RAGFlowSelect
+                      // placeholder={t('common.pleaseSelect')}
+                      {...field}
+                      options={options}
+                    ></RAGFlowSelect>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name={`query.${index}.${getVariableName(typeValue)}`}
+              render={({ field }) => (
+                <FormItem>
+                  {/* <FormLabel>State</FormLabel> */}
+                  <FormDescription />
+                  <FormControl>
+                    {typeValue === VariableType.Reference ? (
+                      <RAGFlowSelect
+                        // placeholder={t('common.pleaseSelect')}
+                        {...field}
+                        options={valueOptions}
+                      ></RAGFlowSelect>
+                    ) : (
+                      <Input placeholder={t('common.pleaseInput')} {...field} />
+                    )}
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <CircleMinus
+              className="cursor-pointer"
+              onClick={() => remove(index)}
+            />
+          </div>
+        );
+      })}
+      <Button onClick={append} className="w-full mt-4">
+        <Plus />
+        {t('flow.addVariable')}
+      </Button>
+    </div>
+  );
+}
--- a/web/src/pages/agent/form/retrieval-form/next.tsx
+++ b/web/src/pages/agent/form/retrieval-form/next.tsx
@ -0,0 +1,49 @@
+import { KnowledgeBaseFormField } from '@/components/knowledge-base-item';
+import { RerankFormFields } from '@/components/rerank';
+import { SimilaritySliderFormField } from '@/components/similarity-slider';
+import { TopNFormField } from '@/components/top-n-item';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Textarea } from '@/components/ui/textarea';
+import { useTranslate } from '@/hooks/common-hooks';
+import { INextOperatorForm } from '../../interface';
+import { DynamicVariableForm } from '../components/next-dynamic-input-variable';
+
+const RetrievalForm = ({ form, node }: INextOperatorForm) => {
+  const { t } = useTranslate('flow');
+  return (
+    <Form {...form}>
+      <DynamicVariableForm></DynamicVariableForm>
+      <SimilaritySliderFormField name="keywords_similarity_weight"></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>
+        )}
+      />
+    </Form>
+  );
+};
+
+export default RetrievalForm;