> ## 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.

# Multithread Comments Wireframe Variables

> Template variables exposed by the Multithread Comments 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](/docs/ui-customization/overview) and the [Template Variables](/docs/ui-customization/template-variables) overview.
</Note>

## Overview

The **Multithread Comments** wireframe (a multi-thread comment dialog) hosts multiple comment threads in a single panel. Variables below are available inside any `<velt-multi-thread-comment-dialog-...-wireframe>` tag via three forms:

| You want to… | Use | Example |
| - | - | - |
| Display a value as text | `<velt-data field="var" />` | `<velt-data field="nonDraftCommentsCount" />` |
| Hide / show conditionally | `velt-if="{var}"` | `velt-if="{noCommentsFound}"` |
| Toggle a CSS class | `velt-class="'cls': {var}"` | `velt-class="'filter-{minimalFilter}': 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 by Comment Dialog. Inside a Multithread Comments wireframe, prefer the explicit path on the right when reading these values:

  | Conflicting name | Use this in Multithread Comments |
  | - | - |
  | `user` | `data.user` |
  | `shadowDom` | `parentLocalUIState.shadowDom` (per-render) or `uiState.shadowDom` (per-instance) |
</Note>

The list iterates through the standard Comment Dialog primitives — see [Comment Dialog Wireframe Variables](../comment-dialog/wireframe-variables) for variables that resolve inside nested dialog tags.

## Data State

Per-instance data: the live thread list, the focused / draft annotation, and host-application context.

| Variable | Type | Description | Example |
| - | - | - | - |
| `annotation` | [`CommentAnnotation`](/docs/api-reference/sdk/models/data-models#commentannotation) \| `null` | Currently focused annotation. | `velt-if="{annotation}"` |
| `annotation.annotationId` | `string` | Id of the focused annotation. | `<velt-data field="annotation.annotationId" />` |
| `annotations` | [`CommentAnnotation`](/docs/api-reference/sdk/models/data-models#commentannotation)`[]` | All annotations in scope. | `<velt-data field="annotations.length" />` |
| `filteredAnnotations` | [`CommentAnnotation`](/docs/api-reference/sdk/models/data-models#commentannotation)`[]` | Annotations after filter / sort is applied. | `<velt-data field="filteredAnnotations.length" />` |
| `multiThreadAnnotationId` | `string` \| `null` | Id of the multi-thread anchor annotation. | `<velt-data field="multiThreadAnnotationId" />` |
| `multiThreadCommentAnnotation` | [`CommentAnnotation`](/docs/api-reference/sdk/models/data-models#commentannotation) | Anchor annotation object. | `<velt-data field="multiThreadCommentAnnotation.annotationId" />` |
| `nonDraftCommentsCount` | `number` | Count of non-draft threads. | `<velt-data field="nonDraftCommentsCount" />` |
| `data.user` | [`User`](/docs/api-reference/sdk/models/data-models#user) \| `null` | Currently identified end-user. | `<velt-data field="data.user.name" />` |
| `containerComponentId` | `string` \| `null` | Owning container id (host wiring). | `<velt-data field="containerComponentId" />` |
| `context` | `any` | Free-form annotation context. | `<velt-data field="context.foo" />` |
| `data.contextId` | `string` \| `null` | Context id linking this dialog to a host context. | `<velt-data field="data.contextId" />` |

## UI State

Per-instance UI flags driven by the dialog itself.

| Variable | Type | Description | Example |
| - | - | - | - |
| `commentPinSelected` | `boolean` | Pin associated with the focused annotation is selected. | `velt-class="'pin-selected': {commentPinSelected}"` |
| `commentPinType` | `string` \| `null` | Pin shape (`'pin'`, `'bubble'`, etc.). | `<velt-data field="commentPinType" />` |
| `inboxMode` | `boolean` | Inbox-style layout is active. | `velt-class="'inbox': {inboxMode}"` |
| `readOnly` | `boolean` | Dialog is in read-only mode. | `velt-class="'readonly': {readOnly}"` |
| `hideMultiThreadAnnotationComposer` | `boolean` | Anchor-annotation composer should be hidden. | `velt-if="!{hideMultiThreadAnnotationComposer}"` |
| `dialogVariant` | `string` | Variant forwarded to nested comment-dialogs. | `<velt-data field="dialogVariant" />` |
| `minimalFilter` | `'all'` \| `'read'` \| `'unread'` \| `'resolved'` | Currently selected filter row. | `velt-class="'filter-{minimalFilter}': true"` |
| `selectedMinimalFilterDropdownOption.sorting` | `SidebarSortingCriteria` | Currently selected sort row. | `<velt-data field="selectedMinimalFilterDropdownOption.sorting" />` |
| `selectedMinimalFilterDropdownOption.filter` | `'all'` \| `'read'` \| `'unread'` \| `'resolved'` | Selected filter (mirrors `minimalFilter`). | `velt-class="'selected-{selectedMinimalFilterDropdownOption.filter}': true"` |
| `minimalFilterDropdownOpen` | `boolean` | Filter+sort dropdown menu is open. | `velt-class="'open': {minimalFilterDropdownOpen}"` |
| `minimalActionsDropdownOpen` | `boolean` | Bulk-actions dropdown menu is open. | `velt-class="'open': {minimalActionsDropdownOpen}"` |
| `noCommentsFoundForAppliedFilters` | `boolean` | Filters reduced the list to zero. | `velt-if="{noCommentsFoundForAppliedFilters}"` |
| `noCommentsFound` | `boolean` | No annotations exist in scope. | `velt-if="{noCommentsFound}"` |
| `darkMode` | `boolean` | Dark mode is active. | `velt-class="'dark': {darkMode}"` |
| `variant` | `string` \| `null` | Per-instance variant tag set on the host element. | `<velt-data field="variant" />` |
| `uiState.shadowDom` | `boolean` | Shadow-DOM rendering is enabled (per-instance). | *Host config — set via element attribute.* |
| `parentLocalUIState.darkMode` | `boolean` | Dark-mode flag (per-render). Alias for `darkMode`. | *Host config — set via element attribute.* |
| `parentLocalUIState.variant` | `string` | Variant tag (per-render). Alias for `variant`. | *Host config — set via element attribute.* |
| `parentLocalUIState.shadowDom` | `boolean` | Shadow-DOM flag (per-render). | *Host config — set via element attribute.* |

## Common Props

Every Multithread Comments 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-instance config signal (annotation list, filter / sort state).
* `[parentLocalUIState]` — per-instance UI state signal.

## Context-Specific Variables

Only resolvable inside the nested wireframe tags noted in the **Available in** column.

| Variable | Type | Available in | Example |
| - | - | - | - |
| `isSelected` | `boolean` | All six `*-minimal-filter-dropdown-content-{filter,sort}-*` tags | `velt-class="'is-selected': {isSelected}"` |

## Type Reference

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

| Type | Description |
| - | - |
| [`CommentAnnotation`](/docs/api-reference/sdk/models/data-models#commentannotation) | The annotation thread (id, status, comments, etc.). |
| [`User`](/docs/api-reference/sdk/models/data-models#user) | Identified end-user object. |
| [`SidebarSortingCriteria`](/docs/api-reference/sdk/models/data-models#sidebarsortingcriteria) | Sort-option discriminator shared with the sidebar (`'date'`, `'unread'`, or `null`). |

## Subcomponents

Each subcomponent below has its own wireframe tag.

### `multi-thread-comment-dialog-panel`

The customer-facing root panel container.

* **Public element:** `<velt-multi-thread-comment-dialog-panel>`
* **Wireframe tag:** `<velt-multi-thread-comment-dialog-panel-wireframe>`

| Property | Value |
| - | - |
| Extra variables | None — root only sees common variables. |

***

### `multi-thread-comment-dialog-list`

Iterates `filteredAnnotations` and renders a comment-dialog primitive per annotation. Inside, the standard [Comment Dialog Wireframe Variables](../comment-dialog/wireframe-variables) apply.

* **Public element:** `<velt-multi-thread-comment-dialog-list>`
* **Wireframe tag:** `<velt-multi-thread-comment-dialog-list-wireframe>`

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

***

### `multi-thread-comment-dialog-comment-count`

The count label at the top.

* **Public element:** `<velt-multi-thread-comment-dialog-comment-count>`
* **Wireframe tag:** `<velt-multi-thread-comment-dialog-comment-count-wireframe>`

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

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltMultiThreadCommentDialogWireframe.CommentCount>
      <VeltData field="nonDraftCommentsCount" /> threads
    </VeltMultiThreadCommentDialogWireframe.CommentCount>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-multi-thread-comment-dialog-comment-count-wireframe>
      <velt-data field="nonDraftCommentsCount"></velt-data> threads
    </velt-multi-thread-comment-dialog-comment-count-wireframe>
    ```
  </Tab>
