Skip to main content
We recommend that you familiarize yourselves with UI Customization Concepts before attempting to modify any components.
Explore primitives interactively in our Storybook.

​
Overview

The Comment Dialog Primitives API provides 98+ 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

Components are wrapped in a context wrapper that provides shared context to children. 
<VeltCommentDialogContextWrapper annotationId="abc123">
  <VeltCommentDialogHeader />
  <VeltCommentDialogComposer />
</VeltCommentDialogContextWrapper>

​
Pattern 2: ID-Based (Standalone)

Each component receives annotationId directly and works independently. 
<VeltCommentDialogHeader annotationId="abc123" />
<VeltCommentDialogComposer annotationId="abc123" />

​
Common Inputs

All components inherit these base inputs. See CommentDialogCommonProps for the type definition.
React PropHTML AttributeTypeDefaultDescription
annotationIdannotation-idstring-The annotation ID
defaultConditiondefault-conditionbooleanundefinedWhen false, always shows
inlineCommentSectionModeinline-comment-section-modebooleanfalseInline comment section mode
commentPinSelectedcomment-pin-selectedbooleanfalseComment pin selected state
fullExpandedfull-expandedbooleanfalseFull expansion state

​
Components

​
VeltCommentDialogContextWrapper

Context wrapper that provides shared annotation context to child primitives. Props: CommentDialogContextWrapperProps 
<VeltCommentDialogContextWrapper
  annotationId="abc123"
  commentId="456"
  commentPinSelected={true}
>
  {children}
</VeltCommentDialogContextWrapper>
Props:
PropTypeRequiredDescription
annotationIdstringYes (root)Annotation ID for children
commentIdstringNoComment ID for children
attachmentIdstringNoAttachment ID for children
commentPinSelectedbooleanNoSelection state for children
[key: string]anyNoAny custom attribute passed via context

​
VeltCommentDialogHeader

Header component for the comment dialog. 
<VeltCommentDialogHeader annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogBody

Body container for the comment dialog thread content. 
<VeltCommentDialogBody annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogThreadCard

Complete thread card with all comment metadata and content. See ThreadCardProps. 
<VeltCommentDialogThreadCard
  annotationId="abc123"
  commentObj={commentData}
  commentId={456}
  commentIndex={0}
/>
Props:
PropTypeRequiredDescription
commentObjobjectNoDirect comment object (Priority 1)
commentIdnumberNoComment ID for lookup (Priority 2)
commentIndexnumberNoIndex in comments array (Priority 3)

​
VeltCommentDialogThreadCardAvatar

User avatar for the comment author. See CommentIndexProps. 
<VeltCommentDialogThreadCardAvatar
  annotationId="abc123"
  commentIndex={0}
/>
Props:
PropTypeRequiredDescription
commentIndexnumberNoIndex of comment in array

​
VeltCommentDialogThreadCardName

Display name of the comment author. See CommentIndexProps. 
<VeltCommentDialogThreadCardName
  annotationId="abc123"
  commentIndex={0}
/>
Props:
PropTypeRequiredDescription
commentIndexnumberNoIndex of comment in array

​
VeltCommentDialogThreadCardTime

Timestamp of when the comment was created. See CommentIndexProps. 
<VeltCommentDialogThreadCardTime
  annotationId="abc123"
  commentIndex={0}
/>
Props:
PropTypeRequiredDescription
commentIndexnumberNoIndex of comment in array

​
VeltCommentDialogThreadCardMessage

The comment message content. See CommentIndexProps. 
<VeltCommentDialogThreadCardMessage
  annotationId="abc123"
  commentIndex={0}
/>
Props:
PropTypeRequiredDescription
commentIndexnumberNoIndex of comment in array

​
VeltCommentDialogThreadCardMessageShowMore

Show-more toggle that appears when message truncation is enabled and the message exceeds the configured line limit; clicking expands the full message. 
<VeltCommentDialogThreadCardMessageShowMore />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogThreadCardMessageShowLess

Show-less toggle that collapses an expanded truncated message back to the truncated state. 
<VeltCommentDialogThreadCardMessageShowLess />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogThreadCardReactions

Reactions display for the comment. See CommentIndexProps. 
<VeltCommentDialogThreadCardReactions
  annotationId="abc123"
  commentIndex={0}
/>
Props:
PropTypeRequiredDescription
commentIndexnumberNoIndex of comment in array

​
VeltCommentDialogThreadCardReactionTool

Tool for adding reactions to a comment. See CommentIndexProps. 
<VeltCommentDialogThreadCardReactionTool
  annotationId="abc123"
  commentIndex={0}
/>
Props:
PropTypeRequiredDescription
commentIndexnumberNoIndex of comment in array

​
VeltCommentDialogThreadCardReactionPin

Reaction pin inside a thread card. 
<VeltCommentDialogThreadCardReactionPin
  annotationId="abc123"
  reactionId="reaction-1"
  commentIndex={0}
/>
Props: Common inputs (see Common Inputs section) plus:
PropTypeRequiredDescription
reactionIdstringNoID of the reaction
commentObjany | stringNoComment data object (or serialized JSON string)
commentIndexnumber | stringNoIndex of comment in array
indexnumber | stringNoIndex of the reaction pin

