From c3624e6bbc3e03d41dc45149dcfddfb88f0e2850 Mon Sep 17 00:00:00 2001
From: Glen Maddern <glen@glenmaddern.com>
Date: Mon, 23 Jun 2025 16:09:15 +1000
Subject: [PATCH] Keep MCP modal in React tree to maintain connection

- Replace conditional rendering with CSS visibility (hidden/block)
- Remove early return null when modal is closed
- McpConnection component stays mounted to preserve MCP server connection
- Modal is always in DOM but visually hidden when isOpen is false
- Prevents MCP disconnection when modal is dismissed
---
 examples/chat-ui/src/components/McpServerModal.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/examples/chat-ui/src/components/McpServerModal.tsx b/examples/chat-ui/src/components/McpServerModal.tsx
index fbfbca7..d649d64 100644
--- a/examples/chat-ui/src/components/McpServerModal.tsx
+++ b/examples/chat-ui/src/components/McpServerModal.tsx
@@ -185,11 +185,9 @@ const McpServerModal: React.FC<McpServerModalProps> = ({
     }
   }
 
-  if (!isOpen) return null
-
   return (
     <>
-      <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
+      <div className={`fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4 ${isOpen ? 'block' : 'hidden'}`}>
         <div className="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[80vh] overflow-hidden">
           <div className="flex items-center justify-between p-6 border-b border-zinc-200">
             <h2 className="text-xl font-semibold text-zinc-900">MCP Servers</h2>