> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Inline Comments Section Wireframe Variables

> Template variables exposed by the Inline Comments Section wireframe — read them with velt-data, velt-if, and velt-class to drive dynamic content, conditional rendering, and class toggling.

> [!NOTE]
>
> New to wireframes? Start with [UI Customization Concepts](https://velt.dev/docs/ui-customization/overview.md) and the [Template Variables](https://velt.dev/docs/ui-customization/template-variables.md) overview.

## Overview

The **Inline Comments Section** wireframe exposes the variables below. Use them inside any `<velt-inline-comments-section-...-wireframe>` tag via three forms:

| You want to… | Use | Example |
| - | - | - |
| Display a value as text | `<velt-data field="var" />` | `<velt-data field="annotations.length" />` |
| Hide / show conditionally | `velt-if="{var}"` | `velt-if="{skeletonLoading}"` |
| Toggle a CSS class | `velt-class="'cls': {var}"` | `velt-class="'sort-{sortState.sortOrder}': true"` |

All variables are mapped — reference them by their short name. You do not need the `componentConfig.` prefix.

> [!NOTE]
>
> **Naming conflicts — use full path.** A few names collide with mappings used elsewhere. Inside an Inline Comments Section wireframe, prefer the explicit path on the right when reading these values:
>
> | Conflicting name | Use this in Inline Comments Section |
> | - | - |
> | `readOnly` | `featureState.readOnly` |
> | `messageTruncation` | `featureState.messageTruncation` |
> | `messageTruncationLines` | `featureState.messageTruncationLines` |
> | `componentId` | `uiState.componentId` |

The list iterates through the standard Comment Dialog primitives — see [Comment Dialog Wireframe Variables](https://velt.dev/docs/ui-customization/features/async/comments/comment-dialog/wireframe-variables.md) for variables that resolve inside nested dialog tags.

## App State

App-wide values resolved from the shared signal.

| Variable | Type | Description | Example |
| - | - | - | - |
| `user` | [`User`](https://velt.dev/docs/api-reference/sdk/models/data-models#user) | Currently identified end-user. | `<velt-data field="user.name" />` |

## Data State

Per-section data: the live annotation list, the in-flight composer annotation, and available statuses.

| Variable | Type | Description | Example |
| - | - | - | - |
| `annotations` | [`CommentAnnotation`](https://velt.dev/docs/api-reference/sdk/models/data-models#commentannotation)`[]` | Annotations rendered in this section after filter / sort. | `<velt-data field="annotations.length" />` |
| `filteredComments` | [`CommentAnnotation`](https://velt.dev/docs/api-reference/sdk/models/data-models#commentannotation)`[]` | V2 alias for `annotations` — filtered list for the section. | `<velt-data field="filteredComments.length" />` |
| `sortedComments` | [`CommentAnnotation`](https://velt.dev/docs/api-reference/sdk/models/data-models#commentannotation)`[]` | V2 alias — filtered and sorted list after sort order is applied. | `<velt-data field="sortedComments.length" />` |
| `allAnnotations` | [`CommentAnnotation`](https://velt.dev/docs/api-reference/sdk/models/data-models#commentannotation)`[]` | Unfiltered list scoped to the section's target element. | `<velt-data field="allAnnotations.length" />` |
| `composerCommentAnnotation` | [`CommentAnnotation`](https://velt.dev/docs/api-reference/sdk/models/data-models#commentannotation) \| `undefined` | Draft annotation being composed in this section. | `velt-if="{composerCommentAnnotation}"` |
| `statuses` | [`CustomStatus`](https://velt.dev/docs/api-reference/sdk/models/data-models#customstatus)`[]` | Available status options for the filter dropdown. | `<velt-data field="statuses.0.name" />` |

## UI State

Per-instance UI flags driven by the section itself.

| Variable | Type | Description | Example |
| - | - | - | - |
| `skeletonLoading` | `boolean` | Skeleton loader is active while annotations load. | `velt-if="{skeletonLoading}"` |
| `darkMode` | `boolean` | Dark mode is active. | `velt-class="'dark': {darkMode}"` |
| `variant` | `string` | Per-instance variant tag set on the host element. | `<velt-data field="variant" />` |
| `uiState.componentId` | `string` | Unique id of this section instance. | `<velt-data field="uiState.componentId" />` |
| `filterState` | `InlineSectionFilterState` | Combined filter state (filters + dropdown open). | `<velt-data field="filterState.filters.length" />` |
| `filterState.filters` | `InlineSectionFilterItem[]` | Per-status filter rows. | `<velt-data field="filterState.filters.length" />` |
| `filterState.filterDropdownOpen` | `boolean` | Filter dropdown menu is open. | `velt-class="'open': {filterState.filterDropdownOpen}"` |
| `sortState` | `InlineSectionSortState` | Combined sort state. | `<velt-data field="sortState.sortBy" />` |
| `sortState.sortBy` | `'createdAt'` \| `'lastUpdated'` | Current sort field. | `<velt-data field="sortState.sortBy" />` |
| `sortState.sortOrder` | `'asc'` \| `'desc'` | Current sort direction. | `velt-class="'sort-{sortState.sortOrder}': true"` |
| `sortState.activeSortOption` | `InlineSortingCriteria` | Currently selected sort option. | `<velt-data field="sortState.activeSortOption" />` |
| `sortState.sortingDropdownOpen` | `boolean` | Sort dropdown menu is open. | `velt-class="'open': {sortState.sortingDropdownOpen}"` |
| `isResolvedCommentsOnDomFilterSelected` | `boolean` | "Show resolved" filter is currently selected. | `velt-class="'show-resolved': {isResolvedCommentsOnDomFilterSelected}"` |
| `resolvedCommentsOnDom` | `boolean` | Resolved annotations are rendered. | `velt-if="{resolvedCommentsOnDom}"` |
| `selectedAnnotationsMap` | `SelectedAnnotationsMap` | Map keyed by `annotationId` → selected flag. | `velt-class="'selected': {selectedAnnotationsMap[annotation.annotationId]}"` |
| `selectedAnnotationsLocationMap` | `SelectedAnnotationsLocationMap` | Internal selection bookkeeping by location. | *Internal — read entries via bracket notation if needed.* |
| `parentLocalUIState.shadowDom` | `boolean` | Shadow-DOM rendering is enabled. | *Host config — set via element attribute.* |
| `dialogVariant` | `string` | Variant forwarded to nested comment-dialogs. | `<velt-data field="dialogVariant" />` |
| `composerVariant` | `string` | Variant forwarded to the composer. | `<velt-data field="composerVariant" />` |
| `composerPosition` | `ComposerPosition` | Composer placement (`'top'` or `'bottom'`). | `velt-class="'composer-{composerPosition}': true"` |
| `multiThread` | `boolean` | Multi-thread layout is active. | `velt-class="'multi-thread': {multiThread}"` |
| `fullExpanded` | `boolean` | Section is fully expanded. | `velt-class="'expanded': {fullExpanded}"` |
| `commentPlaceholder` | `string` | Placeholder for the new-comment composer. | `<velt-data field="commentPlaceholder" />` |
| `replyPlaceholder` | `string` | Placeholder for the reply composer. | `<velt-data field="replyPlaceholder" />` |
| `composerPlaceholder` | `string` | Generic composer placeholder. | `<velt-data field="composerPlaceholder" />` |
| `editPlaceholder` | `string` | Placeholder for the generic edit composer. | `<velt-data field="editPlaceholder" />` |
| `editCommentPlaceholder` | `string` | Placeholder for the edit-comment composer. | `<velt-data field="editCommentPlaceholder" />` |
| `editReplyPlaceholder` | `string` | Placeholder for the edit-reply composer. | `<velt-data field="editReplyPlaceholder" />` |
| `targetElementId` | `string` | DOM target the section is anchored to. | `<velt-data field="targetElementId" />` |
| `folderId` | `string` | Folder this section's annotations belong to. | `<velt-data field="folderId" />` |
| `veltFolderId` | `string` | Velt-managed folder id. | `<velt-data field="veltFolderId" />` |
| `clientDocumentId` | `string` | Client-supplied document id. | `<velt-data field="clientDocumentId" />` |
| `documentId` | `string` | Resolved document id for this section. | `<velt-data field="documentId" />` |
| `locationId` | `string` | Location id this section is scoped to. | `<velt-data field="locationId" />` |
| `context` | `Record<string, any>` | Free-form annotation context. | `<velt-data field="context.something" />` |
| `contextOptions` | [`ContextOptions`](https://velt.dev/docs/api-reference/sdk/models/data-models#contextoptions) | Context-options config for new annotations. | `<velt-data field="contextOptions.documentId" />` |
| `readOnly` | `boolean` | Per-instance read-only flag. Prefer `featureState.readOnly` (see naming conflicts above). | `velt-class="'readonly': {readOnly}"` |
| `messageTruncation` | `boolean` | Per-instance truncation flag. Prefer `featureState.messageTruncation` (see naming conflicts above). | `velt-class="'truncate': {messageTruncation}"` |
| `messageTruncationLines` | `number` | Per-instance truncation line count. Prefer `featureState.messageTruncationLines` (see naming conflicts above). | `<velt-data field="messageTruncationLines" />` |

## Feature State

Capability flags toggled via SDK config.

| Variable | Type | Description | Example |
| - | - | - | - |
| `featureState.readOnly` | `boolean` | Section is in read-only mode. | `velt-class="'readonly': {featureState.readOnly}"` |
| `featureState.anonymousEmail` | `boolean` | Anonymous-email capture is enabled. | `velt-if="{featureState.anonymousEmail}"` |
| `featureState.messageTruncation` | `boolean` | Long messages are truncated. | `velt-class="'truncate': {featureState.messageTruncation}"` |
| `featureState.messageTruncationLines` | `number` | Line count for truncation. | `<velt-data field="featureState.messageTruncationLines" />` |

## Common Props

Every Inline Comments Section primitive accepts:

| React Prop | HTML Attribute | Type | Default | Description |
| - | - | - | - | - |
| `defaultCondition` | `default-condition` | `boolean \| "true" \| "false"` | `true` | When `false`, the component always renders regardless of internal state. |

Signal inputs (for parent-child component composition):

* `[componentConfigSignal]` — shared per-section config signal (annotations, statuses, filter / sort state).
* `[parentLocalUIState]` — per-instance UI state signal.

The root `<velt-inline-comments-section>` element additionally accepts attributes that map onto config and local UI state values: `target-element-id`, `folder-id`, `document-id`, `location-id`, `context`, `dialog-variant`, `composer-variant`, `composer-position`, `comment-placeholder` / `reply-placeholder` / `composer-placeholder` / `edit-placeholder`, `multi-thread`, `full-expanded`, `read-only`, `message-truncation`, `message-truncation-lines`, `dark-mode`, `variant`, `shadow-dom`.

## Context-Specific Variables

These are only resolvable inside the nested wireframe tags noted in the **Available in** column. Each is injected by the iteration primitive that owns the tag.

| Variable | Type | Available in | Example |
| - | - | - | - |
| `filter` | `InlineSectionFilterItem<`[`CustomStatus`](https://velt.dev/docs/api-reference/sdk/models/data-models#customstatus)`>` | filter-dropdown list-item / checkbox / label tags | `<velt-data field="filter.metadata.name" />` |
| `filter.id` | `string` | Same as above. | `<velt-data field="filter.id" />` |
| `filter.isSelected` | `boolean` | Same as above. | `velt-class="'selected': {filter.isSelected}"` |
| `filter.metadata` | [`CustomStatus`](https://velt.dev/docs/api-reference/sdk/models/data-models#customstatus) | Same as above. | `<velt-data field="filter.metadata.color" />` |
| `sortOption` | `InlineSortingCriteria` | sorting-dropdown content-item / -icon / -tick tags | `<velt-data field="sortOption" />` |
| `sortOptionText` | `string` | sorting-dropdown content-item / -name tags | `<velt-data field="sortOptionText" />` |
| `isActive` | `boolean` | sorting-dropdown content-item | `velt-class="'active': {isActive}"` |
| `isAscending` | `boolean` | sorting-dropdown content-item-icon | `velt-if="{isAscending}"` |

## Type Reference

Types referenced by the variables above are documented in [Data Models](https://velt.dev/docs/api-reference/sdk/models/data-models.md):

| Type | Description |
| - | - |
| [`CommentAnnotation`](https://velt.dev/docs/api-reference/sdk/models/data-models#commentannotation) | The annotation thread (id, status, comments, etc.). |
| [`CustomStatus`](https://velt.dev/docs/api-reference/sdk/models/data-models#customstatus) | Status definition (id, name, color, icon). |
| [`User`](https://velt.dev/docs/api-reference/sdk/models/data-models#user) | Identified end-user object. |
| [`ContextOptions`](https://velt.dev/docs/api-reference/sdk/models/data-models#contextoptions) | Context-options config for new annotations. |
| `InlineSectionFilterState` | Combined filter-state shape (`filters`, `filterDropdownOpen`). |
| `InlineSectionFilterItem` | One filter row (`id`, `isSelected`, `metadata`). |
| `InlineSortingCriteria` | Sort-option discriminator (`'createdAt'`, `'lastUpdated'`, `'mostReplies'`, etc.). |
| `ComposerPosition` | Composer placement (`'top'` \| `'bottom'`). |

## Subcomponents

Each subcomponent below has its own wireframe tag.

### `inline-comments-section` (root)

The customer-facing root primitive customers place in their app.

* **Public element:** `<velt-inline-comments-section>`
* **Wireframe tag:** `<velt-inline-comments-section-wireframe>`

| Property | Value |
| - | - |
| Extra variables | None — root only sees common variables. |
| `shouldShow` | Always renders when present. |

***

### `inline-comments-section-panel`

The wrapper container for the section. Composes header (count + filter + sort) + list + composer.

* **Public element:** `<velt-inline-comments-section-panel>`
* **Wireframe tag:** `<velt-inline-comments-section-panel-wireframe>`

| Property | Value |
| - | - |
| Extra variables | None beyond common variables. |

***

### `inline-comments-section-skeleton`

Skeleton loader.

* **Public element:** `<velt-inline-comments-section-skeleton>`
* **Wireframe tag:** `<velt-inline-comments-section-skeleton-wireframe>`

| Property | Value |
| - | - |
| Extra variables | None. |
| `shouldShow` | `skeletonLoading === true` |

***

### `inline-comments-section-comment-count`

The "N comments" label at the top of the section.

* **Public element:** `<velt-inline-comments-section-comment-count>`
* **Wireframe tag:** `<velt-inline-comments-section-comment-count-wireframe>`

| Property | Value |
| - | - |
| Extra variables | None beyond common variables. |

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltInlineCommentsSectionWireframe.CommentCount>
>   <VeltData field="annotations.length" /> comments
> </VeltInlineCommentsSectionWireframe.CommentCount>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-inline-comments-section-comment-count-wireframe>
>   <velt-data field="annotations.length"></velt-data> comments
> </velt-inline-comments-section-comment-count-wireframe>
> ```

***

### `inline-comments-section-list`

Iterates `annotations` and renders a comment-dialog primitive per entry. Inside, the standard [Comment Dialog Wireframe Variables](https://velt.dev/docs/ui-customization/features/async/comments/comment-dialog/wireframe-variables.md) resolve.

* **Public element:** `<velt-inline-comments-section-list>`
* **Wireframe tag:** `<velt-inline-comments-section-list-wireframe>`

| Property | Value |
| - | - |
| Extra variables | None at the list level. The nested comment-dialog tags receive `commentObj` / `commentIndex` from each iteration — see Comment Dialog. |

***

### `inline-comments-section-composer-container`

The per-section composer (renders the standard comment-dialog composer). Inside this wireframe the standard Comment Dialog Composer variables are available.

* **Public element:** `<velt-inline-comments-section-composer-container>`
* **Wireframe tag:** `<velt-inline-comments-section-composer-container-wireframe>`

| Property | Value |
| - | - |
| Extra variables | None at the container level. The nested composer injects `editMode` / `commentObj` / `commentIndex` — see [Comment Dialog Wireframe Variables](https://velt.dev/docs/ui-customization/features/async/comments/comment-dialog/wireframe-variables.md#comment-dialog-composer). |

## Deeply-Nested Wireframe Tags

The filter and sort dropdowns decompose further. Each tag below has its own `<velt-inline-comments-section-...-wireframe>` registration and inherits context variables from its parent dropdown.

### Filter dropdown tags

The filter dropdown lets the user filter the section by status. Composes trigger + content (with apply button) + per-status list-items.

| Tag | Notes | Example |
| - | - | - |
| `<velt-inline-comments-section-filter-dropdown-wireframe>` | Root. | `velt-class="'open': {filterState.filterDropdownOpen}"` |
| `<velt-inline-comments-section-filter-dropdown-trigger-wireframe>` | Trigger pill. | (click handler) |
| `<velt-inline-comments-section-filter-dropdown-trigger-name-wireframe>` | Trigger label. | `<velt-data field="filterState.filters.length" />` |
| `<velt-inline-comments-section-filter-dropdown-trigger-arrow-wireframe>` | Chevron. | *Visual only.* |
| `<velt-inline-comments-section-filter-dropdown-content-wireframe>` | Open menu. | `velt-class="'open': {filterState.filterDropdownOpen}"` |
| `<velt-inline-comments-section-filter-dropdown-content-list-wireframe>` | List wrapper. | (iterates over `filterState.filters`) |
| `<velt-inline-comments-section-filter-dropdown-content-list-item-wireframe>` | Per-status row. Exposes `filter`. | `<velt-data field="filter.metadata.name" />` |
| `<velt-inline-comments-section-filter-dropdown-content-list-item-checkbox-wireframe>` | Checkbox. Exposes `filter`. | `velt-class="'checked': {filter.isSelected}"` |
| `<velt-inline-comments-section-filter-dropdown-content-list-item-label-wireframe>` | Status name. Exposes `filter`. | `<velt-data field="filter.metadata.name" />` |
| `<velt-inline-comments-section-filter-dropdown-content-apply-button-wireframe>` | Apply button. | (click handler) |

### Sorting dropdown tags

The sort dropdown — pick between "Created first", "Last updated", "Most replies", etc. Composes trigger + content + per-option content-items with tick / icon / name.

| Tag | Notes | Example |
| - | - | - |
| `<velt-inline-comments-section-sorting-dropdown-wireframe>` | Root. | `velt-class="'open': {sortState.sortingDropdownOpen}"` |
| `<velt-inline-comments-section-sorting-dropdown-trigger-wireframe>` | Trigger pill. | (click handler) |
| `<velt-inline-comments-section-sorting-dropdown-trigger-icon-wireframe>` | Trigger icon. | `velt-class="'sort-{sortState.sortOrder}': true"` |
| `<velt-inline-comments-section-sorting-dropdown-trigger-name-wireframe>` | Trigger label. | `<velt-data field="sortState.activeSortOption" />` |
| `<velt-inline-comments-section-sorting-dropdown-content-wireframe>` | Open menu. | `velt-class="'open': {sortState.sortingDropdownOpen}"` |
| `<velt-inline-comments-section-sorting-dropdown-content-item-wireframe>` | Per-option row. Exposes `sortOption`, `sortOptionText`, `isActive`. | `velt-class="'active': {isActive}"` |
| `<velt-inline-comments-section-sorting-dropdown-content-item-icon-wireframe>` | Per-option icon. Exposes `sortOption`, `isAscending`. | `velt-if="{isAscending}"` |
| `<velt-inline-comments-section-sorting-dropdown-content-item-name-wireframe>` | Per-option label. Exposes `sortOptionText`. | `<velt-data field="sortOptionText" />` |
| `<velt-inline-comments-section-sorting-dropdown-content-item-tick-wireframe>` | Selected-indicator tick. Exposes `sortOption`. Visible only when this is the active sort option. | `<velt-data field="sortOption" />` |

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltInlineCommentsSectionWireframe.SortingDropdown.Content.Item
>   veltClass="'active': {isActive}">
>   <VeltData field="sortOptionText" />
> </VeltInlineCommentsSectionWireframe.SortingDropdown.Content.Item>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-inline-comments-section-sorting-dropdown-content-item-wireframe
>   velt-class="'active': {isActive}">
>   <velt-data field="sortOptionText"></velt-data>
> </velt-inline-comments-section-sorting-dropdown-content-item-wireframe>
> ```

## Related

* [Inline Comments Section Wireframes](https://velt.dev/docs/ui-customization/features/async/comments/inline-comments-section/wireframes.md) — composition reference for the wireframe tags themselves.
* [Inline Comments Section Primitives](https://velt.dev/docs/ui-customization/features/async/comments/inline-comments-section/primitives.md) — granular components if you don't need a full wireframe.
* [Comment Dialog Wireframe Variables](https://velt.dev/docs/ui-customization/features/async/comments/comment-dialog/wireframe-variables.md) — variables that resolve inside nested dialog tags rendered by the list.
* [Template Variables](https://velt.dev/docs/ui-customization/template-variables.md) — overview of the `velt-data` / `velt-if` / `velt-class` system.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.