🎨 style: parameters panel update (#4780)

* 🔧 refactor: replace doubleClickHandler with onDoubleClick in slider components

* 🔧 refactor: consolidate DynamicInput and DynamicInputNumber components into a single DynamicInput component; fix: UI crashing when typing a character instead of number in max context/output tokens

* 🔧 style: update component styles to use bg-surface-secondary and bg-surface-tertiary for improved UI consistency

client/src/components/SidePanel/Parameters/DynamicCheckbox.tsx

@@ -1,4 +1,3 @@
-// client/src/components/SidePanel/Parameters/DynamicCheckbox.tsx
 import { useMemo, useState } from 'react';
 import { OptionTypes } from 'librechat-data-provider';
 import type { DynamicSettingProps } from 'librechat-data-provider';

client/src/components/SidePanel/Parameters/DynamicInput.tsx

@@ -1,4 +1,3 @@
-// client/src/components/SidePanel/Parameters/DynamicInput.tsx
 import { OptionTypes } from 'librechat-data-provider';
 import type { DynamicSettingProps } from 'librechat-data-provider';
 import { useLocalize, useDebouncedInput, useParameterEffects } from '~/hooks';
@@ -13,6 +12,7 @@ function DynamicInput({
   settingKey,
   defaultValue,
   description = '',
+  type = 'string',
   columnSpan,
   setOption,
   optionType,
@@ -46,6 +46,17 @@ function DynamicInput({
     setInputValue: setLocalValue,
   });
 
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    if (type === 'number') {
+      if (!isNaN(Number(value))) {
+        setInputValue(e);
+      }
+    } else {
+      setInputValue(e);
+    }
+  };
+
   return (
     <div
       className={`flex flex-col items-center justify-start gap-6 ${
@@ -75,9 +86,11 @@ function DynamicInput({
             id={`${settingKey}-dynamic-input`}
             disabled={readonly}
             value={inputValue ?? ''}
-            onChange={setInputValue}
+            onChange={handleInputChange}
             placeholder={placeholderCode ? localize(placeholder) ?? placeholder : placeholder}
-            className={cn(defaultTextProps, 'flex h-10 max-h-10 w-full resize-none px-3 py-2')}
+            className={cn(
+              'flex h-10 max-h-10 w-full resize-none border-none bg-surface-secondary px-3 py-2',
+            )}
           />
         </HoverCardTrigger>
         {description && (

client/src/components/SidePanel/Parameters/DynamicInputNumber.tsx

@@ -1,106 +0,0 @@
-import { OptionTypes } from 'librechat-data-provider';
-import type { DynamicSettingProps } from 'librechat-data-provider';
-import type { ValueType } from '@rc-component/mini-decimal';
-import { Label, HoverCard, InputNumber, HoverCardTrigger } from '~/components/ui';
-import { useLocalize, useDebouncedInput, useParameterEffects } from '~/hooks';
-import { cn, defaultTextProps, optionText } from '~/utils';
-import { ESide } from '~/common';
-import { useChatContext } from '~/Providers';
-import OptionHover from './OptionHover';
-
-function DynamicInputNumber({
-  label = '',
-  settingKey,
-  defaultValue,
-  description = '',
-  columnSpan,
-  setOption,
-  optionType,
-  readonly = false,
-  showDefault = false,
-  labelCode = false,
-  descriptionCode = false,
-  placeholderCode = false,
-  placeholder = '',
-  conversation,
-  range,
-  className = '',
-  inputClassName = '',
-}: DynamicSettingProps) {
-  const localize = useLocalize();
-  const { preset } = useChatContext();
-
-  const [setInputValue, inputValue, setLocalValue] = useDebouncedInput<ValueType | null>({
-    optionKey: optionType !== OptionTypes.Custom ? settingKey : undefined,
-    initialValue:
-      optionType !== OptionTypes.Custom
-        ? (conversation?.[settingKey] as number)
-        : (defaultValue as number),
-    setter: () => ({}),
-    setOption,
-  });
-
-  useParameterEffects({
-    preset,
-    settingKey,
-    defaultValue: typeof defaultValue === 'undefined' ? '' : defaultValue,
-    conversation,
-    inputValue,
-    setInputValue: setLocalValue,
-  });
-
-  return (
-    <div
-      className={cn(
-        'flex flex-col items-center justify-start gap-6',
-        columnSpan != null ? `col-span-${columnSpan}` : 'col-span-full',
-        className,
-      )}
-    >
-      <HoverCard openDelay={300}>
-        <HoverCardTrigger className="grid w-full items-center gap-2">
-          <div className="flex justify-between">
-            <Label
-              htmlFor={`${settingKey}-dynamic-setting`}
-              className="text-left text-sm font-medium"
-            >
-              {labelCode ? localize(label) ?? label : label || settingKey}{' '}
-              {showDefault && (
-                <small className="opacity-40">
-                  ({localize('com_endpoint_default')}: {defaultValue})
-                </small>
-              )}
-            </Label>
-            <InputNumber
-              id={`${settingKey}-dynamic-setting-input-number`}
-              disabled={readonly}
-              value={inputValue}
-              onChange={setInputValue}
-              min={range?.min}
-              max={range?.max}
-              step={range?.step}
-              placeholder={placeholderCode ? localize(placeholder) ?? placeholder : placeholder}
-              controls={false}
-              className={cn(
-                defaultTextProps,
-                cn(
-                  optionText,
-                  'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
-                ),
-                inputClassName,
-              )}
-            />
-          </div>
-        </HoverCardTrigger>
-        {description && (
-          <OptionHover
-            description={descriptionCode ? localize(description) ?? description : description}
-            side={ESide.Left}
-          />
-        )}
-      </HoverCard>
-    </div>
-  );
-}
-
-export default DynamicInputNumber;

client/src/components/SidePanel/Parameters/DynamicSlider.tsx

@@ -167,12 +167,11 @@ function DynamicSlider({
                 : (inputValue as number) ?? (defaultValue as number),
             ]}
             onValueChange={(value) => handleValueChange(value[0])}
-            doubleClickHandler={() => setInputValue(defaultValue as string | number)}
+            onDoubleClick={() => setInputValue(defaultValue as string | number)}
             max={max}
             min={range ? range.min : 0}
             step={range ? range.step ?? 1 : 1}
             className="flex h-4 w-full"
-            trackClassName="bg-surface-hover"
           />
         </HoverCardTrigger>
         {description && (

client/src/components/SidePanel/Parameters/DynamicTags.tsx

@@ -1,4 +1,3 @@
-// client/src/components/SidePanel/Parameters/DynamicTags.tsx
 import { useState, useMemo, useCallback, useRef } from 'react';
 import { OptionTypes } from 'librechat-data-provider';
 import type { DynamicSettingProps } from 'librechat-data-provider';
@@ -140,20 +139,24 @@ function DynamicTags({
             </Label>
           </div>
           <div>
-            <div className="bg-muted mb-2 flex flex-wrap gap-1 break-all rounded-lg">
-              {currentTags?.map((tag: string, index: number) => (
-                <Tag
-                  key={`${tag}-${index}`}
-                  label={tag}
-                  onClick={onTagClick}
-                  onRemove={() => {
-                    onTagRemove(index);
-                    if (inputRef.current) {
-                      inputRef.current.focus();
-                    }
-                  }}
-                />
-              ))}
+            <div className="mb-2 flex flex-wrap break-all rounded-lg bg-surface-secondary">
+              {currentTags && currentTags.length > 0 && (
+                <div className="flex w-full gap-1 p-1">
+                  {currentTags.map((tag: string, index: number) => (
+                    <Tag
+                      key={`${tag}-${index}`}
+                      label={tag}
+                      onClick={onTagClick}
+                      onRemove={() => {
+                        onTagRemove(index);
+                        if (inputRef.current) {
+                          inputRef.current.focus();
+                        }
+                      }}
+                    />
+                  ))}
+                </div>
+              )}
               <Input
                 ref={inputRef}
                 id={`${settingKey}-dynamic-input`}
@@ -172,7 +175,7 @@ function DynamicTags({
                 }}
                 onChange={(e) => setTagText(e.target.value)}
                 placeholder={placeholderCode ? localize(placeholder) ?? placeholder : placeholder}
-                className={cn(defaultTextProps, 'flex h-10 max-h-10 px-3 py-2')}
+                className={cn('flex h-10 max-h-10 border-none bg-surface-secondary px-3 py-2')}
               />
             </div>
           </div>

client/src/components/SidePanel/Parameters/DynamicTextarea.tsx

@@ -1,4 +1,3 @@
-// client/src/components/SidePanel/Parameters/DynamicTextarea.tsx
 import { OptionTypes } from 'librechat-data-provider';
 import type { DynamicSettingProps } from 'librechat-data-provider';
 import { Label, TextareaAutosize, HoverCard, HoverCardTrigger } from '~/components/ui';
@@ -78,9 +77,8 @@ function DynamicTextarea({
             onChange={setInputValue}
             placeholder={placeholderCode ? localize(placeholder) ?? placeholder : placeholder}
             className={cn(
-              defaultTextProps,
               // TODO: configurable max height
-              'flex max-h-[138px] min-h-[100px] w-full resize-none px-3 py-2',
+              'flex max-h-[138px] min-h-[100px] w-full resize-none rounded-lg bg-surface-secondary px-3 py-2 focus:outline-none',
             )}
           />
         </HoverCardTrigger>

client/src/components/SidePanel/Parameters/index.ts

@@ -1,4 +1,3 @@
-export { default as DynamicInputNumber } from './DynamicInputNumber';
 export { default as DynamicCombobox } from './DynamicCombobox';
 export { default as DynamicDropdown } from './DynamicDropdown';
 export { default as DynamicCheckbox } from './DynamicCheckbox';