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/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);
         }