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/canvas/node/begin-node.tsx

@@ -4,6 +4,7 @@ import { Handle, NodeProps, Position } from '@xyflow/react';
 import { Flex } from 'antd';
 import classNames from 'classnames';
 import get from 'lodash/get';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   BeginQueryType,
@@ -17,7 +18,7 @@ import { RightHandleStyle } from './handle-icon';
 import styles from './index.less';
 
 // TODO: do not allow other nodes to connect to this node
-export function BeginNode({ selected, data }: NodeProps<IBeginNode>) {
+function Node({ selected, data }: NodeProps<IBeginNode>) {
   const { t } = useTranslation();
   const query: BeginQuery[] = get(data, 'form.query', []);
   const { theme } = useTheme();
@@ -70,3 +71,5 @@ export function BeginNode({ selected, data }: NodeProps<IBeginNode>) {
     </section>
   );
 }
+
+export const BeginNode = memo(Node);

web/src/pages/agent/constant.tsx

@@ -38,6 +38,7 @@ import {
   ChatVariableEnabledField,
   variableEnabledFieldMap,
 } from '@/constants/chat';
+import { ModelVariableType } from '@/constants/knowledge';
 import i18n from '@/locales/config';
 import { setInitialChatVariableEnabledFieldValue } from '@/utils/chat';
 
@@ -477,6 +478,7 @@ export const initialRelevantValues = {
 
 export const initialCategorizeValues = {
   ...initialLlmBaseValues,
+  parameter: ModelVariableType.Precise,
   message_history_window_size: 1,
   category_description: {},
   ...initialQueryBaseValues,

web/src/pages/agent/form-sheet/next.tsx

@@ -74,7 +74,7 @@ const FormSheet = ({
   );
 
   useEffect(() => {
-    if (visible && !form.formState.isDirty) {
+    if (visible) {
       if (node?.id !== previousId.current) {
         form.reset();
         form.clearErrors();

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

@@ -1,5 +1,6 @@
 import { LlmSettingSchema } from '@/components/llm-setting-items/next';
 import { CodeTemplateStrMap, ProgrammingLanguage } from '@/constants/agent';
+import { ModelVariableType } from '@/constants/knowledge';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
 import { AgentDialogueMode, Operator } from '../constant';
@@ -115,8 +116,17 @@ export function useFormConfigMap() {
     },
     [Operator.Categorize]: {
       component: CategorizeForm,
-      defaultValues: { message_history_window_size: 1 },
+      defaultValues: {
+        parameter: ModelVariableType.Precise,
+        message_history_window_size: 1,
+        temperatureEnabled: true,
+        topPEnabled: true,
+        presencePenaltyEnabled: true,
+        frequencyPenaltyEnabled: true,
+        maxTokensEnabled: true,
+      },
       schema: z.object({
+        parameter: z.string().optional(),
         ...LlmSettingSchema,
         message_history_window_size: z.number(),
         items: z.array(

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