</Tabs>

***

### `multi-thread-comment-dialog-empty-placeholder`

Empty-state shown when filters reduce the list to zero or no annotations exist.

* **Public element:** `<velt-multi-thread-comment-dialog-empty-placeholder>`
* **Wireframe tag:** `<velt-multi-thread-comment-dialog-empty-placeholder-wireframe>`

| Property | Value | | |
| - | - | - | - |
| Extra variables | None beyond common variables. | | |
| `shouldShow` | \`noCommentsFound | | noCommentsFoundForAppliedFilters\` |

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltMultiThreadCommentDialogWireframe.EmptyPlaceholder
      veltIf="{noCommentsFound} || {noCommentsFoundForAppliedFilters}">
      <p>No threads to show.</p>
    </VeltMultiThreadCommentDialogWireframe.EmptyPlaceholder>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-multi-thread-comment-dialog-empty-placeholder-wireframe
      velt-if="{noCommentsFound} || {noCommentsFoundForAppliedFilters}">
      <p>No threads to show.</p>
    </velt-multi-thread-comment-dialog-empty-placeholder-wireframe>
    ```
  </Tab>
</Tabs>

***

### `multi-thread-comment-dialog-close-button`

The close button.

* **Public element:** `<velt-multi-thread-comment-dialog-close-button>`
* **Wireframe tag:** `<velt-multi-thread-comment-dialog-close-button-wireframe>`

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

