shadcn.io is not affiliated with official shadcn/ui
Quick Replies Chat Block for Ark UI
A phone messenger thread where a friend's question carries three suggested answers and a More chip with three more, pressing one sends it and starts the next row, and typing your own text hides the suggestions.
Installation
Overview
Offer the answers the other person wrote with this quick replies chat for React with Ark UI. A hairline frame with a plus mark on each corner holds a narrow window of fixed height for Chipchat, a phone messenger: the top bar names Dilys, and the log is a day label and a run of Message and Bubble rows. After her last question a row of three outline chips sits in the log ("Yes, 7 pm", "Can we do 8?", "Not tonight") with a More chip that opens a Popover of three further answers. Pressing one sends it as your message and a Typing Indicator Text comes before her next question and its own row, down a typed tree of five turns about dinner. A row expires when you move on: typing your own text, or pressing any chip, replaces it with a quiet "Suggestions hidden" line, and the last turn says "No more suggestions". The composer's Shine Button, the only colored control, sends what you type, and the frame is ruled by Guides. It's for a chat where the sender proposes the next move: a booking, a confirmation or a support flow.
FAQ
What stays in the page, and how do I make it real?
Everything. The five turns are a typed list in this file, each with its question, three chips, three more answers and one lead-in per answer, and the reply to a chip is its lead-in followed by the next question. Nothing is sent and no model runs, as the line under the composer says. To wire it for real, send the text where post says so, and fill options and more on each incoming message from your server.
When does a row of suggestions go away?
When you move on. Typing anything of your own into the field replaces the live row with "Suggestions hidden" and it does not come back, because the suggestions were an offer for that moment. Pressing a chip does the same to the row you used and a new row arrives under her next message. On the last turn the line reads "No more suggestions". Older rows keep their line so the log never shows buttons that would answer an old question.
How does the More chip work?
It opens a small list of three more answers in a popover. Each is a real button: pressing it closes the list and sends that answer exactly like a chip. Escape closes it too and focus goes back to the chip. The list is a plain ul, so it reads as three buttons to a screen reader.
How is this different from suggested drafts?
The chips are options the sender wrote and offered, like a bot's quick answers, not text proposed for you to edit, so they send at once and they are theirs to take away. If you want suggestions for your own reply, put them above the field and let a press fill it instead.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log, every message starts with a hidden "Dilys, 18:03" or "You, 18:04", and the chips sit in a labelled group, "Replies Dilys suggests". Tab runs through the chips, the field and Send. The field's description says that typing your own message hides the suggestions.