Feat: Use one-way data flow to synchronize the form data to the canvas #3221 (#7977)

### What problem does this PR solve?

Feat: Use one-way data flow to synchronize the form data to the canvas
#3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

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

@@ -1,4 +1,5 @@
 import { LargeModelFormField } from '@/components/large-model-form-field';
+import { LlmSettingSchema } from '@/components/llm-setting-items/next';
 import { MessageHistoryWindowSizeFormField } from '@/components/message-history-window-size-item';
 import { SelectWithSearch } from '@/components/originui/select-with-search';
 import {
@@ -9,13 +10,48 @@ import {
   FormLabel,
   FormMessage,
 } from '@/components/ui/form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
 import { INextOperatorForm } from '../../interface';
 import DynamicCategorize from './dynamic-categorize';
+import { useValues } from './use-values';
+import { useWatchFormChange } from './use-watch-change';
 
-const CategorizeForm = ({ form, node }: INextOperatorForm) => {
+const CategorizeForm = ({ node }: INextOperatorForm) => {
   const { t } = useTranslation();
 
+  const values = useValues(node);
+
+  const FormSchema = z.object({
+    parameter: z.string().optional(),
+    ...LlmSettingSchema,
+    message_history_window_size: z.coerce.number(),
+    items: z.array(
+      z
+        .object({
+          name: z.string().min(1, t('flow.nameMessage')).trim(),
+          description: z.string().optional(),
+          // examples: z
+          //   .array(
+          //     z.object({
+          //       value: z.string(),
+          //     }),
+          //   )
+          //   .optional(),
+        })
+        .optional(),
+    ),
+  });
+
+  const form = useForm({
+    defaultValues: values,
+    resolver: zodResolver(FormSchema),
+  });
+
+  useWatchFormChange(node?.id, form);
+
   return (
     <Form {...form}>
       <form

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

@@ -0,0 +1,38 @@
+import { ModelVariableType } from '@/constants/knowledge';
+import { RAGFlowNodeType } from '@/interfaces/database/flow';
+import { get, isEmpty, isPlainObject, omit } from 'lodash';
+import { useMemo } from 'react';
+import { buildCategorizeListFromObject } from '../../utils';
+
+const defaultValues = {
+  parameter: ModelVariableType.Precise,
+  message_history_window_size: 1,
+  temperatureEnabled: true,
+  topPEnabled: true,
+  presencePenaltyEnabled: true,
+  frequencyPenaltyEnabled: true,
+  maxTokensEnabled: true,
+  items: [],
+};
+
+export function useValues(node?: RAGFlowNodeType) {
+  const values = useMemo(() => {
+    const formData = node?.data?.form;
+    if (isEmpty(formData)) {
+      return defaultValues;
+    }
+    const items = buildCategorizeListFromObject(
+      get(node, 'data.form.category_description', {}),
+    );
+    if (isPlainObject(formData)) {
+      const nextValues = {
+        ...omit(formData, 'category_description'),
+        items,
+      };
+
+      return nextValues;
+    }
+  }, [node]);
+
+  return values;
+}

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

@@ -0,0 +1,30 @@
+import { omit } from 'lodash';
+import { useEffect } from 'react';
+import { UseFormReturn, useWatch } from 'react-hook-form';
+import useGraphStore from '../../store';
+import { buildCategorizeObjectFromList } from '../../utils';
+
+export function useWatchFormChange(id?: string, form?: UseFormReturn) {
+  let values = useWatch({ control: form?.control });
+  const updateNodeForm = useGraphStore((state) => state.updateNodeForm);
+
+  useEffect(() => {
+    // Manually triggered form updates are synchronized to the canvas
+    if (id && form?.formState.isDirty) {
+      values = form?.getValues();
+      let nextValues: any = values;
+
+      const categoryDescription = Array.isArray(values.items)
+        ? buildCategorizeObjectFromList(values.items)
+        : {};
+      if (categoryDescription) {
+        nextValues = {
+          ...omit(values, 'items'),
+          category_description: categoryDescription,
+        };
+      }
+
+      updateNodeForm(id, nextValues);
+    }
+  }, [form?.formState.isDirty, id, updateNodeForm, values]);
+}