Report dialogPro
Report a response with categories, the excerpt selected and an optional note.
On this page
ProReporting a made up citation, the sentence shown in context.
Installation
Usage
import { ReportDialog } from "@/components/ui/chatcn/pro/report-dialog"
<ReportDialog response={text} selection={selectedText} onSubmit={(report) => api.report(report)} />The reported words are shown in place inside the response: the selection keeps full contrast and an ink underline while the rest steps back to gray, so people see exactly what goes to the reviewer and in what context. A switch flips between the selection and the whole response. Send stays disabled until a category is picked, and the dialog ends on a receipt with a reference instead of a toast that vanishes.
Examples
States
ProA custom trigger with the whole response, and a send that fails.
Props
| Prop | Type | Notes |
|---|---|---|
response | string | The full response text |
selection | string | The selected part, a substring of response |
categories | { id, label, description? }[] | Five sensible defaults |
onSubmit | (report) => ReportReceipt | Promise<ReportReceipt> | { category, excerpt, selectionOnly, note }; reject to show the error |
trigger | ReactElement | Defaults to a flag icon button |
open, defaultOpen, onOpenChange | Controlled or uncontrolled | |
maxNote | number | Default 500 |
Keyboard
| Key | Action |
|---|---|
| Arrow keys | Move between categories |
| Tab | Excerpt switch, note, Send report |
| Esc | Close |
Accessibility
- Categories are a radio group; the excerpt switch is a two option radio group.
- Send errors are announced as alerts; the note has a visible label and a live count.
Motion
The dialog scales from 0.96 in 220 ms; opened from the keyboard it appears instantly. The receipt replaces the form without motion.