Feat: Submit clean data operations form data to the backend. #10427 (#11030)

### What problem does this PR solve?

Feat: Submit clean data operations form data to the backend. #10427

### Type of change


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

web/src/pages/agent/form/components/dynamic-fom-header.tsx

@@ -0,0 +1,25 @@
+import { Button } from '@/components/ui/button';
+import { FormLabel } from '@/components/ui/form';
+import { Plus } from 'lucide-react';
+import { ReactNode } from 'react';
+
+export type FormListHeaderProps = {
+  label: ReactNode;
+  tooltip?: string;
+  onClick?: () => void;
+};
+
+export function DynamicFormHeader({
+  label,
+  tooltip,
+  onClick,
+}: FormListHeaderProps) {
+  return (
+    <div className="flex items-center justify-between">
+      <FormLabel tooltip={tooltip}>{label}</FormLabel>
+      <Button variant={'ghost'} type="button" onClick={onClick}>
+        <Plus />
+      </Button>
+    </div>
+  );
+}

web/src/pages/agent/form/components/output.tsx

@@ -1,4 +1,7 @@
+import { RAGFlowFormItem } from '@/components/ragflow-form';
+import { Input } from '@/components/ui/input';
 import { t } from 'i18next';
+import { z } from 'zod';
 
 export type OutputType = {
   title: string;
@@ -7,6 +10,7 @@ export type OutputType = {
 
 type OutputProps = {
   list: Array<OutputType>;
+  isFormRequired?: boolean;
 };
 
 export function transferOutputs(outputs: Record<string, any>) {
@@ -16,7 +20,11 @@ export function transferOutputs(outputs: Record<string, any>) {
   }));
 }
 
-export function Output({ list }: OutputProps) {
+export const OutputSchema = {
+  outputs: z.record(z.any()),
+};
+
+export function Output({ list, isFormRequired = false }: OutputProps) {
   return (
     <section className="space-y-2">
       <div className="text-sm">{t('flow.output')}</div>
@@ -30,6 +38,11 @@ export function Output({ list }: OutputProps) {
           </li>
         ))}
       </ul>
+      {isFormRequired && (
+        <RAGFlowFormItem name="outputs" className="hidden">
+          <Input></Input>
+        </RAGFlowFormItem>
+      )}
     </section>
   );
 }

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

@@ -1,17 +1,20 @@
-import { BlockButton, Button } from '@/components/ui/button';
+import { Button } from '@/components/ui/button';
 import { X } from 'lucide-react';
 import { useFieldArray, useFormContext } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
 import { JsonSchemaDataType } from '../../constant';
+import { DynamicFormHeader, FormListHeaderProps } from './dynamic-fom-header';
 import { QueryVariable } from './query-variable';
 
 type QueryVariableListProps = {
   types?: JsonSchemaDataType[];
-};
-export function QueryVariableList({ types }: QueryVariableListProps) {
-  const { t } = useTranslation();
+} & FormListHeaderProps;
+export function QueryVariableList({
+  types,
+  label,
+  tooltip,
+}: QueryVariableListProps) {
   const form = useFormContext();
-  const name = 'inputs';
+  const name = 'query';
 
   const { fields, remove, append } = useFieldArray({
     name: name,
@@ -19,28 +22,31 @@ export function QueryVariableList({ types }: QueryVariableListProps) {
   });
 
   return (
-    <div className="space-y-5">
-      {fields.map((field, index) => {
-        const nameField = `${name}.${index}.input`;
+    <section className="space-y-2">
+      <DynamicFormHeader
+        label={label}
+        tooltip={tooltip}
+        onClick={() => append({ input: '' })}
+      ></DynamicFormHeader>
+      <div className="space-y-5">
+        {fields.map((field, index) => {
+          const nameField = `${name}.${index}.input`;
 
-        return (
-          <div key={field.id} className="flex items-center gap-2">
-            <QueryVariable
-              name={nameField}
-              hideLabel
-              className="flex-1"
-              types={types}
-            ></QueryVariable>
-            <Button variant={'ghost'} onClick={() => remove(index)}>
-              <X className="text-text-sub-title-invert " />
-            </Button>
-          </div>
-        );
-      })}
-
-      <BlockButton onClick={() => append({ input: '' })}>
-        {t('common.add')}
-      </BlockButton>
-    </div>
+          return (
+            <div key={field.id} className="flex items-center gap-2">
+              <QueryVariable
+                name={nameField}
+                hideLabel
+                className="flex-1"
+                types={types}
+              ></QueryVariable>
+              <Button variant={'ghost'} onClick={() => remove(index)}>
+                <X className="text-text-sub-title-invert " />
+              </Button>
+            </div>
+          );
+        })}
+      </div>
+    </section>
   );
 }