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

🔧 fix(menu): Menu Item Filter Improvements (#2153)

Browse source 
* small-fix: Ensure that fake seperators in model lists do not show in search

* Ensure Plugin search uses correct placeholder and key filtering in search
This commit is contained in:
Flynn 2024-03-21 09:15:25 -04:00 • committed by GitHub
parent 30f6d90cfe
commit f521040784
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 33 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

8
client/src/components/ui/MultiSearch.tsx
View file

@ -49,6 +49,14 @@ export default function MultiSearch({
*/
function defaultGetStringKey(node: unknown): string {
if (typeof node === 'string') {
// BUGFIX: Detect psedeo separators and make sure they don't appear in the list when filtering items
// it makes sure (for the most part) that the model name starts and ends with dashes
// The long-term fix here would be to enable seperators (model groupings) but there's no
// feature mocks for such a thing yet
if (node.startsWith('---') && node.endsWith('---')) {
return '';
}
return node.toUpperCase();
}
// This should be a noop, but it's here for redundancy

9
client/src/components/ui/MultiSelectDropDown.tsx
View file

@ -18,6 +18,7 @@ export type TMultiSelectDropDownProps = {
containerClassName?: string;
isSelected: (value: string) => boolean;
className?: string;
searchPlaceholder?: string;
optionValueKey?: string;
};
@ -32,6 +33,7 @@ function MultiSelectDropDown({
containerClassName,
isSelected,
className,
searchPlaceholder,
optionValueKey = 'value',
}: TMultiSelectDropDownProps) {
const [isOpen, setIsOpen] = useState(false);
@ -44,10 +46,13 @@ function MultiSelectDropDown({
setIsOpen(true);
};
// 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<TPlugin[]>(availableValues);
const [filteredValues, searchRender] = useMultiSearch<TPlugin[]>(
availableValues,
searchPlaceholder,
(option) => (option.name || '').toUpperCase(),
);
const hasSearchRender = Boolean(searchRender);
const options = hasSearchRender ? filteredValues : availableValues;

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

@ -18,6 +18,7 @@ type SelectDropDownProps = {
isSelected: (value: string) => boolean;
className?: string;
optionValueKey?: string;
searchPlaceholder?: string;
};
function MultiSelectPop({
@ -30,6 +31,7 @@ function MultiSelectPop({
containerClassName,
isSelected,
optionValueKey = 'value',
searchPlaceholder,
}: SelectDropDownProps) {
// const localize = useLocalize();
@ -37,7 +39,11 @@ function MultiSelectPop({
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 [filteredValues, searchRender] = useMultiSearch<TPlugin[]>(
availableValues,
searchPlaceholder,
(option) => (option.name || '').toUpperCase(),
);
const hasSearchRender = Boolean(searchRender);
const options = hasSearchRender ? filteredValues : availableValues;