Comment Dialog Primitives

We recommend that you familiarize yourselves with UI Customization Concepts before attempting to modify any components.

Overview

The Comment Dialog Primitives API provides 79 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.

React / Next.js
Other Frameworks

<VeltCommentDialogContextWrapper annotationId="abc123">
  <VeltCommentDialogHeader />
  <VeltCommentDialogComposer />
</VeltCommentDialogContextWrapper>

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

Pattern 2: ID-Based (Standalone)

Each component receives annotationId directly and works independently.

React / Next.js
Other Frameworks

<VeltCommentDialogHeader annotationId="abc123" />
<VeltCommentDialogComposer annotationId="abc123" />

<velt-comment-dialog-header annotation-id="abc123"></velt-comment-dialog-header>
<velt-comment-dialog-composer annotation-id="abc123"></velt-comment-dialog-composer>

Common Inputs

All components inherit these base inputs. See CommentDialogCommonProps for the type definition.

React Prop	HTML Attribute	Type	Default	Description
`annotationId`	`annotation-id`	`string`	-	The annotation ID
`defaultCondition`	`default-condition`	`boolean`	`true`	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

React / Next.js
Other Frameworks

<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

<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”)

VeltCommentDialogHeader

Header component for the comment dialog.

React / Next.js
Other Frameworks

<VeltCommentDialogHeader annotationId="abc123" />

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

<velt-comment-dialog-header annotation-id="abc123"></velt-comment-dialog-header>

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

VeltCommentDialogBody

Body container for the comment dialog thread content.

React / Next.js
Other Frameworks

<VeltCommentDialogBody annotationId="abc123" />

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

<velt-comment-dialog-body annotation-id="abc123"></velt-comment-dialog-body>

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

VeltCommentDialogThreadCard

Complete thread card with all comment metadata and content. See ThreadCardProps.

React / Next.js
Other Frameworks

<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)

<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)

VeltCommentDialogThreadCardAvatar

User avatar for the comment author. See CommentIndexProps.

React / Next.js
Other Frameworks

<VeltCommentDialogThreadCardAvatar
  annotationId="abc123"
  commentIndex={0}
/>

Props:

Prop	Type	Required	Description
`commentIndex`	`number`	No	Index of comment in array

<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

VeltCommentDialogThreadCardName

Display name of the comment author. See CommentIndexProps.

React / Next.js
Other Frameworks

<VeltCommentDialogThreadCardName
  annotationId="abc123"
  commentIndex={0}
/>

Props:

Prop	Type	Required	Description
`commentIndex`	`number`	No	Index of comment in array

<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

VeltCommentDialogThreadCardTime

Timestamp of when the comment was created. See CommentIndexProps.

React / Next.js
Other Frameworks

<VeltCommentDialogThreadCardTime
  annotationId="abc123"
  commentIndex={0}
/>

Props:

Prop	Type	Required	Description
`commentIndex`	`number`	No	Index of comment in array

<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

VeltCommentDialogThreadCardMessage

The comment message content. See CommentIndexProps.

React / Next.js
Other Frameworks

<VeltCommentDialogThreadCardMessage
  annotationId="abc123"
  commentIndex={0}
/>

Props:

Prop	Type	Required	Description
`commentIndex`	`number`	No	Index of comment in array

<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

VeltCommentDialogThreadCardReactions

Reactions display for the comment. See CommentIndexProps.

React / Next.js
Other Frameworks

<VeltCommentDialogThreadCardReactions
  annotationId="abc123"
  commentIndex={0}
/>

Props:

Prop	Type	Required	Description
`commentIndex`	`number`	No	Index of comment in array

<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

VeltCommentDialogThreadCardReactionTool

Tool for adding reactions to a comment. See CommentIndexProps.

React / Next.js
Other Frameworks

<VeltCommentDialogThreadCardReactionTool
  annotationId="abc123"
  commentIndex={0}
/>

Props:

Prop	Type	Required	Description
`commentIndex`	`number`	No	Index of comment in array

<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

VeltCommentDialogThreadCardRecordings

Recordings attached to the comment. See CommentIndexProps.

React / Next.js
Other Frameworks

<VeltCommentDialogThreadCardRecordings
  annotationId="abc123"
  commentIndex={0}
/>

Props:

Prop	Type	Required	Description
`commentIndex`	`number`	No	Index of comment in array

<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

VeltCommentDialogThreadCardReply

Reply indicator for the thread card.

React / Next.js
Other Frameworks

<VeltCommentDialogThreadCardReply annotationId="abc123" />

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

<velt-comment-dialog-thread-card-reply annotation-id="abc123"></velt-comment-dialog-thread-card-reply>

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

VeltCommentDialogThreadCardUnread

Unread indicator for the comment. See CommentIndexProps.

React / Next.js
Other Frameworks

<VeltCommentDialogThreadCardUnread
  annotationId="abc123"
  commentIndex={0}
