MultiThread Comment Dialog Primitives

Explore primitives interactively in our Storybook.

MultiThread Comment Dialog primitives can be used standalone: pass multiThreadAnnotationId (React) or multi-thread-annotation-id (HTML) to render a primitive with real annotation data without a parent root component.

VeltMultiThreadCommentDialog

Root component for the multi-thread comment dialog.

React / Next.js
Other Frameworks

<VeltMultiThreadCommentDialog
  multiThreadAnnotationId="thread-123"
  readOnly={false}
  defaultCondition={true}
  onSaveComment={(e) => console.log(e)}
/>

Props:

Prop	Type	Default	Description
`annotationId`	`string`	—	The annotation ID
`multiThreadAnnotationId`	`string`	—	The multi-thread annotation ID
`annotation`	`any`	—	Annotation data object
`readOnly`	`boolean`	`false`	Disables user interaction
`defaultCondition`	`boolean`	`true`	When `false`, the component always renders regardless of internal state
`variant`	`string`	—	Visual variant for the component
`inboxMode`	`boolean`	`false`	Renders the dialog in inbox mode
`onSaveComment`	`Function`	—	Callback fired when a comment is saved

<velt-multi-thread-comment-dialog> is now registered as a standalone custom element for non-React use.

<velt-multi-thread-comment-dialog
  multi-thread-annotation-id="thread-123"
  read-only="false"
  default-condition="true">
</velt-multi-thread-comment-dialog>

Attributes:

Attribute	Type	Default	Description
`annotation-id`	`string`	—	The annotation ID
`multi-thread-annotation-id`	`string`	—	The multi-thread annotation ID
`annotation`	`string` (JSON)	—	Annotation data object as serialized JSON
`read-only`	`string`	`"false"`	Disables user interaction
`default-condition`	`string`	`"true"`	When `"false"`, the component always renders regardless of internal state
`variant`	`string`	—	Visual variant for the component
`inbox-mode`	`string`	`"false"`	Renders the dialog in inbox mode

Listen for the onSaveComment event on the element via addEventListener.

VeltMultiThreadCommentDialogList

List container for multi-thread comment dialog threads.

React / Next.js
Other Frameworks

<VeltMultiThreadCommentDialogList annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-multi-thread-comment-dialog-list annotation-id="abc123"></velt-multi-thread-comment-dialog-list>

Attributes: Common attributes only (see Common Inputs section).

VeltMultiThreadCommentDialogPanel

Panel container for the multi-thread comment dialog.

React / Next.js
Other Frameworks

<VeltMultiThreadCommentDialogPanel annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-multi-thread-comment-dialog-panel annotation-id="abc123"></velt-multi-thread-comment-dialog-panel>

Attributes: Common attributes only (see Common Inputs section).

VeltMultiThreadCommentDialogComposerContainer

Composer container for the multi-thread comment dialog.

React / Next.js
Other Frameworks

<VeltMultiThreadCommentDialogComposerContainer annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-multi-thread-comment-dialog-composer-container annotation-id="abc123"></velt-multi-thread-comment-dialog-composer-container>

Attributes: Common attributes only (see Common Inputs section).

VeltMultiThreadCommentDialogCommentCount

Comment count display for the multi-thread comment dialog.

React / Next.js
Other Frameworks

<VeltMultiThreadCommentDialogCommentCount annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-multi-thread-comment-dialog-comment-count annotation-id="abc123"></velt-multi-thread-comment-dialog-comment-count>

Attributes: Common attributes only (see Common Inputs section).

VeltMultiThreadCommentDialogEmptyPlaceholder

Empty state placeholder for the multi-thread comment dialog.

React / Next.js
Other Frameworks

<VeltMultiThreadCommentDialogEmptyPlaceholder annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-multi-thread-comment-dialog-empty-placeholder annotation-id="abc123"></velt-multi-thread-comment-dialog-empty-placeholder>

Attributes: Common attributes only (see Common Inputs section).

VeltMultiThreadCommentDialogCloseButton

Close button for the multi-thread comment dialog.

React / Next.js
Other Frameworks

<VeltMultiThreadCommentDialogCloseButton annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-multi-thread-comment-dialog-close-button annotation-id="abc123"></velt-multi-thread-comment-dialog-close-button>

Attributes: Common attributes only (see Common Inputs section).

VeltMultiThreadCommentDialogNewThreadButton

Button to start a new thread in the multi-thread comment dialog.

React / Next.js
Other Frameworks

<VeltMultiThreadCommentDialogNewThreadButton annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-multi-thread-comment-dialog-new-thread-button annotation-id="abc123"></velt-multi-thread-comment-dialog-new-thread-button>

Attributes: Common attributes only (see Common Inputs section).

VeltMultiThreadCommentDialogResetFilterButton

Button to reset active filters in the multi-thread comment dialog.

React / Next.js
Other Frameworks

<VeltMultiThreadCommentDialogResetFilterButton annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-multi-thread-comment-dialog-reset-filter-button annotation-id="abc123"></velt-multi-thread-comment-dialog-reset-filter-button>

