Feat: Add a form for variable aggregation operators #10427 (#11095)

### What problem does this PR solve?

Feat: Add a form for variable aggregation operators #10427

### Type of change


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

web/src/pages/agent/form/variable-aggregator-form/dynamic-group-variable.tsx

@@ -0,0 +1,88 @@
+import { RAGFlowFormItem } from '@/components/ragflow-form';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Plus, Trash2 } from 'lucide-react';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+import { useGetVariableLabelOrTypeByValue } from '../../hooks/use-get-begin-query';
+import { QueryVariable } from '../components/query-variable';
+
+type DynamicGroupVariableProps = {
+  name: string;
+  parentIndex: number;
+  removeParent: (index: number) => void;
+};
+
+export function DynamicGroupVariable({
+  name,
+  parentIndex,
+  removeParent,
+}: DynamicGroupVariableProps) {
+  const form = useFormContext();
+
+  const variableFieldName = `${name}.variables`;
+
+  const { getType } = useGetVariableLabelOrTypeByValue();
+
+  const { fields, remove, append } = useFieldArray({
+    name: variableFieldName,
+    control: form.control,
+  });
+
+  const firstValue = form.getValues(`${variableFieldName}.0.value`);
+  const firstType = getType(firstValue);
+
+  return (
+    <section className="py-3 group space-y-3">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <RAGFlowFormItem name={`${name}.group_name`} className="w-32">
+            <Input></Input>
+          </RAGFlowFormItem>
+
+          <Button
+            variant={'ghost'}
+            type="button"
+            className="hidden group-hover:block"
+            onClick={() => removeParent(parentIndex)}
+          >
+            <Trash2 />
+          </Button>
+        </div>
+        <div className="flex gap-2 items-center">
+          {firstType && (
+            <span className="text-text-secondary border px-1 rounded-md">
+              {firstType}
+            </span>
+          )}
+          <Button
+            variant={'ghost'}
+            type="button"
+            onClick={() => append({ value: '' })}
+          >
+            <Plus />
+          </Button>
+        </div>
+      </div>
+
+      <section className="space-y-3">
+        {fields.map((field, index) => (
+          <div key={field.id} className="flex gap-2 items-center">
+            <QueryVariable
+              name={`${variableFieldName}.${index}.value`}
+              className="flex-1 min-w-0"
+              hideLabel
+              types={firstType && fields.length > 1 ? [firstType] : []}
+            ></QueryVariable>
+            <Button
+              variant={'ghost'}
+              type="button"
+              onClick={() => remove(index)}
+            >
+              <Trash2 />
+            </Button>
+          </div>
+        ))}
+      </section>
+    </section>
+  );
+}

web/src/pages/agent/form/variable-aggregator-form/index.tsx

@@ -0,0 +1,81 @@
+import { BlockButton } from '@/components/ui/button';
+import { Form } from '@/components/ui/form';
+import { Separator } from '@/components/ui/separator';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { memo } from 'react';
+import { useFieldArray, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+import { initialDataOperationsValues } from '../../constant';
+import { useFormValues } from '../../hooks/use-form-values';
+import { useWatchFormChange } from '../../hooks/use-watch-form-change';
+import { INextOperatorForm } from '../../interface';
+import { buildOutputList } from '../../utils/build-output-list';
+import { FormWrapper } from '../components/form-wrapper';
+import { Output } from '../components/output';
+import { DynamicGroupVariable } from './dynamic-group-variable';
+
+export const RetrievalPartialSchema = {
+  groups: z.array(
+    z.object({
+      group_name: z.string(),
+      variables: z.array(z.object({ value: z.string().optional() })),
+    }),
+  ),
+  operations: z.string(),
+};
+
+export const FormSchema = z.object(RetrievalPartialSchema);
+
+export type DataOperationsFormSchemaType = z.infer<typeof FormSchema>;
+
+const outputList = buildOutputList(initialDataOperationsValues.outputs);
+
+function VariableAggregatorForm({ node }: INextOperatorForm) {
+  const { t } = useTranslation();
+
+  const defaultValues = useFormValues(initialDataOperationsValues, node);
+
+  const form = useForm<DataOperationsFormSchemaType>({
+    defaultValues: defaultValues,
+    mode: 'onChange',
+    resolver: zodResolver(FormSchema),
+    shouldUnregister: true,
+  });
+
+  const { fields, remove, append } = useFieldArray({
+    name: 'groups',
+    control: form.control,
+  });
+
+  useWatchFormChange(node?.id, form, true);
+
+  return (
+    <Form {...form}>
+      <FormWrapper>
+        <section className="divide-y">
+          {fields.map((field, idx) => (
+            <DynamicGroupVariable
+              key={field.id}
+              name={`groups.${idx}`}
+              parentIndex={idx}
+              removeParent={remove}
+            ></DynamicGroupVariable>
+          ))}
+        </section>
+        <BlockButton
+          onClick={() =>
+            append({ group_name: `Group ${fields.length}`, variables: [] })
+          }
+        >
+          {t('common.add')}
+        </BlockButton>
+        <Separator />
+
+        <Output list={outputList} isFormRequired></Output>
+      </FormWrapper>
+    </Form>
+  );
+}
+
+export default memo(VariableAggregatorForm);