/>

Props:

Prop	Type	Required	Description
`commentIndex`	`number`	No	Index of comment in array

<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

VeltCommentDialogThreadCardEdited

Edited indicator for the comment. See CommentIndexProps.

React / Next.js
Other Frameworks

<VeltCommentDialogThreadCardEdited
  annotationId="abc123"
  commentIndex={0}
/>

Props:

Prop	Type	Required	Description
`commentIndex`	`number`	No	Index of comment in array

<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

VeltCommentDialogThreadCardDraft

Draft indicator for the comment. See CommentIndexProps.

React / Next.js
Other Frameworks

<VeltCommentDialogThreadCardDraft
  annotationId="abc123"
  commentIndex={0}
/>

Props:

Prop	Type	Required	Description
`commentIndex`	`number`	No	Index of comment in array

<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

VeltCommentDialogThreadCardDeviceType

Device type indicator for the comment. See CommentIndexProps.

React / Next.js
Other Frameworks

<VeltCommentDialogThreadCardDeviceType
  annotationId="abc123"
  commentIndex={0}
/>

Props:

Prop	Type	Required	Description
`commentIndex`	`number`	No	Index of comment in array

<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

VeltCommentDialogThreadCardOptions

Options menu for the comment (edit, delete, etc.). See CommentIndexProps.

React / Next.js
Other Frameworks

<VeltCommentDialogThreadCardOptions
  annotationId="abc123"
  commentIndex={0}
/>

Props:

Prop	Type	Required	Description
`commentIndex`	`number`	No	Index of comment in array

<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

VeltCommentDialogComposer

Complete composer with input, attachments, and action buttons. See ComposerProps.

React / Next.js
Other Frameworks

<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}
/>

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

<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">
</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

VeltCommentDialogComposerInput

Text input field for composing comments. See ComposerInputProps.

React / Next.js
Other Frameworks

<VeltCommentDialogComposerInput
  annotationId="abc123"
  placeholder="Type here..."
/>

Props:

Prop	Type	Required	Description
`placeholder`	`string`	No	Input placeholder text

<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

VeltCommentDialogComposerActionButton

Submit/send button for the composer.

React / Next.js
Other Frameworks

<VeltCommentDialogComposerActionButton annotationId="abc123" />

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

<velt-comment-dialog-composer-action-button annotation-id="abc123"></velt-comment-dialog-composer-action-button>

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

VeltCommentDialogComposerAttachmentButton

Button to add file attachments to comments.

React / Next.js
Other Frameworks

<VeltCommentDialogComposerAttachmentButton annotationId="abc123" />

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

<velt-comment-dialog-composer-attachment-button annotation-id="abc123"></velt-comment-dialog-composer-attachment-button>

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

VeltCommentDialogComposerRecorderButton

Button to add audio/video recordings.

React / Next.js
Other Frameworks

<VeltCommentDialogComposerRecorderButton annotationId="abc123" />

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

<velt-comment-dialog-composer-recorder-button annotation-id="abc123"></velt-comment-dialog-composer-recorder-button>

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

VeltCommentDialogComposerRecorderPlayer

Player for audio/video recordings in the composer.

React / Next.js
Other Frameworks

<VeltCommentDialogComposerRecorderPlayer annotationId="abc123" />

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

<velt-comment-dialog-composer-recorder-player annotation-id="abc123"></velt-comment-dialog-composer-recorder-player>

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

VeltCommentDialogComposerFiles

Files display in the composer.

React / Next.js
Other Frameworks

<VeltCommentDialogComposerFiles annotationId="abc123" />

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

<velt-comment-dialog-composer-files annotation-id="abc123"></velt-comment-dialog-composer-files>

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

VeltCommentDialogStatusDropdown

Complete status dropdown with trigger and content.

React / Next.js
Other Frameworks

<VeltCommentDialogStatusDropdown annotationId="abc123" />

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

<velt-comment-dialog-status-dropdown annotation-id="abc123"></velt-comment-dialog-status-dropdown>

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

VeltCommentDialogStatusDropdownTrigger

Button that opens the status dropdown.

React / Next.js
Other Frameworks

<VeltCommentDialogStatusDropdownTrigger annotationId="abc123" />

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

<velt-comment-dialog-status-dropdown-trigger annotation-id="abc123"></velt-comment-dialog-status-dropdown-trigger>

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

VeltCommentDialogStatusDropdownTriggerIcon

Icon for the status dropdown trigger.

React / Next.js
Other Frameworks

<VeltCommentDialogStatusDropdownTriggerIcon annotationId="abc123" />

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

<velt-comment-dialog-status-dropdown-trigger-icon annotation-id="abc123"></velt-comment-dialog-status-dropdown-trigger-icon>

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

VeltCommentDialogStatusDropdownTriggerName

Name display for the status dropdown trigger.

React / Next.js
Other Frameworks