​
VeltCommentDialogThreadCardRecordings

Recordings attached to the comment. See CommentIndexProps. 
<VeltCommentDialogThreadCardRecordings
  annotationId="abc123"
  commentIndex={0}
/>
Props:
PropTypeRequiredDescription
commentIndexnumberNoIndex of comment in array

​
VeltCommentDialogThreadCardReply

Reply indicator for the thread card. 
<VeltCommentDialogThreadCardReply annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogThreadCardUnread

Unread indicator for the comment. See CommentIndexProps. 
<VeltCommentDialogThreadCardUnread
  annotationId="abc123"
  commentIndex={0}
/>
Props:
PropTypeRequiredDescription
commentIndexnumberNoIndex of comment in array

​
VeltCommentDialogThreadCardEdited

Edited indicator for the comment. See CommentIndexProps. 
<VeltCommentDialogThreadCardEdited
  annotationId="abc123"
  commentIndex={0}
/>
Props:
PropTypeRequiredDescription
commentIndexnumberNoIndex of comment in array

​
VeltCommentDialogThreadCardDraft

Draft indicator for the comment. See CommentIndexProps. 
<VeltCommentDialogThreadCardDraft
  annotationId="abc123"
  commentIndex={0}
/>
Props:
PropTypeRequiredDescription
commentIndexnumberNoIndex of comment in array

​
VeltCommentDialogThreadCardDeviceType

Device type indicator for the comment. See CommentIndexProps. 
<VeltCommentDialogThreadCardDeviceType
  annotationId="abc123"
  commentIndex={0}
/>
Props:
PropTypeRequiredDescription
commentIndexnumberNoIndex of comment in array

​
VeltCommentDialogThreadCardOptions

Options menu for the comment (edit, delete, etc.). See CommentIndexProps. 
<VeltCommentDialogThreadCardOptions
  annotationId="abc123"
  commentIndex={0}
/>
Props:
PropTypeRequiredDescription
commentIndexnumberNoIndex of comment in array

​
VeltCommentDialogThreadCardAssignButton

Assign-to button inside a thread card. 
<VeltCommentDialogThreadCardAssignButton
  annotationId="abc123"
  commentId="456"
/>
Props: Common inputs (see Common Inputs section) plus:
PropTypeRequiredDescription
commentObjany | stringNoComment data object (or serialized JSON string)
commentIdnumber | stringNoID of the comment
commentIndexnumber | stringNoIndex of comment in array

​
VeltCommentDialogThreadCardEditComposer

Inline edit composer inside a thread card. 
<VeltCommentDialogThreadCardEditComposer
  annotationId="abc123"
  commentId="456"
/>
Props: Common inputs (see Common Inputs section) plus:
PropTypeRequiredDescription
commentObjany | stringNoComment data object (or serialized JSON string)
commentIdnumber | stringNoID of the comment
commentIndexnumber | stringNoIndex of comment in array

​
VeltCommentDialogComposer

Complete composer with input, attachments, and action buttons. See ComposerProps. 
<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:
PropTypeRequiredDescription
placeholderstringNoPrimary placeholder (Priority 1)
commentPlaceholderstringNoPlaceholder for new comment
replyPlaceholderstringNoPlaceholder for reply
editPlaceholderstringNoPlaceholder for edit mode
editModebooleanNoEnable edit mode
commentObjobjectNoComment object for edit mode
commentIndexnumberNoIndex of comment being edited
targetComposerElementIdstringNoUnique identifier for programmatic submission
contextobjectNoCustom context data to attach to comment

​
VeltCommentDialogComposerInput

Text input field for composing comments. See ComposerInputProps. 
<VeltCommentDialogComposerInput
  annotationId="abc123"
  placeholder="Type here..."
/>
Props:
PropTypeRequiredDescription
placeholderstringNoInput placeholder text

​
VeltCommentDialogComposerActionButton

Submit/send button for the composer. 
<VeltCommentDialogComposerActionButton annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogComposerAttachmentButton

Button to add file attachments to comments. 
<VeltCommentDialogComposerAttachmentButton annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogComposerRecorderButton

Button to add audio/video recordings. 
<VeltCommentDialogComposerRecorderButton annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogComposerRecorderPlayer

Player for audio/video recordings in the composer. 
<VeltCommentDialogComposerRecorderPlayer annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogComposerFiles

Files display in the composer. 
<VeltCommentDialogComposerFiles annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogComposerAttachmentsImageDownload

Download button for image attachments in the comment dialog composer when in edit mode. 
<VeltCommentDialogComposerAttachmentsImageDownload annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogComposerAttachmentsOtherDownload

Download button for non-image file attachments in the comment dialog composer when in edit mode. 
<VeltCommentDialogComposerAttachmentsOtherDownload annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogStatusDropdown

Complete status dropdown with trigger and content. 
<VeltCommentDialogStatusDropdown annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogStatusDropdownTrigger

Button that opens the status dropdown. 
<VeltCommentDialogStatusDropdownTrigger annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogStatusDropdownTriggerIcon

Icon for the status dropdown trigger. 
<VeltCommentDialogStatusDropdownTriggerIcon annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogStatusDropdownTriggerName

