🎨 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
2025-12-16 16:30:15 +01:00 · 2024-11-23 01:10:03 +01:00 · 2024-11-23 01:10:03 +01:00 · ead9e11134
commit ead9e11134
parent 2a77c98f51
17 changed files with 79 additions and 174 deletions
--- a/client/src/components/Endpoints/Settings/Advanced.tsx
+++ b/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}
--- a/client/src/components/Endpoints/Settings/AgentSettings.tsx
+++ b/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}
--- a/client/src/components/Endpoints/Settings/Google.tsx
+++ b/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}
          />
--- a/client/src/components/Endpoints/Settings/Plugins.tsx
+++ b/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>
--- a/client/src/components/Nav/SettingsTabs/Speech/STT/AutoSendTextSelector.tsx
+++ b/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}
--- a/client/src/components/Nav/SettingsTabs/Speech/STT/DecibelSelector.tsx
+++ b/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}
--- a/client/src/components/Nav/SettingsTabs/Speech/TTS/PlaybackRate.tsx
+++ b/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}
--- a/client/src/components/SidePanel/Parameters/DynamicCheckbox.tsx
+++ b/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';
--- a/client/src/components/SidePanel/Parameters/DynamicInput.tsx
+++ b/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 && (
--- a/client/src/components/SidePanel/Parameters/DynamicInputNumber.tsx
+++ b/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;
--- a/client/src/components/SidePanel/Parameters/DynamicSlider.tsx
+++ b/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 && (
--- a/client/src/components/SidePanel/Parameters/DynamicTags.tsx
+++ b/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>
--- a/client/src/components/SidePanel/Parameters/DynamicTextarea.tsx
+++ b/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>
--- a/client/src/components/SidePanel/Parameters/index.ts
+++ b/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';
--- a/client/src/components/ui/HoverCard.tsx
+++ b/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}
--- a/client/src/components/ui/Slider.tsx
+++ b/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>
->(({ className, ...props }, ref) => (
-  <SliderPrimitive.Root
-    ref={ref}
-    className={cn('relative flex w-full touch-none select-none items-center', className)}
-    {...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>
-    <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>
-));
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> & { onDoubleClick?: () => void }
+    >(({ className, onDoubleClick, ...props }, ref) => (
+      <SliderPrimitive.Root
+        ref={ref}
+        className={cn('relative flex w-full touch-none select-none items-center', className)}
+        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>
+        <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 };
--- a/client/src/hooks/Conversations/useParameterEffects.ts
+++ b/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;