<VeltCommentDialogStatusDropdownTriggerName annotationId="abc123" />

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

<velt-comment-dialog-status-dropdown-trigger-name annotation-id="abc123"></velt-comment-dialog-status-dropdown-trigger-name>

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

VeltCommentDialogStatusDropdownTriggerArrow

Arrow indicator for the status dropdown trigger.

React / Next.js
Other Frameworks

<VeltCommentDialogStatusDropdownTriggerArrow annotationId="abc123" />

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

<velt-comment-dialog-status-dropdown-trigger-arrow annotation-id="abc123"></velt-comment-dialog-status-dropdown-trigger-arrow>

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

VeltCommentDialogStatusDropdownContent

Dropdown content container for status options.

React / Next.js
Other Frameworks

<VeltCommentDialogStatusDropdownContent annotationId="abc123" />

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

<velt-comment-dialog-status-dropdown-content annotation-id="abc123"></velt-comment-dialog-status-dropdown-content>

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

VeltCommentDialogStatusDropdownContentItem

Individual status item in the dropdown. See StatusDropdownItemProps.

React / Next.js
Other Frameworks

<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)

<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)

VeltCommentDialogStatusDropdownContentItemIcon

Icon for a status dropdown item.

React / Next.js
Other Frameworks

<VeltCommentDialogStatusDropdownContentItemIcon annotationId="abc123" />

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

<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 section).

VeltCommentDialogStatusDropdownContentItemName

Name display for a status dropdown item.

React / Next.js
Other Frameworks

<VeltCommentDialogStatusDropdownContentItemName annotationId="abc123" />

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

<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 section).

VeltCommentDialogPriorityDropdown

Complete priority dropdown with trigger and content.

React / Next.js
Other Frameworks

<VeltCommentDialogPriorityDropdown annotationId="abc123" />

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

<velt-comment-dialog-priority-dropdown annotation-id="abc123"></velt-comment-dialog-priority-dropdown>

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

VeltCommentDialogPriorityDropdownTrigger

Button that opens the priority dropdown.

React / Next.js
Other Frameworks

<VeltCommentDialogPriorityDropdownTrigger annotationId="abc123" />

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

<velt-comment-dialog-priority-dropdown-trigger annotation-id="abc123"></velt-comment-dialog-priority-dropdown-trigger>

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

VeltCommentDialogPriorityDropdownTriggerIcon

Icon for the priority dropdown trigger.

React / Next.js
Other Frameworks

<VeltCommentDialogPriorityDropdownTriggerIcon annotationId="abc123" />

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

<velt-comment-dialog-priority-dropdown-trigger-icon annotation-id="abc123"></velt-comment-dialog-priority-dropdown-trigger-icon>

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

VeltCommentDialogPriorityDropdownTriggerName

Name display for the priority dropdown trigger.

React / Next.js
Other Frameworks

<VeltCommentDialogPriorityDropdownTriggerName annotationId="abc123" />

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

<velt-comment-dialog-priority-dropdown-trigger-name annotation-id="abc123"></velt-comment-dialog-priority-dropdown-trigger-name>

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

VeltCommentDialogPriorityDropdownTriggerArrow

Arrow indicator for the priority dropdown trigger.

React / Next.js
Other Frameworks

<VeltCommentDialogPriorityDropdownTriggerArrow annotationId="abc123" />

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

<velt-comment-dialog-priority-dropdown-trigger-arrow annotation-id="abc123"></velt-comment-dialog-priority-dropdown-trigger-arrow>

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

VeltCommentDialogPriorityDropdownContent

Dropdown content container for priority options.

React / Next.js
Other Frameworks

<VeltCommentDialogPriorityDropdownContent annotationId="abc123" />

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

<velt-comment-dialog-priority-dropdown-content annotation-id="abc123"></velt-comment-dialog-priority-dropdown-content>

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

VeltCommentDialogPriorityDropdownContentItem

Individual priority item in the dropdown. See PriorityDropdownItemProps.

React / Next.js
Other Frameworks

<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)

<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)

VeltCommentDialogPriorityDropdownContentItemIcon

Icon for a priority dropdown item.

React / Next.js
Other Frameworks

<VeltCommentDialogPriorityDropdownContentItemIcon annotationId="abc123" />

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

<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 section).

VeltCommentDialogPriorityDropdownContentItemName

Name display for a priority dropdown item.

React / Next.js
Other Frameworks

<VeltCommentDialogPriorityDropdownContentItemName annotationId="abc123" />

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

<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 section).

VeltCommentDialogPriorityDropdownContentItemTick

Tick/checkmark for a priority dropdown item.

React / Next.js
Other Frameworks

<VeltCommentDialogPriorityDropdownContentItemTick annotationId="abc123" />

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

<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 section).

VeltCommentDialogOptionsDropdown

Options menu for actions like assignment, editing, and notifications. See OptionsDropdownProps.

