Fix: UI adjustments, replacing private components with public components (#11438)

### What problem does this PR solve?

Fix: UI adjustments, replacing private components with public components

- UI adjustments for public components (input, multiselect,
SliderInputFormField)

- Replacing the private LlmSettingFieldItems component in search with
the public LlmSettingFieldItems component


### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

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

@@ -1,6 +1,9 @@
-import { ModelVariableType } from '@/constants/knowledge';
+import {
+  ModelVariableType,
+  settledModelVariableMap,
+} from '@/constants/knowledge';
 import { useTranslate } from '@/hooks/common-hooks';
-import { camelCase } from 'lodash';
+import { camelCase, isEqual } from 'lodash';
 import { useCallback } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { z } from 'zod';
@@ -25,6 +28,13 @@ import { useHandleFreedomChange } from './use-watch-change';
 interface LlmSettingFieldItemsProps {
   prefix?: string;
   options?: any[];
+  showFields?: Array<
+    | 'temperature'
+    | 'top_p'
+    | 'presence_penalty'
+    | 'frequency_penalty'
+    | 'max_tokens'
+  >;
 }
 
 export const LLMIdFormField = {
@@ -56,6 +66,13 @@ export const LlmSettingSchema = {
 export function LlmSettingFieldItems({
   prefix,
   options,
+  showFields = [
+    'temperature',
+    'top_p',
+    'presence_penalty',
+    'frequency_penalty',
+    'max_tokens',
+  ],
 }: LlmSettingFieldItemsProps) {
   const form = useFormContext();
   const { t } = useTranslate('chat');
@@ -72,14 +89,53 @@ export function LlmSettingFieldItems({
   const parameterOptions = Object.values(ModelVariableType).map((x) => ({
     label: t(camelCase(x)),
     value: x,
-  }));
+  })) as { label: string; value: ModelVariableType | 'Custom' }[];
+
+  parameterOptions.push({
+    label: t(camelCase('Custom')),
+    value: 'Custom',
+  });
+  const checkParameterIsEqual = () => {
+    const [
+      parameter,
+      topPValue,
+      frequencyPenaltyValue,
+      temperatureValue,
+      presencePenaltyValue,
+      maxTokensValue,
+    ] = form.getValues([
+      getFieldWithPrefix('parameter'),
+      getFieldWithPrefix('temperature'),
+      getFieldWithPrefix('top_p'),
+      getFieldWithPrefix('frequency_penalty'),
+      getFieldWithPrefix('presence_penalty'),
+      getFieldWithPrefix('max_tokens'),
+    ]);
+    if (parameter && parameter !== 'Custom') {
+      const parameterValue =
+        settledModelVariableMap[parameter as keyof typeof ModelVariableType];
+      const parameterRealValue = {
+        top_p: topPValue,
+        temperature: temperatureValue,
+        frequency_penalty: frequencyPenaltyValue,
+        presence_penalty: presencePenaltyValue,
+        max_tokens: maxTokensValue,
+      };
+      if (!isEqual(parameterValue, parameterRealValue)) {
+        form.setValue(getFieldWithPrefix('parameter'), 'Custom');
+      }
+    }
+  };
 
   return (
     <div className="space-y-5">
-      <LLMFormField options={options}></LLMFormField>
+      <LLMFormField
+        options={options}
+        name={getFieldWithPrefix('llm_id')}
+      ></LLMFormField>
       <FormField
         control={form.control}
-        name={'parameter'}
+        name={getFieldWithPrefix('parameter')}
         render={({ field }) => (
           <FormItem className="flex justify-between items-center">
             <FormLabel className="flex-1">{t('freedom')}</FormLabel>
@@ -107,45 +163,71 @@ export function LlmSettingFieldItems({
           </FormItem>
         )}
       />
-      <SliderInputSwitchFormField
-        name={getFieldWithPrefix('temperature')}
-        checkName="temperatureEnabled"
-        label="temperature"
-        max={1}
-        step={0.01}
-        min={0}
-      ></SliderInputSwitchFormField>
-      <SliderInputSwitchFormField
-        name={getFieldWithPrefix('top_p')}
-        checkName="topPEnabled"
-        label="topP"
-        max={1}
-        step={0.01}
-        min={0}
-      ></SliderInputSwitchFormField>
-      <SliderInputSwitchFormField
-        name={getFieldWithPrefix('presence_penalty')}
-        checkName="presencePenaltyEnabled"
-        label="presencePenalty"
-        max={1}
-        step={0.01}
-        min={0}
-      ></SliderInputSwitchFormField>
-      <SliderInputSwitchFormField
-        name={getFieldWithPrefix('frequency_penalty')}
-        checkName="frequencyPenaltyEnabled"
-        label="frequencyPenalty"
-        max={1}
-        step={0.01}
-        min={0}
-      ></SliderInputSwitchFormField>
-      <SliderInputSwitchFormField
-        name={getFieldWithPrefix('max_tokens')}
-        checkName="maxTokensEnabled"
-        label="maxTokens"
-        max={128000}
-        min={0}
-      ></SliderInputSwitchFormField>
+      {showFields.some((item) => item === 'temperature') && (
+        <SliderInputSwitchFormField
+          name={getFieldWithPrefix('temperature')}
+          checkName="temperatureEnabled"
+          label="temperature"
+          max={1}
+          step={0.01}
+          min={0}
+          onChange={() => {
+            checkParameterIsEqual();
+          }}
+        ></SliderInputSwitchFormField>
+      )}
+      {showFields.some((item) => item === 'top_p') && (
+        <SliderInputSwitchFormField
+          name={getFieldWithPrefix('top_p')}
+          checkName="topPEnabled"
+          label="topP"
+          max={1}
+          step={0.01}
+          min={0}
+          onChange={() => {
+            checkParameterIsEqual();
+          }}
+        ></SliderInputSwitchFormField>
+      )}
+      {showFields.some((item) => item === 'presence_penalty') && (
+        <SliderInputSwitchFormField
+          name={getFieldWithPrefix('presence_penalty')}
+          checkName="presencePenaltyEnabled"
+          label="presencePenalty"
+          max={1}
+          step={0.01}
+          min={0}
+          onChange={() => {
+            checkParameterIsEqual();
+          }}
+        ></SliderInputSwitchFormField>
+      )}
+      {showFields.some((item) => item === 'frequency_penalty') && (
+        <SliderInputSwitchFormField
+          name={getFieldWithPrefix('frequency_penalty')}
+          checkName="frequencyPenaltyEnabled"
+          label="frequencyPenalty"
+          max={1}
+          step={0.01}
+          min={0}
+          onChange={() => {
+            checkParameterIsEqual();
+          }}
+        ></SliderInputSwitchFormField>
+      )}
+      {showFields.some((item) => item === 'max_tokens') && (
+        <SliderInputSwitchFormField
+          name={getFieldWithPrefix('max_tokens')}
+          checkName="maxTokensEnabled"
+          numberInputClassName="w-20"
+          label="maxTokens"
+          max={128000}
+          min={0}
+          onChange={() => {
+            checkParameterIsEqual();
+          }}
+        ></SliderInputSwitchFormField>
+      )}
     </div>
   );
 }