📦 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/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;