# Files changed · PR \#22691 · pingdotgg/t3code

[View on GitCafe](https://git.cafe/pingdotgg/t3code/pull/22691/diffs)

Repository: [pingdotgg/t3code](https://git.cafe/pingdotgg/t3code)

Visibility: public

[refactor\(web\): the Mermaid code block lives in its own component file](https://git.cafe/pingdotgg/t3code/pull/22691.md)

Version: 6

Head commit: 0a9ade9156c9a9d199b97b3042b01213c23888cb

Base commit: eadb13d18e5902bba671f0fa814711ea0a479180

Comparison base: eadb13d18e5902bba671f0fa814711ea0a479180

Showing up to 20 entries from this revision. If the pull request changes, reopen the first page before continuing.

## apps/web/src/components/ChatMarkdown.tsx

Status: modified; +1; −78

```diff
@@ -27,7 +27,6 @@
 } from "@t3tools/shared/composerContextClipboard";
 import {
   ChevronRightIcon,
-  CodeIcon,
   FileSpreadsheetIcon,
   FileTextIcon,
   GlobeIcon,
@@ -41,7 +40,6 @@
   PresentationIcon,
   SparklesIcon,
   TriangleAlertIcon,
-  WorkflowIcon,
   type LucideIcon,
 } from "lucide-react";
 import { Check, Copy, Maximize2, Minimize2 } from "lucide";
@@ -154,7 +152,6 @@
 import { resolveDiffThemeName } from "../lib/diffRendering";
 import { GitHubIcon } from "./Icons";
 import { RenderErrorBoundary } from "./RenderErrorBoundary";
-import { MermaidDiagram } from "./chat/MermaidDiagram";
 import { useRenderedAppearance } from "../hooks/useTheme";
 import { getClientSettings, useClientSettings } from "../hooks/useSettings";
 import {
@@ -229,6 +226,7 @@
 import { resolveLinkTarget } from "../browser/browserLinkTarget";
 import { PullRequestLinkPreview } from "./pullRequest/PullRequestLinkPreview";
 import { MarkdownCodeBlock, SuspenseShikiCodeBlock } from "./chat/MarkdownCodeBlock";
+import { MarkdownMermaidCodeBlock } from "./chat/MarkdownMermaidCodeBlock";
 import {
   extractCodeBlock,
   extractFenceLanguage,
@@ -657,81 +655,6 @@
   );
 }
 
-function MarkdownMermaidCodeBlock({
-  code,
-  fenceTitle,
-  theme,
-  isStreaming,
-  onExpand,
-  children,
-}: {
-  code: string;
-  fenceTitle: string | null;
-  theme: "light" | "dark";
-  isStreaming: boolean;
-  onExpand: (imageUrl: string) => void;
-  children: ReactNode;
-}) {
-  const [showCode, setShowCode] = useState(false);
-  const searching = use(MarkdownFindContext);
-  const revealSource = () => setShowCode(true);
-  const sourceRevealRef = findRevealRef(revealSource);
-  const showDiagram = !showCode && !isStreaming && code.trim().length > 0;
-  const toggleLabel = showCode ? "Show diagram" : "Show code";
-  return (
-    <MarkdownCodeBlock
-      code={code}
-      language="mermaid"
-      fenceTitle={fenceTitle}
-      theme={theme}
-      isStreaming={isStreaming}
-      canWrap={!showDiagram}
-      diagram={showDiagram}
-      viewToggle={
-        isStreaming ? null : (
-          <Tooltip>
-            <TooltipTrigger
-              render={
-                <Button
-                  type="button"
-                  variant="ghost-muted"
-                  size="icon-xs"
-                  onClick={() => setShowCode((value) => !value)}
-                  aria-label={toggleLabel}
-                />
-              }
-            >
-              {showCode ? <WorkflowIcon className="size-3" /> : <CodeIcon className="size-3" />}
-            </TooltipTrigger>
-            <TooltipPopup side="top">{toggleLabel}</TooltipPopup>
-          </Tooltip>
-        )
-      }
-    >
-      {showDiagram ? (
-        <RenderErrorBoundary resetKeys={[code, theme]} fallback={children}>
-          <Suspense
-            fallback={
-              <pre className="invisible" aria-hidden>
-                {code}
-              </pre>
-            }
-          >
-            <MermaidDiagram source={code} onExpand={onExpand} />
-          </Suspense>
-          {searching ? (
-            <pre ref={sourceRevealRef} hidden aria-hidden>
-              {code}
-            </pre>
-          ) : null}
-        </RenderErrorBoundary>
-      ) : (
-        children
-      )}
-    </MarkdownCodeBlock>
-  );
-}
-
 interface MarkdownFileLinkProps {
   environmentId: EnvironmentId | null;
   href: string;
```

## apps/web/src/components/chat/MarkdownMermaidCodeBlock.tsx

Status: added; +84; −0

```diff
@@ -1,0 +1,84 @@
+import { CodeIcon, WorkflowIcon } from "lucide-react";
+import { Suspense, use, useState, type ReactNode } from "react";
+
+import { RenderErrorBoundary } from "../RenderErrorBoundary";
+import { Button } from "../ui/button";
+import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
+import { MarkdownCodeBlock } from "./MarkdownCodeBlock";
+import { findRevealRef, MarkdownFindContext } from "./markdownFindContext";
+import { MermaidDiagram } from "./MermaidDiagram";
+
+export function MarkdownMermaidCodeBlock({
+  code,
+  fenceTitle,
+  theme,
+  isStreaming,
+  onExpand,
+  children,
+}: {
+  code: string;
+  fenceTitle: string | null;
+  theme: "light" | "dark";
+  isStreaming: boolean;
+  onExpand: (imageUrl: string) => void;
+  children: ReactNode;
+}) {
+  const [showCode, setShowCode] = useState(false);
+  const searching = use(MarkdownFindContext);
+  const revealSource = () => setShowCode(true);
+  const sourceRevealRef = findRevealRef(revealSource);
+  const showDiagram = !showCode && !isStreaming && code.trim().length > 0;
+  const toggleLabel = showCode ? "Show diagram" : "Show code";
+  return (
+    <MarkdownCodeBlock
+      code={code}
+      language="mermaid"
+      fenceTitle={fenceTitle}
+      theme={theme}
+      isStreaming={isStreaming}
+      canWrap={!showDiagram}
+      diagram={showDiagram}
+      viewToggle={
+        isStreaming ? null : (
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <Button
+                  type="button"
+                  variant="ghost-muted"
+                  size="icon-xs"
+                  onClick={() => setShowCode((value) => !value)}
+                  aria-label={toggleLabel}
+                />
+              }
+            >
+              {showCode ? <WorkflowIcon className="size-3" /> : <CodeIcon className="size-3" />}
+            </TooltipTrigger>
+            <TooltipPopup side="top">{toggleLabel}</TooltipPopup>
+          </Tooltip>
+        )
+      }
+    >
+      {showDiagram ? (
+        <RenderErrorBoundary resetKeys={[code, theme]} fallback={children}>
+          <Suspense
+            fallback={
+              <pre className="invisible" aria-hidden>
+                {code}
+              </pre>
+            }
+          >
+            <MermaidDiagram source={code} onExpand={onExpand} />
+          </Suspense>
+          {searching ? (
+            <pre ref={sourceRevealRef} hidden aria-hidden>
+              {code}
+            </pre>
+          ) : null}
+        </RenderErrorBoundary>
+      ) : (
+        children
+      )}
+    </MarkdownCodeBlock>
+  );
+}
```