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)
2025-12-08 12:32:30 +08:00 · 2025-11-07 11:44:22 +08:00
parent 34283d4db4
commit a880beb1f6
11 changed files with 289 additions and 22 deletions
--- a/web/src/pages/agent/canvas/node/retrieval-node.tsx
+++ b/web/src/pages/agent/canvas/node/retrieval-node.tsx
@ -7,7 +7,7 @@ import classNames from 'classnames';
 import { get } from 'lodash';
 import { memo } from 'react';
 import { NodeHandleId } from '../../constant';
-import { useGetVariableLabelByValue } from '../../hooks/use-get-begin-query';
+import { useGetVariableLabelOrTypeByValue } from '../../hooks/use-get-begin-query';
 import { CommonHandle, LeftEndHandle } from './handle';
 import styles from './index.less';
 import NodeHeader from './node-header';
@ -23,7 +23,7 @@ function InnerRetrievalNode({
  const knowledgeBaseIds: string[] = get(data, 'form.kb_ids', []);
  const { list: knowledgeList } = useFetchKnowledgeList(true);

-  const getLabel = useGetVariableLabelByValue(id);
+  const { getLabel } = useGetVariableLabelOrTypeByValue(id);

  return (
    <ToolBar selected={selected} id={id} label={data.label}>
--- a/web/src/pages/agent/canvas/node/switch-node.tsx
+++ b/web/src/pages/agent/canvas/node/switch-node.tsx
@ -4,7 +4,7 @@ import { LogicalOperatorIcon } from '@/hooks/logic-hooks/use-build-operator-opti
 import { ISwitchCondition, ISwitchNode } from '@/interfaces/database/flow';
 import { NodeProps, Position } from '@xyflow/react';
 import { memo, useCallback } from 'react';
-import { useGetVariableLabelByValue } from '../../hooks/use-get-begin-query';
+import { useGetVariableLabelOrTypeByValue } from '../../hooks/use-get-begin-query';
 import { CommonHandle, LeftEndHandle } from './handle';
 import { RightHandleStyle } from './handle-icon';
 import NodeHeader from './node-header';
@ -27,7 +27,7 @@ const ConditionBlock = ({
  nodeId,
 }: { condition: ISwitchCondition } & { nodeId: string }) => {
  const items = condition?.items ?? [];
-  const getLabel = useGetVariableLabelByValue(nodeId);
+  const { getLabel } = useGetVariableLabelOrTypeByValue(nodeId);

  const renderOperatorIcon = useCallback((operator?: string) => {
    const item = SwitchOperatorOptions.find((x) => x.value === operator);
--- a/web/src/pages/agent/form-sheet/form-config-map.tsx
+++ b/web/src/pages/agent/form-sheet/form-config-map.tsx
@ -38,6 +38,7 @@ import TokenizerForm from '../form/tokenizer-form';
 import ToolForm from '../form/tool-form';
 import TuShareForm from '../form/tushare-form';
 import UserFillUpForm from '../form/user-fill-up-form';
+import VariableAggregatorForm from '../form/variable-aggregator-form';
 import VariableAssignerForm from '../form/variable-assigner-form';
 import WenCaiForm from '../form/wencai-form';
 import WikipediaForm from '../form/wikipedia-form';
@ -186,4 +187,8 @@ export const FormConfigMap = {
  [Operator.VariableAssigner]: {
    component: VariableAssignerForm,
  },
+
+  [Operator.VariableAggregator]: {
+    component: VariableAggregatorForm,
+  },
 };
--- a/web/src/pages/agent/form/agent-form/index.tsx
+++ b/web/src/pages/agent/form/agent-form/index.tsx
@ -26,7 +26,6 @@ import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
 import {
  AgentExceptionMethod,
-  JsonSchemaDataType,
  NodeHandleId,
  VariableType,
  initialAgentValues,
@ -158,7 +157,6 @@ function AgentForm({ node }: INextOperatorForm) {
                    placeholder={t('flow.messagePlaceholder')}
                    showToolbar={true}
                    extraOptions={extraOptions}
-                    types={[JsonSchemaDataType.String]}
                  ></PromptEditor>
                </FormControl>
              </FormItem>
@ -176,7 +174,6 @@ function AgentForm({ node }: INextOperatorForm) {
                      <PromptEditor
                        {...field}
                        showToolbar={true}
-                        types={[JsonSchemaDataType.String]}
                      ></PromptEditor>
                    </section>
                  </FormControl>
--- a/web/src/pages/agent/form/components/structured-output-secondary-menu.tsx
+++ b/web/src/pages/agent/form/components/structured-output-secondary-menu.tsx
@ -53,10 +53,13 @@ export function StructuredOutputSecondaryMenu({

  const renderAgentStructuredOutput = useCallback(
    (values: any, option: { label: ReactNode; value: string }) => {
-      if (isPlainObject(values) && 'properties' in values) {
+      const properties =
+        get(values, 'properties') || get(values, 'items.properties');
+
+      if (isPlainObject(values) && properties) {
        return (
          <ul className="border-l">
-            {Object.entries(values.properties).map(([key, value]) => {
+            {Object.entries(properties).map(([key, value]) => {
              const nextOption = {
                label: option.label + `.${key}`,
                value: option.value + `.${key}`,
@ -79,8 +82,9 @@ export function StructuredOutputSecondaryMenu({
                      {key}
                      <span className="text-text-secondary">{dataType}</span>
                    </div>
-                    {dataType === JsonSchemaDataType.Object &&
-                      renderAgentStructuredOutput(value, nextOption)}
+                    {[JsonSchemaDataType.Object, JsonSchemaDataType.Array].some(
+                      (x) => x === dataType,
+                    ) && renderAgentStructuredOutput(value, nextOption)}
                  </li>
                );
              }
--- a/web/src/pages/agent/form/invoke-form/variable-table.tsx
+++ b/web/src/pages/agent/form/invoke-form/variable-table.tsx
@ -32,7 +32,7 @@ import {
 } from '@/components/ui/tooltip';
 import { cn } from '@/lib/utils';
 import { useTranslation } from 'react-i18next';
-import { useGetVariableLabelByValue } from '../../hooks/use-get-begin-query';
+import { useGetVariableLabelOrTypeByValue } from '../../hooks/use-get-begin-query';
 import { VariableFormSchemaType } from './schema';

 interface IProps {
@ -49,7 +49,7 @@ export function VariableTable({
  nodeId,
 }: IProps) {
  const { t } = useTranslation();
-  const getLabel = useGetVariableLabelByValue(nodeId!);
+  const { getLabel } = useGetVariableLabelOrTypeByValue(nodeId!);

  const [sorting, setSorting] = React.useState<SortingState>([]);
  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
--- a/web/src/pages/agent/form/message-form/index.tsx
+++ b/web/src/pages/agent/form/message-form/index.tsx
@ -14,7 +14,6 @@ import { memo } from 'react';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
-import { JsonSchemaDataType } from '../../constant';
 import { INextOperatorForm } from '../../interface';
 import { FormWrapper } from '../components/form-wrapper';
 import { PromptEditor } from '../components/prompt-editor';
@ -63,11 +62,9 @@ function MessageForm({ node }: INextOperatorForm) {
                    render={({ field }) => (
                      <FormItem className="flex-1">
                        <FormControl>
-                          {/* <Textarea {...field}> </Textarea> */}
                          <PromptEditor
                            {...field}
                            placeholder={t('flow.messagePlaceholder')}
-                            types={[JsonSchemaDataType.String]}
                          ></PromptEditor>
                        </FormControl>
                      </FormItem>
--- a/web/src/pages/agent/form/variable-aggregator-form/dynamic-group-variable.tsx
+++ b/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>
+  );
+}
--- a/web/src/pages/agent/form/variable-aggregator-form/index.tsx
+++ b/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);
--- a/web/src/pages/agent/hooks/use-build-structured-output.ts
+++ b/web/src/pages/agent/hooks/use-build-structured-output.ts
@ -1,6 +1,10 @@
-import { get } from 'lodash';
+import { get, isPlainObject } from 'lodash';
 import { ReactNode, useCallback } from 'react';
-import { AgentStructuredOutputField, Operator } from '../constant';
+import {
+  AgentStructuredOutputField,
+  JsonSchemaDataType,
+  Operator,
+} from '../constant';
 import useGraphStore from '../store';

 function getNodeId(value: string) {
@ -82,3 +86,70 @@ export function useFindAgentStructuredOutputLabel() {

  return findAgentStructuredOutputLabel;
 }
+
+export function useFindAgentStructuredOutputTypeByValue() {
+  const { getOperatorTypeFromId } = useGraphStore((state) => state);
+  const filterStructuredOutput = useGetStructuredOutputByValue();
+
+  const findTypeByValue = useCallback(
+    (
+      values: unknown,
+      target: string,
+      path: string = '',
+    ): string | undefined => {
+      const properties =
+        get(values, 'properties') || get(values, 'items.properties');
+
+      if (isPlainObject(values) && properties) {
+        for (const [key, value] of Object.entries(properties)) {
+          const nextPath = path ? `${path}.${key}` : key;
+          const dataType = get(value, 'type');
+
+          if (nextPath === target) {
+            return dataType;
+          }
+
+          if (
+            [JsonSchemaDataType.Object, JsonSchemaDataType.Array].some(
+              (x) => x === dataType,
+            )
+          ) {
+            const type = findTypeByValue(value, target, nextPath);
+            if (type) {
+              return type;
+            }
+          }
+        }
+      }
+    },
+    [],
+  );
+
+  const findAgentStructuredOutputTypeByValue = useCallback(
+    (value?: string) => {
+      if (!value) {
+        return;
+      }
+      const fields = value.split('@');
+      const nodeId = fields.at(0);
+      const jsonSchema = filterStructuredOutput(value);
+
+      if (
+        getOperatorTypeFromId(nodeId) === Operator.Agent &&
+        fields.at(1)?.startsWith(AgentStructuredOutputField)
+      ) {
+        const jsonSchemaFields = fields
+          .at(1)
+          ?.slice(AgentStructuredOutputField.length + 1);
+
+        if (jsonSchemaFields) {
+          const type = findTypeByValue(jsonSchema, jsonSchemaFields);
+          return type;
+        }
+      }
+    },
+    [filterStructuredOutput, findTypeByValue, getOperatorTypeFromId],
+  );
+
+  return findAgentStructuredOutputTypeByValue;
+}
--- a/web/src/pages/agent/hooks/use-get-begin-query.tsx
+++ b/web/src/pages/agent/hooks/use-get-begin-query.tsx
@ -20,6 +20,7 @@ import { buildBeginInputListFromObject } from '../form/begin-form/utils';
 import { BeginQuery } from '../interface';
 import OperatorIcon from '../operator-icon';
 import useGraphStore from '../store';
+import { useFindAgentStructuredOutputTypeByValue } from './use-build-structured-output';

 export function useSelectBeginNodeDataInputs() {
  const getNode = useGraphStore((state) => state.getNode);
@ -263,7 +264,7 @@ export const useGetComponentLabelByValue = (nodeId: string) => {
  return getLabel;
 };

-export function useGetVariableLabelByValue(nodeId: string) {
+export function useFlattenQueryVariableOptions(nodeId?: string) {
  const { getNode } = useGraphStore((state) => state);
  const nextOptions = useBuildQueryVariableOptions(getNode(nodeId));

@ -273,11 +274,34 @@ export function useGetVariableLabelByValue(nodeId: string) {
    }, []);
  }, [nextOptions]);

-  const getLabel = useCallback(
+  return flattenOptions;
+}
+
+export function useGetVariableLabelOrTypeByValue(nodeId?: string) {
+  const flattenOptions = useFlattenQueryVariableOptions(nodeId);
+  const findAgentStructuredOutputTypeByValue =
+    useFindAgentStructuredOutputTypeByValue();
+
+  const getItem = useCallback(
    (val?: string) => {
-      return flattenOptions.find((x) => x.value === val)?.label;
+      return flattenOptions.find((x) => x.value === val);
    },
    [flattenOptions],
  );
-  return getLabel;
+
+  const getLabel = useCallback(
+    (val?: string) => {
+      return getItem(val)?.label;
+    },
+    [getItem],
+  );
+
+  const getType = useCallback(
+    (val?: string) => {
+      return getItem(val)?.type || findAgentStructuredOutputTypeByValue(val);
+    },
+    [findAgentStructuredOutputTypeByValue, getItem],
+  );
+
+  return { getLabel, getType };
 }