(null)
@@ -143,13 +145,13 @@ export function CodeBlock({ code, lang, streaming, className, lineNumbers = fals
[streaming, highlighting, streamedBody, trimmed, lang, loaded],
)
const [copied, setCopied] = useState(false)
+ const [showSource, setShowSource] = useState(false)
+ const previewAvailable = preview !== undefined && streaming !== true
+ const showingPreview = previewAvailable && !showSource
const onCopy = useCallback(() => {
if (copied) return
- /* v8 ignore next -- both arms always mount a ; trimmed is the
- typed fallback if the DOM shape ever diverges. */
- const text = rootRef.current?.querySelector('pre')?.textContent ?? trimmed
- void writeClipboard(text).then((ok) => {
+ void writeClipboard(trimmed).then((ok) => {
if (!ok) return
setCopied(true)
window.setTimeout(() => { setCopied(false) }, 1000)
@@ -181,13 +183,18 @@ export function CodeBlock({ code, lang, streaming, className, lineNumbers = fals
{lang ?? ''}
+ {previewAvailable && (
+
+ )}
- {body}
+ {showingPreview ? preview.content : body}
)
}
diff --git a/packages/client/ui-primitives/src/markdown/MermaidPreview.module.css b/packages/client/ui-primitives/src/markdown/MermaidPreview.module.css
new file mode 100644
index 0000000000..bd24e36251
--- /dev/null
+++ b/packages/client/ui-primitives/src/markdown/MermaidPreview.module.css
@@ -0,0 +1,26 @@
+.canvas {
+ overflow: auto;
+ padding: 16px;
+ background: var(--dsw-static-neutral-00);
+ border-radius: 0 0 12px 12px;
+}
+
+.diagram {
+ display: block;
+ max-width: 100%;
+ height: auto;
+ margin: 0 auto;
+}
+
+.status {
+ padding: 16px;
+ color: var(--dsw-alias-label-secondary);
+}
+
+.staging {
+ position: fixed;
+ top: 0;
+ left: -100000px;
+ visibility: hidden;
+ pointer-events: none;
+}
diff --git a/packages/client/ui-primitives/src/markdown/MermaidPreview.tsx b/packages/client/ui-primitives/src/markdown/MermaidPreview.tsx
new file mode 100644
index 0000000000..b59a09a48c
--- /dev/null
+++ b/packages/client/ui-primitives/src/markdown/MermaidPreview.tsx
@@ -0,0 +1,42 @@
+/** Read-only diagram preview with source fallback and per-source async ownership. */
+
+import { useEffect, useState } from 'react'
+import { renderMermaid } from './mermaid.ts'
+import css from './MermaidPreview.module.css'
+
+/** Localized preview states; the diagram source remains verbatim. */
+export interface MermaidPreviewLabels {
+ diagram: string
+ loading: string
+ error: string
+}
+
+type Result = { code: string; src: string } | { code: string; error: true }
+
+/**
+ * Display a complete Mermaid document on a light diagram canvas, or its source if rendering fails.
+ * @param props - Source and complete localized labels. Changing source discards the previous result.
+ * @returns A loading status, an inert SVG image, or an error with the original source.
+ */
+export function MermaidPreview({ code, labels }: { code: string; labels: MermaidPreviewLabels }) {
+ const [result, setResult] = useState(null)
+ useEffect(() => {
+ const controller = new AbortController()
+ void renderMermaid(code, controller.signal).then(
+ (src) => { if (!controller.signal.aborted) setResult({ code, src }) },
+ () => { if (!controller.signal.aborted) setResult({ code, error: true }) },
+ )
+ return () => { controller.abort() }
+ }, [code])
+
+ if (result?.code !== code) return {labels.loading}
+ if ('error' in result) {
+ return (
+
+
{labels.error}
+
{code}
+
