Refactor: replace endpointsConfig recoil store with react query (#1085)

client/src/components/Endpoints/EditPresetDialog.tsx

@@ -2,20 +2,23 @@ import axios from 'axios';
 import { useEffect } from 'react';
 import filenamify from 'filenamify';
 import exportFromJSON from 'export-from-json';
-import { useSetRecoilState, useRecoilState, useRecoilValue } from 'recoil';
+import { useSetRecoilState, useRecoilState } from 'recoil';
+import { useGetEndpointsQuery } from 'librechat-data-provider';
 import type { TEditPresetProps } from '~/common';
 import { useSetOptions, useLocalize } from '~/hooks';
 import { Input, Label, Dropdown, Dialog, DialogClose, DialogButton } from '~/components/';
 import DialogTemplate from '~/components/ui/DialogTemplate';
 import PopoverButtons from './PopoverButtons';
 import EndpointSettings from './EndpointSettings';
-import { cn, defaultTextProps, removeFocusOutlines, cleanupPreset } from '~/utils/';
+import { cn, defaultTextProps, removeFocusOutlines, cleanupPreset, mapEndpoints } from '~/utils/';
 import store from '~/store';
 
 const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }: TEditPresetProps) => {
   const [preset, setPreset] = useRecoilState(store.preset);
   const setPresets = useSetRecoilState(store.presets);
-  const availableEndpoints = useRecoilValue(store.availableEndpoints);
+  const { data: availableEndpoints } = useGetEndpointsQuery({
+    select: mapEndpoints,
+  });
   const { setOption } = useSetOptions(_preset);
   const localize = useLocalize();
 

client/src/components/Input/EndpointMenu/EndpointItem.tsx

@@ -1,12 +1,11 @@
 import { useState } from 'react';
-import { useRecoilValue } from 'recoil';
+import { useGetEndpointsQuery } from 'librechat-data-provider';
 import { Settings } from 'lucide-react';
 import { DropdownMenuRadioItem } from '~/components';
 import { Icon } from '~/components/Endpoints';
 import { SetKeyDialog } from '../SetKeyDialog';
 import { useLocalize } from '~/hooks';
 
-import store from '~/store';
 import { cn, alternateName } from '~/utils';
 
 export default function ModelItem({
@@ -19,7 +18,7 @@ export default function ModelItem({
   isSelected: boolean;
 }) {
   const [isDialogOpen, setDialogOpen] = useState(false);
-  const endpointsConfig = useRecoilValue(store.endpointsConfig);
+  const { data: endpointsConfig } = useGetEndpointsQuery();
 
   const icon = Icon({
     size: 20,

client/src/components/Input/EndpointMenu/EndpointMenu.jsx

@@ -1,8 +1,12 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { Trash2 } from 'lucide-react';
 import { useState, useEffect } from 'react';
-import { useRecoilValue, useRecoilState } from 'recoil';
-import { useDeletePresetMutation, useCreatePresetMutation } from 'librechat-data-provider';
+import { useRecoilState } from 'recoil';
+import {
+  useDeletePresetMutation,
+  useCreatePresetMutation,
+  useGetEndpointsQuery,
+} from 'librechat-data-provider';
 import { Icon, EditPresetDialog } from '~/components/Endpoints';
 import EndpointItems from './EndpointItems';
 import PresetItems from './PresetItems';
@@ -23,7 +27,7 @@ import {
   TooltipContent,
 } from '~/components/ui/';
 import DialogTemplate from '~/components/ui/DialogTemplate';
-import { cn, cleanupPreset } from '~/utils';
+import { cn, cleanupPreset, mapEndpoints } from '~/utils';
 import { useLocalize, useLocalStorage, useConversation, useDefaultConvo } from '~/hooks';
 import store from '~/store';
 
@@ -37,7 +41,10 @@ export default function NewConversationMenu() {
   const [preset, setPreset] = useState(false);
   const [conversation, setConversation] = useRecoilState(store.conversation) ?? {};
   const [messages, setMessages] = useRecoilState(store.messages);
-  const availableEndpoints = useRecoilValue(store.availableEndpoints);
+
+  const { data: availableEndpoints } = useGetEndpointsQuery({
+    select: mapEndpoints,
+  });
 
   const [presets, setPresets] = useRecoilState(store.presets);
   const modularEndpoints = new Set(['gptPlugins', 'anthropic', 'google', 'openAI']);

client/src/components/Messages/Content/Plugin.tsx

@@ -1,16 +1,11 @@
-import { useRecoilValue } from 'recoil';
 import { Disclosure } from '@headlessui/react';
 import { useCallback, memo, ReactNode } from 'react';
+import { useGetEndpointsQuery } from 'librechat-data-provider';
 import type { TResPlugin, TInput } from 'librechat-data-provider';
 import { ChevronDownIcon, LucideProps } from 'lucide-react';
 import { cn, formatJSON } from '~/utils';
 import { Spinner } from '~/components';
 import CodeBlock from './CodeBlock';
-import store from '~/store';
-
-type PluginsMap = {
-  [pluginKey: string]: string;
-};
 
 type PluginIconProps = LucideProps & {
   className?: string;
@@ -36,7 +31,9 @@ type PluginProps = {
 };
 
 const Plugin: React.FC<PluginProps> = ({ plugin }) => {
-  const plugins: PluginsMap = useRecoilValue(store.plugins);
+  const { data: plugins } = useGetEndpointsQuery({
+    select: (data) => data?.gptPlugins?.plugins,
+  });
 
   const getPluginName = useCallback(
     (pluginKey: string) => {
@@ -47,7 +44,7 @@ const Plugin: React.FC<PluginProps> = ({ plugin }) => {
       if (pluginKey === 'n/a' || pluginKey === 'self reflection') {
         return pluginKey;
       }
-      return plugins[pluginKey] ?? 'self reflection';
+      return plugins?.[pluginKey] ?? 'self reflection';
     },
     [plugins],
   );