mirror of
https://github.com/DayuanJiang/next-ai-draw-io.git
synced 2026-10-11 20:19:51 +08:00
dayuan.jiang
366d9ee4ff
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.
127 lines
3.9 KiB
TypeScript
127 lines
3.9 KiB
TypeScript
import {
|
|
CAT_DIAGRAM_XML,
|
|
FLOWCHART_XML,
|
|
NEW_NODE_XML,
|
|
} from "./fixtures/diagrams"
|
|
import {
|
|
createMultiTurnMock,
|
|
expect,
|
|
getChatInput,
|
|
sendMessage,
|
|
test,
|
|
waitForComplete,
|
|
waitForCompleteCount,
|
|
} from "./lib/fixtures"
|
|
import { createMockSSEResponse } from "./lib/helpers"
|
|
|
|
test.describe("Diagram Generation", () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
await page.route("**/api/chat", async (route) => {
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: "text/event-stream",
|
|
body: createMockSSEResponse(
|
|
CAT_DIAGRAM_XML,
|
|
"I'll create a diagram for you.",
|
|
),
|
|
})
|
|
})
|
|
|
|
await page.goto("/", { waitUntil: "networkidle" })
|
|
await page
|
|
.locator("iframe")
|
|
.waitFor({ state: "visible", timeout: 30000 })
|
|
})
|
|
|
|
test("generates and displays a diagram", async ({ page }) => {
|
|
await sendMessage(page, "Draw a cat")
|
|
await waitForComplete(page)
|
|
await expect(page.locator('[data-testid="version-card"]')).toBeVisible()
|
|
})
|
|
|
|
test("chat input clears after sending", async ({ page }) => {
|
|
const chatInput = getChatInput(page)
|
|
await expect(chatInput).toBeVisible({ timeout: 10000 })
|
|
|
|
await chatInput.fill("Draw a cat")
|
|
await chatInput.press("ControlOrMeta+Enter")
|
|
|
|
await expect(chatInput).toHaveValue("", { timeout: 5000 })
|
|
})
|
|
|
|
test("user message appears in chat", async ({ page }) => {
|
|
await sendMessage(page, "Draw a cute cat")
|
|
await expect(page.locator('text="Draw a cute cat"')).toBeVisible({
|
|
timeout: 10000,
|
|
})
|
|
})
|
|
|
|
test("assistant text message appears in chat", async ({ page }) => {
|
|
await sendMessage(page, "Draw a cat")
|
|
await expect(
|
|
page.locator('text="I\'ll create a diagram for you."'),
|
|
).toBeVisible({ timeout: 10000 })
|
|
})
|
|
})
|
|
|
|
test.describe("Diagram Edit", () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
await page.route(
|
|
"**/api/chat",
|
|
createMultiTurnMock([
|
|
{ xml: FLOWCHART_XML, text: "I'll create a diagram for you." },
|
|
{
|
|
xml: FLOWCHART_XML.replace("Process", "Updated Process"),
|
|
text: "I'll create a diagram for you.",
|
|
},
|
|
]),
|
|
)
|
|
|
|
await page.goto("/", { waitUntil: "networkidle" })
|
|
await page
|
|
.locator("iframe")
|
|
.waitFor({ state: "visible", timeout: 30000 })
|
|
})
|
|
|
|
test("can edit an existing diagram", async ({ page }) => {
|
|
// First: create initial diagram
|
|
await sendMessage(page, "Create a flowchart")
|
|
await waitForComplete(page)
|
|
|
|
// Second: edit the diagram
|
|
await sendMessage(page, "Change Process to Updated Process")
|
|
await waitForCompleteCount(page, 2)
|
|
})
|
|
})
|
|
|
|
test.describe("Diagram Append", () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
await page.route(
|
|
"**/api/chat",
|
|
createMultiTurnMock([
|
|
{ xml: FLOWCHART_XML, text: "I'll create a diagram for you." },
|
|
{
|
|
xml: NEW_NODE_XML,
|
|
text: "I'll create a diagram for you.",
|
|
toolName: "append_diagram",
|
|
},
|
|
]),
|
|
)
|
|
|
|
await page.goto("/", { waitUntil: "networkidle" })
|
|
await page
|
|
.locator("iframe")
|
|
.waitFor({ state: "visible", timeout: 30000 })
|
|
})
|
|
|
|
test("can append to an existing diagram", async ({ page }) => {
|
|
// First: create initial diagram
|
|
await sendMessage(page, "Create a flowchart")
|
|
await waitForComplete(page)
|
|
|
|
// Second: append to diagram
|
|
await sendMessage(page, "Add a new node to the right")
|
|
await waitForCompleteCount(page, 2)
|
|
})
|
|
})
|