Attributes: Common attributes only (see Common Inputs section).

VeltMultiThreadCommentDialogMinimalFilterDropdown

Minimal filter dropdown for the multi-thread comment dialog.

React / Next.js
Other Frameworks

<VeltMultiThreadCommentDialogMinimalFilterDropdown annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-multi-thread-comment-dialog-minimal-filter-dropdown annotation-id="abc123"></velt-multi-thread-comment-dialog-minimal-filter-dropdown>

Attributes: Common attributes only (see Common Inputs section).

VeltMultiThreadCommentDialogMinimalFilterDropdownTrigger

Trigger button for the minimal filter dropdown.

React / Next.js
Other Frameworks

<VeltMultiThreadCommentDialogMinimalFilterDropdownTrigger annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-multi-thread-comment-dialog-minimal-filter-dropdown-trigger annotation-id="abc123"></velt-multi-thread-comment-dialog-minimal-filter-dropdown-trigger>

Attributes: Common attributes only (see Common Inputs section).

VeltMultiThreadCommentDialogMinimalFilterDropdownContent

Content container for the minimal filter dropdown.

React / Next.js
Other Frameworks

<VeltMultiThreadCommentDialogMinimalFilterDropdownContent annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-multi-thread-comment-dialog-minimal-filter-dropdown-content annotation-id="abc123"></velt-multi-thread-comment-dialog-minimal-filter-dropdown-content>

Attributes: Common attributes only (see Common Inputs section).

VeltMultiThreadCommentDialogMinimalFilterDropdownContentFilterAll

Filter-all option within the minimal filter dropdown.

React / Next.js
Other Frameworks

<VeltMultiThreadCommentDialogMinimalFilterDropdownContentFilterAll annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-filter-all annotation-id="abc123"></velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-filter-all>

Attributes: Common attributes only (see Common Inputs section).

VeltMultiThreadCommentDialogMinimalFilterDropdownContentFilterRead

Filter-read option within the minimal filter dropdown.

React / Next.js
Other Frameworks

<VeltMultiThreadCommentDialogMinimalFilterDropdownContentFilterRead annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-filter-read annotation-id="abc123"></velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-filter-read>

Attributes: Common attributes only (see Common Inputs section).

VeltMultiThreadCommentDialogMinimalFilterDropdownContentFilterResolved

Filter-resolved option within the minimal filter dropdown.

React / Next.js
Other Frameworks

<VeltMultiThreadCommentDialogMinimalFilterDropdownContentFilterResolved annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-filter-resolved annotation-id="abc123"></velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-filter-resolved>

Attributes: Common attributes only (see Common Inputs section).

VeltMultiThreadCommentDialogMinimalFilterDropdownContentFilterUnread

Filter-unread option within the minimal filter dropdown.

React / Next.js
Other Frameworks

<VeltMultiThreadCommentDialogMinimalFilterDropdownContentFilterUnread annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-filter-unread annotation-id="abc123"></velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-filter-unread>

Attributes: Common attributes only (see Common Inputs section).

VeltMultiThreadCommentDialogMinimalFilterDropdownContentSelectedIcon

Selected state icon within the minimal filter dropdown.

React / Next.js
Other Frameworks

<VeltMultiThreadCommentDialogMinimalFilterDropdownContentSelectedIcon annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-selected-icon annotation-id="abc123"></velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-selected-icon>

Attributes: Common attributes only (see Common Inputs section).

VeltMultiThreadCommentDialogMinimalFilterDropdownContentSortDate

Sort-by-date option within the minimal filter dropdown.

React / Next.js
Other Frameworks

<VeltMultiThreadCommentDialogMinimalFilterDropdownContentSortDate annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-sort-date annotation-id="abc123"></velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-sort-date>

Attributes: Common attributes only (see Common Inputs section).

VeltMultiThreadCommentDialogMinimalFilterDropdownContentSortUnread

Sort-by-unread option within the minimal filter dropdown.

React / Next.js
Other Frameworks

<VeltMultiThreadCommentDialogMinimalFilterDropdownContentSortUnread annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-sort-unread annotation-id="abc123"></velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-sort-unread>

Attributes: Common attributes only (see Common Inputs section).

VeltMultiThreadCommentDialogMinimalActionsDropdown

Minimal actions dropdown for the multi-thread comment dialog.

React / Next.js
Other Frameworks

<VeltMultiThreadCommentDialogMinimalActionsDropdown annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-multi-thread-comment-dialog-minimal-actions-dropdown annotation-id="abc123"></velt-multi-thread-comment-dialog-minimal-actions-dropdown>

Attributes: Common attributes only (see Common Inputs section).

VeltMultiThreadCommentDialogMinimalActionsDropdownTrigger

Trigger button for the minimal actions dropdown.

React / Next.js
Other Frameworks

<VeltMultiThreadCommentDialogMinimalActionsDropdownTrigger annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-multi-thread-comment-dialog-minimal-actions-dropdown-trigger annotation-id="abc123"></velt-multi-thread-comment-dialog-minimal-actions-dropdown-trigger>

