feat: enhance BadgeRowContext with MCPSelect and tool toggle functionality, refactor related components to utilize updated context and hooks

client/src/hooks/Plugins/useToolToggle.ts

@@ -2,6 +2,9 @@ import { useRef, useEffect, useCallback, useMemo } from 'react';
 import { useRecoilState } from 'recoil';
 import debounce from 'lodash/debounce';
 import { Constants, LocalStorageKeys } from 'librechat-data-provider';
+import type { VerifyToolAuthResponse } from 'librechat-data-provider';
+import type { UseQueryOptions } from '@tanstack/react-query';
+import { useVerifyAgentToolAuth } from '~/data-provider';
 import useLocalStorage from '~/hooks/useLocalStorageAlt';
 import { ephemeralAgentByConvoId } from '~/store';
 
@@ -25,18 +28,35 @@ interface UseToolToggleOptions {
   localStorageKey: LocalStorageKeys;
   isAuthenticated?: boolean;
   setIsDialogOpen?: (open: boolean) => void;
+  /** Options for auth verification */
+  authConfig?: {
+    toolId: string;
+    queryOptions?: UseQueryOptions<VerifyToolAuthResponse>;
+  };
 }
 
 export function useToolToggle({
   conversationId,
   toolKey,
   localStorageKey,
-  isAuthenticated,
+  isAuthenticated: externalIsAuthenticated,
   setIsDialogOpen,
+  authConfig,
 }: UseToolToggleOptions) {
   const key = conversationId ?? Constants.NEW_CONVO;
   const [ephemeralAgent, setEphemeralAgent] = useRecoilState(ephemeralAgentByConvoId(key));
 
+  const authQuery = useVerifyAgentToolAuth(
+    { toolId: authConfig?.toolId || '' },
+    {
+      enabled: !!authConfig?.toolId,
+      ...authConfig?.queryOptions,
+    },
+  );
+
+  const isAuthenticated =
+    externalIsAuthenticated ?? (authConfig ? (authQuery?.data?.authenticated ?? false) : false);
+
   const isToolEnabled = useMemo(() => {
     return ephemeralAgent?.[toolKey] ?? false;
   }, [ephemeralAgent, toolKey]);
@@ -93,5 +113,6 @@ export function useToolToggle({
     ephemeralAgent,
     debouncedChange,
     setEphemeralAgent,
+    authData: authQuery?.data,
   };
 }