Review commentPro

One review comment from an agent, anchored to its lines: the code around them, a bracket in the severity's hue, the rationale and a suggested fix in place. Apply, dismiss with a reason, or discuss.

Markdown

On this page

ProA critical finding on a payout split, bracketed on its lines with the fix in place. Ask why and the reviewer answers; Apply lands it.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/review-comment

Usage

tsx

import { ReviewComment } from "@/components/ui/chatcn/pro/review-comment"

<ReviewComment
  severity="critical"
  title="A ledger with every weight at 0 loses the payout"
  path="src/payouts/allocate.ts"
  line={18}
  code={excerpt}
  codeStart={17}
  suggestion={fix}
  onApply={apply}
/>

Pass the lines around the anchor as code with codeStart, and the anchored range as line and endLine. A suggestion replaces the anchored lines and shows in place as red and green. state moves through open, applying, applied, dismissed and outdated; for a pull request's full review use Pull request review.

Examples

States

ProStill writing, a nit with no suggestion, applied, dismissed, outdated, a failed apply and loading.

Props

Prop	Type	Notes
`severity`	`"critical" \| "warning" \| "suggestion" \| "nit"`	A glyph and a word, hue as backup
`title`, `rationale`	`ReactNode`	What is wrong, and why
`path`, `line`, `endLine`	`string`, `number`	The anchor
`code`, `codeStart`	`string`, `number`	Context lines and the number of the first
`suggestion`	`string`	Replacement for the anchored lines
`author`	`{ name, kind?: "agent" \| "person" }`
`state`	`ReviewCommentState`	Default `open`
`dismissReason`, `appliedIn`	`DismissReason`, `string`	Shown on a closed comment
`error`	`ReactNode`	Why Apply failed, with how to fix it
`streaming`, `loading`, `disabled`	`boolean`
`replies`, `onReply`	`ReviewReply[]`, `(text) => void`	The discussion
`discussOpen`, `defaultDiscussOpen`, `onDiscussOpenChange`	`boolean`
`onApply`, `onDismiss`, `onUndo`, `onLineSelect`		`onDismiss` receives the reason

Keyboard

Key	Action
`Tab`	Apply suggestion, Discuss, Dismiss
`Enter`	Send a reply
`Shift` `Enter`	New line in a reply

Accessibility

The comment is an article named by its title, with the severity read first. The anchored range is read as Commented lines, and diff lines as Added and Removed.
Dismiss is a menu of reasons, so the reviewer learns why. Replies are a polite live region; a reply never sends while an IME is composing.

Motion

The discussion rises 4 px over 180 ms. Applying swaps the lines in place with no animation, so the code never moves under the reader. Reduced motion drops the travel.