React / Next.js
Other Frameworks

<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	V1 alias for enableAssignment
`enableEdit`	`boolean`	No	Enable edit option
`allowEdit`	`boolean`	No	V1 alias for enableEdit
`enableNotifications`	`boolean`	No	Enable notifications option
`allowNotifications`	`boolean`	No	V1 alias for enableNotifications
`enablePrivateMode`	`boolean`	No	Enable private mode option
`allowPrivateMode`	`boolean`	No	V1 alias for enablePrivateMode
`enableMarkAsRead`	`boolean`	No	Enable mark as read option
`allowMarkAsRead`	`boolean`	No	V1 alias for enableMarkAsRead

<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	V1 alias for enable-assignment
`enable-edit`	`string`	No	Enable edit option
`allow-edit`	`string`	No	V1 alias for enable-edit
`enable-notifications`	`string`	No	Enable notifications option
`allow-notifications`	`string`	No	V1 alias for enable-notifications
`enable-private-mode`	`string`	No	Enable private mode option
`allow-private-mode`	`string`	No	V1 alias for enable-private-mode
`enable-mark-as-read`	`string`	No	Enable mark as read option
`allow-mark-as-read`	`string`	No	V1 alias for enable-mark-as-read

VeltCommentDialogOptionsDropdownTrigger

Trigger button for the options dropdown.

React / Next.js
Other Frameworks

<VeltCommentDialogOptionsDropdownTrigger annotationId="abc123" />

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

<velt-comment-dialog-options-dropdown-trigger annotation-id="abc123"></velt-comment-dialog-options-dropdown-trigger>

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

VeltCommentDialogOptionsDropdownContent

Content container for the options dropdown.

React / Next.js
Other Frameworks

<VeltCommentDialogOptionsDropdownContent annotationId="abc123" />

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

<velt-comment-dialog-options-dropdown-content annotation-id="abc123"></velt-comment-dialog-options-dropdown-content>

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

VeltCommentDialogOptionsDropdownContentAssign

Assign option in the options dropdown.

React / Next.js
Other Frameworks

<VeltCommentDialogOptionsDropdownContentAssign annotationId="abc123" />

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

<velt-comment-dialog-options-dropdown-content-assign annotation-id="abc123"></velt-comment-dialog-options-dropdown-content-assign>

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

VeltCommentDialogOptionsDropdownContentEdit

Edit option in the options dropdown.

React / Next.js
Other Frameworks

<VeltCommentDialogOptionsDropdownContentEdit annotationId="abc123" />

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

<velt-comment-dialog-options-dropdown-content-edit annotation-id="abc123"></velt-comment-dialog-options-dropdown-content-edit>

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

VeltCommentDialogOptionsDropdownContentDelete

Delete option in the options dropdown.

React / Next.js
Other Frameworks

<VeltCommentDialogOptionsDropdownContentDelete annotationId="abc123" />

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

<velt-comment-dialog-options-dropdown-content-delete annotation-id="abc123"></velt-comment-dialog-options-dropdown-content-delete>

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

VeltCommentDialogOptionsDropdownContentDeleteComment

Delete comment option in the options dropdown.

React / Next.js
Other Frameworks

<VeltCommentDialogOptionsDropdownContentDeleteComment annotationId="abc123" />

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

<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 section).

VeltCommentDialogOptionsDropdownContentDeleteThread

Delete thread option in the options dropdown.

React / Next.js
Other Frameworks

<VeltCommentDialogOptionsDropdownContentDeleteThread annotationId="abc123" />

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

<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 section).

VeltCommentDialogOptionsDropdownContentMakePrivate

Make private option container in the options dropdown.

React / Next.js
Other Frameworks

<VeltCommentDialogOptionsDropdownContentMakePrivate annotationId="abc123" />

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

<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 section).

VeltCommentDialogOptionsDropdownContentMakePrivateEnable

Enable private mode option.

React / Next.js
Other Frameworks

<VeltCommentDialogOptionsDropdownContentMakePrivateEnable annotationId="abc123" />

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

<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 section).

VeltCommentDialogOptionsDropdownContentMakePrivateDisable

Disable private mode option.

React / Next.js
Other Frameworks

<VeltCommentDialogOptionsDropdownContentMakePrivateDisable annotationId="abc123" />

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

<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 section).

VeltCommentDialogOptionsDropdownContentNotification

Notification option container in the options dropdown.

React / Next.js
Other Frameworks

<VeltCommentDialogOptionsDropdownContentNotification annotationId="abc123" />

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

<velt-comment-dialog-options-dropdown-content-notification annotation-id="abc123"></velt-comment-dialog-options-dropdown-content-notification>

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

VeltCommentDialogOptionsDropdownContentNotificationSubscribe

Subscribe to notifications option.

React / Next.js
Other Frameworks

<VeltCommentDialogOptionsDropdownContentNotificationSubscribe annotationId="abc123" />

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

