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.

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

<VeltMultiThreadCommentDialogWireframe.CommentCount>
  <VeltData field="nonDraftCommentsCount" /> threads
</VeltMultiThreadCommentDialogWireframe.CommentCount>

Other Frameworks

<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

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

Other Frameworks

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

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

React / Next.js

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

Other Frameworks

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

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