CommentThread

Top-level controlled comment thread: a threaded list plus a mention-aware composer. Owns no data — it renders comments and forwards every mutation to the supplied callbacks, translating list-level events (checklist index, reply target) into the callback contract.

Source

Import

import { CommentThread } from "@flanksource/clicky-ui/comments";

Demos

Default · Open in Storybook

With Mention Autocomplete · Open in Storybook

The props table documents the component-specific surface. Standard DOM attributes inherited from React, such as className, event handlers, and accessibility attributes, may also be accepted when the component’s prop type extends a native element.

Props

Prop	Type	Default	Description
anchor	string | null	—	Anchor stamped onto created comments.
autoFocusComposer	boolean	false	Auto-open and focus the composer on mount.
comments*	Comment[]	—	Comments for this thread (typically pre-filtered to one anchor).
compact	boolean	false	—
composerPlaceholder	string	—	Label for creating a separate root comment.
config*	CommentConfig	—	—
createActions	readonly CommentCreateAction[]	—	—
defaultExpanded	boolean	false	Expand each thread immediately (roots and their replies), exposing actions such as Reply.
detailTabs	readonly CommentDetailTab[]	—	—
extraAssignItems	(…) => DropdownMenuItem[]	—	Caller-owned entries appended to each root's "Assign…" submenu.
hideComposer	boolean	false	Hide the composer (read-only thread).
onAcknowledge	(…) => void | Promise<void>	—	Claim an unassigned active root for the current user or agent.
onAssign	(…) => void | Promise<void>	—	Hand an active root to `assignee`, or return it to unassigned with `null`.
onChecklistToggle	(…) => void | Promise<void>	—	—
onClose	(…) => void | Promise<void>	—	Human-only transition from active or resolved to closed.
onCreate	(…) => void | Promise<void>	—	—
onDelete	(…) => void | Promise<void>	—	—
onMaximizedChange	(…) => void	—	—
onMention	(…) => void	—	Fired when a posted comment references a mentionable.
onReply	(…) => void | Promise<void>	—	—
onUpdateRating	(…) => void | Promise<void>	—	—
onUpdateStatus	(…) => void | Promise<void>	—	—
previewLines	number	—	—
renderBody	(…) => ReactNode	—	—
renderRootDetails	(…) => ReactNode	—	—
renderRootMeta	(…) => ReactNode	—	—
threadToMarkdown	(…) => string	—	—