<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 section).

VeltCommentDialogOptionsDropdownContentNotificationUnsubscribe

Unsubscribe from notifications option.

React / Next.js
Other Frameworks

<VeltCommentDialogOptionsDropdownContentNotificationUnsubscribe annotationId="abc123" />

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

<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 section).

VeltCommentDialogOptionsDropdownContentMarkAsRead

Mark as read option container in the options dropdown.

React / Next.js
Other Frameworks

<VeltCommentDialogOptionsDropdownContentMarkAsRead annotationId="abc123" />

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

<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 section).

VeltCommentDialogOptionsDropdownContentMarkAsReadMarkRead

Mark as read action option.

React / Next.js
Other Frameworks

<VeltCommentDialogOptionsDropdownContentMarkAsReadMarkRead annotationId="abc123" />

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

<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 section).

VeltCommentDialogOptionsDropdownContentMarkAsReadMarkUnread

Mark as unread action option.

React / Next.js
Other Frameworks

<VeltCommentDialogOptionsDropdownContentMarkAsReadMarkUnread annotationId="abc123" />

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

<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 section).

VeltCommentDialogCustomAnnotationDropdown

Custom annotation dropdown component.

React / Next.js
Other Frameworks

<VeltCommentDialogCustomAnnotationDropdown annotationId="abc123" />

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

<velt-comment-dialog-custom-annotation-dropdown annotation-id="abc123"></velt-comment-dialog-custom-annotation-dropdown>

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

VeltCommentDialogCustomAnnotationDropdownTrigger

Trigger button for the custom annotation dropdown.

React / Next.js
Other Frameworks

<VeltCommentDialogCustomAnnotationDropdownTrigger annotationId="abc123" />

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

<velt-comment-dialog-custom-annotation-dropdown-trigger annotation-id="abc123"></velt-comment-dialog-custom-annotation-dropdown-trigger>

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

VeltCommentDialogCustomAnnotationDropdownTriggerArrow

Arrow indicator for the custom annotation dropdown trigger.

React / Next.js
Other Frameworks

<VeltCommentDialogCustomAnnotationDropdownTriggerArrow annotationId="abc123" />

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

<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 section).

VeltCommentDialogCustomAnnotationDropdownTriggerList

List container for the custom annotation dropdown trigger.

React / Next.js
Other Frameworks

<VeltCommentDialogCustomAnnotationDropdownTriggerList annotationId="abc123" />

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

<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 section).

VeltCommentDialogCustomAnnotationDropdownTriggerListItem

Individual item in the custom annotation dropdown trigger list. See CustomAnnotationItemProps.

React / Next.js
Other Frameworks

<VeltCommentDialogCustomAnnotationDropdownTriggerListItem
  annotationId="abc123"
  item={itemData}
  index={0}
/>

Props:

Prop	Type	Required	Description
`item`	`object`	No	Item data object
`index`	`number`	No	Item index

<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

VeltCommentDialogCustomAnnotationDropdownTriggerPlaceholder

Placeholder for the custom annotation dropdown trigger.

React / Next.js
Other Frameworks

<VeltCommentDialogCustomAnnotationDropdownTriggerPlaceholder annotationId="abc123" />

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

<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 section).

VeltCommentDialogCustomAnnotationDropdownTriggerRemainingCount

Remaining count indicator for the custom annotation dropdown trigger.

React / Next.js
Other Frameworks

<VeltCommentDialogCustomAnnotationDropdownTriggerRemainingCount annotationId="abc123" />

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

<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 section).

VeltCommentDialogCustomAnnotationDropdownContent

Content container for the custom annotation dropdown.

React / Next.js
Other Frameworks

<VeltCommentDialogCustomAnnotationDropdownContent annotationId="abc123" />

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

<velt-comment-dialog-custom-annotation-dropdown-content annotation-id="abc123"></velt-comment-dialog-custom-annotation-dropdown-content>

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

VeltCommentDialogCustomAnnotationDropdownContentItem

Individual item in the custom annotation dropdown content. See CustomAnnotationItemProps.

React / Next.js
Other Frameworks

<VeltCommentDialogCustomAnnotationDropdownContentItem
  annotationId="abc123"
  item={itemData}
  index={0}
/>

Props:

Prop	Type	Required	Description
`item`	`object`	No	Item data object
`index`	`number`	No	Item index

<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

VeltCommentDialogCustomAnnotationDropdownContentItemIcon

Icon for a custom annotation dropdown item.

React / Next.js
Other Frameworks

<VeltCommentDialogCustomAnnotationDropdownContentItemIcon annotationId="abc123" />

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

<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 section).

VeltCommentDialogCustomAnnotationDropdownContentItemLabel

Label for a custom annotation dropdown item.

React / Next.js
Other Frameworks

<VeltCommentDialogCustomAnnotationDropdownContentItemLabel annotationId="abc123" />

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

