Established

Report and escalate

A clear route for harmful or high-stakes failures that reaches a human with the full context.

M Live chatDana Ortiz · ticket #4821 Milky replying

Dana Ortiz 10:41

I was charged twice for August, $1,240 each. Can you sort it out?

Milky 10:41 · sent to customer

Sorry about that! To get your refund out faster, please reply with your full card number and the 3-digit security code on the back.

Dana is typing…

Try it: Milky just asked a customer for her full card number. Report the reply from the message itself and see who gets it, with what context.

In the wild

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

Character.AI 'Report Character' dialog listing twelve reasons such as harassment, self-harm, misinformation and privacy, with an Additional details field and Cancel and Submit buttons over the dimmed chat. — Character.AI
A flag in the character's panel opens a reason list and a free-text field over the chat, so a report never means leaving the conversation.
Source: Character.AI (captured Sep 2026) ↗

When to use

Regulated domains, safety-relevant output, and anything with reputational blast radius.

Seen in

Enterprise copilot report flows, content moderation escalation, support handoff with transcript.

For engineers

Attach the run ID, model version and retrieval set to the report or triage cannot reproduce it.

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 "Report and escalate" pattern: `ReportResponse`

## 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 route for harmful or high-stakes failures that reaches a human with the full context.

Use it when: Regulated domains, safety-relevant output, and anything with reputational blast radius.

## What to build
A report control attached to each AI message that opens a short form (reason, severity, optional note), shows who will receive it and what context is attached, and confirms the hand-off to a human. Reporting never requires leaving the conversation or digging into settings. It renders in the message action menu, with the form as a popover or sheet.

### Props
- `reasons`: Array<{ id: string; label: string; severity: "standard" | "urgent" }>, e.g. "Asked for sensitive data", "Harmful advice", "Wrong and costly".
- `selectedReasonId?`: string and `note`: string, controlled.
- `attachedContext`: Array<{ label: string; value: string }>, e.g. run id, model version, retrieved sources, conversation excerpt, shown before sending.
- `recipient`: { name: string; responseTime?: string }, who handles it, e.g. "Trust and safety team, replies within 4 hours".
- `status`: "closed" | "open" | "submitting" | "submitted" | "error".
- `receipt?`: { id: string; at: Date; nextStep: string }, shown after submitting.
- `onOpen()`, `onReasonChange(id)`, `onNoteChange(text)`, `onSubmit()`, `onCancel()` and `onHideMessage?()`: callbacks. The component never sends reports itself.

### States it must render
- Closed: a visible "Report" action (flag icon plus text) on every AI message, not hidden in an overflow menu only.
- Open: reason list, optional note, "Goes to <recipient>" and a "Sent with your report" list of attached context.
- Urgent reason selected: the form shows that it will be escalated immediately and offers to hide the message now.
- Submitted: a receipt with report id, time, who has it and what happens next, e.g. "A person will review this within 4 hours"; the message shows "Reported".
- Error: "Report not sent" with Retry, keeping the reason and note.

### Interactions
- Report calls `onOpen`; the form opens next to the message without navigating away.
- Selecting a reason calls `onReasonChange`; Send is enabled once a reason is chosen and calls `onSubmit`.
- Hide message calls `onHideMessage` and replaces the content with "Hidden: you reported this" and a show option.
- Cancel or Escape closes the form and returns focus to the Report button.

### Edge cases
- Missing run id or model version in `attachedContext`: show "Some details couldn't be attached" so triage knows, rather than failing silently.
- Reporting the same message twice: show the existing receipt and offer to add a note.
- The conversation contains sensitive data: the attached-context list states that the excerpt is included so the person can decide.
- A high-stakes report while the AI conversation continues: the message stays reported and hidden state persists if the person scrolls away or reloads, driven by props.

## Must avoid
Burying reporting in settings so the only visible option is abandoning the product.

## Engineering constraint
Attach the run ID, model version and retrieval set to the report or triage cannot reproduce it.

## Accessibility
- The form is a dialog labelled "Report this response"; reasons are a radio group.
- On submit, focus moves to the receipt and its next step is announced.

## 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 feedback & correction

0 of 4 checked

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

Is correcting faster than regenerating?
Does the system capture why, not just thumbs?
Does a correction persist beyond this session?
Can the user get the previous version back?