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
+      {showFields.some((item) => item === 'temperature') && (
-        name={getFieldWithPrefix('temperature')}
+        <SliderInputSwitchFormField
-        checkName="temperatureEnabled"
+          name={getFieldWithPrefix('temperature')}
-        label="temperature"
+          checkName="temperatureEnabled"
-        max={1}
+          label="temperature"
-        step={0.01}
+          max={1}
-        min={0}
+          step={0.01}
-      ></SliderInputSwitchFormField>
+          min={0}
-      <SliderInputSwitchFormField
+          onChange={() => {
-        name={getFieldWithPrefix('top_p')}
+            checkParameterIsEqual();
-        checkName="topPEnabled"
+          }}
-        label="topP"
+        ></SliderInputSwitchFormField>
-        max={1}
+      )}
-        step={0.01}
+      {showFields.some((item) => item === 'top_p') && (
-        min={0}
+        <SliderInputSwitchFormField
-      ></SliderInputSwitchFormField>
+          name={getFieldWithPrefix('top_p')}
-      <SliderInputSwitchFormField
+          checkName="topPEnabled"
-        name={getFieldWithPrefix('presence_penalty')}
+          label="topP"
-        checkName="presencePenaltyEnabled"
+          max={1}
-        label="presencePenalty"
+          step={0.01}
-        max={1}
+          min={0}
-        step={0.01}
+          onChange={() => {
-        min={0}
+            checkParameterIsEqual();
-      ></SliderInputSwitchFormField>
+          }}
-      <SliderInputSwitchFormField
+        ></SliderInputSwitchFormField>
-        name={getFieldWithPrefix('frequency_penalty')}
+      )}
-        checkName="frequencyPenaltyEnabled"
+      {showFields.some((item) => item === 'presence_penalty') && (
-        label="frequencyPenalty"
+        <SliderInputSwitchFormField
-        max={1}
+          name={getFieldWithPrefix('presence_penalty')}
-        step={0.01}
+          checkName="presencePenaltyEnabled"
-        min={0}
+          label="presencePenalty"
-      ></SliderInputSwitchFormField>
+          max={1}
-      <SliderInputSwitchFormField
+          step={0.01}
-        name={getFieldWithPrefix('max_tokens')}
+          min={0}
-        checkName="maxTokensEnabled"
+          onChange={() => {
-        label="maxTokens"
+            checkParameterIsEqual();
-        max={128000}
+          }}
-        min={0}
+        ></SliderInputSwitchFormField>
-      ></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>
   );
 }

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

