shadcn.io is not affiliated with official shadcn/ui
Canned Responses Chat Block for React
A support agent's thread with a shelf of eight templates in three folding groups and a search field; choosing one fills its variables and inserts it into the composer for review before sending.
Installation
Overview
Answer faster without losing the human voice with this canned responses chat for React with Base UI. A hairline frame with a plus mark on each corner holds a wide window of fixed height for Replyloft, a shared support inbox, where you are the agent, Dana, replying to a customer, Imre Szabo, on a ticket. The thread is on one side and the team's template shelf on the other, drawn open: eight templates in three Collapsible groups (Greetings, Troubleshooting, Closing) under a search Input, with Troubleshooting expanded. Choosing a template inserts it into the composer with its variables filled from this conversation, the customer's name and the ticket number, and the status line says which it filled. You review it, edit it and send it; the shelf never sends. A short reply from the customer follows. Below the medium breakpoint a Toggle Group switches between Chat and Templates. The Shine Button that sends is the only colored control, and the frame is ruled by Guides. For a help desk, a sales inbox or any team that repeats itself.
FAQ
How are the variables filled?
Each template holds placeholders written in braces. When you choose one, the page replaces the customer placeholder with the customer's first name and the ticket placeholder with the ticket number, then puts the result in the field and lists what it filled in the status line. A template with no placeholders says so. In your app, fill the placeholders from the open conversation's record.
Does choosing a template send it?
No. It is inserted into the composer, after anything you already wrote, so you can read it, change a word and then press Send. The shelf has no send button on purpose: a template is a draft written by your team, not an answer sent for you.
How does search work?
It matches the title and the text of every template. While it holds text, groups with no match disappear, the others open so their matches show, and the count in the shelf header follows. With no match at all the shelf says so and names what you typed.
What stays in the page, and how do I make it real?
Everything. The eight templates and the customer's replies are typed in the file, and nothing is sent. Load your team's templates from your API, keep the same fields (group, title, text), and send the message from the composer's handler.