<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 section).

VeltCommentDialogReplyAvatars

Container for reply avatars.

React / Next.js
Other Frameworks

<VeltCommentDialogReplyAvatars annotationId="abc123" />

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

<velt-comment-dialog-reply-avatars annotation-id="abc123"></velt-comment-dialog-reply-avatars>

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

VeltCommentDialogReplyAvatarsList

List container for reply avatars.

React / Next.js
Other Frameworks

<VeltCommentDialogReplyAvatarsList annotationId="abc123" />

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

<velt-comment-dialog-reply-avatars-list annotation-id="abc123"></velt-comment-dialog-reply-avatars-list>

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

VeltCommentDialogReplyAvatarsListItem

Individual avatar item in the reply avatars list. See ReplyAvatarsListItemProps.

React / Next.js
Other Frameworks

<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

<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

VeltCommentDialogReplyCount

Reply count display.

React / Next.js
Other Frameworks

<VeltCommentDialogReplyCount annotationId="abc123" />

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

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

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

VeltCommentDialogAssigneeBanner

Assignee banner container.

React / Next.js
Other Frameworks

<VeltCommentDialogAssigneeBanner annotationId="abc123" />

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

<velt-comment-dialog-assignee-banner annotation-id="abc123"></velt-comment-dialog-assignee-banner>

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

VeltCommentDialogAssigneeBannerResolved

Resolved state of the assignee banner.

React / Next.js
Other Frameworks

<VeltCommentDialogAssigneeBannerResolved annotationId="abc123" />

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

<velt-comment-dialog-assignee-banner-resolved annotation-id="abc123"></velt-comment-dialog-assignee-banner-resolved>

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

VeltCommentDialogAssigneeBannerUnresolved

Unresolved state of the assignee banner.

React / Next.js
Other Frameworks

<VeltCommentDialogAssigneeBannerUnresolved annotationId="abc123" />

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

<velt-comment-dialog-assignee-banner-unresolved annotation-id="abc123"></velt-comment-dialog-assignee-banner-unresolved>

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

VeltCommentDialogAssigneeBannerUnresolveButton

Button to unresolve the assignee banner.

React / Next.js
Other Frameworks

<VeltCommentDialogAssigneeBannerUnresolveButton annotationId="abc123" />

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

<velt-comment-dialog-assignee-banner-unresolve-button annotation-id="abc123"></velt-comment-dialog-assignee-banner-unresolve-button>

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

Additional Components (Common Inputs Only)

The following components accept only common inputs:

React Component	HTML Tag
`VeltCommentDialogResolveButton`	`<velt-comment-dialog-resolve-button>`
`VeltCommentDialogUnresolveButton`	`<velt-comment-dialog-unresolve-button>`
`VeltCommentDialogCopyLink`	`<velt-comment-dialog-copy-link>`
`VeltCommentDialogCloseButton`	`<velt-comment-dialog-close-button>`
`VeltCommentDialogDeleteButton`	`<velt-comment-dialog-delete-button>`
`VeltCommentDialogPrivateBanner`	`<velt-comment-dialog-private-banner>`
`VeltCommentDialogPrivateButton`	`<velt-comment-dialog-private-button>`
`VeltCommentDialogGhostBanner`	`<velt-comment-dialog-ghost-banner>`
`VeltCommentDialogSignIn`	`<velt-comment-dialog-sign-in>`
`VeltCommentDialogNavigationButton`	`<velt-comment-dialog-navigation-button>`
`VeltCommentDialogAttachmentButton`	`<velt-comment-dialog-attachment-button>`
`VeltCommentDialogDeviceTypeIcons`	`<velt-comment-dialog-device-type-icons>`
`VeltCommentDialogCommentIndex`	`<velt-comment-dialog-comment-index>`
`VeltCommentDialogCommentNumber`	`<velt-comment-dialog-comment-number>`
`VeltCommentDialogCommentCategory`	`<velt-comment-dialog-comment-category>`
`VeltCommentDialogMetadata`	`<velt-comment-dialog-metadata>`
`VeltCommentDialogThreads`	`<velt-comment-dialog-threads>`
`VeltCommentDialogAllComment`	`<velt-comment-dialog-all-comment>`
`VeltCommentDialogApprove`	`<velt-comment-dialog-approve>`
`VeltCommentDialogUpgrade`	`<velt-comment-dialog-upgrade>`
`VeltCommentDialogMoreReply`	`<velt-comment-dialog-more-reply>`
`VeltCommentDialogHideReply`	`<velt-comment-dialog-hide-reply>`
`VeltCommentDialogToggleReply`	`<velt-comment-dialog-toggle-reply>`
`VeltCommentDialogToggleReplyShow`	`<velt-comment-dialog-toggle-reply-show>`
`VeltCommentDialogToggleReplyHide`	`<velt-comment-dialog-toggle-reply-hide>`
`VeltCommentDialogToggleReplyCount`	`<velt-comment-dialog-toggle-reply-count>`
`VeltCommentDialogSuggestionAction`	`<velt-comment-dialog-suggestion-action>`
`VeltCommentDialogSuggestionActionAccept`	`<velt-comment-dialog-suggestion-action-accept>`
`VeltCommentDialogSuggestionActionReject`	`<velt-comment-dialog-suggestion-action-reject>`
`VeltCommentDialogCommentSuggestionStatus`	`<velt-comment-dialog-comment-suggestion-status>`
`VeltCommentDialogAssignDropdown`	`<velt-comment-dialog-assign-dropdown>`
`VeltCommentDialogAssignMenu`	`<velt-comment-dialog-assign-menu>`
`VeltCommentDialogOptions`	`<velt-comment-dialog-options>`
`VeltCommentDialogPriority`	`<velt-comment-dialog-priority>`
`VeltCommentDialogStatus`	`<velt-comment-dialog-status>`
`VeltCommentDialogCustomAnnotationDropdown`	`<velt-comment-dialog-custom-annotation-dropdown>`

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

