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/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 = (
-      <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,
               })}

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>