***

### `multi-thread-comment-dialog-new-thread-button`

The add-thread button.

* **Public element:** `<velt-multi-thread-comment-dialog-new-thread-button>`
* **Wireframe tag:** `<velt-multi-thread-comment-dialog-new-thread-button-wireframe>`

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

***

### `multi-thread-comment-dialog-reset-filter-button`

Shown inside the empty placeholder when filters are active.

* **Public element:** `<velt-multi-thread-comment-dialog-reset-filter-button>`
* **Wireframe tag:** `<velt-multi-thread-comment-dialog-reset-filter-button-wireframe>`

| Property | Value |
| - | - |
| Extra variables | None. |
| `shouldShow` | `noCommentsFoundForAppliedFilters` |

***

### `multi-thread-comment-dialog-composer-container`

The new-thread composer container.

* **Public element:** `<velt-multi-thread-comment-dialog-composer-container>`
* **Wireframe tag:** `<velt-multi-thread-comment-dialog-composer-container-wireframe>`

| Property | Value |
| - | - |
| Extra variables | None at the container level. The nested composer injects `editMode` / `commentObj` / `commentIndex` — see [Comment Dialog Wireframe Variables](../comment-dialog/wireframe-variables#comment-dialog-composer). |
| `shouldShow` | `!hideMultiThreadAnnotationComposer` |

## Deeply-Nested Wireframe Tags

The filter+sort dropdown and bulk-actions dropdown decompose further. Each tag below has its own `<velt-multi-thread-comment-dialog-...-wireframe>` registration.

### Multi-Thread root tag

| Tag | Notes | Example |
| - | - | - |
| `<velt-multi-thread-comment-dialog-wireframe>` | Outer wireframe — wraps the entire panel. The `panel` child is the visible container. | (composes the panel) |

### Minimal filter dropdown tags

The filter+sort dropdown (similar to the sidebar's minimal-filter-dropdown). Each row exposes `isSelected`.

| Tag | Notes | Example |
| - | - | - |
| `<velt-multi-thread-comment-dialog-minimal-filter-dropdown-wireframe>` | Root. | `velt-class="'open': {minimalFilterDropdownOpen}"` |
| `<velt-multi-thread-comment-dialog-minimal-filter-dropdown-trigger-wireframe>` | Trigger pill. | (click handler) |
| `<velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-wireframe>` | Open menu. | `velt-class="'open': {minimalFilterDropdownOpen}"` |
| `<velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-filter-all-wireframe>` | "All" filter row. Exposes `isSelected`. | `velt-class="'is-selected': {isSelected}"` |
| `<velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-filter-read-wireframe>` | "Read" filter row. Exposes `isSelected`. | `velt-class="'is-selected': {isSelected}"` |
| `<velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-filter-unread-wireframe>` | "Unread" filter row. Exposes `isSelected`. | `velt-class="'is-selected': {isSelected}"` |
| `<velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-filter-resolved-wireframe>` | "Resolved" filter row. Exposes `isSelected`. | `velt-class="'is-selected': {isSelected}"` |
| `<velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-selected-icon-wireframe>` | Per-row selected tick. | `velt-if="{isSelected}"` |
| `<velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-sort-date-wireframe>` | "Sort by date" row. Exposes `isSelected`. | `velt-class="'is-selected': {isSelected}"` |
| `<velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-sort-unread-wireframe>` | "Sort by unread" row. Exposes `isSelected`. | `velt-class="'is-selected': {isSelected}"` |

#### Selected-row check example

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltMultiThreadCommentDialogWireframe.MinimalFilterDropdown.Content.FilterUnread
      veltClass="'is-selected': {isSelected}">
      <div>Unread <VeltIf condition="{isSelected}"><span>✓</span></VeltIf></div>
    </VeltMultiThreadCommentDialogWireframe.MinimalFilterDropdown.Content.FilterUnread>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-filter-unread-wireframe
      velt-class="'is-selected': {isSelected}">
      <div>Unread <span velt-if="{isSelected}">✓</span></div>
    </velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-filter-unread-wireframe>
    ```
  </Tab>
</Tabs>

### Minimal actions dropdown tags

The bulk-actions dropdown ("Mark all as read", "Mark all as resolved").

| Tag | Notes | Example |
| - | - | - |
| `<velt-multi-thread-comment-dialog-minimal-actions-dropdown-wireframe>` | Root. | `velt-class="'open': {minimalActionsDropdownOpen}"` |
| `<velt-multi-thread-comment-dialog-minimal-actions-dropdown-trigger-wireframe>` | Trigger ("⋯"). | (click handler) |
| `<velt-multi-thread-comment-dialog-minimal-actions-dropdown-content-wireframe>` | Open menu. | `velt-class="'open': {minimalActionsDropdownOpen}"` |
| `<velt-multi-thread-comment-dialog-minimal-actions-dropdown-content-mark-all-read-wireframe>` | "Mark all as read" action row. | (click handler) |
| `<velt-multi-thread-comment-dialog-minimal-actions-dropdown-content-mark-all-resolved-wireframe>` | "Mark all as resolved" action row. | (click handler) |

## Related

* [Multithread Comments Wireframes](./wireframes) — composition reference for the wireframe tags themselves.
* [Multithread Comments Primitives](./primitives) — granular components if you don't need a full wireframe.
* [Comment Dialog Wireframe Variables](../comment-dialog/wireframe-variables) — variables that resolve inside nested dialog tags rendered by the list.
* [Template Variables](/docs/ui-customization/template-variables) — 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.