Feat: Upgrade react-hook-form to the latest version to solve the problem that appending a useFieldArray entry cannot trigger the watch callback function #3221 (#7849)

### What problem does this PR solve?

Feat: Upgrade react-hook-form to the latest version to solve the problem
that appending a useFieldArray entry cannot trigger the watch callback
function #3221

[issue: watch is not called when appending first item to Field Array
#12370](https://github.com/react-hook-form/react-hook-form/issues/12370)

### Type of change


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

web/package-lock.json

@@ -72,7 +72,7 @@
         "react-copy-to-clipboard": "^5.1.0",
         "react-dropzone": "^14.3.5",
         "react-error-boundary": "^4.0.13",
-        "react-hook-form": "^7.53.1",
+        "react-hook-form": "^7.56.4",
         "react-i18next": "^14.0.0",
         "react-infinite-scroll-component": "^6.1.0",
         "react-markdown": "^9.0.1",
@@ -27245,9 +27245,10 @@
       }
     },
     "node_modules/react-hook-form": {
-      "version": "7.53.1",
-      "resolved": "https://registry.npmmirror.com/react-hook-form/-/react-hook-form-7.53.1.tgz",
-      "integrity": "sha512-6aiQeBda4zjcuaugWvim9WsGqisoUk+etmFEsSUMm451/Ic8L/UAb7sRtMj3V+Hdzm6mMjU1VhiSzYUZeBm0Vg==",
+      "version": "7.56.4",
+      "resolved": "https://registry.npmmirror.com/react-hook-form/-/react-hook-form-7.56.4.tgz",
+      "integrity": "sha512-Rob7Ftz2vyZ/ZGsQZPaRdIefkgOSrQSPXfqBdvOPwJfoGnjwRJUs7EM7Kc1mcoDv3NOtqBzPGbcMB8CGn9CKgw==",
+      "license": "MIT",
       "engines": {
         "node": ">=18.0.0"
       },

web/package.json

@@ -83,7 +83,7 @@
     "react-copy-to-clipboard": "^5.1.0",
     "react-dropzone": "^14.3.5",
     "react-error-boundary": "^4.0.13",
-    "react-hook-form": "^7.53.1",
+    "react-hook-form": "^7.56.4",
     "react-i18next": "^14.0.0",
     "react-infinite-scroll-component": "^6.1.0",
     "react-markdown": "^9.0.1",

web/src/pages/agent/form-sheet/use-form-config-map.tsx

@@ -126,9 +126,17 @@ export function useFormConfigMap() {
     },
     [Operator.Message]: {
       component: MessageForm,
-      defaultValues: {},
+      defaultValues: {
+        content: [],
+      },
       schema: z.object({
-        content: z.array(z.string()).optional(),
+        content: z
+          .array(
+            z.object({
+              value: z.string(),
+            }),
+          )
+          .optional(),
       }),
     },
     [Operator.Relevant]: {

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

@@ -43,6 +43,7 @@ const MessageForm = ({ form }: INextOperatorForm) => {
                     render={({ field }) => (
                       <FormItem className="flex-1">
                         <FormControl>
+                          {/* <Input {...field}></Input> */}
                           <PromptEditor
                             {...field}
                             placeholder={t('flow.messagePlaceholder')}

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

@@ -40,6 +40,7 @@ export const useHandleFormValuesChange = (
   useEffect(() => {
     const subscription = form?.watch((value, { name, type, values }) => {
       console.log('🚀 ~ subscription ~ value:', value);
+
       if (id && name) {
         console.log(
           '🚀 ~ useEffect ~ value:',
@@ -84,8 +85,12 @@ export const useHandleFormValuesChange = (
             script: CodeTemplateStrMap[value.lang as ProgrammingLanguage],
           };
         }
+
+        if (operatorName === Operator.Message) {
+        }
+
         // Manually triggered form updates are synchronized to the canvas
-        if (type) {
+        if (form.formState.isDirty) {
           // run(id, nextValues);
           updateNodeForm(id, nextValues);
         }