KQ-1159 · QUICK/REPLY

Quick Reply

A message notification you answer in place: the sender types as three dots on a staggered tween, then the dots' pill opens into the message on glide as a clip over text already laid out, and Reply expands the notice to a measured height on glide with a real field and three suggestions that slide in on snap in a cascade. Sending lifts the reply off from where its words were and throws it out of the card on an exit tween, the composer folds and a tick draws on flick. Enter replies and Delete dismisses on the notice, Enter sends and Escape goes back in the field, and the suggestions are a toolbar driven by arrow keys.

KQ-1159 · QUICK/REPLY

from asha · 2 waiting

Open it on the Atelier stage

Install

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

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

Props

notices: { id: string; title: string; body: string; tone?: "info" | "success" | "warn" | "danger"; time?: string; initials?: string }[]; default —; The messages, front first: title is the sender, body the message. The first is answerable; the rest wait behind it.
onDismiss: (id: string) => void; default —; Fires from the dismiss button or Delete on the front message.
onReply: (id: string, text: string) => void; default —; The reply, sent from the field with Enter or the send button, or from a suggestion.
suggestions: boolean; default true; Offer three suggested replies under the field.
typing: boolean; default true; Show the sender typing for a beat before each new message.
tone: "neutral" | "warm"; default "neutral"; The suggestions' wording and colour: cool and brief, or warm.
suggest: (notice: QuickReplyNotice, tone: "neutral" | "warm") => string[]; default —; Your own three suggestions for a message and tone.
label: string; default "Messages"; The region's accessible name.
sound: boolean; default false; Play a pop on Reply, a whoosh as the reply flies and a tick as it lands.
disabled: boolean; default false; The message can be read but not answered or dismissed.
className: string; default —; Classes for the region.

Prop	Type	Default	Description
notices	{ id: string; title: string; body: string; tone?: "info" \| "success" \| "warn" \| "danger"; time?: string; initials?: string }[]	—	The messages, front first: title is the sender, body the message. The first is answerable; the rest wait behind it.
onDismiss	(id: string) => void	—	Fires from the dismiss button or Delete on the front message.
onReply	(id: string, text: string) => void	—	The reply, sent from the field with Enter or the send button, or from a suggestion.
suggestions	boolean	true	Offer three suggested replies under the field.
typing	boolean	true	Show the sender typing for a beat before each new message.
tone	"neutral" \| "warm"	"neutral"	The suggestions' wording and colour: cool and brief, or warm.
suggest	(notice: QuickReplyNotice, tone: "neutral" \| "warm") => string[]	—	Your own three suggestions for a message and tone.
label	string	"Messages"	The region's accessible name.
sound	boolean	false	Play a pop on Reply, a whoosh as the reply flies and a tick as it lands.
disabled	boolean	false	The message can be read but not answered or dismissed.
className	string	—	Classes for the region.