Skip to content
ConversationMessage feedbackMenu

Message feedback

Thumbs up and down. The icon fills when chosen, thumbs down asks what went wrong, and both end with a quiet thank-you.

Markdown
On this page
Thumbs down asks why with inline chips.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/message-feedback.json

Usage

tsx
import { MessageFeedback } from "@/components/ui/chatcn/message-feedback"

<MessageActions>
  <MessageFeedback
    onValueChange={(value) => rate(message.id, value)}
    onReason={(reasons, note) => report(message.id, reasons, note)}
  />
</MessageActions>

Examples

Popover

Pick several reasons and add a note. Enter sends the note.

Pick reasons and add a note.

Props

PropTypeNotes
value, defaultValue"up" | "down" | nullControlled or uncontrolled
onValueChange(value) => voidClicking the active thumb again clears it
reasonsstring[]Offered after thumbs down. An empty array skips the question
reasonMode"chips" | "popover"Inline chips under the toolbar, or a popover with a note
onReason(reasons, note?) => voidThe picked reasons
thanksstringDefaults to Thanks for the feedback

Accessibility

  • The thumbs are toggle buttons with aria-pressed, named Good response and Bad response.
  • The thank-you is a polite live region.
  • In the popover, focus moves to the first reason and returns to the thumb when it closes.

Motion

  • Choosing a thumb swaps outline for filled with a 150 ms blur crossfade. From the keyboard, the swap is instant.
  • The reason chips drop in 4 px over 180 ms. The thank-you fades in, stays 2.4 s and fades out.