KQ-859 · REPLY/CITE

Reply Cite

A thread that can point at itself. Reply on a message slides a cite card into the composer's head from eight pixels above on glide while the head's measured height glides open from nothing, and the original wears a cobalt bar that draws down its side on snap for as long as it is the target. Pressing the card carries the thread back to the original — scrollTop driven by glide rather than jumped — and moves focus onto the message, so it is both seen and read; Escape in the composer or on the card takes the target away, the card leaving upward on the exit ease as the head glides shut. Enter sends with the target id attached and the message that lands quotes what it answered.

KQ-859 · REPLY/CITE

Marta07:12Gate B is clear from eight. Two pallets for the Basinworks run and one loose crate that never got a label.
Rui07:20I can label the loose one, but I need the weight off the docket first.
You07:24Docket says 41 kilos.
Marta07:31Then we are a driver short for the second pallet, and Waylight Pay wants it signed for by ten.

replying to Marta · 4 in thread

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/reply-cite

Props

messages: ReplyMessage[]; default —; The thread, oldest first: id, from ("me" or a sender's name), text, an optional formatted time, and replyTo — the id of the message it answers, which draws its cite line. Append the sent message here from onSend.
replyTo / defaultReplyTo: string | null; default null; Controlled or initial reply target. A target the thread no longer holds shuts the head rather than citing a missing message.
onReplyToChange: (id: string | null) => void; default —; Fires from a Reply press, the remove button, Escape and a send.
onSend: (text: string, replyTo: string | null) => void; default —; Fires from Enter or the Send button with the trimmed text and the target it answers.
placeholder: string; default "Message"; Composer placeholder.
label: string; default —; Names the thread and the composer for assistive technology.

Prop	Type	Default	Description
messages	ReplyMessage[]	—	The thread, oldest first: id, from ("me" or a sender's name), text, an optional formatted time, and replyTo — the id of the message it answers, which draws its cite line. Append the sent message here from onSend.
replyTo / defaultReplyTo	string \| null	null	Controlled or initial reply target. A target the thread no longer holds shuts the head rather than citing a missing message.
onReplyToChange	(id: string \| null) => void	—	Fires from a Reply press, the remove button, Escape and a send.
onSend	(text: string, replyTo: string \| null) => void	—	Fires from Enter or the Send button with the trimmed text and the target it answers.
placeholder	string	"Message"	Composer placeholder.
label	string	—	Names the thread and the composer for assistive technology.