Skip to main content
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…UseExample
Display a value as text<velt-data field="var" /><velt-data field="nonDraftCommentsCount" />
Hide / show conditionallyvelt-if="{var}"velt-if="{noCommentsFound}"
Toggle a CSS classvelt-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 nameUse this in Multithread Comments
userdata.user
shadowDomparentLocalUIState.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.
VariableTypeDescriptionExample
annotationCommentAnnotation | nullCurrently focused annotation.velt-if="{annotation}"
annotation.annotationIdstringId of the focused annotation.<velt-data field="annotation.annotationId" />
annotationsCommentAnnotation[]All annotations in scope.<velt-data field="annotations.length" />
filteredAnnotationsCommentAnnotation[]Annotations after filter / sort is applied.<velt-data field="filteredAnnotations.length" />
multiThreadAnnotationIdstring | nullId of the multi-thread anchor annotation.<velt-data field="multiThreadAnnotationId" />
multiThreadCommentAnnotationCommentAnnotationAnchor annotation object.<velt-data field="multiThreadCommentAnnotation.annotationId" />
nonDraftCommentsCountnumberCount of non-draft threads.<velt-data field="nonDraftCommentsCount" />
data.userUser | nullCurrently identified end-user.<velt-data field="data.user.name" />
containerComponentIdstring | nullOwning container id (host wiring).<velt-data field="containerComponentId" />
contextanyFree-form annotation context.<velt-data field="context.foo" />
data.contextIdstring | nullContext id linking this dialog to a host context.<velt-data field="data.contextId" />

​
UI State

Per-instance UI flags driven by the dialog itself.
VariableTypeDescriptionExample
commentPinSelectedbooleanPin associated with the focused annotation is selected.velt-class="'pin-selected': {commentPinSelected}"
commentPinTypestring | nullPin shape ('pin', 'bubble', etc.).<velt-data field="commentPinType" />
inboxModebooleanInbox-style layout is active.velt-class="'inbox': {inboxMode}"
readOnlybooleanDialog is in read-only mode.velt-class="'readonly': {readOnly}"
hideMultiThreadAnnotationComposerbooleanAnchor-annotation composer should be hidden.velt-if="!{hideMultiThreadAnnotationComposer}"
dialogVariantstringVariant forwarded to nested comment-dialogs.<velt-data field="dialogVariant" />
minimalFilter'all' | 'read' | 'unread' | 'resolved'Currently selected filter row.velt-class="'filter-{minimalFilter}': true"
selectedMinimalFilterDropdownOption.sortingSidebarSortingCriteriaCurrently selected sort row.<velt-data field="selectedMinimalFilterDropdownOption.sorting" />
selectedMinimalFilterDropdownOption.filter'all' | 'read' | 'unread' | 'resolved'Selected filter (mirrors minimalFilter).velt-class="'selected-{selectedMinimalFilterDropdownOption.filter}': true"
minimalFilterDropdownOpenbooleanFilter+sort dropdown menu is open.velt-class="'open': {minimalFilterDropdownOpen}"
minimalActionsDropdownOpenbooleanBulk-actions dropdown menu is open.velt-class="'open': {minimalActionsDropdownOpen}"
noCommentsFoundForAppliedFiltersbooleanFilters reduced the list to zero.velt-if="{noCommentsFoundForAppliedFilters}"
noCommentsFoundbooleanNo annotations exist in scope.velt-if="{noCommentsFound}"
darkModebooleanDark mode is active.velt-class="'dark': {darkMode}"
variantstring | nullPer-instance variant tag set on the host element.<velt-data field="variant" />
uiState.shadowDombooleanShadow-DOM rendering is enabled (per-instance).Host config — set via element attribute.
parentLocalUIState.darkModebooleanDark-mode flag (per-render). Alias for darkMode.Host config — set via element attribute.
parentLocalUIState.variantstringVariant tag (per-render). Alias for variant.Host config — set via element attribute.
parentLocalUIState.shadowDombooleanShadow-DOM flag (per-render).Host config — set via element attribute.

​
Common Props

Every Multithread Comments primitive accepts:
React PropHTML AttributeTypeDefaultDescription
defaultConditiondefault-conditionboolean | "true" | "false"trueWhen 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.
VariableTypeAvailable inExample
isSelectedbooleanAll six *-minimal-filter-dropdown-content-{filter,sort}-* tagsvelt-class="'is-selected': {isSelected}"

​
Type Reference

Types referenced by the variables above are documented in Data Models:
TypeDescription
CommentAnnotationThe annotation thread (id, status, comments, etc.).
UserIdentified end-user object.
SidebarSortingCriteriaSort-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>
PropertyValue
Extra variablesNone — 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>
PropertyValue
Extra variablesNone 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>
PropertyValue
Extra variablesNone beyond common variables.
<VeltMultiThreadCommentDialogWireframe.CommentCount>
  <VeltData field="nonDraftCommentsCount" /> threads
</VeltMultiThreadCommentDialogWireframe.CommentCount>

​
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>
PropertyValue
Extra variablesNone beyond common variables.
shouldShow`noCommentsFoundnoCommentsFoundForAppliedFilters`
<VeltMultiThreadCommentDialogWireframe.EmptyPlaceholder
  veltIf="{noCommentsFound} || {noCommentsFoundForAppliedFilters}">
  <p>No threads to show.</p>
</VeltMultiThreadCommentDialogWireframe.EmptyPlaceholder>

​
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>
PropertyValue
Extra variablesNone.

​
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>
PropertyValue
Extra variablesNone.

​
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>
PropertyValue
Extra variablesNone.
shouldShownoCommentsFoundForAppliedFilters

​
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>
PropertyValue
Extra variablesNone 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

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

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

​
Minimal actions dropdown tags

The bulk-actions dropdown (“Mark all as read”, “Mark all as resolved”).
TagNotesExample
<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)