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)
2025-12-08 12:32:30 +08:00 · 2025-11-21 14:32:50 +08:00
parent 4c8f9f0d77
commit 1845daf41f
12 changed files with 252 additions and 341 deletions
--- a/web/src/components/llm-setting-items/next.tsx
+++ b/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>
  );
 }
--- a/web/src/components/llm-setting-items/slider.tsx
+++ b/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}
--- a/web/src/components/originui/input.tsx
+++ b/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',
-          'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+          '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-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,
--- a/web/src/components/parse-configuration/raptor-form-fields.tsx
+++ b/web/src/components/parse-configuration/raptor-form-fields.tsx
@ -221,10 +221,12 @@ const RaptorFormFields = ({
                        defaultValue={0}
                        type="number"
                        suffix={
-                          <Shuffle
-                            className="size-3.5 cursor-pointer"
-                            onClick={handleGenerate}
-                          />
+                          <div className="w-7 flex justify-center items-center">
+                            <Shuffle
+                              className="size-3.5 cursor-pointer"
+                              onClick={handleGenerate}
+                            />
+                          </div>
                        }
                      />
                    </FormControl>
--- a/web/src/components/similarity-slider/index.tsx
+++ b/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}
--- a/web/src/components/slider-input-form-field.tsx
+++ b/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}
--- a/web/src/components/ui/command.tsx
+++ b/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}
--- a/web/src/components/ui/divider.tsx
+++ b/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 = '',
 }) => {
--- a/web/src/components/ui/input.tsx
+++ b/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 = (
-      <input
-        ref={ref}
-        type={isPasswordInput && showPassword ? 'text' : type}
-        className={cn(
-          'peer/input',
-          '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',
-          'file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-text-disabled',
-          '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,
-            'pr-[calc(1em+1.25rem)]': !!suffix || isPasswordInput,
-            'pr-[calc(2em+2rem)]': !!suffix && isPasswordInput,
-          },
-          type === 'number' &&
-            '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
-          className,
-        )}
-        value={inputValue ?? ''}
-        onChange={handleChange}
-        {...restProps}
-      />
+    const inputEl = useMemo(
+      () => (
+        <input
+          ref={ref}
+          type={isPasswordInput && showPassword ? 'text' : type}
+          className={cn(
+            'peer/input',
+            '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',
+            'file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-text-disabled',
+            'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent-primary',
+            'disabled:cursor-not-allowed disabled:opacity-50 transition-colors',
+            type === 'number' &&
+              '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
+            className,
+          )}
+          style={{
+            paddingLeft: !!prefix ? `${prefixWidth}px` : '',
+            paddingRight: isPasswordInput
+              ? '40px'
+              : !!suffix
+                ? `${suffixWidth}px`
+                : '',
+          }}
+          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,
              })}
--- a/web/src/components/ui/multi-select.tsx
+++ b/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
-              placeholder={t('common.search') + '...'}
-              onKeyDown={handleInputKeyDown}
-            />
+            {options && options.length > 0 && (
+              <CommandInput
+                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
-                    onSelect={() => setIsPopoverOpen(false)}
-                    className="flex-1 justify-center cursor-pointer max-w-full"
-                  >
-                    {t('common.close')}
-                  </CommandItem>
+                  {options && options.length > 0 && (
+                    <CommandItem
+                      onSelect={() => setIsPopoverOpen(false)}
+                      className="flex-1 justify-center cursor-pointer max-w-full"
+                    >
+                      {t('common.close')}
+                    </CommandItem>
+                  )}
                </div>
              </CommandGroup>
            </CommandList>
--- a/web/src/pages/next-search/search-setting-aisummery-config.tsx
+++ b/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>
-  );
-}
--- a/web/src/pages/next-search/search-setting.tsx
+++ b/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 {
-  LlmSettingFieldItems,
-  LlmSettingSchema,
-} from './search-setting-aisummery-config';
+// import {
+//   LlmSettingFieldItems,
+//   LlmSettingSchema,
+// } 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 */}