CommentThread
Threaded discussion for review comments, incident notes, and ticket replies.
CommentThread
| Prop | Type | Default | Description |
|---|---|---|---|
comments | Comment[] | — | Top-level comments with nested replies. |
onReply | (parentId: string, body: string) => void | — | Called when a reply is submitted. |
onReact | (commentId: string, emoji: string) => void | — | Called when a reaction is added. |
onComment | (body: string) => void | — | Adds a top-level composer under the thread. |
currentUserInitials | string | — | Initials for the composer's avatar. |
maxDepth | number | 3 | Maximum reply nesting before Reply is hidden. |
renderActions | (comment: Comment) => ReactNode | — | Extra controls in the header row. |
emptyState | ReactNode | "No comments yet." | Shown when comments is empty. |
Comment
Comment fields: id (string), author (string), initials?, avatar?, body (ReactNode), time (Date), edited?, isAuthor?, badge?, reactions? (CommentReaction[]), replies? (Comment[]), pending?.
CommentView
Use CommentView to render a single comment outside the full thread context, for example in a one-off notification preview.
| Prop | Type | Default | Description |
|---|---|---|---|
comment | Comment | — | The comment to render. |
depth | number | 0 | Nesting depth for indentation. |
maxDepth | number | 3 | Maximum nesting for the Reply button. |
onReply | (parentId: string, body: string) => void | — | Reply handler. |
onReact | (commentId: string, emoji: string) => void | — | Reaction handler. |
renderActions | (comment: Comment) => ReactNode | — | Header action controls. |
CommentComposer
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Controlled textarea value. |
onChange | (value: string) => void | — | Change handler. |
onSubmit | () => void | — | Called on ⌘/Ctrl+Enter. |
onCancel | () => void | — | Called on Escape. Providing the handler also displays a Cancel button. |
placeholder | string | "Leave a comment…" | Textarea placeholder. |
initials | string | — | Initials for the leading avatar. Omit to drop. |
autoFocus | boolean | — | Auto-focus the textarea on mount. |
compact | boolean | — | Reduces padding and hides the avatar for inline replies. |
submitLabel | string | "Comment" | Submit button label. |
disabled | boolean | — | Disables the textarea and button. |
Examples
Be the first to comment.
import { CommentThread, CommentView, CommentComposer } from "@solarius/onset";
import type { Comment, CommentReaction } from "@solarius/onset";