Multithread Comments Wireframe Variables

New to wireframes? Start with UI Customization Concepts and the Template Variables overview.

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.

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)

The list iterates through the standard Comment Dialog primitives — see 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` \| `null`	Currently focused annotation.	`velt-if="{annotation}"`
`annotation.annotationId`	`string`	Id of the focused annotation.	`<velt-data field="annotation.annotationId" />`
`annotations`	`CommentAnnotation[]`	All annotations in scope.	`<velt-data field="annotations.length" />`
`filteredAnnotations`	`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`	Anchor annotation object.	`<velt-data field="multiThreadCommentAnnotation.annotationId" />`
`nonDraftCommentsCount`	`number`	Count of non-draft threads.	`<velt-data field="nonDraftCommentsCount" />`
`data.user`	`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:

Type	Description
`CommentAnnotation`	The annotation thread (id, status, comments, etc.).
`User`	Identified end-user object.
`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 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.

React / Next.js
Other Frameworks

<VeltMultiThreadCommentDialogWireframe.CommentCount>
  <velt-data field="nonDraftCommentsCount" /> threads
</VeltMultiThreadCommentDialogWireframe.CommentCount>

<velt-multi-thread-comment-dialog-comment-count-wireframe>
  <velt-data field="nonDraftCommentsCount"></velt-data> threads
</velt-multi-thread-comment-dialog-comment-count-wireframe>

`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`

React / Next.js
Other Frameworks

<VeltMultiThreadCommentDialogWireframe.EmptyPlaceholder
  velt-if="{noCommentsFound} || {noCommentsFoundForAppliedFilters}">
  <p>No threads to show.</p>
</VeltMultiThreadCommentDialogWireframe.EmptyPlaceholder>

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

`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.
`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)

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}"`

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)

Putting it together

A typical Multithread Comments header that shows the thread count, swaps an empty placeholder when filters reduce the list to zero, and lights up the filter pill while the dropdown is open:

React / Next.js
Other Frameworks

<VeltMultiThreadCommentDialogPanelWireframe>
  <header className="my-mt__header">
    <VeltMultiThreadCommentDialogWireframe.CommentCount>
      <velt-data field="nonDraftCommentsCount" /> threads
    </VeltMultiThreadCommentDialogWireframe.CommentCount>
    <VeltMultiThreadCommentDialogWireframe.MinimalFilterDropdown.Trigger
      velt-class="'open': {minimalFilterDropdownOpen}">
      <span><velt-data field="minimalFilter" /></span>
    </VeltMultiThreadCommentDialogWireframe.MinimalFilterDropdown.Trigger>
  </header>

  <VeltMultiThreadCommentDialogWireframe.List />

  <VeltMultiThreadCommentDialogWireframe.EmptyPlaceholder
    velt-if="{noCommentsFound} || {noCommentsFoundForAppliedFilters}">
    <p>No threads to show.</p>
    <VeltMultiThreadCommentDialogWireframe.ResetFilterButton />
  </VeltMultiThreadCommentDialogWireframe.EmptyPlaceholder>

  <VeltMultiThreadCommentDialogWireframe.ComposerContainer
    velt-if="!{hideMultiThreadAnnotationComposer}" />
</VeltMultiThreadCommentDialogPanelWireframe>

<velt-multi-thread-comment-dialog-panel-wireframe>
  <header class="my-mt__header">
    <velt-multi-thread-comment-dialog-comment-count-wireframe>
      <velt-data field="nonDraftCommentsCount"></velt-data> threads
    </velt-multi-thread-comment-dialog-comment-count-wireframe>
    <velt-multi-thread-comment-dialog-minimal-filter-dropdown-trigger-wireframe
      velt-class="'open': {minimalFilterDropdownOpen}">
      <span><velt-data field="minimalFilter"></velt-data></span>
    </velt-multi-thread-comment-dialog-minimal-filter-dropdown-trigger-wireframe>
  </header>

  <velt-multi-thread-comment-dialog-list-wireframe></velt-multi-thread-comment-dialog-list-wireframe>

  <velt-multi-thread-comment-dialog-empty-placeholder-wireframe
    velt-if="{noCommentsFound} || {noCommentsFoundForAppliedFilters}">
    <p>No threads to show.</p>
    <velt-multi-thread-comment-dialog-reset-filter-button-wireframe></velt-multi-thread-comment-dialog-reset-filter-button-wireframe>
  </velt-multi-thread-comment-dialog-empty-placeholder-wireframe>

  <velt-multi-thread-comment-dialog-composer-container-wireframe
    velt-if="!{hideMultiThreadAnnotationComposer}"></velt-multi-thread-comment-dialog-composer-container-wireframe>
</velt-multi-thread-comment-dialog-panel-wireframe>

Multithread Comments Wireframes — composition reference for the wireframe tags themselves.
Multithread Comments Primitives — granular components if you don’t need a full wireframe.
Comment Dialog Wireframe Variables — variables that resolve inside nested dialog tags rendered by the list.
Template Variables — overview of the velt-data / velt-if / velt-class system.

Concepts

Async Collaboration

Realtime Collaboration

Multithread Comments Wireframe Variables

Overview

Data State

UI State

Common Props

Context-Specific Variables

Type Reference

Subcomponents

`multi-thread-comment-dialog-panel`

`multi-thread-comment-dialog-list`

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

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

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

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

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

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

Deeply-Nested Wireframe Tags

Multi-Thread root tag

Putting it together

Concepts

Async Collaboration

Realtime Collaboration

Documentation Index

​Overview

​Data State

​UI State

​Common Props

​Context-Specific Variables

​Type Reference

​Subcomponents

​multi-thread-comment-dialog-panel

​multi-thread-comment-dialog-list

​multi-thread-comment-dialog-comment-count

​multi-thread-comment-dialog-empty-placeholder

​multi-thread-comment-dialog-close-button

​multi-thread-comment-dialog-new-thread-button

​multi-thread-comment-dialog-reset-filter-button

​multi-thread-comment-dialog-composer-container

​Deeply-Nested Wireframe Tags

​Multi-Thread root tag

​Minimal filter dropdown tags

​Minimal actions dropdown tags

​Putting it together

​Related

Overview

Data State

UI State

Common Props

Context-Specific Variables

Type Reference

Subcomponents

`multi-thread-comment-dialog-panel`

`multi-thread-comment-dialog-list`

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

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

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

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

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

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

Deeply-Nested Wireframe Tags

Multi-Thread root tag

Minimal filter dropdown tags

Minimal actions dropdown tags

Putting it together

Related