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

🔍 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

16
client/src/components/ui/MultiSelectPop.tsx
View file

@ -1,8 +1,9 @@
import React from 'react';
import React, { useMemo, useState } from 'react';
import { Wrench } from 'lucide-react';
import { Root, Trigger, Content, Portal } from '@radix-ui/react-popover';
import type { TPlugin } from 'librechat-data-provider';
import MenuItem from '~/components/Chat/Menus/UI/MenuItem';
import { useMultiSearch } from './MultiSearch';
import { cn } from '~/utils/';
type SelectDropDownProps = {
@ -35,6 +36,11 @@ function MultiSelectPop({
const title = _title;
const excludeIds = ['select-plugin', 'plugins-label', 'selected-plugins'];
// Detemine if we should to convert this component into a searchable select
const [filteredValues, searchRender] = useMultiSearch<TPlugin[]>(availableValues);
const hasSearchRender = Boolean(searchRender);
const options = hasSearchRender ? filteredValues : availableValues;
return (
<Root>
<div className={cn('flex items-center justify-center gap-2', containerClassName ?? '')}>
@ -106,9 +112,13 @@ function MultiSelectPop({
<Content
side="bottom"
align="center"
className="mt-2 max-h-60 min-w-full overflow-hidden overflow-y-auto rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800 dark:text-white"
className={cn(
'mt-2 max-h-60 min-w-full overflow-hidden overflow-y-auto rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800 dark:text-white',
hasSearchRender && 'relative',
)}
>
{availableValues.map((option) => {
{searchRender}
{options.map((option) => {
if (!option) {
return null;
}