> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# MultiThread Comment Dialog Primitives

> Primitive-based components for building custom MultiThread Comment Dialog interfaces with maximum flexibility.

> [!TIP]
>
> Explore primitives interactively in our [Storybook](https://storybook.velt.dev/).

> [!NOTE]
>
> 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.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <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 |

> [tab] Other Frameworks
>
> `<velt-multi-thread-comment-dialog>` is now registered as a standalone custom element for non-React use.
>
> ```html theme={null}
> <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.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltMultiThreadCommentDialogList annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-multi-thread-comment-dialog-list annotation-id="abc123"></velt-multi-thread-comment-dialog-list>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltMultiThreadCommentDialogPanel

Panel container for the multi-thread comment dialog.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltMultiThreadCommentDialogPanel annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-multi-thread-comment-dialog-panel annotation-id="abc123"></velt-multi-thread-comment-dialog-panel>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltMultiThreadCommentDialogComposerContainer

Composer container for the multi-thread comment dialog.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltMultiThreadCommentDialogComposerContainer annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-multi-thread-comment-dialog-composer-container annotation-id="abc123"></velt-multi-thread-comment-dialog-composer-container>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltMultiThreadCommentDialogCommentCount

Comment count display for the multi-thread comment dialog.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltMultiThreadCommentDialogCommentCount annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-multi-thread-comment-dialog-comment-count annotation-id="abc123"></velt-multi-thread-comment-dialog-comment-count>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltMultiThreadCommentDialogEmptyPlaceholder

Empty state placeholder for the multi-thread comment dialog.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltMultiThreadCommentDialogEmptyPlaceholder annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-multi-thread-comment-dialog-empty-placeholder annotation-id="abc123"></velt-multi-thread-comment-dialog-empty-placeholder>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltMultiThreadCommentDialogCloseButton

Close button for the multi-thread comment dialog.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltMultiThreadCommentDialogCloseButton annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-multi-thread-comment-dialog-close-button annotation-id="abc123"></velt-multi-thread-comment-dialog-close-button>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltMultiThreadCommentDialogNewThreadButton

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

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltMultiThreadCommentDialogNewThreadButton annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <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](#common-inputs) section).

***

### VeltMultiThreadCommentDialogResetFilterButton

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

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltMultiThreadCommentDialogResetFilterButton annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <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](#common-inputs) section).

***

### VeltMultiThreadCommentDialogMinimalFilterDropdown

Minimal filter dropdown for the multi-thread comment dialog.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltMultiThreadCommentDialogMinimalFilterDropdown annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <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](#common-inputs) section).

***

### VeltMultiThreadCommentDialogMinimalFilterDropdownTrigger

Trigger button for the minimal filter dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltMultiThreadCommentDialogMinimalFilterDropdownTrigger annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <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](#common-inputs) section).

***

### VeltMultiThreadCommentDialogMinimalFilterDropdownContent

Content container for the minimal filter dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltMultiThreadCommentDialogMinimalFilterDropdownContent annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <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](#common-inputs) section).

***

### VeltMultiThreadCommentDialogMinimalFilterDropdownContentFilterAll

Filter-all option within the minimal filter dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltMultiThreadCommentDialogMinimalFilterDropdownContentFilterAll annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <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](#common-inputs) section).

***

### VeltMultiThreadCommentDialogMinimalFilterDropdownContentFilterRead

Filter-read option within the minimal filter dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltMultiThreadCommentDialogMinimalFilterDropdownContentFilterRead annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <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](#common-inputs) section).

***

### VeltMultiThreadCommentDialogMinimalFilterDropdownContentFilterResolved

Filter-resolved option within the minimal filter dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltMultiThreadCommentDialogMinimalFilterDropdownContentFilterResolved annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <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](#common-inputs) section).

***

### VeltMultiThreadCommentDialogMinimalFilterDropdownContentFilterUnread

Filter-unread option within the minimal filter dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltMultiThreadCommentDialogMinimalFilterDropdownContentFilterUnread annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <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](#common-inputs) section).

***

### VeltMultiThreadCommentDialogMinimalFilterDropdownContentSelectedIcon

Selected state icon within the minimal filter dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltMultiThreadCommentDialogMinimalFilterDropdownContentSelectedIcon annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <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](#common-inputs) section).

***

### VeltMultiThreadCommentDialogMinimalFilterDropdownContentSortDate

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

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltMultiThreadCommentDialogMinimalFilterDropdownContentSortDate annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <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](#common-inputs) section).

***

### VeltMultiThreadCommentDialogMinimalFilterDropdownContentSortUnread

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

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltMultiThreadCommentDialogMinimalFilterDropdownContentSortUnread annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <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](#common-inputs) section).

***

### VeltMultiThreadCommentDialogMinimalActionsDropdown

Minimal actions dropdown for the multi-thread comment dialog.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltMultiThreadCommentDialogMinimalActionsDropdown annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <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](#common-inputs) section).

***

### VeltMultiThreadCommentDialogMinimalActionsDropdownTrigger

Trigger button for the minimal actions dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltMultiThreadCommentDialogMinimalActionsDropdownTrigger annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <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](#common-inputs) section).

***

### VeltMultiThreadCommentDialogMinimalActionsDropdownContent

Content container for the minimal actions dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltMultiThreadCommentDialogMinimalActionsDropdownContent annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <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](#common-inputs) section).

***

### VeltMultiThreadCommentDialogMinimalActionsDropdownContentMarkAllRead

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

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltMultiThreadCommentDialogMinimalActionsDropdownContentMarkAllRead annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <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](#common-inputs) section).

***

### VeltMultiThreadCommentDialogMinimalActionsDropdownContentMarkAllResolved

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

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltMultiThreadCommentDialogMinimalActionsDropdownContentMarkAllResolved annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <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](#common-inputs) section).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.