client/src/components/Plugins/Store/PluginStoreDialog.tsx

import { useState, useEffect, useCallback } from 'react';
import { Dialog } from '@headlessui/react';
import { useRecoilState } from 'recoil';
import { X } from 'lucide-react';
import store from '~/store';
import { PluginStoreItem, PluginPagination, PluginAuthForm } from '.';
import {
 useAvailablePluginsQuery,
 useUpdateUserPluginsMutation,
 TPlugin,
} from '@librechat/data-provider';
import { useAuthContext } from '~/hooks/AuthContext';

type TPluginStoreDialogProps = {
 isOpen: boolean;
 setIsOpen: (open: boolean) => void;
};

export type TPluginAction = {
 pluginKey: string;
 action: 'install' | 'uninstall';
 auth?: unknown;
};

function PluginStoreDialog({ isOpen, setIsOpen }: TPluginStoreDialogProps) {
 const { data: availablePlugins } = useAvailablePluginsQuery();
 const { user } = useAuthContext();
 const updateUserPlugins = useUpdateUserPluginsMutation();
 const [conversation, setConversation] = useRecoilState(store.conversation) || {};
 const [currentPage, setCurrentPage] = useState<number>(1);
 const [itemsPerPage, setItemsPerPage] = useState<number>(1);
 const [maxPage, setMaxPage] = useState<number>(1);
 const [userPlugins, setUserPlugins] = useState<string[]>([]);
 const [selectedPlugin, setSelectedPlugin] = useState<TPlugin | undefined>(undefined);
 const [showPluginAuthForm, setShowPluginAuthForm] = useState<boolean>(false);
 const [error, setError] = useState<boolean>(false);
 const [errorMessage, setErrorMessage] = useState<string>('');

 const handleInstallError = (error: any) => {
 setError(true);
 if (error.response?.data?.message) {
 setErrorMessage(error.response?.data?.message);
 }
 setTimeout(() => {
 setError(false);
 setErrorMessage('');
 }, 5000);
 };

 const handleInstall = (pluginAction: TPluginAction) => {
 updateUserPlugins.mutate(pluginAction, {
 onError: (error) => {
 handleInstallError(error);
 },
 });
 setShowPluginAuthForm(false);
 };

 const onPluginUninstall = (plugin: string) => {
 updateUserPlugins.mutate(
 { pluginKey: plugin, action: 'uninstall', auth: null },
 {
 onError: (error: any) => {
 handleInstallError(error);
 },
 onSuccess: () => {
 //@ts-ignore - can't set a default convo or it will break routing
 let { tools } = conversation;
 tools = tools.filter((t: TPlugin) => {
 return t.pluginKey !== plugin;
 });
 localStorage.setItem('lastSelectedTools', JSON.stringify(tools));
 setConversation((prevState: any) => ({
 ...prevState,
 tools,
 }));
 },
 },
 );
 };

 const onPluginInstall = (pluginKey: string) => {
 const getAvailablePluginFromKey = availablePlugins?.find((p) => p.pluginKey === pluginKey);
 setSelectedPlugin(getAvailablePluginFromKey);

 if (
 getAvailablePluginFromKey!.authConfig.length > 0 &&
 !getAvailablePluginFromKey?.authenticated
 ) {
 setShowPluginAuthForm(true);
 } else {
 handleInstall({ pluginKey, action: 'install', auth: null });
 }
 };

 const calculateColumns = (node) => {
 const width = node.offsetWidth;
 let columns;
 if (width < 501) {
 setItemsPerPage(8);
 return;
 } else if (width < 640) {
 columns = 2;
 } else if (width < 1024) {
 columns = 3;
 } else {
 columns = 4;
 }
 setItemsPerPage(columns * 2); // 2 rows
 };

 const gridRef = useCallback(
 (node) => {
 if (node !== null) {
 if (itemsPerPage === 1) {
 calculateColumns(node);
 }
 const resizeObserver = new ResizeObserver(() => calculateColumns(node));
 resizeObserver.observe(node);
 }
 },
 [itemsPerPage],
 );

 useEffect(() => {
 if (user) {
 if (user.plugins) {
 setUserPlugins(user.plugins);
 }
 }
 if (availablePlugins) {
 setMaxPage(Math.ceil(availablePlugins.length / itemsPerPage));
 }
 }, [availablePlugins, itemsPerPage, user]);

 const handleChangePage = (page: number) => {
 setCurrentPage(page);
 };

 return (
 <Dialog open={isOpen} onClose={() => setIsOpen(false)} className="relative z-[102]">
 {/* The backdrop, rendered as a fixed sibling to the panel container */}
 <div className="fixed inset-0 bg-gray-500/90 transition-opacity dark:bg-gray-800/90" />
 {/* Full-screen container to center the panel */}
 <div className="fixed inset-0 flex items-center justify-center p-4">
 <Dialog.Panel className="relative w-full transform overflow-hidden overflow-y-auto rounded-lg bg-white text-left shadow-xl transition-all dark:bg-gray-900 max-sm:h-full sm:mx-7 sm:my-8 sm:max-w-2xl lg:max-w-5xl xl:max-w-7xl">
 <div className="flex items-center justify-between border-b-[1px] border-black/10 px-4 pb-4 pt-5 dark:border-white/10 sm:p-6">
 <div className="flex items-center">
 <div className="text-center sm:text-left">
 <Dialog.Title className="text-lg font-medium leading-6 text-gray-900 dark:text-gray-200">
 Plugin store
 </Dialog.Title>
 </div>
 </div>
 <div>
 <div className="sm:mt-0">
 <button
 onClick={() => setIsOpen(false)}
 className="inline-block text-gray-500 hover:text-gray-100"
 tabIndex={0}
 >
 <X />
 </button>
 </div>
 </div>
 </div>
 {error && (
 <div
 className="relative m-4 rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700"
 role="alert"
 >
 There was an error attempting to authenticate this plugin. Please try again.{' '}
 {errorMessage}
 </div>
 )}
 {showPluginAuthForm && (
 <div className="p-4 sm:p-6 sm:pt-4">
 <PluginAuthForm
 plugin={selectedPlugin}
 onSubmit={(installActionData: TPluginAction) => handleInstall(installActionData)}
 />
 </div>
 )}
 <div className="p-4 sm:p-6 sm:pt-4">
 <div className="mt-4 flex flex-col gap-4">
 <div
 ref={gridRef}
 className="grid grid-cols-1 grid-rows-2 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
 >
 {availablePlugins &&
 availablePlugins
 .slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage)
 .map((plugin, index) => (
 <PluginStoreItem
 key={index}
 plugin={plugin}
 isInstalled={userPlugins.includes(plugin.pluginKey)}
 onInstall={() => onPluginInstall(plugin.pluginKey)}
 onUninstall={() => onPluginUninstall(plugin.pluginKey)}
 />
 ))}
 </div>
 </div>
 <div className="mt-2 flex flex-col items-center gap-2 sm:flex-row sm:justify-between">
 {maxPage > 1 && (
 <div>
 <PluginPagination
 currentPage={currentPage}
 maxPage={maxPage}
 onChangePage={handleChangePage}
 />
 </div>
 )}
 {/* API not yet implemented: */}
 {/* <div className="flex flex-col items-center gap-2 sm:flex-row">
 <PluginStoreLinkButton
 label="Install an unverified plugin"
 onClick={onInstallUnverifiedPlugin}
 />
 <div className="hidden h-4 border-l border-black/30 dark:border-white/30 sm:block"></div>
 <PluginStoreLinkButton
 label="Develop your own plugin"
 onClick={onDevelopPluginClick}
 />
 <div className="hidden h-4 border-l border-black/30 dark:border-white/30 sm:block"></div>
 <PluginStoreLinkButton label="About plugins" onClick={onAboutPluginsClick} />
 </div> */}
 </div>
 </div>
 </Dialog.Panel>
 </div>
 </Dialog>
 );
}

export default PluginStoreDialog;