🔧 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/MCP/ServerInitializationSection.tsx

@@ -9,12 +9,14 @@ interface ServerInitializationSectionProps {
   serverName: string;
   requiresOAuth: boolean;
   hasCustomUserVars?: boolean;
+  conversationId?: string | null;
 }
 
 export default function ServerInitializationSection({
-  sidePanel = false,
   serverName,
   requiresOAuth,
+  conversationId,
+  sidePanel = false,
   hasCustomUserVars = false,
 }: ServerInitializationSectionProps) {
   const localize = useLocalize();
@@ -26,7 +28,7 @@ export default function ServerInitializationSection({
     isInitializing,
     isCancellable,
     getOAuthUrl,
-  } = useMCPServerManager();
+  } = useMCPServerManager({ conversationId });
 
   const serverStatus = connectionStatus[serverName];
   const isConnected = serverStatus?.connectionState === 'connected';
@@ -69,13 +71,18 @@ export default function ServerInitializationSection({
   const isReinit = shouldShowReinit;
   const outerClass = isReinit ? 'flex justify-start' : 'flex justify-end';
   const buttonVariant = isReinit ? undefined : 'default';
-  const buttonText = isServerInitializing
-    ? localize('com_ui_loading')
-    : isReinit
-      ? localize('com_ui_reinitialize')
-      : requiresOAuth
-        ? localize('com_ui_authenticate')
-        : localize('com_ui_mcp_initialize');
+
+  let buttonText = '';
+  if (isServerInitializing) {
+    buttonText = localize('com_ui_loading');
+  } else if (isReinit) {
+    buttonText = localize('com_ui_reinitialize');
+  } else if (requiresOAuth) {
+    buttonText = localize('com_ui_authenticate');
+  } else {
+    buttonText = localize('com_ui_mcp_initialize');
+  }
+
   const icon = isServerInitializing ? (
     <Spinner className="h-4 w-4" />
   ) : (