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>
  <VeltData 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
  veltIf="{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}"`

Selected-row check example

React / Next.js
Other Frameworks

<VeltMultiThreadCommentDialogWireframe.MinimalFilterDropdown.Content.FilterUnread
  veltClass="'is-selected': {isSelected}">
  <div>Unread <VeltIf condition="{isSelected}"><span>✓</span></VeltIf></div>
</VeltMultiThreadCommentDialogWireframe.MinimalFilterDropdown.Content.FilterUnread>

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

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)

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.

​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

​Selected-row check example

​Minimal actions dropdown tags

​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

Selected-row check example

Minimal actions dropdown tags

Related