🔧 fix: MCP Selection Persist and UI Flicker Issues (#9324)

* refactor: useMCPSelect

    - Add useGetMCPTools to use in useMCPSelect and elsewhere hooks for fetching MCP tools
    - remove memoized key
    - remove use of `useChatContext` and require conversationId as prop

* feat: Add MCPPanelContext and integrate conversationId as prop for useMCPSelect across components

- Introduced MCPPanelContext to manage conversationId state.
- Updated MCPSelect, MCPSubMenu, and MCPConfigDialog to accept conversationId as a prop.
- Modified ToolsDropdown and BadgeRow to pass conversationId to relevant components.
- Refactored MCPPanel to utilize MCPPanelProvider for context management.

* fix: remove nested ternary in ServerInitializationSection

- Replaced conditional operator with if-else statements for better readability in determining button text based on server initialization state and reinitialization status.

* refactor: wrap setValueWrap in useCallback for performance optimization

* refactor: streamline useMCPSelect by consolidating storageKey definition

* fix: prevent clearing selections on page refresh by tracking initial load completion

* refactor: simplify concern of useMCPSelect hook

* refactor: move ConfigFieldDetail interface to common types for better reusability, isolate usage of `useGetMCPTools`

* refactor: integrate mcpServerNames into BadgeRowContext and update ToolsDropdown and MCPSelect components

client/src/hooks/MCP/useMCPServerManager.ts

@@ -8,10 +8,10 @@ import {
   useReinitializeMCPServerMutation,
 } from 'librechat-data-provider/react-query';
 import type { TUpdateUserPlugins, TPlugin } from 'librechat-data-provider';
-import type { ConfigFieldDetail } from '~/components/MCP/MCPConfigDialog';
+import type { ConfigFieldDetail } from '~/common';
 import { useMCPConnectionStatusQuery } from '~/data-provider/Tools/queries';
+import { useLocalize, useMCPSelect, useGetMCPTools } from '~/hooks';
 import { useGetStartupConfig } from '~/data-provider';
-import { useLocalize, useMCPSelect } from '~/hooks';
 
 interface ServerState {
   isInitializing: boolean;
@@ -21,13 +21,14 @@ interface ServerState {
   pollInterval: NodeJS.Timeout | null;
 }
 
-export function useMCPServerManager() {
+export function useMCPServerManager({ conversationId }: { conversationId?: string | null }) {
   const localize = useLocalize();
-  const { showToast } = useToastContext();
-  const mcpSelect = useMCPSelect();
-  const { data: startupConfig } = useGetStartupConfig();
-  const { mcpValues, setMCPValues, mcpToolDetails, isPinned, setIsPinned } = mcpSelect;
   const queryClient = useQueryClient();
+  const { showToast } = useToastContext();
+  const { mcpToolDetails } = useGetMCPTools();
+  const mcpSelect = useMCPSelect({ conversationId });
+  const { data: startupConfig } = useGetStartupConfig();
+  const { mcpValues, setMCPValues, isPinned, setIsPinned } = mcpSelect;
 
   const [isConfigModalOpen, setIsConfigModalOpen] = useState(false);
   const [selectedToolForConfig, setSelectedToolForConfig] = useState<TPlugin | null>(null);
@@ -90,7 +91,21 @@ export function useMCPServerManager() {
     [connectionStatusData?.connectionStatus],
   );
 
+  /** Filter disconnected servers when values change, but only after initial load
+   This prevents clearing selections on page refresh when servers haven't connected yet
+   */
+  const hasInitialLoadCompleted = useRef(false);
+
   useEffect(() => {
+    if (!connectionStatusData || Object.keys(connectionStatus).length === 0) {
+      return;
+    }
+
+    if (!hasInitialLoadCompleted.current) {
+      hasInitialLoadCompleted.current = true;
+      return;
+    }
+
     if (!mcpValues?.length) return;
 
     const connectedSelected = mcpValues.filter(
@@ -100,7 +115,7 @@ export function useMCPServerManager() {
     if (connectedSelected.length !== mcpValues.length) {
       setMCPValues(connectedSelected);
     }
-  }, [connectionStatus, mcpValues, setMCPValues]);
+  }, [connectionStatus, connectionStatusData, mcpValues, setMCPValues]);
 
   const updateServerState = useCallback((serverName: string, updates: Partial<ServerState>) => {
     setServerStates((prev) => {
@@ -486,12 +501,12 @@ export function useMCPServerManager() {
       };
     },
     [
+      isCancellable,
       mcpToolDetails,
+      isInitializing,
+      cancelOAuthFlow,
       connectionStatus,
       startupConfig?.mcpServers,
-      isInitializing,
-      isCancellable,
-      cancelOAuthFlow,
     ],
   );
 
@@ -547,7 +562,6 @@ export function useMCPServerManager() {
     mcpValues,
     setMCPValues,
 
-    mcpToolDetails,
     isPinned,
     setIsPinned,
     placeholderText,