CommentThread

One comment thread on its own: its first comment, one level of replies, reactions, edit history, and a reply composer. Use it for a margin comment beside a document, a popover under a highlight, or any surface that shows a single thread.

This is the Vue port of the lab CommentThread in Meta Astryx, aligned to v0.7.13. It reuses CommentComposerBase for replies and edits, and the standalone EmojiPicker in those composers. Comments and CommentPin are not in this slice.

This component ships in @astryx-vue/lab and is published only under the canary tag.

Import

import { CommentThread, DEFAULT_COMMENT_REACTIONS } from '@astryx-vue/lab'

Props

Name	Type	Default	Description
comment	CommentThreadData	—	The thread: its first comment, carrying replies, an optional quoted passage, and typingUsers.
isSelected	boolean	—	Controlled open state. Omit it to let the thread own selection. Host selection reveals the body and replies without moving focus or opening the composer.
currentUser	CommentUser	—	The viewer, for own-comment actions and the reply avatar.
mode	'interactive' | 'non-editable' | 'read-only'	'interactive'	Which actions show.
container	'section' | 'card'	'section'	An outlined Card on a page, or a Section without outer rules inside a card or popover.
onSubmit	(content: string, parentCommentId?: string) => void | Promise<void>	—	Posts a reply. The parent is always the first comment. A rejected Promise restores the draft with Retry.
onSaveEdit / onDelete / onReact	function	—	Edit, delete (after a confirm dialog), and toggle a reaction.
onResolveThread / onReopenThread	function	—	Mark as resolved, or Reopen.
onRetryComment	(commentId: string) => void | Promise<void>	—	Retry a comment whose status is error.
loadVersions	(commentId: string) => Promise<readonly CommentVersion[]>	—	Loads edit history, newest first.
onUploadImages	CommentImageUploader	—	Uploads images in the reply or edit composer.
onComposerDraftChange	(value: string, context: CommentComposerContext) => void	—	Reports internally owned reply and edit drafts.
isSubmitting	boolean	false	Host-controlled pending state for the reply composer.
composerPlaceholder	string	localized "Reply to <name>…"	Placeholder of the reply composer.
highlightColor	CommentHighlightColor	'yellow'	Palette color of the quoted passage's rule.
reactionOptions	readonly CommentReactionOption[]	DEFAULT_COMMENT_REACTIONS	Reactions Add reaction offers.
agentCommands / composerTriggers	arrays	—	Slash commands and typeahead triggers for composers.
hasEmojiPicker	boolean	true	Whether composers offer the emoji picker.
onDismiss	() => void	—	The thread owns light dismissal for an anchored host. Prefer @dismiss. Pair with hasLightDismiss={false} and hasEscapeDismiss={false} on the host Popover.

CommentThreadData extends CommentData with replies, anchor, isResolved, resolvedBy, typingUsers, isHighlighted, and canResolve.

Events

Name	Payload	Description
selected-change	isSelected: boolean	The viewer opened or closed the thread.
dismiss	—	An outside press or unclaimed Escape requested dismissal. The first request over an unsaved draft shakes the thread, refocuses the draft, and announces instead.

Slots

Name	Description
anchor / body / versionBody / additionalActions / composer	Same roles as the render* callbacks: replace the quote, body, history version, header actions, or composer input. The render* props remain available for hosts that already pass functions.

Keyboard and dismissal

A press on the surface opens the thread and, for a pointer, the reply composer. A keyboard activation keeps focus on the hidden thread toggle so the same key can close it. With onDismiss, Escape dismisses only when no layer inside the thread is open. An unsaved reply or edit turns the first dismissal into a shake, a focus move, and a polite announcement; the next consecutive request dismisses. Under prefers-reduced-motion: reduce the thread does not shake; focus and the announcement remain.