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;

web/src/components/rerank.tsx

@@ -5,6 +5,7 @@ import { Select as AntSelect, Form, message, Slider } from 'antd';
 import { useCallback } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { z } from 'zod';
+import { SelectWithSearch } from './originui/select-with-search';
 import { SliderInputFormField } from './slider-input-form-field';
 import {
   FormControl,
@@ -13,7 +14,6 @@ import {
   FormLabel,
   FormMessage,
 } from './ui/form';
-import { RAGFlowSelect } from './ui/select';
 
 type FieldType = {
   rerank_id?: string;
@@ -109,11 +109,11 @@ function RerankFormField() {
         <FormItem>
           <FormLabel tooltip={t('rerankTip')}>{t('rerankModel')}</FormLabel>
           <FormControl>
-            <RAGFlowSelect
+            <SelectWithSearch
               allowClear
               {...field}
               options={options}
-            ></RAGFlowSelect>
+            ></SelectWithSearch>
           </FormControl>
           <FormMessage />
         </FormItem>
@@ -122,6 +122,11 @@ function RerankFormField() {
   );
 }
 
+export const rerankFormSchema = {
+  [RerankId]: z.string().optional(),
+  top_k: z.coerce.number().optional(),
+};
+
 export function RerankFormFields() {
   const { watch } = useFormContext();
   const { t } = useTranslate('knowledgeDetails');

web/src/components/similarity-slider/index.tsx

@@ -61,11 +61,20 @@ export const keywordsSimilarityWeightSchema = {
   keywords_similarity_weight: z.number(),
 };
 
+export const vectorSimilarityWeightSchema = {
+  vector_similarity_weight: z.number(),
+};
+
+export const initialVectorSimilarityWeightValue = {
+  vector_similarity_weight: 0.3,
+};
+
 export function SimilaritySliderFormField({
   vectorSimilarityWeightName = 'vector_similarity_weight',
   isTooltipShown,
 }: SimilaritySliderFormFieldProps) {
   const { t } = useTranslate('knowledgeDetails');
+  const isVector = vectorSimilarityWeightName === 'vector_similarity_weight';
 
   return (
     <>
@@ -78,10 +87,19 @@ export function SimilaritySliderFormField({
       ></SliderInputFormField>
       <SliderInputFormField
         name={vectorSimilarityWeightName}
-        label={t('vectorSimilarityWeight')}
+        label={t(
+          isVector ? 'vectorSimilarityWeight' : 'keywordSimilarityWeight',
+        )}
         max={1}
         step={0.01}
-        tooltip={isTooltipShown && t('vectorSimilarityWeightTip')}
+        tooltip={
+          isTooltipShown &&
+          t(
+            isVector
+              ? 'vectorSimilarityWeightTip'
+              : 'keywordSimilarityWeightTip',
+          )
+        }
       ></SliderInputFormField>
     </>
   );

web/src/components/slider-input-form-field.tsx

@@ -10,7 +10,7 @@ import {
   FormLabel,
   FormMessage,
 } from './ui/form';
-import { Input } from './ui/input';
+import { NumberInput } from './ui/input';
 
 export type FormLayoutType = {
   layout?: FormLayout;
@@ -79,19 +79,14 @@ export function SliderInputFormField({
               ></SingleFormSlider>
             </FormControl>
             <FormControl>
-              <Input
-                type={'number'}
+              <NumberInput
                 className="h-7 w-20"
                 max={max}
                 min={min}
                 step={step}
                 {...field}
-                onChange={(ev) => {
-                  const value = ev.target.value;
-                  field.onChange(value === '' ? 0 : Number(value)); // convert to number
-                }}
                 // defaultValue={defaultValue}
-              ></Input>
+              ></NumberInput>
             </FormControl>
           </div>
           <FormMessage />

web/src/components/top-n-item.tsx

@@ -1,5 +1,6 @@
 import { useTranslate } from '@/hooks/common-hooks';
 import { Form, Slider } from 'antd';
+import { z } from 'zod';
 import { SliderInputFormField } from './slider-input-form-field';
 
 type FieldType = {
@@ -32,6 +33,10 @@ interface SimilaritySliderFormFieldProps {
   max?: number;
 }
 
+export const topnSchema = {
+  top_n: z.number().optional(),
+};
+
 export function TopNFormField({ max = 30 }: SimilaritySliderFormFieldProps) {
   const { t } = useTranslate('chat');