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/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}>

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);

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,
+  },
 };

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>

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 &&
+                    {[JsonSchemaDataType.Object, JsonSchemaDataType.Array].some(
-                      renderAgentStructuredOutput(value, nextOption)}
+                      (x) => x === dataType,
+                    ) && renderAgentStructuredOutput(value, nextOption)}
                   </li>
                 );
               }

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>(

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>

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);

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;
+}

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 };
 }