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

Customize text comments, inline comments, and multi-thread comment surfaces beyond the standard dialog and sidebar.

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.

Have this design in Figma? The UI Customization Plugin for Cursor and Claude Code turns a Figma design into verified Velt UI customization (comments and notifications today): it picks the approach, builds a comment surface like these in your app, and verifies the result against the design in a real browser.

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

Full examples: each variant has per-component pages with complete tabbed code examples and screenshots: Inline comments section wireframes, Multi-thread comments wireframes, Text comment tool wireframes, and Text comment toolbar wireframes.

	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 because Velt’s own styles are high-specificity; see CSS. See also 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, scoping (nest vs root), and shadowDom/CSS guidance all apply. The visible “panel” is the container; fill the slots inside it.