From cda6d589d647aea253e865750bd66bb3d3acb502 Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Fri, 2 Jan 2026 13:17:07 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=9C=20refactor:=20Focus=20Rendering=20?=
 =?UTF-8?q?for=20Mermaid=20Diagram=20(#11181)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Increased the minimum container height from 100 to 200 for improved layout.
- Added state management for focus within the Mermaid component to enhance user interaction.
- Updated control visibility logic to include focus state, improving accessibility and user experience during interactions.
---
 .../components/Messages/Content/Mermaid.tsx   | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Messages/Content/Mermaid.tsx b/client/src/components/Messages/Content/Mermaid.tsx
index f19b3cbe94..9d830b3fdc 100644
--- a/client/src/components/Messages/Content/Mermaid.tsx
+++ b/client/src/components/Messages/Content/Mermaid.tsx
@@ -27,7 +27,7 @@ interface MermaidProps {
 const MIN_ZOOM = 0.25;
 const MAX_ZOOM = 4;
 const ZOOM_STEP = 0.25;
-const MIN_CONTAINER_HEIGHT = 100;
+const MIN_CONTAINER_HEIGHT = 200;
 const MAX_CONTAINER_HEIGHT = 500;
 
 const Mermaid: React.FC<MermaidProps> = memo(({ children, id, theme }) => {
@@ -50,6 +50,7 @@ const Mermaid: React.FC<MermaidProps> = memo(({ children, id, theme }) => {
   );
   const [containerWidth, setContainerWidth] = useState(700);
   const [isHovered, setIsHovered] = useState(false);
+  const [isFocusWithin, setIsFocusWithin] = useState(false);
   const [isTouchDevice, setIsTouchDevice] = useState(false);
   const [showMobileControls, setShowMobileControls] = useState(false);
 
@@ -408,7 +409,9 @@ const Mermaid: React.FC<MermaidProps> = memo(({ children, id, theme }) => {
     };
   }, [isPanning]);
 
-  const showControls = isTouchDevice ? showMobileControls || showCode : isHovered || showCode;
+  const showControls = isTouchDevice
+    ? showMobileControls || showCode
+    : isHovered || isFocusWithin || showCode;
 
   const handleContainerClick = useCallback(
     (e: React.MouseEvent | React.TouchEvent) => {
@@ -647,6 +650,12 @@ const Mermaid: React.FC<MermaidProps> = memo(({ children, id, theme }) => {
           )}
           onMouseEnter={() => setIsHovered(true)}
           onMouseLeave={() => setIsHovered(false)}
+          onFocus={() => setIsFocusWithin(true)}
+          onBlur={(e) => {
+            if (!e.currentTarget.contains(e.relatedTarget as Node)) {
+              setIsFocusWithin(false);
+            }
+          }}
           onClick={handleContainerClick}
         >
           <MermaidHeader
@@ -765,6 +774,12 @@ const Mermaid: React.FC<MermaidProps> = memo(({ children, id, theme }) => {
         )}
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
+        onFocus={() => setIsFocusWithin(true)}
+        onBlur={(e) => {
+          if (!e.currentTarget.contains(e.relatedTarget as Node)) {
+            setIsFocusWithin(false);
+          }
+        }}
         onClick={handleContainerClick}
       >
         <MermaidHeader