Feat: The output is derived based on the configuration of the variable aggregation operator. #10427 (#11109)

### What problem does this PR solve? Feat: The output is derived based on the configuration of the variable aggregation operator. #10427 ### Type of change - [x] New Feature (non-breaking change which adds functionality)
2025-12-08 12:32:30 +08:00 · 2025-11-07 16:35:32 +08:00
parent cb95072ecf
commit 526ba3388f
11 changed files with 207 additions and 39 deletions
--- a/web/src/pages/agent/constant/index.tsx
+++ b/web/src/pages/agent/constant/index.tsx
@ -598,7 +598,7 @@ export const initialDataOperationsValues = {

 export const initialVariableAssignerValues = {};

-export const initialVariableAggregatorValues = {};
+export const initialVariableAggregatorValues = { outputs: {}, groups: [] };

 export const CategorizeAnchorPointPositions = [
  { top: 1, right: 34 },
--- a/web/src/pages/agent/form/components/prompt-editor/variable-picker-plugin.tsx
+++ b/web/src/pages/agent/form/components/prompt-editor/variable-picker-plugin.tsx
@ -36,6 +36,7 @@ import {
  useShowSecondaryMenu,
 } from '@/pages/agent/hooks/use-build-structured-output';
 import { useFilterQueryVariableOptionsByTypes } from '@/pages/agent/hooks/use-get-begin-query';
+import { get } from 'lodash';
 import { PromptIdentity } from '../../agent-form/use-build-prompt-options';
 import { StructuredOutputSecondaryMenu } from '../structured-output-secondary-menu';
 import { ProgrammaticTag } from './constant';
@ -45,18 +46,21 @@ class VariableInnerOption extends MenuOption {
  value: string;
  parentLabel: string | JSX.Element;
  icon?: ReactNode;
+  type?: string;

  constructor(
    label: string,
    value: string,
    parentLabel: string | JSX.Element,
    icon?: ReactNode,
+    type?: string,
  ) {
    super(value);
    this.label = label;
    this.value = value;
    this.parentLabel = parentLabel;
    this.icon = icon;
+    this.type = type;
  }
 }

@ -126,9 +130,10 @@ function VariablePickerMenuItem({
              <li
                key={x.value}
                onClick={() => selectOptionAndCleanUp(x)}
-                className="hover:bg-bg-card p-1 text-text-primary rounded-sm"
+                className="hover:bg-bg-card p-1 text-text-primary rounded-sm flex justify-between items-center"
              >
-                {x.label}
+                <span className="truncate flex-1 min-w-0">{x.label}</span>
+                <span className="text-text-secondary">{get(x, 'type')}</span>
              </li>
            );
          })}
@ -146,6 +151,7 @@ export type VariablePickerMenuOptionType = {
    label: string;
    value: string;
    icon: ReactNode;
+    type?: string;
  }>;
 };

@ -214,7 +220,13 @@ export default function VariablePickerMenuPlugin({
          x.label,
          x.title,
          x.options.map((y) => {
-            return new VariableInnerOption(y.label, y.value, x.label, y.icon);
+            return new VariableInnerOption(
+              y.label,
+              y.value,
+              x.label,
+              y.icon,
+              y.type,
+            );
          }),
        ),
    );
