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

​
Overview

<VeltWireframe>
    <VeltCommentDialogWireframe>
        <VeltCommentDialogWireframe.GhostBanner />
        <VeltCommentDialogWireframe.PrivateBanner />
        <VeltCommentDialogWireframe.AssigneeBanner />
        <VeltCommentDialogWireframe.Header />
        <VeltCommentDialogWireframe.PrivateBadge />
        <VeltCommentDialogWireframe.Body />
        <VeltCommentDialogWireframe.Composer />
        <VeltCommentDialogWireframe.AllComment />
        <VeltCommentDialogWireframe.Approve />
        <VeltCommentDialogWireframe.SignIn />
        <VeltCommentDialogWireframe.Upgrade />
        <VeltCommentDialogWireframe.SuggestionAction />
    </VeltCommentDialogWireframe>
</VeltWireframe>

​
Ghost Banner

<VeltWireframe>
    <VeltCommentDialogWireframe.GhostBanner />
</VeltWireframe>

​
Private Banner

<VeltWireframe>
    <VeltCommentDialogWireframe.PrivateBanner />
</VeltWireframe>

​
Assignee Banner

<VeltWireframe>
    <VeltCommentDialogWireframe.AssigneeBanner>
        <VeltCommentDialogWireframe.AssigneeBanner.ResolveButton />
        <VeltCommentDialogWireframe.AssigneeBanner.UserAvatar />
        <VeltCommentDialogWireframe.AssigneeBanner.UserName />
    </VeltCommentDialogWireframe.AssigneeBanner>
</VeltWireframe>

​
Resolve Button (Assignee Banner)

<VeltWireframe>
    <VeltCommentDialogWireframe.AssigneeBanner.ResolveButton />
</VeltWireframe>

​
User Avatar (Assignee Banner)

<VeltWireframe>
    <VeltCommentDialogWireframe.AssigneeBanner.UserAvatar />
</VeltWireframe>

​
User Name (Assignee Banner)

<VeltWireframe>
    <VeltCommentDialogWireframe.AssigneeBanner.UserName />
</VeltWireframe>

<VeltWireframe>
    <VeltCommentDialogWireframe.Header>
        // Pin Dialog Header
        <VeltCommentDialogWireframe.Status />
        <VeltCommentDialogWireframe.Priority />
        <VeltCommentDialogWireframe.Options />
        <VeltCommentDialogWireframe.CopyLink />
        <VeltCommentDialogWireframe.ResolveButton />
        <VeltCommentDialogWireframe.CustomAnnotationDropdown>

        // Sidebar Dialog Header
        <VeltCommentDialogWireframe.CommentIndex />
        <VeltCommentDialogWireframe.CommentNumber />
        <VeltCommentDialogWireframe.CommentCategory />
        <VeltCommentDialogWireframe.CommentSuggestionStatus />
        <VeltCommentDialogWireframe.NavigationButton />
    </VeltCommentDialogWireframe.Header>
</VeltWireframe>

​
Status (Header)

<VeltWireframe>
    <VeltCommentDialogWireframe.Status>
        <VeltCommentDialogWireframe.Status.Trigger />
        <VeltCommentDialogWireframe.Status.Content />
    </VeltCommentDialogWireframe.Status>
</VeltWireframe>

​
Trigger (Header Status)

<VeltWireframe>
    <VeltCommentDialogWireframe.Status.Trigger>
        <VeltCommentDialogWireframe.Status.Trigger.Icon />
        <VeltCommentDialogWireframe.Status.Trigger.Name />
        <VeltCommentDialogWireframe.Status.Trigger.Arrow />
    </VeltCommentDialogWireframe.Status.Trigger>
</VeltWireframe>
Icon (Header Status Trigger)
<VeltWireframe>
    <VeltCommentDialogWireframe.Status.Trigger.Icon />
</VeltWireframe>
Name (Header Status Trigger)
<VeltWireframe>
    <VeltCommentDialogWireframe.Status.Trigger.Name />
</VeltWireframe>
Arrow (Header Status Trigger)
<VeltWireframe>
    <VeltCommentDialogWireframe.Status.Trigger.Arrow />
</VeltWireframe>

​
Content (Header Status)

<VeltWireframe>
    <VeltCommentDialogWireframe.Status.Content>
        <VeltCommentDialogWireframe.Status.Content.Item />
    </VeltCommentDialogWireframe.Status.Content>
</VeltWireframe>
Item (Header Status Content)
<VeltWireframe>
    <VeltCommentDialogWireframe.Status.Content.Item>
        <VeltCommentDialogWireframe.Status.Content.Item.Icon />
        <VeltCommentDialogWireframe.Status.Content.Item.Name />
    </VeltCommentDialogWireframe.Status.Content.Item>
