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