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

# Comment Dialog Primitives

> Reference for the 247 Velt Comment Dialog primitive components (React and HTML) you compose to build a fully custom comment dialog UI.

<Note>
  New here? Start with the [Comment Dialog Customization overview](/docs/ui-customization/features/async/comments/comment-dialog/overview): it explains when to build with primitives versus re-templating the default dialog with wireframes.
</Note>

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

## Overview

The Comment Dialog Primitives API provides 247 granular components that can be used independently to build completely custom comment interfaces. Each primitive can be used standalone or composed together for maximum customization flexibility.

## Usage Patterns

### Pattern 1: Context Wrapper (Recommended)

Components are wrapped in a context wrapper that provides shared context to children.

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-context-wrapper annotation-id="abc123">
      <velt-comment-dialog-header></velt-comment-dialog-header>
      <velt-comment-dialog-composer></velt-comment-dialog-composer>
    </velt-comment-dialog-context-wrapper>
    ```
  </Tab>
</Tabs>

### Pattern 2: ID-Based (Standalone)

Each component receives `annotationId` directly and works independently.

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-header annotation-id="abc123"></velt-comment-dialog-header>
    <velt-comment-dialog-composer annotation-id="abc123"></velt-comment-dialog-composer>
    ```
  </Tab>
</Tabs>

<Note>
  **If you use both, the context wrapper wins.** An `annotationId` set on a nested primitive does not override the one it inherits, so don't rely on a per-child ID to opt out of the wrapper's scope: render that child outside the wrapper instead.
</Note>

## Common Inputs

