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/components/llm-setting-items/next.tsx

@@ -22,6 +22,7 @@ import {
   SelectValue,
 } from '../ui/select';
 import { SliderInputSwitchFormField } from './slider';
+import { useHandleFreedomChange } from './use-watch-change';
 
 interface LlmSettingFieldItemsProps {
   prefix?: string;
@@ -33,6 +34,11 @@ export const LlmSettingSchema = {
   top_p: z.string(),
   presence_penalty: z.coerce.number(),
   frequency_penalty: z.coerce.number(),
+  temperatureEnabled: z.boolean(),
+  topPEnabled: z.boolean(),
+  presencePenaltyEnabled: z.boolean(),
+  frequencyPenaltyEnabled: z.boolean(),
+  maxTokensEnabled: z.boolean(),
 };
 
 export function LlmSettingFieldItems({ prefix }: LlmSettingFieldItemsProps) {
@@ -43,6 +49,10 @@ export function LlmSettingFieldItems({ prefix }: LlmSettingFieldItemsProps) {
     LlmModelType.Image2text,
   ]);
 
+  // useWatchFreedomChange();
+
+  const handleChange = useHandleFreedomChange();
+
   const parameterOptions = Object.values(ModelVariableType).map((x) => ({
     label: t(camelCase(x)),
     value: x,
@@ -50,7 +60,7 @@ export function LlmSettingFieldItems({ prefix }: LlmSettingFieldItemsProps) {
 
   const getFieldWithPrefix = useCallback(
     (name: string) => {
-      return `${prefix}.${name}`;
+      return prefix ? `${prefix}.${name}` : name;
     },
     [prefix],
   );
@@ -97,7 +107,13 @@ export function LlmSettingFieldItems({ prefix }: LlmSettingFieldItemsProps) {
           <FormItem>
             <FormLabel>{t('freedom')}</FormLabel>
             <FormControl>
-              <Select {...field} onValueChange={field.onChange}>
+              <Select
+                {...field}
+                onValueChange={(val) => {
+                  handleChange(val);
+                  field.onChange(val);
+                }}
+              >
                 <SelectTrigger>
                   <SelectValue />
                 </SelectTrigger>

web/src/components/llm-setting-items/use-watch-change.ts

@@ -0,0 +1,42 @@
+import { settledModelVariableMap } from '@/constants/knowledge';
+import { FlowFormContext } from '@/pages/agent/context';
+import useGraphStore from '@/pages/agent/store';
+import { useCallback, useContext } from 'react';
+import { useFormContext } from 'react-hook-form';
+
+export function useHandleFreedomChange() {
+  const form = useFormContext();
+  const node = useContext(FlowFormContext);
+  const updateNodeForm = useGraphStore((state) => state.updateNodeForm);
+
+  const handleChange = useCallback(
+    (parameter: string) => {
+      const currentValues = { ...form.getValues() };
+      const values =
+        settledModelVariableMap[
+          parameter as keyof typeof settledModelVariableMap
+        ];
+
+      const nextValues = { ...currentValues, ...values };
+
+      if (node?.id) {
+        updateNodeForm(node?.id, nextValues);
+      }
+
+      console.info('xx:', node);
+
+      // form.reset({ ...currentValues, ...values });
+
+      // for (const key in values) {
+      //   if (Object.prototype.hasOwnProperty.call(values, key)) {
+      //     const element = values[key];
+
+      //     form.setValue(key, element);
+      //   }
+      // }
+    },
+    [form, node, updateNodeForm],
+  );
+
+  return handleChange;
+}

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