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)

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

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

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

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

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

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