shadcn.io is not affiliated with official shadcn/ui
Chatbot Handoff Chat Block for React
A bot-to-person handoff: a help bot answers twice and offers Talk to a person, a spinner line hands over to Dario, and a closed note lists what the bot shared with him.
Installation
Overview
Hand a conversation from a bot to a person without losing the context, with this chatbot handoff chat for React with Base UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Kilowick, an electricity retailer. Kilo, a help bot marked with a square tile and a "Bot" word, answers a bill question twice and then offers "Talk to a person" as a reply button. Pressing it posts that as your message, shows "Handing you to the team" with a spinning glyph and, after a short wait, a system line says Dario Vasquelle joined. Under it a closed Collapsible, "What Kilo shared with Dario (3 messages)", lists what was passed on. The person looks different from the bot, with a round initials avatar. The composer stays usable throughout: lines you write while waiting are marked "Waiting for Dario" until he joins. The composer's Shine Button, the only colored control, sends what you type; Enter sends and Shift and Enter add a line. Messages are Message and Bubble rows, and a Typing Indicator Text shows before each reply. The frame is ruled by Guides, and everything moves with CSS only. Use it where a bot should know when to stop.
FAQ
What stays in the page, and how do I make it real?
Everything. Kilo's fallbacks and Dario's replies are typed in the file, the handover is one timer, and nothing is sent, as the line under the composer says. To wire it for real, create the conversation with your help desk when the button is pressed, pass the summary that the disclosure lists, and append Dario's messages when your service says he has joined.
What does the closed note show?
The three things the bot passes on: your messages about the topic, the account it looked at with its meter reading, and the bot's own one-line summary. It is a disclosure, so it stays out of the way until someone wants to check; its count is the length of the typed list. Fill it from the transcript you really hand over.
What happens to messages I write while waiting?
They post as usual, with "Waiting for Dario" and a clock glyph under the newest instead of "Sent", and the status line says they are queued. When Dario joins his first line says he has read them. Nothing is lost, and nothing is sent anywhere in this demo.
How can I tell the bot from the person?
By shape and by word, never by color: the bot has a square tile with a robot glyph and a "Bot" word beside its name, the person a round avatar with initials. The top bar changes the same way when the handover completes, so the thread always says who is on the other end.
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 sender and time, and the handing-over line becomes a tick when it is done. The disclosure is a real button that reports whether it is open, and the offer button is spent, not hidden, once you have answered it.