Composer Attachments

Preview in your theme

status="ready" · variant="chips", placement="above" — the compact strip glued to the composer’s top edge. Overflow scrolls sideways with a fade at each live edge; open and remove are both wired to real state

Tab to a chip and press Delete, or use its ✕ — focus lands on the next attachment either way, and the removal is announced.

status="ready" · variant="cards", placement="below" — the same eight attachments as rich previews: image thumbnails (the last one 404s and falls back to its type mark), per-kind statistics and a type badge. Narrow the window and the row wraps instead of squeezing

93 lines
PDF
43 files32 docs
Folder
1,023 rows18 columns
CSV
docs.example.com
Link
apps/console/src/hooks/useComposerDraft.tslines 120–186
Snippet
DOCX

Each card prints only the statistics its kind actually has: lines for the PDF, files and documents for the folder, rows and columns for the sheet — and nothing at all for the .docx, whose count was never supplied.

status="ready" · maxVisible={5} — everything past the fifth entry folds behind a “+3 more” button that expands in place

contract-agreement-brief.pdf
cloud-cover.png
Q3 launch assets
lead-list-q3.csv
Streaming responses — API reference

8 attached, 5 shown — the “+3 more” button unfolds the rest in place.

status="ready" · read-only (removable={false}, no onOpen): no ✕, no key handling, nothing focusable — the strip is plain content that never pretends to be pressable

contract-agreement-brief.pdf
cloud-cover.png
Q3 launch assets
lead-list-q3.csv
Streaming responses — API reference

status="loading" · variant="chips", skeletonCount={4} — pills at the real chip height, so the strip does not jump when the list arrives; the pulse stops under prefers-reduced-motion

status="loading" · variant="cards", skeletonCount={4} — the same placeholders at card geometry (w-40 × h-32)

status="empty" · says what can be attached rather than just "nothing here"; pass emptyState to replace the whole block

Nothing attached yet — add files, images, folders, spreadsheets, links or code snippets and they line up here before you send.

status="error" · the list failed to load, which is not the same as "your files are gone" — and Try again only exists because onRetry was passed

Could not load your attachments. They are still attached to this message — only the list failed to arrive.

current status: error

Loading preview…

This component is part of Pro

The install command, prompt and concept map are included with a Pro license — one purchase unlocks every Pro component, forever.

Unlock with Pro