mirror of
https://github.com/DayuanJiang/next-ai-draw-io.git
synced 2026-10-07 02:07:47 +08:00
dayuan.jiang
23d5c83b0d
The canvas now fills the window and the chat floats on its right. draw.io is served from our own origin (public/drawio, downloaded at build time and checked against the release's SHA-256), so the app can drive the editor directly: - every AI change becomes a version card with a thumbnail; compare, restore or undo it, and Ctrl+Z on the canvas takes an AI change back in one step - shapes the AI just changed are highlighted on the canvas - selected shapes appear as a chip and are sent to the model - the app's own canvas toolbar, shape library and page tabs replace draw.io's chrome - new start screen, session rename and switcher, open .drawio files - settings split into Models & keys, Appearance, Advanced and About - phones switch between canvas and chat - dark mode keeps the diagram on a white sheet and no longer flashes With an external draw.io (NEXT_PUBLIC_DRAWIO_BASE_URL) the app falls back to draw.io's own toolbar and the features above that need same origin are off. The chat logic moved from the 1500-line chat panel into a chat engine plus small UI components; zustand holds canvas, versions, settings and UI state.
107 lines
3.8 KiB
TypeScript
107 lines
3.8 KiB
TypeScript
import { expect, type Page, test } from "@playwright/test"
|
|
import { getIframe, sendMessage } from "./lib/fixtures"
|
|
|
|
/** Answer the chat request with the given response and send a message */
|
|
async function chatWith(
|
|
page: Page,
|
|
response: { status: number; contentType: string; body: string },
|
|
) {
|
|
await page.route("**/api/chat", (route) => route.fulfill(response))
|
|
await page.goto("/", { waitUntil: "networkidle" })
|
|
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
|
await sendMessage(page, "Draw a box")
|
|
}
|
|
|
|
test("a rejected key shows a hint, the provider's words and a settings button", async ({
|
|
page,
|
|
}) => {
|
|
await chatWith(page, {
|
|
status: 401,
|
|
contentType: "application/json",
|
|
body: JSON.stringify({
|
|
type: "provider",
|
|
code: "invalid_api_key",
|
|
message: "Authentication Fails, Your api key is invalid",
|
|
}),
|
|
})
|
|
await expect(
|
|
page.getByText("The provider rejected the API key"),
|
|
).toBeVisible({
|
|
timeout: 15000,
|
|
})
|
|
// First match: the Next.js dev overlay at the end also lists the error
|
|
await expect(page.getByText("Authentication Fails").first()).toBeVisible()
|
|
await page.getByRole("button", { name: "Open model settings" }).click()
|
|
// Settings opens on its models tab
|
|
const dialog = page.getByRole("dialog", { name: "Settings" })
|
|
await expect(dialog).toBeVisible()
|
|
await expect(dialog.getByText("Providers", { exact: true })).toBeVisible()
|
|
})
|
|
|
|
test("an error before the stream shows its text, not raw JSON", async ({
|
|
page,
|
|
}) => {
|
|
await chatWith(page, {
|
|
status: 400,
|
|
contentType: "application/json",
|
|
body: JSON.stringify({
|
|
error: 'Model "x" is not available on the server',
|
|
}),
|
|
})
|
|
// The whole message, not the JSON around it (the Next.js dev overlay
|
|
// also lists the raw console error; it is not part of the app)
|
|
await expect(
|
|
page.getByText('Model "x" is not available on the server', {
|
|
exact: true,
|
|
}),
|
|
).toBeVisible({ timeout: 15000 })
|
|
})
|
|
|
|
test("a provider rate limit is not shown as this site's quota", async ({
|
|
page,
|
|
}) => {
|
|
const errorText = JSON.stringify({
|
|
type: "provider",
|
|
code: "rate_limited",
|
|
message: "Rate limit exceeded for your organization",
|
|
})
|
|
await chatWith(page, {
|
|
status: 200,
|
|
contentType: "text/event-stream",
|
|
body: `data: {"type":"start"}\n\ndata: ${JSON.stringify({ type: "error", errorText })}\n\ndata: [DONE]\n\n`,
|
|
})
|
|
await expect(
|
|
page.getByText("The provider is limiting requests"),
|
|
).toBeVisible({ timeout: 15000 })
|
|
// The site's own tokens-per-minute toast
|
|
await expect(page.getByText("Rate limit reached")).toHaveCount(0)
|
|
})
|
|
|
|
test("a refused server key shows only the quota hint and a settings button", async ({
|
|
page,
|
|
}) => {
|
|
// What the chat route streams when the server's key gets a 403, e.g.
|
|
// after a daily spend cap blocked it
|
|
const errorText = JSON.stringify({
|
|
type: "provider",
|
|
code: "server_key_forbidden",
|
|
message: "",
|
|
})
|
|
await chatWith(page, {
|
|
status: 200,
|
|
contentType: "text/event-stream",
|
|
body: `data: {"type":"start"}\n\ndata: ${JSON.stringify({ type: "error", errorText })}\n\ndata: [DONE]\n\n`,
|
|
})
|
|
await expect(
|
|
page.getByText("Today's free quota is used up", { exact: false }),
|
|
).toBeVisible({ timeout: 15000 })
|
|
await expect(page.getByText("The provider returned an error")).toHaveCount(
|
|
0,
|
|
)
|
|
await page.getByRole("button", { name: "Open model settings" }).click()
|
|
// Settings opens on its models tab
|
|
const dialog = page.getByRole("dialog", { name: "Settings" })
|
|
await expect(dialog).toBeVisible()
|
|
await expect(dialog.getByText("Providers", { exact: true })).toBeVisible()
|
|
})
|