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

# MultiThread Comment Dialog Primitives

> Primitive components for building custom Multithread Comment Dialog UIs — compose multiple threads, composers, and reactions from low-level Velt blocks.

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

<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.
</Note>

### VeltMultiThreadCommentDialog

Root component for the multi-thread comment dialog.

<Tabs>
  <Tab title="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>

  <Tab title="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`.
  </Tab>
</Tabs>

***

### VeltMultiThreadCommentDialogList

List container for multi-thread comment dialog threads.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltMultiThreadCommentDialogList annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="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).
  </Tab>
</Tabs>

***

### VeltMultiThreadCommentDialogPanel

Panel container for the multi-thread comment dialog.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltMultiThreadCommentDialogPanel annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="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).
  </Tab>
</Tabs>

***

### VeltMultiThreadCommentDialogComposerContainer

Composer container for the multi-thread comment dialog.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltMultiThreadCommentDialogComposerContainer annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="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).
  </Tab>
</Tabs>

***

### VeltMultiThreadCommentDialogCommentCount

Comment count display for the multi-thread comment dialog.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltMultiThreadCommentDialogCommentCount annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="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).
  </Tab>
</Tabs>

***

### VeltMultiThreadCommentDialogEmptyPlaceholder

Empty state placeholder for the multi-thread comment dialog.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltMultiThreadCommentDialogEmptyPlaceholder annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="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).
  </Tab>
</Tabs>

***

### VeltMultiThreadCommentDialogCloseButton

Close button for the multi-thread comment dialog.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltMultiThreadCommentDialogCloseButton annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="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).
  </Tab>
</Tabs>

***

### VeltMultiThreadCommentDialogNewThreadButton

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

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltMultiThreadCommentDialogNewThreadButton annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="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).
  </Tab>
</Tabs>

***

### VeltMultiThreadCommentDialogResetFilterButton

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

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltMultiThreadCommentDialogResetFilterButton annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="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).
  </Tab>
</Tabs>

***

### VeltMultiThreadCommentDialogMinimalFilterDropdown

Minimal filter dropdown for the multi-thread comment dialog.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltMultiThreadCommentDialogMinimalFilterDropdown annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="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).
  </Tab>
</Tabs>

***

### VeltMultiThreadCommentDialogMinimalFilterDropdownTrigger

Trigger button for the minimal filter dropdown.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltMultiThreadCommentDialogMinimalFilterDropdownTrigger annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="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).
  </Tab>
</Tabs>

***

### VeltMultiThreadCommentDialogMinimalFilterDropdownContent

Content container for the minimal filter dropdown.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltMultiThreadCommentDialogMinimalFilterDropdownContent annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="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).
  </Tab>
</Tabs>

***

### VeltMultiThreadCommentDialogMinimalFilterDropdownContentFilterAll

Filter-all option within the minimal filter dropdown.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltMultiThreadCommentDialogMinimalFilterDropdownContentFilterAll annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="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).
  </Tab>
</Tabs>

***

### VeltMultiThreadCommentDialogMinimalFilterDropdownContentFilterRead

Filter-read option within the minimal filter dropdown.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltMultiThreadCommentDialogMinimalFilterDropdownContentFilterRead annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="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).
  </Tab>
</Tabs>

***

### VeltMultiThreadCommentDialogMinimalFilterDropdownContentFilterResolved

Filter-resolved option within the minimal filter dropdown.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltMultiThreadCommentDialogMinimalFilterDropdownContentFilterResolved annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="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).
  </Tab>
</Tabs>

***

### VeltMultiThreadCommentDialogMinimalFilterDropdownContentFilterUnread

Filter-unread option within the minimal filter dropdown.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltMultiThreadCommentDialogMinimalFilterDropdownContentFilterUnread annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="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).
  </Tab>
</Tabs>

***

### VeltMultiThreadCommentDialogMinimalFilterDropdownContentSelectedIcon

Selected state icon within the minimal filter dropdown.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltMultiThreadCommentDialogMinimalFilterDropdownContentSelectedIcon annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="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).
  </Tab>
</Tabs>

***

### VeltMultiThreadCommentDialogMinimalFilterDropdownContentSortDate

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

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltMultiThreadCommentDialogMinimalFilterDropdownContentSortDate annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="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).
  </Tab>
</Tabs>

***

### VeltMultiThreadCommentDialogMinimalFilterDropdownContentSortUnread

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

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltMultiThreadCommentDialogMinimalFilterDropdownContentSortUnread annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="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).
  </Tab>
</Tabs>

***

### VeltMultiThreadCommentDialogMinimalActionsDropdown

Minimal actions dropdown for the multi-thread comment dialog.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltMultiThreadCommentDialogMinimalActionsDropdown annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="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).
  </Tab>
</Tabs>

***

### VeltMultiThreadCommentDialogMinimalActionsDropdownTrigger

Trigger button for the minimal actions dropdown.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltMultiThreadCommentDialogMinimalActionsDropdownTrigger annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="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).
  </Tab>
</Tabs>

***

### VeltMultiThreadCommentDialogMinimalActionsDropdownContent

Content container for the minimal actions dropdown.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltMultiThreadCommentDialogMinimalActionsDropdownContent annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="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).
  </Tab>
</Tabs>

***

### VeltMultiThreadCommentDialogMinimalActionsDropdownContentMarkAllRead

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

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltMultiThreadCommentDialogMinimalActionsDropdownContentMarkAllRead annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="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).
  </Tab>
</Tabs>

***

### VeltMultiThreadCommentDialogMinimalActionsDropdownContentMarkAllResolved

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

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltMultiThreadCommentDialogMinimalActionsDropdownContentMarkAllResolved annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="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).
  </Tab>
</Tabs>