</VeltWireframe>
Icon (Header Status Content Item)
<VeltWireframe>
    <VeltCommentDialogWireframe.Status.Content.Item.Icon />
</VeltWireframe>
Name (Header Status Content Item)
<VeltWireframe>
    <VeltCommentDialogWireframe.Status.Content.Item.Name />
</VeltWireframe>

​
Priority (Header)

<VeltWireframe>
    <VeltCommentDialogWireframe.Priority>
        <VeltCommentDialogWireframe.Priority.Trigger />
        <VeltCommentDialogWireframe.Priority.Content />
    </VeltCommentDialogWireframe.Priority>
</VeltWireframe>

​
Trigger (Header Priority)

<VeltWireframe>
    <VeltCommentDialogWireframe.Priority.Trigger>
        <VeltCommentDialogWireframe.Priority.Trigger.Icon />
        <VeltCommentDialogWireframe.Priority.Trigger.Name />
        <VeltCommentDialogWireframe.Priority.Trigger.Arrow />
    </VeltCommentDialogWireframe.Priority.Trigger>
</VeltWireframe>
Icon (Header Priority Trigger)
<VeltWireframe>
    <VeltCommentDialogWireframe.Priority.Trigger.Icon />
</VeltWireframe>
Name (Header Priority Trigger)
<VeltWireframe>
    <VeltCommentDialogWireframe.Priority.Trigger.Name />
</VeltWireframe>
Arrow (Header Priority Trigger)
<VeltWireframe>
    <VeltCommentDialogWireframe.Priority.Trigger.Arrow />
</VeltWireframe>

​
Content (Header Priority)

<VeltWireframe>
    <VeltCommentDialogWireframe.Priority.Content>
        <VeltCommentDialogWireframe.Priority.Content.Item />
    </VeltCommentDialogWireframe.Priority.Content>
</VeltWireframe>
Item (Header Priority Content)
<VeltWireframe>
    <VeltCommentDialogWireframe.Priority.Content.Item>
        <VeltCommentDialogWireframe.Priority.Content.Item.Icon />
        <VeltCommentDialogWireframe.Priority.Content.Item.Name />
        <VeltCommentDialogWireframe.Priority.Content.Item.Tick />
    </VeltCommentDialogWireframe.Priority.Content.Item>
</VeltWireframe>
Icon (Header Priority Content Item)
<VeltWireframe>
    <VeltCommentDialogWireframe.Priority.Content.Item.Icon />
</VeltWireframe>
Name (Header Priority Content Item)
<VeltWireframe>
    <VeltCommentDialogWireframe.Priority.Content.Item.Name />
</VeltWireframe>
Tick (Header Priority Content Item)
<VeltWireframe>
    <VeltCommentDialogWireframe.Priority.Content.Item.Tick />
</VeltWireframe>

​
Options (Header)

<VeltWireframe>
    <VeltCommentDialogWireframe.Options>
        <VeltCommentDialogWireframe.Options.Trigger />
        <VeltCommentDialogWireframe.Options.Content />
    </VeltCommentDialogWireframe.Options>
</VeltWireframe>

​
Trigger (Header Options)

<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Trigger />
</VeltWireframe>

​
Content (Header Options)

<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content>
        <VeltCommentDialogWireframe.Options.Content.MakePrivate />
        <VeltCommentDialogWireframe.Options.Content.Assign />
        <VeltCommentDialogWireframe.Options.Content.Edit />
        <VeltCommentDialogWireframe.Options.Content.Delete />
        <VeltCommentDialogWireframe.Options.Content.Notification />
    </VeltCommentDialogWireframe.Options.Content>
</VeltWireframe>
Make Private (Header Options Content)
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content.MakePrivate>
        <VeltCommentDialogWireframe.Options.Content.MakePrivate.Enable />
        <VeltCommentDialogWireframe.Options.Content.MakePrivate.Disable />
    </VeltCommentDialogWireframe.Options.Content.MakePrivate>
</VeltWireframe>
Enable (Header Options Content Make Private)
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content.MakePrivate.Enable />
</VeltWireframe>
Disable (Header Options Content Make Private)
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content.MakePrivate.Disable />
</VeltWireframe>
Assign (Header Options Content)
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content.Assign />
</VeltWireframe>
Edit (Header Options Content)
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content.Edit />
</VeltWireframe>
Delete (Header Options Content)
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content.Delete>
        <VeltCommentDialogWireframe.Options.Content.Delete.Thread />
        <VeltCommentDialogWireframe.Options.Content.Delete.Comment />
    </VeltCommentDialogWireframe.Options.Content.Delete>
