fix(frontend): fix Mermaid preview failure in historical messages (#3196)

* fix(frontend): render historical mermaid diagrams * fix(frontend): address mermaid review feedback * Stabilize cancel lifecycle test * fix(frontend): handle mermaid fence variants * fix(frontend): normalize mermaid arrow spacing * fix(frontend): handle mermaid CRLF fences * chore: keep mermaid fix frontend-scoped --------- Co-authored-by: Willem Jiang <willem.jiang@gmail.com>
2026-06-10 09:25:57 +00:00 · 2026-05-28 18:20:02 +08:00
parent 737abc0e45
commit 2fdfff0db3
6 changed files with 341 additions and 2 deletions
@@ -0,0 +1,130 @@
+import { expect, test } from "vitest";
+
+import { normalizeMermaidMarkdown } from "@/core/streamdown/mermaid";
+import { preprocessStreamdownMarkdown } from "@/core/streamdown/preprocess";
+
+test("normalizes labelled dotted arrows inside mermaid fences", () => {
+  const markdown = [
+    "```mermaid",
+    "flowchart TD",
+    '    A -- "sealed memory" -.-> F',
+    '    B -- "resonance" -.-> A',
+    "```",
+  ].join("\n");
+
+  expect(normalizeMermaidMarkdown(markdown)).toBe(
+    [
+      "```mermaid",
+      "flowchart TD",
+      '    A -. "sealed memory" .-> F',
+      '    B -. "resonance" .-> A',
+      "```",
+    ].join("\n"),
+  );
+});
+
+test("does not rewrite non-mermaid code fences", () => {
+  const markdown = ["```text", 'A -- "sealed memory" -.-> F', "```"].join("\n");
+
+  expect(normalizeMermaidMarkdown(markdown)).toBe(markdown);
+});
+
+test("preserves mermaid fence metadata", () => {
+  const markdown = [
+    '```mermaid title="relationships"',
+    'A -- "sealed memory" -.-> F',
+    "```",
+  ].join("\n");
+
+  expect(normalizeMermaidMarkdown(markdown)).toBe(
+    [
+      '```mermaid title="relationships"',
+      'A -. "sealed memory" .-> F',
+      "```",
+    ].join("\n"),
+  );
+});
+
+test("normalizes labelled dotted arrows with inconsistent spacing", () => {
+  const markdown = [
+    "```mermaid",
+    'A--"sealed memory"-.->F',
+    'B --"resonance"-.-> A',
+    'C-- "handoff" -.->D',
+    "```",
+  ].join("\n");
+
+  expect(normalizeMermaidMarkdown(markdown)).toBe(
+    [
+      "```mermaid",
+      'A -. "sealed memory" .-> F',
+      'B -. "resonance" .-> A',
+      'C -. "handoff" .-> D',
+      "```",
+    ].join("\n"),
+  );
+});
+
+test("normalizes mermaid fences with CRLF line endings", () => {
+  const markdown = ["```mermaid", 'A--"sealed memory"-.->F', "```"].join(
+    "\r\n",
+  );
+
+  expect(normalizeMermaidMarkdown(markdown)).toBe(
+    ["```mermaid", 'A -. "sealed memory" .-> F', "```"].join("\n"),
+  );
+});
+
+test("preserves empty mermaid fences", () => {
+  const markdown = ["```mermaid", "```"].join("\n");
+
+  expect(normalizeMermaidMarkdown(markdown)).toBe(markdown);
+});
+
+test("normalizes labelled dotted arrows inside tilde mermaid fences", () => {
+  const markdown = ["~~~mermaid", 'A -- "sealed memory" -.-> F', "~~~"].join(
+    "\n",
+  );
+
+  expect(normalizeMermaidMarkdown(markdown)).toBe(
+    ["~~~mermaid", 'A -. "sealed memory" .-> F', "~~~"].join("\n"),
+  );
+});
+
+test("normalizes mermaid fences with longer backtick closing fences", () => {
+  const markdown = ["```mermaid", 'A -- "sealed memory" -.-> F', "````"].join(
+    "\n",
+  );
+
+  expect(normalizeMermaidMarkdown(markdown)).toBe(
+    ["```mermaid", 'A -. "sealed memory" .-> F', "````"].join("\n"),
+  );
+});
+
+test("normalizes mermaid fences with longer tilde closing fences", () => {
+  const markdown = ["~~~mermaid", 'A -- "sealed memory" -.-> F', "~~~~"].join(
+    "\n",
+  );
+
+  expect(normalizeMermaidMarkdown(markdown)).toBe(
+    ["~~~mermaid", 'A -. "sealed memory" .-> F', "~~~~"].join("\n"),
+  );
+});
+
+test("preprocesses markdown only when mermaid normalization can apply", () => {
+  const textOnlyMarkdown = 'A -- "sealed memory" -.-> F';
+  const plainMermaidMarkdown = ["```mermaid", "A --> F", "```"].join("\n");
+  const labelledMermaidMarkdown = [
+    "```mermaid",
+    'A -- "sealed memory" -.-> F',
+    "```",
+  ].join("\n");
+
+  expect(preprocessStreamdownMarkdown(textOnlyMarkdown)).toBe(textOnlyMarkdown);
+  expect(preprocessStreamdownMarkdown(plainMermaidMarkdown)).toBe(
+    plainMermaidMarkdown,
+  );
+  expect(preprocessStreamdownMarkdown(labelledMermaidMarkdown)).toBe(
+    ["```mermaid", 'A -. "sealed memory" .-> F', "```"].join("\n"),
+  );
+});