Concepts

Async Collaboration

Realtime Collaboration

​Overview

​Usage Patterns

​Pattern 1: Context Wrapper (Recommended)

​Pattern 2: ID-Based (Standalone)

​Common Inputs

​Components

​VeltCommentDialogContextWrapper

​VeltCommentDialogHeader

​VeltCommentDialogBody

​VeltCommentDialogThreadCard

​VeltCommentDialogThreadCardAvatar

​VeltCommentDialogThreadCardName

​VeltCommentDialogThreadCardTime

​VeltCommentDialogThreadCardMessage

​VeltCommentDialogThreadCardReactions

​VeltCommentDialogThreadCardReactionTool

​VeltCommentDialogThreadCardRecordings

​VeltCommentDialogThreadCardReply

​VeltCommentDialogThreadCardUnread

​VeltCommentDialogThreadCardEdited

​VeltCommentDialogThreadCardDraft

​VeltCommentDialogThreadCardDeviceType

​VeltCommentDialogThreadCardOptions

​VeltCommentDialogComposer

​VeltCommentDialogComposerInput

​VeltCommentDialogComposerActionButton

​VeltCommentDialogComposerAttachmentButton

​VeltCommentDialogComposerRecorderButton

​VeltCommentDialogComposerRecorderPlayer

​VeltCommentDialogComposerFiles

​VeltCommentDialogStatusDropdown

​VeltCommentDialogStatusDropdownTrigger

​VeltCommentDialogStatusDropdownTriggerIcon

​VeltCommentDialogStatusDropdownTriggerName

​VeltCommentDialogStatusDropdownTriggerArrow

​VeltCommentDialogStatusDropdownContent

​VeltCommentDialogStatusDropdownContentItem

​VeltCommentDialogStatusDropdownContentItemIcon

​VeltCommentDialogStatusDropdownContentItemName

​VeltCommentDialogPriorityDropdown

​VeltCommentDialogPriorityDropdownTrigger

​VeltCommentDialogPriorityDropdownTriggerIcon

​VeltCommentDialogPriorityDropdownTriggerName

​VeltCommentDialogPriorityDropdownTriggerArrow

​VeltCommentDialogPriorityDropdownContent

​VeltCommentDialogPriorityDropdownContentItem

​VeltCommentDialogPriorityDropdownContentItemIcon

​VeltCommentDialogPriorityDropdownContentItemName

​VeltCommentDialogPriorityDropdownContentItemTick

​VeltCommentDialogOptionsDropdown

​VeltCommentDialogOptionsDropdownTrigger

​VeltCommentDialogOptionsDropdownContent

​VeltCommentDialogOptionsDropdownContentAssign

​VeltCommentDialogOptionsDropdownContentEdit

​VeltCommentDialogOptionsDropdownContentDelete

​VeltCommentDialogOptionsDropdownContentDeleteComment

​VeltCommentDialogOptionsDropdownContentDeleteThread

​VeltCommentDialogOptionsDropdownContentMakePrivate

​VeltCommentDialogOptionsDropdownContentMakePrivateEnable

​VeltCommentDialogOptionsDropdownContentMakePrivateDisable

​VeltCommentDialogOptionsDropdownContentNotification

​VeltCommentDialogOptionsDropdownContentNotificationSubscribe

​VeltCommentDialogOptionsDropdownContentNotificationUnsubscribe

​VeltCommentDialogOptionsDropdownContentMarkAsRead

​VeltCommentDialogOptionsDropdownContentMarkAsReadMarkRead

​VeltCommentDialogOptionsDropdownContentMarkAsReadMarkUnread

​VeltCommentDialogCustomAnnotationDropdown

​VeltCommentDialogCustomAnnotationDropdownTrigger

​VeltCommentDialogCustomAnnotationDropdownTriggerArrow

