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 17:35: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,91 @@
+import { expect, test } from "@playwright/test";
+
+import {
+  mockLangGraphAPI,
+  MOCK_RUN_ID,
+  MOCK_THREAD_ID,
+} from "./utils/mock-api";
+
+const mermaidContent = `Here is a relationship diagram.
+
+\`\`\`mermaid
+flowchart TD
+    A[Lin<br/>protagonist]
+    F[Gu<br/>daughter]
+    A -- "sealed memory" -.-> F
+\`\`\`
+`;
+
+test("historical run messages preview labelled dotted Mermaid arrows", async ({
+  page,
+}) => {
+  mockLangGraphAPI(page, {
+    threads: [
+      {
+        thread_id: MOCK_THREAD_ID,
+        title: "Mermaid history",
+        updated_at: "2026-05-24T04:47:01.123949+00:00",
+      },
+    ],
+  });
+
+  await page.route(/\/api\/langgraph\/threads\/[^/]+\/runs(\?|$)/, (route) =>
+    route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify([
+        {
+          run_id: MOCK_RUN_ID,
+          thread_id: MOCK_THREAD_ID,
+          status: "success",
+          created_at: "2026-05-24T04:46:42.565307+00:00",
+          updated_at: "2026-05-24T04:47:01.123949+00:00",
+        },
+      ]),
+    }),
+  );
+
+  await page.route(
+    `**/api/threads/${MOCK_THREAD_ID}/runs/${MOCK_RUN_ID}/messages`,
+    (route) =>
+      route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify({
+          data: [
+            {
+              thread_id: MOCK_THREAD_ID,
+              run_id: MOCK_RUN_ID,
+              event_type: "llm.ai.response",
+              category: "message",
+              content: {
+                content: mermaidContent,
+                additional_kwargs: {},
+                response_metadata: {},
+                type: "ai",
+                name: null,
+                id: "lc_run--issue-3193",
+                tool_calls: [],
+                invalid_tool_calls: [],
+              },
+              seq: 720,
+              created_at: "2026-05-24T04:47:01.123949+00:00",
+              metadata: {
+                caller: "lead_agent",
+                content_is_json: true,
+                content_is_dict: true,
+              },
+            },
+          ],
+          has_more: false,
+        }),
+      }),
+  );
+
+  await page.goto(`/workspace/chats/${MOCK_THREAD_ID}`);
+
+  await expect(page.getByLabel("Mermaid chart")).toBeVisible({
+    timeout: 15_000,
+  });
+  await expect(page.getByText("Mermaid Error:")).toHaveCount(0);
+});