Name display for the status dropdown trigger. 
<VeltCommentDialogStatusDropdownTriggerName annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogStatusDropdownTriggerArrow

Arrow indicator for the status dropdown trigger. 
<VeltCommentDialogStatusDropdownTriggerArrow annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogStatusDropdownContent

Dropdown content container for status options. 
<VeltCommentDialogStatusDropdownContent annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogStatusDropdownContentItem

Individual status item in the dropdown. See StatusDropdownItemProps. 
<VeltCommentDialogStatusDropdownContentItem
  annotationId="abc123"
  statusObj={statusData}
  statusId="open"
  statusIndex={0}
/>
Props:
PropTypeRequiredDescription
statusObjobjectNoDirect status object (Priority 1)
statusIdstringNoStatus ID for lookup (Priority 2)
statusIndexnumberNoIndex in statuses array (Priority 3)

​
VeltCommentDialogStatusDropdownContentItemIcon

Icon for a status dropdown item. 
<VeltCommentDialogStatusDropdownContentItemIcon annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogStatusDropdownContentItemName

Name display for a status dropdown item. 
<VeltCommentDialogStatusDropdownContentItemName annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogPriorityDropdown

Complete priority dropdown with trigger and content. 
<VeltCommentDialogPriorityDropdown annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogPriorityDropdownTrigger

Button that opens the priority dropdown. 
<VeltCommentDialogPriorityDropdownTrigger annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogPriorityDropdownTriggerIcon

Icon for the priority dropdown trigger. 
<VeltCommentDialogPriorityDropdownTriggerIcon annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogPriorityDropdownTriggerName

Name display for the priority dropdown trigger. 
<VeltCommentDialogPriorityDropdownTriggerName annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogPriorityDropdownTriggerArrow

Arrow indicator for the priority dropdown trigger. 
<VeltCommentDialogPriorityDropdownTriggerArrow annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogPriorityDropdownContent

Dropdown content container for priority options. 
<VeltCommentDialogPriorityDropdownContent annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogPriorityDropdownContentItem

Individual priority item in the dropdown. See PriorityDropdownItemProps. 
<VeltCommentDialogPriorityDropdownContentItem
  annotationId="abc123"
  priorityObj={priorityData}
  priorityId="high"
  priorityIndex={0}
/>
Props:
PropTypeRequiredDescription
priorityObjobjectNoDirect priority object (Priority 1)
priorityIdstringNoPriority ID for lookup (Priority 2)
priorityIndexnumberNoIndex in priorities array (Priority 3)

​
VeltCommentDialogPriorityDropdownContentItemIcon

Icon for a priority dropdown item. 
<VeltCommentDialogPriorityDropdownContentItemIcon annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogPriorityDropdownContentItemName

Name display for a priority dropdown item. 
<VeltCommentDialogPriorityDropdownContentItemName annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogPriorityDropdownContentItemTick

Tick/checkmark for a priority dropdown item. 
<VeltCommentDialogPriorityDropdownContentItemTick annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogOptionsDropdown

Options menu for actions like assignment, editing, and notifications. See OptionsDropdownProps. 
<VeltCommentDialogOptionsDropdown
  annotationId="abc123"
  commentIndex={0}
  enableAssignment={true}
  enableEdit={true}
  enableNotifications={true}
  enablePrivateMode={true}
  enableMarkAsRead={true}
/>
Props:
PropTypeRequiredDescription
commentIndexnumberNoIndex of comment for options
enableAssignmentbooleanNoEnable assignment option
allowAssignmentbooleanNoV4 alias for enableAssignment
enableEditbooleanNoEnable edit option
allowEditbooleanNoV4 alias for enableEdit
enableNotificationsbooleanNoEnable notifications option
allowNotificationsbooleanNoV4 alias for enableNotifications
allowToggleNotificationbooleanNoV4 alias for enableNotifications
enablePrivateModebooleanNoEnable private mode option
allowPrivateModebooleanNoV4 alias for enablePrivateMode
allowChangeCommentAccessModebooleanNoV4 alias for enablePrivateMode
enableMarkAsReadbooleanNoEnable mark as read option
allowMarkAsReadbooleanNoV4 alias for enableMarkAsRead

​
VeltCommentDialogOptionsDropdownTrigger

Trigger button for the options dropdown. 
<VeltCommentDialogOptionsDropdownTrigger annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogOptionsDropdownContent

Content container for the options dropdown. 
<VeltCommentDialogOptionsDropdownContent
  annotationId="abc123"
  enableEdit={true}
/>
Props: Common inputs (see Common Inputs section) plus:
PropTypeRequiredDescription
commentObjany | stringNoComment data object (or serialized JSON string)
commentIndexnumber | stringNoIndex of comment in array
enableAssignmentbooleanNoShows the assign option
enableEditbooleanNoShows the edit option
enableNotificationsbooleanNoShows the notifications option
enablePrivateModebooleanNoShows the private mode option
enableMarkAsReadbooleanNoShows the mark-as-read option

​
VeltCommentDialogOptionsDropdownContentAssign

Assign option in the options dropdown. 
<VeltCommentDialogOptionsDropdownContentAssign annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogOptionsDropdownContentEdit

