Feat:: Use useWatch to synchronize the form data to canvas zustand #3221 (#7926)

### What problem does this PR solve?

Feat:: Use useWatch to synchronize the form data to canvas zustand #3221

### Type of change


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

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

@@ -2,7 +2,7 @@ import { CodeTemplateStrMap, ProgrammingLanguage } from '@/constants/agent';
 import { settledModelVariableMap } from '@/constants/knowledge';
 import { omit } from 'lodash';
 import { useCallback, useEffect } from 'react';
-import { UseFormReturn } from 'react-hook-form';
+import { UseFormReturn, useWatch } from 'react-hook-form';
 import { Operator } from '../constant';
 import useGraphStore from '../store';
 import { buildCategorizeObjectFromList, convertToStringArray } from '../utils';
@@ -37,16 +37,24 @@ export const useHandleFormValuesChange = (
     [updateNodeForm, id],
   );
 
+  const value = useWatch({ control: form?.control });
+
+  console.log('🚀 ~ x:', value);
+
+  useEffect(() => {
+    // Manually triggered form updates are synchronized to the canvas
+    if (id && form?.formState.isDirty) {
+      console.log('🚀 ~ useEffect ~ value:', value, operatorName);
+      // run(id, nextValues);
+      updateNodeForm(id, value);
+    }
+  }, [form?.formState.isDirty, id, operatorName, updateNodeForm, value]);
+
+  return { handleValuesChange };
+
   useEffect(() => {
     const subscription = form?.watch((value, { name, type, values }) => {
       if (id && name) {
-        console.log(
-          '🚀 ~ useEffect ~ value:',
-          name,
-          type,
-          values,
-          operatorName,
-        );
         let nextValues: any = value;
 
         // Fixed the issue that the related form value does not change after selecting the freedom field of the model
@@ -93,6 +101,13 @@ export const useHandleFormValuesChange = (
 
         // Manually triggered form updates are synchronized to the canvas
         if (form.formState.isDirty) {
+          console.log(
+            '🚀 ~ useEffect ~ value:',
+            name,
+            type,
+            values,
+            operatorName,
+          );
           // run(id, nextValues);
           updateNodeForm(id, nextValues);
         }