Agent in channelPro

A team channel where several agents reply and hand off to each other, with the handoff drawn in the avatar gutter.

Markdown

On this page

ProOne agent triages, hands off to another, a person approves and the channel sees every step.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/agent-in-channel

Usage

tsx

import { AgentInChannel, ChannelMention } from "@/components/ui/chatcn/pro/agent-in-channel"

<AgentInChannel
  items={[
    { id: "1", author: kenji, time: "10:38", body: <><ChannelMention member={triage} /> charged twice</> },
    { id: "2", author: triage, time: "10:39", body: reply, status: "streaming" },
    { kind: "handoff", id: "h", from: triage, to: ledger, reason: "refunds belong to billing" },
  ]}
  working={[{ agent: ledger, activity: "checking settlement on charge 2" }]}
/>

Posts group by author. When one agent hands work to another, the handoff draws in the avatar gutter as a hairline that drops and bends toward the next agent, with both names and the reason, so the change of voice is never a surprise; a pending handoff is dashed and shimmers. Agents at work show what they are doing under the last post with the kit's one shimmer. Replies stream with the caret; a failed one keeps its place with the error and Retry. Events ("added Ledger to the channel") are one quiet line. Drop it into any channel frame.

Examples

States

ProA failed reply, a handoff under way, events and a long post, empty, loading and a streaming reply.

Props

Prop	Type	Notes
`items`	`(ChannelPost \| ChannelHandoff \| ChannelEvent)[]`	Posts by default; `kind: "handoff"` or `"event"`
`ChannelPost`	`{ id, author, time?, body, status?, error?, onRetry? }`	`status`: `streaming`, `done`, `error`
`ChannelHandoff`	`{ id, from, to, reason?, context?, status? }`	`status`: `pending`, `done`
`working`	`{ agent, activity }[]`	Shimmering lines after the last post
`loading`, `labels`		States and every string

Labels

labels covers the agent tag, the handoff verbs, the failed line and Retry, the empty state, the log's name and working(agent, activity).

Accessibility

The stream is a log with a polite live region for additions.
Handoffs are text, not only lines: both names and the reason are read.
A failed reply is an alert with a Retry button.

Motion

New posts rise 4 px and fade in over 200 ms. Streaming text appends with no per word effect. Reduced motion keeps the fades and the static caret.