mirror of
https://github.com/DayuanJiang/next-ai-draw-io.git
synced 2026-10-11 12:09:53 +08:00
dayuan.jiang
c0fa997186
Chats: - New Chat right after an answer saves that chat once. Saves run one at a time and read the chat on screen when their turn comes; a save scheduled for a chat that is no longer on screen is dropped. A chat whose id was still on its way to the URL no longer comes back after New Chat (the next answer went into it). - Crossing the 768 px breakpoint keeps the chat panel: a streaming answer, unsaved messages and attachments stay. The panel gets the sizes of each side, and a panel collapsed on desktop opens on mobile. - The chat's export waits for its own reply: an edit's history export still on its way no longer answers it with the older diagram, and two file saves at once no longer swap results. - A second edit in one answer is previewed on the first edit's result. - Stop also ends a running screenshot check; a chat that cannot be saved (storage full) can be left with "Continue without saving". - Small diagrams with shapes count as diagrams; the tool card no longer crashes on malformed operations. Quota and providers: - Requests that reach the server's own endpoints count toward the quota: EdgeOne (always its own endpoint now), a private base URL whatever key header is sent, keyless Ollama without a URL. With the quota on, a redirect is followed only to a public address. The output cap applies to these requests too. - Stop records the tokens of the steps that finished; the screenshot check counts its tokens without counting a request. - EdgeOne configured only by AI_PROVIDER works, also in the admin Test, which forwards the access code. Azure set up only in the admin panel works in chat. The Test sends a Bedrock session token. - The admin panel's Test of an entry without a URL uses the server's URL as the server does (no private address check for it); the admin panel no longer writes an Ollama URL. MCP server: - Write tools and start_session run one at a time, so two at once never drop each other's change; a cancelled call waiting its turn is skipped. get_diagram and export_diagram keep the session they started with. - Export to .drawio first gets the user's latest edits from the browser. - History thumbnails: one that arrives after the next AI write is dropped; a sync reply keeps the image; a version that changed only page settings is its own entry. - A diagram over the 10 MB limit is saved without its image, or the user is told to download it (the server now answers 413 instead of cutting the connection). - Labels holding text like id='1' or parent='1' are no longer read as attributes (a layer or a parent was deleted). A broken bare <mxGraphModel> file is refused. - After a sync reply the tab no longer sends its autosave copy again. Desktop and files: - A newer switch of the same preset is not rolled back by an older one that failed. .env values with escaped quotes are read whole. - MCP saved files: a file that could not be read stays protected while a folder without permission hides it, and is saved again once deleted. - The desktop app reports "no chats" only when the count was read and no model settings are stored.
427 lines
16 KiB
TypeScript
427 lines
16 KiB
TypeScript
import type { Page } from "@playwright/test"
|
|
import { SINGLE_BOX_XML } from "./fixtures/diagrams"
|
|
import {
|
|
expect,
|
|
getChatInput,
|
|
getIframe,
|
|
getIframeContent,
|
|
openSettings,
|
|
sendMessage,
|
|
test,
|
|
waitForComplete,
|
|
waitForText,
|
|
} from "./lib/fixtures"
|
|
import { createMockSSEResponse } from "./lib/helpers"
|
|
|
|
test.describe("History and Session Restore", () => {
|
|
test("new chat button clears conversation", async ({ page }) => {
|
|
await page.route("**/api/chat", async (route) => {
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: "text/event-stream",
|
|
body: createMockSSEResponse(
|
|
SINGLE_BOX_XML,
|
|
"Created your test diagram.",
|
|
),
|
|
})
|
|
})
|
|
|
|
await page.goto("/", { waitUntil: "networkidle" })
|
|
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
|
|
|
await test.step("create a conversation", async () => {
|
|
await sendMessage(page, "Create a test diagram")
|
|
await waitForText(page, "Created your test diagram.")
|
|
})
|
|
|
|
await test.step("click new chat button", async () => {
|
|
const newChatButton = page.locator(
|
|
'[data-testid="new-chat-button"]',
|
|
)
|
|
await expect(newChatButton).toBeVisible({ timeout: 5000 })
|
|
await newChatButton.click()
|
|
})
|
|
|
|
await test.step("verify conversation is cleared", async () => {
|
|
await expect(
|
|
page.locator('text="Created your test diagram."'),
|
|
).not.toBeVisible({ timeout: 5000 })
|
|
})
|
|
})
|
|
|
|
test("new chat keeps a conversation that could not be saved", async ({
|
|
page,
|
|
}) => {
|
|
await page.route("**/api/chat", async (route) => {
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: "text/event-stream",
|
|
body: createMockSSEResponse(
|
|
SINGLE_BOX_XML,
|
|
"Created your test diagram.",
|
|
),
|
|
})
|
|
})
|
|
await page.goto("/", { waitUntil: "networkidle" })
|
|
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
|
await sendMessage(page, "Create a test diagram")
|
|
await waitForText(page, "Created your test diagram.")
|
|
|
|
// Browser storage is full from now on
|
|
await page.evaluate(() => {
|
|
IDBObjectStore.prototype.put = () => {
|
|
throw new DOMException("Storage is full", "QuotaExceededError")
|
|
}
|
|
})
|
|
await page.locator('[data-testid="new-chat-button"]').click()
|
|
|
|
await expect(
|
|
page.getByText(/Could not save this chat/).first(),
|
|
).toBeVisible({ timeout: 5000 })
|
|
await page.waitForTimeout(1000)
|
|
// Still the conversation and its diagram, not the empty chat's examples
|
|
await expect(page.getByText("Paper to Diagram")).toHaveCount(0)
|
|
await expect(
|
|
getIframeContent(page).getByText("Test Box", { exact: true }),
|
|
).toBeVisible()
|
|
})
|
|
|
|
test("new chat can go on without saving when storage is full", async ({
|
|
page,
|
|
}) => {
|
|
// Old chats can only be deleted from the empty chat's list, so the
|
|
// user must be able to get there
|
|
await page.route("**/api/chat", async (route) => {
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: "text/event-stream",
|
|
body: createMockSSEResponse(
|
|
SINGLE_BOX_XML,
|
|
"Created your test diagram.",
|
|
),
|
|
})
|
|
})
|
|
await page.goto("/", { waitUntil: "networkidle" })
|
|
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
|
await sendMessage(page, "Create a test diagram")
|
|
await waitForText(page, "Created your test diagram.")
|
|
await page.evaluate(() => {
|
|
IDBObjectStore.prototype.put = () => {
|
|
throw new DOMException("Storage is full", "QuotaExceededError")
|
|
}
|
|
})
|
|
await page.locator('[data-testid="new-chat-button"]').click()
|
|
await page
|
|
.getByRole("button", { name: "Continue without saving" })
|
|
.click({ timeout: 5000 })
|
|
await expect(
|
|
page.locator('text="Created your test diagram."'),
|
|
).toHaveCount(0, { timeout: 5000 })
|
|
await expect(page.getByText("Paper to Diagram")).toBeVisible()
|
|
})
|
|
|
|
// A diagram drawn by hand, without chat messages: loaded into draw.io
|
|
// directly, then moved with an arrow key, which draw.io reports as an
|
|
// edit like any manual change
|
|
async function drawByHand(page: Page, label: string) {
|
|
const shape = getIframeContent(page).getByText(label, { exact: true })
|
|
// draw.io may still be starting (after a new chat): send until shown
|
|
for (let i = 0; i < 10 && (await shape.count()) === 0; i++) {
|
|
await page.evaluate((label) => {
|
|
const xml = `<mxfile><diagram id="p" name="Page-1"><mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/><mxCell id="h" value="${label}" style="rounded=1;" vertex="1" parent="1"><mxGeometry x="60" y="60" width="140" height="60" as="geometry"/></mxCell></root></mxGraphModel></diagram></mxfile>`
|
|
document
|
|
.querySelector("iframe")
|
|
?.contentWindow?.postMessage(
|
|
JSON.stringify({ action: "load", xml, autosave: 1 }),
|
|
"*",
|
|
)
|
|
}, label)
|
|
await page.waitForTimeout(1000)
|
|
}
|
|
await shape.click({ timeout: 10000 })
|
|
await page.keyboard.press("ArrowRight")
|
|
// The app saves the edit about a second later
|
|
await page.waitForTimeout(2000)
|
|
}
|
|
const storageFull = (page: Page) =>
|
|
page.evaluate(() => {
|
|
IDBObjectStore.prototype.put = () => {
|
|
throw new DOMException("Storage is full", "QuotaExceededError")
|
|
}
|
|
})
|
|
|
|
test("new chat keeps a diagram without messages that could not be saved", async ({
|
|
page,
|
|
}) => {
|
|
await page.goto("/", { waitUntil: "networkidle" })
|
|
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
|
await drawByHand(page, "Hand drawn")
|
|
await expect(
|
|
getIframeContent(page).getByText("Hand drawn", { exact: true }),
|
|
).toBeVisible({ timeout: 10000 })
|
|
await storageFull(page)
|
|
await page.locator('[data-testid="new-chat-button"]').click()
|
|
await expect(
|
|
page.getByText(/Could not save this chat/).first(),
|
|
).toBeVisible({ timeout: 5000 })
|
|
await expect(
|
|
getIframeContent(page).getByText("Hand drawn", { exact: true }),
|
|
).toBeVisible()
|
|
})
|
|
|
|
test("opening another chat keeps a diagram that could not be saved", async ({
|
|
page,
|
|
}) => {
|
|
await page.route("**/api/chat", async (route) => {
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: "text/event-stream",
|
|
body: createMockSSEResponse(
|
|
SINGLE_BOX_XML,
|
|
"Created your test diagram.",
|
|
),
|
|
})
|
|
})
|
|
await page.goto("/", { waitUntil: "networkidle" })
|
|
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
|
await sendMessage(page, "Create a test diagram")
|
|
await waitForText(page, "Created your test diagram.")
|
|
await page.waitForTimeout(1500)
|
|
await page.locator('[data-testid="new-chat-button"]').click()
|
|
// The empty chat lists the first one; draw something by hand
|
|
const firstChat = page.getByRole("button", {
|
|
name: /Create a test diagram/,
|
|
})
|
|
await expect(firstChat).toBeVisible({ timeout: 10000 })
|
|
await drawByHand(page, "Hand drawn")
|
|
await expect(
|
|
getIframeContent(page).getByText("Hand drawn", { exact: true }),
|
|
).toBeVisible({ timeout: 10000 })
|
|
await storageFull(page)
|
|
await firstChat.click()
|
|
await expect(
|
|
page.getByText(/Could not save this chat/).first(),
|
|
).toBeVisible({ timeout: 5000 })
|
|
await page.waitForTimeout(1000)
|
|
await expect(
|
|
getIframeContent(page).getByText("Hand drawn", { exact: true }),
|
|
).toBeVisible()
|
|
})
|
|
|
|
test("chat history sidebar shows past conversations", async ({ page }) => {
|
|
await page.goto("/", { waitUntil: "networkidle" })
|
|
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
|
|
|
const historyButton = page.locator(
|
|
'button[aria-label*="History"]:not([disabled]), button:has(svg.lucide-history):not([disabled]), button:has(svg.lucide-menu):not([disabled]), button:has(svg.lucide-sidebar):not([disabled]), button:has(svg.lucide-panel-left):not([disabled])',
|
|
)
|
|
|
|
const buttonCount = await historyButton.count()
|
|
if (buttonCount === 0) {
|
|
test.skip()
|
|
return
|
|
}
|
|
|
|
await historyButton.first().click()
|
|
await expect(getChatInput(page)).toBeVisible({ timeout: 3000 })
|
|
})
|
|
|
|
test("conversation persists after page reload", async ({ page }) => {
|
|
await page.route("**/api/chat", async (route) => {
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: "text/event-stream",
|
|
body: createMockSSEResponse(
|
|
SINGLE_BOX_XML,
|
|
"This message should persist.",
|
|
),
|
|
})
|
|
})
|
|
|
|
await page.goto("/", { waitUntil: "networkidle" })
|
|
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
|
|
|
await test.step("create conversation", async () => {
|
|
await sendMessage(page, "Create persistent diagram")
|
|
await waitForText(page, "This message should persist.")
|
|
})
|
|
|
|
await test.step("verify message appears before reload", async () => {
|
|
await expect(getChatInput(page)).toBeVisible({ timeout: 10000 })
|
|
await expect(
|
|
page.locator('text="This message should persist."'),
|
|
).toBeVisible({ timeout: 10000 })
|
|
})
|
|
|
|
// Note: After reload, mocked responses won't persist since we're not
|
|
// testing with real localStorage. We just verify the app loads correctly.
|
|
await test.step("verify app loads after reload", async () => {
|
|
await page.reload({ waitUntil: "networkidle" })
|
|
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
|
await expect(getChatInput(page)).toBeVisible({ timeout: 10000 })
|
|
})
|
|
})
|
|
|
|
test("diagram state persists after reload", async ({ page }) => {
|
|
await page.route("**/api/chat", async (route) => {
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: "text/event-stream",
|
|
body: createMockSSEResponse(
|
|
SINGLE_BOX_XML,
|
|
"Created a diagram that should be saved.",
|
|
),
|
|
})
|
|
})
|
|
|
|
await page.goto("/", { waitUntil: "networkidle" })
|
|
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
|
|
|
await sendMessage(page, "Create saveable diagram")
|
|
await waitForComplete(page)
|
|
|
|
await page.reload({ waitUntil: "networkidle" })
|
|
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
|
|
|
const frame = getIframeContent(page)
|
|
await expect(
|
|
frame
|
|
.locator(".geMenubarContainer, .geDiagramContainer, canvas")
|
|
.first(),
|
|
).toBeVisible({ timeout: 30000 })
|
|
})
|
|
|
|
test("can restore from browser back/forward", async ({ page }) => {
|
|
await page.route("**/api/chat", async (route) => {
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: "text/event-stream",
|
|
body: createMockSSEResponse(
|
|
SINGLE_BOX_XML,
|
|
"Testing browser navigation.",
|
|
),
|
|
})
|
|
})
|
|
|
|
await page.goto("/", { waitUntil: "networkidle" })
|
|
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
|
|
|
await sendMessage(page, "Test navigation")
|
|
await waitForText(page, "Testing browser navigation.")
|
|
|
|
await page.goto("/about", { waitUntil: "networkidle" })
|
|
await page.goBack({ waitUntil: "networkidle" })
|
|
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
|
|
|
await expect(getChatInput(page)).toBeVisible({ timeout: 10000 })
|
|
})
|
|
|
|
test("settings are restored after reload", async ({ page }) => {
|
|
await page.goto("/", { waitUntil: "networkidle" })
|
|
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
|
|
|
await openSettings(page)
|
|
await page.keyboard.press("Escape")
|
|
|
|
await page.reload({ waitUntil: "networkidle" })
|
|
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
|
|
|
await openSettings(page)
|
|
})
|
|
|
|
test("model selection persists", async ({ page }) => {
|
|
await page.goto("/", { waitUntil: "networkidle" })
|
|
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
|
|
|
const modelSelector = page.locator(
|
|
'button[aria-label*="Model"], [data-testid="model-selector"], button:has-text("Claude")',
|
|
)
|
|
|
|
const selectorCount = await modelSelector.count()
|
|
if (selectorCount === 0) {
|
|
test.skip()
|
|
return
|
|
}
|
|
|
|
const initialModel = await modelSelector.first().textContent()
|
|
|
|
await page.reload({ waitUntil: "networkidle" })
|
|
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
|
|
|
const modelAfterReload = await modelSelector.first().textContent()
|
|
expect(modelAfterReload).toBe(initialModel)
|
|
})
|
|
|
|
test("handles localStorage quota exceeded gracefully", async ({ page }) => {
|
|
await page.goto("/", { waitUntil: "networkidle" })
|
|
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
|
|
|
await page.evaluate(() => {
|
|
try {
|
|
const largeData = "x".repeat(5 * 1024 * 1024)
|
|
localStorage.setItem("test-large-data", largeData)
|
|
} catch {
|
|
// Expected to fail on some browsers
|
|
}
|
|
})
|
|
|
|
await expect(getChatInput(page)).toBeVisible({ timeout: 10000 })
|
|
|
|
await page.evaluate(() => {
|
|
localStorage.removeItem("test-large-data")
|
|
})
|
|
})
|
|
})
|
|
|
|
/** Number of chats stored in this origin's IndexedDB */
|
|
const countSessions = (page: Page) =>
|
|
page.evaluate(
|
|
() =>
|
|
new Promise<number>((resolve, reject) => {
|
|
const open = indexedDB.open("next-ai-drawio")
|
|
open.onerror = () => reject(open.error)
|
|
open.onsuccess = () => {
|
|
const db = open.result
|
|
if (!db.objectStoreNames.contains("sessions")) {
|
|
db.close()
|
|
return resolve(0)
|
|
}
|
|
const count = db
|
|
.transaction("sessions", "readonly")
|
|
.objectStore("sessions")
|
|
.count()
|
|
count.onsuccess = () => {
|
|
db.close()
|
|
resolve(count.result)
|
|
}
|
|
}
|
|
}),
|
|
)
|
|
|
|
test("new chat right after an answer saves that chat once", async ({
|
|
page,
|
|
}) => {
|
|
test.setTimeout(180_000)
|
|
await page.route("**/api/chat", async (route) => {
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: "text/event-stream",
|
|
body: createMockSSEResponse(SINGLE_BOX_XML, "Drew the box."),
|
|
})
|
|
})
|
|
await page.goto("/", { waitUntil: "networkidle" })
|
|
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
|
const newChat = page.locator('[data-testid="new-chat-button"]')
|
|
// The auto-save runs a second after the answer; New Chat around then
|
|
// waits for its thumbnail while the auto-save starts
|
|
for (let run = 1; run <= 10; run++) {
|
|
await sendMessage(page, `Draw box ${run}`)
|
|
await waitForText(page, "Drew the box.")
|
|
await page.waitForTimeout(500 + run * 100)
|
|
await newChat.click()
|
|
await expect(page.getByText("Drew the box.")).toHaveCount(0)
|
|
await page.waitForTimeout(2500)
|
|
expect(await countSessions(page), `run ${run}`).toBe(run)
|
|
}
|
|
})
|