All components inherit these base inputs. See [`CommentDialogCommonProps`](/docs/api-reference/sdk/models/data-models#commentdialogcommonprops) for the type definition.

| React Prop                 | HTML Attribute                | Type      | Default     | Description                 |
| -------------------------- | ----------------------------- | --------- | ----------- | --------------------------- |
| `annotationId`             | `annotation-id`               | `string`  | -           | The annotation ID           |
| `defaultCondition`         | `default-condition`           | `boolean` | `undefined` | When false, always shows    |
| `inlineCommentSectionMode` | `inline-comment-section-mode` | `boolean` | `false`     | Inline comment section mode |
| `commentPinSelected`       | `comment-pin-selected`        | `boolean` | `false`     | Comment pin selected state  |
| `fullExpanded`             | `full-expanded`               | `boolean` | `false`     | Full expansion state        |

***

## Components

### VeltCommentDialogContextWrapper

Context wrapper that provides shared annotation context to child primitives.

Props: [`CommentDialogContextWrapperProps`](/docs/api-reference/sdk/models/data-models#commentdialogcontextwrapperprops)

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogContextWrapper
      annotationId="abc123"
      commentId="456"
      commentPinSelected={true}
    >
      {children}
    </VeltCommentDialogContextWrapper>
    ```

    **Props:**

    | Prop                 | Type      | Required   | Description                             |
    | -------------------- | --------- | ---------- | --------------------------------------- |
    | `annotationId`       | `string`  | Yes (root) | Annotation ID for children              |
    | `commentId`          | `string`  | No         | Comment ID for children                 |
    | `attachmentId`       | `string`  | No         | Attachment ID for children              |
    | `commentPinSelected` | `boolean` | No         | Selection state for children            |
    | `[key: string]`      | `any`     | No         | Any custom attribute passed via context |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-context-wrapper
      annotation-id="abc123"
      comment-id="456"
      comment-pin-selected="true">
    </velt-comment-dialog-context-wrapper>
    ```

    **Attributes:**

    | Attribute              | Type     | Required   | Description                      |
    | ---------------------- | -------- | ---------- | -------------------------------- |
    | `annotation-id`        | `string` | Yes (root) | Annotation ID for children       |
    | `comment-id`           | `string` | No         | Comment ID for children          |
    | `attachment-id`        | `string` | No         | Attachment ID for children       |
    | `comment-pin-selected` | `string` | No         | Selection state ("true"/"false") |
  </Tab>
</Tabs>

***

### VeltCommentDialogHeader

Header component for the comment dialog.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-header annotation-id="abc123"></velt-comment-dialog-header>
    ```

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

***

### VeltCommentDialogBody

Body container for the comment dialog thread content.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-body annotation-id="abc123"></velt-comment-dialog-body>
    ```

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

***

### VeltCommentDialogThreadCard

Complete thread card with all comment metadata and content. See [`ThreadCardProps`](/docs/api-reference/sdk/models/data-models#threadcardprops).

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogThreadCard
      annotationId="abc123"
      commentObj={commentData}
      commentId={456}
      commentIndex={0}
    />
    ```

    **Props:**

    | Prop           | Type     | Required | Description                          |
    | -------------- | -------- | -------- | ------------------------------------ |
    | `commentObj`   | `object` | No       | Direct comment object (Priority 1)   |
    | `commentId`    | `number` | No       | Comment ID for lookup (Priority 2)   |
    | `commentIndex` | `number` | No       | Index in comments array (Priority 3) |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card
      annotation-id="abc123"
      comment-obj='{"commentId": 456, "message": "..."}'
      comment-id="456"
      comment-index="0">
    </velt-comment-dialog-thread-card>
    ```

    **Attributes:**

    | Attribute       | Type            | Required | Description                          |
    | --------------- | --------------- | -------- | ------------------------------------ |
    | `comment-obj`   | `string (JSON)` | No       | Direct comment object (Priority 1)   |
    | `comment-id`    | `string`        | No       | Comment ID for lookup (Priority 2)   |
    | `comment-index` | `string`        | No       | Index in comments array (Priority 3) |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardAvatar

User avatar for the comment author. See [`CommentIndexProps`](/docs/api-reference/sdk/models/data-models#commentindexprops).

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

    **Props:**

    | Prop           | Type     | Required | Description               |
    | -------------- | -------- | -------- | ------------------------- |
    | `commentIndex` | `number` | No       | Index of comment in array |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-avatar
      annotation-id="abc123"
      comment-index="0">
    </velt-comment-dialog-thread-card-avatar>
    ```

    **Attributes:**

    | Attribute       | Type     | Required | Description               |
    | --------------- | -------- | -------- | ------------------------- |
    | `comment-index` | `string` | No       | Index of comment in array |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardName

Display name of the comment author. See [`CommentIndexProps`](/docs/api-reference/sdk/models/data-models#commentindexprops).

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

    **Props:**

    | Prop           | Type     | Required | Description               |
    | -------------- | -------- | -------- | ------------------------- |
    | `commentIndex` | `number` | No       | Index of comment in array |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-name
      annotation-id="abc123"
      comment-index="0">
    </velt-comment-dialog-thread-card-name>
    ```

    **Attributes:**

    | Attribute       | Type     | Required | Description               |
    | --------------- | -------- | -------- | ------------------------- |
    | `comment-index` | `string` | No       | Index of comment in array |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardTime

Timestamp of when the comment was created. See [`CommentIndexProps`](/docs/api-reference/sdk/models/data-models#commentindexprops).

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

    **Props:**

    | Prop           | Type     | Required | Description               |
    | -------------- | -------- | -------- | ------------------------- |
    | `commentIndex` | `number` | No       | Index of comment in array |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-time
      annotation-id="abc123"
      comment-index="0">
    </velt-comment-dialog-thread-card-time>
    ```

    **Attributes:**

    | Attribute       | Type     | Required | Description               |
    | --------------- | -------- | -------- | ------------------------- |
    | `comment-index` | `string` | No       | Index of comment in array |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardMessage

The comment message content. See [`CommentIndexProps`](/docs/api-reference/sdk/models/data-models#commentindexprops).

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

    **Props:**

    | Prop           | Type     | Required | Description               |
    | -------------- | -------- | -------- | ------------------------- |
    | `commentIndex` | `number` | No       | Index of comment in array |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-message
      annotation-id="abc123"
      comment-index="0">
    </velt-comment-dialog-thread-card-message>
    ```

    **Attributes:**

    | Attribute       | Type     | Required | Description               |
    | --------------- | -------- | -------- | ------------------------- |
    | `comment-index` | `string` | No       | Index of comment in array |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardMessageShowMore

Show-more toggle that appears when message truncation is enabled and the message exceeds the configured line limit; clicking expands the full message.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-message-show-more></velt-comment-dialog-thread-card-message-show-more>
    ```

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

***

### VeltCommentDialogThreadCardMessageShowLess

Show-less toggle that collapses an expanded truncated message back to the truncated state.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-message-show-less></velt-comment-dialog-thread-card-message-show-less>
    ```

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

***

### VeltCommentDialogThreadCardReactions

Reactions display for the comment. See [`CommentIndexProps`](/docs/api-reference/sdk/models/data-models#commentindexprops).

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

    **Props:**

    | Prop           | Type     | Required | Description               |
    | -------------- | -------- | -------- | ------------------------- |
    | `commentIndex` | `number` | No       | Index of comment in array |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-reactions
      annotation-id="abc123"
      comment-index="0">
    </velt-comment-dialog-thread-card-reactions>
    ```

    **Attributes:**

    | Attribute       | Type     | Required | Description               |
    | --------------- | -------- | -------- | ------------------------- |
    | `comment-index` | `string` | No       | Index of comment in array |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardReactionTool

Tool for adding reactions to a comment. See [`CommentIndexProps`](/docs/api-reference/sdk/models/data-models#commentindexprops).

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

    **Props:**

    | Prop           | Type     | Required | Description               |
    | -------------- | -------- | -------- | ------------------------- |
    | `commentIndex` | `number` | No       | Index of comment in array |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-reaction-tool
      annotation-id="abc123"
      comment-index="0">
    </velt-comment-dialog-thread-card-reaction-tool>
    ```

    **Attributes:**

    | Attribute       | Type     | Required | Description               |
    | --------------- | -------- | -------- | ------------------------- |
    | `comment-index` | `string` | No       | Index of comment in array |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardReactionPin

Reaction pin inside a thread card.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogThreadCardReactionPin
      annotationId="abc123"
      reactionId="reaction-1"
      commentIndex={0}
    />
    ```

    **Props:** Common inputs (see [Common Inputs](#common-inputs) section) plus:

    | Prop           | Type               | Required | Description                                     |
    | -------------- | ------------------ | -------- | ----------------------------------------------- |
    | `reactionId`   | `string`           | No       | ID of the reaction                              |
    | `commentObj`   | `any \| string`    | No       | Comment data object (or serialized JSON string) |
    | `commentIndex` | `number \| string` | No       | Index of comment in array                       |
    | `index`        | `number \| string` | No       | Index of the reaction pin                       |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-reaction-pin
      annotation-id="abc123"
      reaction-id="reaction-1"
      comment-index="0">
    </velt-comment-dialog-thread-card-reaction-pin>
    ```

    **Attributes:** Common attributes (see [Common Inputs](#common-inputs) section) plus:

    | Attribute       | Type            | Required | Description                            |
    | --------------- | --------------- | -------- | -------------------------------------- |
    | `reaction-id`   | `string`        | No       | ID of the reaction                     |
    | `comment-obj`   | `string` (JSON) | No       | Comment data object as serialized JSON |
    | `comment-index` | `string`        | No       | Index of comment in array              |
    | `index`         | `string`        | No       | Index of the reaction pin              |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardRecordings

Recordings attached to the comment. See [`CommentIndexProps`](/docs/api-reference/sdk/models/data-models#commentindexprops).

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

    **Props:**

    | Prop           | Type     | Required | Description               |
    | -------------- | -------- | -------- | ------------------------- |
    | `commentIndex` | `number` | No       | Index of comment in array |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-recordings
      annotation-id="abc123"
      comment-index="0">
    </velt-comment-dialog-thread-card-recordings>
    ```

    **Attributes:**

    | Attribute       | Type     | Required | Description               |
    | --------------- | -------- | -------- | ------------------------- |
    | `comment-index` | `string` | No       | Index of comment in array |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardReply

Reply indicator for the thread card.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-reply annotation-id="abc123"></velt-comment-dialog-thread-card-reply>
    ```

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

***

### VeltCommentDialogThreadCardUnread

Unread indicator for the comment. See [`CommentIndexProps`](/docs/api-reference/sdk/models/data-models#commentindexprops).

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

    **Props:**

    | Prop           | Type     | Required | Description               |
    | -------------- | -------- | -------- | ------------------------- |
    | `commentIndex` | `number` | No       | Index of comment in array |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-unread
      annotation-id="abc123"
      comment-index="0">
    </velt-comment-dialog-thread-card-unread>
    ```

    **Attributes:**

    | Attribute       | Type     | Required | Description               |
    | --------------- | -------- | -------- | ------------------------- |
    | `comment-index` | `string` | No       | Index of comment in array |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardEdited

Edited indicator for the comment. See [`CommentIndexProps`](/docs/api-reference/sdk/models/data-models#commentindexprops).

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

    **Props:**

    | Prop           | Type     | Required | Description               |
    | -------------- | -------- | -------- | ------------------------- |
    | `commentIndex` | `number` | No       | Index of comment in array |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-edited
      annotation-id="abc123"
      comment-index="0">
    </velt-comment-dialog-thread-card-edited>
    ```

    **Attributes:**

    | Attribute       | Type     | Required | Description               |
    | --------------- | -------- | -------- | ------------------------- |
    | `comment-index` | `string` | No       | Index of comment in array |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardDraft

Draft indicator for the comment. See [`CommentIndexProps`](/docs/api-reference/sdk/models/data-models#commentindexprops).

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

    **Props:**

    | Prop           | Type     | Required | Description               |
    | -------------- | -------- | -------- | ------------------------- |
    | `commentIndex` | `number` | No       | Index of comment in array |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-draft
      annotation-id="abc123"
      comment-index="0">
    </velt-comment-dialog-thread-card-draft>
    ```

    **Attributes:**

    | Attribute       | Type     | Required | Description               |
    | --------------- | -------- | -------- | ------------------------- |
    | `comment-index` | `string` | No       | Index of comment in array |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardDeviceType

Device type indicator for the comment. See [`CommentIndexProps`](/docs/api-reference/sdk/models/data-models#commentindexprops).

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

    **Props:**

    | Prop           | Type     | Required | Description               |
    | -------------- | -------- | -------- | ------------------------- |
    | `commentIndex` | `number` | No       | Index of comment in array |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-device-type
      annotation-id="abc123"
      comment-index="0">
    </velt-comment-dialog-thread-card-device-type>
    ```

    **Attributes:**

    | Attribute       | Type     | Required | Description               |
    | --------------- | -------- | -------- | ------------------------- |
    | `comment-index` | `string` | No       | Index of comment in array |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardOptions

Options menu for the comment (edit, delete, etc.). See [`CommentIndexProps`](/docs/api-reference/sdk/models/data-models#commentindexprops).

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

    **Props:**

    | Prop           | Type     | Required | Description               |
    | -------------- | -------- | -------- | ------------------------- |
    | `commentIndex` | `number` | No       | Index of comment in array |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-options
      annotation-id="abc123"
      comment-index="0">
    </velt-comment-dialog-thread-card-options>
    ```

    **Attributes:**

    | Attribute       | Type     | Required | Description               |
    | --------------- | -------- | -------- | ------------------------- |
    | `comment-index` | `string` | No       | Index of comment in array |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardAssignButton

Assign-to button inside a thread card.

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

    **Props:** Common inputs (see [Common Inputs](#common-inputs) section) plus:

    | Prop           | Type               | Required | Description                                     |
    | -------------- | ------------------ | -------- | ----------------------------------------------- |
    | `commentObj`   | `any \| string`    | No       | Comment data object (or serialized JSON string) |
    | `commentId`    | `number \| string` | No       | ID of the comment                               |
    | `commentIndex` | `number \| string` | No       | Index of comment in array                       |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-assign-button
      annotation-id="abc123"
      comment-id="456">
    </velt-comment-dialog-thread-card-assign-button>
    ```

    **Attributes:** Common attributes (see [Common Inputs](#common-inputs) section) plus:

    | Attribute       | Type            | Required | Description                            |
    | --------------- | --------------- | -------- | -------------------------------------- |
    | `comment-obj`   | `string` (JSON) | No       | Comment data object as serialized JSON |
    | `comment-id`    | `string`        | No       | ID of the comment                      |
    | `comment-index` | `string`        | No       | Index of comment in array              |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardEditComposer

Inline edit composer inside a thread card.

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

    **Props:** Common inputs (see [Common Inputs](#common-inputs) section) plus:

    | Prop           | Type               | Required | Description                                     |
    | -------------- | ------------------ | -------- | ----------------------------------------------- |
    | `commentObj`   | `any \| string`    | No       | Comment data object (or serialized JSON string) |
    | `commentId`    | `number \| string` | No       | ID of the comment                               |
    | `commentIndex` | `number \| string` | No       | Index of comment in array                       |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-edit-composer
      annotation-id="abc123"
      comment-id="456">
    </velt-comment-dialog-thread-card-edit-composer>
    ```

    **Attributes:** Common attributes (see [Common Inputs](#common-inputs) section) plus:

    | Attribute       | Type            | Required | Description                            |
    | --------------- | --------------- | -------- | -------------------------------------- |
    | `comment-obj`   | `string` (JSON) | No       | Comment data object as serialized JSON |
    | `comment-id`    | `string`        | No       | ID of the comment                      |
    | `comment-index` | `string`        | No       | Index of comment in array              |
  </Tab>
</Tabs>

***

### VeltCommentDialogComposer

Complete composer with input, attachments, and action buttons. See [`ComposerProps`](/docs/api-reference/sdk/models/data-models#composerprops).

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogComposer
      annotationId="abc123"
      placeholder="Write a comment..."
      commentPlaceholder="Add a comment"
      replyPlaceholder="Write a reply"
      editPlaceholder="Edit your comment"
      editMode={false}
      commentObj={null}
      commentIndex={0}
      targetComposerElementId="composer-1"
      context={{ projectId: 'abc123' }}
    />
    ```

    **Props:**

    | Prop                      | Type      | Required | Description                                   |
    | ------------------------- | --------- | -------- | --------------------------------------------- |
    | `placeholder`             | `string`  | No       | Primary placeholder (Priority 1)              |
    | `commentPlaceholder`      | `string`  | No       | Placeholder for new comment                   |
    | `replyPlaceholder`        | `string`  | No       | Placeholder for reply                         |
    | `editPlaceholder`         | `string`  | No       | Placeholder for edit mode                     |
    | `editMode`                | `boolean` | No       | Enable edit mode                              |
    | `commentObj`              | `object`  | No       | Comment object for edit mode                  |
    | `commentIndex`            | `number`  | No       | Index of comment being edited                 |
    | `targetComposerElementId` | `string`  | No       | Unique identifier for programmatic submission |
    | `context`                 | `object`  | No       | Custom context data to attach to comment      |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-composer
      annotation-id="abc123"
      placeholder="Write a comment..."
      commentplaceholder="Add a comment"
      replyplaceholder="Write a reply"
      editplaceholder="Edit your comment"
      edit-mode="false"
      comment-index="0"
      target-composer-element-id="composer-1"
      context='{"projectId": "abc123"}'>
    </velt-comment-dialog-composer>
    ```

    **Attributes:**

    | Attribute                    | Type            | Required | Description                                   |
    | ---------------------------- | --------------- | -------- | --------------------------------------------- |
    | `placeholder`                | `string`        | No       | Primary placeholder (Priority 1)              |
    | `commentplaceholder`         | `string`        | No       | Placeholder for new comment                   |
    | `replyplaceholder`           | `string`        | No       | Placeholder for reply                         |
    | `editplaceholder`            | `string`        | No       | Placeholder for edit mode                     |
    | `edit-mode`                  | `string`        | No       | Enable edit mode ("true"/"false")             |
    | `comment-obj`                | `string (JSON)` | No       | Comment object for edit mode                  |
    | `comment-index`              | `string`        | No       | Index of comment being edited                 |
    | `target-composer-element-id` | `string`        | No       | Unique identifier for programmatic submission |
    | `context`                    | `string (JSON)` | No       | Custom context data to attach to comment      |
  </Tab>
</Tabs>

***

### VeltCommentDialogComposerInput

Text input field for composing comments. See [`ComposerInputProps`](/docs/api-reference/sdk/models/data-models#composerinputprops).

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

    **Props:**

    | Prop          | Type     | Required | Description            |
    | ------------- | -------- | -------- | ---------------------- |
    | `placeholder` | `string` | No       | Input placeholder text |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-composer-input
      annotation-id="abc123"
      placeholder="Type here...">
    </velt-comment-dialog-composer-input>
    ```

    **Attributes:**

    | Attribute     | Type     | Required | Description            |
    | ------------- | -------- | -------- | ---------------------- |
    | `placeholder` | `string` | No       | Input placeholder text |
  </Tab>
</Tabs>

***

### VeltCommentDialogComposerActionButton

Submit/send button for the composer.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-composer-action-button annotation-id="abc123"></velt-comment-dialog-composer-action-button>
    ```

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

***

### VeltCommentDialogComposerAttachmentButton

Button to add file attachments to comments.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-composer-attachment-button annotation-id="abc123"></velt-comment-dialog-composer-attachment-button>
    ```

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

***

### VeltCommentDialogComposerRecorderButton

Button to add audio/video recordings.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-composer-recorder-button annotation-id="abc123"></velt-comment-dialog-composer-recorder-button>
    ```

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

***

### VeltCommentDialogComposerRecorderPlayer

Player for audio/video recordings in the composer.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-composer-recorder-player annotation-id="abc123"></velt-comment-dialog-composer-recorder-player>
    ```

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

***

### VeltCommentDialogComposerFiles

Files display in the composer.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-composer-files annotation-id="abc123"></velt-comment-dialog-composer-files>
    ```

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

***

### VeltCommentDialogComposerAttachmentsImageDownload

Download button for image attachments in the comment dialog composer when in edit mode.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-composer-attachments-image-download annotation-id="abc123"></velt-comment-dialog-composer-attachments-image-download>
    ```

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

***

### VeltCommentDialogComposerAttachmentsOtherDownload

Download button for non-image file attachments in the comment dialog composer when in edit mode.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-composer-attachments-other-download annotation-id="abc123"></velt-comment-dialog-composer-attachments-other-download>
    ```

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

***

### VeltCommentDialogStatusDropdown

Complete status dropdown with trigger and content.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-status-dropdown annotation-id="abc123"></velt-comment-dialog-status-dropdown>
    ```

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

***

### VeltCommentDialogStatusDropdownTrigger

Button that opens the status dropdown.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-status-dropdown-trigger annotation-id="abc123"></velt-comment-dialog-status-dropdown-trigger>
    ```

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

***

### VeltCommentDialogStatusDropdownTriggerIcon

Icon for the status dropdown trigger.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-status-dropdown-trigger-icon annotation-id="abc123"></velt-comment-dialog-status-dropdown-trigger-icon>
    ```

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

***

### VeltCommentDialogStatusDropdownTriggerName

Name display for the status dropdown trigger.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-status-dropdown-trigger-name annotation-id="abc123"></velt-comment-dialog-status-dropdown-trigger-name>
    ```

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

***

### VeltCommentDialogStatusDropdownTriggerArrow

Arrow indicator for the status dropdown trigger.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-status-dropdown-trigger-arrow annotation-id="abc123"></velt-comment-dialog-status-dropdown-trigger-arrow>
    ```

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

***

### VeltCommentDialogStatusDropdownContent

Dropdown content container for status options.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-status-dropdown-content annotation-id="abc123"></velt-comment-dialog-status-dropdown-content>
    ```

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

***

### VeltCommentDialogStatusDropdownContentItem

Individual status item in the dropdown. See [`StatusDropdownItemProps`](/docs/api-reference/sdk/models/data-models#statusdropdownitemprops).

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogStatusDropdownContentItem
      annotationId="abc123"
      statusObj={statusData}
      statusId="open"
      statusIndex={0}
    />
    ```

    **Props:**

    | Prop          | Type     | Required | Description                          |
    | ------------- | -------- | -------- | ------------------------------------ |
    | `statusObj`   | `object` | No       | Direct status object (Priority 1)    |
    | `statusId`    | `string` | No       | Status ID for lookup (Priority 2)    |
    | `statusIndex` | `number` | No       | Index in statuses array (Priority 3) |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-status-dropdown-content-item
      annotation-id="abc123"
      status-obj='{"id": "open", "name": "Open"}'
      status-id="open"
      status-index="0">
    </velt-comment-dialog-status-dropdown-content-item>
    ```

    **Attributes:**

    | Attribute      | Type            | Required | Description                          |
    | -------------- | --------------- | -------- | ------------------------------------ |
    | `status-obj`   | `string (JSON)` | No       | Direct status object (Priority 1)    |
    | `status-id`    | `string`        | No       | Status ID for lookup (Priority 2)    |
    | `status-index` | `string`        | No       | Index in statuses array (Priority 3) |
  </Tab>
</Tabs>

***

### VeltCommentDialogStatusDropdownContentItemIcon

Icon for a status dropdown item.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-status-dropdown-content-item-icon annotation-id="abc123"></velt-comment-dialog-status-dropdown-content-item-icon>
    ```

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

***

### VeltCommentDialogStatusDropdownContentItemName

Name display for a status dropdown item.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-status-dropdown-content-item-name annotation-id="abc123"></velt-comment-dialog-status-dropdown-content-item-name>
    ```

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

***

### VeltCommentDialogPriorityDropdown

Complete priority dropdown with trigger and content.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-priority-dropdown annotation-id="abc123"></velt-comment-dialog-priority-dropdown>
    ```

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

***

### VeltCommentDialogPriorityDropdownTrigger

Button that opens the priority dropdown.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-priority-dropdown-trigger annotation-id="abc123"></velt-comment-dialog-priority-dropdown-trigger>
    ```

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

***

### VeltCommentDialogPriorityDropdownTriggerIcon

Icon for the priority dropdown trigger.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-priority-dropdown-trigger-icon annotation-id="abc123"></velt-comment-dialog-priority-dropdown-trigger-icon>
    ```

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

***

### VeltCommentDialogPriorityDropdownTriggerName

Name display for the priority dropdown trigger.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-priority-dropdown-trigger-name annotation-id="abc123"></velt-comment-dialog-priority-dropdown-trigger-name>
    ```

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

***

### VeltCommentDialogPriorityDropdownTriggerArrow

Arrow indicator for the priority dropdown trigger.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-priority-dropdown-trigger-arrow annotation-id="abc123"></velt-comment-dialog-priority-dropdown-trigger-arrow>
    ```

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

***

### VeltCommentDialogPriorityDropdownContent

Dropdown content container for priority options.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-priority-dropdown-content annotation-id="abc123"></velt-comment-dialog-priority-dropdown-content>
    ```

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

***

### VeltCommentDialogPriorityDropdownContentItem

Individual priority item in the dropdown. See [`PriorityDropdownItemProps`](/docs/api-reference/sdk/models/data-models#prioritydropdownitemprops).

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogPriorityDropdownContentItem
      annotationId="abc123"
      priorityObj={priorityData}
      priorityId="high"
      priorityIndex={0}
    />
    ```

    **Props:**

    | Prop            | Type     | Required | Description                            |
    | --------------- | -------- | -------- | -------------------------------------- |
    | `priorityObj`   | `object` | No       | Direct priority object (Priority 1)    |
    | `priorityId`    | `string` | No       | Priority ID for lookup (Priority 2)    |
    | `priorityIndex` | `number` | No       | Index in priorities array (Priority 3) |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-priority-dropdown-content-item
      annotation-id="abc123"
      priority-obj='{"id": "high", "name": "High"}'
      priority-id="high"
      priority-index="0">
    </velt-comment-dialog-priority-dropdown-content-item>
    ```

    **Attributes:**

    | Attribute        | Type            | Required | Description                            |
    | ---------------- | --------------- | -------- | -------------------------------------- |
    | `priority-obj`   | `string (JSON)` | No       | Direct priority object (Priority 1)    |
    | `priority-id`    | `string`        | No       | Priority ID for lookup (Priority 2)    |
    | `priority-index` | `string`        | No       | Index in priorities array (Priority 3) |
  </Tab>
</Tabs>

***

### VeltCommentDialogPriorityDropdownContentItemIcon

Icon for a priority dropdown item.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-priority-dropdown-content-item-icon annotation-id="abc123"></velt-comment-dialog-priority-dropdown-content-item-icon>
    ```

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

***

### VeltCommentDialogPriorityDropdownContentItemName

Name display for a priority dropdown item.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-priority-dropdown-content-item-name annotation-id="abc123"></velt-comment-dialog-priority-dropdown-content-item-name>
    ```

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

***

### VeltCommentDialogPriorityDropdownContentItemTick

Tick/checkmark for a priority dropdown item.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-priority-dropdown-content-item-tick annotation-id="abc123"></velt-comment-dialog-priority-dropdown-content-item-tick>
    ```

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

***

### VeltCommentDialogOptionsDropdown

Options menu for actions like assignment, editing, and notifications. See [`OptionsDropdownProps`](/docs/api-reference/sdk/models/data-models#optionsdropdownprops).

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogOptionsDropdown
      annotationId="abc123"
      commentIndex={0}
      enableAssignment={true}
      enableEdit={true}
      enableNotifications={true}
      enablePrivateMode={true}
      enableMarkAsRead={true}
    />
    ```

    **Props:**

    | Prop                           | Type      | Required | Description                      |
    | ------------------------------ | --------- | -------- | -------------------------------- |
    | `commentIndex`                 | `number`  | No       | Index of comment for options     |
    | `enableAssignment`             | `boolean` | No       | Enable assignment option         |
    | `allowAssignment`              | `boolean` | No       | V4 alias for enableAssignment    |
    | `enableEdit`                   | `boolean` | No       | Enable edit option               |
    | `allowEdit`                    | `boolean` | No       | V4 alias for enableEdit          |
    | `enableNotifications`          | `boolean` | No       | Enable notifications option      |
    | `allowNotifications`           | `boolean` | No       | V4 alias for enableNotifications |
    | `allowToggleNotification`      | `boolean` | No       | V4 alias for enableNotifications |
    | `enablePrivateMode`            | `boolean` | No       | Enable private mode option       |
    | `allowPrivateMode`             | `boolean` | No       | V4 alias for enablePrivateMode   |
    | `allowChangeCommentAccessMode` | `boolean` | No       | V4 alias for enablePrivateMode   |
    | `enableMarkAsRead`             | `boolean` | No       | Enable mark as read option       |
    | `allowMarkAsRead`              | `boolean` | No       | V4 alias for enableMarkAsRead    |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-options-dropdown
      annotation-id="abc123"
      comment-index="0"
      enable-assignment="true"
      enable-edit="true"
      enable-notifications="true"
      enable-private-mode="true"
      enable-mark-as-read="true">
    </velt-comment-dialog-options-dropdown>
    ```

    **Attributes:**

    | Attribute                          | Type     | Required | Description                       |
    | ---------------------------------- | -------- | -------- | --------------------------------- |
    | `comment-index`                    | `string` | No       | Index of comment for options      |
    | `enable-assignment`                | `string` | No       | Enable assignment option          |
    | `allow-assignment`                 | `string` | No       | V4 alias for enable-assignment    |
    | `enable-edit`                      | `string` | No       | Enable edit option                |
    | `allow-edit`                       | `string` | No       | V4 alias for enable-edit          |
    | `enable-notifications`             | `string` | No       | Enable notifications option       |
    | `allow-notifications`              | `string` | No       | V4 alias for enable-notifications |
    | `allow-toggle-notification`        | `string` | No       | V4 alias for enable-notifications |
    | `enable-private-mode`              | `string` | No       | Enable private mode option        |
    | `allow-private-mode`               | `string` | No       | V4 alias for enable-private-mode  |
    | `allow-change-comment-access-mode` | `string` | No       | V4 alias for enable-private-mode  |
    | `enable-mark-as-read`              | `string` | No       | Enable mark as read option        |
    | `allow-mark-as-read`               | `string` | No       | V4 alias for enable-mark-as-read  |
  </Tab>
</Tabs>

***

### VeltCommentDialogOptionsDropdownTrigger

Trigger button for the options dropdown.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-options-dropdown-trigger annotation-id="abc123"></velt-comment-dialog-options-dropdown-trigger>
    ```

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

***

### VeltCommentDialogOptionsDropdownContent

Content container for the options dropdown.

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

    **Props:** Common inputs (see [Common Inputs](#common-inputs) section) plus:

    | Prop                  | Type               | Required | Description                                     |
    | --------------------- | ------------------ | -------- | ----------------------------------------------- |
    | `commentObj`          | `any \| string`    | No       | Comment data object (or serialized JSON string) |
    | `commentIndex`        | `number \| string` | No       | Index of comment in array                       |
    | `enableAssignment`    | `boolean`          | No       | Shows the assign option                         |
    | `enableEdit`          | `boolean`          | No       | Shows the edit option                           |
    | `enableNotifications` | `boolean`          | No       | Shows the notifications option                  |
    | `enablePrivateMode`   | `boolean`          | No       | Shows the private mode option                   |
    | `enableMarkAsRead`    | `boolean`          | No       | Shows the mark-as-read option                   |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-options-dropdown-content
      annotation-id="abc123"
      enable-edit="true">
    </velt-comment-dialog-options-dropdown-content>
    ```

    **Attributes:** Common attributes (see [Common Inputs](#common-inputs) section) plus:

    | Attribute              | Type            | Required | Description                                     |
    | ---------------------- | --------------- | -------- | ----------------------------------------------- |
    | `comment-obj`          | `string` (JSON) | No       | Comment data object as serialized JSON          |
    | `comment-index`        | `string`        | No       | Index of comment in array                       |
    | `enable-assignment`    | `string`        | No       | Shows the assign option ("true"/"false")        |
    | `enable-edit`          | `string`        | No       | Shows the edit option ("true"/"false")          |
    | `enable-notifications` | `string`        | No       | Shows the notifications option ("true"/"false") |
    | `enable-private-mode`  | `string`        | No       | Shows the private mode option ("true"/"false")  |
    | `enable-mark-as-read`  | `string`        | No       | Shows the mark-as-read option ("true"/"false")  |
  </Tab>
</Tabs>

***

### VeltCommentDialogOptionsDropdownContentAssign

Assign option in the options dropdown.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-options-dropdown-content-assign annotation-id="abc123"></velt-comment-dialog-options-dropdown-content-assign>
    ```

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

***

### VeltCommentDialogOptionsDropdownContentEdit

Edit option in the options dropdown.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-options-dropdown-content-edit annotation-id="abc123"></velt-comment-dialog-options-dropdown-content-edit>
    ```

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

***

### VeltCommentDialogOptionsDropdownContentDelete

Delete option in the options dropdown.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-options-dropdown-content-delete annotation-id="abc123"></velt-comment-dialog-options-dropdown-content-delete>
    ```

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

***

### VeltCommentDialogOptionsDropdownContentDeleteComment

Delete comment option in the options dropdown.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-options-dropdown-content-delete-comment annotation-id="abc123"></velt-comment-dialog-options-dropdown-content-delete-comment>
    ```

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

***

### VeltCommentDialogOptionsDropdownContentDeleteThread

Delete thread option in the options dropdown.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-options-dropdown-content-delete-thread annotation-id="abc123"></velt-comment-dialog-options-dropdown-content-delete-thread>
    ```

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

***

### VeltCommentDialogOptionsDropdownContentMakePrivate

Make private option container in the options dropdown.

<Note>
  This component is automatically suppressed when the visibility-options dropdown is active (`featureState.visibilityOptions === true`), mirroring the banner/badge behavior. The privacy check routes through the shared `isAnnotationPrivate()` utility, so the correct enable/disable variant is shown for annotations whose privacy is expressed via `visibilityConfig.type === 'restricted'` or `'organizationPrivate'`, in addition to the legacy `iam.accessMode === 'private'`.
</Note>

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-options-dropdown-content-make-private annotation-id="abc123"></velt-comment-dialog-options-dropdown-content-make-private>
    ```

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

***

### VeltCommentDialogOptionsDropdownContentMakePrivateEnable

Enable private mode option.

<Note>
  Auto-suppressed when `featureState.visibilityOptions === true`. Shown when `isAnnotationPrivate()` returns `false`: this includes annotations where `iam.accessMode` is not `'private'` and `visibilityConfig.type` is neither `'restricted'` nor `'organizationPrivate'`.
</Note>

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-options-dropdown-content-make-private-enable annotation-id="abc123"></velt-comment-dialog-options-dropdown-content-make-private-enable>
    ```

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

***

### VeltCommentDialogOptionsDropdownContentMakePrivateDisable

Disable private mode option.

<Note>
  Auto-suppressed when `featureState.visibilityOptions === true`. Shown when `isAnnotationPrivate()` returns `true`: this includes annotations where `iam.accessMode === 'private'` (legacy) or `visibilityConfig.type` is `'restricted'` or `'organizationPrivate'`.
</Note>

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-options-dropdown-content-make-private-disable annotation-id="abc123"></velt-comment-dialog-options-dropdown-content-make-private-disable>
    ```

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

***

### VeltCommentDialogOptionsDropdownContentNotification

Notification option container in the options dropdown.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-options-dropdown-content-notification annotation-id="abc123"></velt-comment-dialog-options-dropdown-content-notification>
    ```

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

***

### VeltCommentDialogOptionsDropdownContentNotificationSubscribe

Subscribe to notifications option.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-options-dropdown-content-notification-subscribe annotation-id="abc123"></velt-comment-dialog-options-dropdown-content-notification-subscribe>
    ```

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

***

### VeltCommentDialogOptionsDropdownContentNotificationUnsubscribe

Unsubscribe from notifications option.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-options-dropdown-content-notification-unsubscribe annotation-id="abc123"></velt-comment-dialog-options-dropdown-content-notification-unsubscribe>
    ```

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

***

### VeltCommentDialogOptionsDropdownContentMarkAsRead

Mark as read option container in the options dropdown.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-options-dropdown-content-mark-as-read annotation-id="abc123"></velt-comment-dialog-options-dropdown-content-mark-as-read>
    ```

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

***

### VeltCommentDialogOptionsDropdownContentMarkAsReadMarkRead

Mark as read action option.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-options-dropdown-content-mark-as-read-mark-read annotation-id="abc123"></velt-comment-dialog-options-dropdown-content-mark-as-read-mark-read>
    ```

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

***

### VeltCommentDialogOptionsDropdownContentMarkAsReadMarkUnread

Mark as unread action option.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-options-dropdown-content-mark-as-read-mark-unread annotation-id="abc123"></velt-comment-dialog-options-dropdown-content-mark-as-read-mark-unread>
    ```

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

***

### VeltCommentDialogCustomAnnotationDropdown

Dropdown for custom annotation categories.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-custom-annotation-dropdown annotation-id="abc123"></velt-comment-dialog-custom-annotation-dropdown>
    ```

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

***

### VeltCommentDialogCustomAnnotationDropdownTrigger

Trigger button for the custom annotation dropdown.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-custom-annotation-dropdown-trigger annotation-id="abc123"></velt-comment-dialog-custom-annotation-dropdown-trigger>
    ```

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

***

### VeltCommentDialogCustomAnnotationDropdownTriggerArrow

Arrow indicator for the custom annotation dropdown trigger.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-custom-annotation-dropdown-trigger-arrow annotation-id="abc123"></velt-comment-dialog-custom-annotation-dropdown-trigger-arrow>
    ```

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

***

### VeltCommentDialogCustomAnnotationDropdownTriggerList

List container for the custom annotation dropdown trigger.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-custom-annotation-dropdown-trigger-list annotation-id="abc123"></velt-comment-dialog-custom-annotation-dropdown-trigger-list>
    ```

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

***

### VeltCommentDialogCustomAnnotationDropdownTriggerListItem

Individual item in the custom annotation dropdown trigger list. See [`CustomAnnotationItemProps`](/docs/api-reference/sdk/models/data-models#customannotationitemprops).

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogCustomAnnotationDropdownTriggerListItem
      annotationId="abc123"
      item={itemData}
      index={0}
    />
    ```

    **Props:**

    | Prop    | Type     | Required | Description      |
    | ------- | -------- | -------- | ---------------- |
    | `item`  | `object` | No       | Item data object |
    | `index` | `number` | No       | Item index       |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-custom-annotation-dropdown-trigger-list-item
      annotation-id="abc123"
      item='{"id": "1", "label": "Item"}'
      index="0">
    </velt-comment-dialog-custom-annotation-dropdown-trigger-list-item>
    ```

    **Attributes:**

    | Attribute | Type            | Required | Description      |
    | --------- | --------------- | -------- | ---------------- |
    | `item`    | `string (JSON)` | No       | Item data object |
    | `index`   | `string`        | No       | Item index       |
  </Tab>
</Tabs>

***

### VeltCommentDialogCustomAnnotationDropdownTriggerPlaceholder

Placeholder for the custom annotation dropdown trigger.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-custom-annotation-dropdown-trigger-placeholder annotation-id="abc123"></velt-comment-dialog-custom-annotation-dropdown-trigger-placeholder>
    ```

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

***

### VeltCommentDialogCustomAnnotationDropdownTriggerRemainingCount

Remaining count indicator for the custom annotation dropdown trigger.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-custom-annotation-dropdown-trigger-remaining-count annotation-id="abc123"></velt-comment-dialog-custom-annotation-dropdown-trigger-remaining-count>
    ```

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

***

### VeltCommentDialogCustomAnnotationDropdownContent

Content container for the custom annotation dropdown.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-custom-annotation-dropdown-content annotation-id="abc123"></velt-comment-dialog-custom-annotation-dropdown-content>
    ```

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

***

### VeltCommentDialogCustomAnnotationDropdownContentItem

Individual item in the custom annotation dropdown content. See [`CustomAnnotationItemProps`](/docs/api-reference/sdk/models/data-models#customannotationitemprops).

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogCustomAnnotationDropdownContentItem
      annotationId="abc123"
      item={itemData}
      index={0}
    />
    ```

    **Props:**

    | Prop    | Type     | Required | Description      |
    | ------- | -------- | -------- | ---------------- |
    | `item`  | `object` | No       | Item data object |
    | `index` | `number` | No       | Item index       |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-custom-annotation-dropdown-content-item
      annotation-id="abc123"
      item='{"id": "1", "label": "Item"}'
      index="0">
    </velt-comment-dialog-custom-annotation-dropdown-content-item>
    ```

    **Attributes:**

    | Attribute | Type            | Required | Description      |
    | --------- | --------------- | -------- | ---------------- |
    | `item`    | `string (JSON)` | No       | Item data object |
    | `index`   | `string`        | No       | Item index       |
  </Tab>
</Tabs>

***

### VeltCommentDialogCustomAnnotationDropdownContentItemIcon

Icon for a custom annotation dropdown item.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-custom-annotation-dropdown-content-item-icon annotation-id="abc123"></velt-comment-dialog-custom-annotation-dropdown-content-item-icon>
    ```

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

***

### VeltCommentDialogCustomAnnotationDropdownContentItemLabel

Label for a custom annotation dropdown item.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-custom-annotation-dropdown-content-item-label annotation-id="abc123"></velt-comment-dialog-custom-annotation-dropdown-content-item-label>
    ```

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

***

### VeltCommentDialogReplyAvatars

Container for reply avatars.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-reply-avatars annotation-id="abc123"></velt-comment-dialog-reply-avatars>
    ```

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

***

### VeltCommentDialogReplyAvatarsList

List container for reply avatars.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-reply-avatars-list annotation-id="abc123"></velt-comment-dialog-reply-avatars-list>
    ```

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

***

### VeltCommentDialogReplyAvatarsListItem

Individual avatar item in the reply avatars list. See [`ReplyAvatarsListItemProps`](/docs/api-reference/sdk/models/data-models#replyavatarslistitemprops).

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogReplyAvatarsListItem
      annotationId="abc123"
      user={userData}
      index={0}
    />
    ```

    **Props:**

    | Prop    | Type     | Required | Description           |
    | ------- | -------- | -------- | --------------------- |
    | `user`  | `User`   | Yes      | User data object      |
    | `index` | `number` | Yes      | Index of user in list |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-reply-avatars-list-item
      annotation-id="abc123"
      user='{"userId": "1", "name": "John"}'
      index="0">
    </velt-comment-dialog-reply-avatars-list-item>
    ```

    **Attributes:**

    | Attribute | Type            | Required | Description           |
    | --------- | --------------- | -------- | --------------------- |
    | `user`    | `string (JSON)` | Yes      | User data object      |
    | `index`   | `string`        | Yes      | Index of user in list |
  </Tab>
</Tabs>

***

### VeltCommentDialogReplyCount

Reply count display.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-reply-count annotation-id="abc123"></velt-comment-dialog-reply-count>
    ```

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

***

### VeltCommentDialogAssigneeBanner

Assignee banner container.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-assignee-banner annotation-id="abc123"></velt-comment-dialog-assignee-banner>
    ```

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

***

### VeltCommentDialogAssigneeBannerResolved

Resolved state of the assignee banner.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-assignee-banner-resolved annotation-id="abc123"></velt-comment-dialog-assignee-banner-resolved>
    ```

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

***

### VeltCommentDialogAssigneeBannerUnresolved

Unresolved state of the assignee banner.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-assignee-banner-unresolved annotation-id="abc123"></velt-comment-dialog-assignee-banner-unresolved>
    ```

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

***

### VeltCommentDialogAssigneeBannerUnresolveButton

Button to unresolve the assignee banner.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-assignee-banner-unresolve-button annotation-id="abc123"></velt-comment-dialog-assignee-banner-unresolve-button>
    ```

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

***

### VeltAutocomplete

<Tip>
  To customize the **wireframe appearance** of autocomplete options, chips, and tooltips, see the [Autocomplete Option](/docs/ui-customization/features/async/comments/comment-dialog/wireframes#autocomplete-option-composer) and [Autocomplete Chip Tooltip](/docs/ui-customization/features/async/comments/comment-dialog/wireframes#autocomplete-chip-tooltip-body-threads-thread-card) sections in the Comment Dialog wireframes page.
</Tip>

The autocomplete panel component accepts the following props for controlling selection mode, ordering, and data source.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltAutocomplete
      multiSelect={true}
      selectedFirstOrdering={true}
      readOnly={false}
      inline={true}
      contacts={myContacts}
    />
    ```

    **Props:**

    | Prop                    | Type                                                                 | Default | Description                                            |
    | ----------------------- | -------------------------------------------------------------------- | ------- | ------------------------------------------------------ |
    | `multiSelect`           | `boolean`                                                            | `false` | Allows selecting multiple contacts                     |
    | `selectedFirstOrdering` | `boolean`                                                            | `false` | Shows selected items first in the list                 |
    | `readOnly`              | `boolean`                                                            | `false` | Disables user interaction                              |
    | `inline`                | `boolean`                                                            | `false` | Renders the autocomplete inline rather than as a panel |
    | `contacts`              | [`UserContact[]`](/docs/api-reference/sdk/models/data-models#usercontact) | —       | Overrides the default contact list                     |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-autocomplete
      multi-select="true"
      selected-first-ordering="true"
      read-only="false"
      inline="true"
    ></velt-autocomplete>
    ```

    **Attributes:**

    | Attribute                 | Type     | Default   | Description                                            |
    | ------------------------- | -------- | --------- | ------------------------------------------------------ |
    | `multi-select`            | `string` | `"false"` | Allows selecting multiple contacts                     |
    | `selected-first-ordering` | `string` | `"false"` | Shows selected items first in the list                 |
    | `read-only`               | `string` | `"false"` | Disables user interaction                              |
    | `inline`                  | `string` | `"false"` | Renders the autocomplete inline rather than as a panel |
  </Tab>
</Tabs>

***

### VeltAutocompletePanel

Standalone autocomplete panel component (e.g. an inline user picker not tied to a text input).

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltAutocompletePanel
      type="contact"
      multiSelect={true}
      selectedFirstOrdering={true}
      defaultCondition={false}
    />
    ```

    **Props:**

    | Prop                    | Type                                     | Default     | Description                                                             |
    | ----------------------- | ---------------------------------------- | ----------- | ----------------------------------------------------------------------- |
    | `type`                  | `'contact' \| 'generic'`                 | `'contact'` | Type of options the panel renders                                       |
    | `hideInput`             | `boolean`                                | `false`     | Hides the search input                                                  |
    | `placeholder`           | `string`                                 | —           | Placeholder text for the search input                                   |
    | `multiSelect`           | `boolean`                                | `false`     | Allows selecting multiple contacts                                      |
    | `selectedFirstOrdering` | `boolean`                                | `false`     | Shows selected items first in the list                                  |
    | `readOnly`              | `boolean`                                | `false`     | Disables user interaction                                               |
    | `inline`                | `boolean`                                | `false`     | Renders the panel inline                                                |
    | `enableOnFocus`         | `boolean`                                | `false`     | Opens the panel when the input receives focus                           |
    | `position`              | `'above' \| 'below' \| 'auto' \| string` | `'auto'`    | Position of the panel relative to its anchor                            |
    | `defaultCondition`      | `boolean`                                | `true`      | When `false`, the component always renders regardless of internal state |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-autocomplete-panel
      type="contact"
      multi-select="true"
      selected-first-ordering="true"
      default-condition="false"
    ></velt-autocomplete-panel>
    ```

    **Attributes:**

    | Attribute                 | Type                                     | Default     | Description                                                               |
    | ------------------------- | ---------------------------------------- | ----------- | ------------------------------------------------------------------------- |
    | `type`                    | `'contact' \| 'generic'`                 | `"contact"` | Type of options the panel renders                                         |
    | `hide-input`              | `string`                                 | `"false"`   | Hides the search input                                                    |
    | `placeholder`             | `string`                                 | —           | Placeholder text for the search input                                     |
    | `multi-select`            | `string`                                 | `"false"`   | Allows selecting multiple contacts                                        |
    | `selected-first-ordering` | `string`                                 | `"false"`   | Shows selected items first in the list                                    |
    | `read-only`               | `string`                                 | `"false"`   | Disables user interaction                                                 |
    | `inline`                  | `string`                                 | `"false"`   | Renders the panel inline                                                  |
    | `enable-on-focus`         | `string`                                 | `"false"`   | Opens the panel when the input receives focus                             |
    | `position`                | `'above' \| 'below' \| 'auto' \| string` | `"auto"`    | Position of the panel relative to its anchor                              |
    | `default-condition`       | `string`                                 | `"true"`    | When `"false"`, the component always renders regardless of internal state |
  </Tab>
</Tabs>

***

### VeltAutocompleteEmptyWireframe

Customize the empty state shown when the autocomplete panel has no results. This is a wireframe component; for more wireframe customization patterns, see the [Comment Dialog wireframes](/docs/ui-customization/features/async/comments/comment-dialog/wireframes) page.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    import { VeltWireframe, VeltAutocompleteEmptyWireframe } from '@veltdev/react';

    <VeltWireframe>
      <VeltAutocompleteEmptyWireframe>
        <div className="my-empty-state">No results found</div>
      </VeltAutocompleteEmptyWireframe>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe>
      <velt-autocomplete-empty-wireframe>
        <div class="my-empty-state">No results found</div>
      </velt-autocomplete-empty-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

***

### VeltAutocompleteChip

Standalone autocomplete chip component for rendering selected contact chips.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltAutocompleteChip
      type="contact"
      email="user@example.com"
      userId="user-1"
    />
    ```

    **Props:**

    | Prop         | Type                                            | Required | Description                                              |
    | ------------ | ----------------------------------------------- | -------- | -------------------------------------------------------- |
    | `type`       | `'contact' \| 'custom' \| 'group' \| 'loading'` | No       | Chip type                                                |
    | `email`      | `string`                                        | No       | Contact email                                            |
    | `userObject` | `any`                                           | No       | User data object (JSON object or serialized JSON string) |
    | `userId`     | `string`                                        | No       | User ID                                                  |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-autocomplete-chip
      type="contact"
      email="user@example.com"
      user-id="user-1"
    ></velt-autocomplete-chip>
    ```

    **Attributes:**

    | Attribute     | Type                                            | Required | Description                         |
    | ------------- | ----------------------------------------------- | -------- | ----------------------------------- |
    | `type`        | `'contact' \| 'custom' \| 'group' \| 'loading'` | No       | Chip type                           |
    | `email`       | `string`                                        | No       | Contact email                       |
    | `user-object` | `string` (JSON)                                 | No       | User data object as serialized JSON |
    | `user-id`     | `string`                                        | No       | User ID                             |
  </Tab>
</Tabs>

***

### VeltAutocompleteOption

Standalone autocomplete option component for rendering contact/custom options.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltAutocompleteOption
      userId="user-1"
      userObject={userData}
    />
    ```

    **Props:**

    | Prop         | Type     | Required | Description                                              |
    | ------------ | -------- | -------- | -------------------------------------------------------- |
    | `userObject` | `any`    | No       | User data object (JSON object or serialized JSON string) |
    | `userId`     | `string` | No       | User ID                                                  |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-autocomplete-option
      user-id="user-1"
    ></velt-autocomplete-option>
    ```

    **Attributes:**

    | Attribute     | Type            | Required | Description                         |
    | ------------- | --------------- | -------- | ----------------------------------- |
    | `user-object` | `string` (JSON) | No       | User data object as serialized JSON |
    | `user-id`     | `string`        | No       | User ID                             |
  </Tab>
</Tabs>

***

### VeltAutocompleteOptionDescription

Standalone autocomplete option description component.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltAutocompleteOptionDescription field="email" />
    ```

    **Props:**

    | Prop    | Type     | Required | Description                                |
    | ------- | -------- | -------- | ------------------------------------------ |
    | `field` | `string` | No       | Field name to display from the user object |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-autocomplete-option-description field="email"></velt-autocomplete-option-description>
    ```

    **Attributes:**

    | Attribute | Type     | Required | Description                                |
    | --------- | -------- | -------- | ------------------------------------------ |
    | `field`   | `string` | No       | Field name to display from the user object |
  </Tab>
</Tabs>

***

### VeltAutocompleteOptionIcon

Icon for an autocomplete option.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-autocomplete-option-icon></velt-autocomplete-option-icon>
    ```

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

***

### VeltAutocompleteOptionName

Name display for an autocomplete option.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-autocomplete-option-name></velt-autocomplete-option-name>
    ```

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

***

### VeltAutocompleteOptionErrorIcon

Error icon for an autocomplete option.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-autocomplete-option-error-icon></velt-autocomplete-option-error-icon>
    ```

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

***

### VeltAutocompleteGroupOption

Group option in the autocomplete panel.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-autocomplete-group-option></velt-autocomplete-group-option>
    ```

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

***

### VeltAutocompleteTool

Tool component for the autocomplete panel.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-autocomplete-tool></velt-autocomplete-tool>
    ```

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

***

### VeltAutocompleteEmpty

Empty state for the autocomplete panel.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-autocomplete-empty></velt-autocomplete-empty>
    ```

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

***

### VeltAutocompleteChipTooltip

Tooltip for an autocomplete chip.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-autocomplete-chip-tooltip></velt-autocomplete-chip-tooltip>
    ```

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

***

### VeltAutocompleteChipTooltipIcon

Icon within the autocomplete chip tooltip.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-autocomplete-chip-tooltip-icon></velt-autocomplete-chip-tooltip-icon>
    ```

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

***

### VeltAutocompleteChipTooltipName

Name display within the autocomplete chip tooltip.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-autocomplete-chip-tooltip-name></velt-autocomplete-chip-tooltip-name>
    ```

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

***

### VeltAutocompleteChipTooltipDescription

Description within the autocomplete chip tooltip.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-autocomplete-chip-tooltip-description></velt-autocomplete-chip-tooltip-description>
    ```

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

***

### VeltCommentDialogResolveButton

Button to resolve a comment thread.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-resolve-button annotation-id="abc123"></velt-comment-dialog-resolve-button>
    ```

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

***

### VeltCommentDialogUnresolveButton

Button to unresolve a comment thread.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-unresolve-button annotation-id="abc123"></velt-comment-dialog-unresolve-button>
    ```

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

***

### VeltCommentDialogCopyLink

Button to copy the comment link to clipboard.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-copy-link annotation-id="abc123"></velt-comment-dialog-copy-link>
    ```

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

***

### VeltCommentDialogCloseButton

Button to close the comment dialog.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-close-button annotation-id="abc123"></velt-comment-dialog-close-button>
    ```

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

***

### VeltCommentDialogDeleteButton

Button to delete a comment.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-delete-button annotation-id="abc123"></velt-comment-dialog-delete-button>
    ```

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

***

### VeltCommentDialogPrivateBanner

Banner indicating a comment's private status.

<Note>
  This component is automatically suppressed when the visibility-options dropdown is active (`featureState.visibilityOptions === true`). It treats an annotation as private when `iam.accessMode === 'private'` (legacy) **or** when `visibilityConfig.type` is `'restricted'` or `'organizationPrivate'` (via the shared `isAnnotationPrivate()` utility).
</Note>

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-private-banner annotation-id="abc123"></velt-comment-dialog-private-banner>
    ```

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

***

### VeltCommentDialogPrivateButton

Button to toggle private mode on a comment.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-private-button annotation-id="abc123"></velt-comment-dialog-private-button>
    ```

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

***

### VeltCommentDialogGhostBanner

Banner displayed for ghost or anonymous comments.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-ghost-banner annotation-id="abc123"></velt-comment-dialog-ghost-banner>
    ```

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

***

### VeltCommentDialogVisibilityBanner

Banner displaying the current visibility setting for a comment.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner annotation-id="abc123"></velt-comment-dialog-visibility-banner>
    ```

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

***

### VeltCommentDialogVisibilityBannerIcon

Icon within the visibility banner.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-icon annotation-id="abc123"></velt-comment-dialog-visibility-banner-icon>
    ```

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

***

### VeltCommentDialogVisibilityBannerText

Text label within the visibility banner.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-text annotation-id="abc123"></velt-comment-dialog-visibility-banner-text>
    ```

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

***

### VeltCommentDialogVisibilityBannerDropdown

Dropdown for selecting visibility options within the banner.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-dropdown annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown>
    ```

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

***

### VeltCommentDialogVisibilityBannerDropdownTrigger

Trigger element for the visibility dropdown.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-dropdown-trigger annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown-trigger>
    ```

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

***

### VeltCommentDialogVisibilityBannerDropdownTriggerLabel

Label text within the visibility dropdown trigger.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-dropdown-trigger-label annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown-trigger-label>
    ```

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

***

### VeltCommentDialogVisibilityBannerDropdownTriggerAvatarList

Avatar list within the visibility dropdown trigger showing selected users.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-dropdown-trigger-avatar-list annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown-trigger-avatar-list>
    ```

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

***

### VeltCommentDialogVisibilityBannerDropdownTriggerAvatarListItem

Individual avatar within the trigger avatar list.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-dropdown-trigger-avatar-list-item annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown-trigger-avatar-list-item>
    ```

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

***

### VeltCommentDialogVisibilityBannerDropdownTriggerAvatarListRemainingCount

Count of remaining avatars not displayed in the trigger list.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-dropdown-trigger-avatar-list-remaining-count annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown-trigger-avatar-list-remaining-count>
    ```

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

***

### VeltCommentDialogVisibilityBannerDropdownTriggerIcon

Icon within the visibility dropdown trigger.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-dropdown-trigger-icon annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown-trigger-icon>
    ```

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

***

### VeltCommentDialogVisibilityBannerDropdownContent

Content container for the visibility dropdown options.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-dropdown-content annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown-content>
    ```

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

***

### VeltCommentDialogVisibilityBannerDropdownContentItemIcon

Icon for a visibility option item in the dropdown.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-dropdown-content-item-icon annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown-content-item-icon>
    ```

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

***

### VeltCommentDialogVisibilityBannerDropdownContentItemLabel

Label for a visibility option item in the dropdown.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-dropdown-content-item-label annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown-content-item-label>
    ```

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

***

### VeltCommentDialogVisibilityBannerDropdownContentUserPicker

User picker for selecting specific users when visibility is set to `selected-people`.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-dropdown-content-user-picker annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown-content-user-picker>
    ```

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

***

### VeltCommentDialogVisibilityBannerDropdownContentOrgPicker

Team picker for scoping an `organizationPrivate` comment to specific teams (the "Selected Teams" picker); the team analogue of the user picker. It appears automatically in the comment dialog visibility banner once a team list is provided via `contactElement.updateOrgList()`.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-dropdown-content-org-picker annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown-content-org-picker>
    ```

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

***

### VeltCommentDialogVisibilityBannerDropdownContentUserPickerSearch

Search container within the user picker.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-dropdown-content-user-picker-search annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown-content-user-picker-search>
    ```

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

***

### VeltCommentDialogVisibilityBannerDropdownContentUserPickerSearchIcon

Search icon within the user picker search.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-dropdown-content-user-picker-search-icon annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown-content-user-picker-search-icon>
    ```

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

***

### VeltCommentDialogVisibilityBannerDropdownContentUserPickerSearchInput

Search input field within the user picker.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-dropdown-content-user-picker-search-input annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown-content-user-picker-search-input>
    ```

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

***

### VeltCommentDialogVisibilityBannerDropdownContentUserPickerHeader

Header section of the user picker.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-dropdown-content-user-picker-header annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown-content-user-picker-header>
    ```

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

***

### VeltCommentDialogVisibilityBannerDropdownContentUserPickerHeaderCount

Count of selected users displayed in the user picker header.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-dropdown-content-user-picker-header-count annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown-content-user-picker-header-count>
    ```

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

***

### VeltCommentDialogVisibilityBannerDropdownContentUserPickerHeaderUnselectAll

Button to unselect all users in the user picker.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-dropdown-content-user-picker-header-unselect-all annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown-content-user-picker-header-unselect-all>
    ```

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

***

### VeltCommentDialogVisibilityBannerDropdownContentUserPickerItem

Individual user item within the user picker.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-dropdown-content-user-picker-item annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown-content-user-picker-item>
    ```

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

***

### VeltCommentDialogVisibilityBannerDropdownContentUserPickerItemAvatar

Avatar for a user item in the user picker.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-dropdown-content-user-picker-item-avatar annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown-content-user-picker-item-avatar>
    ```

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

***

### VeltCommentDialogVisibilityBannerDropdownContentUserPickerItemInfo

Info text for a user item in the user picker.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-dropdown-content-user-picker-item-info annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown-content-user-picker-item-info>
    ```

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

***

### VeltCommentDialogVisibilityBannerDropdownContentUserPickerItemCheck

Check indicator for a selected user in the user picker.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-dropdown-content-user-picker-item-check annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown-content-user-picker-item-check>
    ```

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

***

### VeltCommentDialogSignIn

Sign-in prompt displayed to unauthenticated users.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-sign-in annotation-id="abc123"></velt-comment-dialog-sign-in>
    ```

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

***

### VeltCommentDialogNavigationButton

Button for navigating between comments.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-navigation-button annotation-id="abc123"></velt-comment-dialog-navigation-button>
    ```

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

***

### VeltCommentDialogAttachmentButton

Button for adding file attachments to a comment.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-attachment-button annotation-id="abc123"></velt-comment-dialog-attachment-button>
    ```

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

***

### VeltCommentDialogDeviceTypeIcons

Icons indicating the device type used when the comment was created.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-device-type-icons annotation-id="abc123"></velt-comment-dialog-device-type-icons>
    ```

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

***

### VeltCommentDialogCommentIndex

Display for the comment's index position.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-comment-index annotation-id="abc123"></velt-comment-dialog-comment-index>
    ```

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

***

### VeltCommentDialogCommentNumber

Display for the comment's number.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-comment-number annotation-id="abc123"></velt-comment-dialog-comment-number>
    ```

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

***

### VeltCommentDialogCommentCategory

Display for the comment's category.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-comment-category annotation-id="abc123"></velt-comment-dialog-comment-category>
    ```

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

***

### VeltCommentDialogMetadata

Display for comment metadata.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-metadata annotation-id="abc123"></velt-comment-dialog-metadata>
    ```

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

***

### VeltCommentDialogThreads

Container for the comment threads.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-threads annotation-id="abc123"></velt-comment-dialog-threads>
    ```

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

***

### VeltCommentDialogAllComment

View for displaying all comments.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-all-comment annotation-id="abc123"></velt-comment-dialog-all-comment>
    ```

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

***

### VeltCommentDialogApprove

Approve button for comment approval workflows.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-approve annotation-id="abc123"></velt-comment-dialog-approve>
    ```

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

***

### VeltCommentDialogUpgrade

Upgrade prompt component.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-upgrade annotation-id="abc123"></velt-comment-dialog-upgrade>
    ```

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

***

### VeltCommentDialogMoreReply

Indicator showing additional replies are available.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-more-reply annotation-id="abc123"></velt-comment-dialog-more-reply>
    ```

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

***

### VeltCommentDialogMoreReplyCount

Renders the hidden reply count (`annotation.comments.length - 2`, clamped to `0`) in the collapsed replies preview divider; shows when more than two comments exist.

In React wireframe mode this is also exposed as the named sub-property `VeltCommentDialogMoreReply.Count`.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-more-reply-count annotation-id="abc123"></velt-comment-dialog-more-reply-count>
    ```

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

***

### VeltCommentDialogMoreReplyText

Renders the pluralized noun in the collapsed replies preview divider (`reply` when one reply is hidden, otherwise `replies`).

In React wireframe mode this is also exposed as the named sub-property `VeltCommentDialogMoreReply.Text`.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-more-reply-text annotation-id="abc123"></velt-comment-dialog-more-reply-text>
    ```

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

***

### VeltCommentDialogHideReply

Button to hide replies in a thread.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-hide-reply annotation-id="abc123"></velt-comment-dialog-hide-reply>
    ```

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

***

### VeltCommentDialogToggleReply

Toggle control for showing or hiding replies.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-toggle-reply annotation-id="abc123"></velt-comment-dialog-toggle-reply>
    ```

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

***

### VeltCommentDialogToggleReplyShow

Show-replies variant of the reply toggle.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-toggle-reply-show annotation-id="abc123"></velt-comment-dialog-toggle-reply-show>
    ```

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

***

### VeltCommentDialogToggleReplyHide

Hide-replies variant of the reply toggle.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-toggle-reply-hide annotation-id="abc123"></velt-comment-dialog-toggle-reply-hide>
    ```

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

***

### VeltCommentDialogToggleReplyCount

Reply count displayed within the reply toggle.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-toggle-reply-count annotation-id="abc123"></velt-comment-dialog-toggle-reply-count>
    ```

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

***

### VeltCommentDialogCommentSuggestionStatus

Status indicator for a comment suggestion.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-comment-suggestion-status annotation-id="abc123"></velt-comment-dialog-comment-suggestion-status>
    ```

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

***

### VeltCommentDialogAssignDropdown

Dropdown for assigning a comment to a user.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-assign-dropdown annotation-id="abc123"></velt-comment-dialog-assign-dropdown>
    ```

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

***

### VeltCommentDialogAssignMenu

Menu for assignment options.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-assign-menu annotation-id="abc123"></velt-comment-dialog-assign-menu>
    ```

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

***

### VeltCommentDialogOptions

Options menu for the comment thread.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-options annotation-id="abc123"></velt-comment-dialog-options>
    ```

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

***

### VeltCommentDialogPriority

Priority selector for the comment.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-priority annotation-id="abc123"></velt-comment-dialog-priority>
    ```

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

***

### VeltCommentDialogStatus

Status selector for the comment.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-status annotation-id="abc123"></velt-comment-dialog-status>
    ```

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

***

### VeltCommentDialogSuggestionBanner

Container for the suggestion resolution banner shown after a suggestion is accepted or rejected.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-suggestion-banner annotation-id="abc123"></velt-comment-dialog-suggestion-banner>
    ```

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

***

### VeltCommentDialogSuggestionBannerAvatar

Avatar container within the suggestion resolution banner.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-suggestion-banner-avatar annotation-id="abc123"></velt-comment-dialog-suggestion-banner-avatar>
    ```

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

***

### VeltCommentDialogSuggestionBannerAvatarUserImage

User image within the banner avatar.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-suggestion-banner-avatar-user-image annotation-id="abc123"></velt-comment-dialog-suggestion-banner-avatar-user-image>
    ```

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

***

### VeltCommentDialogSuggestionBannerAvatarStatusIcon

Status icon within the banner avatar indicating accepted or rejected state.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-suggestion-banner-avatar-status-icon annotation-id="abc123"></velt-comment-dialog-suggestion-banner-avatar-status-icon>
    ```

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

***

### VeltCommentDialogSuggestionBannerLabel

Text label in the banner describing the resolution action (e.g. "Accepted" or "Rejected").

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-suggestion-banner-label annotation-id="abc123"></velt-comment-dialog-suggestion-banner-label>
    ```

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

***

### VeltCommentDialogSuggestionBannerSeparator

Visual separator between the label and the resolver user name in the banner.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-suggestion-banner-separator annotation-id="abc123"></velt-comment-dialog-suggestion-banner-separator>
    ```

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

***

### VeltCommentDialogSuggestionBannerResolverUserName

Display name of the user who resolved the suggestion.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-suggestion-banner-resolver-user-name annotation-id="abc123"></velt-comment-dialog-suggestion-banner-resolver-user-name>
    ```

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

***

### VeltCommentDialogSuggestionBannerTimestamp

Timestamp showing when the suggestion was resolved.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-suggestion-banner-timestamp annotation-id="abc123"></velt-comment-dialog-suggestion-banner-timestamp>
    ```

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

***

### VeltCommentDialogSuggestionHeaderTimestamp

Relative timestamp displayed in the suggestion header.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-suggestion-header-timestamp annotation-id="abc123"></velt-comment-dialog-suggestion-header-timestamp>
    ```

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

***

### VeltCommentDialogSuggestionHeaderMenu

Overflow menu (3-dot) in the suggestion header.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-suggestion-header-menu annotation-id="abc123"></velt-comment-dialog-suggestion-header-menu>
    ```

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

***

### VeltCommentDialogSuggestionHeaderMenuTrigger

Trigger button that opens the suggestion header overflow menu.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-suggestion-header-menu-trigger annotation-id="abc123"></velt-comment-dialog-suggestion-header-menu-trigger>
    ```

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

***

### VeltCommentDialogSuggestionHeaderMenuContent

Content container for the suggestion header overflow menu.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-suggestion-header-menu-content annotation-id="abc123"></velt-comment-dialog-suggestion-header-menu-content>
    ```

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

***

### VeltCommentDialogSuggestionHeaderMenuContentItem

Individual item within the suggestion header overflow menu.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-suggestion-header-menu-content-item annotation-id="abc123"></velt-comment-dialog-suggestion-header-menu-content-item>
    ```

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

***

### VeltCommentDialogSuggestionHeaderMenuContentItemIcon

Icon for an individual suggestion header menu item.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-suggestion-header-menu-content-item-icon annotation-id="abc123"></velt-comment-dialog-suggestion-header-menu-content-item-icon>
    ```

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

***

### VeltCommentDialogSuggestionHeaderMenuContentItemLabel

Label for an individual suggestion header menu item.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-suggestion-header-menu-content-item-label annotation-id="abc123"></velt-comment-dialog-suggestion-header-menu-content-item-label>
    ```

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

***

### VeltCommentDialogSuggestionBody

Body of the suggestion card, displaying the suggestion title and content.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-suggestion-body annotation-id="abc123"></velt-comment-dialog-suggestion-body>
    ```

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

***

### VeltCommentDialogSuggestionFooter

Footer container of the suggestion card.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-suggestion-footer annotation-id="abc123"></velt-comment-dialog-suggestion-footer>
    ```

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

***

### VeltCommentDialogSuggestionFooterOpenComment

"Open Comment" affordance in the suggestion footer that navigates to the full comment thread.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-suggestion-footer-open-comment annotation-id="abc123"></velt-comment-dialog-suggestion-footer-open-comment>
    ```

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

***

### VeltCommentDialogSuggestionActions

Accept/reject button group for the suggestion.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-suggestion-actions annotation-id="abc123"></velt-comment-dialog-suggestion-actions>
    ```

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

***

### VeltCommentDialogSuggestionActionAccept

Button to accept the suggestion.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-suggestion-action-accept annotation-id="abc123"></velt-comment-dialog-suggestion-action-accept>
    ```

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

***

### VeltCommentDialogSuggestionActionReject

Button to reject the suggestion.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-suggestion-action-reject annotation-id="abc123"></velt-comment-dialog-suggestion-action-reject>
    ```

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

***

### VeltCommentDialogAssigneeBannerResolveButton

Resolve button inside the assignee banner.

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-assignee-banner-resolve-button
      annotation-id="abc123">
    </velt-comment-dialog-assignee-banner-resolve-button>
    ```
  </Tab>
</Tabs>

***

### VeltCommentDialogAssigneeBannerUserAvatar

Avatar of the assigned user in the assignee banner.

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-assignee-banner-user-avatar
      annotation-id="abc123">
    </velt-comment-dialog-assignee-banner-user-avatar>
    ```
  </Tab>
</Tabs>

***

### VeltCommentDialogAssigneeBannerUserName

Name of the assigned user in the assignee banner.

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-assignee-banner-user-name
      annotation-id="abc123">
    </velt-comment-dialog-assignee-banner-user-name>
    ```
  </Tab>
</Tabs>

***

### VeltCommentDialogComposerAssignUser

Assign-user control in the composer.

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-composer-assign-user
      annotation-id="abc123">
    </velt-comment-dialog-composer-assign-user>
    ```
  </Tab>
</Tabs>

***

### VeltCommentDialogComposerAvatar

Current user's avatar in the composer.

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-composer-avatar
      annotation-id="abc123">
    </velt-comment-dialog-composer-avatar>
    ```
  </Tab>
</Tabs>

***

### VeltCommentDialogComposerPrivateBadge

Badge shown in the composer when the comment will be private.

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-composer-private-badge
      annotation-id="abc123">
    </velt-comment-dialog-composer-private-badge>
    ```
  </Tab>
</Tabs>

***

### VeltCommentDialogComposerRecordings

Recordings attached in the composer.

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-composer-recordings
      annotation-id="abc123">
    </velt-comment-dialog-composer-recordings>
    ```
  </Tab>
</Tabs>

***

### VeltCommentDialogComposerFormatToolbar

Rich-text formatting toolbar in the composer.

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

    **Props:**

    | Prop       | Type      | Required | Description                          |
    | ---------- | --------- | -------- | ------------------------------------ |
    | `editMode` | `boolean` | No       | Whether the composer is in edit mode |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-composer-format-toolbar
      annotation-id="abc123"
      edit-mode="true">
    </velt-comment-dialog-composer-format-toolbar>
    ```

    **Attributes:**

    | Attribute   | Type     | Required | Description                          |
    | ----------- | -------- | -------- | ------------------------------------ |
    | `edit-mode` | `string` | No       | Whether the composer is in edit mode |
  </Tab>
</Tabs>

***

### VeltCommentDialogComposerFormatToolbarButton

A single formatting button in the composer's toolbar. Set `type` to pick which one.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogComposerFormatToolbarButton
      annotationId="abc123"
      type="bold"
      editMode={true}
    />
    ```

    **Props:**

    | Prop       | Type                                                   | Required | Description                          |
    | ---------- | ------------------------------------------------------ | -------- | ------------------------------------ |
    | `type`     | `'bold' \| 'italic' \| 'underline' \| 'strikethrough'` | No       | Which variant to render              |
    | `editMode` | `boolean`                                              | No       | Whether the composer is in edit mode |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-composer-format-toolbar-button
      annotation-id="abc123"
      type="bold"
      edit-mode="true">
    </velt-comment-dialog-composer-format-toolbar-button>
    ```

    **Attributes:**

    | Attribute   | Type     | Required | Description                          |
    | ----------- | -------- | -------- | ------------------------------------ |
    | `type`      | `string` | No       | Which variant to render              |
    | `edit-mode` | `string` | No       | Whether the composer is in edit mode |
  </Tab>
</Tabs>

***

### VeltCommentDialogComposerAttachments

Container for the attachments staged in the composer.

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-composer-attachments
      annotation-id="abc123">
    </velt-comment-dialog-composer-attachments>
    ```
  </Tab>
</Tabs>

***

### VeltCommentDialogComposerAttachmentsSelected

The set of attachments currently selected in the composer.

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

    **Props:**

    | Prop         | Type      | Required | Description                                         |
    | ------------ | --------- | -------- | --------------------------------------------------- |
    | `files`      | `any[]`   | No       | The attachment objects                              |
    | `isEditMode` | `boolean` | No       | Whether the composer is editing an existing comment |
    | `loading`    | `boolean` | No       | Whether the attachment is still uploading           |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-composer-attachments-selected
      annotation-id="abc123"
      is-edit-mode="true"
      loading="true">
    </velt-comment-dialog-composer-attachments-selected>
    ```

    **Attributes:**

    | Attribute      | Type            | Required | Description                                         |
    | -------------- | --------------- | -------- | --------------------------------------------------- |
    | `files`        | `string (JSON)` | No       | The attachment objects                              |
    | `is-edit-mode` | `string`        | No       | Whether the composer is editing an existing comment |
    | `loading`      | `string`        | No       | Whether the attachment is still uploading           |
  </Tab>
</Tabs>

***

### VeltCommentDialogComposerAttachmentsImage

An image attachment staged in the composer.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogComposerAttachmentsImage
      annotationId="abc123"
      fileIndex={0}
      isEditMode={true}
      loading={true}
    />
    ```

    **Props:**

    | Prop         | Type               | Required | Description                                         |
    | ------------ | ------------------ | -------- | --------------------------------------------------- |
    | `file`       | `any`              | No       | The attachment object                               |
    | `fileIndex`  | `number \| string` | No       | Index of the attachment                             |
    | `isEditMode` | `boolean`          | No       | Whether the composer is editing an existing comment |
    | `loading`    | `boolean`          | No       | Whether the attachment is still uploading           |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-composer-attachments-image
      annotation-id="abc123"
      file-index="0"
      is-edit-mode="true"
      loading="true">
    </velt-comment-dialog-composer-attachments-image>
    ```

    **Attributes:**

    | Attribute      | Type            | Required | Description                                         |
    | -------------- | --------------- | -------- | --------------------------------------------------- |
    | `file`         | `string (JSON)` | No       | The attachment object                               |
    | `file-index`   | `string`        | No       | Index of the attachment                             |
    | `is-edit-mode` | `string`        | No       | Whether the composer is editing an existing comment |
    | `loading`      | `string`        | No       | Whether the attachment is still uploading           |
  </Tab>
</Tabs>

***

### VeltCommentDialogComposerAttachmentsImagePreview

Preview thumbnail of a staged image attachment.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogComposerAttachmentsImagePreview
      annotationId="abc123"
      fileIndex={0}
      isEditMode={true}
    />
    ```

    **Props:**

    | Prop         | Type               | Required | Description                                         |
    | ------------ | ------------------ | -------- | --------------------------------------------------- |
    | `file`       | `any`              | No       | The attachment object                               |
    | `fileIndex`  | `number \| string` | No       | Index of the attachment                             |
    | `isEditMode` | `boolean`          | No       | Whether the composer is editing an existing comment |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-composer-attachments-image-preview
      annotation-id="abc123"
      file-index="0"
      is-edit-mode="true">
    </velt-comment-dialog-composer-attachments-image-preview>
    ```

    **Attributes:**

    | Attribute      | Type            | Required | Description                                         |
    | -------------- | --------------- | -------- | --------------------------------------------------- |
    | `file`         | `string (JSON)` | No       | The attachment object                               |
    | `file-index`   | `string`        | No       | Index of the attachment                             |
    | `is-edit-mode` | `string`        | No       | Whether the composer is editing an existing comment |
  </Tab>
</Tabs>

***

### VeltCommentDialogComposerAttachmentsImageDelete

Delete control on a staged image attachment.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogComposerAttachmentsImageDelete
      annotationId="abc123"
      fileIndex={0}
      isEditMode={true}
      loading={true}
    />
    ```

    **Props:**

    | Prop         | Type               | Required | Description                                         |
    | ------------ | ------------------ | -------- | --------------------------------------------------- |
    | `file`       | `any`              | No       | The attachment object                               |
    | `fileIndex`  | `number \| string` | No       | Index of the attachment                             |
    | `isEditMode` | `boolean`          | No       | Whether the composer is editing an existing comment |
    | `loading`    | `boolean`          | No       | Whether the attachment is still uploading           |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-composer-attachments-image-delete
      annotation-id="abc123"
      file-index="0"
      is-edit-mode="true"
      loading="true">
    </velt-comment-dialog-composer-attachments-image-delete>
    ```

    **Attributes:**

    | Attribute      | Type            | Required | Description                                         |
    | -------------- | --------------- | -------- | --------------------------------------------------- |
    | `file`         | `string (JSON)` | No       | The attachment object                               |
    | `file-index`   | `string`        | No       | Index of the attachment                             |
    | `is-edit-mode` | `string`        | No       | Whether the composer is editing an existing comment |
    | `loading`      | `string`        | No       | Whether the attachment is still uploading           |
  </Tab>
</Tabs>

***

### VeltCommentDialogComposerAttachmentsImageLoading

Loading indicator shown while a staged image uploads.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogComposerAttachmentsImageLoading
      annotationId="abc123"
      fileIndex={0}
      isEditMode={true}
      loading={true}
    />
    ```

    **Props:**

    | Prop         | Type               | Required | Description                                         |
    | ------------ | ------------------ | -------- | --------------------------------------------------- |
    | `file`       | `any`              | No       | The attachment object                               |
    | `fileIndex`  | `number \| string` | No       | Index of the attachment                             |
    | `isEditMode` | `boolean`          | No       | Whether the composer is editing an existing comment |
    | `loading`    | `boolean`          | No       | Whether the attachment is still uploading           |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-composer-attachments-image-loading
      annotation-id="abc123"
      file-index="0"
      is-edit-mode="true"
      loading="true">
    </velt-comment-dialog-composer-attachments-image-loading>
    ```

    **Attributes:**

    | Attribute      | Type            | Required | Description                                         |
    | -------------- | --------------- | -------- | --------------------------------------------------- |
    | `file`         | `string (JSON)` | No       | The attachment object                               |
    | `file-index`   | `string`        | No       | Index of the attachment                             |
    | `is-edit-mode` | `string`        | No       | Whether the composer is editing an existing comment |
    | `loading`      | `string`        | No       | Whether the attachment is still uploading           |
  </Tab>
</Tabs>

***

### VeltCommentDialogComposerAttachmentsOther

A non-image attachment staged in the composer.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogComposerAttachmentsOther
      annotationId="abc123"
      fileIndex={0}
      isEditMode={true}
      loading={true}
    />
    ```

    **Props:**

    | Prop         | Type               | Required | Description                                         |
    | ------------ | ------------------ | -------- | --------------------------------------------------- |
    | `file`       | `any`              | No       | The attachment object                               |
    | `fileIndex`  | `number \| string` | No       | Index of the attachment                             |
    | `isEditMode` | `boolean`          | No       | Whether the composer is editing an existing comment |
    | `loading`    | `boolean`          | No       | Whether the attachment is still uploading           |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-composer-attachments-other
      annotation-id="abc123"
      file-index="0"
      is-edit-mode="true"
      loading="true">
    </velt-comment-dialog-composer-attachments-other>
    ```

    **Attributes:**

    | Attribute      | Type            | Required | Description                                         |
    | -------------- | --------------- | -------- | --------------------------------------------------- |
    | `file`         | `string (JSON)` | No       | The attachment object                               |
    | `file-index`   | `string`        | No       | Index of the attachment                             |
    | `is-edit-mode` | `string`        | No       | Whether the composer is editing an existing comment |
    | `loading`      | `string`        | No       | Whether the attachment is still uploading           |
  </Tab>
</Tabs>

***

### VeltCommentDialogComposerAttachmentsOtherIcon

File-type icon for a staged non-image attachment.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogComposerAttachmentsOtherIcon
      annotationId="abc123"
      fileIndex={0}
      isEditMode={true}
    />
    ```

    **Props:**

    | Prop         | Type               | Required | Description                                         |
    | ------------ | ------------------ | -------- | --------------------------------------------------- |
    | `file`       | `any`              | No       | The attachment object                               |
    | `fileIndex`  | `number \| string` | No       | Index of the attachment                             |
    | `isEditMode` | `boolean`          | No       | Whether the composer is editing an existing comment |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-composer-attachments-other-icon
      annotation-id="abc123"
      file-index="0"
      is-edit-mode="true">
    </velt-comment-dialog-composer-attachments-other-icon>
    ```

    **Attributes:**

    | Attribute      | Type            | Required | Description                                         |
    | -------------- | --------------- | -------- | --------------------------------------------------- |
    | `file`         | `string (JSON)` | No       | The attachment object                               |
    | `file-index`   | `string`        | No       | Index of the attachment                             |
    | `is-edit-mode` | `string`        | No       | Whether the composer is editing an existing comment |
  </Tab>
</Tabs>

***

### VeltCommentDialogComposerAttachmentsOtherName

File name of a staged non-image attachment.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogComposerAttachmentsOtherName
      annotationId="abc123"
      fileIndex={0}
      isEditMode={true}
    />
    ```

    **Props:**

    | Prop         | Type               | Required | Description                                         |
    | ------------ | ------------------ | -------- | --------------------------------------------------- |
    | `file`       | `any`              | No       | The attachment object                               |
    | `fileIndex`  | `number \| string` | No       | Index of the attachment                             |
    | `isEditMode` | `boolean`          | No       | Whether the composer is editing an existing comment |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-composer-attachments-other-name
      annotation-id="abc123"
      file-index="0"
      is-edit-mode="true">
    </velt-comment-dialog-composer-attachments-other-name>
    ```

    **Attributes:**

    | Attribute      | Type            | Required | Description                                         |
    | -------------- | --------------- | -------- | --------------------------------------------------- |
    | `file`         | `string (JSON)` | No       | The attachment object                               |
    | `file-index`   | `string`        | No       | Index of the attachment                             |
    | `is-edit-mode` | `string`        | No       | Whether the composer is editing an existing comment |
  </Tab>
</Tabs>

***

### VeltCommentDialogComposerAttachmentsOtherSize

File size of a staged non-image attachment.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogComposerAttachmentsOtherSize
      annotationId="abc123"
      fileIndex={0}
      isEditMode={true}
    />
    ```

    **Props:**

    | Prop         | Type               | Required | Description                                         |
    | ------------ | ------------------ | -------- | --------------------------------------------------- |
    | `file`       | `any`              | No       | The attachment object                               |
    | `fileIndex`  | `number \| string` | No       | Index of the attachment                             |
    | `isEditMode` | `boolean`          | No       | Whether the composer is editing an existing comment |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-composer-attachments-other-size
      annotation-id="abc123"
      file-index="0"
      is-edit-mode="true">
    </velt-comment-dialog-composer-attachments-other-size>
    ```

    **Attributes:**

    | Attribute      | Type            | Required | Description                                         |
    | -------------- | --------------- | -------- | --------------------------------------------------- |
    | `file`         | `string (JSON)` | No       | The attachment object                               |
    | `file-index`   | `string`        | No       | Index of the attachment                             |
    | `is-edit-mode` | `string`        | No       | Whether the composer is editing an existing comment |
  </Tab>
</Tabs>

***

### VeltCommentDialogComposerAttachmentsOtherDelete

Delete control on a staged non-image attachment.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogComposerAttachmentsOtherDelete
      annotationId="abc123"
      fileIndex={0}
      isEditMode={true}
      loading={true}
    />
    ```

    **Props:**

    | Prop         | Type               | Required | Description                                         |
    | ------------ | ------------------ | -------- | --------------------------------------------------- |
    | `file`       | `any`              | No       | The attachment object                               |
    | `fileIndex`  | `number \| string` | No       | Index of the attachment                             |
    | `isEditMode` | `boolean`          | No       | Whether the composer is editing an existing comment |
    | `loading`    | `boolean`          | No       | Whether the attachment is still uploading           |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-composer-attachments-other-delete
      annotation-id="abc123"
      file-index="0"
      is-edit-mode="true"
      loading="true">
    </velt-comment-dialog-composer-attachments-other-delete>
    ```

    **Attributes:**

    | Attribute      | Type            | Required | Description                                         |
    | -------------- | --------------- | -------- | --------------------------------------------------- |
    | `file`         | `string (JSON)` | No       | The attachment object                               |
    | `file-index`   | `string`        | No       | Index of the attachment                             |
    | `is-edit-mode` | `string`        | No       | Whether the composer is editing an existing comment |
    | `loading`      | `string`        | No       | Whether the attachment is still uploading           |
  </Tab>
</Tabs>

***

### VeltCommentDialogComposerAttachmentsOtherLoading

Loading indicator shown while a staged non-image attachment uploads.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogComposerAttachmentsOtherLoading
      annotationId="abc123"
      fileIndex={0}
      isEditMode={true}
      loading={true}
    />
    ```

    **Props:**

    | Prop         | Type               | Required | Description                                         |
    | ------------ | ------------------ | -------- | --------------------------------------------------- |
    | `file`       | `any`              | No       | The attachment object                               |
    | `fileIndex`  | `number \| string` | No       | Index of the attachment                             |
    | `isEditMode` | `boolean`          | No       | Whether the composer is editing an existing comment |
    | `loading`    | `boolean`          | No       | Whether the attachment is still uploading           |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-composer-attachments-other-loading
      annotation-id="abc123"
      file-index="0"
      is-edit-mode="true"
      loading="true">
    </velt-comment-dialog-composer-attachments-other-loading>
    ```

    **Attributes:**

    | Attribute      | Type            | Required | Description                                         |
    | -------------- | --------------- | -------- | --------------------------------------------------- |
    | `file`         | `string (JSON)` | No       | The attachment object                               |
    | `file-index`   | `string`        | No       | Index of the attachment                             |
    | `is-edit-mode` | `string`        | No       | Whether the composer is editing an existing comment |
    | `loading`      | `string`        | No       | Whether the attachment is still uploading           |
  </Tab>
</Tabs>

***

### VeltCommentDialogComposerAttachmentsInvalid

Container for attachments the composer rejected.

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

    **Props:**

    | Prop    | Type    | Required | Description            |
    | ------- | ------- | -------- | ---------------------- |
    | `files` | `any[]` | No       | The attachment objects |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-composer-attachments-invalid
      annotation-id="abc123">
    </velt-comment-dialog-composer-attachments-invalid>
    ```

    **Attributes:**

    | Attribute | Type            | Required | Description            |
    | --------- | --------------- | -------- | ---------------------- |
    | `files`   | `string (JSON)` | No       | The attachment objects |
  </Tab>
</Tabs>

***

### VeltCommentDialogComposerAttachmentsInvalidItem

A single rejected attachment.

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

    **Props:**

    | Prop        | Type               | Required | Description             |
    | ----------- | ------------------ | -------- | ----------------------- |
    | `file`      | `any`              | No       | The attachment object   |
    | `fileIndex` | `number \| string` | No       | Index of the attachment |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-composer-attachments-invalid-item
      annotation-id="abc123"
      file-index="0">
    </velt-comment-dialog-composer-attachments-invalid-item>
    ```

    **Attributes:**

    | Attribute    | Type            | Required | Description             |
    | ------------ | --------------- | -------- | ----------------------- |
    | `file`       | `string (JSON)` | No       | The attachment object   |
    | `file-index` | `string`        | No       | Index of the attachment |
  </Tab>
</Tabs>

***

### VeltCommentDialogComposerAttachmentsInvalidItemPreview

Preview of a rejected attachment.

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

    **Props:**

    | Prop        | Type               | Required | Description             |
    | ----------- | ------------------ | -------- | ----------------------- |
    | `file`      | `any`              | No       | The attachment object   |
    | `fileIndex` | `number \| string` | No       | Index of the attachment |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-composer-attachments-invalid-item-preview
      annotation-id="abc123"
      file-index="0">
    </velt-comment-dialog-composer-attachments-invalid-item-preview>
    ```

    **Attributes:**

    | Attribute    | Type            | Required | Description             |
    | ------------ | --------------- | -------- | ----------------------- |
    | `file`       | `string (JSON)` | No       | The attachment object   |
    | `file-index` | `string`        | No       | Index of the attachment |
  </Tab>
</Tabs>

***

### VeltCommentDialogComposerAttachmentsInvalidItemMessage

Message explaining why an attachment was rejected.

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

    **Props:**

    | Prop        | Type               | Required | Description             |
    | ----------- | ------------------ | -------- | ----------------------- |
    | `file`      | `any`              | No       | The attachment object   |
    | `fileIndex` | `number \| string` | No       | Index of the attachment |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-composer-attachments-invalid-item-message
      annotation-id="abc123"
      file-index="0">
    </velt-comment-dialog-composer-attachments-invalid-item-message>
    ```

    **Attributes:**

    | Attribute    | Type            | Required | Description             |
    | ------------ | --------------- | -------- | ----------------------- |
    | `file`       | `string (JSON)` | No       | The attachment object   |
    | `file-index` | `string`        | No       | Index of the attachment |
  </Tab>
</Tabs>

***

### VeltCommentDialogComposerAttachmentsInvalidItemDelete

Delete control on a rejected attachment.

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

    **Props:**

    | Prop        | Type               | Required | Description             |
    | ----------- | ------------------ | -------- | ----------------------- |
    | `file`      | `any`              | No       | The attachment object   |
    | `fileIndex` | `number \| string` | No       | Index of the attachment |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-composer-attachments-invalid-item-delete
      annotation-id="abc123"
      file-index="0">
    </velt-comment-dialog-composer-attachments-invalid-item-delete>
    ```

    **Attributes:**

    | Attribute    | Type            | Required | Description             |
    | ------------ | --------------- | -------- | ----------------------- |
    | `file`       | `string (JSON)` | No       | The attachment object   |
    | `file-index` | `string`        | No       | Index of the attachment |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardAttachments

Container for the attachments on a posted comment.

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

    **Props:**

    | Prop           | Type               | Required | Description               |
    | -------------- | ------------------ | -------- | ------------------------- |
    | `commentObj`   | `any \| string`    | No       | Direct comment object     |
    | `commentId`    | `number \| string` | No       | Comment ID for lookup     |
    | `commentIndex` | `number \| string` | No       | Index of comment in array |
    | `attachmentId` | `string`           | No       | ID of the attachment      |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-attachments
      annotation-id="abc123"
      comment-id="0"
      comment-index="0">
    </velt-comment-dialog-thread-card-attachments>
    ```

    **Attributes:**

    | Attribute       | Type            | Required | Description               |
    | --------------- | --------------- | -------- | ------------------------- |
    | `comment-obj`   | `string (JSON)` | No       | Direct comment object     |
    | `comment-id`    | `string`        | No       | Comment ID for lookup     |
    | `comment-index` | `string`        | No       | Index of comment in array |
    | `attachment-id` | `string`        | No       | ID of the attachment      |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardAttachmentsImage

An image attachment on a posted comment.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogThreadCardAttachmentsImage
      annotationId="abc123"
      commentId={0}
      commentIndex={0}
      attachmentIndex={0}
    />
    ```

    **Props:**

    | Prop              | Type               | Required | Description                            |
    | ----------------- | ------------------ | -------- | -------------------------------------- |
    | `attachment`      | `any \| string`    | No       | The attachment object                  |
    | `commentObj`      | `any \| string`    | No       | Direct comment object                  |
    | `commentId`       | `number \| string` | No       | Comment ID for lookup                  |
    | `commentIndex`    | `number \| string` | No       | Index of comment in array              |
    | `attachmentIndex` | `number \| string` | No       | Index of the attachment in the comment |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-attachments-image
      annotation-id="abc123"
      comment-id="0"
      comment-index="0"
      attachment-index="0">
    </velt-comment-dialog-thread-card-attachments-image>
    ```

    **Attributes:**

    | Attribute          | Type            | Required | Description                            |
    | ------------------ | --------------- | -------- | -------------------------------------- |
    | `attachment`       | `string (JSON)` | No       | The attachment object                  |
    | `comment-obj`      | `string (JSON)` | No       | Direct comment object                  |
    | `comment-id`       | `string`        | No       | Comment ID for lookup                  |
    | `comment-index`    | `string`        | No       | Index of comment in array              |
    | `attachment-index` | `string`        | No       | Index of the attachment in the comment |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardAttachmentsImagePreview

Preview thumbnail of an image attachment on a posted comment.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogThreadCardAttachmentsImagePreview
      annotationId="abc123"
      commentId={0}
      commentIndex={0}
      attachmentIndex={0}
    />
    ```

    **Props:**

    | Prop              | Type               | Required | Description                            |
    | ----------------- | ------------------ | -------- | -------------------------------------- |
    | `attachment`      | `any \| string`    | No       | The attachment object                  |
    | `commentObj`      | `any \| string`    | No       | Direct comment object                  |
    | `commentId`       | `number \| string` | No       | Comment ID for lookup                  |
    | `commentIndex`    | `number \| string` | No       | Index of comment in array              |
    | `attachmentIndex` | `number \| string` | No       | Index of the attachment in the comment |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-attachments-image-preview
      annotation-id="abc123"
      comment-id="0"
      comment-index="0"
      attachment-index="0">
    </velt-comment-dialog-thread-card-attachments-image-preview>
    ```

    **Attributes:**

    | Attribute          | Type            | Required | Description                            |
    | ------------------ | --------------- | -------- | -------------------------------------- |
    | `attachment`       | `string (JSON)` | No       | The attachment object                  |
    | `comment-obj`      | `string (JSON)` | No       | Direct comment object                  |
    | `comment-id`       | `string`        | No       | Comment ID for lookup                  |
    | `comment-index`    | `string`        | No       | Index of comment in array              |
    | `attachment-index` | `string`        | No       | Index of the attachment in the comment |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardAttachmentsImageDelete

Delete control on an image attachment of a posted comment.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogThreadCardAttachmentsImageDelete
      annotationId="abc123"
      commentId={0}
      commentIndex={0}
      attachmentIndex={0}
    />
    ```

    **Props:**

    | Prop              | Type               | Required | Description                            |
    | ----------------- | ------------------ | -------- | -------------------------------------- |
    | `attachment`      | `any \| string`    | No       | The attachment object                  |
    | `commentObj`      | `any \| string`    | No       | Direct comment object                  |
    | `commentId`       | `number \| string` | No       | Comment ID for lookup                  |
    | `commentIndex`    | `number \| string` | No       | Index of comment in array              |
    | `attachmentIndex` | `number \| string` | No       | Index of the attachment in the comment |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-attachments-image-delete
      annotation-id="abc123"
      comment-id="0"
      comment-index="0"
      attachment-index="0">
    </velt-comment-dialog-thread-card-attachments-image-delete>
    ```

    **Attributes:**

    | Attribute          | Type            | Required | Description                            |
    | ------------------ | --------------- | -------- | -------------------------------------- |
    | `attachment`       | `string (JSON)` | No       | The attachment object                  |
    | `comment-obj`      | `string (JSON)` | No       | Direct comment object                  |
    | `comment-id`       | `string`        | No       | Comment ID for lookup                  |
    | `comment-index`    | `string`        | No       | Index of comment in array              |
    | `attachment-index` | `string`        | No       | Index of the attachment in the comment |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardAttachmentsImageDownload

Download control on an image attachment of a posted comment.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogThreadCardAttachmentsImageDownload
      annotationId="abc123"
      commentId={0}
      commentIndex={0}
      attachmentIndex={0}
    />
    ```

    **Props:**

    | Prop              | Type               | Required | Description                            |
    | ----------------- | ------------------ | -------- | -------------------------------------- |
    | `attachment`      | `any \| string`    | No       | The attachment object                  |
    | `commentObj`      | `any \| string`    | No       | Direct comment object                  |
    | `commentId`       | `number \| string` | No       | Comment ID for lookup                  |
    | `commentIndex`    | `number \| string` | No       | Index of comment in array              |
    | `attachmentIndex` | `number \| string` | No       | Index of the attachment in the comment |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-attachments-image-download
      annotation-id="abc123"
      comment-id="0"
      comment-index="0"
      attachment-index="0">
    </velt-comment-dialog-thread-card-attachments-image-download>
    ```

    **Attributes:**

    | Attribute          | Type            | Required | Description                            |
    | ------------------ | --------------- | -------- | -------------------------------------- |
    | `attachment`       | `string (JSON)` | No       | The attachment object                  |
    | `comment-obj`      | `string (JSON)` | No       | Direct comment object                  |
    | `comment-id`       | `string`        | No       | Comment ID for lookup                  |
    | `comment-index`    | `string`        | No       | Index of comment in array              |
    | `attachment-index` | `string`        | No       | Index of the attachment in the comment |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardAttachmentsOther

A non-image attachment on a posted comment.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogThreadCardAttachmentsOther
      annotationId="abc123"
      commentId={0}
      commentIndex={0}
      attachmentIndex={0}
    />
    ```

    **Props:**

    | Prop              | Type               | Required | Description                            |
    | ----------------- | ------------------ | -------- | -------------------------------------- |
    | `attachment`      | `any \| string`    | No       | The attachment object                  |
    | `commentObj`      | `any \| string`    | No       | Direct comment object                  |
    | `commentId`       | `number \| string` | No       | Comment ID for lookup                  |
    | `commentIndex`    | `number \| string` | No       | Index of comment in array              |
    | `attachmentIndex` | `number \| string` | No       | Index of the attachment in the comment |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-attachments-other
      annotation-id="abc123"
      comment-id="0"
      comment-index="0"
      attachment-index="0">
    </velt-comment-dialog-thread-card-attachments-other>
    ```

    **Attributes:**

    | Attribute          | Type            | Required | Description                            |
    | ------------------ | --------------- | -------- | -------------------------------------- |
    | `attachment`       | `string (JSON)` | No       | The attachment object                  |
    | `comment-obj`      | `string (JSON)` | No       | Direct comment object                  |
    | `comment-id`       | `string`        | No       | Comment ID for lookup                  |
    | `comment-index`    | `string`        | No       | Index of comment in array              |
    | `attachment-index` | `string`        | No       | Index of the attachment in the comment |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardAttachmentsOtherIcon

File-type icon for a non-image attachment on a posted comment.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogThreadCardAttachmentsOtherIcon
      annotationId="abc123"
      commentId={0}
      commentIndex={0}
      attachmentIndex={0}
    />
    ```

    **Props:**

    | Prop              | Type               | Required | Description                            |
    | ----------------- | ------------------ | -------- | -------------------------------------- |
    | `attachment`      | `any \| string`    | No       | The attachment object                  |
    | `commentObj`      | `any \| string`    | No       | Direct comment object                  |
    | `commentId`       | `number \| string` | No       | Comment ID for lookup                  |
    | `commentIndex`    | `number \| string` | No       | Index of comment in array              |
    | `attachmentIndex` | `number \| string` | No       | Index of the attachment in the comment |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-attachments-other-icon
      annotation-id="abc123"
      comment-id="0"
      comment-index="0"
      attachment-index="0">
    </velt-comment-dialog-thread-card-attachments-other-icon>
    ```

    **Attributes:**

    | Attribute          | Type            | Required | Description                            |
    | ------------------ | --------------- | -------- | -------------------------------------- |
    | `attachment`       | `string (JSON)` | No       | The attachment object                  |
    | `comment-obj`      | `string (JSON)` | No       | Direct comment object                  |
    | `comment-id`       | `string`        | No       | Comment ID for lookup                  |
    | `comment-index`    | `string`        | No       | Index of comment in array              |
    | `attachment-index` | `string`        | No       | Index of the attachment in the comment |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardAttachmentsOtherName

File name of a non-image attachment on a posted comment.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogThreadCardAttachmentsOtherName
      annotationId="abc123"
      commentId={0}
      commentIndex={0}
      attachmentIndex={0}
    />
    ```

    **Props:**

    | Prop              | Type               | Required | Description                            |
    | ----------------- | ------------------ | -------- | -------------------------------------- |
    | `attachment`      | `any \| string`    | No       | The attachment object                  |
    | `commentObj`      | `any \| string`    | No       | Direct comment object                  |
    | `commentId`       | `number \| string` | No       | Comment ID for lookup                  |
    | `commentIndex`    | `number \| string` | No       | Index of comment in array              |
    | `attachmentIndex` | `number \| string` | No       | Index of the attachment in the comment |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-attachments-other-name
      annotation-id="abc123"
      comment-id="0"
      comment-index="0"
      attachment-index="0">
    </velt-comment-dialog-thread-card-attachments-other-name>
    ```

    **Attributes:**

    | Attribute          | Type            | Required | Description                            |
    | ------------------ | --------------- | -------- | -------------------------------------- |
    | `attachment`       | `string (JSON)` | No       | The attachment object                  |
    | `comment-obj`      | `string (JSON)` | No       | Direct comment object                  |
    | `comment-id`       | `string`        | No       | Comment ID for lookup                  |
    | `comment-index`    | `string`        | No       | Index of comment in array              |
    | `attachment-index` | `string`        | No       | Index of the attachment in the comment |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardAttachmentsOtherSize

File size of a non-image attachment on a posted comment.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogThreadCardAttachmentsOtherSize
      annotationId="abc123"
      commentId={0}
      commentIndex={0}
      attachmentIndex={0}
    />
    ```

    **Props:**

    | Prop              | Type               | Required | Description                            |
    | ----------------- | ------------------ | -------- | -------------------------------------- |
    | `attachment`      | `any \| string`    | No       | The attachment object                  |
    | `commentObj`      | `any \| string`    | No       | Direct comment object                  |
    | `commentId`       | `number \| string` | No       | Comment ID for lookup                  |
    | `commentIndex`    | `number \| string` | No       | Index of comment in array              |
    | `attachmentIndex` | `number \| string` | No       | Index of the attachment in the comment |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-attachments-other-size
      annotation-id="abc123"
      comment-id="0"
      comment-index="0"
      attachment-index="0">
    </velt-comment-dialog-thread-card-attachments-other-size>
    ```

    **Attributes:**

    | Attribute          | Type            | Required | Description                            |
    | ------------------ | --------------- | -------- | -------------------------------------- |
    | `attachment`       | `string (JSON)` | No       | The attachment object                  |
    | `comment-obj`      | `string (JSON)` | No       | Direct comment object                  |
    | `comment-id`       | `string`        | No       | Comment ID for lookup                  |
    | `comment-index`    | `string`        | No       | Index of comment in array              |
    | `attachment-index` | `string`        | No       | Index of the attachment in the comment |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardAttachmentsOtherDelete

Delete control on a non-image attachment of a posted comment.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogThreadCardAttachmentsOtherDelete
      annotationId="abc123"
      commentId={0}
      commentIndex={0}
      attachmentIndex={0}
    />
    ```

    **Props:**

    | Prop              | Type               | Required | Description                            |
    | ----------------- | ------------------ | -------- | -------------------------------------- |
    | `attachment`      | `any \| string`    | No       | The attachment object                  |
    | `commentObj`      | `any \| string`    | No       | Direct comment object                  |
    | `commentId`       | `number \| string` | No       | Comment ID for lookup                  |
    | `commentIndex`    | `number \| string` | No       | Index of comment in array              |
    | `attachmentIndex` | `number \| string` | No       | Index of the attachment in the comment |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-attachments-other-delete
      annotation-id="abc123"
      comment-id="0"
      comment-index="0"
      attachment-index="0">
    </velt-comment-dialog-thread-card-attachments-other-delete>
    ```

    **Attributes:**

    | Attribute          | Type            | Required | Description                            |
    | ------------------ | --------------- | -------- | -------------------------------------- |
    | `attachment`       | `string (JSON)` | No       | The attachment object                  |
    | `comment-obj`      | `string (JSON)` | No       | Direct comment object                  |
    | `comment-id`       | `string`        | No       | Comment ID for lookup                  |
    | `comment-index`    | `string`        | No       | Index of comment in array              |
    | `attachment-index` | `string`        | No       | Index of the attachment in the comment |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardAttachmentsOtherDownload

Download control on a non-image attachment of a posted comment.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogThreadCardAttachmentsOtherDownload
      annotationId="abc123"
      commentId={0}
      commentIndex={0}
      attachmentIndex={0}
    />
    ```

    **Props:**

    | Prop              | Type               | Required | Description                            |
    | ----------------- | ------------------ | -------- | -------------------------------------- |
    | `attachment`      | `any \| string`    | No       | The attachment object                  |
    | `commentObj`      | `any \| string`    | No       | Direct comment object                  |
    | `commentId`       | `number \| string` | No       | Comment ID for lookup                  |
    | `commentIndex`    | `number \| string` | No       | Index of comment in array              |
    | `attachmentIndex` | `number \| string` | No       | Index of the attachment in the comment |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-attachments-other-download
      annotation-id="abc123"
      comment-id="0"
      comment-index="0"
      attachment-index="0">
    </velt-comment-dialog-thread-card-attachments-other-download>
    ```

    **Attributes:**

    | Attribute          | Type            | Required | Description                            |
    | ------------------ | --------------- | -------- | -------------------------------------- |
    | `attachment`       | `string (JSON)` | No       | The attachment object                  |
    | `comment-obj`      | `string (JSON)` | No       | Direct comment object                  |
    | `comment-id`       | `string`        | No       | Comment ID for lookup                  |
    | `comment-index`    | `string`        | No       | Index of comment in array              |
    | `attachment-index` | `string`        | No       | Index of the attachment in the comment |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardSeenDropdown

Dropdown listing the users who have seen the comment.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogThreadCardSeenDropdown
      annotationId="abc123"
      commentId={0}
      commentIndex={0}
      enableSeenByUsers={true}
    />
    ```

    **Props:**

    | Prop                | Type                | Required | Description                            |
    | ------------------- | ------------------- | -------- | -------------------------------------- |
    | `commentObj`        | `any \| string`     | No       | Direct comment object                  |
    | `commentId`         | `number \| string`  | No       | Comment ID for lookup                  |
    | `commentIndex`      | `number \| string`  | No       | Index of comment in array              |
    | `enableSeenByUsers` | `boolean \| string` | No       | Whether seen-by tracking is on         |
    | `isDraft`           | `boolean \| string` | No       | Whether the comment is an unsent draft |
    | `viewCount`         | `number \| string`  | No       | Number of views                        |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-seen-dropdown
      annotation-id="abc123"
      comment-id="0"
      comment-index="0"
      enable-seen-by-users="true">
    </velt-comment-dialog-thread-card-seen-dropdown>
    ```

    **Attributes:**

    | Attribute              | Type            | Required | Description                            |
    | ---------------------- | --------------- | -------- | -------------------------------------- |
    | `comment-obj`          | `string (JSON)` | No       | Direct comment object                  |
    | `comment-id`           | `string`        | No       | Comment ID for lookup                  |
    | `comment-index`        | `string`        | No       | Index of comment in array              |
    | `enable-seen-by-users` | `string`        | No       | Whether seen-by tracking is on         |
    | `is-draft`             | `string`        | No       | Whether the comment is an unsent draft |
    | `view-count`           | `string`        | No       | Number of views                        |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardSeenDropdownTrigger

Trigger that opens the seen-by dropdown.

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

    **Props:**

    | Prop             | Type            | Required | Description                  |
    | ---------------- | --------------- | -------- | ---------------------------- |
    | `commentObj`     | `any \| string` | No       | Direct comment object        |
    | `isDropdownOpen` | `boolean`       | No       | Whether the dropdown is open |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-seen-dropdown-trigger
      annotation-id="abc123"
      is-dropdown-open="true">
    </velt-comment-dialog-thread-card-seen-dropdown-trigger>
    ```

    **Attributes:**

    | Attribute          | Type            | Required | Description                  |
    | ------------------ | --------------- | -------- | ---------------------------- |
    | `comment-obj`      | `string (JSON)` | No       | Direct comment object        |
    | `is-dropdown-open` | `string`        | No       | Whether the dropdown is open |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardSeenDropdownContent

Content panel of the seen-by dropdown.

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

    **Props:**

    | Prop         | Type            | Required | Description           |
    | ------------ | --------------- | -------- | --------------------- |
    | `commentObj` | `any \| string` | No       | Direct comment object |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-seen-dropdown-content
      annotation-id="abc123">
    </velt-comment-dialog-thread-card-seen-dropdown-content>
    ```

    **Attributes:**

    | Attribute     | Type            | Required | Description           |
    | ------------- | --------------- | -------- | --------------------- |
    | `comment-obj` | `string (JSON)` | No       | Direct comment object |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardSeenDropdownContentTitle

Title row of the seen-by dropdown.

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-seen-dropdown-content-title
      annotation-id="abc123">
    </velt-comment-dialog-thread-card-seen-dropdown-content-title>
    ```
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardSeenDropdownContentItems

List of viewers in the seen-by dropdown.

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

    **Props:**

    | Prop         | Type                       | Required | Description           |
    | ------------ | -------------------------- | -------- | --------------------- |
    | `commentObj` | `any \| string`            | No       | Direct comment object |
    | `commentId`  | `number \| string \| null` | No       | Comment ID for lookup |
    | `views`      | `any[]`                    | No       | The view records      |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-seen-dropdown-content-items
      annotation-id="abc123"
      comment-id="0">
    </velt-comment-dialog-thread-card-seen-dropdown-content-items>
    ```

    **Attributes:**

    | Attribute     | Type            | Required | Description           |
    | ------------- | --------------- | -------- | --------------------- |
    | `comment-obj` | `string (JSON)` | No       | Direct comment object |
    | `comment-id`  | `string`        | No       | Comment ID for lookup |
    | `views`       | `string (JSON)` | No       | The view records      |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardSeenDropdownContentItem

A single viewer row in the seen-by dropdown.

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

    **Props:**

    | Prop         | Type                       | Required | Description                      |
    | ------------ | -------------------------- | -------- | -------------------------------- |
    | `commentObj` | `any \| string`            | No       | Direct comment object            |
    | `view`       | `any \| string`            | No       | The view record                  |
    | `user`       | `any \| string`            | No       | The viewing user                 |
    | `userName`   | `string \| null`           | No       | Viewer name                      |
    | `userEmail`  | `string \| null`           | No       | Viewer email                     |
    | `viewedAt`   | `number \| string \| null` | No       | Timestamp the comment was viewed |
    | `index`      | `number \| string`         | No       | Index in the list                |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-seen-dropdown-content-item
      annotation-id="abc123"
      viewed-at="0"
      index="0">
    </velt-comment-dialog-thread-card-seen-dropdown-content-item>
    ```

    **Attributes:**

    | Attribute     | Type            | Required | Description                      |
    | ------------- | --------------- | -------- | -------------------------------- |
    | `comment-obj` | `string (JSON)` | No       | Direct comment object            |
    | `view`        | `string (JSON)` | No       | The view record                  |
    | `user`        | `string (JSON)` | No       | The viewing user                 |
    | `user-name`   | `string`        | No       | Viewer name                      |
    | `user-email`  | `string`        | No       | Viewer email                     |
    | `viewed-at`   | `string`        | No       | Timestamp the comment was viewed |
    | `index`       | `string`        | No       | Index in the list                |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardSeenDropdownContentItemAvatar

Viewer's avatar in a seen-by row.

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

    **Props:**

    | Prop        | Type               | Required | Description       |
    | ----------- | ------------------ | -------- | ----------------- |
    | `view`      | `any \| string`    | No       | The view record   |
    | `user`      | `any \| string`    | No       | The viewing user  |
    | `userName`  | `string \| null`   | No       | Viewer name       |
    | `userEmail` | `string \| null`   | No       | Viewer email      |
    | `index`     | `number \| string` | No       | Index in the list |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-seen-dropdown-content-item-avatar
      annotation-id="abc123"
      index="0">
    </velt-comment-dialog-thread-card-seen-dropdown-content-item-avatar>
    ```

    **Attributes:**

    | Attribute    | Type            | Required | Description       |
    | ------------ | --------------- | -------- | ----------------- |
    | `view`       | `string (JSON)` | No       | The view record   |
    | `user`       | `string (JSON)` | No       | The viewing user  |
    | `user-name`  | `string`        | No       | Viewer name       |
    | `user-email` | `string`        | No       | Viewer email      |
    | `index`      | `string`        | No       | Index in the list |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardSeenDropdownContentItemName

Viewer's name in a seen-by row.

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

    **Props:**

    | Prop        | Type               | Required | Description       |
    | ----------- | ------------------ | -------- | ----------------- |
    | `view`      | `any \| string`    | No       | The view record   |
    | `user`      | `any \| string`    | No       | The viewing user  |
    | `userName`  | `string \| null`   | No       | Viewer name       |
    | `userEmail` | `string \| null`   | No       | Viewer email      |
    | `index`     | `number \| string` | No       | Index in the list |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-seen-dropdown-content-item-name
      annotation-id="abc123"
      index="0">
    </velt-comment-dialog-thread-card-seen-dropdown-content-item-name>
    ```

    **Attributes:**

    | Attribute    | Type            | Required | Description       |
    | ------------ | --------------- | -------- | ----------------- |
    | `view`       | `string (JSON)` | No       | The view record   |
    | `user`       | `string (JSON)` | No       | The viewing user  |
    | `user-name`  | `string`        | No       | Viewer name       |
    | `user-email` | `string`        | No       | Viewer email      |
    | `index`      | `string`        | No       | Index in the list |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardSeenDropdownContentItemTime

Time the viewer saw the comment, in a seen-by row.

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

    **Props:**

    | Prop        | Type                       | Required | Description                      |
    | ----------- | -------------------------- | -------- | -------------------------------- |
    | `view`      | `any \| string`            | No       | The view record                  |
    | `viewedAt`  | `number \| string \| null` | No       | Timestamp the comment was viewed |
    | `userName`  | `string \| null`           | No       | Viewer name                      |
    | `userEmail` | `string \| null`           | No       | Viewer email                     |
    | `index`     | `number \| string`         | No       | Index in the list                |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-seen-dropdown-content-item-time
      annotation-id="abc123"
      viewed-at="0"
      index="0">
    </velt-comment-dialog-thread-card-seen-dropdown-content-item-time>
    ```

    **Attributes:**

    | Attribute    | Type            | Required | Description                      |
    | ------------ | --------------- | -------- | -------------------------------- |
    | `view`       | `string (JSON)` | No       | The view record                  |
    | `viewed-at`  | `string`        | No       | Timestamp the comment was viewed |
    | `user-name`  | `string`        | No       | Viewer name                      |
    | `user-email` | `string`        | No       | Viewer email                     |
    | `index`      | `string`        | No       | Index in the list                |
  </Tab>
</Tabs>

***

### VeltCommentDialogVisibilityDropdown

Dropdown for switching a comment between public and private.

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

    **Props:**

    | Prop       | Type      | Required | Description         |
    | ---------- | --------- | -------- | ------------------- |
    | `disabled` | `boolean` | No       | Disable the control |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-dropdown
      annotation-id="abc123"
      disabled="true">
    </velt-comment-dialog-visibility-dropdown>
    ```

    **Attributes:**

    | Attribute  | Type     | Required | Description         |
    | ---------- | -------- | -------- | ------------------- |
    | `disabled` | `string` | No       | Disable the control |
  </Tab>
</Tabs>

***

### VeltCommentDialogVisibilityDropdownTrigger

Trigger that opens the visibility dropdown.

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-dropdown-trigger
      annotation-id="abc123">
    </velt-comment-dialog-visibility-dropdown-trigger>
    ```
  </Tab>
</Tabs>

***

### VeltCommentDialogVisibilityDropdownTriggerIcon

Icon on the visibility dropdown trigger.

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-dropdown-trigger-icon
      annotation-id="abc123">
    </velt-comment-dialog-visibility-dropdown-trigger-icon>
    ```
  </Tab>
</Tabs>

***

### VeltCommentDialogVisibilityDropdownTriggerLabel

Label on the visibility dropdown trigger.

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-dropdown-trigger-label
      annotation-id="abc123">
    </velt-comment-dialog-visibility-dropdown-trigger-label>
    ```
  </Tab>
</Tabs>

***

### VeltCommentDialogVisibilityDropdownContent

Content panel of the visibility dropdown.

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-dropdown-content
      annotation-id="abc123">
    </velt-comment-dialog-visibility-dropdown-content>
    ```
  </Tab>
</Tabs>

***

### VeltCommentDialogVisibilityDropdownContentPublic

The public option in the visibility dropdown.

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-dropdown-content-public
      annotation-id="abc123">
    </velt-comment-dialog-visibility-dropdown-content-public>
    ```
  </Tab>
</Tabs>

***

### VeltCommentDialogVisibilityDropdownContentPrivate

The private option in the visibility dropdown.

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-dropdown-content-private
      annotation-id="abc123">
    </velt-comment-dialog-visibility-dropdown-content-private>
    ```
  </Tab>
</Tabs>

***

### VeltCommentDialogVisibilityBannerDropdownContentItem

An option in the visibility banner's dropdown. Set `type` to pick which one.

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

    **Props:**

    | Prop   | Type                                                                                  | Required | Description             |
    | ------ | ------------------------------------------------------------------------------------- | -------- | ----------------------- |
    | `type` | `'restrictedSelf' \| 'restrictedSelectedPeople' \| 'organizationPrivate' \| 'public'` | No       | Which variant to render |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-dropdown-content-item
      annotation-id="abc123"
      type="restrictedSelf">
    </velt-comment-dialog-visibility-banner-dropdown-content-item>
    ```

    **Attributes:**

    | Attribute | Type     | Required | Description             |
    | --------- | -------- | -------- | ----------------------- |
    | `type`    | `string` | No       | Which variant to render |
  </Tab>
</Tabs>

***

### VeltCommentDialogToggleReplyIcon

Icon on the show/hide replies toggle.

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-toggle-reply-icon
      annotation-id="abc123">
    </velt-comment-dialog-toggle-reply-icon>
    ```
  </Tab>
</Tabs>

***

### VeltCommentDialogToggleReplyText

Label on the show/hide replies toggle.

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-toggle-reply-text
      annotation-id="abc123">
    </velt-comment-dialog-toggle-reply-text>
    ```
  </Tab>
</Tabs>

***

### VeltCommentDialogReplyAvatarsRemainingCount

The "+N" overflow count on the reply avatar list.

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-reply-avatars-remaining-count
      annotation-id="abc123">
    </velt-comment-dialog-reply-avatars-remaining-count>
    ```
  </Tab>
</Tabs>

***

## VeltCommentDialogSuggestion

Primitive components for rendering the suggestion card within a comment dialog. The card renders for any suggestion annotation (human-authored or AI-agent-authored) with the header identity varying by source (see [VeltCommentDialogSuggestionHeaderAgent](#veltcommentdialogsuggestionheaderagent) and [VeltCommentDialogSuggestionHeaderAuthor](#veltcommentdialogsuggestionheaderauthor)).

Props: [`CommentDialogSuggestionProps`](/docs/api-reference/sdk/models/data-models#commentdialogsuggestionprops)

***

### VeltCommentDialogSuggestion

Container for the suggestion card.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-suggestion annotation-id="abc123"></velt-comment-dialog-suggestion>
    ```

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

***

### VeltCommentDialogSuggestionHeader

Header section of the suggestion card, containing identity, timestamp, and menu.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-suggestion-header annotation-id="abc123"></velt-comment-dialog-suggestion-header>
    ```

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

***

### VeltCommentDialogSuggestionHeaderAgent

Agent-identity variant of the suggestion header, shown when the source is an AI agent.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-suggestion-header-agent annotation-id="abc123"></velt-comment-dialog-suggestion-header-agent>
    ```

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

***

### VeltCommentDialogSuggestionHeaderAuthor

Human-author variant of the suggestion header, shown when the source is a human user.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-suggestion-header-author annotation-id="abc123"></velt-comment-dialog-suggestion-header-author>
    ```

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

***

### VeltCommentDialogSuggestionHeaderAgentAvatar

Agent avatar displayed in the agent-identity header variant.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-suggestion-header-agent-avatar annotation-id="abc123"></velt-comment-dialog-suggestion-header-agent-avatar>
    ```

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

***

### VeltCommentDialogSuggestionHeaderAgentName

Agent display name shown in the agent-identity header variant.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-suggestion-header-agent-name annotation-id="abc123"></velt-comment-dialog-suggestion-header-agent-name>
    ```

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

***

### VeltCommentDialogSuggestionHeaderAuthorAvatar

Human author avatar displayed in the author-identity header variant.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-suggestion-header-author-avatar annotation-id="abc123"></velt-comment-dialog-suggestion-header-author-avatar>
    ```

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

***

### VeltCommentDialogSuggestionHeaderAuthorName

Human author name shown in the author-identity header variant.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-suggestion-header-author-name annotation-id="abc123"></velt-comment-dialog-suggestion-header-author-name>
    ```

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

## Notes

* **Attribute Naming:** HTML uses kebab-case, React uses camelCase
* **Boolean Values:** HTML uses "true"/"false" strings, React uses actual booleans
* **Object Values:** HTML uses JSON strings, React uses actual objects
* **Required vs Optional:** `annotationId` is required when using standalone mode, not required inside context wrapper

## API Reference

* [Data Models](/docs/api-reference/sdk/models/data-models#comment-dialog-primitives)