</VeltWireframe>
Thread (Header Options Content Delete)
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content.Delete.Thread />
</VeltWireframe>
Comment (Header Options Content Delete)
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content.Delete.Comment />
</VeltWireframe>
Notification (Header Options Content)
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content.Notification>
        <VeltCommentDialogWireframe.Options.Content.Notification.Subscribe />
        <VeltCommentDialogWireframe.Options.Content.Notification.Unsubscribe />
    </VeltCommentDialogWireframe.Options.Content.Notification>
</VeltWireframe>
Subscribe (Header Options Content Notification)
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content.Notification.Subscribe />
</VeltWireframe>
Unsubscribe (Header Options Content Notification)
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content.Notification.Unsubscribe />
</VeltWireframe>

<VeltWireframe>
    <VeltCommentDialogWireframe.CopyLink />
</VeltWireframe>

​
Resolve Button (Header)

<VeltWireframe>
    <VeltCommentDialogWireframe.ResolveButton />
</VeltWireframe>

​
Custom Annotation Dropdown (Header)

<VeltWireframe>
    <VeltCommentDialogWireframe.CustomAnnotationDropdown>
        <VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger />
        <VeltCommentDialogWireframe.CustomAnnotationDropdown.Content />
    </VeltCommentDialogWireframe.CustomAnnotationDropdown>
</VeltWireframe>

​
Trigger (Header Custom Annotation Dropdown)

<VeltWireframe>
    <VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger>
        <VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.List />
        <VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.RemainingCount />
        <VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.Placeholder />
        <VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.Arrow />
    </VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger>
</VeltWireframe>
List (Header Custom Annotation Dropdown Trigger)
<VeltWireframe>
    <VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.List>
        <VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.List.Item />
    </VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.List>
</VeltWireframe>
Item (Header Custom Annotation Dropdown Trigger List)
<VeltWireframe>
    <VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.List.Item />
</VeltWireframe>
Remaining Count (Header Custom Annotation Dropdown Trigger)
<VeltWireframe>
    <VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.RemainingCount />
</VeltWireframe>
Placeholder (Header Custom Annotation Dropdown Trigger)
<VeltWireframe>
    <VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.Placeholder />
</VeltWireframe>
Arrow (Header Custom Annotation Dropdown Trigger)
<VeltWireframe>
    <VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.Arrow />
</VeltWireframe>

​
Content (Header Custom Annotation Dropdown)

<VeltWireframe>
    <VeltCommentDialogWireframe.CustomAnnotationDropdown.Content>
        <VeltCommentDialogWireframe.CustomAnnotationDropdown.Content.Item />
    </VeltCommentDialogWireframe.CustomAnnotationDropdown.Content>
</VeltWireframe>
Item (Header Custom Annotation Dropdown Content)
<VeltWireframe>
    <VeltCommentDialogWireframe.CustomAnnotationDropdown.Content.Item>
        <VeltCommentDialogWireframe.CustomAnnotationDropdown.Content.Item.Label />
        <VeltCommentDialogWireframe.CustomAnnotationDropdown.Content.Item.Icon />
    </VeltCommentDialogWireframe.CustomAnnotationDropdown.Content.Item>
</VeltWireframe>
Label (Header Custom Annotation Dropdown Content Item)
<VeltWireframe>
    <VeltCommentDialogWireframe.CustomAnnotationDropdown.Content.Item.Label />
</VeltWireframe>
Icon (Header Custom Annotation Dropdown Content Item)
<VeltWireframe>
    <VeltCommentDialogWireframe.CustomAnnotationDropdown.Content.Item.Icon />
</VeltWireframe>

​
Comment Index (Header)

<VeltWireframe>
    <VeltCommentDialogWireframe.CommentIndex />
</VeltWireframe>

​
Comment Number (Header)

The annotation number displays in the comment dialog header, providing a persistent identifier for each comment that remains constant across sessions. This number makes it easy to reference specific comments in team discussions or documentation. 
<VeltWireframe>
    <VeltCommentDialogWireframe.CommentNumber />
</VeltWireframe>

​
Comment Category (Header)

<VeltWireframe>
    <VeltCommentDialogWireframe.CommentCategory />
</VeltWireframe>

​
Comment Suggestion Status (Header)

<VeltWireframe>
    <VeltCommentDialogWireframe.CommentSuggestionStatus />
</VeltWireframe>

<VeltWireframe>
    <VeltCommentDialogWireframe.NavigationButton />
</VeltWireframe>

​
Private Badge

<VeltWireframe>
    <VeltCommentDialogWireframe.PrivateBadge />
</VeltWireframe>

​
Body

<VeltWireframe>
    <VeltCommentDialogWireframe.Body>
        <VeltCommentDialogWireframe.Threads />
        <VeltCommentDialogWireframe.ToggleReply />
        <VeltCommentDialogWireframe.HideReply />
        <VeltCommentDialogWireframe.ReplyAvatars />
    </VeltCommentDialogWireframe.Body>
</VeltWireframe>

