📦 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

client/src/hooks/Conversations/index.ts

@@ -1,3 +1,4 @@
 export { default as usePresets } from './usePresets';
 export { default as useGetSender } from './useGetSender';
 export { default as useDebouncedInput } from './useDebouncedInput';
+export { default as useParameterEffects } from './useParameterEffects';

client/src/hooks/Conversations/useDebouncedInput.ts

@@ -2,29 +2,30 @@ import debounce from 'lodash/debounce';
 import React, { useState, useCallback } from 'react';
 import type { SetterOrUpdater } from 'recoil';
 import type { TSetOption } from '~/common';
+import { defaultDebouncedDelay } from '~/common';
 
 /** A custom hook that accepts a setOption function and an option key (e.g., 'title').
 It manages a local state for the option value, a debounced setter function for that value,
 and returns the local state value, its setter, and an onChange handler suitable for inputs. */
-function useDebouncedInput({
+function useDebouncedInput<T = unknown>({
   setOption,
   setter,
   optionKey,
   initialValue,
-  delay = 450,
+  delay = defaultDebouncedDelay,
 }: {
   setOption?: TSetOption;
-  setter?: SetterOrUpdater<string>;
+  setter?: SetterOrUpdater<T>;
   optionKey?: string | number;
-  initialValue: unknown;
+  initialValue: T;
   delay?: number;
 }): [
-  (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | unknown) => void,
-  unknown,
-  SetterOrUpdater<string>,
+  (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | T) => void,
+  T,
+  SetterOrUpdater<T>,
   // (newValue: string) => void,
 ] {
-  const [value, setValue] = useState(initialValue);
+  const [value, setValue] = useState<T>(initialValue);
 
   /** A debounced function to call the passed setOption with the optionKey and new value.
    *
@@ -36,11 +37,12 @@ function useDebouncedInput({
 
   /** An onChange handler that updates the local state and the debounced option */
   const onChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | unknown) => {
-      const newValue: unknown =
+    (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | T) => {
+      const newValue: T =
         typeof e !== 'object'
           ? e
-          : (e as React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>)?.target.value;
+          : ((e as React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>)?.target
+            .value as unknown as T);
       setValue(newValue);
       setDebouncedOption(newValue);
     },

client/src/hooks/Conversations/useParameterEffects.ts

@@ -0,0 +1,68 @@
+import { useEffect, useRef } from 'react';
+import type { DynamicSettingProps, TConversation, TPreset } from 'librechat-data-provider';
+import { defaultDebouncedDelay } from '~/common';
+
+function useParameterEffects<T = unknown>({
+  preset,
+  settingKey,
+  defaultValue,
+  conversation,
+  inputValue,
+  setInputValue,
+  preventDelayedUpdate = false,
+}: Pick<DynamicSettingProps, 'settingKey' | 'defaultValue'> & {
+  preset: TPreset | null;
+  conversation: TConversation | { conversationId: null } | null;
+  inputValue: T;
+  setInputValue: (inputValue: T) => void;
+  preventDelayedUpdate?: boolean;
+}) {
+  const idRef = useRef<string | null>(null);
+  const presetIdRef = useRef<string | null>(null);
+
+  /** Updates the local state inputValue if global (conversation) is updated elsewhere */
+  useEffect(() => {
+    if (preventDelayedUpdate) {
+      return;
+    }
+
+    const timeout = setTimeout(() => {
+      if (conversation?.[settingKey] === inputValue) {
+        return;
+      }
+      setInputValue(conversation?.[settingKey]);
+    }, defaultDebouncedDelay * 1.25);
+
+    return () => clearTimeout(timeout);
+  }, [setInputValue, preventDelayedUpdate, conversation, inputValue, settingKey]);
+
+  /** Resets the local state if conversationId changed */
+  useEffect(() => {
+    if (!conversation?.conversationId) {
+      return;
+    }
+
+    if (idRef.current === conversation?.conversationId) {
+      return;
+    }
+
+    idRef.current = conversation?.conversationId;
+    setInputValue(defaultValue as T);
+  }, [setInputValue, conversation?.conversationId, defaultValue]);
+
+  /** Resets the local state if presetId changed */
+  useEffect(() => {
+    if (!preset?.presetId) {
+      return;
+    }
+
+    if (presetIdRef.current === preset?.presetId) {
+      return;
+    }
+
+    presetIdRef.current = preset?.presetId;
+    setInputValue(defaultValue as T);
+  }, [setInputValue, preset?.presetId, defaultValue]);
+}
+
+export default useParameterEffects;