diff --git a/client/package.json b/client/package.json
index 6046baf8fb..9b2477ed79 100644
--- a/client/package.json
+++ b/client/package.json
@@ -28,7 +28,7 @@
},
"homepage": "https://librechat.ai",
"dependencies": {
- "@ariakit/react": "^0.4.5",
+ "@ariakit/react": "^0.4.8",
"@dicebear/collection": "^7.0.4",
"@dicebear/core": "^7.0.4",
"@headlessui/react": "^2.1.2",
diff --git a/client/src/components/SidePanel/AssistantSwitcher.tsx b/client/src/components/SidePanel/AssistantSwitcher.tsx
index 1348f6feff..26f253f76e 100644
--- a/client/src/components/SidePanel/AssistantSwitcher.tsx
+++ b/client/src/components/SidePanel/AssistantSwitcher.tsx
@@ -1,10 +1,10 @@
import { useEffect, useMemo } from 'react';
-import { Combobox } from '~/components/ui';
import { isAssistantsEndpoint, LocalStorageKeys } from 'librechat-data-provider';
import type { AssistantsEndpoint } from 'librechat-data-provider';
import type { SwitcherProps, AssistantListItem } from '~/common';
import { useSetIndexOptions, useSelectAssistant, useLocalize, useAssistantListMap } from '~/hooks';
import { useChatContext, useAssistantsMapContext } from '~/Providers';
+import ControlCombobox from '~/components/ui/ControlCombobox';
import Icon from '~/components/Endpoints/Icon';
export default function AssistantSwitcher({ isCollapsed }: SwitcherProps) {
@@ -31,7 +31,7 @@ export default function AssistantSwitcher({ isCollapsed }: SwitcherProps) {
localStorage.getItem(`${LocalStorageKeys.ASST_ID_PREFIX}${index}${endpoint}`) ??
assistants[0]?.id ??
'';
- const assistant = assistantMap?.[endpoint ?? '']?.[assistant_id];
+ const assistant = assistantMap[endpoint ?? ''][assistant_id];
if (!assistant) {
return;
@@ -51,14 +51,14 @@ export default function AssistantSwitcher({ isCollapsed }: SwitcherProps) {
const assistantOptions = useMemo(() => {
return assistants.map((assistant) => {
return {
- label: assistant.name ?? '',
+ label: (assistant.name as string | null) ?? '',
value: assistant.id,
icon: (
),
};
@@ -66,7 +66,7 @@ export default function AssistantSwitcher({ isCollapsed }: SwitcherProps) {
}, [assistants, endpoint]);
return (
- assistant.id === selectedAssistant)?.name ??
@@ -83,7 +83,7 @@ export default function AssistantSwitcher({ isCollapsed }: SwitcherProps) {
isCreatedByUser={false}
endpoint={endpoint}
assistantName={currentAssistant?.name ?? ''}
- iconURL={(currentAssistant?.metadata?.avatar as string) ?? ''}
+ iconURL={currentAssistant?.metadata?.avatar ?? ''}
/>
}
/>
diff --git a/client/src/components/SidePanel/ModelSwitcher.tsx b/client/src/components/SidePanel/ModelSwitcher.tsx
index cff1342bec..6c8d79a38e 100644
--- a/client/src/components/SidePanel/ModelSwitcher.tsx
+++ b/client/src/components/SidePanel/ModelSwitcher.tsx
@@ -1,10 +1,10 @@
import { useMemo, useRef, useCallback } from 'react';
import { useGetModelsQuery } from 'librechat-data-provider/react-query';
+import type { SwitcherProps } from '~/common';
+import ControlCombobox from '~/components/ui/ControlCombobox';
import MinimalIcon from '~/components/Endpoints/MinimalIcon';
import { useSetIndexOptions, useLocalize } from '~/hooks';
-import type { SwitcherProps } from '~/common';
import { useChatContext } from '~/Providers';
-import { Combobox } from '~/components/ui';
import { mainTextareaId } from '~/common';
export default function ModelSwitcher({ isCollapsed }: SwitcherProps) {
@@ -16,7 +16,10 @@ export default function ModelSwitcher({ isCollapsed }: SwitcherProps) {
const { endpoint, model = null } = conversation ?? {};
const models = useMemo(() => {
- return modelsQuery?.data?.[endpoint ?? ''] ?? [];
+ return (modelsQuery.data?.[endpoint ?? ''] ?? []).map((model) => ({
+ label: model,
+ value: model,
+ }));
}, [modelsQuery, endpoint]);
const setModel = useCallback(
@@ -34,7 +37,8 @@ export default function ModelSwitcher({ isCollapsed }: SwitcherProps) {
);
return (
-
-
+
);
} else if (isAssistantsEndpoint(props.endpoint)) {
@@ -19,7 +19,7 @@ export default function Switcher(props: SwitcherProps) {
return (
<>
-
+
);
}
diff --git a/client/src/components/ui/Combobox.tsx b/client/src/components/ui/Combobox.tsx
index e8843284e1..0bc1cc8ecd 100644
--- a/client/src/components/ui/Combobox.tsx
+++ b/client/src/components/ui/Combobox.tsx
@@ -1,4 +1,4 @@
-import { startTransition, useMemo } from 'react';
+import { startTransition } from 'react';
import { Search as SearchIcon } from 'lucide-react';
import * as RadixSelect from '@radix-ui/react-select';
import { CheckIcon, ChevronDownIcon } from '@radix-ui/react-icons';
@@ -52,7 +52,16 @@ export default function ComboboxComponent({
value={selectedValue}
onValueChange={setValue}
open={open}
- onOpenChange={setOpen}
+ /** Hacky fix for radix-ui Android issue: https://github.com/radix-ui/primitives/issues/1658 */
+ onOpenChange={() => {
+ if (open === true) {
+ setOpen(false);
+ return;
+ }
+ setTimeout(() => {
+ setOpen(!open);
+ }, 75);
+ }}
>
{
+ setValue(`${value ?? ''}`);
+ setOpen(false);
+ }}
>
diff --git a/client/src/components/ui/ControlCombobox.tsx b/client/src/components/ui/ControlCombobox.tsx
new file mode 100644
index 0000000000..abd8d69700
--- /dev/null
+++ b/client/src/components/ui/ControlCombobox.tsx
@@ -0,0 +1,123 @@
+import * as Ariakit from '@ariakit/react';
+import { matchSorter } from 'match-sorter';
+import { startTransition, useMemo, useState, useEffect, useRef } from 'react';
+import { cn } from '~/utils';
+import type { OptionWithIcon } from '~/common';
+import { Search } from 'lucide-react';
+
+interface ControlComboboxProps {
+ selectedValue: string;
+ displayValue?: string;
+ items: OptionWithIcon[];
+ setValue: (value: string) => void;
+ ariaLabel: string;
+ searchPlaceholder?: string;
+ selectPlaceholder?: string;
+ isCollapsed: boolean;
+ SelectIcon?: React.ReactNode;
+}
+
+export default function ControlCombobox({
+ selectedValue,
+ displayValue,
+ items,
+ setValue,
+ ariaLabel,
+ searchPlaceholder,
+ selectPlaceholder,
+ isCollapsed,
+ SelectIcon,
+}: ControlComboboxProps) {
+ const [searchValue, setSearchValue] = useState('');
+ const buttonRef = useRef(null);
+ const [buttonWidth, setButtonWidth] = useState(null);
+
+ const matches = useMemo(() => {
+ return matchSorter(items, searchValue, {
+ keys: ['value', 'label'],
+ baseSort: (a, b) => (a.index < b.index ? -1 : 1),
+ });
+ }, [searchValue, items]);
+
+ useEffect(() => {
+ if (buttonRef.current && !isCollapsed) {
+ setButtonWidth(buttonRef.current.offsetWidth);
+ }
+ }, [isCollapsed]);
+
+ return (
+
+
{
+ startTransition(() => {
+ setSearchValue(value);
+ });
+ }}
+ >
+
+ {ariaLabel}
+
+ {SelectIcon != null && (
+
+ {SelectIcon}
+
+ )}
+ {!isCollapsed && (
+
+ {displayValue ?? selectPlaceholder}
+
+ )}
+
+
+
+
+ {matches.map((item) => (
+ }
+ >
+ {item.icon != null && (
+
+ {item.icon}
+
+ )}
+ {item.label}
+
+ ))}
+
+
+
+
+