Feat: Fixed the issue where some fields in the chat configuration could not be displayed #3221 (#9430)

### What problem does this PR solve?

Feat: Fixed the issue where some fields in the chat configuration could
not be displayed #3221
### Type of change


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

web/src/components/llm-setting-items/next.tsx

@@ -30,15 +30,16 @@ interface LlmSettingFieldItemsProps {
 
 export const LlmSettingSchema = {
   llm_id: z.string(),
-  temperature: z.coerce.number(),
-  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(),
+  temperature: z.coerce.number().optional(),
+  top_p: z.number().optional(),
+  presence_penalty: z.coerce.number().optional(),
+  frequency_penalty: z.coerce.number().optional(),
+  temperatureEnabled: z.boolean().optional(),
+  topPEnabled: z.boolean().optional(),
+  presencePenaltyEnabled: z.boolean().optional(),
+  frequencyPenaltyEnabled: z.boolean().optional(),
+  maxTokensEnabled: z.boolean().optional(),
+  max_tokens: z.number().optional(),
 };
 
 export function LlmSettingFieldItems({
@@ -53,13 +54,6 @@ export function LlmSettingFieldItems({
     LlmModelType.Image2text,
   ]);
 
-  const handleChange = useHandleFreedomChange();
-
-  const parameterOptions = Object.values(ModelVariableType).map((x) => ({
-    label: t(camelCase(x)),
-    value: x,
-  }));
-
   const getFieldWithPrefix = useCallback(
     (name: string) => {
       return prefix ? `${prefix}.${name}` : name;
@@ -67,6 +61,13 @@ export function LlmSettingFieldItems({
     [prefix],
   );
 
+  const handleChange = useHandleFreedomChange(getFieldWithPrefix);
+
+  const parameterOptions = Object.values(ModelVariableType).map((x) => ({
+    label: t(camelCase(x)),
+    value: x,
+  }));
+
   return (
     <div className="space-y-5">
       <FormField
@@ -77,6 +78,7 @@ export function LlmSettingFieldItems({
             <FormLabel>{t('model')}</FormLabel>
             <FormControl>
               <SelectWithSearch
+                allowClear
                 options={options || modelOptions}
                 {...field}
               ></SelectWithSearch>

web/src/components/llm-setting-items/slider.tsx

@@ -9,7 +9,7 @@ import {
   FormLabel,
   FormMessage,
 } from '../ui/form';
-import { Input } from '../ui/input';
+import { NumberInput } from '../ui/input';
 import { Switch } from '../ui/switch';
 
 type SliderInputSwitchFormFieldProps = {
@@ -73,15 +73,14 @@ export function SliderInputSwitchFormField({
               ></SingleFormSlider>
             </FormControl>
             <FormControl>
-              <Input
+              <NumberInput
                 disabled={disabled}
-                type={'number'}
                 className="h-7 w-20"
                 max={max}
                 min={min}
                 step={step}
                 {...field}
-              ></Input>
+              ></NumberInput>
             </FormControl>
           </div>
           <FormMessage />

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

@@ -4,7 +4,9 @@ import useGraphStore from '@/pages/agent/store';
 import { useCallback, useContext } from 'react';
 import { useFormContext } from 'react-hook-form';
 
-export function useHandleFreedomChange() {
+export function useHandleFreedomChange(
+  getFieldWithPrefix: (name: string) => string,
+) {
   const form = useFormContext();
   const node = useContext(AgentFormContext);
   const updateNodeForm = useGraphStore((state) => state.updateNodeForm);
@@ -25,13 +27,14 @@ export function useHandleFreedomChange() {
 
       for (const key in values) {
         if (Object.prototype.hasOwnProperty.call(values, key)) {
-          const element = values[key];
+          const realKey = getFieldWithPrefix(key);
+          const element = values[key as keyof typeof values];
 
-          form.setValue(key, element);
+          form.setValue(realKey, element);
         }
       }
     },
-    [form, node, updateNodeForm],
+    [form, getFieldWithPrefix, node?.id, updateNodeForm],
   );
 
   return handleChange;