shadcn.io is not affiliated with official shadcn/ui
Agent Assignment Chat Block for Ark UI
A help desk thread that routes you: three team cells in the bot's first message, a three-line connecting wait, then an agent card with role, rating, reply time and languages before the person writes.
Installation
Overview
Route a visitor to the right team with this agent assignment chat for React with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Paylea, a payroll tool: the help bot's first message holds three cells, Sales, Technical and Billing, each with a typed wait, as a group of radio buttons. Choosing one posts it as your message and starts a connecting wait of three lines (reading your request, finding an available agent, joining) with a spinning glyph on the current one and a status line that says each. Then a card joins the log with the agent's initials, role, a read-only rating, how fast they reply and their languages as Badge chips, and the agent writes. Until then the composer only reads and says "Choose a department first". The composer's Shine Button, the only colored control, sends what you type; Enter sends and Shift and Enter add a line. Everything sits in Message and Bubble rows. The frame is ruled by Guides, and everything moves with CSS only. A start for a support desk that has more than one team.
FAQ
What stays in the page, and how do I make it real?
Everything. The three agents, their ratings and the replies are typed in the file, the wait is a short chain of timers, and nothing is sent, as the line under the composer says. To wire it for real, send the chosen team to your help desk where choose is, show the connecting lines while your server finds an agent, and append the agent card and their messages to the same list as they arrive.
How do the team cells work?
They are native radio buttons drawn as cards, so arrow keys move between them and the choice is announced with the group's label. The first choice is final: the cells stay in the log, the chosen one marked, and the others turn quiet because the routing has started. Edit DEPTS to change the teams, waits and agents.
What does the connecting wait show?
Three typed lines, one at a time, about half a second apart in this demo: a tick for each line that is done, a spinning glyph on the current one and an empty dot for the rest. The status line says what is happening in words, and with reduced motion the spinner holds still. Replace the timer with the real events from your routing service.
Why can't I type at first?
The composer is read only until an agent has joined, and it says so in its placeholder and in the status line if you press Send. Nobody is there to read a message yet, and the demo would otherwise have to invent a reply from nobody.