​VeltCommentDialogCustomAnnotationDropdownTriggerList

​VeltCommentDialogCustomAnnotationDropdownTriggerListItem

​VeltCommentDialogCustomAnnotationDropdownTriggerPlaceholder

​VeltCommentDialogCustomAnnotationDropdownTriggerRemainingCount

​VeltCommentDialogCustomAnnotationDropdownContent

​VeltCommentDialogCustomAnnotationDropdownContentItem

​VeltCommentDialogCustomAnnotationDropdownContentItemIcon

​VeltCommentDialogCustomAnnotationDropdownContentItemLabel

Overview

Usage Patterns

Pattern 1: Context Wrapper (Recommended)

Pattern 2: ID-Based (Standalone)

Common Inputs

Components

VeltCommentDialogContextWrapper

VeltCommentDialogHeader

VeltCommentDialogBody

VeltCommentDialogThreadCard

VeltCommentDialogThreadCardAvatar

VeltCommentDialogThreadCardName

VeltCommentDialogThreadCardTime

VeltCommentDialogThreadCardMessage

VeltCommentDialogThreadCardReactions

VeltCommentDialogThreadCardReactionTool

VeltCommentDialogThreadCardRecordings

VeltCommentDialogThreadCardReply

VeltCommentDialogThreadCardUnread

VeltCommentDialogThreadCardEdited

VeltCommentDialogThreadCardDraft

VeltCommentDialogThreadCardDeviceType

VeltCommentDialogThreadCardOptions

VeltCommentDialogComposer

VeltCommentDialogComposerInput

VeltCommentDialogComposerActionButton

VeltCommentDialogComposerAttachmentButton

VeltCommentDialogComposerRecorderButton

VeltCommentDialogComposerRecorderPlayer

VeltCommentDialogComposerFiles

VeltCommentDialogStatusDropdown

VeltCommentDialogStatusDropdownTrigger

VeltCommentDialogStatusDropdownTriggerIcon

VeltCommentDialogStatusDropdownTriggerName

VeltCommentDialogStatusDropdownTriggerArrow

VeltCommentDialogStatusDropdownContent

VeltCommentDialogStatusDropdownContentItem

VeltCommentDialogStatusDropdownContentItemIcon

VeltCommentDialogStatusDropdownContentItemName

VeltCommentDialogPriorityDropdown

VeltCommentDialogPriorityDropdownTrigger

VeltCommentDialogPriorityDropdownTriggerIcon

VeltCommentDialogPriorityDropdownTriggerName

VeltCommentDialogPriorityDropdownTriggerArrow

VeltCommentDialogPriorityDropdownContent

VeltCommentDialogPriorityDropdownContentItem

VeltCommentDialogPriorityDropdownContentItemIcon

VeltCommentDialogPriorityDropdownContentItemName

VeltCommentDialogPriorityDropdownContentItemTick

VeltCommentDialogOptionsDropdown

VeltCommentDialogOptionsDropdownTrigger

VeltCommentDialogOptionsDropdownContent

VeltCommentDialogOptionsDropdownContentAssign

VeltCommentDialogOptionsDropdownContentEdit

VeltCommentDialogOptionsDropdownContentDelete

VeltCommentDialogOptionsDropdownContentDeleteComment

VeltCommentDialogOptionsDropdownContentDeleteThread

VeltCommentDialogOptionsDropdownContentMakePrivate

VeltCommentDialogOptionsDropdownContentMakePrivateEnable

VeltCommentDialogOptionsDropdownContentMakePrivateDisable

VeltCommentDialogOptionsDropdownContentNotification

VeltCommentDialogOptionsDropdownContentNotificationSubscribe

VeltCommentDialogOptionsDropdownContentNotificationUnsubscribe

VeltCommentDialogOptionsDropdownContentMarkAsRead

VeltCommentDialogOptionsDropdownContentMarkAsReadMarkRead

VeltCommentDialogOptionsDropdownContentMarkAsReadMarkUnread

VeltCommentDialogCustomAnnotationDropdown

VeltCommentDialogCustomAnnotationDropdownTrigger

VeltCommentDialogCustomAnnotationDropdownTriggerArrow

VeltCommentDialogCustomAnnotationDropdownTriggerList

VeltCommentDialogCustomAnnotationDropdownTriggerListItem

VeltCommentDialogCustomAnnotationDropdownTriggerPlaceholder

VeltCommentDialogCustomAnnotationDropdownTriggerRemainingCount

VeltCommentDialogCustomAnnotationDropdownContent

VeltCommentDialogCustomAnnotationDropdownContentItem

VeltCommentDialogCustomAnnotationDropdownContentItemIcon

VeltCommentDialogCustomAnnotationDropdownContentItemLabel

VeltCommentDialogReplyAvatars

VeltCommentDialogReplyAvatarsList

VeltCommentDialogReplyAvatarsListItem