Stabilize write artifact previews (#3172)

2026-05-25 01:15:58 +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();
+  });
+});
@@ -25,6 +25,8 @@ export type MockThread = {
  title?: string;
  updated_at?: string;
  agent_name?: string;
+  messages?: unknown[];
+  artifacts?: string[];
 };

 export type MockAgent = {
@@ -113,7 +115,7 @@ export function mockLangGraphAPI(page: Page, options?: MockAPIOptions) {
          {
            values: {
              title: matchingThread.title ?? "Untitled",
-              messages: [
+              messages: matchingThread.messages ?? [
                {
                  type: "human",
                  id: `msg-human-${matchingThread.thread_id}`,
@@ -125,6 +127,7 @@ export function mockLangGraphAPI(page: Page, options?: MockAPIOptions) {
                  content: `Response in thread ${matchingThread.title ?? matchingThread.thread_id}`,
                },
              ],
+              artifacts: matchingThread.artifacts ?? [],
            },
            next: [],
            metadata: {},
@@ -155,7 +158,7 @@ export function mockLangGraphAPI(page: Page, options?: MockAPIOptions) {
          values: {
            title: matchingThread?.title ?? "Untitled",
            messages: matchingThread
-              ? [
+              ? (matchingThread.messages ?? [
                  {
                    type: "human",
                    id: `msg-human-${matchingThread.thread_id}`,
@@ -166,8 +169,9 @@ export function mockLangGraphAPI(page: Page, options?: MockAPIOptions) {
                    id: `msg-ai-${matchingThread.thread_id}`,
                    content: `Response in thread ${matchingThread.title ?? matchingThread.thread_id}`,
                  },
-                ]
+                ])
              : [],
+            artifacts: matchingThread?.artifacts ?? [],
          },
          next: [],
          metadata: {},
@@ -183,15 +187,59 @@ export function mockLangGraphAPI(page: Page, options?: MockAPIOptions) {
  // followed by `?` or end-of-string.  This must NOT match `/runs/stream`.
  void page.route(/\/api\/langgraph\/threads\/[^/]+\/runs(\?|$)/, (route) => {
    if (route.request().method() === "GET") {
+      const url = route.request().url();
+      const matchingThread = threads.find((t) => url.includes(t.thread_id));
      return route.fulfill({
        status: 200,
        contentType: "application/json",
-        body: "[]",
+        body: JSON.stringify(
+          matchingThread
+            ? [
+                {
+                  run_id: `run-${matchingThread.thread_id}`,
+                  thread_id: matchingThread.thread_id,
+                  assistant_id: "lead_agent",
+                  status: "success",
+                  metadata: {},
+                  kwargs: {},
+                  created_at: "2025-01-01T00:00:00Z",
+                  updated_at:
+                    matchingThread.updated_at ?? "2025-01-01T00:00:00Z",
+                },
+              ]
+            : [],
+        ),
      });
    }
    return route.fallback();
  });

+  void page.route(
+    /\/api\/threads\/([^/]+)\/runs\/([^/]+)\/messages/,
+    (route) => {
+      if (route.request().method() === "GET") {
+        const url = route.request().url();
+        const matchingThread = threads.find((t) =>
+          url.includes(`/api/threads/${t.thread_id}/runs/`),
+        );
+        return route.fulfill({
+          status: 200,
+          contentType: "application/json",
+          body: JSON.stringify({
+            data: (matchingThread?.messages ?? []).map((message, index) => ({
+              run_id: `run-${matchingThread?.thread_id ?? "unknown"}`,
+              content: message,
+              metadata: { caller: "lead_agent" },
+              created_at: `2025-01-01T00:00:${String(index).padStart(2, "0")}Z`,
+            })),
+            hasMore: false,
+          }),
+        });
+      }
+      return route.fallback();
+    },
+  );
+
  // Run stream — returns a minimal SSE response with an AI message
  void page.route("**/api/langgraph/runs/stream", handleRunStream);
  void page.route("**/api/langgraph/threads/*/runs/stream", handleRunStream);
@@ -0,0 +1,310 @@
+import { expect, test } from "vitest";
+
+import {
+  appendHtmlPreviewBaseHref,
+  appendHtmlPreviewScrollRestoration,
+  buildWriteFileDraftContent,
+  createHtmlPreviewScrollKey,
+  getArtifactViewState,
+} from "@/core/artifacts/preview";
+
+const ARTIFACT_PATH = "/artifact-fixtures/report.html";
+const UNSUPPORTED_ARTIFACT_PATH = "/artifact-fixtures/data.csv";
+
+test("allows in-progress write artifacts to render a throttled preview", () => {
+  expect(
+    getArtifactViewState({
+      filepath: `write-file:${ARTIFACT_PATH}?message_id=ai-1&tool_call_id=call-1`,
+      isSupportPreview: true,
+    }),
+  ).toEqual({
+    canPreview: true,
+    initialViewMode: "preview",
+  });
+});
+
+test("allows preview for a write artifact once the tool call has a result", () => {
+  expect(
+    getArtifactViewState({
+      filepath: `write-file:${ARTIFACT_PATH}?message_id=ai-1&tool_call_id=call-1`,
+      isSupportPreview: true,
+      toolResult: "OK",
+    }),
+  ).toEqual({
+    canPreview: true,
+    initialViewMode: "preview",
+  });
+});
+
+test("keeps failed write artifacts in code view", () => {
+  expect(
+    getArtifactViewState({
+      filepath: `write-file:${ARTIFACT_PATH}?message_id=ai-1&tool_call_id=call-1`,
+      isSupportPreview: true,
+      toolResult: "Error: Failed to write file",
+    }),
+  ).toEqual({
+    canPreview: false,
+    initialViewMode: "code",
+  });
+});
+
+test("keeps completed artifacts on their existing preview defaults", () => {
+  expect(
+    getArtifactViewState({
+      filepath: ARTIFACT_PATH,
+      isSupportPreview: true,
+    }),
+  ).toEqual({
+    canPreview: true,
+    initialViewMode: "preview",
+  });
+});
+
+test("keeps unsupported artifacts in code view", () => {
+  expect(
+    getArtifactViewState({
+      filepath: UNSUPPORTED_ARTIFACT_PATH,
+      isSupportPreview: false,
+    }),
+  ).toEqual({
+    canPreview: false,
+    initialViewMode: "code",
+  });
+});
+
+test("builds a draft write-file artifact from successful writes plus the selected in-progress append", () => {
+  const filepath = `write-file:${ARTIFACT_PATH}?message_id=ai-2&tool_call_id=call-2`;
+
+  expect(
+    buildWriteFileDraftContent({
+      filepath,
+      messages: [
+        {
+          type: "ai",
+          id: "ai-1",
+          tool_calls: [
+            {
+              id: "call-1",
+              name: "write_file",
+              args: {
+                path: ARTIFACT_PATH,
+                content: "<!doctype html><html><body>",
+              },
+            },
+          ],
+        },
+        {
+          type: "tool",
+          id: "tool-1",
+          name: "write_file",
+          tool_call_id: "call-1",
+          content: "OK",
+        },
+        {
+          type: "ai",
+          id: "ai-2",
+          tool_calls: [
+            {
+              id: "call-2",
+              name: "write_file",
+              args: {
+                append: true,
+                path: ARTIFACT_PATH,
+                content: "<p>追加内容</p>",
+              },
+            },
+          ],
+        },
+      ],
+    }),
+  ).toBe("<!doctype html><html><body><p>追加内容</p>");
+});
+
+test("does not include failed writes in a draft artifact", () => {
+  const filepath = `write-file:${ARTIFACT_PATH}?message_id=ai-3&tool_call_id=call-3`;
+
+  expect(
+    buildWriteFileDraftContent({
+      filepath,
+      messages: [
+        {
+          type: "ai",
+          id: "ai-1",
+          tool_calls: [
+            {
+              id: "call-1",
+              name: "write_file",
+              args: {
+                path: ARTIFACT_PATH,
+                content: "<html>",
+              },
+            },
+          ],
+        },
+        {
+          type: "tool",
+          id: "tool-1",
+          name: "write_file",
+          tool_call_id: "call-1",
+          content: "OK",
+        },
+        {
+          type: "ai",
+          id: "ai-2",
+          tool_calls: [
+            {
+              id: "call-2",
+              name: "write_file",
+              args: {
+                append: true,
+                path: ARTIFACT_PATH,
+                content: "<p>失败内容</p>",
+              },
+            },
+          ],
+        },
+        {
+          type: "tool",
+          id: "tool-2",
+          name: "write_file",
+          tool_call_id: "call-2",
+          content: "Error: write failed",
+        },
+        {
+          type: "ai",
+          id: "ai-3",
+          tool_calls: [
+            {
+              id: "call-3",
+              name: "write_file",
+              args: {
+                append: true,
+                path: ARTIFACT_PATH,
+                content: "</html>",
+              },
+            },
+          ],
+        },
+      ],
+    }),
+  ).toBe("<html></html>");
+});
+
+test("returns undefined when the selected append failed so the caller can fall back", () => {
+  const filepath = `write-file:${ARTIFACT_PATH}?message_id=ai-2&tool_call_id=call-2`;
+
+  expect(
+    buildWriteFileDraftContent({
+      filepath,
+      messages: [
+        {
+          type: "ai",
+          id: "ai-1",
+          tool_calls: [
+            {
+              id: "call-1",
+              name: "write_file",
+              args: {
+                path: ARTIFACT_PATH,
+                content: "<html>",
+              },
+            },
+          ],
+        },
+        {
+          type: "tool",
+          id: "tool-1",
+          name: "write_file",
+          tool_call_id: "call-1",
+          content: "OK",
+        },
+        {
+          type: "ai",
+          id: "ai-2",
+          tool_calls: [
+            {
+              id: "call-2",
+              name: "write_file",
+              args: {
+                append: true,
+                path: ARTIFACT_PATH,
+                content: "<p>失败的追加内容</p>",
+              },
+            },
+          ],
+        },
+        {
+          type: "tool",
+          id: "tool-2",
+          name: "write_file",
+          tool_call_id: "call-2",
+          content: "Error: write failed",
+        },
+      ],
+    }),
+  ).toBeUndefined();
+});
+
+test("injects scroll restoration at the start of the HTML head", () => {
+  const html =
+    '<!doctype html><html><head><meta http-equiv="Content-Security-Policy" content="script-src \'none\'"></head><body><main>content</main></body></html>';
+
+  expect(appendHtmlPreviewScrollRestoration(html, ARTIFACT_PATH)).toContain(
+    "<script data-deerflow-artifact-scroll-restoration>",
+  );
+  expect(appendHtmlPreviewScrollRestoration(html, ARTIFACT_PATH)).toContain(
+    "<head><script data-deerflow-artifact-scroll-restoration>",
+  );
+});
+
+test("preserves existing head elements when injecting scroll restoration", () => {
+  const html =
+    '<!doctype html><html><head><meta http-equiv="Content-Security-Policy" content="script-src \'none\'"></head><body><main>content</main></body></html>';
+  const result = appendHtmlPreviewScrollRestoration(
+    appendHtmlPreviewBaseHref(
+      html,
+      "/demo/threads/thread-1/user-data/outputs/report.html?download=true",
+      "http://localhost/workspace/chats/thread-1",
+    ),
+    ARTIFACT_PATH,
+  );
+
+  expect(result).toContain(
+    '<base href="http://localhost/demo/threads/thread-1/user-data/outputs/">',
+  );
+  expect(
+    result.indexOf("data-deerflow-artifact-scroll-restoration"),
+  ).toBeLessThan(
+    result.indexOf(
+      '<base href="http://localhost/demo/threads/thread-1/user-data/outputs/">',
+    ),
+  );
+});
+
+test("does not duplicate HTML scroll restoration script", () => {
+  const html = appendHtmlPreviewScrollRestoration(
+    "<html><body>x</body></html>",
+  );
+
+  expect(
+    appendHtmlPreviewScrollRestoration(html).match(
+      /data-deerflow-artifact-scroll-restoration/g,
+    ),
+  ).toHaveLength(1);
+});
+
+test("scopes HTML scroll restoration without exposing the artifact path", () => {
+  const artifactPath =
+    '/artifact-fixtures/a</script><script>alert("x")</script>.html';
+  const html = appendHtmlPreviewScrollRestoration(
+    "<html><body>x</body></html>",
+    artifactPath,
+  );
+
+  expect(html).toContain(createHtmlPreviewScrollKey(artifactPath));
+  expect(html).toContain("window.parent.postMessage");
+  expect(html).not.toContain("window.name");
+  expect(html).not.toContain("/artifact-fixtures/a");
+  expect(html).not.toContain("<script>alert");
+});