feat(app): support pasting images into prompt attachments

packages/app/src/utils/image-attachments-from-files.test.ts

@@ -0,0 +1,79 @@
+import { describe, expect, it } from "vitest";
+import {
+  collectImageFilesFromClipboardData,
+  filesToImageAttachments,
+} from "./image-attachments-from-files";
+
+function createClipboardItem(params: {
+  kind: string;
+  type: string;
+  file?: File | null;
+}) {
+  return {
+    kind: params.kind,
+    type: params.type,
+    getAsFile: () => params.file ?? null,
+  };
+}
+
+describe("collectImageFilesFromClipboardData", () => {
+  it("returns only image files from clipboard items", () => {
+    const imagePng = new File([new Uint8Array([0, 1, 2, 3])], "paste.png", {
+      type: "image/png",
+    });
+    const textFile = new File(["not image"], "notes.txt", {
+      type: "text/plain",
+    });
+
+    const files = collectImageFilesFromClipboardData({
+      items: [
+        createClipboardItem({ kind: "string", type: "text/plain" }),
+        createClipboardItem({
+          kind: "file",
+          type: "text/plain",
+          file: textFile,
+        }),
+        createClipboardItem({
+          kind: "file",
+          type: "image/png",
+          file: imagePng,
+        }),
+        createClipboardItem({
+          kind: "file",
+          type: "image/jpeg",
+          file: null,
+        }),
+      ],
+    });
+
+    expect(files).toEqual([imagePng]);
+  });
+
+  it("returns an empty array when clipboard data is missing", () => {
+    expect(collectImageFilesFromClipboardData(undefined)).toEqual([]);
+  });
+});
+
+describe("filesToImageAttachments", () => {
+  it("converts files into data URI image attachments and keeps order", async () => {
+    const pngFile = new File([new Uint8Array([0, 1, 2, 3])], "first.png", {
+      type: "image/png",
+    });
+    const typeLessFile = new File([new Uint8Array([4, 5, 6, 7])], "second", {
+      type: "",
+    });
+
+    const attachments = await filesToImageAttachments([pngFile, typeLessFile]);
+
+    expect(attachments).toEqual([
+      {
+        uri: "data:image/png;base64,AAECAw==",
+        mimeType: "image/png",
+      },
+      {
+        uri: "data:image/jpeg;base64,BAUGBw==",
+        mimeType: "image/jpeg",
+      },
+    ]);
+  });
+});

packages/app/src/utils/image-attachments-from-files.ts

@@ -0,0 +1,67 @@
+export interface ClipboardItemLike {
+  kind?: string;
+  type?: string;
+  getAsFile?: () => File | null;
+}
+
+export interface ClipboardDataLike {
+  items?: ArrayLike<ClipboardItemLike> | null;
+}
+
+export interface ImageAttachmentFromFile {
+  uri: string;
+  mimeType: string;
+}
+
+function toBase64(buffer: ArrayBuffer): string {
+  const bytes = new Uint8Array(buffer);
+  const chunkSize = 0x8000;
+  let binary = "";
+
+  for (let index = 0; index < bytes.length; index += chunkSize) {
+    const chunk = bytes.subarray(index, index + chunkSize);
+    binary += String.fromCharCode(...chunk);
+  }
+
+  return btoa(binary);
+}
+
+export function collectImageFilesFromClipboardData(
+  clipboardData?: ClipboardDataLike | null
+): File[] {
+  if (!clipboardData?.items) {
+    return [];
+  }
+
+  const files: File[] = [];
+  for (const item of Array.from(clipboardData.items)) {
+    if (item?.kind !== "file") {
+      continue;
+    }
+    if (!item.type?.startsWith("image/")) {
+      continue;
+    }
+    const file = item.getAsFile?.();
+    if (!file) {
+      continue;
+    }
+    files.push(file);
+  }
+
+  return files;
+}
+
+export async function filesToImageAttachments(
+  files: readonly File[]
+): Promise<ImageAttachmentFromFile[]> {
+  return Promise.all(
+    files.map(async (file) => {
+      const mimeType = file.type || "image/jpeg";
+      const base64 = toBase64(await file.arrayBuffer());
+      return {
+        uri: `data:${mimeType};base64,${base64}`,
+        mimeType,
+      };
+    })
+  );
+}