@@ -22,6 +22,7 @@ type SliderInputSwitchFormFieldProps = {
   onChange?: (value: number) => void;
   className?: string;
   checkName: string;
+  numberInputClassName?: string;
 };
 
 export function SliderInputSwitchFormField({
@@ -34,6 +35,7 @@ export function SliderInputSwitchFormField({
   onChange,
   className,
   checkName,
+  numberInputClassName,
 }: SliderInputSwitchFormFieldProps) {
   const form = useFormContext();
   const disabled = !form.watch(checkName);
@@ -81,7 +83,10 @@ export function SliderInputSwitchFormField({
             <FormControl>
               <NumberInput
                 disabled={disabled}
-                className="h-7 w-20"
+                className={cn(
+                  'h-6 w-10 p-1 border border-border-button rounded-sm',
+                  numberInputClassName,
+                )}
                 max={max}
                 min={min}
                 step={step}

web/src/components/originui/input.tsx

@@ -32,13 +32,13 @@ const Input = function ({
         type={type}
         data-slot="input"
         className={cn(
-          'border-input file:text-foreground placeholder:text-muted-foreground/70 flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+          'border-border-button file:text-foreground placeholder:text-text-disabled flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
-          'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+          'focus-visible:border-border-button focus-visible:ring-text-primary/50 focus-visible:ring-1',
           'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
           type === 'search' &&
             '[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none',
           type === 'file' &&
-            'text-muted-foreground/70 file:border-input file:text-foreground p-0 pr-3 italic file:me-3 file:h-full file:border-0 file:border-r file:border-solid file:bg-transparent file:px-3 file:text-sm file:font-medium file:not-italic',
+            'text-text-disabled file:border-input file:text-foreground p-0 pr-3 italic file:me-3 file:h-full file:border-0 file:border-r file:border-solid file:bg-transparent file:px-3 file:text-sm file:font-medium file:not-italic',
           icon && iconPosition === 'left' && 'pl-7',
           icon && iconPosition === 'right' && 'pr-7',
           className,

web/src/components/parse-configuration/raptor-form-fields.tsx

@@ -221,10 +221,12 @@ const RaptorFormFields = ({
                         defaultValue={0}
                         type="number"
                         suffix={
-                          <Shuffle
+                          <div className="w-7 flex justify-center items-center">
-                            className="size-3.5 cursor-pointer"
+                            <Shuffle
-                            onClick={handleGenerate}
+                              className="size-3.5 cursor-pointer"
-                          />
+                              onClick={handleGenerate}
+                            />
+                          </div>
                         }
                       />
                     </FormControl>

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

@@ -59,6 +59,7 @@ interface SimilaritySliderFormFieldProps {
   similarityName?: string;
   vectorSimilarityWeightName?: string;
   isTooltipShown?: boolean;
+  numberInputClassName?: string;
 }
 
 export const initialSimilarityThresholdValue = {
@@ -86,6 +87,7 @@ export function SimilaritySliderFormField({
   similarityName = 'similarity_threshold',
   vectorSimilarityWeightName = 'vector_similarity_weight',
   isTooltipShown,
+  numberInputClassName,
 }: SimilaritySliderFormFieldProps) {
   const { t } = useTranslate('knowledgeDetails');
   const form = useFormContext();
@@ -101,6 +103,7 @@ export function SimilaritySliderFormField({
         step={0.01}
         layout={FormLayout.Vertical}
         tooltip={isTooltipShown && t('similarityThresholdTip')}
+        numberInputClassName={numberInputClassName}
       ></SliderInputFormField>
       <FormField
         control={form.control}
@@ -124,7 +127,7 @@ export function SimilaritySliderFormField({
                 isVector ? 'vectorSimilarityWeight' : 'keywordSimilarityWeight',
               )}
             </FormLabel>
-            <div className={cn('flex items-end gap-14 justify-between')}>
+            <div className={cn('flex items-end gap-4 justify-between')}>
               <FormControl>
                 <div className="flex flex-col flex-1 gap-2">
                   <div className="flex justify-between items-center">
@@ -158,6 +161,7 @@ export function SimilaritySliderFormField({
                   className={cn(
                     'h-6 w-10 p-0 text-center bg-bg-input border-border-default border text-text-secondary',
                     '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
+                    numberInputClassName,
                   )}
                   max={1}
                   min={0}

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

@@ -25,6 +25,7 @@ type SliderInputFormFieldProps = {
   tooltip?: ReactNode;
   defaultValue?: number;
   className?: string;
+  numberInputClassName?: string;
 } & FormLayoutType;
 
 export function SliderInputFormField({
@@ -36,6 +37,7 @@ export function SliderInputFormField({
   tooltip,
   defaultValue,
   className,
+  numberInputClassName,
   layout = FormLayout.Horizontal,
 }: SliderInputFormFieldProps) {
   const form = useFormContext();
@@ -61,7 +63,7 @@ export function SliderInputFormField({
           </FormLabel>
           <div
             className={cn(
-              'flex items-center gap-14 justify-between',
+              'flex items-center gap-4 justify-between',
               { 'w-3/4': isHorizontal },
               className,
             )}
@@ -82,6 +84,7 @@ export function SliderInputFormField({
                 className={cn(
                   'h-6 w-10 p-0 text-center bg-bg-input border border-border-default text-text-secondary',
                   '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
+                  numberInputClassName,
                 )}
                 max={max}
                 min={min}

web/src/components/ui/command.tsx

@@ -47,7 +47,7 @@ const CommandInput = React.forwardRef<
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+        'flex min-h-8 w-full rounded-md bg-transparent py-2 text-sm outline-none placeholder:text-text-secondary disabled:cursor-not-allowed disabled:opacity-50',
         className,
       )}
       {...props}

web/src/components/ui/divider.tsx

@@ -17,7 +17,7 @@ const Divider: React.FC<DividerProps> = ({
   direction = 'horizontal',
   type = 'horizontal',
   text,
-  color = 'border-muted-foreground/50',
+  color = 'border-border-button',
   margin = 'my-4',
   className = '',
 }) => {

web/src/components/ui/input.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { cn } from '@/lib/utils';
 import { Eye, EyeOff, Search } from 'lucide-react';
-import { useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 
 export interface InputProps
   extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix'> {
@@ -17,6 +17,20 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     const { defaultValue, ...restProps } = props;
     const inputValue = isControlled ? value : defaultValue;
     const [showPassword, setShowPassword] = useState(false);
+    const [prefixWidth, setPrefixWidth] = useState(0);
+    const [suffixWidth, setSuffixWidth] = useState(0);
+
+    const prefixRef = useRef<HTMLSpanElement>(null);
+    const suffixRef = useRef<HTMLSpanElement>(null);
+
+    useEffect(() => {
+      if (prefixRef.current) {
+        setPrefixWidth(prefixRef.current.offsetWidth);
+      }
+      if (suffixRef.current) {
+        setSuffixWidth(suffixRef.current.offsetWidth);
+      }
+    }, [prefix, suffix, prefixRef, suffixRef]);
     const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
       if (type === 'number') {
         const numValue = e.target.value === '' ? '' : Number(e.target.value);
@@ -34,42 +48,60 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 
     const isPasswordInput = type === 'password';
 
-    const inputEl = (
+    const inputEl = useMemo(
-      <input
+      () => (
-        ref={ref}
+        <input
-        type={isPasswordInput && showPassword ? 'text' : type}
+          ref={ref}
-        className={cn(
+          type={isPasswordInput && showPassword ? 'text' : type}
-          'peer/input',
+          className={cn(
-          'flex h-8 w-full rounded-md border-0.5 border-border-button bg-bg-input px-3 py-2 outline-none text-sm text-text-primary',
+            'peer/input',
-          'file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-text-disabled',
+            'flex h-8 w-full rounded-md border-0.5 border-border-button bg-bg-input px-3 py-2 outline-none text-sm text-text-primary',
-          'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent-primary',
+            'file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-text-disabled',
-          'disabled:cursor-not-allowed disabled:opacity-50 transition-colors',
+            'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent-primary',
-          {
+            'disabled:cursor-not-allowed disabled:opacity-50 transition-colors',
-            'pl-[calc(1em+1.25rem)]': !!prefix,
+            type === 'number' &&
-            'pr-[calc(1em+1.25rem)]': !!suffix || isPasswordInput,
+              '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
-            'pr-[calc(2em+2rem)]': !!suffix && isPasswordInput,
+            className,
-          },
+          )}
-          type === 'number' &&
+          style={{
-            '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
+            paddingLeft: !!prefix ? `${prefixWidth}px` : '',
-          className,
+            paddingRight: isPasswordInput
-        )}
+              ? '40px'
-        value={inputValue ?? ''}
+              : !!suffix
-        onChange={handleChange}
+                ? `${suffixWidth}px`
-        {...restProps}
+                : '',
-      />
+          }}
+          value={inputValue ?? ''}
+          onChange={handleChange}
+          {...restProps}
+        />
+      ),
+      [
+        prefixWidth,
+        suffixWidth,
+        isPasswordInput,
+        inputValue,
+        className,
+        handleChange,
+        restProps,
+      ],
     );
 
     if (prefix || suffix || isPasswordInput) {
       return (
         <div className="relative">
           {prefix && (
-            <span className="absolute left-0 top-[50%] translate-y-[-50%]">
+            <span
+              ref={prefixRef}
+              className="absolute left-0 top-[50%] translate-y-[-50%]"
+            >
               {prefix}
             </span>
           )}
           {inputEl}
           {suffix && (
             <span
+              ref={suffixRef}
               className={cn('absolute right-0 top-[50%] translate-y-[-50%]', {
                 'right-14': isPasswordInput,
               })}

web/src/components/ui/multi-select.tsx

@@ -289,12 +289,12 @@ export const MultiSelect = React.forwardRef<
             {...props}
             onClick={handleTogglePopover}
             className={cn(
-              'flex w-full p-1 rounded-md border min-h-10 h-auto items-center justify-between bg-inherit hover:bg-inherit [&_svg]:pointer-events-auto',
+              'flex w-full p-1 rounded-md border border-border-button min-h-10 h-auto placeholder:text-text-disabled items-center justify-between bg-bg-input hover:bg-bg-input [&_svg]:pointer-events-auto',
               className,
             )}
           >
             {selectedValues.length > 0 ? (
-              <div className="flex justify-between items-center w-full">
+              <div className="flex justify-between items-center w-full group">
                 <div className="flex flex-wrap items-center">
                   {selectedValues?.slice(0, maxCount)?.map((value) => {
                     const option = flatOptions.find((o) => o.value === value);
@@ -348,9 +348,9 @@ export const MultiSelect = React.forwardRef<
                     </Badge>
                   )}
                 </div>
-                <div className="flex items-center justify-between">
+                <div className="flex items-center justify-between ">
                   <XIcon
-                    className="h-4 mx-2 cursor-pointer text-muted-foreground"
+                    className="h-4 mx-2 cursor-pointer text-text-secondary hidden group-hover:block"
                     onClick={(event) => {
                       event.stopPropagation();
                       handleClear();
@@ -358,17 +358,17 @@ export const MultiSelect = React.forwardRef<
                   />
                   <Separator
                     orientation="vertical"
-                    className="flex min-h-6 h-full"
+                    className="min-h-6 h-full hidden group-hover:flex"
                   />
-                  <ChevronDown className="h-4 mx-2 cursor-pointer text-muted-foreground" />
+                  <ChevronDown className="h-4 mx-2 cursor-pointer text-text-secondary" />
                 </div>
               </div>
             ) : (
               <div className="flex items-center justify-between w-full mx-auto">
-                <span className="text-sm text-muted-foreground mx-3">
+                <span className="text-sm text-text-secondary mx-3">
                   {placeholder}
                 </span>
-                <ChevronDown className="h-4 cursor-pointer text-muted-foreground mx-2" />
+                <ChevronDown className="h-4 cursor-pointer text-text-secondary mx-2" />
               </div>
             )}
           </Button>
@@ -379,14 +379,16 @@ export const MultiSelect = React.forwardRef<
           onEscapeKeyDown={() => setIsPopoverOpen(false)}
         >
           <Command className="p-5 pb-8">
-            <CommandInput
+            {options && options.length > 0 && (
-              placeholder={t('common.search') + '...'}
+              <CommandInput
-              onKeyDown={handleInputKeyDown}
+                placeholder={t('common.search') + '...'}
-            />
+                onKeyDown={handleInputKeyDown}
+              />
+            )}
             <CommandList className="mt-2">
               <CommandEmpty>No results found.</CommandEmpty>
               <CommandGroup>
-                {showSelectAll && (
+                {showSelectAll && options && options.length > 0 && (
                   <CommandItem
                     key="all"
                     onSelect={toggleAll}
@@ -454,12 +456,14 @@ export const MultiSelect = React.forwardRef<
                       />
                     </>
                   )}
-                  <CommandItem
+                  {options && options.length > 0 && (
-                    onSelect={() => setIsPopoverOpen(false)}
+                    <CommandItem
-                    className="flex-1 justify-center cursor-pointer max-w-full"
+                      onSelect={() => setIsPopoverOpen(false)}
-                  >
+                      className="flex-1 justify-center cursor-pointer max-w-full"
-                    {t('common.close')}
+                    >
-                  </CommandItem>
+                      {t('common.close')}
+                    </CommandItem>
+                  )}
                 </div>
               </CommandGroup>
             </CommandList>

web/src/pages/next-search/search-setting-aisummery-config.tsx

@@ -1,236 +0,0 @@
-import { SliderInputSwitchFormField } from '@/components/llm-setting-items/slider';
-import { SelectWithSearch } from '@/components/originui/select-with-search';
-import {
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import {
-  LlmModelType,
-  ModelVariableType,
-  settledModelVariableMap,
-} from '@/constants/knowledge';
-import { useTranslate } from '@/hooks/common-hooks';
-import { useComposeLlmOptionsByModelTypes } from '@/hooks/llm-hooks';
-import { camelCase, isEqual } from 'lodash';
-import { useCallback } from 'react';
-import { useFormContext } from 'react-hook-form';
-import { z } from 'zod';
-
-interface LlmSettingFieldItemsProps {
-  prefix?: string;
-  options?: any[];
-}
-const LlmSettingEnableSchema = {
-  temperatureEnabled: z.boolean(),
-  topPEnabled: z.boolean(),
-  presencePenaltyEnabled: z.boolean(),
-  frequencyPenaltyEnabled: z.boolean(),
-};
-export const LlmSettingSchema = {
-  llm_id: z.string(),
-  parameter: z.string().optional(),
-  temperature: z.coerce.number().optional(),
-  top_p: z.coerce.number().optional(),
-  presence_penalty: z.coerce.number().optional(),
-  frequency_penalty: z.coerce.number().optional(),
-  ...LlmSettingEnableSchema,
-  // maxTokensEnabled: z.boolean(),
-};
-
-export function LlmSettingFieldItems({
-  prefix,
-  options,
-}: LlmSettingFieldItemsProps) {
-  const form = useFormContext();
-  const { t } = useTranslate('chat');
-
-  const modelOptions = useComposeLlmOptionsByModelTypes([
-    LlmModelType.Chat,
-    LlmModelType.Image2text,
-  ]);
-
-  const handleChange = useCallback(
-    (parameter: string) => {
-      const values =
-        settledModelVariableMap[
-          parameter as keyof typeof settledModelVariableMap
-        ];
-      const enabledKeys = Object.keys(LlmSettingEnableSchema);
-
-      for (const key in values) {
-        if (Object.prototype.hasOwnProperty.call(values, key)) {
-          const element = values[key as keyof typeof values];
-          form.setValue(`${prefix}.${key}`, element);
-        }
-      }
-      if (enabledKeys && enabledKeys.length) {
-        for (const key of enabledKeys) {
-          form.setValue(`${prefix}.${key}`, true);
-        }
-      }
-    },
-    [form, prefix],
-  );
-
-  const parameterOptions = Object.values(ModelVariableType).map((x) => ({
-    label: t(camelCase(x)),
-    value: x,
-  })) as unknown as { label: string; value: ModelVariableType | 'Custom' }[];
-  parameterOptions.push({
-    label: t(camelCase('Custom')),
-    value: 'Custom',
-  });
-
-  const getFieldWithPrefix = useCallback(
-    (name: string) => {
-      return prefix ? `${prefix}.${name}` : name;
-    },
-    [prefix],
-  );
-
-  const checkParameterIsEquel = () => {
-    const [
-      parameter,
-      topPValue,
-      frequencyPenaltyValue,
-      temperatureValue,
-      presencePenaltyValue,
-    ] = form.getValues([
-      getFieldWithPrefix('parameter'),
-      getFieldWithPrefix('temperature'),
-      getFieldWithPrefix('top_p'),
-      getFieldWithPrefix('frequency_penalty'),
-      getFieldWithPrefix('presence_penalty'),
-    ]);
-    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,
-      };
-      if (!isEqual(parameterValue, parameterRealValue)) {
-        form.setValue(getFieldWithPrefix('parameter'), 'Custom');
-      }
-    }
-  };
-
-  return (
-    <div className="space-y-5">
-      <FormField
-        control={form.control}
-        name={getFieldWithPrefix('llm_id')}
-        render={({ field }) => (
-          <FormItem>
-            <FormLabel>
-              <span className="text-destructive mr-1"> *</span>
-              {t('model')}
-            </FormLabel>
-            <FormControl>
-              <SelectWithSearch
-                options={options || modelOptions}
-                triggerClassName="!bg-bg-input"
-                {...field}
-              ></SelectWithSearch>
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
-      <FormField
-        control={form.control}
-        name={getFieldWithPrefix('parameter')}
-        render={({ field }) => (
-          <FormItem className="flex justify-between gap-4 items-center">
-            <FormLabel>{t('freedom')}</FormLabel>
-            <FormControl>
-              <div className="w-28">
-                <Select
-                  {...field}
-                  onValueChange={(val) => {
-                    handleChange(val);
-                    field.onChange(val);
-                  }}
-                >
-                  <SelectTrigger>
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {parameterOptions.map((x) => (
-                      <SelectItem value={x.value} key={x.value}>
-                        {x.label}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
-      <SliderInputSwitchFormField
-        name={getFieldWithPrefix('temperature')}
-        checkName={getFieldWithPrefix('temperatureEnabled')}
-        label="temperature"
-        max={1}
-        min={0}
-        step={0.01}
-        onChange={() => {
-          checkParameterIsEquel();
-        }}
-      ></SliderInputSwitchFormField>
-      <SliderInputSwitchFormField
-        name={getFieldWithPrefix('top_p')}
-        checkName={getFieldWithPrefix('topPEnabled')}
-        label="topP"
-        max={1}
-        step={0.01}
-        min={0}
-        onChange={() => {
-          checkParameterIsEquel();
-        }}
-      ></SliderInputSwitchFormField>
-      <SliderInputSwitchFormField
-        name={getFieldWithPrefix('presence_penalty')}
-        checkName={getFieldWithPrefix('presencePenaltyEnabled')}
-        label="presencePenalty"
-        max={1}
-        step={0.01}
-        min={0}
-        onChange={() => {
-          checkParameterIsEquel();
-        }}
-      ></SliderInputSwitchFormField>
-      <SliderInputSwitchFormField
-        name={getFieldWithPrefix('frequency_penalty')}
-        checkName={getFieldWithPrefix('frequencyPenaltyEnabled')}
-        label="frequencyPenalty"
-        max={1}
-        step={0.01}
-        min={0}
-        onChange={() => {
-          checkParameterIsEquel();
-        }}
-      ></SliderInputSwitchFormField>
-      {/* <SliderInputSwitchFormField
-        name={getFieldWithPrefix('max_tokens')}
-        checkName="maxTokensEnabled"
-        label="maxTokens"
-        max={128000}
-      ></SliderInputSwitchFormField> */}
-    </div>
-  );
-}

web/src/pages/next-search/search-setting.tsx

@@ -1,6 +1,10 @@
 // src/pages/next-search/search-setting.tsx
 
 import { AvatarUpload } from '@/components/avatar-upload';
+import {
+  LlmSettingFieldItems,
+  LlmSettingSchema,
+} from '@/components/llm-setting-items/next';
 import {
   MetadataFilter,
   MetadataFilterSchema,
@@ -46,10 +50,10 @@ import {
   IllmSettingProps,
   useUpdateSearch,
 } from '../next-searches/hooks';
-import {
+// import {
-  LlmSettingFieldItems,
+//   LlmSettingFieldItems,
-  LlmSettingSchema,
+//   LlmSettingSchema,
-} from './search-setting-aisummery-config';
+// } from './search-setting-aisummery-config';
 
 interface SearchSettingProps {
   open: boolean;
@@ -397,6 +401,7 @@ const SearchSetting: React.FC<SearchSettingProps> = ({
               isTooltipShown
               similarityName="search_config.similarity_threshold"
               vectorSimilarityWeightName="search_config.vector_similarity_weight"
+              numberInputClassName="rounded-sm"
             ></SimilaritySliderFormField>
             {/* Rerank Model */}
             <FormField
@@ -462,7 +467,7 @@ const SearchSetting: React.FC<SearchSettingProps> = ({
                         <FormControl>
                           <Input
                             type={'number'}
-                            className="h-7 w-20 bg-bg-card"
+                            className="h-7 w-20 bg-bg-card border border-border-button rounded-sm"
                             max={2048}
                             min={0}
                             step={1}
@@ -493,9 +498,19 @@ const SearchSetting: React.FC<SearchSettingProps> = ({
               )}
             />
             {aiSummaryDisabled && (
+              // <LlmSettingFieldItems
+              //   prefix="search_config.llm_setting"
+              //   options={aiSummeryModelOptions}
+              // ></LlmSettingFieldItems>
               <LlmSettingFieldItems
                 prefix="search_config.llm_setting"
                 options={aiSummeryModelOptions}
+                showFields={[
+                  'temperature',
+                  'top_p',
+                  'presence_penalty',
+                  'frequency_penalty',
+                ]}
               ></LlmSettingFieldItems>
             )}
             {/* Feature Controls */}