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/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}