Attributes: Common attributes only (see Common Inputs section).

VeltMultiThreadCommentDialogMinimalActionsDropdownContent

Content container for the minimal actions dropdown.

React / Next.js
Other Frameworks

<VeltMultiThreadCommentDialogMinimalActionsDropdownContent annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-multi-thread-comment-dialog-minimal-actions-dropdown-content annotation-id="abc123"></velt-multi-thread-comment-dialog-minimal-actions-dropdown-content>

Attributes: Common attributes only (see Common Inputs section).

VeltMultiThreadCommentDialogMinimalActionsDropdownContentMarkAllRead

Mark-all-read action within the minimal actions dropdown.

React / Next.js
Other Frameworks

<VeltMultiThreadCommentDialogMinimalActionsDropdownContentMarkAllRead annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-multi-thread-comment-dialog-minimal-actions-dropdown-content-mark-all-read annotation-id="abc123"></velt-multi-thread-comment-dialog-minimal-actions-dropdown-content-mark-all-read>

Attributes: Common attributes only (see Common Inputs section).

VeltMultiThreadCommentDialogMinimalActionsDropdownContentMarkAllResolved

Mark-all-resolved action within the minimal actions dropdown.

React / Next.js
Other Frameworks

<VeltMultiThreadCommentDialogMinimalActionsDropdownContentMarkAllResolved annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-multi-thread-comment-dialog-minimal-actions-dropdown-content-mark-all-resolved annotation-id="abc123"></velt-multi-thread-comment-dialog-minimal-actions-dropdown-content-mark-all-resolved>

Attributes: Common attributes only (see Common Inputs section).

​VeltMultiThreadCommentDialog

​VeltMultiThreadCommentDialogList

​VeltMultiThreadCommentDialogPanel

​VeltMultiThreadCommentDialogComposerContainer

​VeltMultiThreadCommentDialogCommentCount

​VeltMultiThreadCommentDialogEmptyPlaceholder

​VeltMultiThreadCommentDialogCloseButton

​VeltMultiThreadCommentDialogNewThreadButton

​VeltMultiThreadCommentDialogResetFilterButton

​VeltMultiThreadCommentDialogMinimalFilterDropdown

​VeltMultiThreadCommentDialogMinimalFilterDropdownTrigger

​VeltMultiThreadCommentDialogMinimalFilterDropdownContent

​VeltMultiThreadCommentDialogMinimalFilterDropdownContentFilterAll

​VeltMultiThreadCommentDialogMinimalFilterDropdownContentFilterRead

​VeltMultiThreadCommentDialogMinimalFilterDropdownContentFilterResolved

​VeltMultiThreadCommentDialogMinimalFilterDropdownContentFilterUnread

​VeltMultiThreadCommentDialogMinimalFilterDropdownContentSelectedIcon

​VeltMultiThreadCommentDialogMinimalFilterDropdownContentSortDate

​VeltMultiThreadCommentDialogMinimalFilterDropdownContentSortUnread

​VeltMultiThreadCommentDialogMinimalActionsDropdown

​VeltMultiThreadCommentDialogMinimalActionsDropdownTrigger

​VeltMultiThreadCommentDialogMinimalActionsDropdownContent

​VeltMultiThreadCommentDialogMinimalActionsDropdownContentMarkAllRead

​VeltMultiThreadCommentDialogMinimalActionsDropdownContentMarkAllResolved

VeltMultiThreadCommentDialog

VeltMultiThreadCommentDialogList

VeltMultiThreadCommentDialogPanel

VeltMultiThreadCommentDialogComposerContainer

VeltMultiThreadCommentDialogCommentCount

VeltMultiThreadCommentDialogEmptyPlaceholder

VeltMultiThreadCommentDialogCloseButton

VeltMultiThreadCommentDialogNewThreadButton

VeltMultiThreadCommentDialogResetFilterButton

VeltMultiThreadCommentDialogMinimalFilterDropdown

VeltMultiThreadCommentDialogMinimalFilterDropdownTrigger

VeltMultiThreadCommentDialogMinimalFilterDropdownContent

VeltMultiThreadCommentDialogMinimalFilterDropdownContentFilterAll

VeltMultiThreadCommentDialogMinimalFilterDropdownContentFilterRead

VeltMultiThreadCommentDialogMinimalFilterDropdownContentFilterResolved

VeltMultiThreadCommentDialogMinimalFilterDropdownContentFilterUnread

VeltMultiThreadCommentDialogMinimalFilterDropdownContentSelectedIcon

VeltMultiThreadCommentDialogMinimalFilterDropdownContentSortDate

VeltMultiThreadCommentDialogMinimalFilterDropdownContentSortUnread

VeltMultiThreadCommentDialogMinimalActionsDropdown

VeltMultiThreadCommentDialogMinimalActionsDropdownTrigger

VeltMultiThreadCommentDialogMinimalActionsDropdownContent

VeltMultiThreadCommentDialogMinimalActionsDropdownContentMarkAllRead

VeltMultiThreadCommentDialogMinimalActionsDropdownContentMarkAllResolved