​
Threads (Body)

<VeltWireframe>
    <VeltCommentDialogWireframe.Threads>
        <VeltCommentDialogWireframe.ThreadCard />
        <VeltCommentDialogWireframe.MoreReply />
    </VeltCommentDialogWireframe.Threads>
</VeltWireframe>

​
Thread Card (Body Threads)

<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard>
        <VeltCommentDialogWireframe.ThreadCard.Avatar />
        <VeltCommentDialogWireframe.ThreadCard.Name />
        <VeltCommentDialogWireframe.ThreadCard.Time />
        <VeltCommentDialogWireframe.ThreadCard.Unread />
        <VeltCommentDialogWireframe.ThreadCard.SeenDropdown />
        <VeltCommentDialogWireframe.ThreadCard.Edited />
        <VeltCommentDialogWireframe.ThreadCard.DeviceType />
        <VeltCommentDialogWireframe.ThreadCard.ReactionTool />
        <VeltCommentDialogWireframe.ThreadCard.Options />
        <VeltCommentDialogWireframe.ThreadCard.Message />
        <VeltCommentDialogWireframe.ThreadCard.Reactions />
        <VeltCommentDialogWireframe.ThreadCard.Attachments />
        <VeltCommentDialogWireframe.ThreadCard.Recordings />
        <VeltCommentDialogWireframe.ThreadCard.Reply />
        <VeltReactionToolWireframe />
        <VeltReactionPinWireframe />
        <VeltReactionsPanelWireframe />
        <VeltReactionPinTooltipWireframe />
        <VeltAutocompleteChipTooltipWireframe />
    </VeltCommentDialogWireframe.ThreadCard>
</VeltWireframe>
Avatar (Body Threads Thread Card)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Avatar />
</VeltWireframe>
Name (Body Threads Thread Card)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Name />
</VeltWireframe>
Unread (Body Threads Thread Card)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Unread />
</VeltWireframe>
Seen Dropdown (Body Threads Thread Card)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.SeenDropdown>
        <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Trigger />
        <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content />
    </VeltCommentDialogWireframe.ThreadCard.SeenDropdown>
</VeltWireframe>
Trigger (Body Threads Thread Card Seen Dropdown)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Trigger />
</VeltWireframe>
Content (Body Threads Thread Card Seen Dropdown)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content>
        <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Title />
        <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items />
    </VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content>
</VeltWireframe>
Title (Body Threads Thread Card Seen Dropdown Content)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Title />
</VeltWireframe>
Items (Body Threads Thread Card Seen Dropdown Content)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items>
        <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items.Item />
    </VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items>
</VeltWireframe>
Item (Body Threads Thread Card Seen Dropdown Content Items)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items.Item> 
        <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items.Item.Time />
        <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items.Item.Name />
        <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items.Item.Avatar />
    </VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items.Item> 
</VeltWireframe>
Time (Body Threads Thread Card Seen Dropdown Content Items Item)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items.Item.Time />
</VeltWireframe>
Name (Body Threads Thread Card Seen Dropdown Content Items Item)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items.Item.Name />
</VeltWireframe>
Avatar (Body Threads Thread Card Seen Dropdown Content Items Item)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items.Item.Avatar />
</VeltWireframe>
Time (Body Threads Thread Card)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Time />
</VeltWireframe>
Device Type (Body Threads Thread Card)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.DeviceType />
</VeltWireframe>
Edited (Body Threads Thread Card)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Edited />
</VeltWireframe>
Options (Body Threads Thread Card)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Options>
        <VeltCommentDialogWireframe.ThreadCard.Options.Trigger />
        <VeltCommentDialogWireframe.ThreadCard.Options.Content />
    </VeltCommentDialogWireframe.ThreadCard.Options>
</VeltWireframe>
Trigger (Body Threads Thread Card Options)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Options.Trigger />
</VeltWireframe>
Content (Body Threads Thread Card Options)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Options.Content>
        <VeltCommentDialogWireframe.ThreadCard.Options.Content.Edit />
        <VeltCommentDialogWireframe.ThreadCard.Options.Content.Delete />
    </VeltCommentDialogWireframe.ThreadCard.Options.Content>
</VeltWireframe>
Edit (Body Threads Thread Card Options Content)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Options.Content.Edit />
</VeltWireframe>
Delete (Body Threads Thread Card Options Content)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Options.Content.Delete>
        <VeltCommentDialogWireframe.ThreadCard.Options.Content.Delete.Thread />
        <VeltCommentDialogWireframe.ThreadCard.Options.Content.Delete.Comment />
    </VeltCommentDialogWireframe.ThreadCard.Options.Content.Delete>