Edit option in the options dropdown. 
<VeltCommentDialogOptionsDropdownContentEdit annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogOptionsDropdownContentDelete

Delete option in the options dropdown. 
<VeltCommentDialogOptionsDropdownContentDelete annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogOptionsDropdownContentDeleteComment

Delete comment option in the options dropdown. 
<VeltCommentDialogOptionsDropdownContentDeleteComment annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogOptionsDropdownContentDeleteThread

Delete thread option in the options dropdown. 
<VeltCommentDialogOptionsDropdownContentDeleteThread annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogOptionsDropdownContentMakePrivate

Make private option container in the options dropdown.
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'.
<VeltCommentDialogOptionsDropdownContentMakePrivate annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogOptionsDropdownContentMakePrivateEnable

Enable private mode option.
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'.
<VeltCommentDialogOptionsDropdownContentMakePrivateEnable annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogOptionsDropdownContentMakePrivateDisable

Disable private mode option.
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'.
<VeltCommentDialogOptionsDropdownContentMakePrivateDisable annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogOptionsDropdownContentNotification

Notification option container in the options dropdown. 
<VeltCommentDialogOptionsDropdownContentNotification annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogOptionsDropdownContentNotificationSubscribe

Subscribe to notifications option. 
<VeltCommentDialogOptionsDropdownContentNotificationSubscribe annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogOptionsDropdownContentNotificationUnsubscribe

Unsubscribe from notifications option. 
<VeltCommentDialogOptionsDropdownContentNotificationUnsubscribe annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogOptionsDropdownContentMarkAsRead

Mark as read option container in the options dropdown. 
<VeltCommentDialogOptionsDropdownContentMarkAsRead annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogOptionsDropdownContentMarkAsReadMarkRead

Mark as read action option. 
<VeltCommentDialogOptionsDropdownContentMarkAsReadMarkRead annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogOptionsDropdownContentMarkAsReadMarkUnread

Mark as unread action option. 
<VeltCommentDialogOptionsDropdownContentMarkAsReadMarkUnread annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogCustomAnnotationDropdown

Custom annotation dropdown component. 
<VeltCommentDialogCustomAnnotationDropdown annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogCustomAnnotationDropdownTrigger

Trigger button for the custom annotation dropdown. 
<VeltCommentDialogCustomAnnotationDropdownTrigger annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogCustomAnnotationDropdownTriggerArrow

Arrow indicator for the custom annotation dropdown trigger. 
<VeltCommentDialogCustomAnnotationDropdownTriggerArrow annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogCustomAnnotationDropdownTriggerList

List container for the custom annotation dropdown trigger. 
<VeltCommentDialogCustomAnnotationDropdownTriggerList annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogCustomAnnotationDropdownTriggerListItem

Individual item in the custom annotation dropdown trigger list. See CustomAnnotationItemProps. 
<VeltCommentDialogCustomAnnotationDropdownTriggerListItem
  annotationId="abc123"
  item={itemData}
  index={0}
/>
Props:
PropTypeRequiredDescription
itemobjectNoItem data object
indexnumberNoItem index

​
VeltCommentDialogCustomAnnotationDropdownTriggerPlaceholder

Placeholder for the custom annotation dropdown trigger. 
<VeltCommentDialogCustomAnnotationDropdownTriggerPlaceholder annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogCustomAnnotationDropdownTriggerRemainingCount

Remaining count indicator for the custom annotation dropdown trigger. 
<VeltCommentDialogCustomAnnotationDropdownTriggerRemainingCount annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogCustomAnnotationDropdownContent

Content container for the custom annotation dropdown. 
<VeltCommentDialogCustomAnnotationDropdownContent annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogCustomAnnotationDropdownContentItem

Individual item in the custom annotation dropdown content. See CustomAnnotationItemProps. 
<VeltCommentDialogCustomAnnotationDropdownContentItem
  annotationId="abc123"
  item={itemData}
  index={0}
/>
Props:
PropTypeRequiredDescription
itemobjectNoItem data object
indexnumberNoItem index

​
VeltCommentDialogCustomAnnotationDropdownContentItemIcon

Icon for a custom annotation dropdown item. 
<VeltCommentDialogCustomAnnotationDropdownContentItemIcon annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogCustomAnnotationDropdownContentItemLabel

Label for a custom annotation dropdown item. 
<VeltCommentDialogCustomAnnotationDropdownContentItemLabel annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogReplyAvatars

Container for reply avatars. 
<VeltCommentDialogReplyAvatars annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogReplyAvatarsList

List container for reply avatars. 
<VeltCommentDialogReplyAvatarsList annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogReplyAvatarsListItem

Individual avatar item in the reply avatars list. See ReplyAvatarsListItemProps. 
<VeltCommentDialogReplyAvatarsListItem
  annotationId="abc123"
  user={userData}
  index={0}
/>
Props:
PropTypeRequiredDescription
userUserYesUser data object
indexnumberYesIndex of user in list

​
VeltCommentDialogReplyCount

Reply count display. 
<VeltCommentDialogReplyCount annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAssigneeBanner

