📦 feat: Model & Assistants Combobox for Side Panel (#2380)

* WIP: dynamic settings * WIP: update tests and validations * refactor(SidePanel): use hook for Links * WIP: dynamic settings, slider implemented * feat(useDebouncedInput): dynamic typing with generic * refactor(generate): add `custom` optionType to be non-conforming to conversation schema * feat: DynamicDropdown * refactor(DynamicSlider): custom optionType handling and useEffect for conversation updates elsewhere * refactor(Panel): add more test cases * chore(DynamicSlider): note * refactor(useDebouncedInput): import defaultDebouncedDelay from ~/common` * WIP: implement remaining ComponentTypes * chore: add com_sidepanel_parameters * refactor: add langCode handling for dynamic settings * chore(useOriginNavigate): change path to '/c/' * refactor: explicit textarea focus on new convo, share textarea idea via ~/common * refactor: useParameterEffects: reset if convo or preset Ids change, share and maintain statefulness in side panel * wip: combobox * chore: minor styling for Select components * wip: combobox select styling for side panel * feat: complete combobox * refactor: model select for side panel switcher * refactor(Combobox): add portal * chore: comment out dynamic parameters panel for future PR and delete prompt files * refactor(Combobox): add icon field for options, change hover bg-color, add displayValue * fix(useNewConvo): proper textarea focus with setTimeout * refactor(AssistantSwitcher): use Combobox * refactor(ModelSwitcher): add textarea focus on model switch
2025-12-18 17:30:16 +01:00 · 2024-04-10 14:27:22 -04:00 · 2024-04-10 14:27:22 -04:00 · 8e5f1ad575
commit 8e5f1ad575
parent f64a2cb0b0
33 changed files with 2850 additions and 462 deletions
--- a/client/src/components/SidePanel/Parameters/DynamicTextarea.tsx
+++ b/client/src/components/SidePanel/Parameters/DynamicTextarea.tsx
@ -0,0 +1,97 @@
+// 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';
+import { useLocalize, useDebouncedInput, useParameterEffects } from '~/hooks';
+import { cn, defaultTextProps } from '~/utils';
+import { useChatContext } from '~/Providers';
+import OptionHover from './OptionHover';
+import { ESide } from '~/common';
+
+function DynamicTextarea({
+  label,
+  settingKey,
+  defaultValue,
+  description,
+  columnSpan,
+  setOption,
+  optionType,
+  placeholder,
+  readonly = false,
+  showDefault = true,
+  labelCode,
+  descriptionCode,
+  placeholderCode,
+}: DynamicSettingProps) {
+  const localize = useLocalize();
+  const { conversation = { conversationId: null }, preset } = useChatContext();
+
+  const [setInputValue, inputValue] = useDebouncedInput<string | null>({
+    optionKey: optionType !== OptionTypes.Custom ? settingKey : undefined,
+    initialValue:
+      optionType !== OptionTypes.Custom
+        ? (conversation?.[settingKey] as string)
+        : (defaultValue as string),
+    setter: () => ({}),
+    setOption,
+  });
+
+  useParameterEffects({
+    preset,
+    settingKey,
+    defaultValue: typeof defaultValue === 'undefined' ? '' : defaultValue,
+    conversation,
+    inputValue,
+    setInputValue,
+  });
+
+  return (
+    <div
+      className={`flex flex-col items-center justify-start gap-6 ${
+        columnSpan ? `col-span-${columnSpan}` : 'col-span-full'
+      }`}
+    >
+      <HoverCard openDelay={300}>
+        <HoverCardTrigger className="grid w-full items-center gap-2">
+          <div className="flex w-full justify-between">
+            <Label
+              htmlFor={`${settingKey}-dynamic-textarea`}
+              className="text-left text-sm font-medium"
+            >
+              {labelCode ? localize(label ?? '') || label : label ?? settingKey}{' '}
+              {showDefault && (
+                <small className="opacity-40">
+                  (
+                  {typeof defaultValue === 'undefined' || !(defaultValue as string)?.length
+                    ? localize('com_endpoint_default_blank')
+                    : `${localize('com_endpoint_default')}: ${defaultValue}`}
+                  )
+                </small>
+              )}
+            </Label>
+          </div>
+          <TextareaAutosize
+            id={`${settingKey}-dynamic-textarea`}
+            disabled={readonly}
+            value={inputValue ?? ''}
+            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',
+            )}
+          />
+        </HoverCardTrigger>
+        {description && (
+          <OptionHover
+            description={descriptionCode ? localize(description) || description : description}
+            side={ESide.Left}
+          />
+        )}
+      </HoverCard>
+    </div>
+  );
+}
+
+export default DynamicTextarea;