File size: 3,266 Bytes
f0743f4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | import { useRecoilValue } from 'recoil';
import { ChevronDownIcon } from 'lucide-react';
import { useState, useEffect, useMemo } from 'react';
import { useAvailablePluginsQuery } from 'librechat-data-provider/react-query';
import {
Button,
SelectDropDown,
SelectDropDownPop,
MultiSelectDropDown,
useMediaQuery,
} from '@librechat/client';
import type { TPlugin } from 'librechat-data-provider';
import type { TModelSelectProps } from '~/common';
import { useSetIndexOptions, useAuthContext, useLocalize } from '~/hooks';
import { cn, cardStyle, selectPlugins, processPlugins } from '~/utils';
import MultiSelectPop from './MultiSelectPop';
import store from '~/store';
export default function PluginsByIndex({
conversation,
setOption,
models,
showAbove,
popover = false,
}: TModelSelectProps) {
const localize = useLocalize();
const { user } = useAuthContext();
const [visible, setVisibility] = useState<boolean>(true);
const isSmallScreen = useMediaQuery('(max-width: 640px)');
const availableTools = useRecoilValue(store.availableTools);
const { checkPluginSelection, setTools } = useSetIndexOptions();
const { data: allPlugins } = useAvailablePluginsQuery({
enabled: !!user?.plugins,
select: selectPlugins,
});
useEffect(() => {
if (isSmallScreen) {
setVisibility(false);
}
}, [isSmallScreen]);
const conversationTools: TPlugin[] = useMemo(() => {
if (!conversation?.tools) {
return [];
}
return processPlugins(conversation.tools, allPlugins?.map);
}, [conversation, allPlugins]);
const availablePlugins = useMemo(() => {
if (!availableTools) {
return [];
}
return Object.values(availableTools);
}, [availableTools]);
if (!conversation) {
return null;
}
const Menu = popover ? SelectDropDownPop : SelectDropDown;
const PluginsMenu = popover ? MultiSelectPop : MultiSelectDropDown;
return (
<>
<Button
type="button"
className={cn(
cardStyle,
'z-40 flex h-[40px] min-w-4 flex-none items-center justify-center px-3 hover:bg-white focus:ring-0 focus:ring-offset-0 dark:hover:bg-gray-700',
)}
onClick={() => setVisibility((prev) => !prev)}
>
<ChevronDownIcon
className={cn(
!visible ? '' : 'rotate-180 transform',
'w-4 text-gray-600 dark:text-white',
)}
/>
</Button>
{visible && (
<>
<Menu
value={conversation.model ?? ''}
setValue={setOption('model')}
availableValues={models}
showAbove={showAbove}
showLabel={false}
className={cn(
cardStyle,
'z-50 flex h-[40px] w-48 min-w-48 flex-none items-center justify-center px-4 hover:cursor-pointer',
)}
/>
<PluginsMenu
showAbove={false}
showLabel={false}
setSelected={setTools}
value={conversationTools}
optionValueKey="pluginKey"
availableValues={availablePlugins}
isSelected={checkPluginSelection}
searchPlaceholder={localize('com_ui_select_search_plugin')}
/>
</>
)}
</>
);
}
|