</VeltWireframe>
Thread (Body Threads Thread Card Options Content Delete)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Options.Content.Delete.Thread />
</VeltWireframe>
Comment (Body Threads Thread Card Options Content Delete)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Options.Content.Delete.Comment />
</VeltWireframe>
Message (Body Threads Thread Card)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Message />
</VeltWireframe>
Reaction Tool (Body Threads Thread Card)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.ReactionTool />
</VeltWireframe>
Reactions (Body Threads Thread Card)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Reactions />
</VeltWireframe>
Attachments (Body Threads Thread Card)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Attachments>
        <VeltCommentDialogWireframe.ThreadCard.Attachments.Image />
        <VeltCommentDialogWireframe.ThreadCard.Attachments.Other />
    </VeltCommentDialogWireframe.ThreadCard.Attachments>
</VeltWireframe>
Image (Body Threads Thread Card Attachments)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Attachments.Image>
        <VeltCommentDialogWireframe.ThreadCard.Attachments.Image.Preview />
        <VeltCommentDialogWireframe.ThreadCard.Attachments.Image.Delete />
        <VeltCommentDialogWireframe.ThreadCard.Attachments.Image.Download />
    </VeltCommentDialogWireframe.ThreadCard.Attachments.Image>
</VeltWireframe>
Preview (Body Threads Thread Card Attachments Image)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Attachments.Image.Preview />
</VeltWireframe>
Delete (Body Threads Thread Card Attachments Image)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Attachments.Image.Delete />
</VeltWireframe>
Download (Body Threads Thread Card Attachments Image)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Attachments.Image.Download />
</VeltWireframe>
Other (Body Threads Thread Card Attachments)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Attachments.Other>
        <VeltCommentDialogWireframe.ThreadCard.Attachments.Other.Delete />
        <VeltCommentDialogWireframe.ThreadCard.Attachments.Other.Download />
        <VeltCommentDialogWireframe.ThreadCard.Attachments.Other.Icon />
        <VeltCommentDialogWireframe.ThreadCard.Attachments.Other.Name />
        <VeltCommentDialogWireframe.ThreadCard.Attachments.Other.Size />
    </VeltCommentDialogWireframe.ThreadCard.Attachments.Other>
</VeltWireframe>
Delete (Body Threads Thread Card Attachments Other)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Attachments.Other.Delete />
</VeltWireframe>
Download (Body Threads Thread Card Attachments Other)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Attachments.Other.Download />
</VeltWireframe>
Icon (Body Threads Thread Card Attachments Other)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Attachments.Other.Icon />
</VeltWireframe>
Name (Body Threads Thread Card Attachments Other)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Attachments.Other.Name />
</VeltWireframe>
Size (Body Threads Thread Card Attachments Other)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Attachments.Other.Size />
</VeltWireframe>
Recordings (Body Threads Thread Card)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Recordings />
</VeltWireframe>
Autocomplete Chip Tooltip (Body Threads Thread Card)
<VeltWireframe>
    <VeltAutocompleteChipTooltipWireframe>
        <VeltAutocompleteChipTooltipWireframe.Icon />
        <VeltAutocompleteChipTooltipWireframe.Name />
        <VeltAutocompleteChipTooltipWireframe.Description />
    </VeltAutocompleteChipTooltipWireframe>
</VeltWireframe>
Icon (Body Threads Thread Card Autocomplete Chip Tooltip)
<VeltWireframe>
    <VeltAutocompleteChipTooltipWireframe.Icon />
</VeltWireframe>
Name (Body Threads Thread Card Autocomplete Chip Tooltip)
<VeltWireframe>
    <VeltAutocompleteChipTooltipWireframe.Name />
</VeltWireframe>
Description (Body Threads Thread Card Autocomplete Chip Tooltip)
<VeltWireframe>
    <VeltAutocompleteChipTooltipWireframe.Description />
</VeltWireframe>
Reactions Panel (Body Threads Thread Card)
<VeltWireframe>
    <VeltReactionsPanelWireframe>
        <VeltReactionsPanelWireframe.Items />
    </VeltReactionsPanelWireframe>
</VeltWireframe>
Items (Body Threads Thread Card Reactions Panel)
<VeltWireframe>
    <VeltReactionsPanelWireframe.Items>
        <VeltReactionsPanelWireframe.Items.Item />
    </VeltReactionsPanelWireframe.Items>
</VeltWireframe>
Item (Body Threads Thread Card Reactions Panel Items)
<VeltWireframe>
    <VeltReactionsPanelWireframe.Items.Item>
        <VeltReactionsPanelWireframe.Items.Item.Emoji />
    </VeltReactionsPanelWireframe.Items.Item>
</VeltWireframe>
Emoji (Body Threads Thread Card Reactions Panel Items Item)
<VeltWireframe>
    <VeltReactionsPanelWireframe.Items.Item.Emoji />
