Standard

Escalation to human

A clear transition from agent to person, with the switch of actor made obvious.

MHelpBilling chat M MilkyAI agent

Hi, I was charged twice for August, $1,240 each time.

Milky AI agent

I can see both: invoices #8821 and #8822 on 14 Aug, two minutes apart. I've started a refund for the duplicate $1,240.

Thanks. That card is cancelled though. Can it go to my new card ending 0932?

Milky AI agent

I can't change where a refund goes: a billing specialist has to verify the new card. I can bring one in now, and they'll see everything we've covered.

Message Milky…

Try it: Ask for a person (the button is always in the header). You see your place in line, then the moment Sam joins, already knowing what you asked.

In the wild

How one product ships this pattern. Click a screenshot to enlarge it.

Side-by-side Old and New Intercom Messenger views of Fin AI Agent handing a refund question to a human; the new one adds a 'Jenna joined the conversation' marker before the teammate replies. — Intercom Fin
When a customer asks for a person, Fin hands over and the Messenger marks the moment a teammate joins, so it's clear a human has taken over.
Source: Intercom Changelog ↗

When to use

Support, sales and any flow where the agent's ceiling is reached mid-conversation.

Seen in

Intercom Fin to teammate, Zendesk AI escalation, Sierra agent handoff, bank chat transfer.

For engineers

Route by risk and deny by default on timeout; carry the transcript and tool results into the ticket.

Build prompt

A neutral, component-only prompt for a coding agent. Edit the stack block or anything else to fit your project, then copy it.

# Build the "Escalation to human" pattern: `HumanHandoff`

## Stack (edit this block to match your project)
- React 18+ with TypeScript: one function component, typed props, no `any`.
- Tailwind CSS, using your design system's tokens if you have them.
- Presentational only: data comes in through props, decisions go out through callbacks. No fetching or global state inside.
- If your codebase already has conventions (naming, shared components, tokens), follow them over this spec.

## What the pattern is for
A clear transition from agent to person, with the switch of actor made obvious.

Use it when: Support, sales and any flow where the agent's ceiling is reached mid-conversation.

## What to build
The chat pieces that move a conversation from an AI agent to a person: an always-visible "Talk to a person" control, an inline offer when the agent reaches its limit, and a clear marker showing who is responding now. It renders in a support chat header and message stream.

### Props
- `status`: "agent" | "offered" | "requested" | "queued" | "connected" | "unavailable" | "ended", controlled by the parent.
- `agent`: { name: string }, always labelled as an AI agent.
- `human?`: { name: string; role: string; avatarUrl?: string }, the person who joined.
- `queue?`: { since: Date; estimateMinutes?: number; position?: number }.
- `offerReason?`: string, why the agent is offering, e.g. "A billing specialist has to verify a new card".
- `carriesOver`: string[], what the person will see, e.g. "This conversation", "The refund already started".
- `fallback?`: { label: string; description: string }, e.g. an email callback when nobody is available.
- `onRequest()`, `onDecline()`, `onCancel()` and `onFallback()`: callbacks. The component never routes anything itself.

### States it must render
- Agent: the header names the agent with an "AI agent" label and shows Talk to a person from the first message.
- Offered: an inline card with the reason and two equal choices, Bring in a person and Keep chatting.
- Queued: "Connecting you to Billing, about 3 min" with what will carry over, and Cancel.
- Connected: a divider in the stream ("A billing specialist joined. You're now talking to a person.") and the header switches name, avatar and label.
- Unavailable: no one free right now, with the fallback offered; never a dead end.
- Ended: a divider saying the person left and who replies next.

### Interactions
- Talk to a person in the header calls `onRequest` at any point, without needing the agent to fail first.
- Bring in a person calls `onRequest`; Keep chatting calls `onDecline` and closes the card.
- Cancel while queued calls `onCancel`; the fallback button calls `onFallback`.

### Edge cases
- The person asks for a human in free text: the parent sets `requested` and the card confirms rather than arguing.
- Queue timeout: the parent moves to `unavailable`; the component never quietly returns to the agent.
- A request while the agent is mid-reply: the request is accepted at once and shown in the stream.
- The agent rejoins after the person leaves: a second divider makes that switch just as visible.

## Must avoid
Hiding the human option until the user has failed three times and lost the thread entirely.

## Engineering constraint
Route by risk and deny by default on timeout; carry the transcript and tool results into the ticket.

## Accessibility
- Announce each change of who is responding ("Now talking to a billing specialist, a person").
- The header control has a stable accessible name and stays in the same place in tab order.

## House rules
- Real `<button>`/`<input>` elements, full keyboard use, visible focus; announce status changes with `aria-live="polite"`; respect `prefers-reduced-motion`.
- All user-facing text comes from props (or a `labels` prop) so it can be translated.
- One consistent accent marks anything the AI made or is doing; amber means "needs a person", red means risky, green means done. Never rely on colour alone.
- Fits a 360 px wide container without horizontal scrolling.

## Acceptance checks
- [ ] Every state above can be rendered by passing props, with no internal fake data.
- [ ] Every interaction and edge case above behaves as described.
- [ ] Nothing in "Must avoid" can happen with this component.

## Deliver
1. The component file with its exported prop types.
2. A short usage example that renders each state.

Download this prompt as Markdown, or every prompt as JSON for an agent.

Critique checklist for human handoff

0 of 4 checked

These questions apply to every pattern in this family. Ticks are saved in this browser.

Does the human receive the full context, unprompted?
Is the wait between handoff and pickup visible?
Can the user force a human at any moment?
Can work return to the agent cleanly afterwards?