shadcn.io is not affiliated with official shadcn/ui
Customer Support AI Block for React
A support agent's window with the customer's refund request, three suggested replies that each name the policy step they rest on, an Insert button that fills the composer, an escalate button and a rating of the drafts.
Installation
Overview
Help a support agent answer faster, with this AI customer support assistant for React with Base UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Counterloft, a support desk assistant: the top bar names the customer, Calla Whitfield, with the ticket number, the subject and the priority as a word, and the log below it is her refund request as Message and Bubble rows. Above the composer sits a strip of three suggested replies, each with the policy step it is based on ("Refund policy, step 3") and an Insert button that puts the draft in the composer, where you can edit it before sending. The AI part is the draft, not the conversation. The composer's Shine Button, the only colored control, sends what the field holds; her next turn arrives after a short Typing Indicator Text, with fresh drafts for it. "Escalate to billing" adds a system line, and her last turn is followed by a Rating of how useful the drafts were. The frame is ruled by Guides, and everything moves with CSS only. For help desks, shared inboxes and any tool where a person approves what an assistant suggests.
FAQ
What stays in the page, and how do I make it real?
Everything. Her turns and the three sets of drafts are typed at the top of the file, one set for each turn, and nothing is sent: the status line under the composer says so. To make it real, ask your model for drafts when a customer message arrives (send it the ticket and the policy passages it may use), fill the strip with what it returns, and send the composer's text to your help desk in the submit handler where the code says so. Keep the "Based on" line: it is what lets the agent check a draft against the policy.
How do the suggested replies work?
Each card holds a draft, the policy step it rests on and an Insert button. Insert copies the draft into the composer and moves focus there; nothing is sent until you press Send, and you can change every word first. When the ticket is solved the strip keeps its height and says no drafts remain. Edit DRAFT_SETS to change the drafts, or replace the list with the output of your own model.
What does Escalate to billing do?
It adds one system line to the log, "Escalated to billing. Nothing is sent in this demo.", turns the button into a quiet "Escalated" and says so in the status line. Pressing it again only repeats that. In your app, call your ticketing tool at that point and keep the system line as the visible record.
What is the rating for?
After her final turn the log asks how useful the drafts were, with five stars you can press or reach with the arrow keys. The value is read aloud as "4 of 5" and echoed in the status line. It is the signal you would send back to improve the drafts; here it stays in the page.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log, and every message starts with a hidden "Calla Whitfield, 09:31". Each Insert button is named for its draft, the drafts strip scrolls sideways on a phone, and Enter sends while Shift and Enter add a line. Priority and delivery are words and glyphs, never a color.