CodeReviewThread
code-review-threadPresents review comments, replies, severity, suggested diffs, and resolution or false-positive actions.
Usage
AI Serious comments + suggestions
comment with severity rendering left color bar; suggestion with embedded suggestion diff + adopt button.
<CodeReviewThread comments={comments} />Multiple rounds of dialogue
comments sequentially rendered as AI Comment threads alternating with humans.
<CodeReviewThread comments={comments} />Resolved
Pass status="resolved" for controlled display of the resolved tag (if not passed, it will be managed internally).
<CodeReviewThread comments={comments} status="resolved" />Folded by default
defaultCollapsed Let the thread initially collapse, showing only the title summary, click to expand.
<CodeReviewThread comments={comments} defaultCollapsed />Disable reply
replyable={false} Hide the bottom reply box for read-only display.
<CodeReviewThread comments={comments} replyable={false} />When to use
Use CodeReviewThread for a complete discussion around a code section: multi-turn AI or human comments, severity, suggested diffs, replies, and resolution state. Use [CodeDiff] for a plain line diff, or compose Avatar and a list for general comments without review semantics.
Import
import { CodeReviewThread, severityStyle, SEVERITY } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| comments* | ReviewComment[] | — | Thread comments with author kind, severity, body, and optional suggestion. |
| status | "open"|"resolved"|"wontfix" | open (internally managed) | Controlled thread status when supplied. |
| replyable | boolean | true | Shows the reply field. |
| defaultCollapsed | boolean | false | Initial uncontrolled collapsed state. |
| collapsed | boolean | — | Controlled collapsed state, taking precedence over defaultCollapsed. |
| className | string | — | Custom class name. |
Events
| Event | Type | Description |
|---|---|---|
| onStatusChange | (s: ReviewThreadStatus) => void | Reports status changes for controlled state. |
| onReply | (text: string) => void | Fires when a reply is submitted. |
| onAdoptSuggestion | (commentId: string) => void | Fires when a suggested change is adopted. |
| onCollapsedChange | (v: boolean) => void | Reports collapse changes for controlled state. |
Pitfalls
Both status and collapsed become controlled when supplied. Pair them with onStatusChange and onCollapsedChange, respectively, or interactions cannot persist. collapsed overrides defaultCollapsed; do not treat both as active state.
The built-in interface remains Chinese at runtime. Severity labels are "\u4e25\u91cd" ("Critical"), "\u91cd\u8981" ("Major"), "\u6b21\u8981" ("Minor"), and "\u63d0\u793a" ("Info"). Thread copy includes "\u5efa\u8bae\u4fee\u6539" ("Suggested change"), "\u91c7\u7eb3\u5efa\u8bae" ("Adopt suggestion"), ` ${comments.length} \u6761\u6279\u6ce8 ("N comments"), "\u5df2\u89e3\u51b3" ("Resolved"), "\u8bef\u62a5" ("False positive"), "\u6807\u8bb0\u5df2\u89e3\u51b3" ("Mark resolved"), "\u91cd\u65b0\u6253\u5f00" ("Reopen"), "\u56de\u590d\u8fd9\u6761\u6279\u6ce8\u2026" ("Reply to this comment..."), and "\u56de\u590d"` ("Reply").
Related
Built-in severity, status, suggestion, and reply labels follow ConfigProvider; comment bodies and authors remain business data.
Table · Book3D · ProTable · PricingTable · JsonViewer · EditableTable
Playground
<CodeReviewThread comments={comments} />