refactor(attachments): drop nanoid and use the blob URL as the id (CHAT-31) (#95)

Author: rpvilo

.changeset/drop-nanoid.md

@@ -0,0 +1,5 @@
+---
+"@intentface/chat": patch
+---
+
+Drop the `nanoid` dependency. The default attachment `convert` now uses the file's blob URL as its id, so `@floating-ui/dom` is the package's only runtime dependency. Ids are still unique per item, including the same file added twice; nothing in the package parses them, and a custom `convert` can still supply its own.

bun.lock

@@ -13,9 +13,8 @@ appearance. This page takes you from an empty React 19 app to a working chat.
 <InstallationBlock packageName="@intentface/chat" />
 
 `react` and `react-dom` (v19+) are the only peer dependencies. Nothing else
-ships with it beyond two small runtime deps — `@floating-ui/dom` for anchored
-positioning and `nanoid` for attachment ids. No styling, no editor framework, no
-animation library.
+ships with it beyond one small runtime dep — `@floating-ui/dom` for anchored
+positioning. No styling, no editor framework, no animation library.
 
 Each primitive is a separate entry point:
 

content/docs/quick-start.mdx

@@ -31,7 +31,6 @@
     "fumadocs-mdx": "15.0.12",
     "lucide-react": "^0.563.0",
     "motion": "^12.42.2",
-    "nanoid": "^5.1.16",
     "next": "16.2.12",
     "next-themes": "^0.4.6",
     "react": "19.2.3",

package.json

@@ -58,8 +58,8 @@ bun add @intentface/chat
 ```
 
 `react` and `react-dom` (v19+) are peer dependencies. Nothing else ships with
-it beyond two small runtime deps (`@floating-ui/dom` for anchored positioning,
-`nanoid` for attachment ids) — no editor framework, no animation library.
+it beyond one small runtime dep (`@floating-ui/dom` for anchored positioning) —
+no editor framework, no animation library.
 
 ## What's inside
 

packages/chat/README.md

@@ -100,8 +100,7 @@
     "prepack": "bun run build"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.7.6",
-    "nanoid": "^5.1.11"
+    "@floating-ui/dom": "^1.7.6"
   },
   "peerDependencies": {
     "react": "^19.0.0",

packages/chat/package.json

@@ -1,13 +1,12 @@
 "use client";
 
 // Headless attachments: generic structural parts, accept matching, and the
-// platform-default ingestion (blob URL + generated id — the browser-native way
-// to reference a picked File; override via Composer.Attachments' create/destroy
-// for upload-to-storage etc.). Policy (accepted types, counts, sizes), media
-// taxonomy, send serialization, and copy are the consumer's. Card visuals
-// belong to the styled layer.
+// platform-default ingestion (a blob URL that doubles as the id — the
+// browser-native way to reference a picked File; override via
+// Composer.Attachments' create/destroy for upload-to-storage etc.). Policy
+// (accepted types, counts, sizes), media taxonomy, send serialization, and copy
+// are the consumer's. Card visuals belong to the styled layer.
 
-import { nanoid } from "nanoid";
 import { type ReactNode, useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 import type { PrimitiveProps } from "../internal/primitive-props";
@@ -37,13 +36,12 @@ export type AttachmentErrorCode = "accept" | "max_file_size" | "max_files";
 // item referencing it by blob URL. Overridable per composer (create/destroy).
 // ---------------------------------------------------------------------------
 
-export const toAttachmentItem = (file: File): AttachmentItem => ({
-  id: nanoid(),
-  url: URL.createObjectURL(file),
-  filename: file.name,
-  mediaType: file.type,
-  fileSize: file.size,
-});
+// Every createObjectURL call mints a fresh `blob:<origin>/<uuid>`, so the URL
+// is also a unique id — even for the same File added twice.
+export const toAttachmentItem = (file: File): AttachmentItem => {
+  const url = URL.createObjectURL(file);
+  return { id: url, url, filename: file.name, mediaType: file.type, fileSize: file.size };
+};
 
 export const revokeAttachmentUrl = (item: Pick<AttachmentItem, "url">) => {
   if (item.url?.startsWith("blob:")) {

packages/chat/src/attachments/attachments.tsx

@@ -0,0 +1,19 @@
+import { describe, expect, test } from "bun:test";
+import { revokeAllAttachmentUrls, toAttachmentItem } from "../src/attachments/attachments";
+
+describe("toAttachmentItem", () => {
+  test("uses the blob URL as the id", () => {
+    const item = toAttachmentItem(new File(["x"], "a.png", { type: "image/png" }));
+    expect(item.url.startsWith("blob:")).toBe(true);
+    expect(item.id).toBe(item.url);
+    revokeAllAttachmentUrls([item]);
+  });
+
+  test("the same file added twice gets distinct ids", () => {
+    const file = new File(["x"], "a.png", { type: "image/png" });
+    const first = toAttachmentItem(file);
+    const second = toAttachmentItem(file);
+    expect(first.id).not.toBe(second.id);
+    revokeAllAttachmentUrls([first, second]);
+  });
+});