</VeltWireframe>
Reaction Pin (Body Threads Thread Card)
<VeltWireframe>
    <VeltReactionPinWireframe>
        <VeltReactionPinWireframe.Emoji />
        <VeltReactionPinWireframe.Count />
    </VeltReactionPinWireframe>
</VeltWireframe>
Emoji (Body Threads Thread Card Reaction Pin)
<VeltWireframe>
    <VeltReactionPinWireframe.Emoji />
</VeltWireframe>
Count (Body Threads Thread Card Reaction Pin)
<VeltWireframe>
    <VeltReactionPinWireframe.Count />
</VeltWireframe>
Reaction Pin Tooltip (Body Threads Thread Card)
<VeltWireframe>
    <VeltReactionPinTooltipWireframe>
        <VeltReactionPinTooltipWireframe.Users />
    </VeltReactionPinTooltipWireframe>
</VeltWireframe>
Users (Body Threads Thread Card Reaction Pin Tooltip)
<VeltWireframe>
    <VeltReactionPinTooltipWireframe.Users>
        <VeltReactionPinTooltipWireframe.Users.User />
    </VeltReactionPinTooltipWireframe.Users>
</VeltWireframe>
User (Body Threads Thread Card Reaction Pin Tooltip Users)
<VeltWireframe>
    <VeltReactionPinTooltipWireframe.Users.User>
        <VeltReactionPinTooltipWireframe.Users.User.Avatar />
        <VeltReactionPinTooltipWireframe.Users.User.Name />
    </VeltReactionPinTooltipWireframe.Users.User>
</VeltWireframe>
Avatar (Body Threads Thread Card Reaction Pin Tooltip Users User)
<VeltWireframe>
    <VeltReactionPinTooltipWireframe.Users.User.Avatar />
</VeltWireframe>
Name (Body Threads Thread Card Reaction Pin Tooltip Users User)
<VeltWireframe>
    <VeltReactionPinTooltipWireframe.Users.User.Name />
</VeltWireframe>
Reaction Tool (Body Threads Thread Card)
<VeltWireframe>
    <VeltReactionToolWireframe>
        {/* Your custom element */}
    </VeltReactionToolWireframe>
</VeltWireframe>
Reply (Body Threads Thread Card)
The Reply component provides a quick reply button on each comment thread card, enabling users to respond directly without expanding the full comment dialog. This streamlines the commenting workflow in collaborative environments. This button is hidden by default and can be enabled through wireframe customization. 
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Reply />
</VeltWireframe>

​
MoreReply (Body Threads)

<VeltWireframe>
    <VeltCommentDialogWireframe.MoreReply />
</VeltWireframe>

​
Reply Avatars (Body)

<VeltWireframe>
    <VeltCommentDialogWireframe.ReplyAvatars>
        <VeltCommentDialogWireframe.ReplyAvatars.List />
        <VeltCommentDialogWireframe.ReplyAvatars.RemainingCount />
    </VeltCommentDialogWireframe.ReplyAvatars>
</VeltWireframe>

​
List (Body Reply Avatars)

<VeltWireframe>
    <VeltCommentDialogWireframe.ReplyAvatars.List>
        <VeltCommentDialogWireframe.ReplyAvatars.List.Item />
    </VeltCommentDialogWireframe.ReplyAvatars.List>
</VeltWireframe>
Item (Body Reply Avatars List)
<VeltWireframe>
    <VeltCommentDialogWireframe.ReplyAvatars.List.Item />
</VeltWireframe>

​
Remaining Count (Body Reply Avatars)

<VeltWireframe>
    <VeltCommentDialogWireframe.ReplyAvatars.RemainingCount />
</VeltWireframe>

​
Toggle Reply (Body)

<VeltWireframe>
    <VeltCommentDialogWireframe.ToggleReply>
        <VeltCommentDialogWireframe.ToggleReply.Icon />
        <VeltCommentDialogWireframe.ToggleReply.Count />
        <VeltCommentDialogWireframe.ToggleReply.Text />
    </VeltCommentDialogWireframe.ToggleReply>
</VeltWireframe>

​
Icon (Body Toggle Reply)

<VeltWireframe>
    <VeltCommentDialogWireframe.ToggleReply.Icon />
</VeltWireframe>

​
Count (Body Toggle Reply)

<VeltWireframe>
    <VeltCommentDialogWireframe.ToggleReply.Count />
</VeltWireframe>

​
Text (Body Toggle Reply)

<VeltWireframe>
    <VeltCommentDialogWireframe.ToggleReply.Text />
</VeltWireframe>

​
Hide Reply (Body)

The Hide Reply component adds a button to hide replies in the comment dialog, letting you control when replies are visible to match your workflow. 
<VeltWireframe>
    <VeltCommentDialogWireframe.HideReply />
</VeltWireframe>

​
Composer

