Stabilize write artifact previews (#3172)

2026-05-24 00:45:57 +00:00 · 2026-05-23 16:56:14 +08:00
parent a64a39dbc0
commit 604fcbb9d2
7 changed files with 1022 additions and 46 deletions
@@ -0,0 +1,174 @@
+import { expect, test } from "@playwright/test";
+
+import { mockLangGraphAPI } from "./utils/mock-api";
+
+const ARTIFACT_PATH = "/artifact-fixtures/report.html";
+const MARKDOWN_ARTIFACT_PATH = "/artifact-fixtures/report.md";
+const JSON_ARTIFACT_PATH = "/artifact-fixtures/report.json";
+const IN_PROGRESS_THREAD_ID = "00000000-0000-0000-0000-000000003119";
+const COMPLETE_THREAD_ID = "00000000-0000-0000-0000-000000003120";
+const MARKDOWN_THREAD_ID = "00000000-0000-0000-0000-000000003121";
+const JSON_THREAD_ID = "00000000-0000-0000-0000-000000003122";
+
+function writeFileMessages({
+  path = ARTIFACT_PATH,
+  content = "<!doctype html><html><body><h1>Report draft</h1><p>测试内容</p></body></html>",
+  toolResult,
+}: {
+  path?: string;
+  content?: string;
+  toolResult?: string;
+} = {}) {
+  const messages: unknown[] = [
+    {
+      type: "human",
+      id: "msg-human-artifact",
+      content: [{ type: "text", text: "Create a report artifact" }],
+    },
+    {
+      type: "ai",
+      id: "msg-ai-write-artifact",
+      content: "",
+      tool_calls: [
+        {
+          id: "write-file-artifact",
+          name: "write_file",
+          args: {
+            description: "Writing report artifact",
+            path,
+            content,
+          },
+        },
+      ],
+    },
+  ];
+
+  if (toolResult !== undefined) {
+    messages.push({
+      type: "tool",
+      id: "msg-tool-write-artifact",
+      name: "write_file",
+      tool_call_id: "write-file-artifact",
+      content: toolResult,
+    });
+  }
+
+  return messages;
+}
+
+test.describe("Artifact preview stability", () => {
+  test("renders preview iframe for an in-progress write artifact", async ({
+    page,
+  }) => {
+    mockLangGraphAPI(page, {
+      threads: [
+        {
+          thread_id: IN_PROGRESS_THREAD_ID,
+          title: "Artifact preview in progress",
+          messages: writeFileMessages(),
+        },
+      ],
+    });
+
+    await page.goto(`/workspace/chats/${IN_PROGRESS_THREAD_ID}`);
+
+    await expect(page.getByText(ARTIFACT_PATH)).toBeVisible({
+      timeout: 15_000,
+    });
+    await page.getByText(ARTIFACT_PATH).click();
+
+    const artifactsPanel = page.locator("#artifacts");
+    await expect(artifactsPanel.getByText("report.html")).toBeVisible();
+    await expect(
+      artifactsPanel.locator('iframe[title="Artifact preview"]'),
+    ).toBeVisible();
+  });
+
+  test("renders preview iframe after the write artifact succeeds", async ({
+    page,
+  }) => {
+    mockLangGraphAPI(page, {
+      threads: [
+        {
+          thread_id: COMPLETE_THREAD_ID,
+          title: "Artifact preview complete",
+          messages: writeFileMessages({ toolResult: "OK" }),
+        },
+      ],
+    });
+
+    await page.goto(`/workspace/chats/${COMPLETE_THREAD_ID}`);
+
+    await expect(page.getByText(ARTIFACT_PATH)).toBeVisible({
+      timeout: 15_000,
+    });
+    await page.getByText(ARTIFACT_PATH).click();
+
+    const artifactsPanel = page.locator("#artifacts");
+    await expect(artifactsPanel.getByText("report.html")).toBeVisible();
+    await expect(
+      artifactsPanel.locator('iframe[title="Artifact preview"]'),
+    ).toBeVisible();
+  });
+
+  test("renders markdown preview for an in-progress write artifact", async ({
+    page,
+  }) => {
+    mockLangGraphAPI(page, {
+      threads: [
+        {
+          thread_id: MARKDOWN_THREAD_ID,
+          title: "Markdown artifact preview in progress",
+          messages: writeFileMessages({
+            path: MARKDOWN_ARTIFACT_PATH,
+            content: "# Markdown draft\n\n- 测试内容 1\n- English term",
+          }),
+        },
+      ],
+    });
+
+    await page.goto(`/workspace/chats/${MARKDOWN_THREAD_ID}`);
+
+    await expect(page.getByText(MARKDOWN_ARTIFACT_PATH)).toBeVisible({
+      timeout: 15_000,
+    });
+    await page.getByText(MARKDOWN_ARTIFACT_PATH).click();
+
+    const artifactsPanel = page.locator("#artifacts");
+    await expect(artifactsPanel.getByText("report.md")).toBeVisible();
+    await expect(artifactsPanel.getByText("Markdown draft")).toBeVisible();
+    await expect(artifactsPanel.getByText("测试内容 1")).toBeVisible();
+  });
+
+  test("renders code view for an in-progress non-preview write artifact", async ({
+    page,
+  }) => {
+    mockLangGraphAPI(page, {
+      threads: [
+        {
+          thread_id: JSON_THREAD_ID,
+          title: "JSON artifact code view in progress",
+          messages: writeFileMessages({
+            path: JSON_ARTIFACT_PATH,
+            content:
+              '{\n  "status": "draft",\n  "中文字段": "测试内容",\n  "count": 3\n}',
+          }),
+        },
+      ],
+    });
+
+    await page.goto(`/workspace/chats/${JSON_THREAD_ID}`);
+
+    await expect(page.getByText(JSON_ARTIFACT_PATH)).toBeVisible({
+      timeout: 15_000,
+    });
+    await page.getByText(JSON_ARTIFACT_PATH).click();
+
+    const artifactsPanel = page.locator("#artifacts");
+    await expect(artifactsPanel.getByText("report.json")).toBeVisible();
+    await expect(artifactsPanel.getByText('"status": "draft"')).toBeVisible();
+    await expect(
+      artifactsPanel.getByText('"中文字段": "测试内容"'),
+    ).toBeVisible();
+  });
+});