KQ-855 · ATTACH/PREVIEW

Attach Preview

Attachments show themselves before they go. A strip above the composer is measured by a ResizeObserver and glides open on glide only when it holds something: a new slot widens from zero on glide while the drawn thumbnail inside rises from distances.step on snap. Removing one narrows its slot to zero and fades it on the exit ease so its neighbours slide together, and sending moves the files into a new own-side bubble in one commit, where a layoutId prefixed by useId flies each thumbnail from the strip into the thread on glide.

KQ-855 · ATTACH/PREVIEW

Send me 4471 before it leaves the dock.
9:41

Nothing to send · 0 sent

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/attach-preview

Props

messages: PreviewMessage[]; default —; The thread, oldest first: id, from (me or peer), optional text, attachments and time.
pending: Attachment[]; default —; The files waiting in the strip: id, name, kind (photo, doc or sheet) and the seed that draws the thumbnail.
onAttach: () => void; default —; Fires from the Attach control; append the next file to pending.
onRemove: (id: string) => void; default —; Fires once a thumbnail's slot has finished narrowing to zero, so the removal is seen before the file is dropped.
onSend: (draft: { text: string; attachments: Attachment[] }) => void; default —; Fires from Enter or Send; clear pending and append the message in the same commit so the thumbnails fly.
peerName: string; default "Them"; Names the other side in the composer's label and the thread's sentences.
placeholder: string; default "Message"; The textarea's placeholder.
label: string; default —; Names the thread list for assistive technology.

Prop	Type	Default	Description
messages	PreviewMessage[]	—	The thread, oldest first: id, from (me or peer), optional text, attachments and time.
pending	Attachment[]	—	The files waiting in the strip: id, name, kind (photo, doc or sheet) and the seed that draws the thumbnail.
onAttach	() => void	—	Fires from the Attach control; append the next file to pending.
onRemove	(id: string) => void	—	Fires once a thumbnail's slot has finished narrowing to zero, so the removal is seen before the file is dropped.
onSend	(draft: { text: string; attachments: Attachment[] }) => void	—	Fires from Enter or Send; clear pending and append the message in the same commit so the thumbnails fly.
peerName	string	"Them"	Names the other side in the composer's label and the thread's sentences.
placeholder	string	"Message"	The textarea's placeholder.
label	string	—	Names the thread list for assistive technology.