<VeltWireframe>
    <VeltCommentDialogWireframe.Composer>
        <VeltCommentDialogWireframe.Composer.Avatar />
        <VeltCommentDialogWireframe.Composer.Input />
        <VeltCommentDialogWireframe.Composer.Attachments />
        <VeltCommentDialogWireframe.Composer.Recordings />
        <VeltCommentDialogWireframe.Composer.ActionButton type="autocomplete" hotkey="@" />
        <VeltCommentDialogWireframe.Composer.ActionButton type="autocomplete" hotkey="#" />
        <VeltCommentDialogWireframe.Composer.ActionButton type="file | attachments" />
        <VeltCommentDialogWireframe.Composer.ActionButton type="audio" />
        <VeltCommentDialogWireframe.Composer.ActionButton type="video" />
        <VeltCommentDialogWireframe.Composer.ActionButton type="screen" />
        <VeltCommentDialogWireframe.Composer.ActionButton type="submit" />
        <VeltCommentDialogWireframe.Composer.AssignUser />
        <VeltAutocompleteOptionWireframe />
        <VeltAutocompleteGroupOptionWireframe />
    </VeltCommentDialogWireframe.Composer>
</VeltWireframe>

​
Avatar (Composer)

<VeltWireframe>
    <VeltCommentDialogWireframe.Composer.Avatar />
</VeltWireframe>

​
Attachments (Composer)

<VeltWireframe>
    <VeltCommentDialogWireframe.Composer.Attachments>
        <VeltCommentDialogWireframe.Composer.Attachments.Selected />
        <VeltCommentDialogWireframe.Composer.Attachments.Invalid />
    </VeltCommentDialogWireframe.Composer.Attachments>
</VeltWireframe>

​
Selected (Composer Attachments)

<VeltWireframe>
    <VeltCommentDialogWireframe.Composer.Attachments.Selected>
        <VeltCommentDialogWireframe.Composer.Attachments.Selected.Image />
        <VeltCommentDialogWireframe.Composer.Attachments.Selected.Other />
    </VeltCommentDialogWireframe.Composer.Attachments.Selected>
</VeltWireframe>
Image (Composer Attachments Selected)
<VeltWireframe>
    <VeltCommentDialogWireframe.Composer.Attachments.Selected.Image>
        <VeltCommentDialogWireframe.Composer.Attachments.Selected.Image.Preview />
        <VeltCommentDialogWireframe.Composer.Attachments.Selected.Image.Delete />
        <VeltCommentDialogWireframe.Composer.Attachments.Selected.Image.Loading />
    </VeltCommentDialogWireframe.Composer.Attachments.Selected.Image>
</VeltWireframe>
Other (Composer Attachments Selected)
<VeltWireframe>
    <VeltCommentDialogWireframe.Composer.Attachments.Selected.Other>
        <VeltCommentDialogWireframe.Composer.Attachments.Selected.Other.Delete />
        <VeltCommentDialogWireframe.Composer.Attachments.Selected.Other.Loading />
        <VeltCommentDialogWireframe.Composer.Attachments.Selected.Other.Icon />
        <VeltCommentDialogWireframe.Composer.Attachments.Selected.Other.Name />
        <VeltCommentDialogWireframe.Composer.Attachments.Selected.Other.Size />
    </VeltCommentDialogWireframe.Composer.Attachments.Selected.Other>
</VeltWireframe>

​
Invalid (Composer Attachments)

<VeltWireframe>
    <VeltCommentDialogWireframe.Composer.Attachments.Invalid>
        <VeltCommentDialogWireframe.Composer.Attachments.Invalid.Item />
    </VeltCommentDialogWireframe.Composer.Attachments.Invalid>
</VeltWireframe>
Item (Composer Attachments Invalid)
<VeltWireframe>
    <VeltCommentDialogWireframe.Composer.Attachments.Invalid.Item>
        <VeltCommentDialogWireframe.Composer.Attachments.Invalid.Item.Preview />
        <VeltCommentDialogWireframe.Composer.Attachments.Invalid.Item.Message />
        <VeltCommentDialogWireframe.Composer.Attachments.Invalid.Item.Delete />
    </VeltCommentDialogWireframe.Composer.Attachments.Invalid.Item>
</VeltWireframe>

​
Recordings (Composer)

<VeltWireframe>
    <VeltCommentDialogWireframe.Composer.Recordings />
</VeltWireframe>

​
Input (Composer)

<VeltWireframe>
    <VeltCommentDialogWireframe.Composer.Input />
</VeltWireframe>

​
Action Button (Composer)