@ -378,7 +390,7 @@ export default function VariablePickerMenuPlugin({
        const nextOptions = buildNextOptions();
        return anchorElementRef.current && nextOptions.length
          ? ReactDOM.createPortal(
-              <div className="typeahead-popover w-[200px] p-2 bg-bg-base">
+              <div className="typeahead-popover w-80 p-2 bg-bg-base">
                <ul className="scroll-auto overflow-x-hidden">
                  {nextOptions.map((option, i: number) => (
                    <VariablePickerMenuItem
--- a/web/src/pages/agent/form/components/query-variable.tsx
+++ b/web/src/pages/agent/form/components/query-variable.tsx
@ -18,6 +18,7 @@ type QueryVariableProps = {
  label?: ReactNode;
  hideLabel?: boolean;
  className?: string;
+  onChange?: (value: string) => void;
 };

 export function QueryVariable({
@ -26,6 +27,7 @@ export function QueryVariable({
  label,
  hideLabel = false,
  className,
+  onChange,
 }: QueryVariableProps) {
  const { t } = useTranslation();
  const form = useFormContext();
@ -46,7 +48,11 @@ export function QueryVariable({
          <FormControl>
            <GroupedSelectWithSecondaryMenu
              options={finalOptions}
-              {...field}
+              value={field.value}
+              onChange={(val) => {
+                field.onChange(val);
+                onChange?.(val);
+              }}
              // allowClear
              types={types}
            ></GroupedSelectWithSecondaryMenu>
--- a/web/src/pages/agent/form/components/select-with-secondary-menu.tsx
+++ b/web/src/pages/agent/form/components/select-with-secondary-menu.tsx
@ -209,8 +209,12 @@ export function GroupedSelectWithSecondaryMenu({
                        onChange?.(option.value);
                        setOpen(false);
                      }}
+                      className="flex items-center justify-between"
                    >
-                      {option.label}
+                      <span> {option.label}</span>
+                      <span className="text-text-secondary">
+                        {get(option, 'type')}
+                      </span>
                    </CommandItem>
                  );
                })}
--- a/web/src/pages/agent/form/components/structured-output-secondary-menu.tsx
+++ b/web/src/pages/agent/form/components/structured-output-secondary-menu.tsx
@ -112,9 +112,12 @@ export function StructuredOutputSecondaryMenu({
      <HoverCardTrigger asChild>
        <li
          onClick={handleMenuClick}
-          className="hover:bg-bg-card py-1 px-2 text-text-primary rounded-sm text-sm flex justify-between items-center"
+          className="hover:bg-bg-card py-1 px-2 text-text-primary rounded-sm text-sm flex justify-between items-center gap-2"
        >
-          {data.label} <ChevronRight className="size-3.5 text-text-secondary" />
+          <div className="flex justify-between flex-1">
+            {data.label} <span className="text-text-secondary">object</span>
+          </div>
+          <ChevronRight className="size-3.5 text-text-secondary" />
        </li>
      </HoverCardTrigger>
      <HoverCardContent
--- 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
@ -5,6 +5,7 @@ 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';
+import { NameInput } from './name-input';

 type DynamicGroupVariableProps = {
  name: string;
@ -36,9 +37,17 @@ export function DynamicGroupVariable({
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <RAGFlowFormItem name={`${name}.group_name`} className="w-32">
+            {(field) => (
+              <NameInput
+                value={field.value}
+                onChange={field.onChange}
+              ></NameInput>
+            )}
+          </RAGFlowFormItem>
+          {/* Use a hidden form to store data types; otherwise, data loss may occur. */}
+          <RAGFlowFormItem name={`${name}.type`} className="hidden">
            <Input></Input>
          </RAGFlowFormItem>
-
          <Button
            variant={'ghost'}
            type="button"
@ -72,6 +81,14 @@ export function DynamicGroupVariable({
              className="flex-1 min-w-0"
              hideLabel
              types={firstType && fields.length > 1 ? [firstType] : []}
+              onChange={(val) => {
+                const type = getType(val);
+                if (type && index === 0) {
+                  form.setValue(`${name}.type`, type, {
+                    shouldDirty: true,
+                  });
+                }
+              }}
            ></QueryVariable>
            <Button
              variant={'ghost'}
--- a/web/src/pages/agent/form/variable-aggregator-form/index.tsx
+++ b/web/src/pages/agent/form/variable-aggregator-form/index.tsx
@ -2,41 +2,27 @@ 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 { memo, useCallback } 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 useGraphStore from '../../store';
 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);
+import { FormSchema, VariableAggregatorFormSchemaType } from './schema';
+import { useWatchFormChange } from './use-watch-change';

 function VariableAggregatorForm({ node }: INextOperatorForm) {
  const { t } = useTranslation();
+  const getNode = useGraphStore((state) => state.getNode);

  const defaultValues = useFormValues(initialDataOperationsValues, node);

-  const form = useForm<DataOperationsFormSchemaType>({
+  const form = useForm<VariableAggregatorFormSchemaType>({
    defaultValues: defaultValues,
    mode: 'onChange',
    resolver: zodResolver(FormSchema),
@ -48,7 +34,15 @@ function VariableAggregatorForm({ node }: INextOperatorForm) {
    control: form.control,
  });

-  useWatchFormChange(node?.id, form, true);
+  const appendItem = useCallback(() => {
+    append({ group_name: `Group ${fields.length}`, variables: [] });
+  }, [append, fields.length]);
+
+  const outputList = buildOutputList(
+    getNode(node?.id)?.data.form.outputs ?? {},
+  );
+
+  useWatchFormChange(node?.id, form);

  return (
    <Form {...form}>
@ -63,16 +57,10 @@ function VariableAggregatorForm({ node }: INextOperatorForm) {
            ></DynamicGroupVariable>
          ))}
        </section>
-        <BlockButton
-          onClick={() =>
-            append({ group_name: `Group ${fields.length}`, variables: [] })
-          }
-        >
-          {t('common.add')}
-        </BlockButton>
+        <BlockButton onClick={appendItem}>{t('common.add')}</BlockButton>
        <Separator />

-        <Output list={outputList} isFormRequired></Output>
+        <Output list={outputList}></Output>
      </FormWrapper>
    </Form>
  );
--- a/web/src/pages/agent/form/variable-aggregator-form/name-input.tsx
+++ b/web/src/pages/agent/form/variable-aggregator-form/name-input.tsx
@ -0,0 +1,55 @@
+import { Input } from '@/components/ui/input';
+import { PenLine } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useHandleNameChange } from './use-handle-name-change';
+
+type NameInputProps = {
+  value: string;
+  onChange: (value: string) => void;
+};
+
+export function NameInput({ value, onChange }: NameInputProps) {
+  const { name, handleNameBlur, handleNameChange } = useHandleNameChange(value);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const [isEditingMode, setIsEditingMode] = useState(false);
+
+  const switchIsEditingMode = useCallback(() => {
+    setIsEditingMode((prev) => !prev);
+  }, []);
+
+  const handleBlur = useCallback(() => {
+    const nextName = handleNameBlur();
+    setIsEditingMode(false);
+    onChange(nextName);
+  }, [handleNameBlur, onChange]);
+
+  useEffect(() => {
+    if (isEditingMode && inputRef.current) {
+      requestAnimationFrame(() => {
+        inputRef.current?.focus();
+      });
+    }
+  }, [isEditingMode]);
+
+  return (
+    <div className="flex items-center gap-1 flex-1">
+      {isEditingMode ? (
+        <Input
+          ref={inputRef}
+          value={name}
+          onBlur={handleBlur}
+          onChange={handleNameChange}
+        ></Input>
+      ) : (
+        <div className="flex items-center justify-between gap-2 text-base w-full">
+          <span className="truncate flex-1">{name}</span>
+          <PenLine
+            onClick={switchIsEditingMode}
+            className="size-3.5 text-text-secondary cursor-pointer hidden group-hover:block"
+          />
+        </div>
+      )}
+    </div>
+  );
+}
--- a/web/src/pages/agent/form/variable-aggregator-form/schema.ts
+++ b/web/src/pages/agent/form/variable-aggregator-form/schema.ts
@ -0,0 +1,15 @@
+import { z } from 'zod';
+
+export const VariableAggregatorSchema = {
+  groups: z.array(
+    z.object({
+      group_name: z.string(),
+      variables: z.array(z.object({ value: z.string().optional() })),
+      type: z.string().optional(),
+    }),
+  ),
+};
+
+export const FormSchema = z.object(VariableAggregatorSchema);
+
+export type VariableAggregatorFormSchemaType = z.infer<typeof FormSchema>;
--- a/web/src/pages/agent/form/variable-aggregator-form/use-handle-name-change.ts
+++ b/web/src/pages/agent/form/variable-aggregator-form/use-handle-name-change.ts
@ -0,0 +1,37 @@
+import message from '@/components/ui/message';
+import { trim } from 'lodash';
+import { ChangeEvent, useCallback, useEffect, useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { VariableAggregatorFormSchemaType } from './schema';
+
+export const useHandleNameChange = (previousName: string) => {
+  const [name, setName] = useState<string>('');
+  const form = useFormContext<VariableAggregatorFormSchemaType>();
+
+  const handleNameBlur = useCallback(() => {
+    const names = form.getValues('groups');
+    const existsSameName = names.some((x) => x.group_name === name);
+    if (trim(name) === '' || existsSameName) {
+      if (existsSameName && previousName !== name) {
+        message.error('The name cannot be repeated');
+      }
+      setName(previousName);
+      return previousName;
+    }
+    return name;
+  }, [form, name, previousName]);
+
+  const handleNameChange = useCallback((e: ChangeEvent<any>) => {
+    setName(e.target.value);
+  }, []);
+
+  useEffect(() => {
+    setName(previousName);
+  }, [previousName]);
+
+  return {
+    name,
+    handleNameBlur,
+    handleNameChange,
+  };
+};
--- a/web/src/pages/agent/form/variable-aggregator-form/use-watch-change.ts
+++ b/web/src/pages/agent/form/variable-aggregator-form/use-watch-change.ts
@ -0,0 +1,31 @@
+import { useEffect } from 'react';
+import { UseFormReturn, useWatch } from 'react-hook-form';
+import useGraphStore from '../../store';
+import { VariableAggregatorFormSchemaType } from './schema';
+
+export function useWatchFormChange(
+  id?: string,
+  form?: UseFormReturn<VariableAggregatorFormSchemaType>,
+) {
+  let values = useWatch({ control: form?.control });
+  const { replaceNodeForm } = useGraphStore((state) => state);
+
+  useEffect(() => {
+    if (id && form?.formState.isDirty) {
+      const outputs = values.groups?.reduce(
+        (pre, cur) => {
+          if (cur.group_name) {
+            pre[cur.group_name] = {
+              type: cur.type,
+            };
+          }
+
+          return pre;
+        },
+        {} as Record<string, Record<string, any>>,
+      );
+
+      replaceNodeForm(id, { ...values, outputs: outputs ?? {} });
+    }
+  }, [form?.formState.isDirty, id, replaceNodeForm, values]);
+}