Report reply

Pro

Flag a reply for a person to review: why, and an optional note. Who reviews it is the service's policy and is passed in, so the confirmation says where the report actually went. Sent once; the button then shows it was sent.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/report-reply

Brings in: button, locale, popover, utils · npm: lucide-react@^1.67.0

Usage

TSX · The example above

"use client"

import { ReportReply } from "@/components/report-reply"

export default function Example() {
  return (
    <div className="flex max-w-lg flex-col gap-2">
      <p className="text-sm">The orders table has no index on customer_id, so I’ve drafted a migration that adds one.</p>
      <ReportReply reviewer="the Keel quality team" onReport={() => {}} />
    </div>
  )
}

<ReportReply>

Prop	Type	Default	Description
reviewerrequired	`string`	—	Who sees the report, e.g. "the quality team".
onReportrequired	`(reason: ReportReason, note: string) => void \| Promise<void>`	—	Called on send with the reason and the trimmed note (empty if none); the send button waits on a returned promise.
className	`string \| undefined`	—	Extra classes for the outer element.

Strings

The fixed words, in English by default. Change any of them under reportReply in <LocaleProvider strings={{ … }}>; the table is exported as reportReplyStrings.

Key	English
wrong	It’s wrong
wrongDetail	A fact, number or name doesn’t match reality
unsafe	It proposed something unsafe
unsafeDetail	A change that could break or expose something
harmful	It’s harmful or inappropriate
harmfulDetail	Offensive, biased, or shouldn’t have been said
other	Something else
otherDetail	Say what in the note
reported	Reported to {reviewer}
report	Report this reply
question	What’s wrong with this reply?
note	Note (optional)
goesTo	Goes to {reviewer}, with this reply and the thread up to it.
send	Report

Types

ReportReason: "wrong" | "unsafe" | "harmful" | "other"