📛 refactor: Decouple MCP Dialog UI from BadgeRowContext (#8920)

* decouple MCP dialog from BadgeRowContext

* chore: import order and style according to guidelines

---------

Co-authored-by: Dustin Healy <dustinhealy1@gmail.com>

client/src/Providers/BadgeRowContext.tsx

@@ -2,27 +2,18 @@ import React, { createContext, useContext, useEffect, useRef } from 'react';
 import { useSetRecoilState } from 'recoil';
 import { Tools, Constants, LocalStorageKeys, AgentCapabilities } from 'librechat-data-provider';
 import type { TAgentsEndpoint } from 'librechat-data-provider';
-import {
+import { useSearchApiKeyForm, useGetAgentsConfig, useCodeApiKeyForm, useToolToggle } from '~/hooks';
-  useSearchApiKeyForm,
-  useGetAgentsConfig,
-  useCodeApiKeyForm,
-  useToolToggle,
-  useMCPSelect,
-} from '~/hooks';
-import { useGetStartupConfig } from '~/data-provider';
 import { ephemeralAgentByConvoId } from '~/store';
 
 interface BadgeRowContextType {
   conversationId?: string | null;
   agentsConfig?: TAgentsEndpoint | null;
-  mcpSelect: ReturnType<typeof useMCPSelect>;
   webSearch: ReturnType<typeof useToolToggle>;
   artifacts: ReturnType<typeof useToolToggle>;
   fileSearch: ReturnType<typeof useToolToggle>;
   codeInterpreter: ReturnType<typeof useToolToggle>;
   codeApiKeyForm: ReturnType<typeof useCodeApiKeyForm>;
   searchApiKeyForm: ReturnType<typeof useSearchApiKeyForm>;
-  startupConfig: ReturnType<typeof useGetStartupConfig>['data'];
 }
 
 const BadgeRowContext = createContext<BadgeRowContextType | undefined>(undefined);
@@ -119,12 +110,6 @@ export default function BadgeRowProvider({
     }
   }, [key, isSubmitting, setEphemeralAgent]);
 
-  /** Startup config */
-  const { data: startupConfig } = useGetStartupConfig();
-
-  /** MCPSelect hook */
-  const mcpSelect = useMCPSelect({ conversationId });
-
   /** CodeInterpreter hooks */
   const codeApiKeyForm = useCodeApiKeyForm({});
   const { setIsDialogOpen: setCodeDialogOpen } = codeApiKeyForm;
@@ -172,12 +157,10 @@ export default function BadgeRowProvider({
   });
 
   const value: BadgeRowContextType = {
-    mcpSelect,
     webSearch,
     artifacts,
     fileSearch,
     agentsConfig,
-    startupConfig,
     conversationId,
     codeApiKeyForm,
     codeInterpreter,

client/src/components/Chat/Input/ToolsDropdown.tsx

@@ -10,11 +10,12 @@ import {
   PermissionTypes,
   defaultAgentCapabilities,
 } from 'librechat-data-provider';
-import { useLocalize, useHasAccess, useAgentCapabilities } from '~/hooks';
+import { useLocalize, useHasAccess, useAgentCapabilities, useMCPSelect } from '~/hooks';
 import ArtifactsSubMenu from '~/components/Chat/Input/ArtifactsSubMenu';
 import MCPSubMenu from '~/components/Chat/Input/MCPSubMenu';
 import { useBadgeRowContext } from '~/Providers';
 import { cn } from '~/utils';
+import { useGetStartupConfig } from '~/data-provider';
 
 interface ToolsDropdownProps {
   disabled?: boolean;
@@ -26,15 +27,16 @@ const ToolsDropdown = ({ disabled }: ToolsDropdownProps) => {
   const [isPopoverActive, setIsPopoverActive] = useState(false);
   const {
     webSearch,
-    mcpSelect,
     artifacts,
     fileSearch,
     agentsConfig,
-    startupConfig,
     codeApiKeyForm,
     codeInterpreter,
     searchApiKeyForm,
   } = useBadgeRowContext();
+  const mcpSelect = useMCPSelect();
+  const { data: startupConfig } = useGetStartupConfig();
+
   const { codeEnabled, webSearchEnabled, artifactsEnabled, fileSearchEnabled } =
     useAgentCapabilities(agentsConfig?.capabilities ?? defaultAgentCapabilities);
 

client/src/hooks/MCP/useMCPServerManager.ts

@@ -10,8 +10,8 @@ import {
 import type { TUpdateUserPlugins, TPlugin } from 'librechat-data-provider';
 import type { ConfigFieldDetail } from '~/components/MCP/MCPConfigDialog';
 import { useMCPConnectionStatusQuery } from '~/data-provider/Tools/queries';
-import { useBadgeRowContext } from '~/Providers';
+import { useGetStartupConfig } from '~/data-provider';
-import { useLocalize } from '~/hooks';
+import { useLocalize, useMCPSelect } from '~/hooks';
 
 interface ServerState {
   isInitializing: boolean;
@@ -24,7 +24,8 @@ interface ServerState {
 export function useMCPServerManager() {
   const localize = useLocalize();
   const { showToast } = useToastContext();
-  const { mcpSelect, startupConfig } = useBadgeRowContext();
+  const mcpSelect = useMCPSelect();
+  const { data: startupConfig } = useGetStartupConfig();
   const { mcpValues, setMCPValues, mcpToolDetails, isPinned, setIsPinned } = mcpSelect;
   const queryClient = useQueryClient();
 

client/src/hooks/Plugins/useMCPSelect.ts

@@ -5,6 +5,7 @@ import type { TPlugin } from 'librechat-data-provider';
 import { useAvailableToolsQuery, useGetStartupConfig } from '~/data-provider';
 import useLocalStorage from '~/hooks/useLocalStorageAlt';
 import { ephemeralAgentByConvoId } from '~/store';
+import { useChatContext } from '~/Providers';
 
 const storageCondition = (value: unknown, rawCurrentValue?: string | null) => {
   if (rawCurrentValue) {
@@ -20,12 +21,14 @@ const storageCondition = (value: unknown, rawCurrentValue?: string | null) => {
   return Array.isArray(value) && value.length > 0;
 };
 
-interface UseMCPSelectOptions {
+export function useMCPSelect() {
-  conversationId?: string | null;
+  const { conversation } = useChatContext();
-}
+
+  const key = useMemo(
+    () => conversation?.conversationId ?? Constants.NEW_CONVO,
+    [conversation?.conversationId],
+  );
 
-export function useMCPSelect({ conversationId }: UseMCPSelectOptions) {
-  const key = conversationId ?? Constants.NEW_CONVO;
   const hasSetFetched = useRef<string | null>(null);
   const [ephemeralAgent, setEphemeralAgent] = useRecoilState(ephemeralAgentByConvoId(key));
   const { data: startupConfig } = useGetStartupConfig();