Feat: Synchronize variable data to the outputs field

web/src/pages/agent/form/loop-form/index.tsx

@@ -4,45 +4,24 @@ import { FormLayout } from '@/constants/form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { memo } from 'react';
 import { useForm } from 'react-hook-form';
-import { z } from 'zod';
 import { initialLoopValues } from '../../constant';
-import { useFormValues } from '../../hooks/use-form-values';
-import { useWatchFormChange } from '../../hooks/use-watch-form-change';
 import { INextOperatorForm } from '../../interface';
 import { FormWrapper } from '../components/form-wrapper';
 import { DynamicVariables } from './dynamic-variables';
 import { LoopTerminationCondition } from './loop-termination-condition';
-
-const FormSchema = z.object({
-  loop_variables: z.array(
-    z.object({
-      variable: z.string().optional(),
-      type: z.string().optional(),
-      value: z.string().or(z.number()).or(z.boolean()).optional(),
-      input_mode: z.string(),
-    }),
-  ),
-  logical_operator: z.string(),
-  loop_termination_condition: z.array(
-    z.object({
-      variable: z.string().optional(),
-      operator: z.string().optional(),
-      value: z.string().or(z.number()).or(z.boolean()).optional(),
-      input_mode: z.string().optional(),
-    }),
-  ),
-  maximum_loop_count: z.number(),
-});
+import { FormSchema, LoopFormSchemaType } from './schema';
+import { useFormValues } from './use-values';
+import { useWatchFormChange } from './use-watch-form-change';
 
 function LoopForm({ node }: INextOperatorForm) {
   const defaultValues = useFormValues(initialLoopValues, node);
 
-  const form = useForm({
+  const form = useForm<LoopFormSchemaType>({
     defaultValues: defaultValues,
     resolver: zodResolver(FormSchema),
   });
 
-  useWatchFormChange(node?.id, form, true);
+  useWatchFormChange(node?.id, form);
 
   return (
     <Form {...form}>

web/src/pages/agent/form/loop-form/schema.ts

@@ -0,0 +1,24 @@
+import { z } from 'zod';
+
+export const FormSchema = z.object({
+  loop_variables: z.array(
+    z.object({
+      variable: z.string().optional(),
+      type: z.string().optional(),
+      value: z.string().or(z.number()).or(z.boolean()).optional(),
+      input_mode: z.string(),
+    }),
+  ),
+  logical_operator: z.string(),
+  loop_termination_condition: z.array(
+    z.object({
+      variable: z.string().optional(),
+      operator: z.string().optional(),
+      value: z.string().or(z.number()).or(z.boolean()).optional(),
+      input_mode: z.string().optional(),
+    }),
+  ),
+  maximum_loop_count: z.number(),
+});
+
+export type LoopFormSchemaType = z.infer<typeof FormSchema>;

web/src/pages/agent/form/loop-form/use-values.ts

@@ -0,0 +1,20 @@
+import { RAGFlowNodeType } from '@/interfaces/database/flow';
+import { isEmpty, omit } from 'lodash';
+import { useMemo } from 'react';
+
+export function useFormValues(
+  defaultValues: Record<string, any>,
+  node?: RAGFlowNodeType,
+) {
+  const values = useMemo(() => {
+    const formData = node?.data?.form;
+
+    if (isEmpty(formData)) {
+      return omit(defaultValues, 'outputs');
+    }
+
+    return omit(formData, 'outputs');
+  }, [defaultValues, node?.data?.form]);
+
+  return values;
+}

web/src/pages/agent/form/loop-form/use-watch-form-change.ts

@@ -0,0 +1,33 @@
+import { useEffect } from 'react';
+import { UseFormReturn, useWatch } from 'react-hook-form';
+import { IOutputs } from '../../interface';
+import useGraphStore from '../../store';
+import { LoopFormSchemaType } from './schema';
+
+export function useWatchFormChange(
+  id?: string,
+  form?: UseFormReturn<LoopFormSchemaType>,
+) {
+  let values = useWatch({ control: form?.control });
+  const { replaceNodeForm } = useGraphStore((state) => state);
+
+  useEffect(() => {
+    if (id) {
+      let nextValues = {
+        ...values,
+        outputs: values.loop_variables?.reduce((pre, cur) => {
+          const variable = cur.variable;
+          if (variable) {
+            pre[variable] = {
+              type: 'string',
+              value: '',
+            };
+          }
+          return pre;
+        }, {} as IOutputs),
+      };
+
+      replaceNodeForm(id, nextValues);
+    }
+  }, [form?.formState.isDirty, id, replaceNodeForm, values]);
+}

web/src/pages/agent/interface.ts

@@ -41,3 +41,11 @@ export type IInputs = {
   prologue: string;
   mode: string;
 };
+
+export type IOutputs = Record<
+  string,
+  {
+    type?: string;
+    value?: string;
+  }
+>;