Feat: Use react-hook-form to synchronize the data of the categorize form to the agent node. #3221 (#5665)

### What problem does this PR solve?

Feat: Use react-hook-form to synchronize the data of the categorize form
to the agent node. #3221

### Type of change

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

web/src/pages/agent/hooks.tsx

@@ -23,8 +23,9 @@ import {
 } from '@/interfaces/database/flow';
 import { message } from 'antd';
 import { humanId } from 'human-id';
-import { get, lowerFirst } from 'lodash';
+import { get, lowerFirst, omit } from 'lodash';
 import trim from 'lodash/trim';
+import { UseFormReturn } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { v4 as uuid } from 'uuid';
 import {
@@ -69,6 +70,7 @@ import {
 } from './constant';
 import useGraphStore, { RFState } from './store';
 import {
+  buildCategorizeObjectFromList,
   generateNodeNamesWithIncreasingIndex,
   generateSwitchHandleText,
   getNodeDragHandle,
@@ -258,7 +260,11 @@ export const useHandleDrop = () => {
   return { onDrop, onDragOver, setReactFlowInstance };
 };
 
-export const useHandleFormValuesChange = (id?: string) => {
+export const useHandleFormValuesChange = (
+  operatorName: Operator,
+  id?: string,
+  form?: UseFormReturn,
+) => {
   const updateNodeForm = useGraphStore((state) => state.updateNodeForm);
   const handleValuesChange = useCallback(
     (changedValues: any, values: any) => {
@@ -283,6 +289,41 @@ export const useHandleFormValuesChange = (id?: string) => {
     [updateNodeForm, id],
   );
 
+  useEffect(() => {
+    const subscription = form?.watch((value, { name, type, values }) => {
+      if (id && name) {
+        console.log('🚀 ~ useEffect ~ value:', type, values);
+        let nextValues: any = value;
+
+        // Fixed the issue that the related form value does not change after selecting the freedom field of the model
+        if (
+          name === 'parameter' &&
+          value['parameter'] in settledModelVariableMap
+        ) {
+          nextValues = {
+            ...value,
+            ...settledModelVariableMap[
+              value['parameter'] as keyof typeof settledModelVariableMap
+            ],
+          };
+        }
+
+        const categoryDescriptionRegex = /items\.\d+\.name/g;
+        if (
+          operatorName === Operator.Categorize &&
+          categoryDescriptionRegex.test(name)
+        ) {
+          nextValues = {
+            ...omit(value, 'items'),
+            category_description: buildCategorizeObjectFromList(value.items),
+          };
+        }
+        updateNodeForm(id, nextValues);
+      }
+    });
+    return () => subscription?.unsubscribe();
+  }, [form, form?.watch, id, operatorName, updateNodeForm]);
+
   return { handleValuesChange };
 };