🔧 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/components/SidePanel/MCP/MCPPanel.tsx

@@ -8,15 +8,16 @@ import type { TUpdateUserPlugins } from 'librechat-data-provider';
 import ServerInitializationSection from '~/components/MCP/ServerInitializationSection';
 import { useMCPConnectionStatusQuery } from '~/data-provider/Tools/queries';
 import CustomUserVarsSection from '~/components/MCP/CustomUserVarsSection';
-import BadgeRowProvider from '~/Providers/BadgeRowContext';
+import { MCPPanelProvider, useMCPPanelContext } from '~/Providers';
 import { useGetStartupConfig } from '~/data-provider';
 import MCPPanelSkeleton from './MCPPanelSkeleton';
 import { useLocalize } from '~/hooks';
 
 function MCPPanelContent() {
   const localize = useLocalize();
-  const { showToast } = useToastContext();
   const queryClient = useQueryClient();
+  const { showToast } = useToastContext();
+  const { conversationId } = useMCPPanelContext();
   const { data: startupConfig, isLoading: startupConfigLoading } = useGetStartupConfig();
   const { data: connectionStatusData } = useMCPConnectionStatusQuery();
   const [selectedServerNameForEditing, setSelectedServerNameForEditing] = useState<string | null>(
@@ -153,6 +154,7 @@ function MCPPanelContent() {
 
         <ServerInitializationSection
           sidePanel={true}
+          conversationId={conversationId}
           serverName={selectedServerNameForEditing}
           requiresOAuth={serverStatus?.requiresOAuth || false}
           hasCustomUserVars={
@@ -204,8 +206,8 @@ function MCPPanelContent() {
 
 export default function MCPPanel() {
   return (
-    <BadgeRowProvider>
+    <MCPPanelProvider>
       <MCPPanelContent />
-    </BadgeRowProvider>
+    </MCPPanelProvider>
   );
 }