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

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 = true,
  labelCode,
  descriptionCode,
  placeholderCode,
  placeholder,
  conversation,
  range,
  className = '',
  inputClassName = '',
}: DynamicSettingProps) {
  const localize = useLocalize();
  const { preset } = useChatContext();

  const [setInputValue, inputValue] = 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,
  });

  return (
    <div
      className={cn(
        'flex flex-col items-center justify-start gap-6',
        columnSpan ? `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;