Handoff to teammatePro

Hand a thread to a teammate with a summary they can act on, with the baton showing where the handoff is.

Markdown

On this page

ProInes hands the refund thread to a teammate with the summary an agent drafted, then can undo.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/handoff-teammate

Usage

tsx

import { HandoffTeammate } from "@/components/ui/chatcn/pro/handoff-teammate"

<HandoffTeammate
  from={me}
  teammates={[
    { ...tomasz, load: "2 open threads" },
    { ...noor, presence: "idle", note: "In a call until 15:00" },
  ]}
  summary={summary}
  onSummaryChange={setSummary}
  summaryBy={quill}
  summarizing={drafting}
  historyCount={14}
  onHandoff={(h) => api.handoff(threadId, h)}
  onUndo={() => api.undoHandoff(threadId)}
/>

Pick who takes the thread (each says when they are free and how busy they are), read and edit the summary an agent drafted, choose whether the last messages travel along and whether you stay on the thread, then hand off with a button that names them. The baton at the top is the state in one glance: dashed while you pick, drawing in ink while the handoff travels, solid with a check on their avatar once it lands, red and broken if they decline. Undo stays for undoSeconds after it lands. Agents can be teammates too.

Examples

States

ProNothing picked, sent with undo, accepted, declined, a failed send, loading and a summary in progress.

Props

Prop	Type	Notes
`from`	`CollabMember`	Who hands off
`teammates`	`(CollabMember & { presence?, note?, load? })[]`	Away people can still take it; the note says when
`value`, `defaultValue`, `onValueChange`	`string \| null`	Picked teammate
`summary`, `defaultSummary`, `onSummaryChange`	`string`	The summary
`summaryBy`, `summarizing`	`CollabMember`, `boolean`	Credit and drafting state
`historyCount`	`number`	Offer to include recent messages
`status`	`"idle" \| "sending" \| "sent" \| "accepted" \| "declined"`	Controlled; otherwise run from `onHandoff`
`acceptedAt`, `declineReason`	`string`	For the settled lines
`onHandoff`	`({ to, summary, includeHistory, stay }) => unknown \| Promise<unknown>`	Reject to show the error
`undoSeconds`, `onUndo`, `onCancel`, `onPickAnother`		Default 10 s
`loading`, `labels`		States and every string

Labels

labels covers the title, the To legend, the summary label and credit, the drafting line, both options, every button (including send(name) and sending(name)), the settled lines, Undo and the presence words.

Keyboard

Key	Action
Arrow keys	Move between teammates (a radio group)
Tab	Summary, options, then Cancel and Hand off

Accessibility

Teammates are native radios inside a fieldset with a legend; the focused row shows a focus ring.
The summary has a visible label that names the teammate.
Settled states are a status region; a failed handoff is an alert.

Motion

The baton line scales from your side: 1.2 s while sending, 280 ms to land. The check pops in from 0.5 with a fade. Reduced motion drops the line's travel.