AI Attachment Tray

A standalone attachment strip, decoupled from any chat composer, that you can mount above any textarea. Drop files onto the tray, paste a screenshot, or press "＋" to pick — each becomes a chip: images show a thumbnail, everything else shows a type icon derived from the MIME type or extension (PDF, document, spreadsheet, code, audio, video, archive) plus a middle-truncated file name and size. While uploading, an SVG progress ring with a percentage overlays the thumbnail; on failure the chip turns red with a retry button, and the remove × only appears on hover. Chips spring in and shrink out, and can be dragged to reorder; when the count or size limit is exceeded only a hint chip is shown and the files are never handed to onAdd.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

<AiAttachmentTray />

Installation

npx shadcn@latest add https://webberui.com/r/ai-attachment-tray.json

Usage

Controlled mode: the parent owns the list, performs the uploads, and writes progress back into files.

import * as React from "react";
import {
  AiAttachmentTray,
  type AiAttachmentFile,
} from "@/components/ui/ai-attachment-tray";

function Composer() {
  const [files, setFiles] = React.useState<AiAttachmentFile[]>([]);

  const upload = (id: string, file: File) => {
    // Call your upload API and update progress from its progress events; set status to "done" on success, "error" on failure
    uploadToServer(file, {
      onProgress: (p) =>
        setFiles((prev) => prev.map((f) => (f.id === id ? { ...f, progress: p * 100 } : f))),
    })
      .then(() => setFiles((prev) => prev.map((f) => (f.id === id ? { ...f, status: "done" } : f))))
      .catch(() => setFiles((prev) => prev.map((f) => (f.id === id ? { ...f, status: "error" } : f))));
  };

  return (
    <div className="rounded-2xl border p-2">
      <AiAttachmentTray
        files={files}
        maxFiles={6}
        maxSizeMB={10}
        accept="image/*,.pdf,.docx,.xlsx"
        onAdd={(incoming) => {
          const entries = incoming.map<AiAttachmentFile>((file) => ({
            id: crypto.randomUUID(),
            name: file.name,
            size: file.size,
            type: file.type,
            status: "uploading",
            progress: 0,
            previewUrl: file.type.startsWith("image/") ? URL.createObjectURL(file) : undefined,
          }));
          setFiles((prev) => [...prev, ...entries]);
          entries.forEach((entry, i) => upload(entry.id, incoming[i]));
        }}
        onRemove={(id) => setFiles((prev) => prev.filter((f) => f.id !== id))}
        onRetry={(id) =>
          setFiles((prev) =>
            prev.map((f) => (f.id === id ? { ...f, status: "uploading", progress: 0 } : f)),
          )
        }
        onReorder={(ids) =>
          setFiles((prev) =>
            ids.flatMap((id) => prev.filter((f) => f.id === id)),
          )
        }
      />
      <textarea rows={2} placeholder="Ask anything…" className="w-full bg-transparent p-2" />
    </div>
  );
}

Omit files for uncontrolled mode: the component keeps its own list (newly added files are marked done right away and images get an automatic thumbnail), which suits the case where you only need to collect files and upload them all at once on submit.

<AiAttachmentTray
  defaultFiles={[]}
  onChange={(files) => console.log(files.map((f) => f.name))}
  onAdd={(incoming) => console.log("files that passed validation", incoming)}
/>

Props

AiAttachmentFile

AiAttachmentTrayLabels

getAttachmentKind(type, name) (derives the kind from MIME type and extension), truncateMiddle(name, max) (middle-truncates a file name), formatFileSize(bytes) (formats as B / KB / MB / GB), and the AiAttachmentStatus, AiAttachmentKind, and AiAttachmentRejectReason types are also named exports, so the parent can reuse the same logic when rendering its own lists or messages.

How it works

• Kind detection: the MIME type is checked first (image/*, application/pdf, audio/*, video/*, spreadsheets, archives, documents, code), then it falls back to an extension table — browsers often report an empty MIME type for things like .md / .ts, and the fallback keeps them from all landing in "other"
• Progress ring: SVG stroke-dashoffset advances smoothly on a spring; when progress is omitted a short spinning arc signals "processing"; the ring center shows a whole-number percentage (omitted in compact mode)
• Drag to reorder: built on motion Reorder.Group / Reorder.Item (axis="x"); the retry and remove buttons inside a chip stop pointerdown so they never start a drag; dragging is disabled with a single attachment or when onReorder is omitted in controlled mode
• Drop and paste: the whole tray is a drop zone — while a drag hovers, the dashed border darkens and labels.dropHint is shown; dragging in and out of child elements fires dragenter / dragleave repeatedly, so a depth counter prevents flicker. The paste listener is attached to document (bound only inside an effect, and can be turned off with listenPaste) and only acts when the clipboard carries files (a screenshot, say)
• Limit handling: accept / maxSizeMB / maxFiles are checked in that order; files that fail are never handed to onAdd — onReject fires instead and an amber hint chip appears (it fades out after about 3 seconds); only the first reason in a batch is shown
• Thumbnails in uncontrolled mode: images get a thumbnail via URL.createObjectURL, which is revoked on removal or unmount so nothing leaks
• Focus after removal: if focus was on the removed chip, it moves to a neighboring chip instead of falling back to body

Accessibility

• The attachment list is role="list" (its aria-label comes from labels.list); each chip is a focusable role="listitem" whose aria-label includes the file name, size, and status, and is linked to the keyboard instructions via aria-describedby
• Keyboard: Left / Right move between chips, Home / End jump to the first / last, Shift + arrow reorders, Delete / Backspace removes; reorders and removals are announced through aria-live="polite"
• The progress ring carries role="progressbar" with aria-valuenow / aria-valuetext; the remove and retry buttons both have an aria-label that includes the file name
• The remove button only appears on hover / focus on fine-pointer devices and is always visible on touch devices; every button is type="button" with a focus-visible outline
• When the user has "reduce motion" enabled at the system level, chip enter / exit becomes a plain fade, chips do not scale up while dragging, the progress ring jumps straight to the current value, and the indeterminate ring stops spinning