🎨 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/Endpoints/Settings/Advanced.tsx

@@ -146,7 +146,7 @@ export default function Settings({
               disabled={readonly}
               value={[(temperatureValue as number) ?? 1]}
               onValueChange={(value) => setTemperature(value[0])}
-              doubleClickHandler={() => setTemperature(1)}
+              onDoubleClick={() => setTemperature(1)}
               max={2}
               min={0}
               step={0.01}
@@ -184,7 +184,7 @@ export default function Settings({
               disabled={readonly}
               value={[(topPValue as number) ?? 1]}
               onValueChange={(value) => setTopP(value[0])}
-              doubleClickHandler={() => setTopP(1)}
+              onDoubleClick={() => setTopP(1)}
               max={1}
               min={0}
               step={0.01}
@@ -223,7 +223,7 @@ export default function Settings({
               disabled={readonly}
               value={[(freqPValue as number) ?? 0]}
               onValueChange={(value) => setFreqP(value[0])}
-              doubleClickHandler={() => setFreqP(0)}
+              onDoubleClick={() => setFreqP(0)}
               max={2}
               min={-2}
               step={0.01}
@@ -262,7 +262,7 @@ export default function Settings({
               disabled={readonly}
               value={[(presPValue as number) ?? 0]}
               onValueChange={(value) => setPresP(value[0])}
-              doubleClickHandler={() => setPresP(0)}
+              onDoubleClick={() => setPresP(0)}
               max={2}
               min={-2}
               step={0.01}
@@ -319,7 +319,7 @@ export default function Settings({
                     imageDetailNumeric[imageDetail ?? ''] ?? imageDetailNumeric[ImageDetail.auto],
                   ]}
                   onValueChange={(value) => setImageDetail(imageDetailValue[value[0]])}
-                  doubleClickHandler={() => setImageDetail(ImageDetail.auto)}
+                  onDoubleClick={() => setImageDetail(ImageDetail.auto)}
                   max={2}
                   min={0}
                   step={1}

client/src/components/Endpoints/Settings/AgentSettings.tsx

@@ -77,7 +77,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
               disabled={readonly}
               value={[temperature ?? 0]}
               onValueChange={(value: number[]) => setTemperature(value[0])}
-              doubleClickHandler={() => setTemperature(1)}
+              onDoubleClick={() => setTemperature(1)}
               max={2}
               min={0}
               step={0.01}

client/src/components/Endpoints/Settings/Google.tsx

@@ -165,14 +165,14 @@ export default function Settings({ conversation, setOption, models, readonly }:
               disabled={readonly}
               value={[temperature ?? google.temperature.default]}
               onValueChange={(value) => setTemperature(value[0])}
-              doubleClickHandler={() => setTemperature(google.temperature.default)}
+              onDoubleClick={() => setTemperature(google.temperature.default)}
               max={google.temperature.max}
               min={google.temperature.min}
               step={google.temperature.step}
               className="flex h-4 w-full"
             />
           </HoverCardTrigger>
-          <OptionHover endpoint={conversation?.endpoint ?? ''} type="temp" side={ESide.Left} />
+          <OptionHover endpoint={conversation.endpoint ?? ''} type="temp" side={ESide.Left} />
         </HoverCard>
         <HoverCard openDelay={300}>
           <HoverCardTrigger className="grid w-full items-center gap-2">
@@ -205,14 +205,14 @@ export default function Settings({ conversation, setOption, models, readonly }:
               disabled={readonly}
               value={[topP ?? google.topP.default]}
               onValueChange={(value) => setTopP(value[0])}
-              doubleClickHandler={() => setTopP(google.topP.default)}
+              onDoubleClick={() => setTopP(google.topP.default)}
               max={google.topP.max}
               min={google.topP.min}
               step={google.topP.step}
               className="flex h-4 w-full"
             />
           </HoverCardTrigger>
-          <OptionHover endpoint={conversation?.endpoint ?? ''} type="topp" side={ESide.Left} />
+          <OptionHover endpoint={conversation.endpoint ?? ''} type="topp" side={ESide.Left} />
         </HoverCard>
 
         <HoverCard openDelay={300}>
@@ -246,14 +246,14 @@ export default function Settings({ conversation, setOption, models, readonly }:
               disabled={readonly}
               value={[topK ?? google.topK.default]}
               onValueChange={(value) => setTopK(value[0])}
-              doubleClickHandler={() => setTopK(google.topK.default)}
+              onDoubleClick={() => setTopK(google.topK.default)}
               max={google.topK.max}
               min={google.topK.min}
               step={google.topK.step}
               className="flex h-4 w-full"
             />
           </HoverCardTrigger>
-          <OptionHover endpoint={conversation?.endpoint ?? ''} type="topk" side={ESide.Left} />
+          <OptionHover endpoint={conversation.endpoint ?? ''} type="topk" side={ESide.Left} />
         </HoverCard>
         <HoverCard openDelay={300}>
           <HoverCardTrigger className="grid w-full items-center gap-2">
@@ -286,7 +286,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
               disabled={readonly}
               value={[maxOutputTokens ?? google.maxOutputTokens.default]}
               onValueChange={(value) => setMaxOutputTokens(value[0])}
-              doubleClickHandler={() => setMaxOutputTokens(google.maxOutputTokens.default)}
+              onDoubleClick={() => setMaxOutputTokens(google.maxOutputTokens.default)}
               max={google.maxOutputTokens.max}
               min={google.maxOutputTokens.min}
               step={google.maxOutputTokens.step}
@@ -294,7 +294,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
             />
           </HoverCardTrigger>
           <OptionHover
-            endpoint={conversation?.endpoint ?? ''}
+            endpoint={conversation.endpoint ?? ''}
             type="maxoutputtokens"
             side={ESide.Left}
           />

client/src/components/Endpoints/Settings/Plugins.tsx

@@ -251,14 +251,14 @@ export default function Settings({
               disabled={readonly}
               value={[temperatureValue ?? 0.8]}
               onValueChange={(value) => setTemperature(value[0])}
-              doubleClickHandler={() => setTemperature(0.8)}
+              onDoubleClick={() => setTemperature(0.8)}
               max={2}
               min={0}
               step={0.01}
               className="flex h-4 w-full"
             />
           </HoverCardTrigger>
-          <OptionHover endpoint={conversation?.endpoint ?? ''} type="temp" side={ESide.Left} />
+          <OptionHover endpoint={conversation.endpoint ?? ''} type="temp" side={ESide.Left} />
         </HoverCard>
         <HoverCard openDelay={300}>
           <HoverCardTrigger className="grid w-full items-center gap-2">
@@ -291,14 +291,14 @@ export default function Settings({
               disabled={readonly}
               value={[topPValue ?? 1]}
               onValueChange={(value) => setTopP(value[0])}
-              doubleClickHandler={() => setTopP(1)}
+              onDoubleClick={() => setTopP(1)}
               max={1}
               min={0}
               step={0.01}
               className="flex h-4 w-full"
             />
           </HoverCardTrigger>
-          <OptionHover endpoint={conversation?.endpoint ?? ''} type="topp" side={ESide.Left} />
+          <OptionHover endpoint={conversation.endpoint ?? ''} type="topp" side={ESide.Left} />
         </HoverCard>
 
         <HoverCard openDelay={300}>
@@ -332,14 +332,14 @@ export default function Settings({
               disabled={readonly}
               value={[freqPValue ?? 0]}
               onValueChange={(value) => setFreqP(value[0])}
-              doubleClickHandler={() => setFreqP(0)}
+              onDoubleClick={() => setFreqP(0)}
               max={2}
               min={-2}
               step={0.01}
               className="flex h-4 w-full"
             />
           </HoverCardTrigger>
-          <OptionHover endpoint={conversation?.endpoint ?? ''} type="freq" side={ESide.Left} />
+          <OptionHover endpoint={conversation.endpoint ?? ''} type="freq" side={ESide.Left} />
         </HoverCard>
 
         <HoverCard openDelay={300}>
@@ -373,14 +373,14 @@ export default function Settings({
               disabled={readonly}
               value={[presPValue ?? 0]}
               onValueChange={(value) => setPresP(value[0])}
-              doubleClickHandler={() => setPresP(0)}
+              onDoubleClick={() => setPresP(0)}
               max={2}
               min={-2}
               step={0.01}
               className="flex h-4 w-full"
             />
           </HoverCardTrigger>
-          <OptionHover endpoint={conversation?.endpoint ?? ''} type="pres" side={ESide.Left} />
+          <OptionHover endpoint={conversation.endpoint ?? ''} type="pres" side={ESide.Left} />
         </HoverCard>
       </div>
     </div>

client/src/components/Nav/SettingsTabs/Speech/STT/AutoSendTextSelector.tsx

@@ -22,7 +22,7 @@ export default function AutoSendTextSelector() {
         <Slider
           value={[autoSendText ?? -1]}
           onValueChange={(value) => setAutoSendText(value[0])}
-          doubleClickHandler={() => setAutoSendText(-1)}
+          onDoubleClick={() => setAutoSendText(-1)}
           min={-1}
           max={60}
           step={1}

client/src/components/Nav/SettingsTabs/Speech/STT/DecibelSelector.tsx

@@ -21,7 +21,7 @@ export default function DecibelSelector() {
         <Slider
           value={[decibelValue ?? -45]}
           onValueChange={(value) => setDecibelValue(value[0])}
-          doubleClickHandler={() => setDecibelValue(-45)}
+          onDoubleClick={() => setDecibelValue(-45)}
           min={-100}
           max={-30}
           step={1}

client/src/components/Nav/SettingsTabs/Speech/TTS/PlaybackRate.tsx

@@ -21,7 +21,7 @@ export default function DecibelSelector() {
         <Slider
           value={[playbackRate ?? 1]}
           onValueChange={(value) => setPlaybackRate(value[0])}
-          doubleClickHandler={() => setPlaybackRate(null)}
+          onDoubleClick={() => setPlaybackRate(null)}
           min={0.1}
           max={2}
           step={0.1}

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">
+            <div className="mb-2 flex flex-wrap break-all rounded-lg bg-surface-secondary">
-              {currentTags?.map((tag: string, index: number) => (
+              {currentTags && currentTags.length > 0 && (
-                <Tag
+                <div className="flex w-full gap-1 p-1">
-                  key={`${tag}-${index}`}
+                  {currentTags.map((tag: string, index: number) => (
-                  label={tag}
+                    <Tag
-                  onClick={onTagClick}
+                      key={`${tag}-${index}`}
-                  onRemove={() => {
+                      label={tag}
-                    onTagRemove(index);
+                      onClick={onTagClick}
-                    if (inputRef.current) {
+                      onRemove={() => {
-                      inputRef.current.focus();
+                        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';

client/src/components/ui/HoverCard.tsx

@@ -23,7 +23,7 @@ const HoverCardContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        'z-50 w-64 rounded-md border border-gray-200 bg-white p-4 shadow-md outline-none animate-in fade-in-0 dark:border-gray-800 dark:bg-gray-800',
+        'z-50 w-64 rounded-md border border-none bg-surface-tertiary p-4 shadow-md outline-none animate-in fade-in-0',
         className,
       )}
       {...props}

client/src/components/ui/Slider.tsx

@@ -4,19 +4,20 @@ import { cn } from '~/utils';
 
 const Slider = React.forwardRef<
   React.ElementRef<typeof SliderPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> & { onDoubleClick?: () => void }
->(({ className, ...props }, ref) => (
+    >(({ className, onDoubleClick, ...props }, ref) => (
-  <SliderPrimitive.Root
+      <SliderPrimitive.Root
-    ref={ref}
+        ref={ref}
-    className={cn('relative flex w-full touch-none select-none items-center', className)}
+        className={cn('relative flex w-full touch-none select-none items-center', className)}
-    {...props}
+        onDoubleClick={onDoubleClick}
-  >
+        {...props}
-    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+      >
-      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+        <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
-    </SliderPrimitive.Track>
+          <SliderPrimitive.Range className="absolute h-full bg-primary" />
-    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+        </SliderPrimitive.Track>
-  </SliderPrimitive.Root>
+        <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
-));
+      </SliderPrimitive.Root>
+    ));
 Slider.displayName = SliderPrimitive.Root.displayName;
 
 export { Slider };

client/src/hooks/Conversations/useParameterEffects.ts

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react';
-import type { DynamicSettingProps, TConversation, TPreset } from 'librechat-data-provider';
+import type { DynamicSettingProps, TPreset } from 'librechat-data-provider';
 import { defaultDebouncedDelay } from '~/common';
 
 function useParameterEffects<T = unknown>({
@@ -10,9 +10,8 @@ function useParameterEffects<T = unknown>({
   inputValue,
   setInputValue,
   preventDelayedUpdate = false,
-}: Pick<DynamicSettingProps, 'settingKey' | 'defaultValue'> & {
+}: Pick<DynamicSettingProps, 'settingKey' | 'defaultValue' | 'conversation'> & {
   preset: TPreset | null;
-  conversation?: TConversation | TPreset | null;
   inputValue: T;
   setInputValue: (inputValue: T) => void;
   preventDelayedUpdate?: boolean;