CommentCard

A single comment, collapsible between a compact one-line preview and a full card. Offers a Maximise action when onMaximize is supplied — the owner enlarges the whole thread. Fully controlled — all mutations are delegated to the supplied callbacks.

Source

Import

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

Demos

Collapsed · Open in Storybook

Expanded · Open in Storybook

Resolved By Agent · 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
comment*	Comment	—	—
compact	boolean	—	Tighter padding for dense rails.
config*	CommentConfig	—	—
defaultExpanded	boolean	—	Render expanded on first mount.
extraAssignItems	(…) => DropdownMenuItem[]	—	Caller-owned entries appended to the "Assign…" submenu, such as a run-agent action. Computed per comment so they can reflect its state.
fullBody	boolean	—	Keep maximized bodies independent of persisted sidebar expansion.
onAcknowledge	(…) => void | Promise<void>	—	Claim an unassigned active root for the current user or agent.
onAssign	(…) => void | Promise<void>	—	Hand an active root to an assignee, or clear it with `null`.
onChecklistToggle	(…) => void	—	Advance the checklist item at `index` to its next status.
onClose	(…) => void | Promise<void>	—	Close an active or resolved root comment.
onCopy	(…) => void | Promise<void>	—	Copy this comment's whole thread in the caller's canonical format.
onDelete	(…) => void	—	Delete this comment.
onMaximize	(…) => void	—	Open this card's thread in a larger view. Owned by the caller because a card knows only itself, while maximizing shows the root and its replies. Omit to drop the action (e.g. inside an already-maximized thread).
onReply	(…) => void	—	Begin a reply to this comment.
onUpdateStatus	(…) => void | Promise<void>	—	Change this comment's status (roots only).
previewLines	number	—	—
renderBody	(…) => ReactNode	—	Custom body renderer; defaults to the lightweight CommentMarkdown.