Assignee banner container. 
<VeltCommentDialogAssigneeBanner annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAssigneeBannerResolved

Resolved state of the assignee banner. 
<VeltCommentDialogAssigneeBannerResolved annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAssigneeBannerUnresolved

Unresolved state of the assignee banner. 
<VeltCommentDialogAssigneeBannerUnresolved annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAssigneeBannerUnresolveButton

Button to unresolve the assignee banner. 
<VeltCommentDialogAssigneeBannerUnresolveButton annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltAutocomplete

To customize the wireframe appearance of autocomplete options, chips, and tooltips, see the Autocomplete Option and Autocomplete Chip Tooltip sections in the Comment Dialog wireframes page.
The autocomplete panel component accepts the following props for controlling selection mode, ordering, and data source. 
<VeltAutocomplete
  multiSelect={true}
  selectedFirstOrdering={true}
  readOnly={false}
  inline={true}
  contacts={myContacts}
/>
Props:
PropTypeDefaultDescription
multiSelectbooleanfalseAllows selecting multiple contacts
selectedFirstOrderingbooleanfalseShows selected items first in the list
readOnlybooleanfalseDisables user interaction
inlinebooleanfalseRenders the autocomplete inline rather than as a panel
contactsUserContact[]—Overrides the default contact list

​
VeltAutocompletePanel

Standalone autocomplete panel component (e.g. an inline user picker not tied to a text input). 
<VeltAutocompletePanel
  type="contact"
  multiSelect={true}
  selectedFirstOrdering={true}
  defaultCondition={false}
/>
Props:
PropTypeDefaultDescription
type'contact' | 'generic''contact'Type of options the panel renders
hideInputbooleanfalseHides the search input
placeholderstring—Placeholder text for the search input
multiSelectbooleanfalseAllows selecting multiple contacts
selectedFirstOrderingbooleanfalseShows selected items first in the list
readOnlybooleanfalseDisables user interaction
inlinebooleanfalseRenders the panel inline
enableOnFocusbooleanfalseOpens the panel when the input receives focus
position'above' | 'below' | 'auto' | string'auto'Position of the panel relative to its anchor
defaultConditionbooleantrueWhen false, the component always renders regardless of internal state

​
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 page. 
import { VeltWireframe, VeltAutocompleteEmptyWireframe } from '@veltdev/react';

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

​
VeltAutocompleteChip

Standalone autocomplete chip component for rendering selected contact chips. 
<VeltAutocompleteChip
  type="contact"
  email="user@example.com"
  userId="user-1"
/>
Props:
PropTypeRequiredDescription
type'contact' | 'custom' | 'group' | 'loading'NoChip type
emailstringNoContact email
userObjectanyNoUser data object (JSON object or serialized JSON string)
userIdstringNoUser ID

​
VeltAutocompleteOption

Standalone autocomplete option component for rendering contact/custom options. 
<VeltAutocompleteOption
  userId="user-1"
  userObject={userData}
/>
Props:
PropTypeRequiredDescription
userObjectanyNoUser data object (JSON object or serialized JSON string)
userIdstringNoUser ID

​
VeltAutocompleteOptionDescription

Standalone autocomplete option description component. 
<VeltAutocompleteOptionDescription field="email" />
Props:
PropTypeRequiredDescription
fieldstringNoField name to display from the user object

​
VeltAutocompleteOptionIcon

Icon for an autocomplete option. 
<VeltAutocompleteOptionIcon />
Props: Common inputs only (see Common Inputs section).

​
VeltAutocompleteOptionName

Name display for an autocomplete option. 
<VeltAutocompleteOptionName />
Props: Common inputs only (see Common Inputs section).

​
VeltAutocompleteOptionErrorIcon

Error icon for an autocomplete option. 
<VeltAutocompleteOptionErrorIcon />
Props: Common inputs only (see Common Inputs section).

​
VeltAutocompleteGroupOption

Group option in the autocomplete panel. 
<VeltAutocompleteGroupOption />
Props: Common inputs only (see Common Inputs section).

​
VeltAutocompleteTool

Tool component for the autocomplete panel. 
<VeltAutocompleteTool />
Props: Common inputs only (see Common Inputs section).

​
VeltAutocompleteEmpty

Empty state for the autocomplete panel. 
<VeltAutocompleteEmpty />
Props: Common inputs only (see Common Inputs section).

​
VeltAutocompleteChipTooltip

Tooltip for an autocomplete chip. 
<VeltAutocompleteChipTooltip />
Props: Common inputs only (see Common Inputs section).

​
VeltAutocompleteChipTooltipIcon

Icon within the autocomplete chip tooltip. 
<VeltAutocompleteChipTooltipIcon />
Props: Common inputs only (see Common Inputs section).

​
VeltAutocompleteChipTooltipName

Name display within the autocomplete chip tooltip. 
<VeltAutocompleteChipTooltipName />
Props: Common inputs only (see Common Inputs section).

​
VeltAutocompleteChipTooltipDescription

Description within the autocomplete chip tooltip. 
<VeltAutocompleteChipTooltipDescription />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogResolveButton

Button to resolve a comment thread. 
<VeltCommentDialogResolveButton annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogUnresolveButton

Button to unresolve a comment thread. 
<VeltCommentDialogUnresolveButton annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).
Button to copy the comment link to clipboard. 
<VeltCommentDialogCopyLink annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogCloseButton

Button to close the comment dialog. 
<VeltCommentDialogCloseButton annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogDeleteButton

Button to delete a comment. 
<VeltCommentDialogDeleteButton annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogPrivateBanner

Banner indicating a comment’s private status.
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).
<VeltCommentDialogPrivateBanner annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogPrivateButton

Button to toggle private mode on a comment. 
<VeltCommentDialogPrivateButton annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogGhostBanner

Banner displayed for ghost or anonymous comments. 
<VeltCommentDialogGhostBanner annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBanner

Banner displaying the current visibility setting for a comment. 
<VeltCommentDialogVisibilityBanner annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerIcon

Icon within the visibility banner. 
<VeltCommentDialogVisibilityBannerIcon annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerText

Text label within the visibility banner. 
<VeltCommentDialogVisibilityBannerText annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerDropdown

Dropdown for selecting visibility options within the banner. 
<VeltCommentDialogVisibilityBannerDropdown annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerDropdownTrigger

Trigger element for the visibility dropdown. 
<VeltCommentDialogVisibilityBannerDropdownTrigger annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerDropdownTriggerLabel

Label text within the visibility dropdown trigger. 
<VeltCommentDialogVisibilityBannerDropdownTriggerLabel annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerDropdownTriggerAvatarList

Avatar list within the visibility dropdown trigger showing selected users. 
<VeltCommentDialogVisibilityBannerDropdownTriggerAvatarList annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerDropdownTriggerAvatarListItem

Individual avatar within the trigger avatar list. 
<VeltCommentDialogVisibilityBannerDropdownTriggerAvatarListItem annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerDropdownTriggerAvatarListRemainingCount

Count of remaining avatars not displayed in the trigger list. 
<VeltCommentDialogVisibilityBannerDropdownTriggerAvatarListRemainingCount annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerDropdownTriggerIcon

Icon within the visibility dropdown trigger. 
<VeltCommentDialogVisibilityBannerDropdownTriggerIcon annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerDropdownContent

Content container for the visibility dropdown options. 
<VeltCommentDialogVisibilityBannerDropdownContent annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerDropdownContentItemIcon

Icon for a visibility option item in the dropdown. 
<VeltCommentDialogVisibilityBannerDropdownContentItemIcon annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerDropdownContentItemLabel

Label for a visibility option item in the dropdown. 
<VeltCommentDialogVisibilityBannerDropdownContentItemLabel annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerDropdownContentUserPicker

User picker for selecting specific users when visibility is set to selected-people. 
<VeltCommentDialogVisibilityBannerDropdownContentUserPicker annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
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(). 
<VeltCommentDialogVisibilityBannerDropdownContentOrgPicker annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerDropdownContentUserPickerSearch

Search container within the user picker. 
<VeltCommentDialogVisibilityBannerDropdownContentUserPickerSearch annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerDropdownContentUserPickerSearchIcon

Search icon within the user picker search. 
<VeltCommentDialogVisibilityBannerDropdownContentUserPickerSearchIcon annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerDropdownContentUserPickerSearchInput

Search input field within the user picker. 
<VeltCommentDialogVisibilityBannerDropdownContentUserPickerSearchInput annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerDropdownContentUserPickerHeader

Header section of the user picker. 
<VeltCommentDialogVisibilityBannerDropdownContentUserPickerHeader annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerDropdownContentUserPickerHeaderCount

Count of selected users displayed in the user picker header. 
<VeltCommentDialogVisibilityBannerDropdownContentUserPickerHeaderCount annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerDropdownContentUserPickerHeaderUnselectAll

Button to unselect all users in the user picker. 
<VeltCommentDialogVisibilityBannerDropdownContentUserPickerHeaderUnselectAll annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerDropdownContentUserPickerItem

Individual user item within the user picker. 
<VeltCommentDialogVisibilityBannerDropdownContentUserPickerItem annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerDropdownContentUserPickerItemAvatar

Avatar for a user item in the user picker. 
<VeltCommentDialogVisibilityBannerDropdownContentUserPickerItemAvatar annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerDropdownContentUserPickerItemInfo

Info text for a user item in the user picker. 
<VeltCommentDialogVisibilityBannerDropdownContentUserPickerItemInfo annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerDropdownContentUserPickerItemCheck

Check indicator for a selected user in the user picker. 
<VeltCommentDialogVisibilityBannerDropdownContentUserPickerItemCheck annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogSignIn

Sign-in prompt displayed to unauthenticated users. 
<VeltCommentDialogSignIn annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogNavigationButton

Button for navigating between comments. 
<VeltCommentDialogNavigationButton annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAttachmentButton

Button for adding file attachments to a comment. 
<VeltCommentDialogAttachmentButton annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogDeviceTypeIcons

Icons indicating the device type used when the comment was created. 
<VeltCommentDialogDeviceTypeIcons annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogCommentIndex

Display for the comment’s index position. 
<VeltCommentDialogCommentIndex annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogCommentNumber

