shadcn.io is not affiliated with official shadcn/ui
Suggested Replies Comments Block for React
A customer message with three suggested replies by tone (Direct, Warm, Brief) as radio cards: pick one to fill an editable draft, cycle to another set, and post the reply.
Installation
Overview
Answer a customer faster without sounding canned, with these suggested replies for React with Base UI. A compact header sits over one framed panel in two cells. The first holds the customer message, chosen from a native select of three, with a note of what it looks like (a bug report, a thank-you or a how-to question, read from its words), and an editable draft in a Textarea. The second offers three suggested replies as radio cards labelled Direct, Warm and Brief; picking one fills the draft, and Another set cycles to a second typed set. The one primary is a Shine Button that posts the draft to the list of sent replies at the foot. The suggestions column keeps its height across messages and sets. It is built from Textarea, Native Select, Badge, Button, Avatar, Field, Kbd, Shine Button and Guides, with a CSS entrance only. For shared inboxes, support desks and any tool that answers many messages in one voice.
FAQ
How does it know what kind of message it is?
By keywords. intentOf checks for words like crash, error or not working (a bug report), then for "how do" or "how can" (a how-to question), and otherwise treats it as a thank-you. The block says so: suggestions come from typed sets in this demo, not from a model. Add intents and keywords to match your inbox.
How do I use a real model for the suggestions?
Return the same shape from your own function: a few { id, tone, text } replies for a message. Keep the cards and the editable draft, because a suggestion is a starting point, not an answer. Have the server add facts that must be true (order status, dates) rather than letting a model invent them.
What does Another set do?
It cycles between two typed sets for the kind of message and clears the picked card. Your draft stays as it is until you pick something else, so a half-edited reply is never lost by looking at more ideas.
What stays local?
The draft, the picked card and the sent replies. Posting says "Posted in this demo. Nothing was sent." To make it real, send the reply from post as the shop, link it to the customer's conversation, and keep the suggestion id if you want to learn which tone gets used.