> ## Documentation Index
> Fetch the complete documentation index at: https://velt-codex-ui-customization-guide-refresh.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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`](/ui-customization/reference/hooks) apply), and each is **wireframed**.

<Note>
  **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`](/ui-customization/layout), [`CSS`](/ui-customization/styling), [`Primitives`](/ui-customization/primitives)), and each has a one-stop entry (primitive · root wireframe · key props · flags · variables · refs) in the **Surface lookup** map in [`Component catalog`](/ui-customization/reference/component-catalog). Start there for any standard comment surface; this page is only the three variants below.
</Note>

## 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`](/ui-customization/reference/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`](/ui-customization/reference/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.