<VeltWireframe>
    <VeltCommentDialogWireframe.Composer.ActionButton type="autocomplete" hotkey="@" />
    <VeltCommentDialogWireframe.Composer.ActionButton type="autocomplete" hotkey="#" />
    <VeltCommentDialogWireframe.Composer.ActionButton type="file | attachments" />
    <VeltCommentDialogWireframe.Composer.ActionButton type="audio" />
    <VeltCommentDialogWireframe.Composer.ActionButton type="video" />
    <VeltCommentDialogWireframe.Composer.ActionButton type="screen" />
    <VeltCommentDialogWireframe.Composer.ActionButton type="submit" />
</VeltWireframe>

​
Assign User (Composer)

<VeltWireframe>
    <VeltCommentDialogWireframe.Composer.AssignUser />
</VeltWireframe>

​
Autocomplete Option (Composer)

<VeltWireframe>
    <VeltAutocompleteOptionWireframe>
        <VeltAutocompleteOptionWireframe.Icon />
        <VeltAutocompleteOptionWireframe.Name />
        <VeltAutocompleteOptionWireframe.Description field='name' />
        <VeltAutocompleteOptionWireframe.ErrorIcon />
    </VeltAutocompleteOptionWireframe>
</VeltWireframe>

​
Icon (Composer Autocomplete Option)

<VeltWireframe>
    <VeltAutocompleteOptionWireframe.Icon />
</VeltWireframe>

​
Name (Composer Autocomplete Option)

<VeltWireframe>
    <VeltAutocompleteOptionWireframe.Name />
</VeltWireframe>

​
Description (Composer Autocomplete Option)

<VeltWireframe>
    <VeltAutocompleteOptionWireframe.Description field='name' />
</VeltWireframe>

​
Error Icon (Composer Autocomplete Option)

<VeltWireframe>
    <VeltAutocompleteOptionWireframe.ErrorIcon />
</VeltWireframe>

​
Autocomplete Group Option (Composer)

<VeltWireframe>
    <VeltAutocompleteGroupOptionWireframe />
</VeltWireframe>

​
All Comment

<VeltWireframe>
    <VeltCommentDialogWireframe.AllComment />
</VeltWireframe>

​
Approve

<VeltWireframe>
    <VeltCommentDialogWireframe.Approve />
</VeltWireframe>

​
Sign In

<VeltWireframe>
    <VeltCommentDialogWireframe.SignIn />
</VeltWireframe>

​
Upgrade

<VeltWireframe>
    <VeltCommentDialogWireframe.Upgrade />
</VeltWireframe>

​
Suggestion Action

<VeltWireframe>
    <VeltCommentDialogWireframe.SuggestionAction>
        <VeltCommentDialogWireframe.SuggestionAction.Accept />
        <VeltCommentDialogWireframe.SuggestionAction.Reject />
    </VeltCommentDialogWireframe.SuggestionAction>
</VeltWireframe>

​
Accept (Suggestion Action)

<VeltWireframe>
    <VeltCommentDialogWireframe.SuggestionAction.Accept />
</VeltWireframe>

​
Reject (Suggestion Action)

<VeltWireframe>
    <VeltCommentDialogWireframe.SuggestionAction.Reject />
</VeltWireframe>

​
Styling

​
Disable ShadowDOM

  • By default, ShadowDOM is used to ensure that your app’s CSS does not interfere with the styling of the SDK components.
  • Disable the shadow dom to apply your custom CSS to the component.
Default: true
Example
<VeltComments dialogShadowDom={false} />
API methods
const commentElement = client.getCommentElement();
commentElement.enableDialogShadowDOM();
commentElement.disableDialogShadowDOM();

​
Dark Mode

By default, all components are in Light Mode, but there are several properties and methods to enable Dark Mode. Default: false Below are the examples to enable Dark Mode for comments dialog:
Example
<VeltComments dialogDarkMode={true}/>
API methods
const commentElement = client.getCommentElement();
commentElement.enableDarkMode();
commentElement.disableDarkMode();

​
Pre-defined Variants

The Comment Dialog has 2 pre-defined variants:
  • dialog: this will customize the Comment Dialog only within Pin, Area, and Text Comments
  • sidebar: this will customize the Comment Dialog only within Sidebar comments
To use them, set the variant name in the wireframe template equal to one of the pre-defined variants. You do not need to add it to the actual Velt component.
React / Next.js
 <VeltWireframe>
    {/* This pre-defined variant will change the appearance of the Comment Dialog within Pin, Area, and Text comments only */}
    <VeltCommentDialogWireframe variant="dialog">
        ...
    </VeltCommentDialogWireframe>

    {/* This pre-defined variant will change the appearance of the Comment Dialog within the Sidebar only */}
    <VeltCommentDialogWireframe variant="sidebar">
        ...
    </VeltCommentDialogWireframe>

    {/* If you dont use any variants, then customization will be applied to the Comment Dialog globally */}
    <VeltCommentDialogWireframe>
        ...
    </VeltCommentDialogWireframe>
</VeltWireframe>