shadcn.io is not affiliated with official shadcn/ui
Pre-Chat Form Chat Block for React Aria
A support window that opens on a front-desk form (name, email, department, what you need) with a named problem under each bad field, then starts the chat in place when you press Start chat.
Installation
Overview
Collect who is asking before a support chat begins, with this pre-chat form for React with React Aria. The window opens on a front desk for Greetdesk, a help-desk tool: a name field, an email field, a department Native Select (Sales, Billing or Support) and a Textarea for what you need, each with its label. A bad press of Start chat puts a named problem under every field that needs one and moves focus to the first. The composer under it is locked, with the words "Start the chat to write here". When the form is complete the chat starts in place: the form steps aside, the log shows your message, the top bar goes from "Waiting for an agent" to "Dilys from Billing joined", her typed first message lands from a Typing Indicator Text wait and the composer unlocks, where Send takes over as the one Shine Button. The window is Guides framed, never changes height and moves with CSS only.
FAQ
What stays in the page, and how do I make it real?
Everything. Your details live in the component's state, the agent and her first message come from a short typed script in this file, and the line under the composer says nothing is sent. To wire it for real, post the four details to your help desk in start where the comment says so, and replace the timers with the events your chat service emits when an agent joins and writes.
How does the form check itself?
On Start chat, small pure helpers check each field: a name is required, the email must look like an address, a department must be chosen and the message must not be empty. Every problem sits under its field with an icon and a sentence, and focus moves to the first one in reading order. Typing in a field clears only its own problem.
Does the department change the chat?
Yes, a little. The department names the agent's line in the top bar ("Dilys from Billing joined") and picks her opening message from a typed list, so Sales asks about seats and Billing asks about an invoice. Real routing by team belongs to your help desk.
Why is the composer locked at first?
There is no conversation to write into until the chat starts, so the field is disabled with a reason in its placeholder and its Send button is held out of reach, in the same space so nothing moves. Once the agent has joined and her message has landed, both come alive.
Is it usable with a keyboard and a screen reader?
Every field has a visible label, problems are linked to their fields and read out with them, and the status line under the composer announces the start, the join and each sent message politely. The log is a focusable region announced as a log, and Enter sends while Shift and Enter add a line.