Drag & drop image attachment (#304)

e2e-tests/attach_image.spec.ts

@@ -1,4 +1,5 @@
 import { test } from "./helpers/test_helper";
+import * as fs from "fs";
 
 // attach image is implemented in two separate components
 // - HomeChatInput
@@ -20,6 +21,7 @@ test("attach image - chat", async ({ po }) => {
   await po.setUp({ autoApprove: true });
   await po.sendPrompt("basic");
 
+  // attach via file input (click-to-upload)
   await po
     .getChatInputContainer()
     .locator("input[type='file']")
@@ -28,3 +30,41 @@ test("attach image - chat", async ({ po }) => {
   await po.snapshotServerDump({ onlyLastMessage: true });
   await po.snapshotMessages({ replaceDumpPath: true });
 });
+
+// attach image via drag-and-drop to chat input container
+test("attach image via drag - chat", async ({ po }) => {
+  await po.setUp({ autoApprove: true });
+  await po.sendPrompt("basic");
+  // read fixture and convert to base64 for browser context
+  const fileBase64 = fs.readFileSync(
+    "e2e-tests/fixtures/images/logo.png",
+    "base64",
+  );
+  // locate the inner drop target (first child div of the container)
+  const dropTarget = po.getChatInputContainer().locator("div").first();
+  // simulate dragenter, dragover, and drop with a File
+  await dropTarget.evaluate((element, fileBase64) => {
+    // convert base64 to Uint8Array
+    const binary = atob(fileBase64);
+    const len = binary.length;
+    const array = new Uint8Array(len);
+    for (let i = 0; i < len; i++) array[i] = binary.charCodeAt(i);
+    // create file and dataTransfer
+    const blob = new Blob([array], { type: "image/png" });
+    const file = new File([blob], "logo.png", { type: "image/png" });
+    const dt = new DataTransfer();
+    dt.items.add(file);
+    // dispatch drag events
+    ["dragenter", "dragover", "drop"].forEach((eventType) => {
+      element.dispatchEvent(
+        new DragEvent(eventType, { dataTransfer: dt, bubbles: true }),
+      );
+    });
+  }, fileBase64);
+
+  // submit and verify
+  await po.sendPrompt("[dump]");
+  // Note: this should match EXACTLY the server dump from the previous test.
+  await po.snapshotServerDump({ onlyLastMessage: true });
+  await po.snapshotMessages({ replaceDumpPath: true });
+});