Other comment surfaces (Text, Inline, Multi-thread)

Three comment variants beyond the standard dialog/sidebar. They reuse the comment data model and hooks (so the comment hooks in Hooks apply), and each is wireframed.

Looking for the standard comment surfaces? The dialog, sidebar (V1/V2), sidebar button, pin, bubble, and comment tool aren’t on this page: they’re the running examples throughout the approach guides (Wireframes, CSS, Primitives), and each has a one-stop entry (primitive · root wireframe · key props · flags · variables · refs) in the Surface lookup map in Component catalog. Start there for any standard comment surface; this page is only the three variants below.

Components

	What it is	Primitive	Wireframe
Text Comment (selection-anchored)	Toolbar on text selection to comment on / rewrite the selected text	`VeltTextComment`, `VeltTextCommentTool`, `VeltTextCommentToolbar` (sub-accessors `.CommentAnnotation` / `.Copywriter` / `.Generic` / `.Divider`)	`VeltTextCommentToolWireframe`; toolbar wireframe → `.CommentAnnotation`, `.Copywriter` (AI rewriter), `.Generic`, `.Divider`
Inline Comments Section (Substack-style)	Thread anchored to a target element with composer, list, filter, and sort. Very rich: renders comment-dialog primitives internally, so nested comment-dialog wireframes/variables resolve here too	`VeltInlineCommentsSection`	`VeltInlineCommentsSectionWireframe`
Multi-Thread Comment Dialog	Multiple threads in one dialog/panel with a minimal filter + bulk actions. Also renders comment-dialog primitives internally	`VeltMultiThreadCommentDialog`	`VeltMultiThreadCommentDialogWireframe`

Config props

Surface	Props
Text Comment	None dedicated beyond enabling text comments: drive behaviour via the comment config and the tokens below (`enableTextComments`, `rewriterEnabled`, …)
Inline Comments Section	`targetElementId`, `composerPosition` (`'top'\|'bottom'`), `sortBy` (`'createdAt'\|'lastUpdated'`), `sortOrder` (`'asc'\|'desc'`), `multiThread`, `dialogVariant`/`composerVariant`, `fullExpanded`, `readOnly`, all the `*Placeholder` props, `context`/`contextOptions`, `messageTruncation(Lines)`, `darkMode`/`shadowDom`/`variant`
Multi-Thread Comment Dialog	`annotationId`, `multiThreadAnnotationId`, `commentPinSelected`, `commentPinType`, `dialogVariant`, `inboxMode`, `readOnly`, `context`

CSS: stateful classes

None dedicated to these variants: they reuse the comment-dialog classes. Theme via --velt-* and override structural classes with !important (R9b). See CSS classes.

Wireframes: slot trees + tokens

Text Comment

VeltTextCommentToolbar wireframe → .CommentAnnotation, .Copywriter (AI rewriter), .Generic, .Divider. Key tokens (use full paths where they collide): {showAdder}, {commentToolEnabled}, {isUserAllowed}, {enableTextComments}, {rewriterEnabled}, {selectedWordsCount}, {selectedCharactersCount}, {position.top}/{position.left}, {uiState.disabled}.

Inline Comments Section

VeltInlineCommentsSectionWireframe:

.Skeleton · .Panel · .List · .ComposerContainer · .CommentCount
.FilterDropdown → .Trigger(.Name/.Arrow) / .Content(.ApplyButton, .List→.Item→.Label/.Checkbox)
.SortingDropdown → .Trigger(.Icon/.Name) / .Content→.Item(.Icon/.Name/.Tick)

Key tokens: {skeletonLoading}, {annotations}, {filterState.filterDropdownOpen}, {sortState.sortingDropdownOpen}, {isResolvedCommentsOnDomFilterSelected}; per-item {filter.isSelected}, {sortOption}, {isActive}, {isAscending}.

Multi-Thread Comment Dialog

VeltMultiThreadCommentDialogWireframe:

.CommentCount · .ComposerContainer · .List · .CloseButton · .NewThreadButton
.ResetFilterButton · .EmptyPlaceholder
.MinimalFilterDropdown → .Trigger / .Content(.FilterAll/.FilterUnread/.FilterRead/.FilterResolved/.SelectedIcon/.SortDate/.SortUnread)
.MinimalActionsDropdown → .Trigger / .Content(.MarkAllRead/.MarkAllResolved)

Key tokens: {filteredAnnotations}, {nonDraftCommentsCount}, {minimalFilter} ('all'|'read'|'unread'|'resolved'), {noCommentsFound}, {noCommentsFoundForAppliedFilters}, {hideMultiThreadAnnotationComposer}; per minimal-filter item {isSelected}.

Headless hooks

None section-specific: all three reuse the shared comment hooks (see Hooks). Text Comment additionally drives via the comment element (useCommentUtils) and the AI rewriter (useAIRewriterUtils).

Limitations

Text Comment has a thinner slot set (the four toolbar buttons) and no dedicated hooks. Otherwise all three follow the same rules as the comment dialog: the interactivity rule (R4), scoping (nest vs root), and shadowDom/CSS guidance all apply. The visible “panel” is the container; fill the slots inside it.

Concepts

AI Agent Workflow

Approaches

Feature Guides

Components: Async Collaboration

Components: Realtime Collaboration

Guidance

Reference

Other comment surfaces (Text, Inline, Multi-thread)

Components

Config props

CSS: stateful classes

Wireframes: slot trees + tokens

Text Comment

Inline Comments Section

Multi-Thread Comment Dialog

Headless hooks

Limitations

​Components

​Config props

​CSS: stateful classes

​Wireframes: slot trees + tokens

​Text Comment

​Inline Comments Section

​Multi-Thread Comment Dialog

​Headless hooks

​Limitations

Components

Config props

CSS: stateful classes

Wireframes: slot trees + tokens

Text Comment

Inline Comments Section

Multi-Thread Comment Dialog

Headless hooks

Limitations