shadcn.io is not affiliated with official shadcn/ui
Group Chat AI Block for Svelte
A narrow window with you and three assistants, a roster with role and status, @ mentions that send a request to one agent only, a handoff chain through Planner, Coder and Reviewer, and a Pause agents button that halts the chain.
Installation
Overview
Put several assistants in one thread, with this AI group chat for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds a narrow window of fixed height for Huddlefern, a three-agent desk. A roster under the top bar shows Planner, Coder and Reviewer with initials tiles, a role Badge and a status word (Ready, Writing, Next or Paused). A request with no mention goes through all three in turn: the Planner writes a plan and hands off with "@Coder please...", the Coder drafts and hands to the Reviewer, each behind a Typing Indicator Text. Typing @ in the composer opens a Listbox of the three, and naming one sends the request to that agent only. Pause agents in the top bar halts the chain after the agent who is writing has finished, and Resume continues it. The composer's Shine Button is the only colored control, and the frame is ruled by Guides. It's the starting point for a multi-agent desk or a team of bots.
FAQ
What stays in the page, and how do I make it real?
Everything. The three agents, their lines and the handoffs are typed in the file; each line is built from your request's first words, and nothing is written, run or reviewed, as the status line says. To wire it, replace replyOf with a call to each agent and keep the chain: a Flow of who writes now and who waits, advanced by one effect.
How does @ routing work?
Typing @ opens the list, filtered as you type; Arrow Down moves into it, Enter takes the top match and Escape closes it. A picked name becomes "@Coder " in the field. On send, the first agent named is the only one that answers, in a shorter direct reply; with no name all three answer in turn.
What does Pause agents do?
It stops the chain from starting the next agent. The one writing finishes its message first, so nothing is cut off, then the roster shows the rest as Paused and the status line says "Paused; resume continues". Sending a new request while agents still have work is refused with a reason, so two requests never interleave.
Where do the roster words come from?
They are worked out from the chain, not typed: Writing for the agent on turn, Next (or Paused) for those waiting, Ready for the rest. On a phone the roster collapses to a one-line summary under the title ("Coder is writing").
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 name and time, and the roster is a labelled list. The mention list is keyboard-driven as above, the status line is one polite region, and nothing relies on colour: status is a word.