Standard

Rated response with reason

Thumbs plus a short structured reason, so the signal is diagnosable rather than a bare score.

MAsk MilkyAccounts Run r-7f3a21

When does Northfield Dental renew, and how many seats are they on?

Milky

Northfield Dental is on 40 seats and renews on 14 November. Leo Martin owns the account, and their usage is up 12% since July.

Contract 2025.pdf CRM · Northfield Dental

Rate this answer

Try it: The renewal date is wrong. Give the answer a thumbs down, pick a reason and add a note, then see exactly what reaches the quality queue.

In the wild

How 2 products ship this pattern. Click a screenshot to enlarge it.

Glean Assistant feedback dialog: 'You found this Not helpful', reason chips Incomplete or no answer provided, Inaccurate response, Outdated response, Missing a citation or source, Used incorrect citation or source, Other, plus an optional details box and Send button — Glean
A thumbs down in Glean Assistant opens reason chips, such as inaccurate, outdated or wrong citation, plus an optional note, so each rating says what went wrong.
Source: Glean Docs ↗

Zendesk QA 'Review this conversation' panel for a bot reviewee named MBot with thumbs ratings for Clarity, Solution, Next steps and auto-scored categories like Greeting, Empathy, Solution offered, Tone, plus a comment box — Zendesk QA
Reviewers grade an AI agent's conversation per category (clarity, solution, tone) with thumbs and a comment, not a single overall score.
Source: Zendesk help ↗

When to use

Any generative surface you intend to evaluate and improve.

Seen in

ChatGPT feedback dialog, Claude rating, Copilot inline feedback, Intercom Fin resolution tags.

For engineers

Log the full request context with the rating; free-text reasons need clustering to be useful.

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 "Rated response with reason" pattern: `ResponseRating`

## 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
Thumbs plus a short structured reason, so the signal is diagnosable rather than a bare score.

Use it when: Any generative surface you intend to evaluate and improve.

## What to build
Thumbs up and down controls on an AI response that, after a rating, ask for a short structured reason (chips plus an optional note) and show exactly what will be sent. It turns a bare score into a diagnosable report. It renders in the action row under each response.

### Props
- `rating`: "up" | "down" | null, controlled.
- `reasons`: { up: Array<{ id: string; label: string }>; down: Array<{ id: string; label: string }> }, e.g. "Inaccurate", "Outdated", "Wrong source", "Too long".
- `selectedReasons`: string[] and `note`: string.
- `status`: "idle" | "asking" | "submitting" | "submitted" | "error".
- `contextSummary`: Array<{ label: string; value: string }>, what is attached to the rating, e.g. conversation, response id, model version, sources.
- `onRate(rating)`, `onReasonsChange(ids)`, `onNoteChange(text)`, `onSubmit()` and `onSkip()`: callbacks. The component never sends anything itself.
- `noteMaxLength?`: number (default 500).

### States it must render
- Idle: two icon buttons with labels in tooltips.
- Asking: after a rating, a small panel with reason chips for that direction, an optional note, a "What we'll send" disclosure listing `contextSummary`, and Send / Skip.
- Submitting: Send disabled with a busy indicator.
- Submitted: "Thanks, sent to the quality team" with the chosen reasons echoed; the thumb stays pressed.
- Error: "Couldn't send" with Retry, keeping the selections.

### Interactions
- Clicking a thumb calls `onRate` and opens the reason panel; clicking the pressed thumb again clears the rating.
- Chips are multi-select toggles calling `onReasonsChange`.
- Send calls `onSubmit`; Skip calls `onSkip`, which keeps the bare rating rather than discarding it.
- Changing direction after submitting reopens the panel with the other reason set.

### Edge cases
- A down rating with no reason chosen: allow Send but nudge once ("A reason helps us fix it"), never block.
- Note contains personal data: show a hint that it is attached to the conversation, and the context list makes clear what is shared.
- Many responses in a thread: only one reason panel open at a time.
- Ratings on a still-streaming response: thumbs disabled until done.

## Must avoid
Thumbs with no follow-up, producing volume you cannot act on and users who stop bothering.

## Engineering constraint
Log the full request context with the rating; free-text reasons need clustering to be useful.

## Accessibility
- Thumbs are toggle buttons with `aria-pressed` and labels "Good response" / "Bad response".
- When the reason panel opens, move focus to its first chip; on close, return focus to the thumb.

## 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?