Display for the comment’s number. 
<VeltCommentDialogCommentNumber annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogCommentCategory

Display for the comment’s category. 
<VeltCommentDialogCommentCategory annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogMetadata

Display for comment metadata. 
<VeltCommentDialogMetadata annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogThreads

Container for the comment threads. 
<VeltCommentDialogThreads annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAllComment

View for displaying all comments. 
<VeltCommentDialogAllComment annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogApprove

Approve button for comment approval workflows. 
<VeltCommentDialogApprove annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogUpgrade

Upgrade prompt component. 
<VeltCommentDialogUpgrade annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogMoreReply

Indicator showing additional replies are available. 
<VeltCommentDialogMoreReply annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
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. 
<VeltCommentDialogMoreReplyCount annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
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. 
<VeltCommentDialogMoreReplyText annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogHideReply

Button to hide replies in a thread. 
<VeltCommentDialogHideReply annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogToggleReply

Toggle control for showing or hiding replies. 
<VeltCommentDialogToggleReply annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogToggleReplyShow

Show-replies variant of the reply toggle. 
<VeltCommentDialogToggleReplyShow annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogToggleReplyHide

Hide-replies variant of the reply toggle. 
<VeltCommentDialogToggleReplyHide annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogToggleReplyCount

Reply count displayed within the reply toggle. 
<VeltCommentDialogToggleReplyCount annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogSuggestionAction

Container for suggestion accept/reject actions. 
<VeltCommentDialogSuggestionAction annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogSuggestionActionAccept

Button to accept a suggestion. 
<VeltCommentDialogSuggestionActionAccept annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogSuggestionActionReject

Button to reject a suggestion. 
<VeltCommentDialogSuggestionActionReject annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogCommentSuggestionStatus

Status indicator for a comment suggestion. 
<VeltCommentDialogCommentSuggestionStatus annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAssignDropdown

Dropdown for assigning a comment to a user. 
<VeltCommentDialogAssignDropdown annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAssignMenu

Menu for assignment options. 
<VeltCommentDialogAssignMenu annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogOptions

Options menu for the comment thread. 
<VeltCommentDialogOptions annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogPriority

Priority selector for the comment. 
<VeltCommentDialogPriority annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogStatus

Status selector for the comment. 
<VeltCommentDialogStatus annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogCustomAnnotationDropdown

Dropdown for custom annotation categories. 
<VeltCommentDialogCustomAnnotationDropdown annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionBanner

Container for the agent suggestion resolution banner shown after a suggestion is accepted or rejected. 
<VeltCommentDialogAgentSuggestionBanner annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionBannerAvatar

Avatar container within the agent suggestion resolution banner. 
<VeltCommentDialogAgentSuggestionBannerAvatar annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionBannerAvatarUserImage

User image within the banner avatar. 
<VeltCommentDialogAgentSuggestionBannerAvatarUserImage annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionBannerAvatarStatusIcon

Status icon within the banner avatar indicating accepted or rejected state. 
<VeltCommentDialogAgentSuggestionBannerAvatarStatusIcon annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionBannerLabel

Text label in the banner describing the resolution action (e.g. “Accepted” or “Rejected”). 
<VeltCommentDialogAgentSuggestionBannerLabel annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionBannerSeparator

Visual separator between the label and the resolver user name in the banner. 
<VeltCommentDialogAgentSuggestionBannerSeparator annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionBannerResolverUserName

Display name of the user who resolved the agent suggestion. 
<VeltCommentDialogAgentSuggestionBannerResolverUserName annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionBannerTimestamp

Timestamp showing when the agent suggestion was resolved. 
<VeltCommentDialogAgentSuggestionBannerTimestamp annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionHeaderTimestamp

Relative timestamp displayed in the suggestion header. 
<VeltCommentDialogAgentSuggestionHeaderTimestamp annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionHeaderMenu

Overflow menu (3-dot) in the suggestion header. 
<VeltCommentDialogAgentSuggestionHeaderMenu annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionHeaderMenuTrigger

Trigger button that opens the suggestion header overflow menu. 
<VeltCommentDialogAgentSuggestionHeaderMenuTrigger annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionHeaderMenuContent

Content container for the suggestion header overflow menu. 
<VeltCommentDialogAgentSuggestionHeaderMenuContent annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionHeaderMenuContentItem

Individual item within the suggestion header overflow menu. 
<VeltCommentDialogAgentSuggestionHeaderMenuContentItem annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionHeaderMenuContentItemIcon

Icon for an individual suggestion header menu item. 
<VeltCommentDialogAgentSuggestionHeaderMenuContentItemIcon annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionHeaderMenuContentItemLabel

Label for an individual suggestion header menu item. 
<VeltCommentDialogAgentSuggestionHeaderMenuContentItemLabel annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionBody

Body of the agent suggestion card, displaying the suggestion title and content. 
<VeltCommentDialogAgentSuggestionBody annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionFooter

Footer container of the agent suggestion card. 
<VeltCommentDialogAgentSuggestionFooter annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionFooterOpenComment

