From e854967e94b26f4966146f5d43341d5cb96817df Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Sun, 28 Dec 2025 11:09:17 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=9C=E2=80=8D=E2=99=80=EF=B8=8F=20fix:?=
 =?UTF-8?q?=20Mermaid=20Dialog=20UI=20Improvements=20(#11125)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor(Mermaid): enhance dialog UI with close button and improved styling

* refactor(Mermaid): add dialog copy functionality and improve button styling

- Introduced state management for dialog copy status with visual feedback.
- Enhanced button styles for better usability and consistency across the component.
- Updated dialog content styling for improved visual hierarchy.
---
 .../components/Messages/Content/Mermaid.tsx   | 40 +++++++++++--------
 1 file changed, 24 insertions(+), 16 deletions(-)

diff --git a/client/src/components/Messages/Content/Mermaid.tsx b/client/src/components/Messages/Content/Mermaid.tsx
index 33e88d4353..2e81f6c1d4 100644
--- a/client/src/components/Messages/Content/Mermaid.tsx
+++ b/client/src/components/Messages/Content/Mermaid.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useMemo, useState, useRef, useCallback, memo } from 'react';
 import copy from 'copy-to-clipboard';
 import {
+  X,
   ZoomIn,
   Expand,
   ZoomOut,
@@ -15,6 +16,7 @@ import {
   OGDialog,
   Clipboard,
   CheckMark,
+  OGDialogClose,
   OGDialogTitle,
   OGDialogContent,
 } from '@librechat/client';
@@ -149,11 +151,19 @@ const Mermaid: React.FC<MermaidProps> = memo(({ children, id, theme }) => {
     }, 3000);
   }, [children]);
 
+  const [isDialogCopied, setIsDialogCopied] = useState(false);
   const handleDialogCopy = useCallback(() => {
     copy(children.trim(), { format: 'text/plain' });
+    setIsDialogCopied(true);
     requestAnimationFrame(() => {
       dialogCopyButtonRef.current?.focus();
     });
+    setTimeout(() => {
+      setIsDialogCopied(false);
+      requestAnimationFrame(() => {
+        dialogCopyButtonRef.current?.focus();
+      });
+    }, 3000);
   }, [children]);
 
   // Zoom controls copy with focus restoration
@@ -345,7 +355,7 @@ const Mermaid: React.FC<MermaidProps> = memo(({ children, id, theme }) => {
             ref={showCodeButtonRef}
             variant="ghost"
             size="sm"
-            className="h-auto gap-1 rounded-sm px-1 py-0 text-xs text-gray-200 hover:bg-gray-600 hover:text-white focus-visible:ring-white focus-visible:ring-offset-0"
+            className="h-auto min-w-[6rem] gap-1 rounded-sm px-1 py-0 text-xs text-gray-200 hover:bg-gray-600 hover:text-white focus-visible:ring-white focus-visible:ring-offset-0"
             onClick={handleToggleCode}
           >
             {showCode ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
@@ -358,17 +368,8 @@ const Mermaid: React.FC<MermaidProps> = memo(({ children, id, theme }) => {
             className="h-auto gap-1 rounded-sm px-1 py-0 text-xs text-gray-200 hover:bg-gray-600 hover:text-white focus-visible:ring-white focus-visible:ring-offset-0"
             onClick={handleCopy}
           >
-            {isCopied ? (
-              <>
-                <CheckMark className="h-[18px] w-[18px]" />
-                {localize('com_ui_copied')}
-              </>
-            ) : (
-              <>
-                <Clipboard />
-                {localize('com_ui_copy_code')}
-              </>
-            )}
+            {isCopied ? <CheckMark className="h-[18px] w-[18px]" /> : <Clipboard />}
+            {localize('com_ui_copy_code')}
           </Button>
         </div>
       )}
@@ -496,15 +497,18 @@ const Mermaid: React.FC<MermaidProps> = memo(({ children, id, theme }) => {
   // Full-screen dialog - rendered inline, not as function component to avoid recreation
   const expandedDialog = (
     <OGDialog open={isDialogOpen} onOpenChange={setIsDialogOpen} triggerRef={expandButtonRef}>
-      <OGDialogContent className="h-[85vh] max-h-[85vh] w-[90vw] max-w-[90vw] border-border-light bg-surface-primary p-0">
-        <OGDialogTitle className="flex items-center justify-between rounded-t-md bg-gray-700 px-4 py-2 font-sans text-xs text-gray-200">
+      <OGDialogContent
+        showCloseButton={false}
+        className="h-[85vh] max-h-[85vh] w-[90vw] max-w-[90vw] gap-0 overflow-hidden border-border-light bg-surface-primary-alt p-0"
+      >
+        <OGDialogTitle className="flex h-10 items-center justify-between bg-gray-700 px-4 font-sans text-xs text-gray-200">
           <span>{localize('com_ui_mermaid')}</span>
           <div className="flex gap-2">
             <Button
               ref={dialogShowCodeButtonRef}
               variant="ghost"
               size="sm"
-              className="h-auto gap-1 rounded-sm px-1 py-0 text-xs text-gray-200 hover:bg-gray-600 hover:text-white focus-visible:ring-white focus-visible:ring-offset-0"
+              className="h-auto min-w-[6rem] gap-1 rounded-sm px-1 py-0 text-xs text-gray-200 hover:bg-gray-600 hover:text-white focus-visible:ring-white focus-visible:ring-offset-0"
               onClick={handleToggleDialogCode}
             >
               {dialogShowCode ? (
@@ -521,9 +525,13 @@ const Mermaid: React.FC<MermaidProps> = memo(({ children, id, theme }) => {
               className="h-auto gap-1 rounded-sm px-1 py-0 text-xs text-gray-200 hover:bg-gray-600 hover:text-white focus-visible:ring-white focus-visible:ring-offset-0"
               onClick={handleDialogCopy}
             >
-              <Clipboard />
+              {isDialogCopied ? <CheckMark className="h-[18px] w-[18px]" /> : <Clipboard />}
               {localize('com_ui_copy_code')}
             </Button>
+            <OGDialogClose className="rounded-sm p-1 text-gray-200 hover:bg-gray-600 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white">
+              <X className="h-4 w-4" />
+              <span className="sr-only">{localize('com_ui_close')}</span>
+            </OGDialogClose>
           </div>
         </OGDialogTitle>
         {dialogShowCode && (