From e6a58d369da3de7b118c0b7f79ad04014cfdc406 Mon Sep 17 00:00:00 2001 From: NikitaMGrimm <65914808+NikitaMGrimm@users.noreply.github.com> Date: Tue, 6 Oct 2026 00:26:00 +0200 Subject: [PATCH 1/6] fix(web): render completed Mermaid blocks while streaming --- apps/web/src/components/ChatMarkdown.test.tsx | 68 +++++++++++++++++-- apps/web/src/components/ChatMarkdown.tsx | 12 ++-- .../src/components/chat/MermaidDiagram.tsx | 2 +- apps/web/src/index.css | 3 +- 4 files changed, 73 insertions(+), 12 deletions(-) diff --git a/apps/web/src/components/ChatMarkdown.test.tsx b/apps/web/src/components/ChatMarkdown.test.tsx index d55986a9589e..fe752f6bf2e2 100644 --- a/apps/web/src/components/ChatMarkdown.test.tsx +++ b/apps/web/src/components/ChatMarkdown.test.tsx @@ -18,11 +18,22 @@ import { Button } from "./ui/button"; import { setMarkdownTaskChecked } from "./files/filePreviewMode"; vi.mock("../hooks/useFileMetadata", () => ({ useFileMetadata: () => null })); -vi.mock("@effect/atom-react", () => ({ useAtomValue: () => null })); -vi.mock("./chat/MermaidDiagram", () => ({ - // Real Mermaid needs layout APIs jsdom lacks; a rendered diagram is an SVG. - MermaidDiagram: () => , +const { renderDiagram } = vi.hoisted(() => ({ + renderDiagram: vi.fn<(source: string) => Promise | undefined>(), })); +vi.mock("./chat/MermaidDiagram", async () => { + const { use } = await import("react"); + return { + // Real Mermaid needs layout APIs jsdom lacks; a rendered diagram is an SVG. + // Tests that return a promise from renderDiagram control when it appears. + MermaidDiagram({ source }: { source: string }) { + const pending = renderDiagram(source); + return ; + }, + }; +}); + +vi.mock("@effect/atom-react", () => ({ useAtomValue: () => null })); vi.mock("../hooks/useTheme", () => ({ useTheme: () => ({ resolvedTheme: "dark" }) })); vi.mock("../hooks/useSettings", async (importOriginal) => { const actual = await importOriginal(); @@ -171,6 +182,55 @@ describe("ChatMarkdown bare anchor placeholders", () => { }); }); +describe("ChatMarkdown Mermaid streaming", () => { + it.each([ + ["```mermaid\nflowchart LR\nA --> B", "\n```"], + ["~~~~mermaid\nflowchart LR\nA --> B\n~~~", "\n~~~~"], + ["> ```mermaid\n> flowchart LR\n> A --> B", "\n> ```"], + ["- Diagram\n\n ```mermaid\n flowchart LR\n A --> B", "\n ```"], + ])("reveals a finished fence before the message finishes: %s", async (open, closing) => { + vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true); + let renderer: ReactTestRenderer | undefined; + let finishRender!: (label: string) => void; + const pending = new Promise((resolve) => { + finishRender = resolve; + }); + renderDiagram.mockReset().mockReturnValue(pending); + const message = (text: string, isStreaming = true) => ( + + ); + const closed = `${open}${closing}\n\n`; + try { + await act(async () => { + renderer = create(message(open)); + }); + expect(renderDiagram).not.toHaveBeenCalled(); + await act(async () => { + renderer!.update(message(closed)); + }); + expect(renderDiagram).toHaveBeenCalled(); + expect(renderer!.root.findAllByProps({ role: "img" })).toHaveLength(0); + expect(renderer!.root.findAllByProps({ className: "chat-markdown-shiki" })).toHaveLength(0); + expect(renderer!.root.findByType("pre").props["aria-hidden"]).toBe(true); + + await act(async () => { + finishRender("Completed diagram"); + }); + const diagram = renderer!.root.findByProps({ role: "img" }); + for (const streaming of [true, false]) { + await act(async () => { + renderer!.update(message(`${closed}The remaining explanation.`, streaming)); + }); + expect(renderer!.root.findByProps({ role: "img" })).toBe(diagram); + } + } finally { + await act(async () => renderer?.unmount()); + vi.unstubAllGlobals(); + renderDiagram.mockReset(); + } + }); +}); + describe("ChatMarkdown context references", () => { it("renders text and image references through the chip renderer, with readable fallback", async () => { vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true); diff --git a/apps/web/src/components/ChatMarkdown.tsx b/apps/web/src/components/ChatMarkdown.tsx index a7a2b0c4eba2..e4ab9dbec675 100644 --- a/apps/web/src/components/ChatMarkdown.tsx +++ b/apps/web/src/components/ChatMarkdown.tsx @@ -1008,8 +1008,8 @@ function MarkdownCodeBlock({ } /** - * Mermaid fences render as a diagram once the response settles; streaming and - * the code toggle keep the highlighted source. + * Completed Mermaid fences render while the response continues. Unfinished + * fences and the code toggle keep the highlighted source. */ function MarkdownMermaidCodeBlock({ code, @@ -1066,9 +1066,9 @@ function MarkdownMermaidCodeBlock({ - Rendering diagram - + 
+                {code}
+
} > @@ -3370,7 +3370,7 @@ const CHAT_MARKDOWN_COMPONENTS = { code={codeBlock.code} fenceTitle={fenceTitle} theme={resolvedTheme} - isStreaming={isStreaming} + isStreaming={isStreaming && !isClosedCodeFence(node, text)} onExpand={(src) => expandMedia({ images: [{ src, name: "Mermaid diagram" }], index: 0 })} > {highlightedCode} diff --git a/apps/web/src/components/chat/MermaidDiagram.tsx b/apps/web/src/components/chat/MermaidDiagram.tsx index dd03bdc4ea10..c633cf7d9869 100644 --- a/apps/web/src/components/chat/MermaidDiagram.tsx +++ b/apps/web/src/components/chat/MermaidDiagram.tsx @@ -204,7 +204,7 @@ export function MermaidDiagram({ } return ( -
+