“Open Comment” affordance in the suggestion footer that navigates to the full comment thread. 
<VeltCommentDialogAgentSuggestionFooterOpenComment annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionActions

Accept/reject button group for the agent suggestion. 
<VeltCommentDialogAgentSuggestionActions annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionActionsActionAccept

Button to accept the agent suggestion. 
<VeltCommentDialogAgentSuggestionActionsActionAccept annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionActionsActionReject

Button to reject the agent suggestion. 
<VeltCommentDialogAgentSuggestionActionsActionReject annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionBanner

Container for the agent suggestion resolution banner shown after a suggestion is accepted or rejected. 
<VeltCommentDialogAgentSuggestionBanner annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionBannerAvatar

Avatar container within the agent suggestion resolution banner. 
<VeltCommentDialogAgentSuggestionBannerAvatar annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionBannerAvatarUserImage

User image within the banner avatar. 
<VeltCommentDialogAgentSuggestionBannerAvatarUserImage annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionBannerAvatarStatusIcon

Status icon within the banner avatar indicating accepted or rejected state. 
<VeltCommentDialogAgentSuggestionBannerAvatarStatusIcon annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionBannerLabel

Text label in the banner describing the resolution action (e.g. “Accepted” or “Rejected”). 
<VeltCommentDialogAgentSuggestionBannerLabel annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionBannerSeparator

Visual separator between the label and the resolver user name in the banner. 
<VeltCommentDialogAgentSuggestionBannerSeparator annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionBannerResolverUserName

Display name of the user who resolved the agent suggestion. 
<VeltCommentDialogAgentSuggestionBannerResolverUserName annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionBannerTimestamp

Timestamp showing when the agent suggestion was resolved. 
<VeltCommentDialogAgentSuggestionBannerTimestamp annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestion

Primitive components for rendering an AI agent suggestion card within a comment dialog. Props: CommentDialogAgentSuggestionProps

​
VeltCommentDialogAgentSuggestion

Container for the agent suggestion card. 
<VeltCommentDialogAgentSuggestion annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionHeader

Header section of the agent suggestion card, containing identity, timestamp, and menu. 
<VeltCommentDialogAgentSuggestionHeader annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionHeaderAgent

Agent-identity variant of the suggestion header, shown when the source is an AI agent. 
<VeltCommentDialogAgentSuggestionHeaderAgent annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionHeaderAuthor

Human-author variant of the suggestion header, shown when the source is a human user. 
<VeltCommentDialogAgentSuggestionHeaderAuthor annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionHeaderAgentAvatar

Agent avatar displayed in the agent-identity header variant. 
<VeltCommentDialogAgentSuggestionHeaderAgentAvatar annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionHeaderAgentName

Agent display name shown in the agent-identity header variant. 
<VeltCommentDialogAgentSuggestionHeaderAgentName annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionHeaderAuthorAvatar

Human author avatar displayed in the author-identity header variant. 
<VeltCommentDialogAgentSuggestionHeaderAuthorAvatar annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionHeaderAuthorName

Human author name shown in the author-identity header variant. 
<VeltCommentDialogAgentSuggestionHeaderAuthorName annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionHeaderTimestamp

Relative timestamp displayed in the suggestion header. 
<VeltCommentDialogAgentSuggestionHeaderTimestamp annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionHeaderMenu

Overflow menu (3-dot) in the suggestion header. 
<VeltCommentDialogAgentSuggestionHeaderMenu annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionHeaderMenuTrigger

Trigger button that opens the suggestion header overflow menu. 
<VeltCommentDialogAgentSuggestionHeaderMenuTrigger annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionHeaderMenuContent

Content container for the suggestion header overflow menu. 
<VeltCommentDialogAgentSuggestionHeaderMenuContent annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionHeaderMenuContentItem

Individual item within the suggestion header overflow menu. 
<VeltCommentDialogAgentSuggestionHeaderMenuContentItem annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionHeaderMenuContentItemIcon

Icon for an individual suggestion header menu item. 
<VeltCommentDialogAgentSuggestionHeaderMenuContentItemIcon annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionHeaderMenuContentItemLabel

Label for an individual suggestion header menu item. 
<VeltCommentDialogAgentSuggestionHeaderMenuContentItemLabel annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionBody

Body of the agent suggestion card, displaying the suggestion title and content. 
<VeltCommentDialogAgentSuggestionBody annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionFooter

Footer container of the agent suggestion card. 
<VeltCommentDialogAgentSuggestionFooter annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionFooterOpenComment

“Open Comment” affordance in the suggestion footer that navigates to the full comment thread. 
<VeltCommentDialogAgentSuggestionFooterOpenComment annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionActions

Accept/reject button group for the agent suggestion. 
<VeltCommentDialogAgentSuggestionActions annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionActionsActionAccept

Button to accept the agent suggestion. 
<VeltCommentDialogAgentSuggestionActionsActionAccept annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAgentSuggestionActionsActionReject

Button to reject the agent suggestion. 
<VeltCommentDialogAgentSuggestionActionsActionReject annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
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