> ## 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](/ui-customization/overview) and the [Template Variables](/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`](/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`](/api-reference/sdk/models/data-models#commentannotation)`[]`       | All annotations in scope.                         | `<velt-data field="annotations.length" />`                        |
| `filteredAnnotations`          | [`CommentAnnotation`](/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`](/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`](/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](/api-reference/sdk/models/data-models):

| Type                                                                                     | Description                                                                          |
| ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
| [`CommentAnnotation`](/api-reference/sdk/models/data-models#commentannotation)           | The annotation thread (id, status, comments, etc.).                                  |
| [`User`](/api-reference/sdk/models/data-models#user)                                     | Identified end-user object.                                                          |
| [`SidebarSortingCriteria`](/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](/ui-customization/template-variables) — overview of the `velt-data` / `velt-if` / `velt-class` system.