Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-19 18:00:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

🔍 feat: Filter MultiSelect and SelectDropDown (+variants) + CSS fixes for Scrollbar (#2138)

Browse source 
* Initial implementation of MultiSearch. Added implementation to MultiSelect and SelectDropDown and variants

* Update scrollbar styles to prevent breakages on Chrome

* Revert changes to vite.config.ts (redundant for now)

* chore(New Chat): organize imports

* style(scrollbar-transparent): use webkit as standard, expected behavior

* chore: useCallback for mouse enter/leave

* fix(Footer): resolve map key error

* chore: memoize Conversations

* style(MultiSearch): improve multisearch styling

* style: dark mode search input

* fix: react warnings due to unrecognize html props

* chore: debounce OpenAI settings inputs

* fix(useDebouncedInput): only use event value as newValue if not object

---------

Co-authored-by: Flynn <gpg@flyn.ca>
This commit is contained in:
Danny Avila 2024-03-19 13:35:10 -04:00 • committed by GitHub
parent f51ac74e12
commit 382b303963
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
20 changed files with 305 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

13
client/src/components/ui/SelectDropDown.tsx
View file

@ -4,6 +4,7 @@ import type { Option } from '~/common';
import CheckMark from '../svg/CheckMark';
import { useLocalize } from '~/hooks';
import { cn } from '~/utils/';
import { useMultiSearch } from './MultiSearch';
type SelectDropDownProps = {
id?: string;
@ -57,6 +58,13 @@ function SelectDropDown({
title = localize('com_ui_model');
}
// Detemine if we should to convert this component into a searchable select. If we have enough elements, a search
// input will appear near the top of the menu, allowing correct filtering of different model menu items. This will
// reset once the component is unmounted (as per a normal search)
const [filteredValues, searchRender] = useMultiSearch<string[] | Option[]>(availableValues);
const hasSearchRender = Boolean(searchRender);
const options = hasSearchRender ? filteredValues : availableValues;
return (
<div className={cn('flex items-center justify-center gap-2 ', containerClassName ?? '')}>
<div className={cn('relative w-full', subContainerClassName ?? '')}>
@ -122,7 +130,7 @@ function SelectDropDown({
>
<Listbox.Options
className={cn(
'absolute z-10 mt-2 max-h-60 w-full overflow-auto rounded border bg-white text-base text-xs ring-black/10 focus:outline-none dark:bg-gray-800 dark:ring-white/20 dark:border-gray-600 md:w-[100%]',
'absolute z-10 mt-2 max-h-60 w-full overflow-auto rounded border bg-white text-base text-xs ring-black/10 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:ring-white/20 md:w-[100%]',
optionsListClass ?? '',
)}
>
@ -138,7 +146,8 @@ function SelectDropDown({
{renderOption()}
</Listbox.Option>
)}
{availableValues.map((option: string | Option, i: number) => {
{searchRender}
{options.map((option: string | Option, i: number) => {
if (!option) {
return null;
}