diff --git a/app/components/exporter.tsx b/app/components/exporter.tsx
index f26b3a7d..f9d86a55 100644
--- a/app/components/exporter.tsx
+++ b/app/components/exporter.tsx
@@ -2,7 +2,15 @@
 import { ChatMessage, useAppConfig, useChatStore } from "../store";
 import Locale from "../locales";
 import styles from "./exporter.module.scss";
-import { List, ListItem, Modal, Select, showModal, showToast } from "./ui-lib";
+import {
+  List,
+  ListItem,
+  Modal,
+  Select,
+  showImageModal,
+  showModal,
+  showToast,
+} from "./ui-lib";
 import { IconButton } from "./button";
 import { copyToClipboard, downloadAs, useMobileScreen } from "../utils";
 
@@ -359,24 +367,6 @@ function ExportAvatar(props: { avatar: string }) {
   return <Avatar avatar={props.avatar}></Avatar>;
 }
 
-export function showImageModal(img: string) {
-  showModal({
-    title: Locale.Export.Image.Modal,
-    children: (
-      <div>
-        <img
-          src={img}
-          alt="preview"
-          style={{
-            maxWidth: "100%",
-          }}
-        ></img>
-      </div>
-    ),
-    defaultMax: true,
-  });
-}
-
 export function ImagePreviewer(props: {
   messages: ChatMessage[];
   topic: string;
diff --git a/app/components/markdown.tsx b/app/components/markdown.tsx
index 4db5f573..3168641c 100644
--- a/app/components/markdown.tsx
+++ b/app/components/markdown.tsx
@@ -12,6 +12,7 @@ import mermaid from "mermaid";
 import LoadingIcon from "../icons/three-dots.svg";
 import React from "react";
 import { useDebouncedCallback, useThrottledCallback } from "use-debounce";
+import { showImageModal } from "./ui-lib";
 
 export function Mermaid(props: { code: string }) {
   const ref = useRef<HTMLDivElement>(null);
@@ -37,11 +38,13 @@ export function Mermaid(props: { code: string }) {
     if (!svg) return;
     const text = new XMLSerializer().serializeToString(svg);
     const blob = new Blob([text], { type: "image/svg+xml" });
-    const url = URL.createObjectURL(blob);
-    const win = window.open(url);
-    if (win) {
-      win.onload = () => URL.revokeObjectURL(url);
-    }
+    console.log(blob);
+    // const url = URL.createObjectURL(blob);
+    // const win = window.open(url);
+    // if (win) {
+    //   win.onload = () => URL.revokeObjectURL(url);
+    // }
+    showImageModal(URL.createObjectURL(blob));
   }
 
   if (hasError) {
diff --git a/app/components/ui-lib.tsx b/app/components/ui-lib.tsx
index da520bd8..512044dc 100644
--- a/app/components/ui-lib.tsx
+++ b/app/components/ui-lib.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 import styles from "./ui-lib.module.scss";
 import LoadingIcon from "../icons/three-dots.svg";
 import CloseIcon from "../icons/close.svg";
@@ -414,3 +415,20 @@ export function showPrompt(content: any, value = "", rows = 3) {
     );
   });
 }
+
+export function showImageModal(img: string) {
+  showModal({
+    title: Locale.Export.Image.Modal,
+    children: (
+      <div>
+        <img
+          src={img}
+          alt="preview"
+          style={{
+            maxWidth: "100%",
+          }}
+        ></img>
+      </div>
+    ),
+  });
+}