From ac62abc527f1d1bd097159deaa7871879972a9f4 Mon Sep 17 00:00:00 2001 From: yoen-velt Date: Mon, 29 Jun 2026 19:34:18 -0400 Subject: [PATCH] Refresh UI customization docs from guide --- api-reference/sdk/api/api-methods.mdx | 2 +- api-reference/sdk/models/data-models.mdx | 31 +- .../v1/customize-behavior.mdx | 6 +- .../v2/customize-behavior.mdx | 6 +- .../comments-sidebar/v2/setup.mdx | 2 +- .../comments/customize-behavior.mdx | 5 +- .../comment-composer/overview.mdx | 2 +- .../comment-thread/overview.mdx | 2 +- docs.json | 806 +- public/custom.css | 0 realtime-collaboration/crdt/overview.mdx | 30 +- .../single-editor-mode/setup.mdx | 2 +- release-notes/3-0-0.mdx | 16 +- release-notes/archive/aug-13-2024.mdx | 2 +- release-notes/archive/july-18-2024.mdx | 2 +- release-notes/archive/july-29-2024.mdx | 2 +- release-notes/archive/july-31-2024.mdx | 4 +- release-notes/archive/june-6-2024.mdx | 40 +- release-notes/archive/may-17-2024.mdx | 2 +- release-notes/archive/may-24-2024.mdx | 24 +- release-notes/version-4/sdk-changelog.mdx | 44 +- release-notes/version-5/sdk-changelog.mdx | 26 +- ui-customization/.DS_Store | Bin 6148 -> 0 bytes ui-customization/build-gotchas.mdx | 36 + ui-customization/build-methodology.mdx | 97 + ui-customization/combining-approaches.mdx | 119 + ui-customization/conditional-templates.mdx | 186 +- ui-customization/context.mdx | 92 + ui-customization/custom-action-component.mdx | 449 -- ui-customization/debugging.mdx | 82 + ui-customization/decision-tree.mdx | 176 + .../edge-cases-and-limitations.mdx | 92 + ui-customization/extraction.mdx | 51 + ui-customization/features/.DS_Store | Bin 6148 -> 0 bytes ui-customization/features/activity-log.mdx | 53 + .../annotations-tags-arrows-areas.mdx | 60 + ui-customization/features/async/.DS_Store | Bin 10244 -> 0 bytes .../activity-logs-primitives.mdx | 643 -- .../activity-logs-wireframe-variables.mdx | 443 -- .../activity-logs-wireframes.mdx | 593 -- .../async/area/wireframe-variables.mdx | 93 - .../features/async/arrows/custom-button.mdx | 44 - .../features/async/arrows/parts.mdx | 37 - .../features/async/arrows/slots.mdx | 58 - .../features/async/arrows/variables.mdx | 1 - .../async/arrows/wireframe-variables.mdx | 106 - .../features/async/comments/.DS_Store | Bin 6148 -> 0 bytes .../autocomplete-wireframe-variables.mdx | 219 - .../comments/comment-bubble/primitives.mdx | 85 - .../comment-bubble/wireframe-variables.mdx | 263 - .../comments/comment-bubble/wireframes.mdx | 171 - .../comments/comment-dialog-structure.mdx | 624 -- .../comments/comment-dialog/primitives.mdx | 5682 -------------- .../comment-dialog/wireframe-variables.mdx | 1656 ----- .../comments/comment-dialog/wireframes.mdx | 5518 -------------- .../async/comments/comment-pin/primitives.mdx | 149 - .../async/comments/comment-pin/wireframes.mdx | 252 - .../comments/comment-player-timeline.mdx | 30 - .../comment-sidebar-button/primitives.mdx | 79 - .../wireframe-variables.mdx | 217 - .../comment-sidebar-button/wireframes.mdx | 167 - .../comments/comment-sidebar-structure-v2.mdx | 193 - .../comments/comment-sidebar-structure.mdx | 687 -- .../comment-sidebar-components.mdx | 6553 ----------------- .../comment-sidebar-v2-primitives.mdx | 1747 ----- .../comment-sidebar-v2-wireframes.mdx | 1303 ---- .../comment-sidebar-wireframe-variables.mdx | 577 -- .../comment-tool-wireframe-variables.mdx | 105 - .../features/async/comments/comment-tool.mdx | 75 - .../async/comments/comment-video-player.mdx | 30 - .../async/comments/confirm-dialog.mdx | 141 - .../inline-comments-section/primitives.mdx | 578 -- .../wireframe-variables.mdx | 317 - .../inline-comments-section/wireframes.mdx | 533 -- .../multithread-comments/primitives.mdx | 596 -- .../wireframe-variables.mdx | 317 - .../multithread-comments/wireframes.mdx | 198 - .../persistent-comment-mode-banner.mdx | 138 - .../comment-composer.mdx | 101 - .../standalone-components/comment-thread.mdx | 102 - .../comments/text-comment-primitives.mdx | 29 - .../text-comment-wireframe-variables.mdx | 210 - .../text-comment-tool/primitives.mdx | 27 - .../text-comment-tool/wireframes.mdx | 95 - .../text-comment-toolbar/primitives.mdx | 122 - .../text-comment-toolbar/wireframes.mdx | 177 - .../features/async/inline-reactions.mdx | 224 - .../notifications-panel/primitives.mdx | 1630 ---- .../wireframe-variables.mdx | 512 -- .../notifications-panel/wireframes.mdx | 1385 ---- .../notifications-tool/primitives.mdx | 117 - .../wireframe-variables.mdx | 203 - .../notifications-tool/wireframes.mdx | 109 - .../async/reactions-wireframe-variables.mdx | 206 - .../features/async/recorder/control-panel.mdx | 896 --- .../async/recorder/media-source-settings.mdx | 326 - .../recorder/recorder-player-expanded.mdx | 534 -- .../async/recorder/recorder-player.mdx | 709 -- .../features/async/recorder/recorder-tool.mdx | 253 - .../recording-preview-steps-dialog.mdx | 864 --- .../features/async/recorder/subtitles.mdx | 204 - .../transcription-wireframe-variables.mdx | 218 - .../features/async/recorder/transcription.mdx | 744 -- .../features/async/recorder/video-editor.mdx | 861 --- .../async/recorder/wireframe-variables.mdx | 420 -- .../async/rewriter/wireframe-variables.mdx | 113 - .../async/tag/wireframe-variables.mdx | 69 - .../view-analytics/wireframe-variables.mdx | 103 - .../features/comment-surfaces.mdx | 74 + .../features/mentions-and-autocomplete.mdx | 55 + ui-customization/features/notifications.mdx | 77 + ui-customization/features/other-features.mdx | 29 + .../features/presence-and-cursors.mdx | 73 + ui-customization/features/reactions.mdx | 62 + ui-customization/features/realtime/.DS_Store | Bin 6148 -> 0 bytes .../realtime/cursors-wireframe-variables.mdx | 162 - .../features/realtime/cursors.mdx | 212 - .../features/realtime/huddle/parts.mdx | 37 - .../features/realtime/huddle/slots.mdx | 97 - .../features/realtime/huddle/variables.mdx | 1 - .../realtime/huddle/wireframe-variables.mdx | 282 - .../live-selection-wireframe-variables.mdx | 66 - .../features/realtime/live-selection.mdx | 44 - .../realtime/presence-wireframe-variables.mdx | 174 - .../features/realtime/presence.mdx | 243 - .../features/realtime/single-editor-mode.mdx | 278 - .../features/recorder-and-transcription.mdx | 61 + ui-customization/headless.mdx | 160 + ui-customization/how-it-works.mdx | 85 + ui-customization/layout.mdx | 517 +- ui-customization/localisation.mdx | 184 +- ui-customization/overview.mdx | 134 +- ui-customization/patterns-and-tips.mdx | 238 + ui-customization/primitives.mdx | 228 + ui-customization/reference/apis.mdx | 689 ++ ui-customization/reference/behaviors.mdx | 195 + .../reference/behaviors/comments-core.mdx | 220 + .../reference/behaviors/dialog.mdx | 222 + .../reference/behaviors/notifications.mdx | 107 + .../reference/behaviors/pins-tools.mdx | 133 + .../behaviors/presence-reactions.mdx | 126 + .../reference/behaviors/recorder-huddle.mdx | 196 + .../reference/behaviors/sidebar.mdx | 246 + .../reference/component-catalog.mdx | 257 + .../reference/component-config.mdx | 200 + .../reference/component-definitions.mdx | 874 +++ ui-customization/reference/css-classes.mdx | 1112 +++ ui-customization/reference/css-variables.mdx | 616 ++ ui-customization/reference/data-models.mdx | 430 ++ ui-customization/reference/events.mdx | 204 + ui-customization/reference/feature-flags.mdx | 169 + ui-customization/reference/hooks.mdx | 156 + ui-customization/reference/manifest.mdx | 45 + ui-customization/reference/primitives.mdx | 561 ++ ui-customization/reference/props.mdx | 831 +++ .../reference/source-of-truth-invariant.mdx | 47 + .../reference/wireframe-components.mdx | 1115 +++ ui-customization/rules.mdx | 168 + ui-customization/sdk-gaps-and-blockers.mdx | 107 + ui-customization/setup.mdx | 350 +- ui-customization/styling.mdx | 627 +- ui-customization/template-variables.mdx | 505 +- .../verifying-a-customization.mdx | 127 + 163 files changed, 12966 insertions(+), 46572 deletions(-) create mode 100644 public/custom.css delete mode 100644 ui-customization/.DS_Store create mode 100644 ui-customization/build-gotchas.mdx create mode 100644 ui-customization/build-methodology.mdx create mode 100644 ui-customization/combining-approaches.mdx create mode 100644 ui-customization/context.mdx delete mode 100644 ui-customization/custom-action-component.mdx create mode 100644 ui-customization/debugging.mdx create mode 100644 ui-customization/decision-tree.mdx create mode 100644 ui-customization/edge-cases-and-limitations.mdx create mode 100644 ui-customization/extraction.mdx delete mode 100644 ui-customization/features/.DS_Store create mode 100644 ui-customization/features/activity-log.mdx create mode 100644 ui-customization/features/annotations-tags-arrows-areas.mdx delete mode 100644 ui-customization/features/async/.DS_Store delete mode 100644 ui-customization/features/async/activity-logs/activity-logs-primitives.mdx delete mode 100644 ui-customization/features/async/activity-logs/activity-logs-wireframe-variables.mdx delete mode 100644 ui-customization/features/async/activity-logs/activity-logs-wireframes.mdx delete mode 100644 ui-customization/features/async/area/wireframe-variables.mdx delete mode 100644 ui-customization/features/async/arrows/custom-button.mdx delete mode 100644 ui-customization/features/async/arrows/parts.mdx delete mode 100644 ui-customization/features/async/arrows/slots.mdx delete mode 100644 ui-customization/features/async/arrows/variables.mdx delete mode 100644 ui-customization/features/async/arrows/wireframe-variables.mdx delete mode 100644 ui-customization/features/async/comments/.DS_Store delete mode 100644 ui-customization/features/async/comments/autocomplete-wireframe-variables.mdx delete mode 100644 ui-customization/features/async/comments/comment-bubble/primitives.mdx delete mode 100644 ui-customization/features/async/comments/comment-bubble/wireframe-variables.mdx delete mode 100644 ui-customization/features/async/comments/comment-bubble/wireframes.mdx delete mode 100644 ui-customization/features/async/comments/comment-dialog-structure.mdx delete mode 100644 ui-customization/features/async/comments/comment-dialog/primitives.mdx delete mode 100644 ui-customization/features/async/comments/comment-dialog/wireframe-variables.mdx delete mode 100644 ui-customization/features/async/comments/comment-dialog/wireframes.mdx delete mode 100644 ui-customization/features/async/comments/comment-pin/primitives.mdx delete mode 100644 ui-customization/features/async/comments/comment-pin/wireframes.mdx delete mode 100644 ui-customization/features/async/comments/comment-player-timeline.mdx delete mode 100644 ui-customization/features/async/comments/comment-sidebar-button/primitives.mdx delete mode 100644 ui-customization/features/async/comments/comment-sidebar-button/wireframe-variables.mdx delete mode 100644 ui-customization/features/async/comments/comment-sidebar-button/wireframes.mdx delete mode 100644 ui-customization/features/async/comments/comment-sidebar-structure-v2.mdx delete mode 100644 ui-customization/features/async/comments/comment-sidebar-structure.mdx delete mode 100644 ui-customization/features/async/comments/comment-sidebar/comment-sidebar-components.mdx delete mode 100644 ui-customization/features/async/comments/comment-sidebar/comment-sidebar-v2-primitives.mdx delete mode 100644 ui-customization/features/async/comments/comment-sidebar/comment-sidebar-v2-wireframes.mdx delete mode 100644 ui-customization/features/async/comments/comment-sidebar/comment-sidebar-wireframe-variables.mdx delete mode 100644 ui-customization/features/async/comments/comment-tool-wireframe-variables.mdx delete mode 100644 ui-customization/features/async/comments/comment-tool.mdx delete mode 100644 ui-customization/features/async/comments/comment-video-player.mdx delete mode 100644 ui-customization/features/async/comments/confirm-dialog.mdx delete mode 100644 ui-customization/features/async/comments/inline-comments-section/primitives.mdx delete mode 100644 ui-customization/features/async/comments/inline-comments-section/wireframe-variables.mdx delete mode 100644 ui-customization/features/async/comments/inline-comments-section/wireframes.mdx delete mode 100644 ui-customization/features/async/comments/multithread-comments/primitives.mdx delete mode 100644 ui-customization/features/async/comments/multithread-comments/wireframe-variables.mdx delete mode 100644 ui-customization/features/async/comments/multithread-comments/wireframes.mdx delete mode 100644 ui-customization/features/async/comments/persistent-comment-mode-banner.mdx delete mode 100644 ui-customization/features/async/comments/standalone-components/comment-composer.mdx delete mode 100644 ui-customization/features/async/comments/standalone-components/comment-thread.mdx delete mode 100644 ui-customization/features/async/comments/text-comment-primitives.mdx delete mode 100644 ui-customization/features/async/comments/text-comment-wireframe-variables.mdx delete mode 100644 ui-customization/features/async/comments/text-comment/text-comment-tool/primitives.mdx delete mode 100644 ui-customization/features/async/comments/text-comment/text-comment-tool/wireframes.mdx delete mode 100644 ui-customization/features/async/comments/text-comment/text-comment-toolbar/primitives.mdx delete mode 100644 ui-customization/features/async/comments/text-comment/text-comment-toolbar/wireframes.mdx delete mode 100644 ui-customization/features/async/inline-reactions.mdx delete mode 100644 ui-customization/features/async/notifications/notifications-panel/primitives.mdx delete mode 100644 ui-customization/features/async/notifications/notifications-panel/wireframe-variables.mdx delete mode 100644 ui-customization/features/async/notifications/notifications-panel/wireframes.mdx delete mode 100644 ui-customization/features/async/notifications/notifications-tool/primitives.mdx delete mode 100644 ui-customization/features/async/notifications/notifications-tool/wireframe-variables.mdx delete mode 100644 ui-customization/features/async/notifications/notifications-tool/wireframes.mdx delete mode 100644 ui-customization/features/async/reactions-wireframe-variables.mdx delete mode 100644 ui-customization/features/async/recorder/control-panel.mdx delete mode 100644 ui-customization/features/async/recorder/media-source-settings.mdx delete mode 100644 ui-customization/features/async/recorder/recorder-player-expanded.mdx delete mode 100644 ui-customization/features/async/recorder/recorder-player.mdx delete mode 100644 ui-customization/features/async/recorder/recorder-tool.mdx delete mode 100644 ui-customization/features/async/recorder/recording-preview-steps-dialog.mdx delete mode 100644 ui-customization/features/async/recorder/subtitles.mdx delete mode 100644 ui-customization/features/async/recorder/transcription-wireframe-variables.mdx delete mode 100644 ui-customization/features/async/recorder/transcription.mdx delete mode 100644 ui-customization/features/async/recorder/video-editor.mdx delete mode 100644 ui-customization/features/async/recorder/wireframe-variables.mdx delete mode 100644 ui-customization/features/async/rewriter/wireframe-variables.mdx delete mode 100644 ui-customization/features/async/tag/wireframe-variables.mdx delete mode 100644 ui-customization/features/async/view-analytics/wireframe-variables.mdx create mode 100644 ui-customization/features/comment-surfaces.mdx create mode 100644 ui-customization/features/mentions-and-autocomplete.mdx create mode 100644 ui-customization/features/notifications.mdx create mode 100644 ui-customization/features/other-features.mdx create mode 100644 ui-customization/features/presence-and-cursors.mdx create mode 100644 ui-customization/features/reactions.mdx delete mode 100644 ui-customization/features/realtime/.DS_Store delete mode 100644 ui-customization/features/realtime/cursors-wireframe-variables.mdx delete mode 100644 ui-customization/features/realtime/cursors.mdx delete mode 100644 ui-customization/features/realtime/huddle/parts.mdx delete mode 100644 ui-customization/features/realtime/huddle/slots.mdx delete mode 100644 ui-customization/features/realtime/huddle/variables.mdx delete mode 100644 ui-customization/features/realtime/huddle/wireframe-variables.mdx delete mode 100644 ui-customization/features/realtime/live-selection-wireframe-variables.mdx delete mode 100644 ui-customization/features/realtime/live-selection.mdx delete mode 100644 ui-customization/features/realtime/presence-wireframe-variables.mdx delete mode 100644 ui-customization/features/realtime/presence.mdx delete mode 100644 ui-customization/features/realtime/single-editor-mode.mdx create mode 100644 ui-customization/features/recorder-and-transcription.mdx create mode 100644 ui-customization/headless.mdx create mode 100644 ui-customization/how-it-works.mdx create mode 100644 ui-customization/patterns-and-tips.mdx create mode 100644 ui-customization/primitives.mdx create mode 100644 ui-customization/reference/apis.mdx create mode 100644 ui-customization/reference/behaviors.mdx create mode 100644 ui-customization/reference/behaviors/comments-core.mdx create mode 100644 ui-customization/reference/behaviors/dialog.mdx create mode 100644 ui-customization/reference/behaviors/notifications.mdx create mode 100644 ui-customization/reference/behaviors/pins-tools.mdx create mode 100644 ui-customization/reference/behaviors/presence-reactions.mdx create mode 100644 ui-customization/reference/behaviors/recorder-huddle.mdx create mode 100644 ui-customization/reference/behaviors/sidebar.mdx create mode 100644 ui-customization/reference/component-catalog.mdx create mode 100644 ui-customization/reference/component-config.mdx create mode 100644 ui-customization/reference/component-definitions.mdx create mode 100644 ui-customization/reference/css-classes.mdx create mode 100644 ui-customization/reference/css-variables.mdx create mode 100644 ui-customization/reference/data-models.mdx create mode 100644 ui-customization/reference/events.mdx create mode 100644 ui-customization/reference/feature-flags.mdx create mode 100644 ui-customization/reference/hooks.mdx create mode 100644 ui-customization/reference/manifest.mdx create mode 100644 ui-customization/reference/primitives.mdx create mode 100644 ui-customization/reference/props.mdx create mode 100644 ui-customization/reference/source-of-truth-invariant.mdx create mode 100644 ui-customization/reference/wireframe-components.mdx create mode 100644 ui-customization/rules.mdx create mode 100644 ui-customization/sdk-gaps-and-blockers.mdx create mode 100644 ui-customization/verifying-a-customization.mdx diff --git a/api-reference/sdk/api/api-methods.mdx b/api-reference/sdk/api/api-methods.mdx index 736b9f196..43c4744ea 100644 --- a/api-reference/sdk/api/api-methods.mdx +++ b/api-reference/sdk/api/api-methods.mdx @@ -3851,7 +3851,7 @@ Reset the state of Velt Button components. - Params: (optional) [VeltResetButtonStateConfig](/api-reference/sdk/models/data-models#veltresetbuttonstateconfig) - Returns: `void` - React Hook: `n/a` -- [Full Documentation →](/ui-customization/custom-action-component#reset-velt-button-state) +- [Full Documentation →](/ui-customization/patterns-and-tips#reset-a-veltbuttonwireframe-after-app-logic-runs) diff --git a/api-reference/sdk/models/data-models.mdx b/api-reference/sdk/models/data-models.mdx index bdc338fc5..b64db7f85 100644 --- a/api-reference/sdk/models/data-models.mdx +++ b/api-reference/sdk/models/data-models.mdx @@ -2550,11 +2550,11 @@ class ReactionMetadata extends BaseMetadata { ### Comment Dialog Primitives -Types for the 92+ primitive components used to build custom comment dialog interfaces. See [Comment Dialog Primitives Overview](/ui-customization/features/async/comments/comment-dialog/primitives) for usage examples. +Types for the 92+ primitive components used to build custom comment dialog interfaces. See [`Primitive components`](/ui-customization/reference/primitives) for the complete component list and [`Primitives`](/ui-customization/primitives) for usage guidance. #### CommentDialogCommonProps -## [Usage Examples →](/ui-customization/features/async/comments/comment-dialog/primitives#common-inputs) +Related docs: [`Primitives`](/ui-customization/primitives) for implementation guidance and [`Primitive components`](/ui-customization/reference/primitives) for the exported component list. Base props inherited by all Comment Dialog primitive components. @@ -2568,7 +2568,7 @@ Base props inherited by all Comment Dialog primitive components. #### CommentDialogContextWrapperProps -## [Usage Examples →](/ui-customization/features/async/comments/comment-dialog/primitives#veltcommentdialogcontextwrapper) +Related docs: [`Primitives`](/ui-customization/primitives) for implementation guidance and [`Primitive components`](/ui-customization/reference/primitives) for the exported component list. Props for the VeltCommentDialogContextWrapper component. @@ -2582,7 +2582,7 @@ Props for the VeltCommentDialogContextWrapper component. #### ThreadCardProps -## [Usage Examples →](/ui-customization/features/async/comments/comment-dialog/primitives#veltcommentdialogthreadcard) +Related docs: [`Primitives`](/ui-customization/primitives) for implementation guidance and [`Primitive components`](/ui-customization/reference/primitives) for the exported component list. Props for VeltCommentDialogThreadCard with priority-based comment lookup. @@ -2596,7 +2596,7 @@ Inherits all properties from [`CommentDialogCommonProps`](#commentdialogcommonpr #### CommentIndexProps -## [Usage Examples →](/ui-customization/features/async/comments/comment-dialog/primitives#veltcommentdialogthreadcardavatar) +Related docs: [`Primitives`](/ui-customization/primitives) for implementation guidance and [`Primitive components`](/ui-customization/reference/primitives) for the exported component list. Props for thread card sub-components that require a comment index. @@ -2608,7 +2608,7 @@ Inherits all properties from [`CommentDialogCommonProps`](#commentdialogcommonpr #### ComposerProps -## [Usage Examples →](/ui-customization/features/async/comments/comment-dialog/primitives#veltcommentdialogcomposer) +Related docs: [`Primitives`](/ui-customization/primitives) for implementation guidance and [`Primitive components`](/ui-customization/reference/primitives) for the exported component list. Props for VeltCommentDialogComposer with placeholder and edit mode options. @@ -2628,7 +2628,7 @@ Inherits all properties from [`CommentDialogCommonProps`](#commentdialogcommonpr #### ComposerInputProps -## [Usage Examples →](/ui-customization/features/async/comments/comment-dialog/primitives#veltcommentdialogcomposerinput) +Related docs: [`Primitives`](/ui-customization/primitives) for implementation guidance and [`Primitive components`](/ui-customization/reference/primitives) for the exported component list. Props for VeltCommentDialogComposerInput. @@ -2640,7 +2640,7 @@ Inherits all properties from [`CommentDialogCommonProps`](#commentdialogcommonpr #### StatusDropdownItemProps -## [Usage Examples →](/ui-customization/features/async/comments/comment-dialog/primitives#veltcommentdialogstatusdropdowncontentitem) +Related docs: [`Primitives`](/ui-customization/primitives) for implementation guidance and [`Primitive components`](/ui-customization/reference/primitives) for the exported component list. Props for VeltCommentDialogStatusDropdownContentItem with priority-based status lookup. @@ -2654,7 +2654,7 @@ Inherits all properties from [`CommentDialogCommonProps`](#commentdialogcommonpr #### PriorityDropdownItemProps -## [Usage Examples →](/ui-customization/features/async/comments/comment-dialog/primitives#veltcommentdialogprioritydropdowncontentitem) +Related docs: [`Primitives`](/ui-customization/primitives) for implementation guidance and [`Primitive components`](/ui-customization/reference/primitives) for the exported component list. Props for VeltCommentDialogPriorityDropdownContentItem with priority-based priority lookup. @@ -2668,7 +2668,7 @@ Inherits all properties from [`CommentDialogCommonProps`](#commentdialogcommonpr #### OptionsDropdownProps -## [Usage Examples →](/ui-customization/features/async/comments/comment-dialog/primitives#veltcommentdialogoptionsdropdown) +Related docs: [`Primitives`](/ui-customization/primitives) for implementation guidance and [`Primitive components`](/ui-customization/reference/primitives) for the exported component list. Props for VeltCommentDialogOptionsDropdown with feature enable flags. @@ -2692,7 +2692,7 @@ Inherits all properties from [`CommentDialogCommonProps`](#commentdialogcommonpr #### CustomAnnotationItemProps -## [Usage Examples →](/ui-customization/features/async/comments/comment-dialog/primitives#veltcommentdialogcustomannotationdropdowntriggerlistitem) +Related docs: [`Primitives`](/ui-customization/primitives) for implementation guidance and [`Primitive components`](/ui-customization/reference/primitives) for the exported component list. Props for custom annotation dropdown items. @@ -2705,7 +2705,7 @@ Inherits all properties from [`CommentDialogCommonProps`](#commentdialogcommonpr #### ReplyAvatarsListItemProps -## [Usage Examples →](/ui-customization/features/async/comments/comment-dialog/primitives#veltcommentdialogreplyavatarslistitem) +Related docs: [`Primitives`](/ui-customization/primitives) for implementation guidance and [`Primitive components`](/ui-customization/reference/primitives) for the exported component list. Props for VeltCommentDialogReplyAvatarsListItem. @@ -2718,7 +2718,7 @@ Inherits all properties from [`CommentDialogCommonProps`](#commentdialogcommonpr #### CommentDialogAgentSuggestionProps -## [Usage Examples →](/ui-customization/features/async/comments/comment-dialog/primitives#veltcommentdialogagentsuggestion) +Related docs: [`Primitives`](/ui-customization/primitives) for implementation guidance and [`Primitive components`](/ui-customization/reference/primitives) for the exported component list. Props for VeltCommentDialogAgentSuggestion and its sub-components. @@ -4453,10 +4453,11 @@ Defines the time window and activity cap for a single batching scope. ### Notification Primitives -Types for the primitive components used to build custom notification interfaces. See [Notifications Primitives](/ui-customization/features/async/notifications/notifications-primitives) for usage examples. +Types for the primitive components used to build custom notification interfaces. See [`Primitive components`](/ui-customization/reference/primitives) for the complete component list and [`Primitives`](/ui-customization/primitives) for usage guidance. #### NotificationsPrimitiveCommonProps -[Usage Examples →](/ui-customization/features/async/notifications/notifications-primitives#common-inputs) +Related docs: [`Primitives`](/ui-customization/primitives) for implementation guidance and [`Primitive components`](/ui-customization/reference/primitives) for the exported component list. + --- Base props inherited by all Notification primitive components. diff --git a/async-collaboration/comments-sidebar/v1/customize-behavior.mdx b/async-collaboration/comments-sidebar/v1/customize-behavior.mdx index 520c3f4e0..d0577caa9 100644 --- a/async-collaboration/comments-sidebar/v1/customize-behavior.mdx +++ b/async-collaboration/comments-sidebar/v1/customize-behavior.mdx @@ -5,7 +5,7 @@ title: "Customize Behavior" # Custom filtering, sorting and grouping - Here is the overview on how it works: - Enable custom actions in the comments sidebar. - - Add [Velt Button Wireframe](/ui-customization/custom-action-component) to the sidebar wireframe. + - Add the Velt button wireframe to the sidebar wireframe. See [Bridge a wireframe button to your app logic](/ui-customization/patterns-and-tips#bridge-a-wireframe-button-to-your-app-logic-the-onclick-escape-hatch). - Handle click events and lifecycle events to apply custom filtering, sorting, and grouping logic. - Update sidebar data. - Here are the steps to implement it: @@ -42,7 +42,7 @@ title: "Customize Behavior" - - Learn more about how to setup [Velt Button Wireframe](/ui-customization/custom-action-component). + - Learn more about how to set up a [wireframe button for app logic](/ui-customization/patterns-and-tips#bridge-a-wireframe-button-to-your-app-logic-the-onclick-escape-hatch). - Set default state using the `active` prop. - Handle `veltButtonClick` event to implement custom filtering, sorting, and grouping logic. It returns [VeltButtonClickEvent](/api-reference/sdk/models/data-models#veltbuttonclickevent). @@ -609,7 +609,7 @@ Default: `true` - Enabling this mode also adds a navigation button in the comment dialog. Clicking it will navigate to the comment and trigger a callback. Learn more about it [here](#oncommentnavigationbuttonclick). - If you had previously used a wireframe for the comment dialog, you will need to add the [navigation button wireframe](/ui-customization/features/async/comments/comment-dialog/wireframes#header) and the [focused thread wireframe](/ui-customization/features/async/comments/comment-sidebar-structure-v2). + If you had previously used a wireframe for the comment dialog, you will need to add the navigation button wireframe and the focused thread wireframe. See the [`Component catalog`](/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree) and [`Wireframe components`](/ui-customization/reference/wireframe-components) for the current slot names. diff --git a/async-collaboration/comments-sidebar/v2/customize-behavior.mdx b/async-collaboration/comments-sidebar/v2/customize-behavior.mdx index 661610afb..51877cf6a 100644 --- a/async-collaboration/comments-sidebar/v2/customize-behavior.mdx +++ b/async-collaboration/comments-sidebar/v2/customize-behavior.mdx @@ -105,7 +105,7 @@ Default: `[]` A **path predicate** is a rule that keeps only comments whose value at a given field path matches. For example, `{ path: 'from.userId', value: '1.1' }` keeps comments authored by the user with id `1.1`. The `value` is a literal (there is no `@me` token), and paths auto-flatten nested arrays (e.g. `comments.taggedUserContacts.contact.userId`). -Each dropdown is rendered by the filter-dropdown primitive ([`VeltCommentSidebarV2FilterDropdown`](/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-v2-primitives#veltcommentsidebarv2filterdropdown) / `velt-comment-sidebar-filter-dropdown-v2`). +Each dropdown is rendered by the filter-dropdown primitive (`VeltCommentSidebarV2FilterDropdown` / `velt-comment-sidebar-filter-dropdown-v2`). See [`Primitive components`](/ui-customization/reference/primitives) for the current primitive list. The examples below show one dropdown per `type`. @@ -240,7 +240,7 @@ To match several paths in one quick filter, give an action a list of `conditions -Prefer configuring dropdowns through `minimalFilters` as shown above. If you need to place or restyle a dropdown directly in your own markup, you can set these same inputs on the filter-dropdown primitive — see [Comment Sidebar V2 Primitives](/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-v2-primitives#veltcommentsidebarv2filterdropdown). +Prefer configuring dropdowns through `minimalFilters` as shown above. If you need to place or restyle a dropdown directly in your own markup, you can set these same inputs on the filter-dropdown primitive — see [`Primitives`](/ui-customization/primitives) and [`Primitive components`](/ui-customization/reference/primitives). #### defaultMinimalFilter @@ -1192,5 +1192,5 @@ commentElement.toggleCommentSidebar(); -For V2 wireframe and primitive customization, see [Comment Sidebar V2 Structure](/ui-customization/features/async/comments/comment-sidebar-structure-v2) and [Comment Sidebar V2 Primitives](/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-v2-primitives). The sidebar is shadow-DOM isolated by default. +For V2 wireframe and primitive customization, start with the [`Component catalog`](/ui-customization/reference/component-catalog#sidebar-slot-trees), then use [`Wireframe components`](/ui-customization/reference/wireframe-components) for the complete slot tree and [`Primitive components`](/ui-customization/reference/primitives) for the primitive list. The sidebar is shadow-DOM isolated by default. diff --git a/async-collaboration/comments-sidebar/v2/setup.mdx b/async-collaboration/comments-sidebar/v2/setup.mdx index 31b3be6af..9157dac9b 100644 --- a/async-collaboration/comments-sidebar/v2/setup.mdx +++ b/async-collaboration/comments-sidebar/v2/setup.mdx @@ -41,4 +41,4 @@ export default function App() { For V2 props reference, see [`VeltCommentsSidebarV2Props`](/api-reference/sdk/models/data-models#veltcommentssidebarv2props). -For V2 wireframe customization, see [Comment Sidebar V2 UI Customization](/ui-customization/features/async/comments/comment-sidebar-structure-v2). +For V2 wireframe customization, start with the [`Component catalog`](/ui-customization/reference/component-catalog#sidebar-slot-trees), then use [`Wireframe components`](/ui-customization/reference/wireframe-components) for the complete slot tree. diff --git a/async-collaboration/comments/customize-behavior.mdx b/async-collaboration/comments/customize-behavior.mdx index 6d7b13b5e..9e82680d4 100644 --- a/async-collaboration/comments/customize-behavior.mdx +++ b/async-collaboration/comments/customize-behavior.mdx @@ -904,7 +904,7 @@ Programmatically submit a comment from a composer. Enables custom buttons or key - Params: [`SubmitCommentRequest`](/api-reference/sdk/models/data-models#submitcommentrequest) - Returns: `void` -- See also: [Comment Composer targetComposerElementId](/ui-customization/features/async/comments/standalone-components/comment-composer#target-composer-element-id) +- See also: [Comment Composer targetComposerElementId](/async-collaboration/comments/standalone-components/comment-composer/customize-behavior) @@ -7878,7 +7878,7 @@ commentElement.disableInlineCommentMode(); - By default comments are single threaded. - You can make it multithreaded by setting `multiThread` prop to `true`. -- If you had previously used a wireframe for the comment dialog, you will need to add the [multithread wireframe](/ui-customization/features/async/comments/multithread-comment-dialog). +- If you had previously used a wireframe for the comment dialog, you will need to add the [multithread wireframe](/ui-customization/reference/component-catalog#multi-thread-comment-dialog). - Default: `false` @@ -9298,4 +9298,3 @@ subscription?.unsubscribe() ``` - diff --git a/async-collaboration/comments/standalone-components/comment-composer/overview.mdx b/async-collaboration/comments/standalone-components/comment-composer/overview.mdx index 7b13393b4..288725864 100644 --- a/async-collaboration/comments/standalone-components/comment-composer/overview.mdx +++ b/async-collaboration/comments/standalone-components/comment-composer/overview.mdx @@ -8,6 +8,6 @@ The Comment Standalone Composer enables you to add comments anywhere in your app - [Comment Data APIs](/async-collaboration/comments/customize-behavior#getcommentannotations): Fetch and submit comment data. - [Comment Thread](/async-collaboration/comments/standalone-components/comment-thread/overview): Render comment threads using fetched data. - [Comment Pin](/async-collaboration/comments/standalone-components/comment-pin/overview): Display and position comment pins based on fetched data. -- [Comment Dialog Primitives](/ui-customization/features/async/comments/comment-dialog/primitives): Use 115+ granular components for maximum customization flexibility. +- [Primitive components](/ui-customization/reference/primitives): Use granular components for maximum customization flexibility. By combining these components, you can create custom comment interfaces such as sidebars, overlays, popovers, or inline comments. This approach offers greater flexibility and control over your comment system's design and functionality. \ No newline at end of file diff --git a/async-collaboration/comments/standalone-components/comment-thread/overview.mdx b/async-collaboration/comments/standalone-components/comment-thread/overview.mdx index 844dd63c4..1c4051bbd 100644 --- a/async-collaboration/comments/standalone-components/comment-thread/overview.mdx +++ b/async-collaboration/comments/standalone-components/comment-thread/overview.mdx @@ -8,7 +8,7 @@ sidebarTitle: "Overview" - your own version of the `Comments Sidebar` component - This component does not add any additional functionality. It is just used to render existing comment data. -- This is a thin wrapper around the [Comment Dialog component](/ui-customization/features/async/comments/comment-dialog/wireframes). +- This is a thin wrapper around the Comment Dialog component. See the [`Component catalog`](/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree) and [`Wireframe components`](/ui-customization/reference/wireframe-components) for customization guidance. - Get the Comment Annotations data using the APIs. - Use this component to render the Comment Annotations data. diff --git a/docs.json b/docs.json index 3d6a1673d..cdc2e5c14 100644 --- a/docs.json +++ b/docs.json @@ -386,253 +386,89 @@ "group": "Concepts", "pages": [ "ui-customization/overview", - "ui-customization/setup", - "ui-customization/layout", + "ui-customization/how-it-works", + "ui-customization/decision-tree", + "ui-customization/setup" + ] + }, + { + "group": "Build Workflow", + "pages": [ + "ui-customization/build-methodology", + "ui-customization/extraction", + "ui-customization/build-gotchas" + ] + }, + { + "group": "Approaches", + "pages": [ "ui-customization/styling", - "ui-customization/template-variables", - "ui-customization/conditional-templates", - "ui-customization/custom-action-component", - "ui-customization/localisation" + "ui-customization/layout", + "ui-customization/primitives", + "ui-customization/headless", + "ui-customization/combining-approaches" ] }, { - "group": "Async Collaboration", + "group": "Feature Guides", "pages": [ - { - "group": "Comments", - "pages": [ - { - "group": "Comment Dialog", - "pages": [ - "ui-customization/features/async/comments/comment-dialog/wireframes", - "ui-customization/features/async/comments/comment-dialog/wireframe-variables", - "ui-customization/features/async/comments/comment-dialog/primitives" - ] - }, - { - "group": "Comment Sidebar", - "pages": [ - "ui-customization/features/async/comments/comment-sidebar/comment-sidebar-components", - "ui-customization/features/async/comments/comment-sidebar/comment-sidebar-v2-wireframes", - "ui-customization/features/async/comments/comment-sidebar/comment-sidebar-wireframe-variables", - "ui-customization/features/async/comments/comment-sidebar/comment-sidebar-v2-primitives" - ] - }, - { - "group": "Comment Sidebar Button", - "pages": [ - "ui-customization/features/async/comments/comment-sidebar-button/wireframes", - "ui-customization/features/async/comments/comment-sidebar-button/wireframe-variables", - "ui-customization/features/async/comments/comment-sidebar-button/primitives" - ] - }, - { - "group": "Standalone Components (DIY)", - "pages": [ - "ui-customization/features/async/comments/standalone-components/comment-composer", - "ui-customization/features/async/comments/standalone-components/comment-thread", - { - "group": "Comment Pin", - "pages": [ - "ui-customization/features/async/comments/comment-pin/wireframes", - "ui-customization/features/async/comments/comment-pin/primitives" - ] - } - ] - }, - { - "group": "Inline Comments Section", - "pages": [ - "ui-customization/features/async/comments/inline-comments-section/wireframes", - "ui-customization/features/async/comments/inline-comments-section/wireframe-variables", - "ui-customization/features/async/comments/inline-comments-section/primitives" - ] - }, - { - "group": "Comment Pin", - "pages": [ - "ui-customization/features/async/comments/comment-pin/wireframes", - "ui-customization/features/async/comments/comment-pin/primitives" - ] - }, - { - "group": "Comment Tool", - "pages": [ - "ui-customization/features/async/comments/comment-tool", - "ui-customization/features/async/comments/comment-tool-wireframe-variables" - ] - }, - { - "group": "Autocomplete", - "pages": [ - "ui-customization/features/async/comments/autocomplete-wireframe-variables" - ] - }, - { - "group": "Comment Bubble", - "pages": [ - "ui-customization/features/async/comments/comment-bubble/wireframes", - "ui-customization/features/async/comments/comment-bubble/wireframe-variables", - "ui-customization/features/async/comments/comment-bubble/primitives" - ] - }, - "ui-customization/features/async/comments/comment-player-timeline", - "ui-customization/features/async/comments/confirm-dialog", - { - "group": "Multithread Comments", - "pages": [ - "ui-customization/features/async/comments/multithread-comments/wireframes", - "ui-customization/features/async/comments/multithread-comments/wireframe-variables", - "ui-customization/features/async/comments/multithread-comments/primitives" - ] - }, - "ui-customization/features/async/comments/persistent-comment-mode-banner", - { - "group": "Text Comment", - "pages": [ - "ui-customization/features/async/comments/text-comment-wireframe-variables", - "ui-customization/features/async/comments/text-comment-primitives", - { - "group": "Text Comment Tool", - "pages": [ - "ui-customization/features/async/comments/text-comment/text-comment-tool/wireframes", - "ui-customization/features/async/comments/text-comment/text-comment-tool/primitives" - ] - }, - { - "group": "Text Comment Toolbar", - "pages": [ - "ui-customization/features/async/comments/text-comment/text-comment-toolbar/wireframes", - "ui-customization/features/async/comments/text-comment/text-comment-toolbar/primitives" - ] - } - ] - }, - "ui-customization/features/async/comments/comment-video-player" - ] - }, - { - "group": "In-app Notifications", - "pages": [ - { - "group": "Notifications Tool", - "pages": [ - "ui-customization/features/async/notifications/notifications-tool/wireframes", - "ui-customization/features/async/notifications/notifications-tool/wireframe-variables", - "ui-customization/features/async/notifications/notifications-tool/primitives" - ] - }, - { - "group": "Notifications Panel", - "pages": [ - "ui-customization/features/async/notifications/notifications-panel/wireframes", - "ui-customization/features/async/notifications/notifications-panel/wireframe-variables", - "ui-customization/features/async/notifications/notifications-panel/primitives" - ] - } - ] - }, - { - "group": "Recorder", - "pages": [ - "ui-customization/features/async/recorder/wireframe-variables", - "ui-customization/features/async/recorder/control-panel", - "ui-customization/features/async/recorder/media-source-settings", - "ui-customization/features/async/recorder/recorder-player-expanded", - "ui-customization/features/async/recorder/recorder-player", - "ui-customization/features/async/recorder/recorder-tool", - "ui-customization/features/async/recorder/recording-preview-steps-dialog", - "ui-customization/features/async/recorder/subtitles", - "ui-customization/features/async/recorder/transcription", - "ui-customization/features/async/recorder/transcription-wireframe-variables", - "ui-customization/features/async/recorder/video-editor" - ] - }, - { - "group": "Reactions", - "pages": [ - "ui-customization/features/async/inline-reactions", - "ui-customization/features/async/reactions-wireframe-variables" - ] - }, - { - "group": "Rewriter", - "pages": [ - "ui-customization/features/async/rewriter/wireframe-variables" - ] - }, - { - "group": "Arrows", - "pages": [ - "ui-customization/features/async/arrows/wireframe-variables", - "ui-customization/features/async/arrows/parts", - "ui-customization/features/async/arrows/slots", - "ui-customization/features/async/arrows/variables", - "ui-customization/features/async/arrows/custom-button" - ] - }, - { - "group": "Area", - "pages": [ - "ui-customization/features/async/area/wireframe-variables" - ] - }, - { - "group": "Tag", - "pages": [ - "ui-customization/features/async/tag/wireframe-variables" - ] - }, - { - "group": "View Analytics", - "pages": [ - "ui-customization/features/async/view-analytics/wireframe-variables" - ] - }, - { - "group": "Activity Logs", - "pages": [ - "ui-customization/features/async/activity-logs/activity-logs-wireframes", - "ui-customization/features/async/activity-logs/activity-logs-wireframe-variables", - "ui-customization/features/async/activity-logs/activity-logs-primitives" - ] - } + "ui-customization/features/comment-surfaces", + "ui-customization/features/notifications", + "ui-customization/features/reactions", + "ui-customization/features/recorder-and-transcription", + "ui-customization/features/mentions-and-autocomplete", + "ui-customization/features/presence-and-cursors", + "ui-customization/features/activity-log", + "ui-customization/features/annotations-tags-arrows-areas", + "ui-customization/features/other-features" ] }, { - "group": "Realtime Collaboration", + "group": "Guidance", "pages": [ + "ui-customization/rules", + "ui-customization/verifying-a-customization", + "ui-customization/patterns-and-tips", + "ui-customization/context", + "ui-customization/localisation", + "ui-customization/debugging", + "ui-customization/edge-cases-and-limitations", + "ui-customization/sdk-gaps-and-blockers" + ] + }, + { + "group": "Reference", + "pages": [ + "ui-customization/reference/component-definitions", + "ui-customization/reference/component-catalog", + "ui-customization/reference/feature-flags", + "ui-customization/reference/component-config", + "ui-customization/reference/props", + "ui-customization/reference/apis", + "ui-customization/reference/events", + "ui-customization/reference/hooks", + "ui-customization/reference/data-models", + "ui-customization/reference/primitives", + "ui-customization/reference/wireframe-components", + "ui-customization/conditional-templates", + "ui-customization/template-variables", + "ui-customization/reference/css-variables", + "ui-customization/reference/css-classes", + "ui-customization/reference/behaviors", { - "group": "Presence", - "pages": [ - "ui-customization/features/realtime/presence", - "ui-customization/features/realtime/presence-wireframe-variables" - ] - }, - { - "group": "Cursors", - "pages": [ - "ui-customization/features/realtime/cursors", - "ui-customization/features/realtime/cursors-wireframe-variables" - ] - }, - "ui-customization/features/realtime/single-editor-mode", - { - "group": "Live Selection", + "group": "Behavior Details", "pages": [ - "ui-customization/features/realtime/live-selection", - "ui-customization/features/realtime/live-selection-wireframe-variables" + "ui-customization/reference/behaviors/comments-core", + "ui-customization/reference/behaviors/dialog", + "ui-customization/reference/behaviors/sidebar", + "ui-customization/reference/behaviors/notifications", + "ui-customization/reference/behaviors/pins-tools", + "ui-customization/reference/behaviors/presence-reactions", + "ui-customization/reference/behaviors/recorder-huddle" ] }, - { - "group": "Huddle", - "pages": [ - "ui-customization/features/realtime/huddle/wireframe-variables", - "ui-customization/features/realtime/huddle/parts", - "ui-customization/features/realtime/huddle/slots", - "ui-customization/features/realtime/huddle/variables" - ] - } + "ui-customization/reference/manifest", + "ui-customization/reference/source-of-truth-invariant" ] } ] @@ -1187,43 +1023,43 @@ }, { "source": "/ui-customization/features/async/notifications/notifications-tool", - "destination": "/ui-customization/features/async/notifications/notifications-tool/wireframes" + "destination": "/ui-customization/features/notifications" }, { "source": "/ui-customization/features/async/notifications/notifications-panel", - "destination": "/ui-customization/features/async/notifications/notifications-panel/wireframes" + "destination": "/ui-customization/features/notifications" }, { "source": "/ui-customization/features/async/notifications/notifications-primitives", - "destination": "/ui-customization/features/async/notifications/notifications-panel/primitives" + "destination": "/ui-customization/reference/primitives" }, { "source": "/ui-customization/features/async/comments/comment-bubble", - "destination": "/ui-customization/features/async/comments/comment-bubble/wireframes" + "destination": "/ui-customization/reference/component-catalog#comments" }, { "source": "/ui-customization/features/async/comments/comment-pin", - "destination": "/ui-customization/features/async/comments/comment-pin/wireframes" + "destination": "/ui-customization/reference/component-catalog#comments" }, { "source": "/ui-customization/features/async/comments/comment-sidebar-button", - "destination": "/ui-customization/features/async/comments/comment-sidebar-button/wireframes" + "destination": "/ui-customization/reference/component-catalog#comments" }, { "source": "/ui-customization/features/async/comments/inline-comments-section", - "destination": "/ui-customization/features/async/comments/inline-comments-section/wireframes" + "destination": "/ui-customization/reference/component-catalog#inline-comments-section" }, { "source": "/ui-customization/features/async/comments/multithread-comment-dialog", - "destination": "/ui-customization/features/async/comments/multithread-comments/wireframes" + "destination": "/ui-customization/reference/component-catalog#multi-thread-comment-dialog" }, { "source": "/ui-customization/features/async/comments/text-comment-tool", - "destination": "/ui-customization/features/async/comments/text-comment/text-comment-tool/wireframes" + "destination": "/ui-customization/reference/component-catalog#text-comment" }, { "source": "/ui-customization/features/async/comments/text-comment-toolbar", - "destination": "/ui-customization/features/async/comments/text-comment/text-comment-toolbar/wireframes" + "destination": "/ui-customization/reference/component-catalog#text-comment" }, { "source": "/key-concepts/access-control/overview", @@ -1333,205 +1169,261 @@ "source": "/key-concepts/locations/setup/api-update-location", "destination": "/key-concepts/overview#locations" }, + { + "source": "/ui-customization/01-overview", + "destination": "/ui-customization/how-it-works" + }, + { + "source": "/ui-customization/02-decision-tree", + "destination": "/ui-customization/decision-tree" + }, + { + "source": "/ui-customization/03-getting-started", + "destination": "/ui-customization/setup" + }, + { + "source": "/ui-customization/getting-started", + "destination": "/ui-customization/setup" + }, + { + "source": "/ui-customization/approaches/css", + "destination": "/ui-customization/styling" + }, + { + "source": "/ui-customization/approaches/wireframes", + "destination": "/ui-customization/layout" + }, + { + "source": "/ui-customization/approaches/primitives", + "destination": "/ui-customization/primitives" + }, + { + "source": "/ui-customization/approaches/headless", + "destination": "/ui-customization/headless" + }, + { + "source": "/ui-customization/approaches/combining-approaches", + "destination": "/ui-customization/combining-approaches" + }, + { + "source": "/ui-customization/reference/wireframe-tokens", + "destination": "/ui-customization/conditional-templates" + }, + { + "source": "/ui-customization/reference/wireframe-variables", + "destination": "/ui-customization/template-variables" + }, + { + "source": "/ui-customization/reference/_entry-contract", + "destination": "/ui-customization/reference/source-of-truth-invariant" + }, + { + "source": "/ui-customization/cross-cutting", + "destination": "/ui-customization/localisation" + }, + { + "source": "/ui-customization/other-features", + "destination": "/ui-customization/features/other-features" + }, { "source": "/ui-customization/customize-css/remove-shadow-dom", "destination": "/ui-customization/styling" }, { "source": "/ui-customization/customize-css/themes", - "destination": "/ui-customization/styling#themes" + "destination": "/ui-customization/styling" }, { "source": "/ui-customization/features/async/comments/comment-dialog-components", - "destination": "/ui-customization/features/async/comments/comment-dialog/wireframes" + "destination": "/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree" }, { "source": "/ui-customization/features/async/comments/comment-dialog-primitives/overview", - "destination": "/ui-customization/features/async/comments/comment-dialog/primitives" + "destination": "/ui-customization/reference/primitives" }, { "source": "/ui-customization/features/async/comments/comment-dialog/subcomponents/autocomplete-chip-tooltip", - "destination": "/ui-customization/features/async/comments/comment-dialog/wireframes" + "destination": "/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree" }, { "source": "/ui-customization/features/async/comments/comment-dialog/subcomponents/autocomplete-group-option", - "destination": "/ui-customization/features/async/comments/comment-dialog/wireframes" + "destination": "/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree" }, { "source": "/ui-customization/features/async/comments/comment-dialog/subcomponents/autocomplete-option", - "destination": "/ui-customization/features/async/comments/comment-dialog/wireframes" + "destination": "/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree" }, { "source": "/ui-customization/features/async/comments/comment-dialog/subcomponents/body/subcomponents/replyavatars", - "destination": "/ui-customization/features/async/comments/comment-dialog/wireframes" + "destination": "/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree" }, { "source": "/ui-customization/features/async/comments/comment-dialog/subcomponents/body/subcomponents/threadcard", - "destination": "/ui-customization/features/async/comments/comment-dialog/wireframes" + "destination": "/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree" }, { "source": "/ui-customization/features/async/comments/comment-dialog/subcomponents/body/subcomponents/togglereply", - "destination": "/ui-customization/features/async/comments/comment-dialog/wireframes" + "destination": "/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree" }, { "source": "/ui-customization/features/async/comments/comment-dialog/subcomponents/header", - "destination": "/ui-customization/features/async/comments/comment-dialog/wireframes#header" + "destination": "/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree" }, { "source": "/ui-customization/features/async/comments/comment-dialog/subcomponents/navigation-button", - "destination": "/ui-customization/features/async/comments/comment-dialog/wireframes" + "destination": "/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree" }, { "source": "/ui-customization/features/async/comments/comment-dialog/subcomponents/options-dropdown", - "destination": "/ui-customization/features/async/comments/comment-dialog/wireframes" + "destination": "/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree" }, { "source": "/ui-customization/features/async/comments/comment-dialog/subcomponents/priority-dropdown", - "destination": "/ui-customization/features/async/comments/comment-dialog/wireframes" + "destination": "/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree" }, { "source": "/ui-customization/features/async/comments/comment-dialog/subcomponents/reaction-pin", - "destination": "/ui-customization/features/async/comments/comment-dialog/wireframes" + "destination": "/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree" }, { "source": "/ui-customization/features/async/comments/comment-dialog/subcomponents/reaction-pin-tooltip", - "destination": "/ui-customization/features/async/comments/comment-dialog/wireframes" + "destination": "/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree" }, { "source": "/ui-customization/features/async/comments/comment-dialog/subcomponents/reaction-tool", - "destination": "/ui-customization/features/async/comments/comment-dialog/wireframes" + "destination": "/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree" }, { "source": "/ui-customization/features/async/comments/comment-dialog/subcomponents/reactions-panel", - "destination": "/ui-customization/features/async/comments/comment-dialog/wireframes" + "destination": "/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree" }, { "source": "/ui-customization/features/async/comments/comment-dialog/subcomponents/status-dropdown", - "destination": "/ui-customization/features/async/comments/comment-dialog/wireframes" + "destination": "/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree" }, { "source": "/ui-customization/features/async/comments/comment-sidebar-components", - "destination": "/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-components" + "destination": "/ui-customization/reference/component-catalog#sidebar-slot-trees" }, { "source": "/ui-customization/features/async/comments/comment-sidebar-components-v2", - "destination": "/ui-customization/features/async/comments/comment-sidebar-structure-v2" + "destination": "/ui-customization/reference/component-catalog#sidebar-slot-trees" }, { "source": "/ui-customization/features/async/comments/comment-sidebar-componentscomment-sidebar-components", - "destination": "/ui-customization/features/async/comments/comment-sidebar-structure-v2" + "destination": "/ui-customization/reference/component-catalog#sidebar-slot-trees" }, { "source": "/ui-customization/features/async/comments/comments-sidebar/sidebar-button/overview", - "destination": "/ui-customization/features/async/comments/comment-sidebar-button/wireframes" + "destination": "/ui-customization/reference/component-catalog#comments" }, { "source": "/ui-customization/features/async/comments/comments-sidebar/sidebar-button/subcomponents/icon", - "destination": "/ui-customization/features/async/comments/comment-sidebar-button/wireframes" + "destination": "/ui-customization/reference/component-catalog#comments" }, { "source": "/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/overview", - "destination": "/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-components" + "destination": "/ui-customization/reference/component-catalog#sidebar-slot-trees" }, { "source": "/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/subcomponents/assigned", - "destination": "/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-components" + "destination": "/ui-customization/reference/component-catalog#sidebar-slot-trees" }, { "source": "/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/subcomponents/category", - "destination": "/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-components" + "destination": "/ui-customization/reference/component-catalog#sidebar-slot-trees" }, { "source": "/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/subcomponents/close-button", - "destination": "/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-components" + "destination": "/ui-customization/reference/component-catalog#sidebar-slot-trees" }, { "source": "/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/subcomponents/custom", - "destination": "/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-components" + "destination": "/ui-customization/reference/component-catalog#sidebar-slot-trees" }, { "source": "/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/subcomponents/done-button", - "destination": "/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-components" + "destination": "/ui-customization/reference/component-catalog#sidebar-slot-trees" }, { "source": "/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/subcomponents/filter-item", - "destination": "/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-components" + "destination": "/ui-customization/reference/component-catalog#sidebar-slot-trees" }, { "source": "/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/subcomponents/groupby", - "destination": "/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-components" + "destination": "/ui-customization/reference/component-catalog#sidebar-slot-trees" }, { "source": "/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/subcomponents/location", - "destination": "/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-components" + "destination": "/ui-customization/reference/component-catalog#sidebar-slot-trees" }, { "source": "/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/subcomponents/people", - "destination": "/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-components" + "destination": "/ui-customization/reference/component-catalog#sidebar-slot-trees" }, { "source": "/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/subcomponents/priority", - "destination": "/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-components" + "destination": "/ui-customization/reference/component-catalog#sidebar-slot-trees" }, { "source": "/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/subcomponents/reset-button", - "destination": "/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-components" + "destination": "/ui-customization/reference/component-catalog#sidebar-slot-trees" }, { "source": "/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/subcomponents/status", - "destination": "/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-components" + "destination": "/ui-customization/reference/component-catalog#sidebar-slot-trees" }, { "source": "/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/subcomponents/tagged", - "destination": "/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-components" + "destination": "/ui-customization/reference/component-catalog#sidebar-slot-trees" }, { "source": "/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/subcomponents/title", - "destination": "/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-components" + "destination": "/ui-customization/reference/component-catalog#sidebar-slot-trees" }, { "source": "/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/subcomponents/versions", - "destination": "/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-components" + "destination": "/ui-customization/reference/component-catalog#sidebar-slot-trees" }, { "source": "/ui-customization/features/async/comments/comments-sidebar/subcomponents/focused-thread", - "destination": "/ui-customization/features/async/comments/comment-sidebar-structure-v2" + "destination": "/ui-customization/reference/component-catalog#sidebar-slot-trees" }, { "source": "/ui-customization/features/async/comments/comments-sidebar/subcomponents/header/overview", - "destination": "/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-components" + "destination": "/ui-customization/reference/component-catalog#sidebar-slot-trees" }, { "source": "/ui-customization/features/async/comments/comments-sidebar/subcomponents/header/subcomponents/status/overview", - "destination": "/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-components" + "destination": "/ui-customization/reference/component-catalog#sidebar-slot-trees" }, { "source": "/ui-customization/features/async/comments/comments-sidebar/subcomponents/header/subcomponents/status/subcomponents/content", - "destination": "/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-components" + "destination": "/ui-customization/reference/component-catalog#sidebar-slot-trees" }, { "source": "/ui-customization/features/async/comments/comments-sidebar/subcomponents/header/subcomponents/status/subcomponents/trigger", - "destination": "/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-components" + "destination": "/ui-customization/reference/component-catalog#sidebar-slot-trees" }, { "source": "/ui-customization/features/async/comments/comments-sidebar/subcomponents/list/overview", - "destination": "/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-components" + "destination": "/ui-customization/reference/component-catalog#sidebar-slot-trees" }, { "source": "/ui-customization/features/async/comments/comments-sidebar/subcomponents/list/subcomponents/dialog-container", - "destination": "/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-components" + "destination": "/ui-customization/reference/component-catalog#sidebar-slot-trees" }, { "source": "/ui-customization/features/async/comments/comments-sidebar/subcomponents/list/subcomponents/group", - "destination": "/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-components" + "destination": "/ui-customization/reference/component-catalog#sidebar-slot-trees" }, { "source": "/ui-customization/features/async/comments/confirm-dialog/overview", - "destination": "/ui-customization/features/async/comments/confirm-dialog" + "destination": "/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree" }, { "source": "/ui-customization/features/async/comments/inline-comments-section/subcomponents/panel/sorting-dropdown", - "destination": "/ui-customization/features/async/comments/inline-comments-section/wireframes" + "destination": "/ui-customization/reference/component-catalog#inline-comments-section" }, { "source": "/realtime-collaboration/presence/heartbeat", @@ -1548,6 +1440,334 @@ { "source": "/users/server-side/api-reset-contact-list", "destination": "/api-reference/rest-apis/v2/users/delete-users" + }, + { + "source": "/ui-customization/custom-action-component", + "destination": "/ui-customization/patterns-and-tips#bridge-a-wireframe-button-to-your-app-logic-the-onclick-escape-hatch" + }, + { + "source": "/ui-customization/features/async/activity-logs/activity-logs-primitives", + "destination": "/ui-customization/reference/primitives" + }, + { + "source": "/ui-customization/features/async/activity-logs/activity-logs-wireframe-variables", + "destination": "/ui-customization/template-variables" + }, + { + "source": "/ui-customization/features/async/activity-logs/activity-logs-wireframes", + "destination": "/ui-customization/features/activity-log" + }, + { + "source": "/ui-customization/features/async/area/wireframe-variables", + "destination": "/ui-customization/template-variables" + }, + { + "source": "/ui-customization/features/async/arrows/custom-button", + "destination": "/ui-customization/features/annotations-tags-arrows-areas" + }, + { + "source": "/ui-customization/features/async/arrows/parts", + "destination": "/ui-customization/features/annotations-tags-arrows-areas" + }, + { + "source": "/ui-customization/features/async/arrows/slots", + "destination": "/ui-customization/features/annotations-tags-arrows-areas" + }, + { + "source": "/ui-customization/features/async/arrows/variables", + "destination": "/ui-customization/features/annotations-tags-arrows-areas" + }, + { + "source": "/ui-customization/features/async/arrows/wireframe-variables", + "destination": "/ui-customization/template-variables" + }, + { + "source": "/ui-customization/features/async/comments/autocomplete-wireframe-variables", + "destination": "/ui-customization/template-variables" + }, + { + "source": "/ui-customization/features/async/comments/comment-bubble/primitives", + "destination": "/ui-customization/reference/primitives" + }, + { + "source": "/ui-customization/features/async/comments/comment-bubble/wireframe-variables", + "destination": "/ui-customization/template-variables" + }, + { + "source": "/ui-customization/features/async/comments/comment-bubble/wireframes", + "destination": "/ui-customization/reference/component-catalog#comments" + }, + { + "source": "/ui-customization/features/async/comments/comment-dialog-structure", + "destination": "/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree" + }, + { + "source": "/ui-customization/features/async/comments/comment-dialog/primitives", + "destination": "/ui-customization/reference/primitives" + }, + { + "source": "/ui-customization/features/async/comments/comment-dialog/wireframe-variables", + "destination": "/ui-customization/template-variables" + }, + { + "source": "/ui-customization/features/async/comments/comment-dialog/wireframes", + "destination": "/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree" + }, + { + "source": "/ui-customization/features/async/comments/comment-pin/primitives", + "destination": "/ui-customization/reference/primitives" + }, + { + "source": "/ui-customization/features/async/comments/comment-pin/wireframes", + "destination": "/ui-customization/reference/component-catalog#comments" + }, + { + "source": "/ui-customization/features/async/comments/comment-player-timeline", + "destination": "/ui-customization/reference/component-catalog#comments" + }, + { + "source": "/ui-customization/features/async/comments/comment-sidebar-button/primitives", + "destination": "/ui-customization/reference/primitives" + }, + { + "source": "/ui-customization/features/async/comments/comment-sidebar-button/wireframe-variables", + "destination": "/ui-customization/template-variables" + }, + { + "source": "/ui-customization/features/async/comments/comment-sidebar-button/wireframes", + "destination": "/ui-customization/reference/component-catalog#comments" + }, + { + "source": "/ui-customization/features/async/comments/comment-sidebar-structure-v2", + "destination": "/ui-customization/reference/component-catalog#sidebar-slot-trees" + }, + { + "source": "/ui-customization/features/async/comments/comment-sidebar-structure", + "destination": "/ui-customization/reference/component-catalog#sidebar-slot-trees" + }, + { + "source": "/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-components", + "destination": "/ui-customization/reference/component-catalog#sidebar-slot-trees" + }, + { + "source": "/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-v2-primitives", + "destination": "/ui-customization/reference/primitives" + }, + { + "source": "/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-v2-wireframes", + "destination": "/ui-customization/reference/component-catalog#sidebar-slot-trees" + }, + { + "source": "/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-wireframe-variables", + "destination": "/ui-customization/template-variables" + }, + { + "source": "/ui-customization/features/async/comments/comment-tool-wireframe-variables", + "destination": "/ui-customization/template-variables" + }, + { + "source": "/ui-customization/features/async/comments/comment-tool", + "destination": "/ui-customization/reference/component-catalog#comments" + }, + { + "source": "/ui-customization/features/async/comments/comment-video-player", + "destination": "/ui-customization/reference/component-catalog#comments" + }, + { + "source": "/ui-customization/features/async/comments/confirm-dialog", + "destination": "/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree" + }, + { + "source": "/ui-customization/features/async/comments/inline-comments-section/primitives", + "destination": "/ui-customization/reference/primitives" + }, + { + "source": "/ui-customization/features/async/comments/inline-comments-section/wireframe-variables", + "destination": "/ui-customization/template-variables" + }, + { + "source": "/ui-customization/features/async/comments/inline-comments-section/wireframes", + "destination": "/ui-customization/reference/component-catalog#inline-comments-section" + }, + { + "source": "/ui-customization/features/async/comments/multithread-comments/primitives", + "destination": "/ui-customization/reference/primitives" + }, + { + "source": "/ui-customization/features/async/comments/multithread-comments/wireframe-variables", + "destination": "/ui-customization/template-variables" + }, + { + "source": "/ui-customization/features/async/comments/multithread-comments/wireframes", + "destination": "/ui-customization/reference/component-catalog#multi-thread-comment-dialog" + }, + { + "source": "/ui-customization/features/async/comments/persistent-comment-mode-banner", + "destination": "/ui-customization/reference/component-catalog#comments" + }, + { + "source": "/ui-customization/features/async/comments/standalone-components/comment-composer", + "destination": "/ui-customization/reference/component-catalog#comments" + }, + { + "source": "/ui-customization/features/async/comments/standalone-components/comment-thread", + "destination": "/ui-customization/reference/component-catalog#comments" + }, + { + "source": "/ui-customization/features/async/comments/text-comment-primitives", + "destination": "/ui-customization/reference/primitives" + }, + { + "source": "/ui-customization/features/async/comments/text-comment-wireframe-variables", + "destination": "/ui-customization/template-variables" + }, + { + "source": "/ui-customization/features/async/comments/text-comment/text-comment-tool/primitives", + "destination": "/ui-customization/reference/primitives" + }, + { + "source": "/ui-customization/features/async/comments/text-comment/text-comment-tool/wireframes", + "destination": "/ui-customization/reference/component-catalog#text-comment" + }, + { + "source": "/ui-customization/features/async/comments/text-comment/text-comment-toolbar/primitives", + "destination": "/ui-customization/reference/primitives" + }, + { + "source": "/ui-customization/features/async/comments/text-comment/text-comment-toolbar/wireframes", + "destination": "/ui-customization/reference/component-catalog#text-comment" + }, + { + "source": "/ui-customization/features/async/inline-reactions", + "destination": "/ui-customization/features/reactions" + }, + { + "source": "/ui-customization/features/async/notifications/notifications-panel/primitives", + "destination": "/ui-customization/reference/primitives" + }, + { + "source": "/ui-customization/features/async/notifications/notifications-panel/wireframe-variables", + "destination": "/ui-customization/template-variables" + }, + { + "source": "/ui-customization/features/async/notifications/notifications-panel/wireframes", + "destination": "/ui-customization/features/notifications" + }, + { + "source": "/ui-customization/features/async/notifications/notifications-tool/primitives", + "destination": "/ui-customization/reference/primitives" + }, + { + "source": "/ui-customization/features/async/notifications/notifications-tool/wireframe-variables", + "destination": "/ui-customization/template-variables" + }, + { + "source": "/ui-customization/features/async/notifications/notifications-tool/wireframes", + "destination": "/ui-customization/features/notifications" + }, + { + "source": "/ui-customization/features/async/reactions-wireframe-variables", + "destination": "/ui-customization/template-variables" + }, + { + "source": "/ui-customization/features/async/recorder/control-panel", + "destination": "/ui-customization/features/recorder-and-transcription" + }, + { + "source": "/ui-customization/features/async/recorder/media-source-settings", + "destination": "/ui-customization/features/recorder-and-transcription" + }, + { + "source": "/ui-customization/features/async/recorder/recorder-player-expanded", + "destination": "/ui-customization/features/recorder-and-transcription" + }, + { + "source": "/ui-customization/features/async/recorder/recorder-player", + "destination": "/ui-customization/features/recorder-and-transcription" + }, + { + "source": "/ui-customization/features/async/recorder/recorder-tool", + "destination": "/ui-customization/features/recorder-and-transcription" + }, + { + "source": "/ui-customization/features/async/recorder/recording-preview-steps-dialog", + "destination": "/ui-customization/features/recorder-and-transcription" + }, + { + "source": "/ui-customization/features/async/recorder/subtitles", + "destination": "/ui-customization/features/recorder-and-transcription" + }, + { + "source": "/ui-customization/features/async/recorder/transcription-wireframe-variables", + "destination": "/ui-customization/template-variables" + }, + { + "source": "/ui-customization/features/async/recorder/transcription", + "destination": "/ui-customization/features/recorder-and-transcription" + }, + { + "source": "/ui-customization/features/async/recorder/video-editor", + "destination": "/ui-customization/features/recorder-and-transcription" + }, + { + "source": "/ui-customization/features/async/recorder/wireframe-variables", + "destination": "/ui-customization/template-variables" + }, + { + "source": "/ui-customization/features/async/rewriter/wireframe-variables", + "destination": "/ui-customization/template-variables" + }, + { + "source": "/ui-customization/features/async/tag/wireframe-variables", + "destination": "/ui-customization/template-variables" + }, + { + "source": "/ui-customization/features/async/view-analytics/wireframe-variables", + "destination": "/ui-customization/template-variables" + }, + { + "source": "/ui-customization/features/realtime/cursors-wireframe-variables", + "destination": "/ui-customization/template-variables" + }, + { + "source": "/ui-customization/features/realtime/cursors", + "destination": "/ui-customization/features/presence-and-cursors" + }, + { + "source": "/ui-customization/features/realtime/huddle/parts", + "destination": "/ui-customization/features/presence-and-cursors" + }, + { + "source": "/ui-customization/features/realtime/huddle/slots", + "destination": "/ui-customization/features/presence-and-cursors" + }, + { + "source": "/ui-customization/features/realtime/huddle/variables", + "destination": "/ui-customization/features/presence-and-cursors" + }, + { + "source": "/ui-customization/features/realtime/huddle/wireframe-variables", + "destination": "/ui-customization/template-variables" + }, + { + "source": "/ui-customization/features/realtime/live-selection-wireframe-variables", + "destination": "/ui-customization/template-variables" + }, + { + "source": "/ui-customization/features/realtime/live-selection", + "destination": "/ui-customization/features/presence-and-cursors" + }, + { + "source": "/ui-customization/features/realtime/presence-wireframe-variables", + "destination": "/ui-customization/template-variables" + }, + { + "source": "/ui-customization/features/realtime/presence", + "destination": "/ui-customization/features/presence-and-cursors" + }, + { + "source": "/ui-customization/features/realtime/single-editor-mode", + "destination": "/ui-customization/features/presence-and-cursors" } ], "logo": { diff --git a/public/custom.css b/public/custom.css new file mode 100644 index 000000000..e69de29bb diff --git a/realtime-collaboration/crdt/overview.mdx b/realtime-collaboration/crdt/overview.mdx index 5933e26b6..ae9a0a51d 100644 --- a/realtime-collaboration/crdt/overview.mdx +++ b/realtime-collaboration/crdt/overview.mdx @@ -5,12 +5,12 @@ description: CRDT (Yjs) based collaborative editing. CRDT (Yjs) based collaborative editing. This feature is useful for building collaborative features like shared forms, whiteboards, or any real-time state that needs to be synced across all users. - This is framework agnostic. -- Use our [Core guide](./setup/core) to create custom integrations if a purpose built library is not listed below +- Use our [Core guide](/realtime-collaboration/crdt/setup/core) to create custom integrations if a purpose built library is not listed below - Out of box support for the following libraries: - - [Tiptap Editor](./setup/tiptap) - - [ReactFlow](./setup/reactflow) - - [CodeMirror](./setup/codemirror) - - [BlockNote](./setup/blocknote) + - [Tiptap Editor](/realtime-collaboration/crdt/setup/tiptap) + - [ReactFlow](/realtime-collaboration/crdt/setup/reactflow) + - [CodeMirror](/realtime-collaboration/crdt/setup/codemirror) + - [BlockNote](/realtime-collaboration/crdt/setup/blocknote) - Lexical (coming soon) ## What you can build @@ -20,13 +20,13 @@ CRDT (Yjs) based collaborative editing. This feature is useful for building coll ## Packages at a glance -- **Core library (`@veltdev/crdt`)**: Framework-agnostic CRDT stores (array, map, text, xml), versioning, subscriptions, and syncing via the Velt client. See setup: [`Core`](./setup/core). -- **React Hook Wrapper (`@veltdev/crdt-react`)**: A typed React hook for creating and consuming CRDT stores with minimal boilerplate. See setup: [`Core`](./setup/core). +- **Core library (`@veltdev/crdt`)**: Framework-agnostic CRDT stores (array, map, text, xml), versioning, subscriptions, and syncing via the Velt client. See setup: [`Core`](/realtime-collaboration/crdt/setup/core). +- **React Hook Wrapper (`@veltdev/crdt-react`)**: A typed React hook for creating and consuming CRDT stores with minimal boilerplate. See setup: [`Core`](/realtime-collaboration/crdt/setup/core). - **Editor integrations**: - - **Tiptap**: Collaborative text editing with cursors and history. See setup: [`Tiptap`](./setup/tiptap). - - **ReactFlow**: Collaborative node/edge graphs. See setup: [`ReactFlow`](./setup/reactflow). - - **CodeMirror**: Collaborative code editing. See setup: [`CodeMirror`](./setup/codemirror). - - **BlockNote**: Collaborative block-based editor. See setup: [`BlockNote`](./setup/blocknote). + - **Tiptap**: Collaborative text editing with cursors and history. See setup: [`Tiptap`](/realtime-collaboration/crdt/setup/tiptap). + - **ReactFlow**: Collaborative node/edge graphs. See setup: [`ReactFlow`](/realtime-collaboration/crdt/setup/reactflow). + - **CodeMirror**: Collaborative code editing. See setup: [`CodeMirror`](/realtime-collaboration/crdt/setup/codemirror). + - **BlockNote**: Collaborative block-based editor. See setup: [`BlockNote`](/realtime-collaboration/crdt/setup/blocknote). ## Why Velt CRDT - **Conflict‑free sync**: Yjs ensures eventual consistency without merge conflicts. @@ -49,9 +49,9 @@ CRDT (Yjs) based collaborative editing. This feature is useful for building coll - Yjs merges concurrent edits; Velt handles synchronization between connected clients. ## Choose your path -- **React apps**: Start with the React Hook wrapper in [`setup/core`](./setup/core#react-hook-wrapper-%40veltdev%2Fcrdt-react) (React tab). -- **Other frameworks / vanilla**: Use the core library in [`setup/core`](./setup/core#other-frameworks-%40veltdev%2Fcrdt) (Non‑React tab). -- **Rich editors**: Follow the dedicated guides for [`Tiptap`](./setup/tiptap), [`ReactFlow`](./setup/reactflow), [`CodeMirror`](./setup/codemirror), and [`BlockNote`](./setup/blocknote). +- **React apps**: Start with the React Hook wrapper in [`setup/core`](/realtime-collaboration/crdt/setup/core#react-hook-wrapper-%40veltdev%2Fcrdt-react) (React tab). +- **Other frameworks / vanilla**: Use the core library in [`setup/core`](/realtime-collaboration/crdt/setup/core#other-frameworks-%40veltdev%2Fcrdt) (Non‑React tab). +- **Rich editors**: Follow the dedicated guides for [`Tiptap`](/realtime-collaboration/crdt/setup/tiptap), [`ReactFlow`](/realtime-collaboration/crdt/setup/reactflow), [`CodeMirror`](/realtime-collaboration/crdt/setup/codemirror), and [`BlockNote`](/realtime-collaboration/crdt/setup/blocknote). ## Try it yourself! @@ -63,4 +63,4 @@ CRDT (Yjs) based collaborative editing. This feature is useful for building coll > -[Open in larger window](https://sample-apps-tiptap-crdt-demo.vercel.app/) \ No newline at end of file +[Open in larger window](https://sample-apps-tiptap-crdt-demo.vercel.app/) diff --git a/realtime-collaboration/single-editor-mode/setup.mdx b/realtime-collaboration/single-editor-mode/setup.mdx index 2489728b5..b4ff2039b 100644 --- a/realtime-collaboration/single-editor-mode/setup.mdx +++ b/realtime-collaboration/single-editor-mode/setup.mdx @@ -26,7 +26,7 @@ Setup and initialize the Velt client by following the [Velt Setup Docs](/get-sta - Optionally scope the feature to specific containers. -- We recommend using the default UI for simplicity and velocity. You can customize it to change the look, feel and position of the UI. You can customize the UI by following [this guide](/ui-customization/features/realtime/single-editor-mode). +- We recommend using the default UI for simplicity and velocity. You can customize it to change the look, feel and position of the UI by following the [UI customization guide](/ui-customization/overview). - If you do want to create your UI from scratch then you can use the following APIs to create a similar UX: [Editor](/realtime-collaboration/single-editor-mode/customize-behavior#editor) and [Viewer](/realtime-collaboration/single-editor-mode/customize-behavior#viewer). diff --git a/release-notes/3-0-0.mdx b/release-notes/3-0-0.mdx index fef2b70ad..c446fe07a 100644 --- a/release-notes/3-0-0.mdx +++ b/release-notes/3-0-0.mdx @@ -7,7 +7,7 @@ title: Version 3.0.0 ### Improvements - [**Comments**]: Added pagination in autocomplete option dropdown for improved performance. -- [**Comments**]: Added "Edit Comment" option in header options dropdown menu for editing the first comment. Only visible to comment author and admins. [Learn more](/ui-customization/features/async/comments/comment-dialog/subcomponents/options-dropdown). +- [**Comments**]: Added "Edit Comment" option in header options dropdown menu for editing the first comment. Only visible to comment author and admins. [Learn more](/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree). - [**Recorder**]: Added `shadow dom` prop in Recorder Player component to control shadow DOM encapsulation. @@ -80,7 +80,7 @@ title: Version 3.0.0 - Now just clicking on a comment doesn't open the comment on the DOM. - A lot of users reported this behaviour as frustrating. That's why now there is an explicit navigation button for that. - You will still get the [`onCommentClick`](/async-collaboration/comments-sidebar/customize-behavior#oncommentclick) event. You can still use that to maintain the old behavior [using this](/async-collaboration/comments/customize-behavior#selectcommentbyannotationid). - - If you had previously used a wireframe for the comment dialog, you will need to add the [navigation button wireframe](/ui-customization/features/async/comments/comment-dialog/wireframes#header) to show the navigation button. + - If you had previously used a wireframe for the comment dialog, you will need to add the [navigation button wireframe](/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree) to show the navigation button. - [**Comments**]: Added feature to show resolved comments on for inline comments section. - [**Comments**]: Disabled collapsed comments by default. Most customers don't want to show collapsed comments by default so we disabled it. You can enable it by setting using [this](/async-collaboration/comments/customize-behavior#enablecollapsedcomments). - [**Comments**]: Disabled auto-focus on new comments in inline comments section and sidebar page mode. @@ -115,7 +115,7 @@ title: Version 3.0.0 ### Features -- [**Velt Button**]: Added a customizable button component that can be used to add custom actions and extend the functionality of any Velt component. [Learn more](/ui-customization/custom-action-component). Some examples include: +- [**Velt Button**]: Added a customizable button component that can be used to add custom actions and extend the functionality of any Velt component. [Learn more](/ui-customization/patterns-and-tips#bridge-a-wireframe-button-to-your-app-logic-the-onclick-escape-hatch). Some examples include: - Add custom filtering, sorting and grouping to the Comment Sidebar. - Add custom actions to each item in the Notifications panel. - Add custom actions to the Comment Dialog. @@ -126,7 +126,7 @@ title: Version 3.0.0 ### Improvements -- [**Comments**]: Added additional wireframes for Comment Dialog Toggle Reply Component. [Learn more](/ui-customization/features/async/comments/comment-dialog/subcomponents/body/subcomponents/togglereply). +- [**Comments**]: Added additional wireframes for Comment Dialog Toggle Reply Component. [Learn more](/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree). - [**Comments**]: Now users can't submit empty comments during editing. - [**Comments**]: Improved the padding on the @mention autocomplete dropdown. - [**Ergonomics**]: Updated `useCommentActionCallback` to `useCommentEventCallback`. The old hook name will continue to work. @@ -1125,7 +1125,7 @@ title: Version 3.0.0 ### New Features - [**Comments**]: Added "Seen" Feature in the comment dialog. It shows which users have seen the comments. It's automatically enabled in the default component. - - If you had previously used a wireframe for the comment dialog, you will need to add the [seen component wireframe](/ui-customization/features/async/comments/comment-dialog/subcomponents/body/subcomponents/threadcard). + - If you had previously used a wireframe for the comment dialog, you will need to add the [seen component wireframe](/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree). ![](/images/seen-feature.png) @@ -1207,7 +1207,7 @@ title: Version 3.0.0 - In this mode, when you click on a comment in the sidebar, it will open the thread in expanded view within the sidebar itself. - Other threads and actions like filters, search etc are hidden behind a back button. - Turning this on also adds a navigation button in the comment dialog. Clicking it will navigate to the comment and also trigger a callback. - - If you had previously used a wireframe for the comment dialog, you will need to add the [navigation button wireframe](/ui-customization/features/async/comments/comment-dialog/subcomponents/navigation-button) and the [focused thread wireframe](/ui-customization/features/async/comments/comments-sidebar/subcomponents/focused-thread). + - If you had previously used a wireframe for the comment dialog, you will need to add the [navigation button wireframe](/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree) and the [focused thread wireframe](/ui-customization/reference/component-catalog#sidebar-slot-trees). @@ -2199,7 +2199,7 @@ subscription?.unsubscribe() - On first attempt to close: Dialog shakes to indicate draft status. - On second attempt: the comment is saved as draft and the dialog closes. - Added a visual indicator for draft comments in the dialog. - - If you had previously used a wireframe for the comment dialog, you will need to add the [draft wireframe](/ui-customization/features/async/comments/comment-dialog/subcomponents/body/subcomponents/threadcard). + - If you had previously used a wireframe for the comment dialog, you will need to add the [draft wireframe](/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree). @@ -2220,7 +2220,7 @@ subscription?.unsubscribe() - On first attempt to close: Dialog shakes to indicate draft status. - On second attempt: the comment is saved as draft and the dialog closes. - Added a visual indicator for draft comments in the dialog. - - If you had previously used a wireframe for the comment dialog, you will need to add the [draft wireframe](/ui-customization/features/async/comments/comment-dialog/subcomponents/body/subcomponents/threadcard). + - If you had previously used a wireframe for the comment dialog, you will need to add the [draft wireframe](/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree). diff --git a/release-notes/archive/aug-13-2024.mdx b/release-notes/archive/aug-13-2024.mdx index 9739c2db7..ecb36628f 100644 --- a/release-notes/archive/aug-13-2024.mdx +++ b/release-notes/archive/aug-13-2024.mdx @@ -2,6 +2,6 @@ ### New Features -- [**UI Customization**]: Added [Confirm Dialog Wireframe](/ui-customization/features/async/comments/confirm-dialog/overview) and added support for light and dark modes. +- [**UI Customization**]: Added [Confirm Dialog Wireframe](/ui-customization/reference/component-catalog#comments) and added support for light and dark modes. - This is a common UI component used for multiple features like deleting comment thread, deleting a recorded content and more. - It will automatically inherit the light or dark mode property from the parent feature. \ No newline at end of file diff --git a/release-notes/archive/july-18-2024.mdx b/release-notes/archive/july-18-2024.mdx index fd30d203d..938daa154 100644 --- a/release-notes/archive/july-18-2024.mdx +++ b/release-notes/archive/july-18-2024.mdx @@ -36,7 +36,7 @@ commentElement.setPinCursorImage(BASE64_IMAGE_STRING); ## Added `placeholder` Support -We have added `placeholder` support for Comments DIalog within the `comment-dialog-composer-input-wireframe`. [Learn more](https://docs.velt.dev/ui-customization/features/async/comments/comment-dialog/subcomponents/composer/overview). +We have added `placeholder` support for Comments DIalog within the `comment-dialog-composer-input-wireframe`. [Learn more](https://docs.velt.dev/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree). ## Added `notificationSourceData` Field diff --git a/release-notes/archive/july-29-2024.mdx b/release-notes/archive/july-29-2024.mdx index a25bd9fcd..595105bfc 100644 --- a/release-notes/archive/july-29-2024.mdx +++ b/release-notes/archive/july-29-2024.mdx @@ -5,7 +5,7 @@ ## Added Wireframe for Custom Annotation Dropdown -We have added wireframes for custom annotation. [Learn more](https://docs.velt.dev/ui-customization/features/async/comments/comment-dialog/subcomponents/custom-annotation-dropdown). +We have added wireframes for custom annotation. [Learn more](https://docs.velt.dev/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree). ## Added Custom Annotation Dropdown Component Feature You can now customize annotation dropdown component feature. Create custom list data on annotation as required. diff --git a/release-notes/archive/july-31-2024.mdx b/release-notes/archive/july-31-2024.mdx index 1e8107c9e..37e495079 100644 --- a/release-notes/archive/july-31-2024.mdx +++ b/release-notes/archive/july-31-2024.mdx @@ -4,7 +4,7 @@ - Latest Types: [2.0.24](https://www.npmjs.com/package/@veltdev/types) ## Added the option to Subscribe/Unsubscribe at Thread Level -Within the comments dialog options dropdown, we have added subscribe/unsubscribe wireframes. [Learn more](/ui-customization/features/async/comments/comment-dialog/subcomponents/options-dropdown). +Within the comments dialog options dropdown, we have added subscribe/unsubscribe wireframes. [Learn more](/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree). ```jsx @@ -30,7 +30,7 @@ Users can now add an optional custom initial within the [user object](https://do We have added the feature to search on organization names in the contact list, if present. ## Added Delete Button on the Thread Header -You can now add a delete button within the comments dialog thread header. [Learn more](/ui-customization/features/async/comments/comment-dialog/wireframes#header). +You can now add a delete button within the comments dialog thread header. [Learn more](/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree). ```jsx diff --git a/release-notes/archive/june-6-2024.mdx b/release-notes/archive/june-6-2024.mdx index 9d91cd796..7d4efb64d 100644 --- a/release-notes/archive/june-6-2024.mdx +++ b/release-notes/archive/june-6-2024.mdx @@ -11,29 +11,29 @@ In this update, we made several improvements to the `Customization` of the `Comm We modified or added support for customizing the following `subcomponents` of the `Comments Sidebar`: - - [Filter](/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/overview) - - [Filter Category](/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/subcomponents/category) - - [Filter Close Button](/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/subcomponents/close-button) - - [Filter Done Button](/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/subcomponents/done-button) - - [Filter Item](/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/subcomponents/filter-item) - - [Filter Groupby](/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/subcomponents/groupby) - - [Filter Location](/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/subcomponents/location) - - [Filter People](/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/subcomponents/people) - - [Filter Priority](/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/subcomponents/priority) - - [Filter Title](/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/subcomponents/title) - - [Filter Versions](/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/subcomponents/versions) - - [Header](/ui-customization/features/async/comments/comments-sidebar/subcomponents/header/overview) - - [Header Status](/ui-customization/features/async/comments/comments-sidebar/subcomponents/header/subcomponents/status/overview) - - [Header Status Trigger](/ui-customization/features/async/comments/comments-sidebar/subcomponents/header/subcomponents/status/subcomponents/trigger) - - [Header Status Content](/ui-customization/features/async/comments/comments-sidebar/subcomponents/header/subcomponents/status/subcomponents/content) - - [List](/ui-customization/features/async/comments/comments-sidebar/subcomponents/list/overview) - - [List Dialog Container](/ui-customization/features/async/comments/comments-sidebar/subcomponents/list/subcomponents/dialog-container) - - [List Group](/ui-customization/features/async/comments/comments-sidebar/subcomponents/list/subcomponents/group) + - [Filter](/ui-customization/reference/component-catalog#sidebar-slot-trees) + - [Filter Category](/ui-customization/reference/component-catalog#sidebar-slot-trees) + - [Filter Close Button](/ui-customization/reference/component-catalog#sidebar-slot-trees) + - [Filter Done Button](/ui-customization/reference/component-catalog#sidebar-slot-trees) + - [Filter Item](/ui-customization/reference/component-catalog#sidebar-slot-trees) + - [Filter Groupby](/ui-customization/reference/component-catalog#sidebar-slot-trees) + - [Filter Location](/ui-customization/reference/component-catalog#sidebar-slot-trees) + - [Filter People](/ui-customization/reference/component-catalog#sidebar-slot-trees) + - [Filter Priority](/ui-customization/reference/component-catalog#sidebar-slot-trees) + - [Filter Title](/ui-customization/reference/component-catalog#sidebar-slot-trees) + - [Filter Versions](/ui-customization/reference/component-catalog#sidebar-slot-trees) + - [Header](/ui-customization/reference/component-catalog#sidebar-slot-trees) + - [Header Status](/ui-customization/reference/component-catalog#sidebar-slot-trees) + - [Header Status Trigger](/ui-customization/reference/component-catalog#sidebar-slot-trees) + - [Header Status Content](/ui-customization/reference/component-catalog#sidebar-slot-trees) + - [List](/ui-customization/reference/component-catalog#sidebar-slot-trees) + - [List Dialog Container](/ui-customization/reference/component-catalog#sidebar-slot-trees) + - [List Group](/ui-customization/reference/component-catalog#sidebar-slot-trees) We modified or added support for customizing the following `subcomponents` of the `Sidebar Button`: - - [Sidebar Button](/ui-customization/features/async/comments/comments-sidebar/sidebar-button/overview) - - [Sidebar Button Icon](/ui-customization/features/async/comments/comments-sidebar/sidebar-button/subcomponents/icon) + - [Sidebar Button](/ui-customization/reference/component-catalog#comments) + - [Sidebar Button Icon](/ui-customization/reference/component-catalog#comments) ## Subcomponent Name Changes diff --git a/release-notes/archive/may-17-2024.mdx b/release-notes/archive/may-17-2024.mdx index 140057623..9338fda1b 100644 --- a/release-notes/archive/may-17-2024.mdx +++ b/release-notes/archive/may-17-2024.mdx @@ -5,7 +5,7 @@ ## Added Variant support in customization -If you want to have multiple versions of customized components that you can swap between, you can use [variants](/ui-customization/layout#variants). +If you want to have multiple versions of customized components that you can swap between, you can use [variants](/ui-customization/layout#3c-variants--multiple-looks-for-the-same-component). To define multiple `variants`, add multiple templates of the same component `wireframe` to the `VeltWireframe` component and give them each a `variant` name. diff --git a/release-notes/archive/may-24-2024.mdx b/release-notes/archive/may-24-2024.mdx index af11e4d97..efb4911a3 100644 --- a/release-notes/archive/may-24-2024.mdx +++ b/release-notes/archive/may-24-2024.mdx @@ -6,7 +6,7 @@ ## Added Skeleton loader subcomponent to Comments Sidebar Wireframe -The Comments Sidebar Wireframe now has a [Skeleton loader subcomponent](/ui-customization/features/async/comments/comment-sidebar-components) that you can modify. +The Comments Sidebar Wireframe now has a [Skeleton loader subcomponent](/ui-customization/reference/component-catalog#sidebar-slot-trees) that you can modify. ## Added functionality to search by name in @mention dropdown @@ -53,15 +53,15 @@ await client.identify(user); ## Added additional subcomponents to the Comments Dialog Wireframe The following subcomponents were added to the Comments Dialog Wireframe: - - [Priority Dropdown](/ui-customization/features/async/comments/comment-dialog/subcomponents/priority-dropdown) - - [Status Dropdown](/ui-customization/features/async/comments/comment-dialog/subcomponents/status-dropdown) - - [Options Dropdown](/ui-customization/features/async/comments/comment-dialog/subcomponents/options-dropdown) - - [Reaction Tool](/ui-customization/features/async/comments/comment-dialog/subcomponents/reaction-tool) - - [Reaction Pin](/ui-customization/features/async/comments/comment-dialog/subcomponents/reaction-pin) - - [Reactions Panel](/ui-customization/features/async/comments/comment-dialog/subcomponents/reactions-panel) - - [Reactions Pin Tooltip](/ui-customization/features/async/comments/comment-dialog/subcomponents/reaction-pin-tooltip) - - [Autocomplete Option](/ui-customization/features/async/comments/comment-dialog/subcomponents/autocomplete-option) - - [Autocomplete Chip Tooltip](/ui-customization/features/async/comments/comment-dialog/subcomponents/autocomplete-chip-tooltip) + - [Priority Dropdown](/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree) + - [Status Dropdown](/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree) + - [Options Dropdown](/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree) + - [Reaction Tool](/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree) + - [Reaction Pin](/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree) + - [Reactions Panel](/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree) + - [Reactions Pin Tooltip](/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree) + - [Autocomplete Option](/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree) + - [Autocomplete Chip Tooltip](/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree) ## Added support to set custom reactions @@ -107,13 +107,13 @@ commentElement.setCustomReactions(customReactions); ## Changed type in VeltCommentDialogWireframe.Composer.ActionButton from `file` to `attachments`. Keeping legacy support for `file`. -In the [Comment Dialog Wireframe](/ui-customization/features/async/comments/comment-dialog-components), we changed the type from `file` to `attachments` +In the [Comment Dialog Wireframe](/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree), we changed the type from `file` to `attachments` `` -> `` ## Added support for customizing attachments in Comment Dialog -The `VeltCommentDialogWireframe.Composer.Attachments` and `VeltCommentDialogWireframe.ThreadCard.Attachments` subcomponents within the [Comment Dialog Wireframe](/ui-customization/features/async/comments/comment-dialog-components) now support customization. +The `VeltCommentDialogWireframe.Composer.Attachments` and `VeltCommentDialogWireframe.ThreadCard.Attachments` subcomponents within the [Comment Dialog Wireframe](/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree) now support customization. ## Added method listen to Comment Selection changes. diff --git a/release-notes/version-4/sdk-changelog.mdx b/release-notes/version-4/sdk-changelog.mdx index 4410f02a4..df46a5255 100644 --- a/release-notes/version-4/sdk-changelog.mdx +++ b/release-notes/version-4/sdk-changelog.mdx @@ -1465,11 +1465,11 @@ export enum ReactionResolverModuleName { ### New Features -- [**Comments**]: Added mark as read/unread option in comment dialog. You can now toggle read status for individual comments. [See wireframe customization →](/ui-customization/features/async/comments/comment-dialog-components#optionscontentmarkasread) +- [**Comments**]: Added mark as read/unread option in comment dialog. You can now toggle read status for individual comments. [See wireframe customization →](/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree) - [**Comments**]: Added `unread` property to annotations. You can now check if an annotation is unread by the current user. See [`CommentAnnotation` data model](/api-reference/sdk/models/data-models#commentannotation). -- [**Comments**]: Added Open and Reset filters to sidebar minimal filter dropdown. Filter annotations by open status or clear all active filters. [See wireframe customization →](/ui-customization/features/async/comments/comment-sidebar-components#minimalfilterdropdowncontent) +- [**Comments**]: Added Open and Reset filters to sidebar minimal filter dropdown. Filter annotations by open status or clear all active filters. [See wireframe customization →](/ui-customization/reference/component-catalog#sidebar-slot-trees) - [**Comments**]: Added `context` prop to comment sidebar. Pass context data to page mode composer comments. @@ -1887,7 +1887,7 @@ export interface CommentBubbleClickedEvent { } ``` -- [**UI Customization**]: Added unread icon wireframes to sidebar buttons and comment bubbles. Display custom unread indicators for unread comments. [See sidebar button wireframes →](/ui-customization/features/async/comments/comment-sidebar-button#unreadicon) [See comment bubble wireframes →](/ui-customization/features/async/comments/comment-bubble#unreadicon) +- [**UI Customization**]: Added unread icon wireframes to sidebar buttons and comment bubbles. Display custom unread indicators for unread comments. [See comment surface wireframes →](/ui-customization/reference/component-catalog#comments) @@ -3107,11 +3107,11 @@ notificationElement.disableCurrentDocumentOnly(); ### New Features -- [**UI Customization**]: Added hide reply button wireframe for the comment dialog. [See wireframe customization →](/ui-customization/features/async/comments/comment-dialog-components#hidereply) +- [**UI Customization**]: Added hide reply button wireframe for the comment dialog. [See wireframe customization →](/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree) -- [**UI Customization**]: Added thread card reply button wireframe for the comment dialog to enable quick replies directly from comment thread cards. [See wireframe customization →](/ui-customization/features/async/comments/comment-dialog-components#threadcardreply) +- [**UI Customization**]: Added thread card reply button wireframe for the comment dialog to enable quick replies directly from comment thread cards. [See wireframe customization →](/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree) -- [**UI Customization**]: Added filter dropdown wireframe for the inline comments section. [See wireframe customization →](/ui-customization/features/async/comments/inline-comments-section#filterdropdown-panel) +- [**UI Customization**]: Added filter dropdown wireframe for the inline comments section. [See wireframe customization →](/ui-customization/reference/component-catalog#inline-comments-section) - [**Comments**]: Added `allowedFileTypes` property to limit file types in comment attachments. @@ -3301,7 +3301,7 @@ commentElement.disableFullScreenInSidebar(); - [**Comments**]: Added search by annotation number in Comments Sidebar. You can now quickly find specific comments by typing their annotation number (e.g., `#2`) in the search field, making it faster to locate and navigate to referenced comments. ### UI Customization -- [**Comments**]: Added new wireframes to customize the appearance of comment annotation numbers and full-screen button in the Comments Sidebar. [See comment dialog wireframes →](/ui-customization/features/async/comments/comment-dialog-components#commentnumber) [See comment pin wireframes →](/ui-customization/features/async/comments/comment-pin#number) [See sidebar wireframes →](/ui-customization/features/async/comments/comment-sidebar-components#fullscreenbutton) +- [**Comments**]: Added new wireframes to customize the appearance of comment annotation numbers and full-screen button in the Comments Sidebar. [See comment wireframes →](/ui-customization/reference/component-catalog#comments) ### Bug Fixes - [**Recorder**]: Fixed Firefox compatibility issue that was preventing recordings from being stopped properly. @@ -3720,7 +3720,7 @@ await Velt.getUserPermissions(request as GetUserPermissionsRequest); ### New Features -- [**Comments**]: Updated default placeholders and added props to customize placeholders for comment and reply inputs. Added wireframes to allow users to customize how it looks. [See wireframe customization →](/ui-customization/features/async/comments/comment-dialog-components#composerinput) +- [**Comments**]: Updated default placeholders and added props to customize placeholders for comment and reply inputs. Added wireframes to allow users to customize how it looks. [See wireframe customization →](/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree) - Default placeholders: - Comment: "Comment or add others with @" - Reply: "Reply or add others with @" @@ -3755,9 +3755,9 @@ useEffect(() => { -- [**Comments**]: Added Edited chip in comment thread: Edits are now visibly transparent at a glance, improving auditability and helping reviewers quickly spot updated messages in long discussions. See [Comment Dialog components](/ui-customization/features/async/comments/comment-dialog-components). +- [**Comments**]: Added Edited chip in comment thread: Edits are now visibly transparent at a glance, improving auditability and helping reviewers quickly spot updated messages in long discussions. See [Comment Dialog components](/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree). -**New wireframes added to customize "Edited" Chip:** [See wireframe customization →](/ui-customization/features/async/comments/comment-dialog-components#threadcardedited) +**New wireframes added to customize "Edited" Chip:** [See wireframe customization →](/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree) ### Bug Fixes - [**Comments**]: In `InlineCommentsSection` single-thread mode, count now reflects the number of Comments vs Comment Annotations. @@ -4920,7 +4920,7 @@ Note after this update, if you plan to go back to older version of the SDK befor - [Learn more](/realtime-collaboration/crdt/setup/tiptap) -- [**Video Editor**]: Added zoom button in video editor with [wireframes support](/ui-customization/features/async/recorder/video-editor#addzoombutton). +- [**Video Editor**]: Added zoom button in video editor with [wireframes support](/ui-customization/features/recorder-and-transcription). - [**Recorder**]: Added API to turn on/off the microphone on the recorder control panel. @@ -4951,7 +4951,7 @@ Note after this update, if you plan to go back to older version of the SDK befor ### New Features -- [**Comments**]: Added reply avatar component with [wireframes support](/ui-customization/features/async/comments/comment-dialog/subcomponents/body/subcomponents/replyavatars). This shows the avatars of unique users who have replied to a comment. +- [**Comments**]: Added reply avatar component with [wireframes support](/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree). This shows the avatars of unique users who have replied to a comment. **Using props:** @@ -5268,7 +5268,7 @@ Note after this update, if you plan to go back to older version of the SDK befor - [**Comments**]: Added ability to add custom filters via `FilterConfig`. 1. First enable custom actions. 2. Add custom filters in filter config. - 3. Add [custom filters wireframe](/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/subcomponents/custom) to the sidebar wireframe. + 3. Add [custom filters wireframe](/ui-customization/reference/component-catalog#sidebar-slot-trees) to the sidebar wireframe. 4. Add callbacks to update sidebar data when the filters are used. @@ -5351,7 +5351,7 @@ Note after this update, if you plan to go back to older version of the SDK befor /> ``` - **3. Add [custom filters wireframe](/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/subcomponents/custom) for each custom filter you added in filter config:** + **3. Add [custom filters wireframe](/ui-customization/reference/component-catalog#sidebar-slot-trees) for each custom filter you added in filter config:** ```jsx @@ -5930,7 +5930,7 @@ Velt.setDataProviders({ - Update settings programmatically with `setSettings()` API. [Learn more](/async-collaboration/notifications/customize-behavior#setsettings) - Get current settings with `getSettings()` API. [Learn more](/async-collaboration/notifications/customize-behavior#getsettings) - Subscribe to settings updates with `settingsUpdated` event. [Learn more](/async-collaboration/notifications/customize-behavior#on) - - Added wireframe components for notifications panel settings UI. [Learn more](/ui-customization/features/async/notifications/notifications-panel#settings) + - Added wireframe components for notifications panel settings UI. [Learn more](/ui-customization/features/notifications#wireframes--slot-trees--tokens) - Added Backend APIs to set and get notifications settings. [Learn more](/api-reference/rest-apis/v2/notifications/set-config) ### Improvements @@ -7293,7 +7293,7 @@ contactElement.getContactList().subscribe((response) => { ### New Features - [**Comments**]: Added a config to show expanded user groups inside the @mentions dropdown menu. - - Added [new wireframes](/ui-customization/features/async/comments/comment-dialog/subcomponents/autocomplete-group-option) to customize the display of user groups. + - Added [new wireframes](/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree) to customize the display of user groups. - Here are some props to control the display of user groups: - `expandMentionGroups`: Whether to expand the user groups and show individual users inside the groups in the @mentions dropdown menu. - `showMentionGroupsFirst`: Whether to show the user groups in the @mentions dropdown menu before the non-group users. @@ -7321,8 +7321,8 @@ contactElement.getContactList().subscribe((response) => { - [**Comments Sidebar**]: Added two new default system filters and their wireframes to the sidebar: - - `Tagged`: Filter comments by specifying the user who was tagged in the comment. ([Wireframe](/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/subcomponents/tagged)) - - `Assigned`: Filter comments by specifying the user who was assigned to the comment. ([Wireframe](/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/subcomponents/assigned)) + - `Tagged`: Filter comments by specifying the user who was tagged in the comment. ([Wireframe](/ui-customization/reference/component-catalog#sidebar-slot-trees)) + - `Assigned`: Filter comments by specifying the user who was assigned to the comment. ([Wireframe](/ui-customization/reference/component-catalog#sidebar-slot-trees)) ```typescript class CommentSidebarFilterConfig { @@ -7332,7 +7332,7 @@ contactElement.getContactList().subscribe((response) => { // ... existing properties ... } ``` -- [**Comments Sidebar**]: Added another UI pattern for filters options: searchable dropdown with checklist. ([Example Wireframe](/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/subcomponents/tagged)) +- [**Comments Sidebar**]: Added another UI pattern for filters options: searchable dropdown with checklist. ([Example Wireframe](/ui-customization/reference/component-catalog#sidebar-slot-trees)) @@ -7347,7 +7347,7 @@ contactElement.getContactList().subscribe((response) => { -- [**Comments Sidebar**]: Added a reset filter button. ([Wireframe](/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/subcomponents/reset-button)) +- [**Comments Sidebar**]: Added a reset filter button. ([Wireframe](/ui-customization/reference/component-catalog#sidebar-slot-trees)) - [**Comments Sidebar**]: Added prop to disable count calculation for sidebar filter options. @@ -7902,7 +7902,7 @@ client.setDataProviders({ ### New Features - [**Comments**]: Tiptap comments marks are now persisted automatically by default. This simplifies implementation as you no longer need to store marks yourself or modify your editor's content handling. -- [**Comments**]: Added Sorting Dropdown Wireframe support for inline comments section. [Learn more](/ui-customization/features/async/comments/inline-comments-section/subcomponents/panel/sorting-dropdown) +- [**Comments**]: Added Sorting Dropdown Wireframe support for inline comments section. [Learn more](/ui-customization/reference/component-catalog#inline-comments-section) ### Improvements - [**Comments**]: Made the freestyle comment pins adapt to DOM elements with complex layouts. @@ -9187,7 +9187,7 @@ CommentAnnotationsCount { - [**Comments**]: Added support for Status Filter in Comments Sidebar's main filter menu: - By default, the status filter is disabled in the main filter menu. - Currently, it doesn't support grouping. - - Added Wireframe support for this. [Learn more](/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/subcomponents/status). + - Added Wireframe support for this. [Learn more](/ui-customization/reference/component-catalog#sidebar-slot-trees). - If you were using wireframes before, you will add this to your wireframes. diff --git a/release-notes/version-5/sdk-changelog.mdx b/release-notes/version-5/sdk-changelog.mdx index da1a782ca..9bffabddd 100644 --- a/release-notes/version-5/sdk-changelog.mdx +++ b/release-notes/version-5/sdk-changelog.mdx @@ -44,7 +44,7 @@ description: Release Notes of changes added to the core Velt SDK ### Bug Fixes -- [**Comments**]: "Hide replies" now fully collapses an inline comment thread back to its first-comment teaser. Previously, clicking "Hide replies" on an expanded thread left it partially expanded (first comment + last comment + divider) instead of returning to the teaser (first comment + "N replies" toggle). The collapse now mirrors clicking outside the thread: it deselects the annotation so the thread-card visibility logic shows the teaser, and the click no longer re-selects the annotation. Applies to the comment dialog/comment tool in both the HTML and React SDKs. [Learn more →](/ui-customization/features/async/comments/comment-dialog/wireframe-variables) +- [**Comments**]: "Hide replies" now fully collapses an inline comment thread back to its first-comment teaser. Previously, clicking "Hide replies" on an expanded thread left it partially expanded (first comment + last comment + divider) instead of returning to the teaser (first comment + "N replies" toggle). The collapse now mirrors clicking outside the thread: it deselects the annotation so the thread-card visibility logic shows the teaser, and the click no longer re-selects the annotation. Applies to the comment dialog/comment tool in both the HTML and React SDKs. [Learn more →](/ui-customization/template-variables) @@ -143,7 +143,7 @@ Velt.clearPageInfo(); ### Improvements -- [**Comments & Notifications**]: Added additional standalone primitive support across comments and notifications components. [Learn more →](/ui-customization/features/async/comments/comment-dialog/primitives) +- [**Comments & Notifications**]: Added additional standalone primitive support across comments and notifications components. [See primitive components →](/ui-customization/reference/primitives) - [**Notifications**]: The notification panel's People tab now shows per-user notification counts in org-mode sessions. @@ -159,7 +159,7 @@ Velt.clearPageInfo(); - [**Notifications**]: Opt-in cross-organization "For You" notifications. When enabled, notifications from the user's other organizations merge into the "For You" feed, sorted by timestamp (current-org wins on ID collision). Disabled by default. [Learn more →](/async-collaboration/notifications/customize-behavior#enablecrossorganization) -- [**Comments**]: A resolution-status banner now appears at the top of the comment dialog (and in the agent-suggestion card) once a suggestion is `accepted` or `rejected`. It shows the resolver's avatar, a status icon, an "Accepted"/"Rejected" label, and a relative timestamp, and stays hidden while a suggestion is pending. No new API or props required. [Learn more →](/ui-customization/features/async/comments/comment-dialog/primitives#veltcommentdialogagentsuggestionbanner) +- [**Comments**]: A resolution-status banner now appears at the top of the comment dialog (and in the agent-suggestion card) once a suggestion is `accepted` or `rejected`. It shows the resolver's avatar, a status icon, an "Accepted"/"Rejected" label, and a relative timestamp, and stays hidden while a suggestion is pending. No new API or props required. [See comment primitives →](/ui-customization/reference/primitives) ### Bug Fixes @@ -435,7 +435,7 @@ commentElement.on('addCommentDraft').subscribe((event) => { -- [**Comments**]: Added download buttons for image and other file attachments in the edit comment dialog. [Learn more →](/ui-customization/features/async/comments/comment-dialog/primitives) +- [**Comments**]: Added download buttons for image and other file attachments in the edit comment dialog. [See comment dialog slots →](/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree) - [**Comments**]: Confirm dialog now uses variant CSS classes for comment and reply deletes, enabling easier styling. @@ -605,7 +605,7 @@ contactElement.updateContactList(contacts, { filters: true }); ### New Features -- [**Notifications**]: Added granular primitive components for `VeltNotificationsPanel` and `VeltNotificationsTool`, including — header tabs, content lists, settings accordion, skeleton, and more. Each primitive is standalone (not nested inside another) and supports `variant`, `darkMode`, `shadowDom`, and `parentLocalUIState` props. [Learn more →](/ui-customization/features/async/notifications/notifications-primitives) +- [**Notifications**]: Added granular primitive components for `VeltNotificationsPanel` and `VeltNotificationsTool`, including header tabs, content lists, settings accordion, skeleton, and more. Each primitive is standalone (not nested inside another) and supports `variant`, `darkMode`, `shadowDom`, and `parentLocalUIState` props. [See notification customization →](/ui-customization/features/notifications) - [**Workspace REST API**]: Added 20 endpoints to create and manage Velt workspace covering workspace creation, API key management, auth tokens, domain management, email and webhook configuration, and API key metadata. [Learn more →](/api-reference/rest-apis/v2/workspace/create) @@ -824,7 +824,7 @@ authHost: 'auth-proxy.example.com', -- [**UI Customization**]: Six comment component families — Comment Pin, Comment Bubble, Text Comment, Inline Comments Section, Multi-Thread Comment Dialog, and Sidebar Button — have been migrated to the V2 primitive architecture. Each family now exposes standalone primitive components for fine-grained wireframe customization. All primitives accept a `defaultCondition` / `default-condition` prop to control whether the built-in render condition is evaluated. [Learn more →](/ui-customization/features/async/comments/comment-dialog/primitives) +- [**UI Customization**]: Six comment component families — Comment Pin, Comment Bubble, Text Comment, Inline Comments Section, Multi-Thread Comment Dialog, and Sidebar Button — have been migrated to the V2 primitive architecture. Each family now exposes standalone primitive components for fine-grained wireframe customization. All primitives accept a `defaultCondition` / `default-condition` prop to control whether the built-in render condition is evaluated. [See comment surface mapping →](/ui-customization/reference/component-catalog#comments) - [**Recorder**]: Added a `recorder.done` webhook event (available on both V1 `WebhookService` and V2 `WebhooksV2Service`) fired when a recording finishes processing. The event payload includes recording assets, transcription data (segments, VTT file URL, content summary), and action user metadata. Enable or disable it per workspace via `triggers.recorder.done` (defaults to `true`). @@ -933,7 +933,7 @@ Velt.setDataProviders({ ### New Features - [**UI Customization**]: Added Velt Comments Sidebar V2 — a complete redesign of the Comments Sidebar built on a flat primitive component architecture. Every section of the UI is an independently importable and composable primitive. The V2 sidebar ships with a unified filter model (replacing the legacy `minimalFilter` + `advancedFilters` system), CDK virtual scroll for large comment lists, a focused-thread view, a minimal actions dropdown, and a filter dropdown. - - All sections are fully wireframe-customizable and available as standalone primitives. See the [UI Customization docs](/ui-customization/features/async/comments/comment-sidebar-components-v2) for the complete wireframe structure and list of `VeltCommentsSidebarV2*` / `velt-comments-sidebar-*-v2` components. + - All sections are fully wireframe-customizable and available as standalone primitives. See the [UI Customization docs](/ui-customization/reference/component-catalog#sidebar-slot-trees) for the complete wireframe structure and list of `VeltCommentsSidebarV2*` / `velt-comments-sidebar-*-v2` components. ```jsx @@ -1254,9 +1254,9 @@ Velt.setDataProviders({ ### New Features -- [**UI Customization**]: Added 13 standalone autocomplete primitive components (`VeltAutocompleteOption`, `VeltAutocompleteChip`, `VeltAutocompleteEmpty`, etc.) for building fully custom autocomplete UIs without requiring the full `` panel. [Learn More →](/ui-customization/features/async/comments/comment-dialog/primitives#veltautocomplete) +- [**UI Customization**]: Added 13 standalone autocomplete primitive components (`VeltAutocompleteOption`, `VeltAutocompleteChip`, `VeltAutocompleteEmpty`, etc.) for building fully custom autocomplete UIs without requiring the full `` panel. [Learn More →](/ui-customization/reference/primitives) -- [**UI Customization**]: Added `multiSelect`, `selectedFirstOrdering`, `readOnly`, `inline`, and `contacts` props to the [`VeltAutocomplete`](/ui-customization/features/async/comments/comment-dialog/primitives#veltautocomplete) panel component. +- [**UI Customization**]: Added `multiSelect`, `selectedFirstOrdering`, `readOnly`, `inline`, and `contacts` props to the [`VeltAutocomplete`](/ui-customization/reference/primitives) panel component. ### Improvements @@ -1307,7 +1307,7 @@ commentElement.disableVisibilityOptions(); -The banner surface is fully wireframe-customizable via the new [`VeltCommentDialogWireframe.VisibilityBanner.*` / `velt-comment-dialog-visibility-banner-*`](/ui-customization/features/async/comments/comment-dialog-components#visibility-banner) family. +The banner surface is fully wireframe-customizable via the new [`VeltCommentDialogWireframe.VisibilityBanner.*` / `velt-comment-dialog-visibility-banner-*`](/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree) family. - [**Comments**]: Added `AddCommentRequest.visibility` field of type `CommentVisibilityConfig` to set comment visibility at creation time. Previously visibility could only be set after creation via `updateVisibility()`. @@ -1537,7 +1537,7 @@ commentElement.on('visibilityOptionClicked').subscribe((event) => { -To customize the dropdown via wireframes, you can refer to the [wireframe documentation](/ui-customization/features/async/comments/comment-dialog-components#visibility-dropdown-composer). +To customize the dropdown via wireframes, you can refer to the [wireframe documentation](/ui-customization/reference/component-catalog#veltcommentdialogwireframe-slot-tree). ### Bug Fixes @@ -3070,7 +3070,7 @@ commentElement.submitComment('composer-1'); -- [**Comments**]: Added `placeholder` prop to customize input placeholder text in comment composer. Overrides default placeholders. [Learn more](/ui-customization/features/async/comments/standalone-components/comment-composer#placeholder) +- [**Comments**]: Added `placeholder` prop to customize input placeholder text in comment composer. Overrides default placeholders. [Learn more](/async-collaboration/comments/standalone-components/comment-composer/customize-behavior) @@ -3169,6 +3169,6 @@ Released 115+ primitive components for building custom comment dialogs. Each sub - **Dropdowns**: StatusDropdown, PriorityDropdown, OptionsDropdown, CustomAnnotationDropdown (each with full sub-component breakdown) - **Additional**: ReplyAvatars, AssigneeBanner, ResolveButton, UnresolveButton, CopyLink, DeleteButton, PrivateBanner, NavigationButton, and 90+ more -[View full documentation →](/ui-customization/features/async/comments/comment-dialog/primitives) | [Data Models](/api-reference/sdk/models/data-models#comment-dialog-primitives) +[View full documentation →](/ui-customization/reference/primitives) | [Data Models](/api-reference/sdk/models/data-models#comment-dialog-primitives) diff --git a/ui-customization/.DS_Store b/ui-customization/.DS_Store deleted file mode 100644 index 1eb8d9368e55d76b79ff996a564f489b2a0e1fc3..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6148 zcmeHK%}T>S5Z-O8-BN@e6nb3nTCldZAYMYPFJMFuDm5WhgE3o@)Er77XMG``#OHBl zcLNrC@FZeqVDrt+&+g6#*&oIjAI*b9##)Rq0S%F(vPRIn)>W~=h+K~`X9=6K)X&q| znt}eJ3D+*zJ*?Ve8T+z+KTYjfYPV-4?_f*B17sk^>CxpQiLT;|YI8gaW&Ep`|xvp`DhGpSS;ZUly7ytxJewT_yK%nUKvkF z3=jjv05PyR4A?V3G&iSYs+1TY27br@?hg_gqGPczsJ9OI;Pn~(HAEE9@hyQUEjktp zgWv(-CKb@6a{I*KCLQe3#yJ)XgC?DEJu{4BXD%NvT+a@6slyp}4APevAO=<$sG4pI z&;K*{W!66OS5v4*3=jkVi~(L7yW6T?q1{14!MFky5YSgH0novHq^+IC cFHwg$$6{d+M?t$z2c(ODCWJo3z%MZH2|=z+EC2ui diff --git a/ui-customization/build-gotchas.mdx b/ui-customization/build-gotchas.mdx new file mode 100644 index 000000000..c88bc14c3 --- /dev/null +++ b/ui-customization/build-gotchas.mdx @@ -0,0 +1,36 @@ +--- +title: "Build gotchas: common traps and fixes" +sidebarTitle: "Build gotchas" +description: "Avoid common build-time mistakes when translating design specs into Velt UI customizations." +--- + +These are common failure modes when building Velt UI customizations from a design. Check them before assuming the SDK is broken. + +## Inspecting +- **Inspect the LIVE rendered node, not the registry template.** A wireframe is cloned: the `velt-*-wireframe` custom-element tags are the hidden registry copy (0-size, empty). `document.querySelector('.hw-x')` may hit that copy. Always pick the element with `getBoundingClientRect().width > 0` (the visible clone) and read *its* classes/computed styles. Measuring the wrong node is how you "verify" something that's actually broken. + +## Wireframe clone behavior +- **Some slots OVERWRITE their inner markup with their own label.** `ToggleReply` replaced custom ` + Reply` with a plain "Reply" text node; `CopyLink` did the same. **Fix:** don't nest icons in those slots: inject the icon via CSS `::before` (a data-URI SVG on your `.hw-*` class), which survives the clone. +- **Wireframe MARKUP changes need a FULL page reload to take effect, not just new wireframes.** CSS edits hot-reload fine, but the `` registry is built at mount: changing an existing template's markup (e.g. switching the composer's send to a self-closing `ActionButton`, or swapping Cancel to a `VeltButtonWireframe`) **re-renders under Fast Refresh but does NOT re-register the template**: the browser keeps rendering the OLD wireframe, so your fix "doesn't work" until a hard reload. After ANY `*Wf.tsx` change: hard-reload (Cmd-Shift-R), re-auth, reopen, and verify in a freshly-loaded tab, never a hot-reloaded one. (This masked a *correct* composer-submit fix as "still broken".) +- **Container slots drop undeclared children**: declare the full child tree you intend to use. + +## Styling / scoping +- **Class CSS needs shadow off + `!important`** (R6/R9b). With `shadowDom={false}` the live classes are reachable; Velt's runtime CSS is high-specificity, so overrides need `!important`. +- **The page-mode composer renders the WHOLE dialog wireframe** (your `.hw-card` and all). It inherits the card chrome (border/shadow/resolve-icon) and crushes the input. **Fix:** scope the card chrome off in that context: `.velt-comment-dialog--page-mode-composer .hw-card { border:none; box-shadow:none; padding:0; background:transparent }`: leaving just the composer pill. (Alternatively give the page-mode composer its own variant via `pageModeComposerVariant`.) +- **Composer "active" state = the `.velt-composer-open` ancestor class** (focus/compose), not a "has-text" class (there is none). Style the send button: grey/disabled by default, dark/enabled under `.velt-composer-open`. +- **Avatar fill color is user-data-driven**, not CSS: "User 1" renders peach. To match a design that shows a flat dark avatar, override `.…s-user-avatar-initial-container { background }` + the initial color (this overrides per-user colors: a deliberate choice to flag). +- **The send-arrow indigo lives on an inner element** (`.velt-composer--input-button`), not the outer `.velt-composer--submit-button`: override the inner one. + +## Composer actions · collapsed replies · resolved state (design patterns that bit us) +- **Cancel button: use `VeltButtonWireframe`, never a raw ` - ) - -} -``` - - - - - - -```html HTML - - - -``` - - - \ No newline at end of file diff --git a/ui-customization/features/async/arrows/parts.mdx b/ui-customization/features/async/arrows/parts.mdx deleted file mode 100644 index 18ddd3369..000000000 --- a/ui-customization/features/async/arrows/parts.mdx +++ /dev/null @@ -1,37 +0,0 @@ - - - -We offer several parts which can be used like classes. Full list below. -The component is encapsulated in Shadow DOM, which is isolated from the normal DOM. - - - - -Set whatever CSS rules you want. -The part lets you target a specific element within a Shadow DOM. - - - -Reference the table below to see what parts we expose. -Alternatively, you can directly inspect the component HTML to see what parts are available. - -| property | description | -|---|---| -| `container` | Targets the comment tool container | -| `button-container` | Targets the comment tool button container | -| `button-icon` | Targets the comment tool button SVG icon | - - - - - - - -```css Tool -velt-arrow-tool::part(button-icon) { - width: 1.5rem; - height: 1.5rem; -} -``` - - \ No newline at end of file diff --git a/ui-customization/features/async/arrows/slots.mdx b/ui-customization/features/async/arrows/slots.mdx deleted file mode 100644 index 128f9f325..000000000 --- a/ui-customization/features/async/arrows/slots.mdx +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: "Slots" ---- - - - - - -Provide a template for the Arrow Tool. - -Target the `button` slot with your own custom template. - - - - - - - - - - -```js React / Next.js -import { - VeltArrowTool -} from '@veltdev/react'; - -export default function App() { - - return ( - <> - - - - - - - ); -} -``` - -```html HTML - - - - - Arrow documentation - - - - - - - - - -``` - - diff --git a/ui-customization/features/async/arrows/variables.mdx b/ui-customization/features/async/arrows/variables.mdx deleted file mode 100644 index fd5d10369..000000000 --- a/ui-customization/features/async/arrows/variables.mdx +++ /dev/null @@ -1 +0,0 @@ -To update CSS variables for the Arrow Tool, please refer to [Global Styles](/global-styles/global-styles) \ No newline at end of file diff --git a/ui-customization/features/async/arrows/wireframe-variables.mdx b/ui-customization/features/async/arrows/wireframe-variables.mdx deleted file mode 100644 index 625434569..000000000 --- a/ui-customization/features/async/arrows/wireframe-variables.mdx +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Arrows Wireframe Variables -description: Template variables exposed by the Arrows feature — read them with velt-data, velt-if, and velt-class once wireframe-tag interpolation ships. ---- - - - **Limited support.** Arrows do **not** currently expose `` tags, so `velt-data` / `velt-if` / `velt-class` interpolation is not yet available on this feature. Until wireframe-tag registration ships, customize Arrows through CSS — see [Parts](./parts), [Variables](./variables), and [Custom Button](./custom-button). The variables below are documented for completeness so you know what the runtime model looks like. - - - - New to wireframes? Start with [UI Customization Concepts](/ui-customization/overview) and the [Template Variables](/ui-customization/template-variables) overview. - - -## Overview - -The **Arrows** feature draws directional arrow annotations on the page. Once wireframe-tag registration ships, the variables below will be available inside any `` tag via three forms: - -| You want to… | Use | Example | -|---|---|---| -| Display a value as text | `` | `` | -| Hide / show conditionally | `velt-if="{var}"` | `velt-if="{componentConfig.annotationDragging}"` | -| Toggle a CSS class | `velt-class="'cls': {var}"` | `velt-class="'is-dragging': {componentConfig.annotationDragging}"` | - - - This feature uses the **flat-config** access pattern — variables are referenced via the explicit `componentConfig.` form. The variables below are documented for completeness; wireframe-tag interpolation is not yet supported (see warning above). - - -## Component Config - -| Variable | Type | Description | Example | -|---|---|---|---| -| `componentConfig.arrowPinAnnotation` | [`ArrowAnnotation`](/api-reference/sdk/models/data-models#arrowannotation) | The arrow annotation data — includes start / end positions, colour, and author. | `` | -| `componentConfig.user` | [`User`](/api-reference/sdk/models/data-models#user) | Currently identified end-user. | `` | -| `componentConfig.targetElement` | `HTMLElement` | DOM target the arrow is anchored to. | _Internal — DOM reference._ | -| `componentConfig.annotationDragging` | `boolean` | Arrow is currently being dragged. | `velt-class="'is-dragging': {componentConfig.annotationDragging}"` | -| `componentConfig.dragPosition` | `{ top: number; left: number }` \| `null` | Live drag position used to compute inline style. | _Internal — used to compute inline style._ | -| `componentConfig.offsetTop` | `number` | Vertical position offset. | _Internal — used to compute inline style._ | -| `componentConfig.offsetLeft` | `number` | Horizontal position offset. | _Internal — used to compute inline style._ | -| `componentConfig.selectedAnnotationsMap` | [`SelectedAnnotationsMap`](/api-reference/sdk/models/data-models#selectedannotationsmap) | Map keyed by `annotationId` → `CommentAnnotation`. Truthy when that annotation is selected. | `velt-class="'is-selected': {componentConfig.selectedAnnotationsMap[componentConfig.arrowPinAnnotation.annotationId]}"` | - -## Type Reference - -Types referenced by the variables above: - -| Type | Description | -|---|---| -| [`User`](/api-reference/sdk/models/data-models#user) | Identified end-user object. | -| [`ArrowAnnotation`](/api-reference/sdk/models/data-models#arrowannotation) | Arrow-annotation data — start / end positions, colour, author, and metadata. | -| [`SelectedAnnotationsMap`](/api-reference/sdk/models/data-models#selectedannotationsmap) | Selection-state map keyed by `annotationId`. | - -## Subcomponents - -The four primitives below make up the Arrows feature. None of them currently expose a `` registration — see the warning at the top of the page. - -### `arrows-tool` - -The trigger to draw a new arrow. - -- **Public element:** `` - -| Property | Value | -|---|---| -| Wireframe tag | No `` registration available — see warning at top of page. | - ---- - -### `arrow-pin` - -A placed arrow on the document. - -- **Public element:** `` - -| Property | Value | -|---|---| -| Wireframe tag | No `` registration available — see warning at top of page. | - ---- - -### `arrow-pin-portal` - -The per-pin overlay portal that renders the arrow visual. - -- **Public element:** `` - -| Property | Value | -|---|---| -| Wireframe tag | No `` registration available — see warning at top of page. | - ---- - -### `arrows-container` - -The per-document orchestrator that hosts every placed arrow. - -- **Public element:** `` - -| Property | Value | -|---|---| -| Wireframe tag | No `` registration available — see warning at top of page. | - -## Related - -- [Arrows — Parts](./parts) — CSS `::part(...)` hooks for the arrow tool button. -- [Arrows — Variables](./variables) — CSS variables for the arrow visual. -- [Arrows — Custom Button](./custom-button) — full custom-button overrides. -- [Template Variables](/ui-customization/template-variables) — overview of the `velt-data` / `velt-if` / `velt-class` system. diff --git a/ui-customization/features/async/comments/.DS_Store b/ui-customization/features/async/comments/.DS_Store deleted file mode 100644 index fcd0ac6ce557b482611860cffac0e2489b681606..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6148 zcmeH~%}T>S5XWb0)s!OSpwQ!j*NU~Z1@RJUeE}nSP^pP28cegLN$sH&a@H5}Nqin> zcDJIacoD%eQ)YkrF|%R+DZ5z!5Zy_%2jBvLgH9|}u=v7gocxoOY!6ZBIR=nI4jJsA zv;7AJ=-s(+0}6)td;k7oh_D?(0ON3)jlx8Q82cQKk~qs7jTcc`DX*@rJL^u>x$^JS z)X#%_l68ae1+`9nsWcDbbTHNlaWue?%kwym)U>N6X_V<)-wZev zr_y(8vstUzuFF=tGq20pL9oD=UU9azcMnhc_sK9-k49{P|3hsXmJ2*#<;QhC z_~SHD=`F@C=2_%3Spimn6<8((>>lS-muXSF7FK{2_!R|ce~{=z&$2MoTL%{O`AFks zA{o}{E)v?0v{DvF-@1w|KsoP{~wdM#R{+jOQnD)_xxTLmt@b@Pm80oR-#{{lTln@_?Chd ieH3FX9mO?tZP+iVg7hp4L+nB04*@L$7p%aaD)0)L8B#g` diff --git a/ui-customization/features/async/comments/autocomplete-wireframe-variables.mdx b/ui-customization/features/async/comments/autocomplete-wireframe-variables.mdx deleted file mode 100644 index 80122be36..000000000 --- a/ui-customization/features/async/comments/autocomplete-wireframe-variables.mdx +++ /dev/null @@ -1,219 +0,0 @@ ---- -title: Autocomplete Wireframe Variables -description: Template variables exposed by the Autocomplete wireframe — read them with velt-data, velt-if, and velt-class to drive dynamic content, conditional rendering, and class toggling. ---- - - - New to wireframes? Start with [UI Customization Concepts](/ui-customization/overview) and the [Template Variables](/ui-customization/template-variables) overview. - - -## Overview - -The **Autocomplete** primitive is the @-mention picker rendered inside `` (or ``), mounted by composers — most prominently the [Comment Dialog Composer](./comment-dialog/wireframe-variables#comment-dialog-composer). Variables below are available inside any `` tag via three forms: - -| You want to… | Use | Example | -|---|---|---| -| Display a value as text | `` | `` | -| Hide / show conditionally | `velt-if="{var}"` | `velt-if="{componentConfig.flattenedItems.length} === 0"` | -| Toggle a CSS class | `velt-class="'cls': {var}"` | `velt-class="'custom-search': {componentConfig.customAutocompleteSearch}"` | - - - This feature uses the **flat-config** access pattern — top-level state is referenced via the explicit `componentConfig.` form. Iteration variables (`option`, `chip`) are injected by specific subcomponents and resolve as bare names — see [Context-Specific Variables](#context-specific-variables) below. - - -## Component Config - -Panel-level state shared with every Autocomplete primitive. - -| Variable | Type | Description | Example | -|---|---|---|---| -| `componentConfig.flattenedItems` | `FlattenedItem[]` | Visible options after grouping / filtering. | `` | -| `componentConfig.trackByFlattenedItem` | `Function` | Identity function used internally to track virtual-scroll items. | _Internal — used as a track-by function._ | -| `componentConfig.onOptionClick` | `Function` | Click handler for a custom option. Wire this up in your wireframe. | _Call this from your custom option markup._ | -| `componentConfig.newUserContactError` | `string` \| `undefined` | Validation error for the in-progress new-contact entry. | `velt-if="{componentConfig.newUserContactError}"` | -| `componentConfig.newUserContact` | `SelectorDataListItem` \| `undefined` | The in-progress new-contact entry. | `` | -| `componentConfig.customAutocompleteSearch` | `boolean` | Custom-search mode is active. | `velt-class="'custom-search': {componentConfig.customAutocompleteSearch}"` | -| `componentConfig.variant` | `string` | Per-instance variant tag. | `` | -| `componentConfig.contactsWithoutGroup` | `SelectorDataListItem[]` | Contacts not assigned to any group. | `` | -| `componentConfig.groups` | `GroupData[]` | Available mention groups. | `` | -| `componentConfig.expandMentionGroups` | `boolean` | Render group rows as expanded. | `velt-class="'expanded-groups': {componentConfig.expandMentionGroups}"` | -| `componentConfig.showMentionGroupsFirst` | `boolean` | Show group rows above contact rows. | `velt-class="'groups-first': {componentConfig.showMentionGroupsFirst}"` | -| `componentConfig.showMentionGroupsOnly` | `boolean` | Only show group rows. | `velt-class="'groups-only': {componentConfig.showMentionGroupsOnly}"` | -| `componentConfig.customGroupsEnabled` | `boolean` | Custom-groups feature is enabled. | `velt-if="{componentConfig.customGroupsEnabled}"` | -| `componentConfig.autoCompleteScrollConfig.itemSize` | `number` | Virtual-scroll item-size config. | _Internal — virtual-scroll config._ | - -## Context-Specific Variables - -These are only resolvable inside the nested wireframe tags noted in the **Available in** column. Each is injected by the iteration primitive that owns the tag. - -| Variable | Type | Available in | Example | -|---|---|---|---| -| `option` | `SelectorDataListItem` | ``, ``, and their child tags | `` | -| `option.user` | [`User`](/api-reference/sdk/models/data-models#user) | Same as above — when the option represents a user. | `` | -| `option.group` | `GroupData` | Same as above — when the option represents a group. | `` | -| `chip` | `AutocompleteChipConfig` | `` and its tooltip child tags | `` | - -## Type Reference - -Types referenced by the variables above: - -| Type | Description | -|---|---| -| [`User`](/api-reference/sdk/models/data-models#user) | Identified end-user object (used by `option.user`). | -| [`FlattenedItem`](/api-reference/sdk/models/data-models#flatteneditem) | Visible-option row produced after grouping / flattening. | -| [`SelectorDataListItem`](/api-reference/sdk/models/data-models#selectordatalistitem) | Selectable item (`option`) — has `name`, `email`, `description`, optional `user`, optional `group`. | -| [`GroupData`](/api-reference/sdk/models/data-models#groupdata) | Mention-group object (`name`, `userCount`, members). | -| [`AutocompleteChipConfig`](/api-reference/sdk/models/data-models#autocompletechipconfig) | Inline-chip metadata (`label`, plus tooltip data). | - -## Subcomponents - -Each subcomponent below has its own wireframe tag (except where noted). - -### `autocomplete-tool` - -The trigger button that opens the panel (e.g. the "@" icon button in the composer). - -- **Public element:** `` - -| Property | Value | -|---|---| -| Wireframe tag | No `` registration. The tool's appearance is controlled via the parent's wireframe (e.g. the [composer-action-button](./comment-dialog/wireframe-variables#comment-dialog-composer)). | - ---- - -### `autocomplete-panel` - -The opened menu — the Autocomplete root primitive that hosts every other tag. - -- **Public element:** `` - -| Property | Value | -|---|---| -| Extra variables | None at the panel level. Iteration descendants receive `option` / `chip` per row. | - ---- - -### `autocomplete-empty` - -Empty-state shown when no options match the current query. - -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | -| `shouldShow` | `componentConfig.flattenedItems.length === 0` | - ---- - -### `autocomplete-option` - -A single option row. Composes name + description + icon + error-icon child tags. - -- **Wireframe tag:** `` - -| Variable | Type | Example | -|---|---|---| -| `option` | `SelectorDataListItem` | `` | -| `option.user` | [`User`](/api-reference/sdk/models/data-models#user) | `` | -| `option.email` | `string` | `` | -| `option.description` | `string` | `` | - -| Property | Value | -|---|---| -| Children | `*-option-name`, `*-option-description`, `*-option-icon`, `*-option-error-icon`. | - ---- - -### `autocomplete-group-option` - -A group-of-users row, used when `customGroupsEnabled` is true or when mention groups are present in the data. - -- **Wireframe tag:** `` - -| Variable | Type | Example | -|---|---|---| -| `option.group` | `GroupData` | `` | -| `option.group.userCount` | `number` | `` | - - - -```jsx - -
- - ( members) -
- -``` - - -```html - -
- - ( members) -
- -``` - - - ---- - -### `autocomplete-chip` - -The chip rendered inline when the user picks a mention (lives inside the contenteditable composer input). - -- **Wireframe tag:** `` - -| Variable | Type | Example | -|---|---|---| -| `chip` | `AutocompleteChipConfig` | `` | - -| Property | Value | -|---|---| -| Children | `*-chip-tooltip`, `*-chip-tooltip-name`, `*-chip-tooltip-description`, `*-chip-tooltip-icon`. | - ---- - -### `autocomplete-panel-search-icon` - -The magnifying-glass icon shown in the panel's search input. - -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | - -## Deeply-Nested Wireframe Tags - -The option rows and chip tooltips decompose further. Each tag below has its own `` registration and inherits context variables from its parent. - -### Option child tags - -Each tag resolves the parent option's iteration context — `option` (and `option.user` / `option.group` where applicable). - -| Tag | Notes | Example | -|---|---|---| -| `` | Option's display name. | `` | -| `` | Option's description (typically `option.email`). | `` | -| `` | Option's avatar / icon. | `` | -| `` | Error indicator shown for invalid options. | `velt-if="{option.invalid}"` | - -### Chip tooltip tags - -Each tag resolves the parent chip's `chip` iteration context. - -| Tag | Notes | Example | -|---|---|---| -| `` | Tooltip wrapper shown on chip hover. | (composes the three children below) | -| `` | Tooltip name. | `` | -| `` | Tooltip description. | `` | -| `` | Tooltip icon. | `` | - -## Related - -- [Comment Dialog Wireframe Variables](./comment-dialog/wireframe-variables) — the parent composer that mounts the autocomplete panel. -- [Template Variables](/ui-customization/template-variables) — overview of the `velt-data` / `velt-if` / `velt-class` system. diff --git a/ui-customization/features/async/comments/comment-bubble/primitives.mdx b/ui-customization/features/async/comments/comment-bubble/primitives.mdx deleted file mode 100644 index 9ef6071c3..000000000 --- a/ui-customization/features/async/comments/comment-bubble/primitives.mdx +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Comment Bubble Primitives -description: Primitive-based components for building custom Comment Bubble interfaces with maximum flexibility. ---- - - -Explore primitives interactively in our [Storybook](https://storybook.velt.dev/). - - - -Comment Bubble primitives can be used standalone: pass `annotationId` (React) or `annotation-id` (HTML) to render a primitive with real annotation data without a parent root component. - - -### VeltCommentBubbleAvatar - -Avatar component for the comment bubble. - - - -```jsx -import { VeltCommentBubbleAvatar } from '@veltdev/react'; - - -``` - - - - -```html - -``` - - - - - ---- - -### VeltCommentBubbleCommentsCount - -Comments count display for the comment bubble. - - - -```jsx -import { VeltCommentBubbleCommentsCount } from '@veltdev/react'; - - -``` - - - - -```html - -``` - - - - - ---- - -### VeltCommentBubbleUnreadIcon - -Unread indicator icon for the comment bubble. - - - -```jsx -import { VeltCommentBubbleUnreadIcon } from '@veltdev/react'; - - -``` - - - - -```html - -``` - - - - diff --git a/ui-customization/features/async/comments/comment-bubble/wireframe-variables.mdx b/ui-customization/features/async/comments/comment-bubble/wireframe-variables.mdx deleted file mode 100644 index a70948b5d..000000000 --- a/ui-customization/features/async/comments/comment-bubble/wireframe-variables.mdx +++ /dev/null @@ -1,263 +0,0 @@ ---- -title: Comment Bubble Wireframe Variables -description: Template variables exposed by the Comment Bubble wireframe — read them with velt-data, velt-if, and velt-class to drive dynamic content, conditional rendering, and class toggling. ---- - - - New to wireframes? Start with [UI Customization Concepts](/ui-customization/overview) and the [Template Variables](/ui-customization/template-variables) overview. - - -## Overview - -The **Comment Bubble** wireframe exposes the variables below. Use them inside any `` tag via three forms: - -| You want to… | Use | Example | -|---|---|---| -| Display a value as text | `` | `` | -| Hide / show conditionally | `velt-if="{var}"` | `velt-if="{annotation.unread}"` | -| Toggle a CSS class | `velt-class="'cls': {var}"` | `velt-class="'is-unread': {annotation.unread}"` | - -All variables are mapped — reference them by their short name. You do not need the `componentConfig.` prefix. - - - **Naming conflicts — use full path.** A few names collide with mappings used elsewhere. Inside a Comment Bubble wireframe, prefer the explicit path on the right when reading these values: - - | Conflicting name | Use this in Comment Bubble | - |---|---| - | `customStatusesShown` | `globalConfigSignal.featureState.customStatusesShown` | - | `resolvedCommentsOnDom` | `globalConfigSignal.featureState.resolvedCommentsOnDom` | - | `readOnly` | `globalConfigSignal.featureState.readOnly` (workspace) or `{readOnly}` (per-render local) | - - -## App State - -App-wide values resolved from the shared global signal. - -| Variable | Type | Description | Example | -|---|---|---|---| -| `globalConfigSignal.appState.user` | [`User`](/api-reference/sdk/models/data-models#user) \| `null` | Currently identified end-user. | `` | - -## Data State - -Per-bubble data: the annotation this bubble previews, the surrounding annotation list, and unread / unresolved counts. - -| Variable | Type | Description | Example | -|---|---|---|---| -| `annotation` | [`CommentAnnotation`](/api-reference/sdk/models/data-models#commentannotation) \| `null` | Annotation this bubble represents. | `velt-if="{annotation}"` | -| `annotation.from` | [`User`](/api-reference/sdk/models/data-models#user) | Author of the annotation's first comment. | `` | -| `annotation.comments` | [`Comment`](/api-reference/sdk/models/data-models#comment)`[]` | Comments in the thread. | `` | -| `annotation.status.id` | `string` | Current status id (e.g. `"open"`, `"resolved"`). | `velt-class="'status-{annotation.status.id}': true"` | -| `annotation.unread` | `boolean` | Annotation has unread comments for the current user. | `velt-class="'is-unread': {annotation.unread}"` | -| `annotation.iam.accessMode` | `'public'` \| `'private'` | Legacy visibility mode. A value of `'private'` here indicates the annotation is in legacy private mode (`iam.accessMode = 'private'`); as of v5.0.2-beta.27 this takes unconditional precedence over [`visibilityConfig.type`](/api-reference/sdk/models/data-models#commentannotationvisibilityconfig) for all privacy-gating surfaces. For V2 visibility-model annotations (`visibilityConfig.type === 'restricted' \| 'organizationPrivate'`), check `{isPrivateComment}` instead — it routes through the SDK's shared privacy check. | `velt-if="{annotation.iam.accessMode} === 'private'"` | -| `annotations` | [`CommentAnnotation`](/api-reference/sdk/models/data-models#commentannotation)`[]` | All annotations currently in scope. | `` | -| `unresolvedAnnotationsCount` | `number` | Number of unresolved annotations across the document. | `` | -| `unreadCount` | `number` | Unread-comment count for this bubble's annotation. | `` | -| `data.folderId` | `string` | Folder id this bubble's annotation belongs to. | `` | -| `data.context` | `Record` | Free-form annotation context. | `` | - -## UI State - -Per-bubble UI flags driven by the bubble itself. - -| Variable | Type | Description | Example | -|---|---|---|---| -| `uiState.commentPinSelected` | `boolean` | Pin associated with this bubble is currently selected. | `velt-class="'pin-selected': {uiState.commentPinSelected}"` | -| `selectedAnnotationsMap` | `SelectedAnnotationsMap` | Map keyed by `annotationId` → `boolean`; `true` if that annotation is selected. | `velt-class="'selected': {selectedAnnotationsMap[annotation.annotationId]}"` | -| `selectedAnnotationsLocationMap` | `SelectedAnnotationsLocationMap` | Internal selection bookkeeping by location. | _Internal — read individual entries via bracket notation if needed._ | -| `darkMode` | `boolean` | Dark mode is active for this bubble. | `velt-class="'dark': {darkMode}"` | -| `variant` | `string` | Per-instance variant tag set on the host element. | `` | -| `parentLocalUIState.shadowDom` | `boolean` | Shadow-DOM rendering is enabled for this instance. | _Host config — set via element attribute._ | -| `commentBubbleTargetPinHover` | `boolean` | The bubble's anchor pin is currently hovered. | `velt-class="'hover': {commentBubbleTargetPinHover}"` | -| `isPrivateComment` | `boolean` | `true` when the annotation is private. Reflects both legacy `iam.accessMode === 'private'` and the V2 `visibilityConfig` model (`visibilityConfig.type === 'restricted' \| 'organizationPrivate'`) — routes through the SDK's shared privacy check (`isAnnotationPrivate`). | `velt-if="{isPrivateComment}"` | -| `openDialog` | `boolean` | A comment dialog is open for this bubble's annotation. | `velt-if="{openDialog}"` | -| `readOnly` | `boolean` | Per-render read-only flag. | `velt-class="'readonly': {readOnly}"` | -| `showAvatar` | `boolean` | Avatar should be rendered. | `velt-if="{showAvatar}"` | -| `commentCountType` | `'total'` \| `'unread'` | Which count drives the badge. | `velt-class="'count-{commentCountType}': true"` | - -## Feature State - -Capability flags toggled at the workspace level. These are documented under the explicit `globalConfigSignal.featureState.` path because the bare names collide with other mappings. Available in both V1 and V2 Comment Bubble wireframes. - - - **V2 root alias.** V2 wireframes can use either `globalConfig` or `globalConfigSignal` as the root for these deep paths — both resolve identically (v5.0.2-beta.25). - - -| Variable | Type | Description | Example | -|---|---|---|---| -| `globalConfigSignal.featureState.customStatusesShown` | `boolean` | Custom-status decoration enabled on bubbles. | `velt-class="'show-status': {globalConfigSignal.featureState.customStatusesShown}"` | -| `globalConfigSignal.featureState.groupMatchedComments` | `boolean` | Matched comments are grouped together on the page. | `velt-class="'grouped': {globalConfigSignal.featureState.groupMatchedComments}"` | -| `globalConfigSignal.featureState.resolvedCommentsOnDom` | `boolean` | Resolved annotations still render bubbles. | `velt-if="{globalConfigSignal.featureState.resolvedCommentsOnDom}"` | -| `globalConfigSignal.featureState.readOnly` | `boolean` | Workspace read-only mode is active. | `velt-class="'readonly': {globalConfigSignal.featureState.readOnly}"` | -| `globalConfigSignal.featureState.sidebarVisible` | `boolean` | The comment sidebar is currently open. Also readable via `globalConfig.featureState.sidebarVisible` in V2 wireframes. | `velt-class="'sidebar-open': {globalConfigSignal.featureState.sidebarVisible}"` | - -## Common Props - -Every Comment Bubble primitive accepts: - -| React Prop | HTML Attribute | Type | Default | Description | -|---|---|---|---|---| -| `defaultCondition` | `default-condition` | `boolean \| "true" \| "false"` | `true` | When `false`, the component always renders regardless of internal state. | - -Signal inputs (for parent-child component composition): -- `[componentConfigSignal]` — shared config signal (annotation, selected-annotations map, unread count). -- `[parentLocalUIState]` — per-instance UI state signal (darkMode, variant, shadowDom, readOnly, showAvatar, commentCountType). - -The root `` element additionally accepts attributes that map onto config and local UI state values: `dark-mode`, `variant`, `show-avatar`, `comment-count-type`, etc. - -## Type Reference - -Types referenced by the variables above are documented in [Data Models](/api-reference/sdk/models/data-models): - -| Type | Description | -|---|---| -| [`CommentAnnotation`](/api-reference/sdk/models/data-models#commentannotation) | The annotation thread (id, status, comments, from, unread, iam, etc.). | -| [`Comment`](/api-reference/sdk/models/data-models#comment) | A single message inside an annotation thread. | -| [`User`](/api-reference/sdk/models/data-models#user) | Identified end-user object. | -| [`CommentVisibilityOptionType`](/api-reference/sdk/models/data-models#commentvisibilityoptiontype) | Annotation visibility mode (`'public'`, `'private'`, `'organization'`, `'selected_people'`). | - -## Subcomponents - -Each subcomponent below has its own wireframe tag. The annotation root supports nested access — see [`CommentAnnotation`](/api-reference/sdk/models/data-models#commentannotation) for the full shape. - -### `comment-bubble` (root) - -The bubble pin that previews an annotation when the user is not focused on it. - -- **Public element:** `` -- **Wireframe tag:** `` -- **Children:** `*-avatar`, `*-comments-count`, `*-unread-icon` - -| Property | Value | -|---|---| -| Extra variables | None — root only sees common variables. | -| `shouldShow` | One bubble renders per non-resolved annotation on the current document. Resolved bubbles render only when `globalConfigSignal.featureState.resolvedCommentsOnDom === true`. | - - - -```jsx - -
- - - -
- -``` - - -```html - -
- - - -
- -``` - - - ---- - -### `comment-bubble-avatar` - -The avatar of the annotation's author. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None beyond common variables. Read `annotation.from.photoUrl` / `annotation.from.name` from the parent annotation. | - - - -```jsx - - - -``` - - -```html - - - -``` - - - ---- - -### `comment-bubble-comments-count` - -The "N" badge showing how many comments are in the thread. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None beyond common variables. | -| `shouldShow` | Renders only when the thread has more than one comment. | - - - -```jsx - - - - - - - -``` - - -```html - - - - - -``` - - - ---- - -### `comment-bubble-unread-icon` - -The unread-indicator dot on the bubble. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None beyond common variables. | -| `shouldShow` | `unreadCount > 0` (or `annotation.unread === true`, depending on `commentCountType`). | - -## Deeply-Nested Wireframe Tags - -A separate-but-related set of primitives renders the **comment pin** (the small marker on the page) — distinct from the bubble (which previews the comment). Each tag below has its own `` registration and reads from the same `annotation` context. - -### Comment Pin tags - -| Tag | Notes | Example | -|---|---|---| -| `` | Root pin element. | `velt-class="'pin-status-{annotation.status.id}': true"` | -| `` | The pointing-arrow triangle below the pin. | _Visual only — no data binding._ | -| `` | Pin index number (e.g. "3" — order it was placed). | `` | -| `` | Auto-generated annotation number. | `` | -| `` | Unread dot indicator on the pin. | `velt-if="{annotation.unread}"` | -| `` | Private-mode lock icon on the pin. For annotations using `visibilityConfig` (`restricted` or `organizationPrivate`), use `velt-if="{isPrivateComment}"` instead of the legacy `iam.accessMode` check. | `velt-if="{isPrivateComment}"` | -| `` | Indicator shown when the pin has lost its DOM target (ghost-comment state). | `velt-if="{annotation.ghostComment}"` | - -## Related - -- [Comment Bubble Wireframes](./wireframes) — composition reference for the wireframe tags themselves. -- [Comment Bubble Primitives](./primitives) — granular components if you don't need a full wireframe. -- [Template Variables](/ui-customization/template-variables) — overview of the `velt-data` / `velt-if` / `velt-class` system. diff --git a/ui-customization/features/async/comments/comment-bubble/wireframes.mdx b/ui-customization/features/async/comments/comment-bubble/wireframes.mdx deleted file mode 100644 index e21b318fd..000000000 --- a/ui-customization/features/async/comments/comment-bubble/wireframes.mdx +++ /dev/null @@ -1,171 +0,0 @@ ---- -title: Comment Bubble Wireframes -description: Wireframe components for building custom Comment Bubble interfaces with maximum flexibility. ---- - - -We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components. - - -## VeltCommentBubbleWireframe -![](/images/customization/comments/comment-bubble/comment-bubble-overview.png) - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -## CommentsCount -![](/images/customization/comments/comment-bubble/comment-bubble-comments-count.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -## Avatar -![](/images/customization/comments/comment-bubble/comment-bubble-avatar.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -## UnreadIcon - - -```jsx - - - -``` - - -```html - - - -``` - - - -## 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` - - - - -```jsx - -``` - - -```jsx - -``` - - - -### Dark Mode - -By default, all components are in Light Mode, but there are several properties and methods to enable Dark Mode. - -Default: `false` - - - - -**Using Props:** -```js - -``` - -**Using API:** -```jsx -const commentElement = client.getCommentElement(); -commentElement.enableDarkMode(); -commentElement.disableDarkMode(); -``` - - - - - -**Using Props:** -```HTML - -``` - -**Using API:** - -```jsx -const commentElement = Velt.getCommentElement(); -commentElement.enableDarkMode(); -commentElement.disableDarkMode(); -``` - - - -### Open Dialog on Click - -Control whether the comment dialog opens when the bubble is clicked. - -Default: `true` - - - -```jsx - -``` - - -```html - -``` - - \ No newline at end of file diff --git a/ui-customization/features/async/comments/comment-dialog-structure.mdx b/ui-customization/features/async/comments/comment-dialog-structure.mdx deleted file mode 100644 index f9234de3f..000000000 --- a/ui-customization/features/async/comments/comment-dialog-structure.mdx +++ /dev/null @@ -1,624 +0,0 @@ ---- -title: "Comment Dialog — Structure" -description: "Canonical structure for the Velt Comment Dialog Wireframe (React & HTML mirrors). Order follows your provided JSX/HTML. Parent/child is defined only by the extension path. Direct children are marked with (Leaf) when they have no descendants." ---- - -> **Conventions** -> - **React names** use `PascalCase` under the `VeltCommentDialogWireframe` namespace. -> - **Parent/child** is determined **only** by the extension path (`A.B` → `B` is a child of `A`). Visual placement (e.g., inside `Header`) does not imply hierarchy. -> - **HTML names** mirror React 1:1 in `kebab-case`. -> - **(Leaf)** = component has no children in this wireframe. - ---- - -## React - -`VeltCommentDialogWireframe` - -### `VeltCommentDialogWireframe.GhostBanner` -*(no direct children)* - ---- - -### `VeltCommentDialogWireframe.PrivateBanner` -*(no direct children)* - ---- - -### `VeltCommentDialogWireframe.AssigneeBanner` -- `VeltCommentDialogWireframe.AssigneeBanner.ResolveButton` **(Leaf)** -- `VeltCommentDialogWireframe.AssigneeBanner.UnresolveButton` **(Leaf)** -- `VeltCommentDialogWireframe.AssigneeBanner.UserAvatar` **(Leaf)** -- `VeltCommentDialogWireframe.AssigneeBanner.UserName` **(Leaf)** - ---- - -### `VeltCommentDialogWireframe.Header` - ---- - -### `VeltCommentDialogWireframe.CommentNumber` **(Leaf)** - ---- - -### `VeltCommentDialogWireframe.Status` - ---- - -### `VeltCommentDialogWireframe.Priority` - ---- - -### `VeltCommentDialogWireframe.Options` -- `VeltCommentDialogWireframe.Options.Trigger` **(Leaf)** -- `VeltCommentDialogWireframe.Options.Content` - -#### `VeltCommentDialogWireframe.Options.Content` -- `VeltCommentDialogWireframe.Options.Content.MarkAsRead` **(Leaf)** -- `VeltCommentDialogWireframe.Options.Content.MakePrivate` -- `VeltCommentDialogWireframe.Options.Content.Assign` **(Leaf)** -- `VeltCommentDialogWireframe.Options.Content.Edit` **(Leaf)** -- `VeltCommentDialogWireframe.Options.Content.Delete` -- `VeltCommentDialogWireframe.Options.Content.Notification` - ---- - -### `VeltCommentDialogWireframe.CopyLink` - ---- - -### `VeltCommentDialogWireframe.ResolveButton` - ---- - -### `VeltCommentDialogWireframe.CustomAnnotationDropdown` -- `VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger` -- `VeltCommentDialogWireframe.CustomAnnotationDropdown.Content` - -#### `VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger` -- `VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.List` -- `VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.RemainingCount` **(Leaf)** -- `VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.Placeholder` **(Leaf)** -- `VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.Arrow` **(Leaf)** - -#### `VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.List` -- `VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.List.Item` **(Leaf)** - -#### `VeltCommentDialogWireframe.CustomAnnotationDropdown.Content` -- `VeltCommentDialogWireframe.CustomAnnotationDropdown.Content.Item` - -#### `VeltCommentDialogWireframe.CustomAnnotationDropdown.Content.Item` -- `VeltCommentDialogWireframe.CustomAnnotationDropdown.Content.Item.Label` **(Leaf)** -- `VeltCommentDialogWireframe.CustomAnnotationDropdown.Content.Item.Icon` **(Leaf)** - ---- - -### `VeltCommentDialogWireframe.CommentIndex` - ---- - -### `VeltCommentDialogWireframe.CommentCategory` - ---- - -### `VeltCommentDialogWireframe.CommentSuggestionStatus` - ---- - -### `VeltCommentDialogWireframe.NavigationButton` - ---- - -### `VeltCommentDialogWireframe.PrivateBadge` - ---- - -### `VeltCommentDialogWireframe.Body` -### `VeltCommentDialogWireframe.Threads` - -### `VeltCommentDialogWireframe.ThreadCard` - -#### `VeltCommentDialogWireframe.ThreadCard` -- `VeltCommentDialogWireframe.ThreadCard.Avatar` **(Leaf)** -- `VeltCommentDialogWireframe.ThreadCard.Name` **(Leaf)** -- `VeltCommentDialogWireframe.ThreadCard.Unread` **(Leaf)** -- `VeltCommentDialogWireframe.ThreadCard.SeenDropdown` -- `VeltCommentDialogWireframe.ThreadCard.Time` **(Leaf)** -- `VeltCommentDialogWireframe.ThreadCard.DeviceType` **(Leaf)** -- `VeltCommentDialogWireframe.ThreadCard.Options` -- `VeltCommentDialogWireframe.ThreadCard.Message` **(Leaf)** -- `VeltCommentDialogWireframe.ThreadCard.EditComposer` -- `VeltCommentDialogWireframe.ThreadCard.ReactionTool` **(Leaf)** -- `VeltCommentDialogWireframe.ThreadCard.Reactions` **(Leaf)** -- `VeltCommentDialogWireframe.ThreadCard.Attachments` -- `VeltCommentDialogWireframe.ThreadCard.Recordings` **(Leaf)** -- `VeltCommentDialogWireframe.ThreadCard.Reply` **(Leaf)** -- `VeltCommentDialogWireframe.ThreadCard.AssignButton` **(Leaf)** - -##### `VeltCommentDialogWireframe.ThreadCard.Options` -- `VeltCommentDialogWireframe.ThreadCard.Options.Trigger` **(Leaf)** -- `VeltCommentDialogWireframe.ThreadCard.Options.Content` - -##### `VeltCommentDialogWireframe.ThreadCard.Options.Content` -- `VeltCommentDialogWireframe.ThreadCard.Options.Content.MarkAsRead` **(Leaf)** -- `VeltCommentDialogWireframe.ThreadCard.Options.Content.MakePrivate` -- `VeltCommentDialogWireframe.ThreadCard.Options.Content.Assign` **(Leaf)** -- `VeltCommentDialogWireframe.ThreadCard.Options.Content.Edit` **(Leaf)** -- `VeltCommentDialogWireframe.ThreadCard.Options.Content.Delete` -- `VeltCommentDialogWireframe.ThreadCard.Options.Content.Notification` - -##### `VeltCommentDialogWireframe.ThreadCard.EditComposer` -*(no direct children)* - -##### `VeltCommentDialogWireframe.ThreadCard.SeenDropdown` -- `VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Trigger` **(Leaf)** -- `VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content` - -##### `VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content` -- `VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Title` **(Leaf)** -- `VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items` - -##### `VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items` -- `VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items.Item` - -##### `VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items.Item` -- `VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items.Item.Time` **(Leaf)** -- `VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items.Item.Name` **(Leaf)** -- `VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items.Item.Avatar` **(Leaf)** - -##### `VeltCommentDialogWireframe.ThreadCard.Attachments` -- `VeltCommentDialogWireframe.ThreadCard.Attachments.Image` -- `VeltCommentDialogWireframe.ThreadCard.Attachments.Other` - -##### `VeltCommentDialogWireframe.ThreadCard.Attachments.Image` -- `VeltCommentDialogWireframe.ThreadCard.Attachments.Image.Preview` **(Leaf)** -- `VeltCommentDialogWireframe.ThreadCard.Attachments.Image.Delete` **(Leaf)** -- `VeltCommentDialogWireframe.ThreadCard.Attachments.Image.Download` **(Leaf)** - -##### `VeltCommentDialogWireframe.ThreadCard.Attachments.Other` -- `VeltCommentDialogWireframe.ThreadCard.Attachments.Other.Delete` **(Leaf)** -- `VeltCommentDialogWireframe.ThreadCard.Attachments.Other.Download` **(Leaf)** -- `VeltCommentDialogWireframe.ThreadCard.Attachments.Other.Icon` **(Leaf)** -- `VeltCommentDialogWireframe.ThreadCard.Attachments.Other.Name` **(Leaf)** -- `VeltCommentDialogWireframe.ThreadCard.Attachments.Other.Size` **(Leaf)** - - -### `VeltCommentDialogWireframe.ReplyAvatars` - -#### `VeltCommentDialogWireframe.ReplyAvatars` -- `VeltCommentDialogWireframe.ReplyAvatars.List` -- `VeltCommentDialogWireframe.ReplyAvatars.RemainingCount` **(Leaf)** - -##### `VeltCommentDialogWireframe.ReplyAvatars.List` -- `VeltCommentDialogWireframe.ReplyAvatars.List.Item` **(Leaf)** - - -### `VeltCommentDialogWireframe.ToggleReply` - -#### `VeltCommentDialogWireframe.ToggleReply` -- `VeltCommentDialogWireframe.ToggleReply.Icon` **(Leaf)** -- `VeltCommentDialogWireframe.ToggleReply.Count` **(Leaf)** -- `VeltCommentDialogWireframe.ToggleReply.Text` **(Leaf)** - ---- - -### `VeltCommentDialogWireframe.HideReply` - -#### `VeltCommentDialogWireframe.HideReply` -*(no direct children)* - ---- - -### `VeltCommentDialogWireframe.Composer` -- `VeltCommentDialogWireframe.Composer.Avatar` **(Leaf)** -- `VeltCommentDialogWireframe.Composer.Attachments` -- `VeltCommentDialogWireframe.Composer.Recordings` **(Leaf)** -- `VeltCommentDialogWireframe.Composer.Input` **(Leaf)** -- `VeltCommentDialogWireframe.Composer.ActionButton` **(Leaf)** -- `VeltCommentDialogWireframe.Composer.AssignUser` **(Leaf)** - -#### `VeltCommentDialogWireframe.Composer.Attachments` -- `VeltCommentDialogWireframe.Composer.Attachments.Selected` -- `VeltCommentDialogWireframe.Composer.Attachments.Invalid` -- `VeltCommentDialogWireframe.Composer.Attachments.Image.Download` **(Leaf)** -- `VeltCommentDialogWireframe.Composer.Attachments.Other.Download` **(Leaf)** - -##### `VeltCommentDialogWireframe.Composer.Attachments.Selected` -- `VeltCommentDialogWireframe.Composer.Attachments.Selected.Image` -- `VeltCommentDialogWireframe.Composer.Attachments.Selected.Other` - -##### `VeltCommentDialogWireframe.Composer.Attachments.Selected.Image` -- `VeltCommentDialogWireframe.Composer.Attachments.Selected.Image.Preview` **(Leaf)** -- `VeltCommentDialogWireframe.Composer.Attachments.Selected.Image.Delete` **(Leaf)** -- `VeltCommentDialogWireframe.Composer.Attachments.Selected.Image.Loading` **(Leaf)** - -##### `VeltCommentDialogWireframe.Composer.Attachments.Selected.Other` -- `VeltCommentDialogWireframe.Composer.Attachments.Selected.Other.Delete` **(Leaf)** -- `VeltCommentDialogWireframe.Composer.Attachments.Selected.Other.Loading` **(Leaf)** -- `VeltCommentDialogWireframe.Composer.Attachments.Selected.Other.Icon` **(Leaf)** -- `VeltCommentDialogWireframe.Composer.Attachments.Selected.Other.Name` **(Leaf)** -- `VeltCommentDialogWireframe.Composer.Attachments.Selected.Other.Size` **(Leaf)** - -##### `VeltCommentDialogWireframe.Composer.Attachments.Invalid` -- `VeltCommentDialogWireframe.Composer.Attachments.Invalid.Item` - -##### `VeltCommentDialogWireframe.Composer.Attachments.Invalid.Item` -- `VeltCommentDialogWireframe.Composer.Attachments.Invalid.Item.Preview` **(Leaf)** -- `VeltCommentDialogWireframe.Composer.Attachments.Invalid.Item.Message` **(Leaf)** -- `VeltCommentDialogWireframe.Composer.Attachments.Invalid.Item.Delete` **(Leaf)** - ---- - -### `VeltCommentDialogWireframe.VisibilityBanner` -- `VeltCommentDialogWireframe.VisibilityBanner.Icon` **(Leaf)** -- `VeltCommentDialogWireframe.VisibilityBanner.Text` **(Leaf)** -- `VeltCommentDialogWireframe.VisibilityBanner.Dropdown` - -#### `VeltCommentDialogWireframe.VisibilityBanner.Dropdown` -- `VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Trigger` -- `VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content` - -##### `VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Trigger` -- `VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Trigger.Label` **(Leaf)** -- `VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Trigger.AvatarList` -- `VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Trigger.Icon` **(Leaf)** - -##### `VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Trigger.AvatarList` -- `VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Trigger.AvatarList.Item` **(Leaf)** -- `VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Trigger.AvatarList.RemainingCount` **(Leaf)** - -##### `VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content` -- `VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.Item` (accepts `type`: `'public'` | `'org-users'` | `'personal'` | `'selected-people'`) -- `VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.UserPicker` -- `VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.OrgPicker` - -##### `VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.Item` -- `VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.Item.Icon` **(Leaf)** -- `VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.Item.Label` **(Leaf)** - -##### `VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.UserPicker` -- `VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.UserPicker.Search` -- `VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.UserPicker.Header` -- `VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.UserPicker.Item` - -##### `VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.UserPicker.Search` -- `VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.UserPicker.Search.Icon` **(Leaf)** -- `VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.UserPicker.Search.Input` **(Leaf)** - -##### `VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.UserPicker.Header` -- `VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.UserPicker.Header.Count` **(Leaf)** -- `VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.UserPicker.Header.UnselectAll` **(Leaf)** - -##### `VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.UserPicker.Item` -- `VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.UserPicker.Item.Avatar` **(Leaf)** -- `VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.UserPicker.Item.Info` **(Leaf)** -- `VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.UserPicker.Item.Check` **(Leaf)** - ---- - -### `VeltCommentDialogWireframe.AllComment` - ---- - -### `VeltCommentDialogWireframe.Approve` - ---- - -### `VeltCommentDialogWireframe.SignIn` - ---- - -### `VeltCommentDialogWireframe.Upgrade` - ---- - -### `VeltCommentDialogWireframe.SuggestionAction` -- `VeltCommentDialogWireframe.SuggestionAction.Accept` **(Leaf)** -- `VeltCommentDialogWireframe.SuggestionAction.Reject` **(Leaf)** - ---- - -## HTML (1:1 mirror) - -`velt-comment-dialog-wireframe` - -### `velt-comment-dialog-ghost-banner-wireframe` -*(no direct children)* - ---- - -### `velt-comment-dialog-private-banner-wireframe` -*(no direct children)* - ---- - -### `velt-comment-dialog-assignee-banner-wireframe` -- `velt-comment-dialog-assignee-banner-resolve-button-wireframe` **(Leaf)** -- `velt-comment-dialog-assignee-banner-unresolve-button-wireframe` **(Leaf)** -- `velt-comment-dialog-assignee-banner-user-avatar-wireframe` **(Leaf)** -- `velt-comment-dialog-assignee-banner-user-name-wireframe` **(Leaf)** - ---- - -### `velt-comment-dialog-header-wireframe` -*(no direct children)* - ---- - -### `velt-comment-dialog-comment-number-wireframe` **(Leaf)** - ---- - -### `velt-comment-dialog-status-wireframe` - ---- - -### `velt-comment-dialog-priority-wireframe` - ---- - -### `velt-comment-dialog-options-wireframe` -- `velt-comment-dialog-options-trigger-wireframe` **(Leaf)** -- `velt-comment-dialog-options-content-wireframe` - -#### `velt-comment-dialog-options-content-wireframe` -- `velt-comment-dialog-options-content-mark-as-read-wireframe` **(Leaf)** -- `velt-comment-dialog-options-content-make-private-wireframe` -- `velt-comment-dialog-options-content-assign-wireframe` **(Leaf)** -- `velt-comment-dialog-options-content-edit-wireframe` **(Leaf)** -- `velt-comment-dialog-options-content-delete-wireframe` -- `velt-comment-dialog-options-content-notification-wireframe` - ---- - -### `velt-comment-dialog-copy-link-wireframe` - ---- - -### `velt-comment-dialog-resolve-button-wireframe` - ---- - -### `velt-comment-dialog-custom-annotation-dropdown-wireframe` -- `velt-comment-dialog-custom-annotation-dropdown-trigger-wireframe` -- `velt-comment-dialog-custom-annotation-dropdown-content-wireframe` - -#### `velt-comment-dialog-custom-annotation-dropdown-trigger-wireframe` -- `velt-comment-dialog-custom-annotation-dropdown-trigger-list-wireframe` -- `velt-comment-dialog-custom-annotation-dropdown-trigger-remaining-count-wireframe` **(Leaf)** -- `velt-comment-dialog-custom-annotation-dropdown-trigger-placeholder-wireframe` **(Leaf)** -- `velt-comment-dialog-custom-annotation-dropdown-trigger-arrow-wireframe` **(Leaf)** - -#### `velt-comment-dialog-custom-annotation-dropdown-trigger-list-wireframe` -- `velt-comment-dialog-custom-annotation-dropdown-trigger-list-item-wireframe` **(Leaf)** - -#### `velt-comment-dialog-custom-annotation-dropdown-content-wireframe` -- `velt-comment-dialog-custom-annotation-dropdown-content-item-wireframe` - -#### `velt-comment-dialog-custom-annotation-dropdown-content-item-wireframe` -- `velt-comment-dialog-custom-annotation-dropdown-content-item-label-wireframe` **(Leaf)** -- `velt-comment-dialog-custom-annotation-dropdown-content-item-icon-wireframe` **(Leaf)** - ---- - -### `velt-comment-dialog-comment-index-wireframe` - ---- - -### `velt-comment-dialog-comment-category-wireframe` - ---- - -### `velt-comment-dialog-comment-suggestion-status-wireframe` - ---- - -### `velt-comment-dialog-navigation-button-wireframe` - ---- - -### `velt-comment-dialog-private-badge-wireframe` - ---- - -### `velt-comment-dialog-body-wireframe` -*(no direct children here — see its children below)* - ---- - -### `velt-comment-dialog-threads-wireframe` -- `velt-comment-dialog-thread-card-wireframe` - -#### `velt-comment-dialog-thread-card-wireframe` -- `velt-comment-dialog-thread-card-avatar-wireframe` **(Leaf)** -- `velt-comment-dialog-thread-card-name-wireframe` **(Leaf)** -- `velt-comment-dialog-thread-card-unread-wireframe` **(Leaf)** -- `velt-comment-dialog-thread-card-seen-dropdown-wireframe` -- `velt-comment-dialog-thread-card-time-wireframe` **(Leaf)** -- `velt-comment-dialog-thread-card-device-type-wireframe` **(Leaf)** -- `velt-comment-dialog-thread-card-options-wireframe` -- `velt-comment-dialog-thread-card-message-wireframe` **(Leaf)** -- `velt-comment-dialog-thread-card-edit-composer-wireframe` -- `velt-comment-dialog-thread-card-reaction-tool-wireframe` **(Leaf)** -- `velt-comment-dialog-thread-card-reactions-wireframe` **(Leaf)** -- `velt-comment-dialog-thread-card-attachments-wireframe` -- `velt-comment-dialog-thread-card-recordings-wireframe` **(Leaf)** -- `velt-comment-dialog-thread-card-reply-wireframe` **(Leaf)** -- `velt-comment-dialog-thread-card-assign-button-wireframe` **(Leaf)** - -##### `velt-comment-dialog-thread-card-options-wireframe` -- `velt-comment-dialog-thread-card-options-trigger-wireframe` **(Leaf)** -- `velt-comment-dialog-thread-card-options-content-wireframe` - -##### `velt-comment-dialog-thread-card-options-content-wireframe` -- `velt-comment-dialog-thread-card-options-content-mark-as-read-wireframe` **(Leaf)** -- `velt-comment-dialog-thread-card-options-content-make-private-wireframe` -- `velt-comment-dialog-thread-card-options-content-assign-wireframe` **(Leaf)** -- `velt-comment-dialog-thread-card-options-content-edit-wireframe` **(Leaf)** -- `velt-comment-dialog-thread-card-options-content-delete-wireframe` -- `velt-comment-dialog-thread-card-options-content-notification-wireframe` - -##### `velt-comment-dialog-thread-card-edit-composer-wireframe` -*(no direct children)* - -##### `velt-comment-dialog-thread-card-seen-dropdown-wireframe` -- `velt-comment-dialog-thread-card-seen-dropdown-trigger-wireframe` **(Leaf)** -- `velt-comment-dialog-thread-card-seen-dropdown-content-wireframe` - -##### `velt-comment-dialog-thread-card-seen-dropdown-content-wireframe` -- `velt-comment-dialog-thread-card-seen-dropdown-content-title-wireframe` **(Leaf)** -- `velt-comment-dialog-thread-card-seen-dropdown-content-items-wireframe` - -##### `velt-comment-dialog-thread-card-seen-dropdown-content-items-wireframe` -- `velt-comment-dialog-thread-card-seen-dropdown-content-items-item-wireframe` - -##### `velt-comment-dialog-thread-card-seen-dropdown-content-items-item-wireframe` -- `velt-comment-dialog-thread-card-seen-dropdown-content-items-item-time-wireframe` **(Leaf)** -- `velt-comment-dialog-thread-card-seen-dropdown-content-items-item-name-wireframe` **(Leaf)** -- `velt-comment-dialog-thread-card-seen-dropdown-content-items-item-avatar-wireframe` **(Leaf)** - -##### `velt-comment-dialog-thread-card-attachments-wireframe` -- `velt-comment-dialog-thread-card-attachments-image-wireframe` -- `velt-comment-dialog-thread-card-attachments-other-wireframe` - -##### `velt-comment-dialog-thread-card-attachments-image-wireframe` -- `velt-comment-dialog-thread-card-attachments-image-preview-wireframe` **(Leaf)** -- `velt-comment-dialog-thread-card-attachments-image-delete-wireframe` **(Leaf)** -- `velt-comment-dialog-thread-card-attachments-image-download-wireframe` **(Leaf)** - -##### `velt-comment-dialog-thread-card-attachments-other-wireframe` -- `velt-comment-dialog-thread-card-attachments-other-delete-wireframe` **(Leaf)** -- `velt-comment-dialog-thread-card-attachments-other-download-wireframe` **(Leaf)** -- `velt-comment-dialog-thread-card-attachments-other-icon-wireframe` **(Leaf)** -- `velt-comment-dialog-thread-card-attachments-other-name-wireframe` **(Leaf)** -- `velt-comment-dialog-thread-card-attachments-other-size-wireframe` **(Leaf)** - ---- - -### `velt-comment-dialog-reply-avatars-wireframe` -- `velt-comment-dialog-reply-avatars-list-wireframe` -- `velt-comment-dialog-reply-avatars-remaining-count-wireframe` **(Leaf)** - -#### `velt-comment-dialog-reply-avatars-list-wireframe` -- `velt-comment-dialog-reply-avatars-list-item-wireframe` **(Leaf)** - ---- - -### `velt-comment-dialog-toggle-reply-wireframe` -- `velt-comment-dialog-toggle-reply-icon-wireframe` **(Leaf)** -- `velt-comment-dialog-toggle-reply-count-wireframe` **(Leaf)** -- `velt-comment-dialog-toggle-reply-text-wireframe` **(Leaf)** - ---- - -### `velt-comment-dialog-hide-reply-wireframe` -*(no direct children)* - ---- - -### `velt-comment-dialog-composer-wireframe` -- `velt-comment-dialog-composer-avatar-wireframe` **(Leaf)** -- `velt-comment-dialog-composer-attachments-wireframe` -- `velt-comment-dialog-composer-recordings-wireframe` **(Leaf)** -- `velt-comment-dialog-composer-input-wireframe` **(Leaf)** -- `velt-comment-dialog-composer-action-button-wireframe` **(Leaf)** -- `velt-comment-dialog-composer-assign-user-wireframe` **(Leaf)** - -#### `velt-comment-dialog-composer-attachments-wireframe` -- `velt-comment-dialog-composer-attachments-selected-wireframe` -- `velt-comment-dialog-composer-attachments-invalid-wireframe` -- `velt-comment-dialog-composer-attachments-image-download-wireframe` **(Leaf)** -- `velt-comment-dialog-composer-attachments-other-download-wireframe` **(Leaf)** - -##### `velt-comment-dialog-composer-attachments-selected-wireframe` -- `velt-comment-dialog-composer-attachments-selected-image-wireframe` -- `velt-comment-dialog-composer-attachments-selected-other-wireframe` - -##### `velt-comment-dialog-composer-attachments-selected-image-wireframe` -- `velt-comment-dialog-composer-attachments-selected-image-preview-wireframe` **(Leaf)** -- `velt-comment-dialog-composer-attachments-selected-image-delete-wireframe` **(Leaf)** -- `velt-comment-dialog-composer-attachments-selected-image-loading-wireframe` **(Leaf)** - -##### `velt-comment-dialog-composer-attachments-selected-other-wireframe` -- `velt-comment-dialog-composer-attachments-selected-other-delete-wireframe` **(Leaf)** -- `velt-comment-dialog-composer-attachments-selected-other-loading-wireframe` **(Leaf)** -- `velt-comment-dialog-composer-attachments-selected-other-icon-wireframe` **(Leaf)** -- `velt-comment-dialog-composer-attachments-selected-other-name-wireframe` **(Leaf)** -- `velt-comment-dialog-composer-attachments-selected-other-size-wireframe` **(Leaf)** - -##### `velt-comment-dialog-composer-attachments-invalid-wireframe` -- `velt-comment-dialog-composer-attachments-invalid-item-wireframe` - -##### `velt-comment-dialog-composer-attachments-invalid-item-wireframe` -- `velt-comment-dialog-composer-attachments-invalid-item-preview-wireframe` **(Leaf)** -- `velt-comment-dialog-composer-attachments-invalid-item-message-wireframe` **(Leaf)** -- `velt-comment-dialog-composer-attachments-invalid-item-delete-wireframe` **(Leaf)** - ---- - -### `velt-comment-dialog-visibility-banner-wireframe` -- `velt-comment-dialog-visibility-banner-icon-wireframe` **(Leaf)** -- `velt-comment-dialog-visibility-banner-text-wireframe` **(Leaf)** -- `velt-comment-dialog-visibility-banner-dropdown-wireframe` - -#### `velt-comment-dialog-visibility-banner-dropdown-wireframe` -- `velt-comment-dialog-visibility-banner-dropdown-trigger-wireframe` -- `velt-comment-dialog-visibility-banner-dropdown-content-wireframe` - -##### `velt-comment-dialog-visibility-banner-dropdown-trigger-wireframe` -- `velt-comment-dialog-visibility-banner-dropdown-trigger-label-wireframe` **(Leaf)** -- `velt-comment-dialog-visibility-banner-dropdown-trigger-avatar-list-wireframe` -- `velt-comment-dialog-visibility-banner-dropdown-trigger-icon-wireframe` **(Leaf)** - -##### `velt-comment-dialog-visibility-banner-dropdown-trigger-avatar-list-wireframe` -- `velt-comment-dialog-visibility-banner-dropdown-trigger-avatar-list-item-wireframe` **(Leaf)** -- `velt-comment-dialog-visibility-banner-dropdown-trigger-avatar-list-remaining-count-wireframe` **(Leaf)** - -##### `velt-comment-dialog-visibility-banner-dropdown-content-wireframe` -- `velt-comment-dialog-visibility-banner-dropdown-content-item-wireframe` (accepts `type`: `public` | `org-users` | `personal` | `selected-people`) -- `velt-comment-dialog-visibility-banner-dropdown-content-user-picker-wireframe` -- `velt-comment-dialog-visibility-banner-dropdown-content-org-picker-wireframe` - -##### `velt-comment-dialog-visibility-banner-dropdown-content-item-wireframe` -- `velt-comment-dialog-visibility-banner-dropdown-content-item-icon-wireframe` **(Leaf)** -- `velt-comment-dialog-visibility-banner-dropdown-content-item-label-wireframe` **(Leaf)** - -##### `velt-comment-dialog-visibility-banner-dropdown-content-user-picker-wireframe` -- `velt-comment-dialog-visibility-banner-dropdown-content-user-picker-search-wireframe` -- `velt-comment-dialog-visibility-banner-dropdown-content-user-picker-header-wireframe` -- `velt-comment-dialog-visibility-banner-dropdown-content-user-picker-item-wireframe` - -##### `velt-comment-dialog-visibility-banner-dropdown-content-user-picker-search-wireframe` -- `velt-comment-dialog-visibility-banner-dropdown-content-user-picker-search-icon-wireframe` **(Leaf)** -- `velt-comment-dialog-visibility-banner-dropdown-content-user-picker-search-input-wireframe` **(Leaf)** - -##### `velt-comment-dialog-visibility-banner-dropdown-content-user-picker-header-wireframe` -- `velt-comment-dialog-visibility-banner-dropdown-content-user-picker-header-count-wireframe` **(Leaf)** -- `velt-comment-dialog-visibility-banner-dropdown-content-user-picker-header-unselect-all-wireframe` **(Leaf)** - -##### `velt-comment-dialog-visibility-banner-dropdown-content-user-picker-item-wireframe` -- `velt-comment-dialog-visibility-banner-dropdown-content-user-picker-item-avatar-wireframe` **(Leaf)** -- `velt-comment-dialog-visibility-banner-dropdown-content-user-picker-item-info-wireframe` **(Leaf)** -- `velt-comment-dialog-visibility-banner-dropdown-content-user-picker-item-check-wireframe` **(Leaf)** - ---- - -### `velt-comment-dialog-all-comment-wireframe` - ---- - -### `velt-comment-dialog-approve-wireframe` - ---- - -### `velt-comment-dialog-sign-in-wireframe` - ---- - -### `velt-comment-dialog-upgrade-wireframe` - ---- - -### `velt-comment-dialog-suggestion-action-wireframe` -- `velt-comment-dialog-suggestion-action-accept-wireframe` **(Leaf)** -- `velt-comment-dialog-suggestion-action-reject-wireframe` **(Leaf)** diff --git a/ui-customization/features/async/comments/comment-dialog/primitives.mdx b/ui-customization/features/async/comments/comment-dialog/primitives.mdx deleted file mode 100644 index c274a29d2..000000000 --- a/ui-customization/features/async/comments/comment-dialog/primitives.mdx +++ /dev/null @@ -1,5682 +0,0 @@ ---- -title: Comment Dialog Primitives -description: 98+ primitive components for building custom Comment Dialog interfaces with maximum flexibility. ---- - - -We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components. - - - -Explore primitives interactively in our [Storybook](https://storybook.velt.dev/). - - -## 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 - -### Pattern 1: Context Wrapper (Recommended) - -Components are wrapped in a context wrapper that provides shared context to children. - - - -```jsx - - - - -``` - - -```html - - - - -``` - - - -### Pattern 2: ID-Based (Standalone) - -Each component receives `annotationId` directly and works independently. - - - -```jsx - - -``` - - -```html - - -``` - - - -## Common Inputs - -All components inherit these base inputs. See [`CommentDialogCommonProps`](/api-reference/sdk/models/data-models#commentdialogcommonprops) for the type definition. - -| React Prop | HTML Attribute | Type | Default | Description | -|------------|----------------|------|---------|-------------| -| `annotationId` | `annotation-id` | `string` | - | The annotation ID | -| `defaultCondition` | `default-condition` | `boolean` | `undefined` | When false, always shows | -| `inlineCommentSectionMode` | `inline-comment-section-mode` | `boolean` | `false` | Inline comment section mode | -| `commentPinSelected` | `comment-pin-selected` | `boolean` | `false` | Comment pin selected state | -| `fullExpanded` | `full-expanded` | `boolean` | `false` | Full expansion state | - ---- - -## Components - -### VeltCommentDialogContextWrapper - -Context wrapper that provides shared annotation context to child primitives. - -Props: [`CommentDialogContextWrapperProps`](/api-reference/sdk/models/data-models#commentdialogcontextwrapperprops) - - - -```jsx - - {children} - -``` - -**Props:** - -| Prop | Type | Required | Description | -|------|------|----------|-------------| -| `annotationId` | `string` | Yes (root) | Annotation ID for children | -| `commentId` | `string` | No | Comment ID for children | -| `attachmentId` | `string` | No | Attachment ID for children | -| `commentPinSelected` | `boolean` | No | Selection state for children | -| `[key: string]` | `any` | No | Any custom attribute passed via context | - - -```html - - -``` - -**Attributes:** - -| Attribute | Type | Required | Description | -|-----------|------|----------|-------------| -| `annotation-id` | `string` | Yes (root) | Annotation ID for children | -| `comment-id` | `string` | No | Comment ID for children | -| `attachment-id` | `string` | No | Attachment ID for children | -| `comment-pin-selected` | `string` | No | Selection state ("true"/"false") | - - - ---- - -### VeltCommentDialogHeader - -Header component for the comment dialog. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogBody - -Body container for the comment dialog thread content. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogThreadCard - -Complete thread card with all comment metadata and content. See [`ThreadCardProps`](/api-reference/sdk/models/data-models#threadcardprops). - - - -```jsx - -``` - -**Props:** - -| Prop | Type | Required | Description | -|------|------|----------|-------------| -| `commentObj` | `object` | No | Direct comment object (Priority 1) | -| `commentId` | `number` | No | Comment ID for lookup (Priority 2) | -| `commentIndex` | `number` | No | Index in comments array (Priority 3) | - - -```html - - -``` - -**Attributes:** - -| Attribute | Type | Required | Description | -|-----------|------|----------|-------------| -| `comment-obj` | `string (JSON)` | No | Direct comment object (Priority 1) | -| `comment-id` | `string` | No | Comment ID for lookup (Priority 2) | -| `comment-index` | `string` | No | Index in comments array (Priority 3) | - - - ---- - -### VeltCommentDialogThreadCardAvatar - -User avatar for the comment author. See [`CommentIndexProps`](/api-reference/sdk/models/data-models#commentindexprops). - - - -```jsx - -``` - -**Props:** - -| Prop | Type | Required | Description | -|------|------|----------|-------------| -| `commentIndex` | `number` | No | Index of comment in array | - - -```html - - -``` - -**Attributes:** - -| Attribute | Type | Required | Description | -|-----------|------|----------|-------------| -| `comment-index` | `string` | No | Index of comment in array | - - - ---- - -### VeltCommentDialogThreadCardName - -Display name of the comment author. See [`CommentIndexProps`](/api-reference/sdk/models/data-models#commentindexprops). - - - -```jsx - -``` - -**Props:** - -| Prop | Type | Required | Description | -|------|------|----------|-------------| -| `commentIndex` | `number` | No | Index of comment in array | - - -```html - - -``` - -**Attributes:** - -| Attribute | Type | Required | Description | -|-----------|------|----------|-------------| -| `comment-index` | `string` | No | Index of comment in array | - - - ---- - -### VeltCommentDialogThreadCardTime - -Timestamp of when the comment was created. See [`CommentIndexProps`](/api-reference/sdk/models/data-models#commentindexprops). - - - -```jsx - -``` - -**Props:** - -| Prop | Type | Required | Description | -|------|------|----------|-------------| -| `commentIndex` | `number` | No | Index of comment in array | - - -```html - - -``` - -**Attributes:** - -| Attribute | Type | Required | Description | -|-----------|------|----------|-------------| -| `comment-index` | `string` | No | Index of comment in array | - - - ---- - -### VeltCommentDialogThreadCardMessage - -The comment message content. See [`CommentIndexProps`](/api-reference/sdk/models/data-models#commentindexprops). - - - -```jsx - -``` - -**Props:** - -| Prop | Type | Required | Description | -|------|------|----------|-------------| -| `commentIndex` | `number` | No | Index of comment in array | - - -```html - - -``` - -**Attributes:** - -| Attribute | Type | Required | Description | -|-----------|------|----------|-------------| -| `comment-index` | `string` | No | Index 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. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogThreadCardMessageShowLess - -Show-less toggle that collapses an expanded truncated message back to the truncated state. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogThreadCardReactions - -Reactions display for the comment. See [`CommentIndexProps`](/api-reference/sdk/models/data-models#commentindexprops). - - - -```jsx - -``` - -**Props:** - -| Prop | Type | Required | Description | -|------|------|----------|-------------| -| `commentIndex` | `number` | No | Index of comment in array | - - -```html - - -``` - -**Attributes:** - -| Attribute | Type | Required | Description | -|-----------|------|----------|-------------| -| `comment-index` | `string` | No | Index of comment in array | - - - ---- - -### VeltCommentDialogThreadCardReactionTool - -Tool for adding reactions to a comment. See [`CommentIndexProps`](/api-reference/sdk/models/data-models#commentindexprops). - - - -```jsx - -``` - -**Props:** - -| Prop | Type | Required | Description | -|------|------|----------|-------------| -| `commentIndex` | `number` | No | Index of comment in array | - - -```html - - -``` - -**Attributes:** - -| Attribute | Type | Required | Description | -|-----------|------|----------|-------------| -| `comment-index` | `string` | No | Index of comment in array | - - - ---- - -### VeltCommentDialogThreadCardReactionPin - -Reaction pin inside a thread card. - - - -```jsx - -``` - -**Props:** Common inputs (see [Common Inputs](#common-inputs) section) plus: - -| Prop | Type | Required | Description | -|------|------|----------|-------------| -| `reactionId` | `string` | No | ID of the reaction | -| `commentObj` | `any \| string` | No | Comment data object (or serialized JSON string) | -| `commentIndex` | `number \| string` | No | Index of comment in array | -| `index` | `number \| string` | No | Index of the reaction pin | - - -```html - - -``` - -**Attributes:** Common attributes (see [Common Inputs](#common-inputs) section) plus: - -| Attribute | Type | Required | Description | -|-----------|------|----------|-------------| -| `reaction-id` | `string` | No | ID of the reaction | -| `comment-obj` | `string` (JSON) | No | Comment data object as serialized JSON | -| `comment-index` | `string` | No | Index of comment in array | -| `index` | `string` | No | Index of the reaction pin | - - - ---- - -### VeltCommentDialogThreadCardRecordings - -Recordings attached to the comment. See [`CommentIndexProps`](/api-reference/sdk/models/data-models#commentindexprops). - - - -```jsx - -``` - -**Props:** - -| Prop | Type | Required | Description | -|------|------|----------|-------------| -| `commentIndex` | `number` | No | Index of comment in array | - - -```html - - -``` - -**Attributes:** - -| Attribute | Type | Required | Description | -|-----------|------|----------|-------------| -| `comment-index` | `string` | No | Index of comment in array | - - - ---- - -### VeltCommentDialogThreadCardReply - -Reply indicator for the thread card. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogThreadCardUnread - -Unread indicator for the comment. See [`CommentIndexProps`](/api-reference/sdk/models/data-models#commentindexprops). - - - -```jsx - -``` - -**Props:** - -| Prop | Type | Required | Description | -|------|------|----------|-------------| -| `commentIndex` | `number` | No | Index of comment in array | - - -```html - - -``` - -**Attributes:** - -| Attribute | Type | Required | Description | -|-----------|------|----------|-------------| -| `comment-index` | `string` | No | Index of comment in array | - - - ---- - -### VeltCommentDialogThreadCardEdited - -Edited indicator for the comment. See [`CommentIndexProps`](/api-reference/sdk/models/data-models#commentindexprops). - - - -```jsx - -``` - -**Props:** - -| Prop | Type | Required | Description | -|------|------|----------|-------------| -| `commentIndex` | `number` | No | Index of comment in array | - - -```html - - -``` - -**Attributes:** - -| Attribute | Type | Required | Description | -|-----------|------|----------|-------------| -| `comment-index` | `string` | No | Index of comment in array | - - - ---- - -### VeltCommentDialogThreadCardDraft - -Draft indicator for the comment. See [`CommentIndexProps`](/api-reference/sdk/models/data-models#commentindexprops). - - - -```jsx - -``` - -**Props:** - -| Prop | Type | Required | Description | -|------|------|----------|-------------| -| `commentIndex` | `number` | No | Index of comment in array | - - -```html - - -``` - -**Attributes:** - -| Attribute | Type | Required | Description | -|-----------|------|----------|-------------| -| `comment-index` | `string` | No | Index of comment in array | - - - ---- - -### VeltCommentDialogThreadCardDeviceType - -Device type indicator for the comment. See [`CommentIndexProps`](/api-reference/sdk/models/data-models#commentindexprops). - - - -```jsx - -``` - -**Props:** - -| Prop | Type | Required | Description | -|------|------|----------|-------------| -| `commentIndex` | `number` | No | Index of comment in array | - - -```html - - -``` - -**Attributes:** - -| Attribute | Type | Required | Description | -|-----------|------|----------|-------------| -| `comment-index` | `string` | No | Index of comment in array | - - - ---- - -### VeltCommentDialogThreadCardOptions - -Options menu for the comment (edit, delete, etc.). See [`CommentIndexProps`](/api-reference/sdk/models/data-models#commentindexprops). - - - -```jsx - -``` - -**Props:** - -| Prop | Type | Required | Description | -|------|------|----------|-------------| -| `commentIndex` | `number` | No | Index of comment in array | - - -```html - - -``` - -**Attributes:** - -| Attribute | Type | Required | Description | -|-----------|------|----------|-------------| -| `comment-index` | `string` | No | Index of comment in array | - - - ---- - -### VeltCommentDialogThreadCardAssignButton - -Assign-to button inside a thread card. - - - -```jsx - -``` - -**Props:** Common inputs (see [Common Inputs](#common-inputs) section) plus: - -| Prop | Type | Required | Description | -|------|------|----------|-------------| -| `commentObj` | `any \| string` | No | Comment data object (or serialized JSON string) | -| `commentId` | `number \| string` | No | ID of the comment | -| `commentIndex` | `number \| string` | No | Index of comment in array | - - -```html - - -``` - -**Attributes:** Common attributes (see [Common Inputs](#common-inputs) section) plus: - -| Attribute | Type | Required | Description | -|-----------|------|----------|-------------| -| `comment-obj` | `string` (JSON) | No | Comment data object as serialized JSON | -| `comment-id` | `string` | No | ID of the comment | -| `comment-index` | `string` | No | Index of comment in array | - - - ---- - -### VeltCommentDialogThreadCardEditComposer - -Inline edit composer inside a thread card. - - - -```jsx - -``` - -**Props:** Common inputs (see [Common Inputs](#common-inputs) section) plus: - -| Prop | Type | Required | Description | -|------|------|----------|-------------| -| `commentObj` | `any \| string` | No | Comment data object (or serialized JSON string) | -| `commentId` | `number \| string` | No | ID of the comment | -| `commentIndex` | `number \| string` | No | Index of comment in array | - - -```html - - -``` - -**Attributes:** Common attributes (see [Common Inputs](#common-inputs) section) plus: - -| Attribute | Type | Required | Description | -|-----------|------|----------|-------------| -| `comment-obj` | `string` (JSON) | No | Comment data object as serialized JSON | -| `comment-id` | `string` | No | ID of the comment | -| `comment-index` | `string` | No | Index of comment in array | - - - ---- - -### VeltCommentDialogComposer - -Complete composer with input, attachments, and action buttons. See [`ComposerProps`](/api-reference/sdk/models/data-models#composerprops). - - - -```jsx - -``` - -**Props:** - -| Prop | Type | Required | Description | -|------|------|----------|-------------| -| `placeholder` | `string` | No | Primary placeholder (Priority 1) | -| `commentPlaceholder` | `string` | No | Placeholder for new comment | -| `replyPlaceholder` | `string` | No | Placeholder for reply | -| `editPlaceholder` | `string` | No | Placeholder for edit mode | -| `editMode` | `boolean` | No | Enable edit mode | -| `commentObj` | `object` | No | Comment object for edit mode | -| `commentIndex` | `number` | No | Index of comment being edited | -| `targetComposerElementId` | `string` | No | Unique identifier for programmatic submission | -| `context` | `object` | No | Custom context data to attach to comment | - - -```html - - -``` - -**Attributes:** - -| Attribute | Type | Required | Description | -|-----------|------|----------|-------------| -| `placeholder` | `string` | No | Primary placeholder (Priority 1) | -| `commentplaceholder` | `string` | No | Placeholder for new comment | -| `replyplaceholder` | `string` | No | Placeholder for reply | -| `editplaceholder` | `string` | No | Placeholder for edit mode | -| `edit-mode` | `string` | No | Enable edit mode ("true"/"false") | -| `comment-obj` | `string (JSON)` | No | Comment object for edit mode | -| `comment-index` | `string` | No | Index of comment being edited | -| `target-composer-element-id` | `string` | No | Unique identifier for programmatic submission | -| `context` | `string (JSON)` | No | Custom context data to attach to comment | - - - ---- - -### VeltCommentDialogComposerInput - -Text input field for composing comments. See [`ComposerInputProps`](/api-reference/sdk/models/data-models#composerinputprops). - - - -```jsx - -``` - -**Props:** - -| Prop | Type | Required | Description | -|------|------|----------|-------------| -| `placeholder` | `string` | No | Input placeholder text | - - -```html - - -``` - -**Attributes:** - -| Attribute | Type | Required | Description | -|-----------|------|----------|-------------| -| `placeholder` | `string` | No | Input placeholder text | - - - ---- - -### VeltCommentDialogComposerActionButton - -Submit/send button for the composer. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogComposerAttachmentButton - -Button to add file attachments to comments. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogComposerRecorderButton - -Button to add audio/video recordings. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogComposerRecorderPlayer - -Player for audio/video recordings in the composer. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogComposerFiles - -Files display in the composer. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogComposerAttachmentsImageDownload - -Download button for image attachments in the comment dialog composer when in edit mode. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogComposerAttachmentsOtherDownload - -Download button for non-image file attachments in the comment dialog composer when in edit mode. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogStatusDropdown - -Complete status dropdown with trigger and content. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogStatusDropdownTrigger - -Button that opens the status dropdown. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogStatusDropdownTriggerIcon - -Icon for the status dropdown trigger. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogStatusDropdownTriggerName - -Name display for the status dropdown trigger. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogStatusDropdownTriggerArrow - -Arrow indicator for the status dropdown trigger. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogStatusDropdownContent - -Dropdown content container for status options. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogStatusDropdownContentItem - -Individual status item in the dropdown. See [`StatusDropdownItemProps`](/api-reference/sdk/models/data-models#statusdropdownitemprops). - - - -```jsx - -``` - -**Props:** - -| Prop | Type | Required | Description | -|------|------|----------|-------------| -| `statusObj` | `object` | No | Direct status object (Priority 1) | -| `statusId` | `string` | No | Status ID for lookup (Priority 2) | -| `statusIndex` | `number` | No | Index in statuses array (Priority 3) | - - -```html - - -``` - -**Attributes:** - -| Attribute | Type | Required | Description | -|-----------|------|----------|-------------| -| `status-obj` | `string (JSON)` | No | Direct status object (Priority 1) | -| `status-id` | `string` | No | Status ID for lookup (Priority 2) | -| `status-index` | `string` | No | Index in statuses array (Priority 3) | - - - ---- - -### VeltCommentDialogStatusDropdownContentItemIcon - -Icon for a status dropdown item. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogStatusDropdownContentItemName - -Name display for a status dropdown item. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogPriorityDropdown - -Complete priority dropdown with trigger and content. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogPriorityDropdownTrigger - -Button that opens the priority dropdown. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogPriorityDropdownTriggerIcon - -Icon for the priority dropdown trigger. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogPriorityDropdownTriggerName - -Name display for the priority dropdown trigger. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogPriorityDropdownTriggerArrow - -Arrow indicator for the priority dropdown trigger. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogPriorityDropdownContent - -Dropdown content container for priority options. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogPriorityDropdownContentItem - -Individual priority item in the dropdown. See [`PriorityDropdownItemProps`](/api-reference/sdk/models/data-models#prioritydropdownitemprops). - - - -```jsx - -``` - -**Props:** - -| Prop | Type | Required | Description | -|------|------|----------|-------------| -| `priorityObj` | `object` | No | Direct priority object (Priority 1) | -| `priorityId` | `string` | No | Priority ID for lookup (Priority 2) | -| `priorityIndex` | `number` | No | Index in priorities array (Priority 3) | - - -```html - - -``` - -**Attributes:** - -| Attribute | Type | Required | Description | -|-----------|------|----------|-------------| -| `priority-obj` | `string (JSON)` | No | Direct priority object (Priority 1) | -| `priority-id` | `string` | No | Priority ID for lookup (Priority 2) | -| `priority-index` | `string` | No | Index in priorities array (Priority 3) | - - - ---- - -### VeltCommentDialogPriorityDropdownContentItemIcon - -Icon for a priority dropdown item. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogPriorityDropdownContentItemName - -Name display for a priority dropdown item. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogPriorityDropdownContentItemTick - -Tick/checkmark for a priority dropdown item. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogOptionsDropdown - -Options menu for actions like assignment, editing, and notifications. See [`OptionsDropdownProps`](/api-reference/sdk/models/data-models#optionsdropdownprops). - - - -```jsx - -``` - -**Props:** - -| Prop | Type | Required | Description | -|------|------|----------|-------------| -| `commentIndex` | `number` | No | Index of comment for options | -| `enableAssignment` | `boolean` | No | Enable assignment option | -| `allowAssignment` | `boolean` | No | V4 alias for enableAssignment | -| `enableEdit` | `boolean` | No | Enable edit option | -| `allowEdit` | `boolean` | No | V4 alias for enableEdit | -| `enableNotifications` | `boolean` | No | Enable notifications option | -| `allowNotifications` | `boolean` | No | V4 alias for enableNotifications | -| `allowToggleNotification` | `boolean` | No | V4 alias for enableNotifications | -| `enablePrivateMode` | `boolean` | No | Enable private mode option | -| `allowPrivateMode` | `boolean` | No | V4 alias for enablePrivateMode | -| `allowChangeCommentAccessMode` | `boolean` | No | V4 alias for enablePrivateMode | -| `enableMarkAsRead` | `boolean` | No | Enable mark as read option | -| `allowMarkAsRead` | `boolean` | No | V4 alias for enableMarkAsRead | - - -```html - - -``` - -**Attributes:** - -| Attribute | Type | Required | Description | -|-----------|------|----------|-------------| -| `comment-index` | `string` | No | Index of comment for options | -| `enable-assignment` | `string` | No | Enable assignment option | -| `allow-assignment` | `string` | No | V4 alias for enable-assignment | -| `enable-edit` | `string` | No | Enable edit option | -| `allow-edit` | `string` | No | V4 alias for enable-edit | -| `enable-notifications` | `string` | No | Enable notifications option | -| `allow-notifications` | `string` | No | V4 alias for enable-notifications | -| `allow-toggle-notification` | `string` | No | V4 alias for enable-notifications | -| `enable-private-mode` | `string` | No | Enable private mode option | -| `allow-private-mode` | `string` | No | V4 alias for enable-private-mode | -| `allow-change-comment-access-mode` | `string` | No | V4 alias for enable-private-mode | -| `enable-mark-as-read` | `string` | No | Enable mark as read option | -| `allow-mark-as-read` | `string` | No | V4 alias for enable-mark-as-read | - - - ---- - -### VeltCommentDialogOptionsDropdownTrigger - -Trigger button for the options dropdown. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogOptionsDropdownContent - -Content container for the options dropdown. - - - -```jsx - -``` - -**Props:** Common inputs (see [Common Inputs](#common-inputs) section) plus: - -| Prop | Type | Required | Description | -|------|------|----------|-------------| -| `commentObj` | `any \| string` | No | Comment data object (or serialized JSON string) | -| `commentIndex` | `number \| string` | No | Index of comment in array | -| `enableAssignment` | `boolean` | No | Shows the assign option | -| `enableEdit` | `boolean` | No | Shows the edit option | -| `enableNotifications` | `boolean` | No | Shows the notifications option | -| `enablePrivateMode` | `boolean` | No | Shows the private mode option | -| `enableMarkAsRead` | `boolean` | No | Shows the mark-as-read option | - - -```html - - -``` - -**Attributes:** Common attributes (see [Common Inputs](#common-inputs) section) plus: - -| Attribute | Type | Required | Description | -|-----------|------|----------|-------------| -| `comment-obj` | `string` (JSON) | No | Comment data object as serialized JSON | -| `comment-index` | `string` | No | Index of comment in array | -| `enable-assignment` | `string` | No | Shows the assign option ("true"/"false") | -| `enable-edit` | `string` | No | Shows the edit option ("true"/"false") | -| `enable-notifications` | `string` | No | Shows the notifications option ("true"/"false") | -| `enable-private-mode` | `string` | No | Shows the private mode option ("true"/"false") | -| `enable-mark-as-read` | `string` | No | Shows the mark-as-read option ("true"/"false") | - - - ---- - -### VeltCommentDialogOptionsDropdownContentAssign - -Assign option in the options dropdown. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogOptionsDropdownContentEdit - -Edit option in the options dropdown. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogOptionsDropdownContentDelete - -Delete option in the options dropdown. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogOptionsDropdownContentDeleteComment - -Delete comment option in the options dropdown. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogOptionsDropdownContentDeleteThread - -Delete thread option in the options dropdown. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#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'`. - - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#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'`. - - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#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'`. - - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogOptionsDropdownContentNotification - -Notification option container in the options dropdown. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogOptionsDropdownContentNotificationSubscribe - -Subscribe to notifications option. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogOptionsDropdownContentNotificationUnsubscribe - -Unsubscribe from notifications option. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogOptionsDropdownContentMarkAsRead - -Mark as read option container in the options dropdown. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogOptionsDropdownContentMarkAsReadMarkRead - -Mark as read action option. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogOptionsDropdownContentMarkAsReadMarkUnread - -Mark as unread action option. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogCustomAnnotationDropdown - -Custom annotation dropdown component. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogCustomAnnotationDropdownTrigger - -Trigger button for the custom annotation dropdown. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogCustomAnnotationDropdownTriggerArrow - -Arrow indicator for the custom annotation dropdown trigger. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogCustomAnnotationDropdownTriggerList - -List container for the custom annotation dropdown trigger. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogCustomAnnotationDropdownTriggerListItem - -Individual item in the custom annotation dropdown trigger list. See [`CustomAnnotationItemProps`](/api-reference/sdk/models/data-models#customannotationitemprops). - - - -```jsx - -``` - -**Props:** - -| Prop | Type | Required | Description | -|------|------|----------|-------------| -| `item` | `object` | No | Item data object | -| `index` | `number` | No | Item index | - - -```html - - -``` - -**Attributes:** - -| Attribute | Type | Required | Description | -|-----------|------|----------|-------------| -| `item` | `string (JSON)` | No | Item data object | -| `index` | `string` | No | Item index | - - - ---- - -### VeltCommentDialogCustomAnnotationDropdownTriggerPlaceholder - -Placeholder for the custom annotation dropdown trigger. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogCustomAnnotationDropdownTriggerRemainingCount - -Remaining count indicator for the custom annotation dropdown trigger. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogCustomAnnotationDropdownContent - -Content container for the custom annotation dropdown. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogCustomAnnotationDropdownContentItem - -Individual item in the custom annotation dropdown content. See [`CustomAnnotationItemProps`](/api-reference/sdk/models/data-models#customannotationitemprops). - - - -```jsx - -``` - -**Props:** - -| Prop | Type | Required | Description | -|------|------|----------|-------------| -| `item` | `object` | No | Item data object | -| `index` | `number` | No | Item index | - - -```html - - -``` - -**Attributes:** - -| Attribute | Type | Required | Description | -|-----------|------|----------|-------------| -| `item` | `string (JSON)` | No | Item data object | -| `index` | `string` | No | Item index | - - - ---- - -### VeltCommentDialogCustomAnnotationDropdownContentItemIcon - -Icon for a custom annotation dropdown item. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogCustomAnnotationDropdownContentItemLabel - -Label for a custom annotation dropdown item. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogReplyAvatars - -Container for reply avatars. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogReplyAvatarsList - -List container for reply avatars. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogReplyAvatarsListItem - -Individual avatar item in the reply avatars list. See [`ReplyAvatarsListItemProps`](/api-reference/sdk/models/data-models#replyavatarslistitemprops). - - - -```jsx - -``` - -**Props:** - -| Prop | Type | Required | Description | -|------|------|----------|-------------| -| `user` | `User` | Yes | User data object | -| `index` | `number` | Yes | Index of user in list | - - -```html - - -``` - -**Attributes:** - -| Attribute | Type | Required | Description | -|-----------|------|----------|-------------| -| `user` | `string (JSON)` | Yes | User data object | -| `index` | `string` | Yes | Index of user in list | - - - ---- - -### VeltCommentDialogReplyCount - -Reply count display. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAssigneeBanner - -Assignee banner container. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAssigneeBannerResolved - -Resolved state of the assignee banner. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAssigneeBannerUnresolved - -Unresolved state of the assignee banner. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAssigneeBannerUnresolveButton - -Button to unresolve the assignee banner. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltAutocomplete - - -To customize the **wireframe appearance** of autocomplete options, chips, and tooltips, see the [Autocomplete Option](/ui-customization/features/async/comments/comment-dialog/wireframes#autocomplete-option-composer) and [Autocomplete Chip Tooltip](/ui-customization/features/async/comments/comment-dialog/wireframes#autocomplete-chip-tooltip-body-threads-thread-card) sections in the Comment Dialog wireframes page. - - -The autocomplete panel component accepts the following props for controlling selection mode, ordering, and data source. - - - -```jsx - -``` - -**Props:** - -| Prop | Type | Default | Description | -|------|------|---------|-------------| -| `multiSelect` | `boolean` | `false` | Allows selecting multiple contacts | -| `selectedFirstOrdering` | `boolean` | `false` | Shows selected items first in the list | -| `readOnly` | `boolean` | `false` | Disables user interaction | -| `inline` | `boolean` | `false` | Renders the autocomplete inline rather than as a panel | -| `contacts` | [`UserContact[]`](/api-reference/sdk/models/data-models#usercontact) | — | Overrides the default contact list | - - -```html - -``` - -**Attributes:** - -| Attribute | Type | Default | Description | -|-----------|------|---------|-------------| -| `multi-select` | `string` | `"false"` | Allows selecting multiple contacts | -| `selected-first-ordering` | `string` | `"false"` | Shows selected items first in the list | -| `read-only` | `string` | `"false"` | Disables user interaction | -| `inline` | `string` | `"false"` | Renders the autocomplete inline rather than as a panel | - - - ---- - -### VeltAutocompletePanel - -Standalone autocomplete panel component (e.g. an inline user picker not tied to a text input). - - - -```jsx - -``` - -**Props:** - -| Prop | Type | Default | Description | -|------|------|---------|-------------| -| `type` | `'contact' \| 'generic'` | `'contact'` | Type of options the panel renders | -| `hideInput` | `boolean` | `false` | Hides the search input | -| `placeholder` | `string` | — | Placeholder text for the search input | -| `multiSelect` | `boolean` | `false` | Allows selecting multiple contacts | -| `selectedFirstOrdering` | `boolean` | `false` | Shows selected items first in the list | -| `readOnly` | `boolean` | `false` | Disables user interaction | -| `inline` | `boolean` | `false` | Renders the panel inline | -| `enableOnFocus` | `boolean` | `false` | Opens the panel when the input receives focus | -| `position` | `'above' \| 'below' \| 'auto' \| string` | `'auto'` | Position of the panel relative to its anchor | -| `defaultCondition` | `boolean` | `true` | When `false`, the component always renders regardless of internal state | - - -```html - -``` - -**Attributes:** - -| Attribute | Type | Default | Description | -|-----------|------|---------|-------------| -| `type` | `'contact' \| 'generic'` | `"contact"` | Type of options the panel renders | -| `hide-input` | `string` | `"false"` | Hides the search input | -| `placeholder` | `string` | — | Placeholder text for the search input | -| `multi-select` | `string` | `"false"` | Allows selecting multiple contacts | -| `selected-first-ordering` | `string` | `"false"` | Shows selected items first in the list | -| `read-only` | `string` | `"false"` | Disables user interaction | -| `inline` | `string` | `"false"` | Renders the panel inline | -| `enable-on-focus` | `string` | `"false"` | Opens the panel when the input receives focus | -| `position` | `'above' \| 'below' \| 'auto' \| string` | `"auto"` | Position of the panel relative to its anchor | -| `default-condition` | `string` | `"true"` | When `"false"`, the component always renders regardless of internal state | - - - ---- - -### 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](/ui-customization/features/async/comments/comment-dialog/wireframes) page. - - - -```jsx -import { VeltWireframe, VeltAutocompleteEmptyWireframe } from '@veltdev/react'; - - - -
No results found
- - -``` - - -```html - - -
No results found
- - -``` - - - ---- - -### VeltAutocompleteChip - -Standalone autocomplete chip component for rendering selected contact chips. - - - -```jsx - -``` - -**Props:** - -| Prop | Type | Required | Description | -|------|------|----------|-------------| -| `type` | `'contact' \| 'custom' \| 'group' \| 'loading'` | No | Chip type | -| `email` | `string` | No | Contact email | -| `userObject` | `any` | No | User data object (JSON object or serialized JSON string) | -| `userId` | `string` | No | User ID | - - -```html - -``` - -**Attributes:** - -| Attribute | Type | Required | Description | -|-----------|------|----------|-------------| -| `type` | `'contact' \| 'custom' \| 'group' \| 'loading'` | No | Chip type | -| `email` | `string` | No | Contact email | -| `user-object` | `string` (JSON) | No | User data object as serialized JSON | -| `user-id` | `string` | No | User ID | - - - ---- - -### VeltAutocompleteOption - -Standalone autocomplete option component for rendering contact/custom options. - - - -```jsx - -``` - -**Props:** - -| Prop | Type | Required | Description | -|------|------|----------|-------------| -| `userObject` | `any` | No | User data object (JSON object or serialized JSON string) | -| `userId` | `string` | No | User ID | - - -```html - -``` - -**Attributes:** - -| Attribute | Type | Required | Description | -|-----------|------|----------|-------------| -| `user-object` | `string` (JSON) | No | User data object as serialized JSON | -| `user-id` | `string` | No | User ID | - - - ---- - -### VeltAutocompleteOptionDescription - -Standalone autocomplete option description component. - - - -```jsx - -``` - -**Props:** - -| Prop | Type | Required | Description | -|------|------|----------|-------------| -| `field` | `string` | No | Field name to display from the user object | - - -```html - -``` - -**Attributes:** - -| Attribute | Type | Required | Description | -|-----------|------|----------|-------------| -| `field` | `string` | No | Field name to display from the user object | - - - ---- - -### VeltAutocompleteOptionIcon - -Icon for an autocomplete option. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltAutocompleteOptionName - -Name display for an autocomplete option. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltAutocompleteOptionErrorIcon - -Error icon for an autocomplete option. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltAutocompleteGroupOption - -Group option in the autocomplete panel. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltAutocompleteTool - -Tool component for the autocomplete panel. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltAutocompleteEmpty - -Empty state for the autocomplete panel. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltAutocompleteChipTooltip - -Tooltip for an autocomplete chip. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltAutocompleteChipTooltipIcon - -Icon within the autocomplete chip tooltip. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltAutocompleteChipTooltipName - -Name display within the autocomplete chip tooltip. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltAutocompleteChipTooltipDescription - -Description within the autocomplete chip tooltip. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogResolveButton - -Button to resolve a comment thread. - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogUnresolveButton - -Button to unresolve a comment thread. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogCopyLink - -Button to copy the comment link to clipboard. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogCloseButton - -Button to close the comment dialog. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogDeleteButton - -Button to delete a comment. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#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). - - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogPrivateButton - -Button to toggle private mode on a comment. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogGhostBanner - -Banner displayed for ghost or anonymous comments. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogVisibilityBanner - -Banner displaying the current visibility setting for a comment. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogVisibilityBannerIcon - -Icon within the visibility banner. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogVisibilityBannerText - -Text label within the visibility banner. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogVisibilityBannerDropdown - -Dropdown for selecting visibility options within the banner. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogVisibilityBannerDropdownTrigger - -Trigger element for the visibility dropdown. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogVisibilityBannerDropdownTriggerLabel - -Label text within the visibility dropdown trigger. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogVisibilityBannerDropdownTriggerAvatarList - -Avatar list within the visibility dropdown trigger showing selected users. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogVisibilityBannerDropdownTriggerAvatarListItem - -Individual avatar within the trigger avatar list. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogVisibilityBannerDropdownTriggerAvatarListRemainingCount - -Count of remaining avatars not displayed in the trigger list. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogVisibilityBannerDropdownTriggerIcon - -Icon within the visibility dropdown trigger. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogVisibilityBannerDropdownContent - -Content container for the visibility dropdown options. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogVisibilityBannerDropdownContentItemIcon - -Icon for a visibility option item in the dropdown. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogVisibilityBannerDropdownContentItemLabel - -Label for a visibility option item in the dropdown. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogVisibilityBannerDropdownContentUserPicker - -User picker for selecting specific users when visibility is set to `selected-people`. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#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()`. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogVisibilityBannerDropdownContentUserPickerSearch - -Search container within the user picker. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogVisibilityBannerDropdownContentUserPickerSearchIcon - -Search icon within the user picker search. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogVisibilityBannerDropdownContentUserPickerSearchInput - -Search input field within the user picker. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogVisibilityBannerDropdownContentUserPickerHeader - -Header section of the user picker. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogVisibilityBannerDropdownContentUserPickerHeaderCount - -Count of selected users displayed in the user picker header. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogVisibilityBannerDropdownContentUserPickerHeaderUnselectAll - -Button to unselect all users in the user picker. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogVisibilityBannerDropdownContentUserPickerItem - -Individual user item within the user picker. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogVisibilityBannerDropdownContentUserPickerItemAvatar - -Avatar for a user item in the user picker. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogVisibilityBannerDropdownContentUserPickerItemInfo - -Info text for a user item in the user picker. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogVisibilityBannerDropdownContentUserPickerItemCheck - -Check indicator for a selected user in the user picker. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogSignIn - -Sign-in prompt displayed to unauthenticated users. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogNavigationButton - -Button for navigating between comments. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAttachmentButton - -Button for adding file attachments to a comment. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogDeviceTypeIcons - -Icons indicating the device type used when the comment was created. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogCommentIndex - -Display for the comment's index position. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogCommentNumber - -Display for the comment's number. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogCommentCategory - -Display for the comment's category. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogMetadata - -Display for comment metadata. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogThreads - -Container for the comment threads. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAllComment - -View for displaying all comments. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogApprove - -Approve button for comment approval workflows. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogUpgrade - -Upgrade prompt component. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogMoreReply - -Indicator showing additional replies are available. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#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`. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#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`. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogHideReply - -Button to hide replies in a thread. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogToggleReply - -Toggle control for showing or hiding replies. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogToggleReplyShow - -Show-replies variant of the reply toggle. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogToggleReplyHide - -Hide-replies variant of the reply toggle. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogToggleReplyCount - -Reply count displayed within the reply toggle. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogSuggestionAction - -Container for suggestion accept/reject actions. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogSuggestionActionAccept - -Button to accept a suggestion. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogSuggestionActionReject - -Button to reject a suggestion. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogCommentSuggestionStatus - -Status indicator for a comment suggestion. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAssignDropdown - -Dropdown for assigning a comment to a user. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAssignMenu - -Menu for assignment options. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogOptions - -Options menu for the comment thread. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogPriority - -Priority selector for the comment. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogStatus - -Status selector for the comment. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogCustomAnnotationDropdown - -Dropdown for custom annotation categories. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionBanner - -Container for the agent suggestion resolution banner shown after a suggestion is accepted or rejected. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionBannerAvatar - -Avatar container within the agent suggestion resolution banner. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionBannerAvatarUserImage - -User image within the banner avatar. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionBannerAvatarStatusIcon - -Status icon within the banner avatar indicating accepted or rejected state. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionBannerLabel - -Text label in the banner describing the resolution action (e.g. "Accepted" or "Rejected"). - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionBannerSeparator - -Visual separator between the label and the resolver user name in the banner. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionBannerResolverUserName - -Display name of the user who resolved the agent suggestion. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionBannerTimestamp - -Timestamp showing when the agent suggestion was resolved. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionHeaderTimestamp - -Relative timestamp displayed in the suggestion header. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionHeaderMenu - -Overflow menu (3-dot) in the suggestion header. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionHeaderMenuTrigger - -Trigger button that opens the suggestion header overflow menu. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionHeaderMenuContent - -Content container for the suggestion header overflow menu. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionHeaderMenuContentItem - -Individual item within the suggestion header overflow menu. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionHeaderMenuContentItemIcon - -Icon for an individual suggestion header menu item. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionHeaderMenuContentItemLabel - -Label for an individual suggestion header menu item. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionBody - -Body of the agent suggestion card, displaying the suggestion title and content. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionFooter - -Footer container of the agent suggestion card. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionFooterOpenComment - -"Open Comment" affordance in the suggestion footer that navigates to the full comment thread. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionActions - -Accept/reject button group for the agent suggestion. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionActionsActionAccept - -Button to accept the agent suggestion. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionActionsActionReject - -Button to reject the agent suggestion. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionBanner - -Container for the agent suggestion resolution banner shown after a suggestion is accepted or rejected. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionBannerAvatar - -Avatar container within the agent suggestion resolution banner. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionBannerAvatarUserImage - -User image within the banner avatar. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionBannerAvatarStatusIcon - -Status icon within the banner avatar indicating accepted or rejected state. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionBannerLabel - -Text label in the banner describing the resolution action (e.g. "Accepted" or "Rejected"). - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionBannerSeparator - -Visual separator between the label and the resolver user name in the banner. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionBannerResolverUserName - -Display name of the user who resolved the agent suggestion. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionBannerTimestamp - -Timestamp showing when the agent suggestion was resolved. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -## VeltCommentDialogAgentSuggestion - -Primitive components for rendering an AI agent suggestion card within a comment dialog. - -Props: [`CommentDialogAgentSuggestionProps`](/api-reference/sdk/models/data-models#commentdialogagentsuggestionprops) - ---- - -### VeltCommentDialogAgentSuggestion - -Container for the agent suggestion card. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionHeader - -Header section of the agent suggestion card, containing identity, timestamp, and menu. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionHeaderAgent - -Agent-identity variant of the suggestion header, shown when the source is an AI agent. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionHeaderAuthor - -Human-author variant of the suggestion header, shown when the source is a human user. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionHeaderAgentAvatar - -Agent avatar displayed in the agent-identity header variant. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionHeaderAgentName - -Agent display name shown in the agent-identity header variant. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionHeaderAuthorAvatar - -Human author avatar displayed in the author-identity header variant. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionHeaderAuthorName - -Human author name shown in the author-identity header variant. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionHeaderTimestamp - -Relative timestamp displayed in the suggestion header. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionHeaderMenu - -Overflow menu (3-dot) in the suggestion header. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionHeaderMenuTrigger - -Trigger button that opens the suggestion header overflow menu. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionHeaderMenuContent - -Content container for the suggestion header overflow menu. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionHeaderMenuContentItem - -Individual item within the suggestion header overflow menu. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionHeaderMenuContentItemIcon - -Icon for an individual suggestion header menu item. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionHeaderMenuContentItemLabel - -Label for an individual suggestion header menu item. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionBody - -Body of the agent suggestion card, displaying the suggestion title and content. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionFooter - -Footer container of the agent suggestion card. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionFooterOpenComment - -"Open Comment" affordance in the suggestion footer that navigates to the full comment thread. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionActions - -Accept/reject button group for the agent suggestion. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionActionsActionAccept - -Button to accept the agent suggestion. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentDialogAgentSuggestionActionsActionReject - -Button to reject the agent suggestion. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#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 -- [Data Models](/api-reference/sdk/models/data-models#comment-dialog-primitives) diff --git a/ui-customization/features/async/comments/comment-dialog/wireframe-variables.mdx b/ui-customization/features/async/comments/comment-dialog/wireframe-variables.mdx deleted file mode 100644 index d7468f094..000000000 --- a/ui-customization/features/async/comments/comment-dialog/wireframe-variables.mdx +++ /dev/null @@ -1,1656 +0,0 @@ ---- -title: Comment Dialog Wireframe Variables -description: Template variables exposed by the Comment Dialog wireframe — read them with velt-data, velt-if, and velt-class to drive dynamic content, conditional rendering, and class toggling. ---- - - - New to wireframes? Start with [UI Customization Concepts](/ui-customization/overview) and the [Template Variables](/ui-customization/template-variables) overview. - - -## Overview - -The **Comment Dialog** wireframe exposes the variables below. Use them inside any `` tag via three forms: - -| You want to… | Use | Example | -|---|---|---| -| Display a value as text | `` | `` | -| Hide / show conditionally | `velt-if="{var}"` | `velt-if="{enableResolve} && {canResolveAnnotation}"` | -| Toggle a CSS class | `velt-class="'cls': {var}"` | `velt-class="'is-private': {isPrivateComment}"` | - -All variables are mapped — reference them by their short name. You do not need the `componentConfig.` prefix unless explicitly noted (see [Root-Level Properties](#root-level-properties-use-full-path)). - -## App State - -App-wide values resolved from the shared per-annotation signal. - -| Variable | Type | Description | Example | -|---|---|---|---| -| `user` | [`User`](/api-reference/sdk/models/data-models#user) | Currently identified end-user. | `` | -| `isUserAdmin` | `boolean` | True when `user.isAdmin === true`. | `velt-if="{isUserAdmin}"` | -| `isKnownUser` | `boolean` | True when the user has been identified (vs. anonymous). | `velt-class="'is-known': {isKnownUser}"` | -| `repliesUniqueUsers` | [`User`](/api-reference/sdk/models/data-models#user)`[]` | Distinct authors of replies on the current annotation. | `` | - -## Data State - -Per-annotation data: the live annotation, comment list, edit / draft state, attachments, and recordings. - -| Variable | Type | Description | Example | -|---|---|---|---| -| `annotation` | [`CommentAnnotation`](/api-reference/sdk/models/data-models#commentannotation) | Annotation this dialog represents. | `` | -| `annotations` | [`CommentAnnotation`](/api-reference/sdk/models/data-models#commentannotation)`[]` | All annotations in scope (for sidebar usage). | `` | -| `allAnnotations` | [`CommentAnnotation`](/api-reference/sdk/models/data-models#commentannotation)`[]` | Unfiltered annotation list. | `` | -| `ghostComment` | `GhostComment` \| `null` | Set when the annotation has lost its DOM target. | `velt-if="{ghostComment}"` | -| `assignTo` | [`UserContact`](/api-reference/sdk/models/data-models#usercontact) | Currently selected assignee. | `` | -| `selectedUserContacts` | [`UserContact`](/api-reference/sdk/models/data-models#usercontact)`[]` | Selected user contacts (for assign / mention). | `` | -| `customList` | `any[]` | Autocomplete reference list (when registered). | `` | -| `toOrganizationUserGroup` | `any[]` | Organization user-group contacts. | `` | -| `taggedUserContacts` | [`AutocompleteUserContactReplaceData`](/api-reference/sdk/models/data-models#autocompleteusercontactreplacedata)`[]` | Users tagged via @mention in the active composer. | `` | -| `taggedGroups` | `any[]` | Groups tagged via @mention in the active composer. | `` | -| `customChipData` | [`CustomAnnotationDropdownData`](/api-reference/sdk/models/data-models#customannotationdropdowndata) \| `null` | Custom-chip dropdown config for this annotation. | `velt-if="{customChipData}"` | -| `selectedCustomChipSet` | `Set` | IDs currently selected in the custom-chip dropdown. | `` | -| `currentDialogView` | `Record` | Seen-by aggregation keyed by `commentId`. | `` | -| `selectedFiles` | `FileData[]` | Files staged in the composer. | `velt-if="{selectedFiles.length} > 0"` | -| `invalidSelectedFiles` | `InvalidFileData[]` | Files rejected by validation. | `velt-if="{invalidSelectedFiles.length} > 0"` | -| `selectedAttachments` | `any[]` | Attachments staged for the new comment. | `` | -| `editComment` | [`Comment`](/api-reference/sdk/models/data-models#comment) \| `null` | Comment currently being edited in this dialog. | `velt-if="{editComment}"` | -| `editCommentIndex` | `number` \| `null` | Index of the comment being edited. | `` | -| `localRecordedData` | [`RecordedData`](/api-reference/sdk/models/data-models#recordeddata)`[]` | Recordings staged in the composer. | `` | -| `attachmentsToDelete` | `any[]` | Attachments queued for deletion on save. | `` | - -## UI State - -Per-instance UI flags driven by the dialog itself. Grouped by area for readability — the underlying shape is flat. - -**Layout modes** — which rendering mode the dialog is in. - -| Variable | Type | Description | Example | -|---|---|---|---| -| `sidebarMode` | `boolean` | Dialog is rendered inside the comments sidebar. | `velt-class="'is-sidebar': {sidebarMode}"` | -| `inboxMode` | `boolean` | Dialog is rendered inside the inbox layout. | `velt-class="'is-inbox': {inboxMode}"` | -| `dialogMode` | `boolean` | Default popup-dialog layout. | `velt-class="'is-dialog': {dialogMode}"` | -| `inlineCommentMode` | `boolean` | Inline-comment-pin styling. | `velt-class="'is-inline': {inlineCommentMode}"` | -| `inlineCommentSectionMode` | `boolean` | Inline comments section layout. | `velt-class="'is-inline-section': {inlineCommentSectionMode}"` | -| `focusedThreadMode` | `boolean` | Focused-thread layout is active. | `velt-class="'is-focused': {focusedThreadMode}"` | -| `isFocusedThreadEnabled` | `boolean` | Focused-thread navigation is allowed. | `velt-if="{isFocusedThreadEnabled}"` | -| `pageModeComposer` | `boolean` | Page-level composer mode (sidebar). | `velt-class="'page-composer': {pageModeComposer}"` | -| `bottomSheetMode` | `boolean` | Bottom-sheet layout is active. | `velt-class="'bottom-sheet': {bottomSheetMode}"` | -| `commentComposerMode` | `boolean` | Composer-only layout (no thread). | `velt-class="'composer-only': {commentComposerMode}"` | -| `multiThreadAnnotationId` | `string` \| `null` | Multi-thread context id (when in multi-thread mode). | `velt-if="{multiThreadAnnotationId}"` | -| `dialogOpenedInSidebar` | `boolean` | Dialog opened in sidebar context. | `velt-class="'in-sidebar': {dialogOpenedInSidebar}"` | -| `dialogShadowDOM` | `boolean` | Shadow-DOM rendering is enabled. | `velt-if="{dialogShadowDOM}"` | -| `containerComponentId` | `string` | Owning container id (scoping). | `` | -| `commentDialogUniqueId` | `string` | Unique id for this dialog instance. | `` | -| `deviceType` | `string` | Device-type modifier (`'desktop'`, `'mobile'`, etc.). | `velt-class="'device-{deviceType}': true"` | -| `darkMode` | `boolean` | Dark mode is active. | `velt-class="'theme-dark': {darkMode}"` | -| `variant` | `string` | Per-instance variant tag set on the host element. | `` | -| `disabled` | `boolean` | Dialog is disabled. | `velt-class="'is-disabled': {disabled}"` | -| `readOnly` | `boolean` | Per-instance read-only mode. | `velt-class="'readonly': {readOnly}"` | -| `commentPinSelected` | `boolean` | Pin associated with this dialog is selected. | `velt-class="'pin-selected': {commentPinSelected}"` | -| `commentDialogSelected` | `boolean` | This dialog is the currently selected one. | `velt-class="'selected': {commentDialogSelected}"` | -| `fullExpanded` | `boolean` | Dialog is fully expanded (sidebar). | `velt-class="'expanded': {fullExpanded}"` | -| `expandOnSelection` | `boolean` | Sidebar expands on click vs. just visually selecting. | `velt-if="{expandOnSelection}"` | -| `composerPosition` | `string` | Composer position (`'top'` or `'bottom'`). | `velt-class="'composer-{composerPosition}': true"` | -| `selectedVisibility` | [`CommentVisibilityOptionType`](/api-reference/sdk/models/data-models#commentvisibilityoptiontype) | Currently selected visibility option. | `velt-class="'visibility-{selectedVisibility}': true"` | -| `selectedVisibilityUsers` | `any[]` | Users selected when `selectedVisibility === 'selected_people'`. | `` | -| `locationVersion` | `string` | Annotation location version. | `` | - -**Composer state** — input, draft, and submission state. - -| Variable | Type | Description | Example | -|---|---|---|---| -| `composerContent` | `string` | Plain-text composer draft. | `` | -| `composerContentHTML` | `string` | Rich-text composer draft. | `` | -| `newComment` | `string` | Alias for `composerContent`. | `` | -| `newCommentHTML` | `string` | Alias for `composerContentHTML`. | `` | -| `composerInOpenState` | `boolean` | Composer is currently expanded. | `velt-class="'composer-open': {composerInOpenState}"` | -| `composerMode` | `'default'` \| `'expanded'` | Current composer mode. | `velt-class="'composer-{composerMode}': true"` | -| `isInputFocused` | `boolean` | Composer input has keyboard focus. | `velt-class="'input-focused': {isInputFocused}"` | -| `showCommentButtons` | `boolean` | Composer's action-button row should render. | `velt-if="{showCommentButtons}"` | -| `isAutocompleteDropdownOpen` | `boolean` | @-mention autocomplete dropdown is open. | `velt-class="'autocomplete-open': {isAutocompleteDropdownOpen}"` | -| `uploadingAttachments` | `boolean` | One or more attachments are uploading. | `velt-class="'uploading': {uploadingAttachments}"` | -| `recorderInitConfig` | `any` | Active recorder configuration (or `null`). | `velt-class="'recording-{recorderInitConfig.type}': true"` | - -**Reactions, replies, and dropdowns.** - -| Variable | Type | Description | Example | -|---|---|---|---| -| `showReplies` | `boolean` | Reply list is currently shown. | `velt-class="'show-replies': {showReplies}"` | -| `collapsedComments` | `boolean` | Comments are collapsed (only first comment visible). | `velt-class="'collapsed': {collapsedComments}"` | -| `showAllComments` | `boolean` | "Show all" mode is active. | `velt-if="{showAllComments}"` | -| `showReplyComposer` | `boolean` | Reply composer is currently visible. | `velt-if="{showReplyComposer}"` | -| `maxReplyAvatars` | `number` | Maximum reply avatars to show before "+N". | `` | -| `showSuggestionModeActions` | `boolean` | Suggestion-mode accept/reject actions visible. | `velt-if="{showSuggestionModeActions}"` | -| `reactionToolOpenIndex` | `number` | Comment index whose reaction picker is open (`-1` if none). | `velt-class="'reaction-open': '{reactionToolOpenIndex} === {commentIndex}'"` | -| `openDropdownIndexValue` | `number` | Comment index whose options dropdown is open (`-1` if none). | `velt-class="'dropdown-open': '{openDropdownIndexValue} === {commentIndex}'"` | -| `hasReactionsByCommentId` | `Record` | Map keyed by `commentId` → has-reactions flag. | `velt-if="{hasReactionsByCommentId[comment.commentId]}"` | -| `assignToMenuOpened` | `boolean` | Assign-to menu is open. | `velt-class="'assign-open': {assignToMenuOpened}"` | -| `isPrivateComment` | `boolean` | Annotation is in private mode. | `velt-class="'private': {isPrivateComment}"` | -| `showGhostCommentMessage` | `boolean` | Ghost-comment banner should show. | `velt-if="{showGhostCommentMessage}"` | -| `playVideoInFullScreen` | `boolean` | Recordings play full-screen. | `velt-class="'fullscreen-video': {playVideoInFullScreen}"` | -| `shouldScrollToBottom` | `boolean` | _Internal transient signal_ — triggers auto-scroll to latest comment. | _Internal — not typically used in wireframes._ | -| `showScreenSizeInfo` | `boolean` | Screen-size information overlay is visible. | `velt-if="{showScreenSizeInfo}"` | -| `sidebarButtonOnCommentDialogVisible` | `boolean` | "View all comments" sidebar button is visible on the dialog. | `velt-if="{sidebarButtonOnCommentDialogVisible}"` | - -## Feature State - -Capability flags toggled via SDK config. All `Shared` — the same value applies to every dialog instance for the same annotation. - -| Variable | Type | Description | Example | -|---|---|---|---| -| `canResolveAnnotation` | `boolean` | Current user is allowed to resolve this annotation. | `velt-if="{canResolveAnnotation}"` | -| `canUnresolveAnnotation` | `boolean` | Current user is allowed to unresolve this annotation. | `velt-if="{canUnresolveAnnotation}"` | -| `dialogSelectedByKnownUser` | `boolean` | Selected dialog belongs to an identified user. | `velt-class="'known-user-selected': {dialogSelectedByKnownUser}"` | -| `enableResolve` | `boolean` | Resolve action enabled by config. | `velt-if="{enableResolve}"` | -| `resolveStatusAccessAdminOnly` | `boolean` | Only admins can change resolve status. | `velt-if="!{resolveStatusAccessAdminOnly} || {isUserAdmin}"` | -| `enableSignInButton` | `boolean` | Sign-in button is rendered for anonymous users. | `velt-if="{enableSignInButton}"` | -| `enableUpgradeButton` | `boolean` | Upgrade button is rendered when plan is expired. | `velt-if="{enableUpgradeButton}"` | -| `enableGhostCommentsMessage` | `boolean` | Ghost-comment banner is enabled. | `velt-if="{enableGhostCommentsMessage}"` | -| `replyAvatars` | `boolean` | Reply-avatars strip is enabled. | `velt-if="{replyAvatars}"` | -| `collapsedRepliesPreview` | `boolean` | Surface the collapsed teaser (first comment + "Show N replies…" divider + last comment) even while the dialog is non-selected/preview. Default `false`. | `velt-if="{collapsedRepliesPreview}"` | -| `userMentions` | `boolean` | @-mention autocomplete is enabled. | `velt-if="{userMentions}"` | -| `recordingSummaryEnabled` | `boolean` | Recording AI-summary feature enabled. | `velt-if="{recordingSummaryEnabled}"` | -| `enableAttachment` | `boolean` | File attachments enabled. | `velt-if="{enableAttachment}"` | -| `allowedFileTypes` | `string[]` | File-type allow-list. | `` | -| `allowedRecordings` | `string[]` | Recording types enabled (`'audio'` / `'video'` / `'screen'`). | `` | -| `screenSharingSupported` | `boolean` | Browser supports screen-sharing. | `velt-if="{screenSharingSupported}"` | -| `enterKeyToSubmit` | `boolean` | Enter key submits (vs. inserts a newline). | `velt-class="'enter-submit': {enterKeyToSubmit}"` | -| `deleteOnBackspace` | `boolean` | Backspace on empty composer deletes the comment. | `velt-class="'backspace-delete': {deleteOnBackspace}"` | -| `enableReactions` | `boolean` | Emoji reactions enabled. | `velt-if="{enableReactions}"` | -| `isInsidePdfViewer` | `boolean` | Dialog is inside a PDF viewer. | `velt-class="'in-pdf': {isInsidePdfViewer}"` | -| `enableStatus` | `boolean` | Status dropdown enabled. | `velt-if="{enableStatus}"` | -| `customStatusesShown` | `boolean` | Custom-status decoration enabled. | `velt-class="'custom-statuses': {customStatusesShown}"` | -| `statusOptions` | [`CustomStatus`](/api-reference/sdk/models/data-models#customstatus)`[]` | Available status options. | `` | -| `enablePriority` | `boolean` | Priority dropdown enabled. | `velt-if="{enablePriority}"` | -| `priorityOptions` | [`CustomPriority`](/api-reference/sdk/models/data-models#custompriority)`[]` | Available priority options. | `` | -| `visibilityOptions` | `boolean` | Visibility dropdown enabled. | `velt-if="{visibilityOptions}"` | -| `enableAssignment` | `boolean` | Assign-to dropdown enabled. | `velt-if="{enableAssignment}"` | -| `enableNotifications` | `boolean` | Notification toggle enabled. | `velt-if="{enableNotifications}"` | -| `enableEdit` | `boolean` | Edit action enabled. | `velt-if="{enableEdit}"` | -| `enableDelete` | `boolean` | Delete action enabled. | `velt-if="{enableDelete}"` | -| `enablePrivateMode` | `boolean` | Private-mode toggle enabled. | `velt-if="{enablePrivateMode}"` | -| `deleteThreadWithFirstComment` | `boolean` | Deleting the first comment deletes the entire thread. | `velt-class="'delete-cascade': {deleteThreadWithFirstComment}"` | -| `seenByUsers` | `boolean` | "Seen by" feature enabled. | `velt-if="{seenByUsers}"` | -| `commentAcceptedStatus` | [`CustomStatus`](/api-reference/sdk/models/data-models#customstatus) | Accepted-suggestion status object. | `` | -| `commentRejectedStatus` | [`CustomStatus`](/api-reference/sdk/models/data-models#customstatus) | Rejected-suggestion status object. | `` | -| `enableAutoCategorize` | `boolean` | Auto-categorize feature enabled. | `velt-if="{enableAutoCategorize}"` | -| `suggestionMode` | `boolean` | Suggestion mode is active. | `velt-class="'suggestion-mode': {suggestionMode}"` | -| `moderatorMode` | `boolean` | Moderator mode is active. | `velt-class="'moderator': {moderatorMode}"` | -| `isPlanExpired` | `boolean` | Workspace plan is expired. | `velt-class="'plan-expired': {isPlanExpired}"` | - -### Collapsed replies preview - -The `collapsedRepliesPreview` variable mirrors the `collapsed-replies-preview` host attribute (and the `collapsedRepliesPreview` React prop). When `true`, the collapsed teaser — first comment + "Show N replies…" divider + last comment — is surfaced even while the dialog is non-selected/preview. It widens the `comment-dialog-more-reply` `shouldShow` from `isDialogSelected` to (`isDialogSelected` **or** `collapsedRepliesPreview`). Default `false`. - -```html - - - -``` - -## Common Props - -Every Comment Dialog primitive accepts a small shared set of attributes. The most useful ones inside wireframes: - -| React Prop | HTML Attribute | Type | Default | Description | -|---|---|---|---|---| -| `annotationId` | `annotation-id` | `string` | — | Standalone mode — pin this primitive to an annotation id. | -| `inlineCommentSectionMode` | `inline-comment-section-mode` | `boolean` \| `"true"` \| `"false"` | `false` | Switch to inline-section behavior. | -| `defaultCondition` | `default-condition` | `boolean` \| `"true"` \| `"false"` | `true` | When `false`, bypasses `shouldShow` so the primitive always renders. | - -Signal inputs (auto-wired in parent-child component composition): - -- `[componentConfigSignal]` — shared per-annotation config signal. -- `[parentLocalUIState]` — per-instance UI state signal. - -For the full per-subcomponent prop list, see [Comment Dialog Primitives](./primitives). - -## Context-Specific Variables - -These are only resolvable inside the nested wireframe tags noted in the **Available in** column. Each is injected by the iteration primitive that owns the tag. - -| Variable | Type | Available in | Example | -|---|---|---|---| -| `commentObj` | [`Comment`](/api-reference/sdk/models/data-models#comment) | `` and descendants | `` | -| `comment` | [`Comment`](/api-reference/sdk/models/data-models#comment) | Same as above (alias of `commentObj`) | `` | -| `commentIndex` | `number` | Same as above. `0` on the parent comment. | `velt-class="'is-first': '{commentIndex} === 0'"` | -| `commentAnnotation` | [`CommentAnnotation`](/api-reference/sdk/models/data-models#commentannotation) | Available everywhere (alias of `annotation`) | `` | -| `commentAnnotations` | [`CommentAnnotation`](/api-reference/sdk/models/data-models#commentannotation)`[]` | Available everywhere (alias of `annotations`) | `` | -| `userContact` | [`UserContact`](/api-reference/sdk/models/data-models#usercontact) | User-selector items | `` | -| `context` | `Record` | Inline-comment-section context | `` | - - - **Aliases:** `commentObj` ↔ `comment`, `annotation` ↔ `commentAnnotation`, `annotations` ↔ `commentAnnotations`. Either name resolves; the friendly short form is preferred. - - -## Version 1 Backward-Compatibility Aliases - -Inherited from v4 SDK config signals. They are mapped so wireframes written for v4 keep working — the **Maps to** column tells you the v5 equivalent. - -| Version 1 Alias | Maps to | Description | -|---|---|---| -| `allowAssignment` | `enableAssignment` | Was in `CommentDialogOptionsDropdownConfig`. | -| `allowToggleNotification` | `enableNotifications` | Was the per-comment notification toggle flag. | -| `allowEdit` | `enableEdit` | Was the per-comment edit-permission flag. | -| `allowChangeCommentAccessMode` | `enablePrivateMode` | Was the access-mode toggle flag. | -| `notificationEnabled` | `notificationEnabled` (passthrough) | Pass-through; the data context must provide it. | -| `mainCommentId` | `annotation.comments.0.commentId` | Convenience alias for the first comment's id. | - -The resolver also unwraps two legacy signal-name prefixes — `commentDialogOptionsDropdownConfigSignal.*` and `commentDialogStatusDropdownConfigSignal.*` — so an old wireframe written as `{commentDialogOptionsDropdownConfigSignal.allowAssignment}` keeps working. - -## Root-Level Properties (Use Full Path) - -These properties live at the root of `componentConfigSignal` and **are not** entries in the variable map. To use them, write the full `componentConfigSignal.` path. - -| Variable | Type | Description | -|---|---|---| -| `componentConfigSignal.unreadCommentsMap` | `Record` \| `null` | Map keyed by `annotationId` to unread count. Combine with bracket notation: `{componentConfigSignal.unreadCommentsMap[annotation.annotationId]}`. | -| `componentConfigSignal.unreadIndicatorMode` | `'minimal'` \| `'detailed'` | Unread-indicator display mode. | -| `componentConfigSignal.commentplaceholder` | `string` | Placeholder for the new-comment composer. | -| `componentConfigSignal.replyplaceholder` | `string` | Placeholder for the reply composer. | -| `componentConfigSignal.editplaceholder` | `string` | Placeholder for the generic edit composer. | -| `componentConfigSignal.editcommentplaceholder` | `string` | Placeholder for the edit-comment composer. | -| `componentConfigSignal.editreplyplaceholder` | `string` | Placeholder for the edit-reply composer. | -| `componentConfigSignal.placeholder` | `string` | Generic placeholder; takes priority over the others. | - -One root-level helper **is** mapped: - -| Variable | Type | Description | -|---|---|---| -| `unreadCommentAnnotationCount` | `number` | Mapped explicitly. Populated for the unread counter on the dialog/sidebar entry-points. Read as `{unreadCommentAnnotationCount}`. | - -## Type Reference - -Types referenced by the variables above are documented in [Data Models](/api-reference/sdk/models/data-models): - -| Type | Description | -|---|---| -| [`User`](/api-reference/sdk/models/data-models#user) | Identified end-user object (userId, name, email, photoUrl, isAdmin). | -| [`Comment`](/api-reference/sdk/models/data-models#comment) | A single message inside an annotation thread. | -| [`CommentAnnotation`](/api-reference/sdk/models/data-models#commentannotation) | The annotation thread (id, status, comments, from, etc.). | -| [`UserContact`](/api-reference/sdk/models/data-models#usercontact) | Selectable user contact (assign-to, mention). | -| [`Attachment`](/api-reference/sdk/models/data-models#attachment) | Saved attachment record on a comment. | -| [`RecordedData`](/api-reference/sdk/models/data-models#recordeddata) | Audio / video / screen recording metadata. | -| [`CustomStatus`](/api-reference/sdk/models/data-models#customstatus) | Status definition (id, name, color, icon). | -| [`CustomPriority`](/api-reference/sdk/models/data-models#custompriority) | Priority definition (id, name, color, icon). | -| [`CustomAnnotationDropdownData`](/api-reference/sdk/models/data-models#customannotationdropdowndata) | Custom-chip dropdown configuration. | -| [`CustomAnnotationDropdownItem`](/api-reference/sdk/models/data-models#customannotationdropdownitem) | A single chip option in the custom-annotation dropdown. | -| [`CommentVisibilityOptionType`](/api-reference/sdk/models/data-models#commentvisibilityoptiontype) | Visibility mode (`'public'`, `'organization'`, `'selected_people'`, `'private'`). | -| [`AutocompleteUserContactReplaceData`](/api-reference/sdk/models/data-models#autocompleteusercontactreplacedata) | Tagged-mention replacement payload. | -| [`CommentAnnotationContext`](/api-reference/sdk/models/data-models#commentannotationcontext) | Free-form annotation context. | -| [`GhostComment`](/api-reference/sdk/models/data-models#ghostcomment) | Placeholder set when the annotation has lost its DOM target. | -| [`FileData`](/api-reference/sdk/models/data-models#filedata) | Pending file selection (composer-staged file). | -| [`InvalidFileData`](/api-reference/sdk/models/data-models#invalidfiledata) | Rejected file selection (composer-staged file with a validation error). | - -## Subcomponents - -Each subcomponent below has its own wireframe tag. The tables show extra variables beyond the common set, the `shouldShow` condition, and host CSS classes. - -### `comment-dialog` (root) - -The root primitive — the `` element customers place in their app. - -- **Public element:** `` -- **Wireframe tag:** `` -- **Children:** `*-header`, `*-body`, `*-composer`, `*-close-button` - -| Property | Value | -|---|---| -| Extra variables | None — root only sees common variables. | -| `shouldShow` | Renders when `defaultCondition === false` **or** `componentConfig` exists with a non-null `annotation`. | - - - -```jsx - - -
- - - -
- - -``` - - -```html - - -
- - - -
- - -``` - - - ---- - -### `comment-dialog-header` - -The header strip across the top of the dialog: status, priority, custom-chip, options dropdown, copy-link, resolve / unresolve buttons. - -- **Public element:** `` -- **Wireframe tag:** `` -- **Children:** `*-status-dropdown`, `*-priority-dropdown`, `*-custom-annotation-dropdown`, `*-options-dropdown`, `*-resolve-button`, `*-unresolve-button`, `*-copy-link` - -| Property | Value | -|---|---| -| Extra variables | None beyond common variables. | -| `shouldShow` | `defaultCondition === false` **or** `annotation.comments.length > 0`. Hidden on a brand-new annotation. | -| Host class | `velt-header` | - - - -```jsx - -
- - - - - -
- -``` - - -```html - -
- - - - - -
- -``` - - - ---- - -### `comment-dialog-body` - -The middle section: threads list, reply avatars, toggle / hide-reply controls. - -- **Public element:** `` -- **Wireframe tag:** `` -- **Children:** `*-threads`, `*-reply-avatars`, `*-toggle-reply`, `*-hide-reply`, `*-more-reply` - -| Property | Value | -|---|---| -| Extra variables | None at the body level. | -| `shouldShow` | `defaultCondition === false` **or** `annotation.comments.length > 0`. | -| Host class | `velt-body` | - - - -```jsx - -
- - -
- - -
- -
- -``` - - -```html - -
- -
- - -
-
- -``` - - - ---- - -### `comment-dialog-threads` - -The list container. Iterates `annotation.comments` and renders one thread-card per comment. - -- **Public element:** `` -- **Wireframe tag:** `` -- **Children:** `*-thread-card` - -The threads container injects per-iteration variables into each thread-card: - -| Variable | Type | Example | -|---|---|---| -| `commentObj` | [`Comment`](/api-reference/sdk/models/data-models#comment) | `` | -| `comment` | [`Comment`](/api-reference/sdk/models/data-models#comment) (alias) | `` | -| `commentIndex` | `number` | `velt-class="'is-first': '{commentIndex} === 0'"` | - -| Property | Value | -|---|---| -| `shouldShow` | Each thread-card renders only when `!isDialogSelected() ? !i : (!collapsedComments || !i)` — i.e. only the first comment when collapsed, all comments when expanded. | - - - -```jsx - - -
- - - - {/* {comment.from.name}, {commentIndex} are in scope here */} -
- - - - - - -``` - - -```html - - -
- - - - -
- - - - - - -``` - - - ---- - -### `comment-dialog-close-button` - -Close button that dismisses the dialog. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | -| `shouldShow` | Always renders when the dialog is shown. | - - - -```jsx - - - -``` - - -```html - - - -``` - - - ---- - -### `comment-dialog-composer` - -The composer assembly — owns the per-instance composer state machine and emits change events as the user types. - -- **Public element:** `` -- **Wireframe tag:** `` -- **Children:** `*-input`, `*-avatar`, `*-action-button`, `*-attachments`, `*-recordings`, `*-private-badge`, `*-format-toolbar`, `*-assign-user` - -The composer injects extras for its child tags: - -| Variable | Type | Example | -|---|---|---| -| `editMode` | `boolean` | `velt-class="'is-editing': {editMode}"` | -| `commentObj` | [`Comment`](/api-reference/sdk/models/data-models#comment) (edit mode only) | `` | -| `commentIndex` | `number` (edit mode only) | `` | - -| Property | Value | -|---|---| -| `shouldShow` | Renders when `!disabled && isKnownUser && !isPlanExpired`, **and** edit-mode parity matches (`!!editComment === editMode`), **and** for new-comment mode one of `annotation.comments.length === 0`, `commentDialogSelected`, or `focusedThreadMode` is true. | -| Host class | `velt-composer` | - - - -```jsx - -
- - - - -
- - - -
- -
- -``` - - -```html - -
- - - -
- - - -
-
- -``` - - - ---- - -### `comment-dialog-composer-action-button` - -A polymorphic action button — the same primitive renders different controls depending on its `type` attribute. - -- **Public element:** `` -- **Wireframe tag:** `` - -Supported `type` values: `userMentions`, `autocomplete`, `file`, `attachments`, `audio`, `video`, `screen`, `format`, `submit`. - -| Property | Value | -|---|---| -| Extra variables | None. | -| `shouldShow` (per type) | `userMentions` / `autocomplete`: `userMentions === true`. `file` / `attachments`: `enableAttachment === true`. `audio` / `video` / `screen`: corresponding entry in `allowedRecordings`. `format`: `enableFormatOptions === true`. `submit`: always renders. | -| Host class | `velt-comment-dialog-composer-action-button` | - - - -```jsx -{/* Register per-type wireframes */} - - - - - - - -``` - - -```html - - - - - - - - -``` - - - ---- - -### `comment-dialog-composer-input` - -The contenteditable input area with autocomplete (@mention) support. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | -| `shouldShow` | `!editMode && !isRecordingActive` for new-comment; `editMode && commentObj && !isRecordingActive` for edit-comment. | -| Host class | `velt-composer-input` | - - - -```jsx - -
- {/* The internal textarea is injected via the default template path; */} - {/* override only the surrounding chrome here */} -
- -``` - - -```html - -
- - -
- -``` - - - ---- - -### `comment-dialog-composer-avatar` - -The current user's avatar shown next to the composer in inline-section mode. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | -| `shouldShow` | `inlineCommentSectionMode === true` and `annotation.comments.length === 0`. | - - - -```jsx - - - -``` - - -```html - - - -``` - - - ---- - -### `comment-dialog-composer-attachments` - -The display row that lists files staged for upload and any rejected files. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | -| `shouldShow` | `editComment` is set, `selectedFiles.length > 0`, or `invalidSelectedFiles.length > 0`. | -| Host class | `velt-composer--attachments` | - - - -```jsx - -
    - {/* Default content delegates to selected/invalid sub-primitives */} -
- -``` - - -```html - -
    - -
- -``` - - - ---- - -### `comment-dialog-composer-recordings` - -The display row that lists active and pending recordings. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | -| `shouldShow` | Renders when `localRecordedData.length > 0` or a recording session is active. | - - - -```jsx - - {/* Wraps the default recordings list; default content remains */} - -``` - - -```html - - - -``` - - - ---- - -### `comment-dialog-composer-private-badge` - -The "Only for your team" badge shown above the composer when private mode is active. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | -| `shouldShow` | `isPrivateComment === true` **and** `annotation.comments.length === 0`. | -| Host class | `velt-private-badge` | - - - When `featureState.visibilityOptions === true`, this legacy primitive auto-suppresses — the new visibility-options dropdown owns the privacy indicator. The `isPrivateComment` value also now correctly reflects `visibilityConfig.type === 'restricted' | 'organizationPrivate'` in addition to the legacy `iam.accessMode === 'private'`. - - - - -```jsx - - 🔒 Private - -``` - - -```html - - 🔒 Private - -``` - - - ---- - -### `comment-dialog-composer-format-toolbar` - -The bold / italic / underline / strikethrough toolbar. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | -| `shouldShow` | `formatToolbarOpen === true` **and** `enableFormatOptions === true`. | -| Host class | `velt-format-toolbar` | - - - -```jsx - -
- - - - - - -
- -``` - - -```html - -
- - - - - - -
- -``` - - - ---- - -### `comment-dialog-composer-assign-user` - -The assign-to dropdown shown beneath the composer when the user opens the @-mention picker. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | -| `shouldShow` | `userMentions === true` and `composerInOpenState === true`. | - - - -```jsx - - {/* Customize the dropdown chrome here */} - -``` - - -```html - - - -``` - - - ---- - -### `comment-dialog-thread-card` - -A single comment inside the thread list. Renders avatar, name, time, message, options, reactions, recordings, and edit-composer. - -- **Public element:** `` -- **Wireframe tag:** `` -- **Children:** `*-avatar`, `*-name`, `*-time`, `*-message`, `*-edited`, `*-options`, `*-reactions`, `*-reaction-tool`, `*-recordings`, `*-seen-dropdown`, `*-attachments`, `*-edit-composer`, `*-assign-button`, `*-unread`, `*-draft`, `*-device-type` - -| Variable | Type | Example | -|---|---|---| -| `commentObj` | [`Comment`](/api-reference/sdk/models/data-models#comment) | `` | -| `comment` | [`Comment`](/api-reference/sdk/models/data-models#comment) (alias) | `` | -| `commentIndex` | `number` | `velt-class="'is-first': '{commentIndex} === 0'"` | - -| Property | Value | -|---|---| -| `shouldShow` | Renders when `comment` resolves to a truthy value (triple-input lookup found a comment). | -| Host class | `velt-thread-card--container` | - - - -```jsx - -
-
- - - - - -
- - -
- -``` - - -```html - -
-
- - - - - -
- - -
- -``` - - - ---- - -### `comment-dialog-thread-card-avatar` - -The author's avatar. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | Inherits `commentObj`, `comment`, `commentIndex` from thread-card. | -| Host class | `comment-dialog-user-avatar` | - - - -```jsx - - - -``` - - -```html - - - -``` - - - ---- - -### `comment-dialog-thread-card-name` - -The author's display name. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | Inherits `commentObj`, `comment`, `commentIndex` from thread-card. | -| Host class | `velt-thread-card--name` | - - - -```jsx - - - -``` - - -```html - - {{ '{comment.from.name}' }} - -``` - - - ---- - -### `comment-dialog-thread-card-time` - -The comment's `lastUpdated` timestamp formatted as relative time. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | Inherits `commentObj`, `comment`, `commentIndex` from thread-card. | -| Host class | `velt-thread-card--time` | - ---- - -### `comment-dialog-thread-card-message` - -The comment body. Renders text, HTML, or voice player. Supports message truncation. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | Inherits `commentObj`, `comment`, `commentIndex` from thread-card. | -| Host class | `velt-thread-card--message` | - ---- - -### `comment-dialog-thread-card-edited` - -Small "Edited" badge shown when a comment has been modified. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | Inherits `commentObj`, `comment`, `commentIndex` from thread-card. | -| `shouldShow` | `comment.isEdited === true` or a local edit draft exists. | - ---- - -### `comment-dialog-thread-card-options` - -The "..." options dropdown trigger on a comment. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | Inherits `commentObj`, `comment`, `commentIndex` from thread-card. | -| `shouldShow` | Dialog is selected and the comment belongs to the current user or user is admin. | - ---- - -### `comment-dialog-thread-card-reactions` - -Emoji reaction badges displayed below a comment. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | Inherits `commentObj`, `comment`, `commentIndex` from thread-card. | -| `shouldShow` | `enableReactions === true` and the comment has reactions. | - ---- - -### `comment-dialog-thread-card-recordings` - -Recordings attached to a comment (audio / video / screen). - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | Inherits `commentObj`, `comment`, `commentIndex` from thread-card. | -| `shouldShow` | `comment.recorders.length > 0`. | - ---- - -### `comment-dialog-thread-card-seen-dropdown` - -"Seen by" dropdown showing which users have viewed the comment. - -- **Public element:** `` -- **Wireframe tag:** `` -- **Children:** `*-trigger`, `*-content` - -| Property | Value | -|---|---| -| Extra variables | Inherits `commentObj`, `comment`, `commentIndex` from thread-card. | -| `shouldShow` | `seenByUsers === true` and `commentIndex === 0`. | - ---- - -### `comment-dialog-thread-card-attachments` - -Attachments (images and other files) attached to a comment. - -- **Public element:** `` -- **Wireframe tag:** `` -- **Children:** `*-image`, `*-other` - -| Property | Value | -|---|---| -| Extra variables | Inherits `commentObj`, `comment`, `commentIndex` from thread-card. | -| `shouldShow` | `comment.attachments.length > 0`. | - ---- - -### `comment-dialog-status-dropdown` - -The annotation status dropdown in the header. - -- **Public element:** `` -- **Wireframe tag:** `` -- **Children:** `*-trigger`, `*-content` - -Per-iteration context inside content items: - -| Variable | Type | Example | -|---|---|---| -| `statusObj` | [`CustomStatus`](/api-reference/sdk/models/data-models#customstatus) | `` | - -| Property | Value | -|---|---| -| `shouldShow` | `enableStatus === true`. | -| Host class | `velt-status-dropdown` | - ---- - -### `comment-dialog-priority-dropdown` - -The annotation priority dropdown in the header. - -- **Public element:** `` -- **Wireframe tag:** `` -- **Children:** `*-trigger`, `*-content` - -Per-iteration context inside content items: - -| Variable | Type | Example | -|---|---|---| -| `priorityObj` | [`CustomPriority`](/api-reference/sdk/models/data-models#custompriority) | `` | - -| Property | Value | -|---|---| -| `shouldShow` | `enablePriority === true`. | -| Host class | `velt-priority-dropdown` | - ---- - -### `comment-dialog-custom-annotation-dropdown` - -The custom-chip dropdown in the header. - -- **Public element:** `` -- **Wireframe tag:** `` -- **Children:** `*-trigger`, `*-content` - -Per-iteration context inside content items: - -| Variable | Type | Example | -|---|---|---| -| `item` | [`CustomAnnotationDropdownItem`](/api-reference/sdk/models/data-models#customannotationdropdownitem) | `` | - -| Property | Value | -|---|---| -| `shouldShow` | `customChipData` is set. | - ---- - -### `comment-dialog-options-dropdown` - -The per-comment "..." options dropdown. Contains assign, delete, edit, make-private, mark-as-read, and notification items. - -- **Public element:** `` -- **Wireframe tag:** `` -- **Children:** `*-trigger`, `*-content` - -| Property | Value | -|---|---| -| Extra variables | None beyond common variables. | -| `shouldShow` | Dialog is selected and the current comment's options should be visible. | - ---- - -### `comment-dialog-resolve-button` - -The "Resolve" button. Sets the annotation status to a resolving status. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | -| `shouldShow` | `canResolveAnnotation === true` and annotation has no `assignedTo` and (`!resolveStatusAccessAdminOnly` or user is author or user is admin). | - ---- - -### `comment-dialog-unresolve-button` - -The "Reopen" / unresolve button. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | -| `shouldShow` | `canUnresolveAnnotation === true` and annotation has no `assignedTo`. | - ---- - -### `comment-dialog-private-button` - -The "Make private" button. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | -| `shouldShow` | `enablePrivateMode === true`. | - ---- - -### `comment-dialog-delete-button` - -The "Delete" button. Click triggers thread deletion. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | -| `shouldShow` | `annotation.from.userId === user.userId` (only the original author can delete). | - ---- - -### `comment-dialog-suggestion-action` - -Renders accept/reject buttons in suggestion mode. - -- **Public element:** `` -- **Wireframe tag:** `` -- **Children:** `*-accept`, `*-reject` - -| Property | Value | -|---|---| -| Extra variables | None. | -| `shouldShow` | `showSuggestionModeActions === true`. | -| Host class | `velt-suggestion-actions` | - ---- - -### `comment-dialog-suggestion-action-accept` - -Accept-suggestion button. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | - ---- - -### `comment-dialog-suggestion-action-reject` - -Reject-suggestion button. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | - ---- - -### `comment-dialog-approve` - -Moderator-mode "Approve" button shown only when an admin is reviewing a not-yet-approved comment. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | -| `shouldShow` | Dialog is selected, annotation has comments, `moderatorMode === true`, annotation is not approved, and `isUserAdmin === true`. | - ---- - -### `comment-dialog-assignee-banner` - -A horizontal banner shown above the dialog when the annotation has been assigned to a user. - -- **Public element:** `` -- **Wireframe tag:** `` -- **Children:** `*-resolve-button`, `*-unresolve-button`, `*-user-avatar`, `*-user-name` - -| Property | Value | -|---|---| -| Extra variables | None. | -| `shouldShow` | `!inlineCommentMode` and `annotation.assignedTo` is set. | -| Host class | `velt-assignee-banner--heading` | - ---- - -### `comment-dialog-private-banner` - -Banner shown above the dialog when the comment thread is in private mode. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | -| `shouldShow` | `isPrivateComment === true` **and** `annotation.comments.length > 0`. | -| Host class | `velt-private-comment--heading` | - - - When `featureState.visibilityOptions === true`, this legacy primitive auto-suppresses — the new visibility-options dropdown owns the privacy indicator. The `isPrivateComment` value also now correctly reflects `visibilityConfig.type === 'restricted' | 'organizationPrivate'` in addition to the legacy `iam.accessMode === 'private'`. - - ---- - -### `comment-dialog-ghost-banner` - -Banner shown when the annotation has lost its DOM target. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | -| `shouldShow` | `showGhostCommentMessage === true` **and** `!inlineCommentMode` **and** `annotation.comments.length > 0`. | -| Host class | `velt-ghost-banner` | - ---- - -### `comment-dialog-visibility-banner` - -The "Public / Private / Selected people" banner shown above the dialog when visibility-options are enabled. - -- **Public element:** `` -- **Wireframe tag:** `` -- **Children:** `*-dropdown`, `*-icon`, `*-text` - -| Property | Value | -|---|---| -| Extra variables | None. | -| `shouldShow` | `visibilityOptions === true` **and** private comments feature is enabled. | -| Host class | `velt-visibility-banner` | - ---- - -### `comment-dialog-metadata` - -Renders an `annotation.metadata.metadataTemplate` strip above the comment list. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | -| `shouldShow` | `annotation.metadata.metadataTemplate.length > 0` **and** `annotation.comments.length > 0`. | -| Host class | `velt-comment-dialog--metadata-container` | - ---- - -### `comment-dialog-comment-category` - -Category chip(s) shown when auto-categorization is enabled. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | -| `shouldShow` | `enableAutoCategorize === true` **and** `annotation.commentCategories.length > 0`. | -| Host class | `velt-comment-category` | - ---- - -### `comment-dialog-comment-index` - -Numeric index label — the "1 of N" indicator (sidebar mode). - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | -| `shouldShow` | `annotation.annotationIndex` is set. | -| Host class | `velt-comment-index` | - ---- - -### `comment-dialog-comment-number` - -The annotation's `annotationNumber` (the human-friendly "Comment #42" identifier). - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | -| `shouldShow` | `annotation.annotationNumber` is set. | -| Host class | `velt-comment-number` | - ---- - -### `comment-dialog-comment-suggestion-status` - -The "Accepted" / "Rejected" badge shown in suggestion mode. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | -| `shouldShow` | `suggestionMode === true` and the annotation's status id matches the configured accepted or rejected status. | -| Host class | `velt-comment-suggestion-status` | - ---- - -### `comment-dialog-reply-avatars` - -The collapsed-state strip showing avatars of users who have replied. - -- **Public element:** `` -- **Wireframe tag:** `` -- **Children:** `*-list`, `*-remaining-count` - -| Property | Value | -|---|---| -| Extra variables | None. | -| `shouldShow` | `repliesUniqueUsers.length > 0`. | -| Host class | `velt-comment-dialog-reply-avatars` | - ---- - -### `comment-dialog-toggle-reply` - -The "View replies (N)" / "Hide replies" toggle below a collapsed thread. - -- **Public element:** `` -- **Wireframe tag:** `` -- **Children:** `*-count`, `*-icon`, `*-text` - -| Property | Value | -|---|---| -| Extra variables | None. | -| `shouldShow` | `(!isDialogSelected || collapsedComments)` **and** `annotation.comments.length > 0`. | -| Host class | `velt-toggle-reply` | - ---- - -### `comment-dialog-hide-reply` - -The "Hide replies" link shown when the dialog is expanded. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | -| `shouldShow` | `!collapsedComments` **and** `isDialogSelected` **and** `annotation.comments.length > 1`. | -| Host class | `velt-comment-dialog-hide-reply-container` | - ---- - -### `comment-dialog-more-reply` - -The "Show N replies…" expander row between the first comment and the rest. The label is composed as `Show` + `Count` + `Text`. - -- **Public element:** `` -- **Wireframe tag:** `` -- **Children:** `*-count` (``), `*-text` (``) - -| Property | Value | -|---|---| -| Extra variables | `collapsedRepliesPreview` (`boolean`, `Shared`, default `false`). | -| `shouldShow` | (`isDialogSelected` **or** `collapsedRepliesPreview`) **and** `!showAllComments` **and** `annotation.comments.length > 2`. | -| Host class | `velt-hidden-count` | - -The `count` child renders the number of hidden replies (`annotation.comments.length - 2`, clamped to ≥ 0); the `text` child renders the pluralized noun (`reply` when exactly one reply is hidden, otherwise `replies`). - ---- - -### `comment-dialog-navigation-button` - -Sidebar-mode pin-navigation button that scrolls to the related annotation in the document. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | -| `shouldShow` | `!annotation.isPageAnnotation`. | - ---- - -### `comment-dialog-all-comment` - -The "View all comments" footer button that opens the comments sidebar. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | -| `shouldShow` | `isDialogSelected` **and** `annotation.comments.length > 0` **and** `dialogMode === true` **and** `sidebarButtonOnCommentDialogVisible === true`. | - ---- - -### `comment-dialog-copy-link` - -The "Copy link" button — copies a deep-link to this annotation to the clipboard. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | - ---- - -### `comment-dialog-sign-in` - -"Sign in" button shown to anonymous users. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | -| `shouldShow` | `isDialogSelected` **and** `annotation.comments.length > 0` **and** user is anonymous **and** `enableSignInButton === true`. | - ---- - -### `comment-dialog-upgrade` - -"Upgrade" button shown when the workspace plan has expired. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | -| `shouldShow` | `isDialogSelected` **and** `annotation.comments.length > 0` **and** `isPlanExpired === true` **and** `enableUpgradeButton === true`. | - ---- - -## Deeply-Nested Wireframe Tags - -The primitives below decompose further into per-element wireframe tags. Each tag is registered separately and inherits the relevant parent's context variables. - -### Composer attachments tags - -The composer-attachments primitive renders three sub-trees: **selected** (valid pending uploads — image vs. other file), **invalid** (rejected files), and **other** non-image files. - -| Tag | Notes | Example | -|---|---|---| -| `` | Valid-files row container. | `` | -| `` | Invalid-files row container. | `velt-if="{invalidSelectedFiles.length} > 0"` | -| `` | A single invalid-file row. | `` | -| `` | Error-message text. | `` | -| `` | Thumbnail preview of the rejected file. | (per-iteration) | -| `` | Delete (×) button. | (click handler) | -| `` | Image-attachment row. | `` | -| `` | Image preview thumbnail. | `` | -| `` | Loading-state shimmer. | `velt-class="'is-uploading': {file.uploading}"` | -| `` | Download button. | (click handler) | -| `` | Delete (×) button. | (click handler) | -| `` | Non-image attachment row. | `` | -| `` | File-type icon. | `velt-class="'icon-{file.fileType}': true"` | -| `` | File name. | `` | -| `` | File-size label. | `` | -| `` | Loading shimmer. | `velt-class="'is-uploading': {file.uploading}"` | -| `` | Download button. | (click handler) | -| `` | Delete button. | (click handler) | - -### Status / Priority / Custom-annotation dropdown tags - -| Tag | Notes | Example | -|---|---|---| -| `` | Icon inside a status-option row. | `` | -| `` | Name inside a status-option row. | `` | -| `` | Icon inside a priority-option row. | `` | -| `` | Name inside a priority-option row. | `` | -| `` | Selected-tick inside a priority-option row. | `velt-class="'is-selected': '{priorityObj.id} === {annotation.priority.id}'"` | -| `` | A single selected-chip pill in the trigger. | `` | -| `` | Icon inside a custom-chip option row. | `` | -| `` | Label inside a custom-chip option row. | `` | - -### Options dropdown content variants - -The options-dropdown-content rows have variant-specific tags so customers can override "delete comment" vs "delete thread", "subscribe" vs "unsubscribe", etc. - -| Tag | Notes | Example | -|---|---|---| -| `` | "Delete comment" variant. | `velt-if="{commentIndex} !== 0"` | -| `` | "Delete entire thread" variant. | `velt-if="{commentIndex} === 0"` | -| `` | "Make private" variant. | `velt-if="!{isPrivateComment}"` | -| `` | "Make public" variant. | `velt-if="{isPrivateComment}"` | -| `` | "Mark as read" variant. | `velt-if="{annotation.unread}"` | -| `` | "Mark as unread" variant. | `velt-if="!{annotation.unread}"` | -| `` | "Subscribe" variant. | `velt-if="!{notificationEnabled}"` | -| `` | "Unsubscribe" variant. | `velt-if="{notificationEnabled}"` | - -### Thread-card / seen-dropdown / reply-avatars tags - -| Tag | Notes | Example | -|---|---|---| -| `` | "Show more" link on a truncated message. | `velt-if="{isTruncated} && !{isExpanded}"` | -| `` | "Show less" link on an expanded message. | `velt-if="{isExpanded}"` | -| `` | Per-viewer avatar inside the seen-dropdown items. | `` | -| `` | Per-viewer name. | `` | -| `` | Per-viewer viewed-at timestamp. | `` | -| `` | Single reply-avatars list item. | `` | - -### Visibility banner tags - -The visibility banner's dropdown decomposes into trigger (icon + label + selected-avatar list) + content (per-option rows). - -| Tag | Notes | Example | -|---|---|---| -| `` | Trigger pill of the visibility-banner dropdown. | `velt-class="'mode-{selectedVisibility}': true"` | -| `` | Icon inside the trigger. | `velt-class="'visibility-{selectedVisibility}': true"` | -| `` | Label inside the trigger. | `` | -| `` | Selected-people avatar list inside the trigger. | `` | -| `` | Per-user avatar inside the trigger list. | `` | -| `` | "+N" badge on the trigger list. | `` | -| `` | Open menu wrapper. | (visibility-options list) | -| `` | Per-option row. | `velt-class="'selected': '{option.value} === {selectedVisibility}'"` | -| `` | Per-option icon. | `` | -| `` | Per-option label. | `` | - -## Related - -- [Comment Dialog Wireframes](./wireframes) — composition reference for the wireframe tags themselves. -- [Comment Dialog Primitives](./primitives) — granular components if you don't need a full wireframe. -- [Template Variables](/ui-customization/template-variables) — overview of the `velt-data` / `velt-if` / `velt-class` system. diff --git a/ui-customization/features/async/comments/comment-dialog/wireframes.mdx b/ui-customization/features/async/comments/comment-dialog/wireframes.mdx deleted file mode 100644 index 32644c980..000000000 --- a/ui-customization/features/async/comments/comment-dialog/wireframes.mdx +++ /dev/null @@ -1,5518 +0,0 @@ ---- -title: Comment Dialog Wireframes -description: Wireframe components for building custom Comment Dialog interfaces with maximum flexibility. ---- - - -We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components. - - -## Overview - - - - - -```jsx - - - - - - - - - - - - - - - - - - - -``` - - -```html - - - - - - - - - - - - - - - - - - - -``` - - - -## Ghost Banner - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -## Private Banner - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -## Assignee Banner - - - - - -```jsx - - - - - - - - -``` - - -```html - - - - - - - - -``` - - - -### Resolve Button (Assignee Banner) - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### Unresolve Button (Assignee Banner) - - -```jsx - - - -``` - - -```html - - - -``` - - - -### User Avatar (Assignee Banner) - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### User Name (Assignee Banner) - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -## Header - - - - - -```jsx - - - // Pin Dialog Header - - - - - - - - // Sidebar Dialog Header - - - - - - - -``` - - -```html - - - - - - - - - - - - - - - - - -``` - - - -### Status (Header) - - - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -#### Trigger (Header Status) - - - - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -##### **Icon (Header Status Trigger)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Name (Header Status Trigger)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Arrow (Header Status Trigger)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Content (Header Status) - - - - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -##### **Item (Header Status Content)** - - - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Icon (Header Status Content Item)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Name (Header Status Content Item)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### Priority (Header) - - - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -#### Trigger (Header Priority) - - - - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -##### **Icon (Header Priority Trigger)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Name (Header Priority Trigger)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Arrow (Header Priority Trigger)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Content (Header Priority) - - - - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -##### **Item (Header Priority Content)** - - - - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -##### **Icon (Header Priority Content Item)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Name (Header Priority Content Item)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Tick (Header Priority Content Item)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### Options (Header) - - - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -#### Trigger (Header Options) - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Content (Header Options) - - - - - -```jsx - - - - - - - - - - -``` - - -```html - - - - - - - - - - -``` - - - -##### **Mark As Read (Header Options Content)** - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Make Private (Header Options Content)** - - - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Enable (Header Options Content Make Private)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Disable (Header Options Content Make Private)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Assign (Header Options Content)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Edit (Header Options Content)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Delete (Header Options Content)** - - - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Thread (Header Options Content Delete)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Comment (Header Options Content Delete)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Notification (Header Options Content)** - - - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Subscribe (Header Options Content Notification)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Unsubscribe (Header Options Content Notification)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### Copy Link (Header) - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### Resolve Button (Header) - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### Custom Annotation Dropdown (Header) - - - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -#### Trigger (Header Custom Annotation Dropdown) - - - - - -```jsx - - - - - - - - -``` - - -```html - - - - - - - - -``` - - - -##### **List (Header Custom Annotation Dropdown Trigger)** - - - - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -##### **Item (Header Custom Annotation Dropdown Trigger List)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Remaining Count (Header Custom Annotation Dropdown Trigger)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Placeholder (Header Custom Annotation Dropdown Trigger)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Arrow (Header Custom Annotation Dropdown Trigger)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Content (Header Custom Annotation Dropdown) - - - - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -##### **Item (Header Custom Annotation Dropdown Content)** - - - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Label (Header Custom Annotation Dropdown Content Item)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Icon (Header Custom Annotation Dropdown Content Item)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### Comment Index (Header) - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### 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. - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### Comment Category (Header) - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### Comment Suggestion Status (Header) - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### Navigation Button (Header) - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -## Private Badge - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -## Body - - - - - -```jsx - - - - - - - - -``` - - -```html - - - - - - - - -``` - - - -### Threads (Body) - - - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -#### Thread Card (Body Threads) - - - - - -```jsx - - - - - - - - - - - - - - - - - - - - - - - - - - -``` - - -```html - - - - - - - - - - - - - - - - - - - - - - - - - - -``` - - - -##### **Avatar (Body Threads Thread Card)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Name (Body Threads Thread Card)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Unread (Body Threads Thread Card)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Seen Dropdown (Body Threads Thread Card)** - - - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Trigger (Body Threads Thread Card Seen Dropdown)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Content (Body Threads Thread Card Seen Dropdown)** - - - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Title (Body Threads Thread Card Seen Dropdown Content)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Items (Body Threads Thread Card Seen Dropdown Content)** - - - - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -##### **Item (Body Threads Thread Card Seen Dropdown Content Items)** - - - - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -##### **Time (Body Threads Thread Card Seen Dropdown Content Items Item)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Name (Body Threads Thread Card Seen Dropdown Content Items Item)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Avatar (Body Threads Thread Card Seen Dropdown Content Items Item)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Time (Body Threads Thread Card)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Device Type (Body Threads Thread Card)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Edited (Body Threads Thread Card)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Options (Body Threads Thread Card)** - - - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Trigger (Body Threads Thread Card Options)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Content (Body Threads Thread Card Options)** - - - - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -##### **Mark As Read (Body Threads Thread Card Options Content)** - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Edit (Body Threads Thread Card Options Content)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Delete (Body Threads Thread Card Options Content)** - - - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Thread (Body Threads Thread Card Options Content Delete)** - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Comment (Body Threads Thread Card Options Content Delete)** - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Message (Body Threads Thread Card)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **ShowMore (Body Threads Thread Card Message)** - -Visible when message truncation is enabled and the message exceeds the line limit. Clicking expands the message. - - - -```jsx - - - -``` - - -```html - - - - - -``` - - - -##### **ShowLess (Body Threads Thread Card Message)** - -Visible when an expanded truncated message is shown. Clicking collapses it back. - - - -```jsx - - - -``` - - -```html - - - - - -``` - - - -##### **EditComposer (Body Threads Thread Card)** - -Conditionally renders when a comment is being edited. - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Reaction Tool (Body Threads Thread Card)** - - - - -Use `excludeReactionIds` to hide specific reactions from the reaction picker. - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Reactions (Body Threads Thread Card)** - - - - -Use `excludeReactionIds` to hide specific reactions from display. - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **ReactionPin (Body Threads Thread Card)** - -Display a specific reaction as a pinned standalone element. - - - -```jsx - - - -``` - - -```html - - - -``` - - - -**Props**: -- `reactionId` ([`IVeltCommentDialogThreadCardReactionPinProps`](/api-reference/sdk/models/data-models#iveltcommentdialogthreadcardreactionpinprops)): Unique identifier of the reaction to pin and display - -##### **Attachments (Body Threads Thread Card)** - - - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Image (Body Threads Thread Card Attachments)** - - - - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -##### **Preview (Body Threads Thread Card Attachments Image)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Delete (Body Threads Thread Card Attachments Image)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Download (Body Threads Thread Card Attachments Image)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Other (Body Threads Thread Card Attachments)** - - - - - -```jsx - - - - - - - - - -``` - - -```html - - - - - - - - - -``` - - - -##### **Delete (Body Threads Thread Card Attachments Other)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Download (Body Threads Thread Card Attachments Other)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Icon (Body Threads Thread Card Attachments Other)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Name (Body Threads Thread Card Attachments Other)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Size (Body Threads Thread Card Attachments Other)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Recordings (Body Threads Thread Card)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Autocomplete Chip Tooltip (Body Threads Thread Card)** - - - - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -##### **Icon (Body Threads Thread Card Autocomplete Chip Tooltip)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Name (Body Threads Thread Card Autocomplete Chip Tooltip)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Description (Body Threads Thread Card Autocomplete Chip Tooltip)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - - -##### **Reactions Panel (Body Threads Thread Card)** - - - - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -##### **Items (Body Threads Thread Card Reactions Panel)** - - - - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -##### **Item (Body Threads Thread Card Reactions Panel Items)** - - - - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -##### **Emoji (Body Threads Thread Card Reactions Panel Items Item)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Reaction Pin (Body Threads Thread Card)** - - - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Emoji (Body Threads Thread Card Reaction Pin)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Count (Body Threads Thread Card Reaction Pin)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Reaction Pin Tooltip (Body Threads Thread Card)** - - - - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -##### **Users (Body Threads Thread Card Reaction Pin Tooltip)** - - - - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -##### **User (Body Threads Thread Card Reaction Pin Tooltip Users)** - - - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Avatar (Body Threads Thread Card Reaction Pin Tooltip Users User)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Name (Body Threads Thread Card Reaction Pin Tooltip Users User)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Reaction Tool (Body Threads Thread Card)** - - - - - -```jsx - - - {/* Your custom element */} - - -``` - - -```html - - - - - -``` - - - -##### **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. - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Assign Button (Body Threads Thread Card)** - -The Assign Button component allows you to customize the assign button that appears on individual comment thread cards. - - - -```jsx - - - -``` - - -```html - - - -``` - - - - -#### MoreReply (Body Threads) - - - - -The expander row that splits the "Show N replies…" divider into its count and its pluralized noun. Compose the label as `Show` + `Count` + `Text` (e.g. "Show 1 reply", "Show 3 replies"). - - - -```jsx - - - Show - - - - -``` - - -```html - - - Show - - - - -``` - - - -##### **Count (Body Threads MoreReply)** - -Renders the number of hidden replies (`annotation.comments.length - 2`, clamped to ≥ 0; e.g. `1` for a 3-comment thread). - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Text (Body Threads MoreReply)** - -Renders the pluralized noun — `reply` when exactly one reply is hidden, otherwise `replies`. - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### Reply Avatars (Body) - - - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -#### List (Body Reply Avatars) - - - - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -##### **Item (Body Reply Avatars List)** - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Remaining Count (Body Reply Avatars) - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### Toggle Reply (Body) - - - - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -#### Icon (Body Toggle Reply) - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Count (Body Toggle Reply) - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Text (Body Toggle Reply) - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### 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. - - - -```jsx - - - -``` - - -```html - - - -``` - - - -## Composer - - - - - -```jsx - - - - - - - - - - - - - - - - - - - - -``` - - -```html - - - - - - - - - - - - - - - - - - - - -``` - - - -### Avatar (Composer) - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### Attachments (Composer) - - - - - -```jsx - - - - - - - - -``` - - -```html - - - - - - - - -``` - - - -#### Selected (Composer Attachments) - - - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Image (Composer Attachments Selected)** - - - - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -##### **Other (Composer Attachments Selected)** - - - - - -```jsx - - - - - - - - - -``` - - -```html - - - - - - - - - -``` - - - -#### Invalid (Composer Attachments) - - - - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -##### **Item (Composer Attachments Invalid)** - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -##### **Download (Composer Attachments Image)** - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Download (Composer Attachments Other)** - - -```jsx - - - -``` - - -```html - - - -``` - - - -### Recordings (Composer) - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### Input (Composer) - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### Format Toolbar (Composer) - -The format toolbar contains text formatting buttons (bold, italic, underline, strikethrough). - - - -```jsx - - - - - - - - -``` - - -```html - - - - - - - - -``` - - - -#### Button (Composer Format Toolbar) - -Individual format button with type: `bold`, `italic`, `underline`, or `strikethrough`. - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### Action Button (Composer) - -Supports types: `autocomplete`, `file`, `attachments`, `audio`, `video`, `screen`, `format`, `submit`. - - - -```jsx - - - - - - - - - - -``` - - -```html - - - - - - - - - - -``` - - - -### Assign User (Composer) - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### Visibility Dropdown (Composer) -{/* Image pending */} - - -```jsx - - - - - - - - - - - - -``` - - -```html - - - - - - - - - - - - -``` - - - -#### Trigger (Composer Visibility Dropdown) - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Label (Composer Visibility Dropdown Trigger)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Icon (Composer Visibility Dropdown Trigger)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Content (Composer Visibility Dropdown) - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Public (Composer Visibility Dropdown Content)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Private (Composer Visibility Dropdown Content)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### Autocomplete Option (Composer) - - -For standalone autocomplete primitive components (e.g., `VeltAutocompleteOption`, `VeltAutocompleteChip`), see the [Autocomplete Primitives](/ui-customization/features/async/comments/comment-dialog/primitives#veltautocomplete) section. - - - - - - - -```jsx - - - - - - - - -``` - - -```html - - - - - - - - -``` - - - -#### Icon (Composer Autocomplete Option) - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Name (Composer Autocomplete Option) - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Description (Composer Autocomplete Option) - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Error Icon (Composer Autocomplete Option) - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### Autocomplete Group Option (Composer) - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -## Visibility Banner - -Displays below the composer to let users set per-comment visibility. The `selectedVisibility` data variable exposes the current [`CommentVisibilityOptionType`](/api-reference/sdk/models/data-models#commentvisibilityoptiontype). - - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -### Icon (Visibility Banner) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### Text (Visibility Banner) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### Dropdown (Visibility Banner) - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -#### Trigger (Visibility Banner Dropdown) - - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -##### **Label (Visibility Banner Dropdown Trigger)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **AvatarList (Visibility Banner Dropdown Trigger)** - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -**Item (Visibility Banner Dropdown Trigger AvatarList)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -**RemainingCount (Visibility Banner Dropdown Trigger AvatarList)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Icon (Visibility Banner Dropdown Trigger)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Content (Visibility Banner Dropdown) - - - -```jsx - - - - - - - - - - -``` - - -```html - - - - - - - - - - -``` - - - -##### **Item (Visibility Banner Dropdown Content)** - -Accepts `type`: `'public' | 'org-users' | 'personal' | 'selected-people'`. - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -**Icon (Visibility Banner Dropdown Content Item)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -**Label (Visibility Banner Dropdown Content Item)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **UserPicker (Visibility Banner Dropdown Content)** - - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -**Search (Visibility Banner Dropdown Content UserPicker)** - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -**Icon (Visibility Banner Dropdown Content UserPicker Search)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -**Input (Visibility Banner Dropdown Content UserPicker Search)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -**Header (Visibility Banner Dropdown Content UserPicker)** - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -**Count (Visibility Banner Dropdown Content UserPicker Header)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -**UnselectAll (Visibility Banner Dropdown Content UserPicker Header)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -**Item (Visibility Banner Dropdown Content UserPicker)** - - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -**Avatar (Visibility Banner Dropdown Content UserPicker Item)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -**Info (Visibility Banner Dropdown Content UserPicker Item)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -**Check (Visibility Banner Dropdown Content UserPicker Item)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **OrgPicker (Visibility Banner Dropdown Content)** - -The "Selected Teams" picker — the team analogue of the user ("Selected People") picker; lets users scope an `organizationPrivate` comment to specific teams. Appears automatically in the visibility banner once a team list is provided via `contactElement.updateOrgList()`. - - - -```jsx - - - - - - -``` - - -```html - - - -``` - - - -## All Comment - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -## Approve - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -## Sign In - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -## Upgrade - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -## Suggestion Action - - - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -### Accept (Suggestion Action) - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### Reject (Suggestion Action) - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -## Agent Suggestion - - -```jsx - - - - - - - - -``` - - -```html - - - - - - - - -``` - - - -### Agent Suggestion Header - - -```jsx - - - - - - - - -``` - - -```html - - - - - - - - -``` - - - -#### Agent (Agent Suggestion Header) - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -#### Author (Agent Suggestion Header) - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -#### Avatar (Agent Suggestion Header Agent) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Avatar (Agent Suggestion Header Author) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Name (Agent Suggestion Header Agent) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Name (Agent Suggestion Header Author) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Timestamp (Agent Suggestion Header) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Menu (Agent Suggestion Header) - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Menu Trigger (Agent Suggestion Header Menu)** - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Menu Content (Agent Suggestion Header Menu)** - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -##### **Menu Content Item (Agent Suggestion Header Menu Content)** - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Icon (Agent Suggestion Header Menu Content Item)** - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Label (Agent Suggestion Header Menu Content Item)** - - -```jsx - - - -``` - - -```html - - - -``` - - - -### Agent Suggestion Body - - -```jsx - - - -``` - - -```html - - - -``` - - - -### Agent Suggestion Footer - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -#### Open Comment (Agent Suggestion Footer) - - -```jsx - - - -``` - - -```html - - - -``` - - - -### Agent Suggestion Actions - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -#### Accept (Agent Suggestion Actions) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Reject (Agent Suggestion Actions) - - -```jsx - - - -``` - - -```html - - - -``` - - - -### Agent Suggestion Banner - - -```jsx - - - - - - - - - -``` - - -```html - - - - - - - - - -``` - - - -#### Avatar (Agent Suggestion Banner) - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **User Image (Agent Suggestion Banner Avatar)** - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Status Icon (Agent Suggestion Banner Avatar)** - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Label (Agent Suggestion Banner) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Separator (Agent Suggestion Banner) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Resolver User Name (Agent Suggestion Banner) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Timestamp (Agent Suggestion Banner) - - -```jsx - - - -``` - - -```html - - - -``` - - - -## 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** -```jsx - -``` - -##### **API methods** - -```jsx -const commentElement = client.getCommentElement(); -commentElement.enableDialogShadowDOM(); -commentElement.disableDialogShadowDOM(); -``` - - - - -##### **Example** -``` - -``` - -##### **API methods** - -```jsx -const commentElement = Velt.getCommentElement(); -commentElement.enableDialogShadowDOM(); -commentElement.disableDialogShadowDOM(); -``` - - -### Dark Mode -![](/images/dark-light-mode.png) - -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** -```js - -``` - -##### **API methods** - -```jsx -const commentElement = client.getCommentElement(); -commentElement.enableDarkMode(); -commentElement.disableDarkMode(); -``` - - - - - - -##### **Example** -```js - -``` - -##### **API methods** - -```jsx -const commentElement = Velt.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. - - - -```jsx React / Next.js - - {/* This pre-defined variant will change the appearance of the Comment Dialog within Pin, Area, and Text comments only */} - - ... - - - {/* This pre-defined variant will change the appearance of the Comment Dialog within the Sidebar only */} - - ... - - - {/* If you don't use any variants, then customization will be applied to the Comment Dialog globally */} - - ... - - -``` - - -```jsx Other Frameworks - - - - - - - - - - - - - - - - - - - - - - - -``` - - diff --git a/ui-customization/features/async/comments/comment-pin/primitives.mdx b/ui-customization/features/async/comments/comment-pin/primitives.mdx deleted file mode 100644 index 0a417a737..000000000 --- a/ui-customization/features/async/comments/comment-pin/primitives.mdx +++ /dev/null @@ -1,149 +0,0 @@ ---- -title: Comment Pin Primitives -description: Primitive-based components for building custom Comment Pin interfaces with maximum flexibility. - ---- - - -Explore primitives interactively in our [Storybook](https://storybook.velt.dev/). - - - -Comment Pin primitives can be used standalone: pass `annotationId` (React) or `annotation-id` (HTML) to load annotation data directly without a parent root component. - - -### VeltCommentPinNumber - -Number badge displayed on the comment pin. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentPinIndex - -Index label displayed on the comment pin. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentPinTriangle - -Triangle pointer element on the comment pin. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentPinPrivateCommentIndicator - -Indicator shown on the pin when the comment is private. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentPinGhostCommentIndicator - -Indicator shown on the pin when the comment is a ghost comment. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltCommentPinUnreadCommentIndicator - -Indicator shown on the pin when the comment has unread replies. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - \ No newline at end of file diff --git a/ui-customization/features/async/comments/comment-pin/wireframes.mdx b/ui-customization/features/async/comments/comment-pin/wireframes.mdx deleted file mode 100644 index 5a5ddc3d4..000000000 --- a/ui-customization/features/async/comments/comment-pin/wireframes.mdx +++ /dev/null @@ -1,252 +0,0 @@ ---- -title: Comment Pin Wireframes -description: Wireframe components for building custom Comment Pin interfaces with maximum flexibility. - ---- - -We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components. - - -## VeltCommentPinWireframe -![](/images/customization/comments/comment-pin/comment-pin-overview.png) - - -```jsx - - - - - - - - - - -``` - - -```html - - - - - - - - - - -``` - - - -## GhostCommentIndicator -![](/images/customization/comments/comment-pin/comment-pin-ghost.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -## Index -![](/images/customization/comments/comment-pin/comment-pin-index.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -## Number -The annotation number displays on comment pins, 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. - - - -```jsx - - - -``` - - -```html - - - -``` - - - -## PrivateCommentIndicator -![](/images/customization/comments/comment-pin/comment-pin-private.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -## Triangle -![](/images/customization/comments/comment-pin/comment-pin-triangle.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -## UnreadCommentIndicator -![](/images/customization/comments/comment-pin/comment-pin-unread.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -## 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` - - - - -**Using Props:** -```jsx - -``` - -**Using API:** -```jsx -const commentElement = client.getCommentElement(); -commentElement.enablePinShadowDOM(); -commentElement.disablePinShadowDOM(); -``` - - - - -**Using Props:** -```jsx - -``` - -**Using API:** -```jsx -const commentElement = Velt.getCommentElement(); -commentElement.enablePinShadowDOM(); -commentElement.disablePinShadowDOM(); -``` - - - -### Dark Mode -![](/images/customization/velt-comment-pin-1.png) - -![](/images/customization/velt-comment-pin-2.png) -By default, all components are in Light Mode, but there are several properties and methods to enable Dark Mode. - -`Default: false` - - - - -**Using Props:** -```js - -``` - -**Using API:** -```jsx -const commentElement = client.getCommentElement(); -commentElement.enableDarkMode(); -commentElement.disableDarkMode(); -``` - - - - -**Using Props:** -```html - -``` - -**Using API:** -```jsx -const commentElement = Velt.getCommentElement(); -commentElement.enableDarkMode(); -commentElement.disableDarkMode(); -``` - - - -### Variants -- Define variants for the `Velt Comment Pin` component. This is useful for customizing how the pin looks on different elements like charts, tables, etc. -- Learn more about how to define and use variants [here](/ui-customization/layout#variants). - - - - ```jsx - - ``` - - - ```html - - ``` - - \ No newline at end of file diff --git a/ui-customization/features/async/comments/comment-player-timeline.mdx b/ui-customization/features/async/comments/comment-player-timeline.mdx deleted file mode 100644 index 450ceac0d..000000000 --- a/ui-customization/features/async/comments/comment-player-timeline.mdx +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: "Comment Player Timeline" ---- - -![](/images/customization/comments/comment-player-timeline/comment-player-timeline.png) - -## 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` - - - - -```jsx - -``` - - - - - -```jsx - -``` - - - - \ No newline at end of file diff --git a/ui-customization/features/async/comments/comment-sidebar-button/primitives.mdx b/ui-customization/features/async/comments/comment-sidebar-button/primitives.mdx deleted file mode 100644 index dae8d4904..000000000 --- a/ui-customization/features/async/comments/comment-sidebar-button/primitives.mdx +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: Comments Sidebar Button Primitives -description: Primitive-based components for building custom Comments Sidebar Button interfaces with maximum flexibility. ---- - - -Explore primitives interactively in our [Storybook](https://storybook.velt.dev/). - - - -Sidebar Button primitives use the shared `default` context, so standalone usage renders real comment counts and unread indicators without a parent root component. - - -### VeltSidebarButtonIcon - -Icon displayed within the sidebar button. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltSidebarButtonCommentsCount - -Comments count displayed within the sidebar button. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltSidebarButtonUnreadIcon - -Unread indicator icon displayed within the sidebar button. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - \ No newline at end of file diff --git a/ui-customization/features/async/comments/comment-sidebar-button/wireframe-variables.mdx b/ui-customization/features/async/comments/comment-sidebar-button/wireframe-variables.mdx deleted file mode 100644 index 39b36342b..000000000 --- a/ui-customization/features/async/comments/comment-sidebar-button/wireframe-variables.mdx +++ /dev/null @@ -1,217 +0,0 @@ ---- -title: Comment Sidebar Button Wireframe Variables -description: Template variables exposed by the Comment Sidebar Button wireframe — read them with velt-data, velt-if, and velt-class to drive dynamic content, conditional rendering, and class toggling. ---- - - - New to wireframes? Start with [UI Customization Concepts](/ui-customization/overview) and the [Template Variables](/ui-customization/template-variables) overview. - - -## Overview - -The **Comment Sidebar Button** is the standalone toolbar button that opens the [Comment Sidebar](../comment-sidebar/comment-sidebar-wireframe-variables), with built-in unread-count and total-count indicators. Variables below are available inside any `` tag via three forms: - -| You want to… | Use | Example | -|---|---|---| -| Display a value as text | `` | `` | -| Hide / show conditionally | `velt-if="{var}"` | `velt-if="{componentConfig.data.unreadCount} > 0"` | -| Toggle a CSS class | `velt-class="'cls': {var}"` | `velt-class="'sidebar-open': {globalConfig.featureState.sidebarVisible}"` | - - - This feature uses the **flat-config** access pattern — variables span three namespaces: `globalConfig.featureState.*` (cross-document), `componentConfig..*` (per-instance), and `parentLocalUIState.*` (per-render). Always use the explicit path form. - - -## Component Config - -### Global Feature State - -| Variable | Type | Description | Example | -|---|---|---|---| -| `globalConfig.featureState.sidebarVisible` | `boolean` | Linked sidebar is currently open. Drives the active state on the button. | `velt-class="'sidebar-open': {globalConfig.featureState.sidebarVisible}"` | - -### Per-instance Data - -| Variable | Type | Description | Example | -|---|---|---|---| -| `componentConfig.data.annotations` | [`CommentAnnotation`](/api-reference/sdk/models/data-models#commentannotation)`[]` \| `undefined` | All annotations in scope for this button. Length drives the total-count badge. | `` | -| `componentConfig.data.unreadCount` | `number` \| `null` | Unread-count badge value. | `` | - -### Per-instance UI State - -| Variable | Type | Description | Example | -|---|---|---|---| -| `componentConfig.uiState.showDefaultBtn` | `boolean` | Default built-in button should render. Set to `false` when a wireframe overrides the button entirely. | `velt-if="{componentConfig.uiState.showDefaultBtn}"` | -| `componentConfig.uiState.floatingMode` | `boolean` | Button is rendering in floating mode. | `velt-class="'floating': {componentConfig.uiState.floatingMode}"` | -| `componentConfig.uiState.floatingModeSidebarVisible` | `boolean` | Floating-mode sidebar is currently open. | `velt-class="'floating-open': {componentConfig.uiState.floatingModeSidebarVisible}"` | -| `componentConfig.uiState.darkMode` | `boolean` | Dark mode is active for this instance. | `velt-class="'dark': {componentConfig.uiState.darkMode}"` | -| `componentConfig.uiState.commentCountType` | `'total'` \| `'unread'` | Which count drives the badge. | `velt-class="'count-{componentConfig.uiState.commentCountType}': true"` | - -### Per-instance Local UI State - -| Variable | Type | Description | Example | -|---|---|---|---| -| `parentLocalUIState.darkMode` | `boolean` | Local dark-mode flag (host attribute). | `velt-class="'dark': {parentLocalUIState.darkMode}"` | -| `parentLocalUIState.variant` | `string` | Per-instance variant tag set on the host element. | `` | -| `parentLocalUIState.shadowDom` | `boolean` | Shadow-DOM rendering is enabled. | _Host config — set via element attribute._ | - -## Type Reference - -Types referenced by the variables above: - -| Type | Description | -|---|---| -| [`CommentAnnotation`](/api-reference/sdk/models/data-models#commentannotation) | The annotation thread (id, status, comments, from, etc.). | -| [`User`](/api-reference/sdk/models/data-models#user) | Identified end-user object (via `annotation.from`). | - -## Subcomponents - -Each subcomponent below has its own wireframe tag. - -### `sidebar-button` (root) - -The trigger button customers place in their toolbar. - -- **Public element:** `` -- **Wireframe tag:** `` -- **Children:** `sidebar-button-icon`, `sidebar-button-comments-count`, `sidebar-button-unread-icon`. - -| Property | Value | -|---|---| -| Extra variables | None — root only sees common variables. | -| Host class | `velt-sidebar-button` (always). `velt-sidebar-button--visible` / `velt-sidebar-tool-open` when `globalConfig.featureState.sidebarVisible` is true. `dark` when `darkMode` is true. `velt-tool--action-btn` (always on the inner button). `velt-sidebar-button--icon-wrapper` (around the icon). | - - - -```jsx - - - -``` - - -```html - - - -``` - - - ---- - -### `sidebar-button-icon` - -The default chat icon. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | -| Host class | `velt-tool--action-btn-icon` (on the inner SVG). | - - - -```jsx - - - -``` - - -```html - - - -``` - - - ---- - -### `sidebar-button-comments-count` - -The badge showing total or unread comment count. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | -| Host class | `action-btn-label velt-sidebar-button--comments-count` (always on the host span). | -| `shouldShow` | Default branches on `componentConfig.uiState.commentCountType` — `'total'` shows `componentConfig.data.annotations.length`; `'unread'` shows `componentConfig.data.unreadCount`. | - - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - ---- - -### `sidebar-button-unread-icon` - -The "unread dot" overlay shown when there are unread comments. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | -| Host class | `velt-sidebar-button--unread-icon` (on the inner SVG). | -| `shouldShow` | `componentConfig.data.unreadCount > 0` | - - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -## Related - -- [Comment Sidebar Button Wireframes](./wireframes) — composition reference for the wireframe tags themselves. -- [Comment Sidebar Button Primitives](./primitives) — granular components if you don't need a full wireframe. -- [Comment Sidebar Wireframe Variables](../comment-sidebar/comment-sidebar-wireframe-variables) — the sidebar that this button opens. -- [Template Variables](/ui-customization/template-variables) — overview of the `velt-data` / `velt-if` / `velt-class` system. diff --git a/ui-customization/features/async/comments/comment-sidebar-button/wireframes.mdx b/ui-customization/features/async/comments/comment-sidebar-button/wireframes.mdx deleted file mode 100644 index 71695787e..000000000 --- a/ui-customization/features/async/comments/comment-sidebar-button/wireframes.mdx +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: Comments Sidebar Button Wireframes -description: Wireframe components for building custom Comments Sidebar Button interfaces with maximum flexibility. ---- - - -We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components. - - -## VeltSidebarButtonWireframe -![](/images/sidebar-button-light.png) - - -```jsx - - - - - - - - -``` - - -```html - - - - - - - -``` - - - -### Icon -![](/images/customization/sidebar-button-icon.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -### CommentsCount -![](/images/customization/sidebar-button-count.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -### UnreadIcon - - -```jsx - - - -``` - - -```html - - - -``` - - - -## 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 -```jsx - - -{/* If you use floating mode, you can turn off the shadow dom for the sidebar using this: */} - -``` - - - - -### Example -```html - - - - -``` - - -### Dark Mode -![](/images/sidebar-button-dark.png) - -By default, all components are in Light Mode, but there are several properties and methods to enable Dark Mode. - -`Default: false` - -To enable Dark Mode for sidebar button: - - - -### Example -```js - -``` - -### API methods - -```jsx -const commentElement = client.getCommentElement(); -commentElement.enableDarkMode(); -commentElement.disableDarkMode(); -``` - - - - -### Example -```js - -``` - -### API methods - -```jsx -const commentElement = Velt.getCommentElement(); -commentElement.enableDarkMode(); -commentElement.disableDarkMode(); -``` - - - - - diff --git a/ui-customization/features/async/comments/comment-sidebar-structure-v2.mdx b/ui-customization/features/async/comments/comment-sidebar-structure-v2.mdx deleted file mode 100644 index 641c0e529..000000000 --- a/ui-customization/features/async/comments/comment-sidebar-structure-v2.mdx +++ /dev/null @@ -1,193 +0,0 @@ ---- -title: "Comments Sidebar V2 — Structure" -description: "Canonical structure for the Velt Comments Sidebar V2 Wireframe. Order follows the provided JSX. Parent/child is defined ONLY by dot-path extensions. Direct children with no descendants are marked (Leaf)." ---- - -> **Conventions** -> - **React names** use `PascalCase` under the `VeltCommentsSidebarV2Wireframe` namespace. -> - **Parent/child** is determined **only** by the extension path (`A.B` → `B` is a child of `A`). Visual placement does not imply hierarchy. -> - **HTML names** mirror React 1:1 in `kebab-case`. -> - **(Leaf)** = component has no children in this wireframe. -> - **The highest parents will start with '##' as their header tag, their children will use one more '#' at each level.** - ---- - -## React - -`VeltCommentsSidebarV2Wireframe` - -### `VeltCommentsSidebarV2Wireframe.Skeleton` **(Leaf)** - ---- - -### `VeltCommentsSidebarV2Wireframe.Panel` - -#### `VeltCommentsSidebarV2Wireframe.Header` - -##### `VeltCommentsSidebarV2Wireframe.CloseButton` **(Leaf)** - -##### `VeltCommentsSidebarV2Wireframe.Search` - -- `VeltCommentsSidebarV2Wireframe.Search.Icon` **(Leaf)** -- `VeltCommentsSidebarV2Wireframe.Search.Input` **(Leaf)** - -##### `VeltCommentsSidebarV2Wireframe.FilterButton` - -- `VeltCommentsSidebarV2Wireframe.FilterButton.AppliedIcon` **(Leaf)** - -##### `VeltCommentsSidebarV2Wireframe.FilterContainer` - -- `VeltCommentsSidebarV2Wireframe.FilterContainer.Title` **(Leaf)** -- `VeltCommentsSidebarV2Wireframe.FilterContainer.GroupBy` **(Leaf)** -- `VeltCommentsSidebarV2Wireframe.FilterContainer.SectionList` - - `VeltCommentsSidebarV2Wireframe.FilterContainer.Section` - - `VeltCommentsSidebarV2Wireframe.FilterContainer.SectionLabel` **(Leaf)** - - `VeltCommentsSidebarV2Wireframe.FilterContainer.SectionField` - - `VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControl` - - `VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlChevron` **(Leaf)** - - `VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlValue` **(Leaf)** - - `VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlChipList` - - `VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlChip` **(Leaf)** - - `VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlSearch` **(Leaf)** - - `VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOptionList` - - `VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOption` - - `VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOptionCheckbox` **(Leaf)** - - `VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOptionName` **(Leaf)** - - `VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOptionCount` **(Leaf)** -- `VeltCommentsSidebarV2Wireframe.FilterContainer.ResetButton` **(Leaf)** -- `VeltCommentsSidebarV2Wireframe.FilterContainer.ApplyButton` **(Leaf)** -- `VeltCommentsSidebarV2Wireframe.FilterContainer.CloseButton` **(Leaf)** - -##### `VeltCommentsSidebarV2Wireframe.FullscreenButton` **(Leaf)** - -##### `VeltCommentsSidebarV2Wireframe.FilterDropdown` - -- `VeltCommentsSidebarV2Wireframe.FilterDropdown.Trigger` **(Leaf)** -- `VeltCommentsSidebarV2Wireframe.FilterDropdown.Content` - - `VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List` - - `VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Item` - - `VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Item.Indicator` **(Leaf)** - - `VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Item.Label` **(Leaf)** - - `VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Item.Count` **(Leaf)** - - `VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Category` - - `VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Category.Label` **(Leaf)** - - `VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Category.Content` **(Leaf)** - ---- - -#### `VeltCommentsSidebarV2Wireframe.List` - -##### `VeltCommentsSidebarV2Wireframe.ListGroupHeader` - -- `VeltCommentsSidebarV2Wireframe.ListGroupHeader.Label` **(Leaf)** -- `VeltCommentsSidebarV2Wireframe.ListGroupHeader.Count` **(Leaf)** -- `VeltCommentsSidebarV2Wireframe.ListGroupHeader.Chevron` **(Leaf)** -- `VeltCommentsSidebarV2Wireframe.ListGroupHeader.Separator` **(Leaf)** - ---- - -#### `VeltCommentsSidebarV2Wireframe.EmptyPlaceholder` - -- `VeltCommentsSidebarV2Wireframe.EmptyPlaceholder.ResetFilterButton` **(Leaf)** - ---- - -#### `VeltCommentsSidebarV2Wireframe.PageModeComposer` **(Leaf)** - ---- - -#### `VeltCommentsSidebarV2Wireframe.FocusedThread` - -- `VeltCommentsSidebarV2Wireframe.FocusedThread.BackButton` **(Leaf)** -- `VeltCommentsSidebarV2Wireframe.FocusedThread.DialogContainer` **(Leaf)** - ---- - -## HTML (1:1 mirror) - -`velt-comments-sidebar-v2-wireframe` - -### `velt-comments-sidebar-skeleton-v2-wireframe` **(Leaf)** - ---- - -### `velt-comments-sidebar-panel-v2-wireframe` - -#### `velt-comments-sidebar-header-v2-wireframe` - -- `velt-comments-sidebar-close-button-v2-wireframe` **(Leaf)** - -##### `velt-comments-sidebar-search-v2-wireframe` - -- `velt-comments-sidebar-search-v2-icon-wireframe` **(Leaf)** -- `velt-comments-sidebar-search-v2-input-wireframe` **(Leaf)** - -##### `velt-comments-sidebar-filter-button-v2-wireframe` - -- `velt-comments-sidebar-filter-button-v2-applied-icon-wireframe` **(Leaf)** - -##### `velt-comments-sidebar-filter-container-v2-wireframe` - -- `velt-comments-sidebar-filter-container-v2-title-wireframe` **(Leaf)** -- `velt-comments-sidebar-filter-container-v2-group-by-wireframe` **(Leaf)** -- `velt-comments-sidebar-filter-container-v2-section-list-wireframe` - - `velt-comments-sidebar-filter-container-v2-section-wireframe` - - `velt-comments-sidebar-filter-container-v2-section-label-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-container-v2-section-field-wireframe` - - `velt-comments-sidebar-filter-container-v2-section-control-wireframe` - - `velt-comments-sidebar-filter-container-v2-section-control-chevron-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-container-v2-section-control-value-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-container-v2-section-control-chip-list-wireframe` - - `velt-comments-sidebar-filter-container-v2-section-control-chip-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-container-v2-section-control-search-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-container-v2-section-option-list-wireframe` - - `velt-comments-sidebar-filter-container-v2-section-option-wireframe` - - `velt-comments-sidebar-filter-container-v2-section-option-checkbox-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-container-v2-section-option-name-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-container-v2-section-option-count-wireframe` **(Leaf)** -- `velt-comments-sidebar-filter-container-v2-reset-button-wireframe` **(Leaf)** -- `velt-comments-sidebar-filter-container-v2-apply-button-wireframe` **(Leaf)** -- `velt-comments-sidebar-filter-container-v2-close-button-wireframe` **(Leaf)** - -##### `velt-comments-sidebar-fullscreen-button-v2-wireframe` **(Leaf)** - -##### `velt-comments-sidebar-filter-dropdown-v2-wireframe` - -- `velt-comments-sidebar-filter-dropdown-trigger-v2-wireframe` **(Leaf)** -- `velt-comments-sidebar-filter-dropdown-content-v2-wireframe` - - `velt-comments-sidebar-filter-dropdown-content-list-v2-wireframe` - - `velt-comments-sidebar-filter-dropdown-content-list-item-v2-wireframe` - - `velt-comments-sidebar-filter-dropdown-content-list-item-indicator-v2-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-dropdown-content-list-item-label-v2-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-dropdown-content-list-item-count-v2-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-dropdown-content-list-category-v2-wireframe` - - `velt-comments-sidebar-filter-dropdown-content-list-category-label-v2-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-dropdown-content-list-category-content-v2-wireframe` **(Leaf)** - ---- - -#### `velt-comments-sidebar-list-v2-wireframe` - -##### `velt-comments-sidebar-list-group-header-v2-wireframe` - -- `velt-comments-sidebar-list-group-header-v2-label-wireframe` **(Leaf)** -- `velt-comments-sidebar-list-group-header-v2-count-wireframe` **(Leaf)** -- `velt-comments-sidebar-list-group-header-v2-chevron-wireframe` **(Leaf)** -- `velt-comments-sidebar-list-group-header-v2-separator-wireframe` **(Leaf)** - ---- - -#### `velt-comments-sidebar-empty-placeholder-v2-wireframe` - -- `velt-comments-sidebar-reset-filter-button-v2-wireframe` **(Leaf)** - ---- - -#### `velt-comments-sidebar-page-mode-composer-v2-wireframe` **(Leaf)** - ---- - -#### `velt-comments-sidebar-focused-thread-v2-wireframe` - -- `velt-comments-sidebar-focused-thread-back-button-v2-wireframe` **(Leaf)** -- `velt-comments-sidebar-focused-thread-dialog-container-v2-wireframe` **(Leaf)** diff --git a/ui-customization/features/async/comments/comment-sidebar-structure.mdx b/ui-customization/features/async/comments/comment-sidebar-structure.mdx deleted file mode 100644 index 9fd6abb91..000000000 --- a/ui-customization/features/async/comments/comment-sidebar-structure.mdx +++ /dev/null @@ -1,687 +0,0 @@ ---- -title: "Comments Sidebar — Structure" -description: "Canonical structure for the Velt Comments Sidebar Wireframe (React only). Order follows your provided JSX. Parent/child is defined ONLY by dot-path extensions. Direct children with no descendants are marked (Leaf)." ---- - -> **Conventions** -> - **React names** use `PascalCase` under the `VeltCommentsSidebarWireframe` namespace. -> - **Parent/child** is determined **only** by the extension path (`A.B` → `B` is a child of `A`). Visual placement (e.g., inside `Header`) does not imply hierarchy. -> - **HTML names** mirror React 1:1 in `kebab-case`. -> - **(Leaf)** = component has no children in this wireframe. -> - **The highest parents will start with '##' as their header tag, their children will use one more '#' at each level.** - ---- - -## React - -`VeltCommentsSidebarWireframe` - -### `VeltCommentsSidebarWireframe.Skeleton` **(Leaf)** - ---- - -### `VeltCommentsSidebarWireframe.Panel` **(Leaf)** - ---- - -### `VeltCommentsSidebarWireframe.Header` **(Leaf)** - ---- - -### `VeltCommentsSidebarWireframe.FullscreenButton` **(Leaf)** - ---- - -### `VeltCommentsSidebarWireframe.CloseButton` **(Leaf)** - ---- - -### `VeltCommentsSidebarWireframe.Search` **(Leaf)** - ---- - -### `VeltCommentsSidebarWireframe.ResetFilterButton` **(Leaf)** - ---- - -### `VeltCommentsSidebarWireframe.Status` - -#### `VeltCommentsSidebarWireframe.Status.Trigger` -- `VeltCommentsSidebarWireframe.Status.Trigger.Name` **(Leaf)** -- `VeltCommentsSidebarWireframe.Status.Trigger.Arrow` **(Leaf)** -- `VeltCommentsSidebarWireframe.Status.Trigger.Indicator` **(Leaf)** - -#### `VeltCommentsSidebarWireframe.Status.Content` -- `VeltCommentsSidebarWireframe.Status.Content.Item` - -##### `VeltCommentsSidebarWireframe.Status.Content.Item` -- `VeltCommentsSidebarWireframe.Status.Content.Item.Icon` **(Leaf)** -- `VeltCommentsSidebarWireframe.Status.Content.Item.Name` **(Leaf)** -- `VeltCommentsSidebarWireframe.Status.Content.Item.Count` **(Leaf)** -- `VeltCommentsSidebarWireframe.Status.Content.Item.Checkbox` - -###### `VeltCommentsSidebarWireframe.Status.Content.Item.Checkbox` -- `VeltCommentsSidebarWireframe.Status.Content.Item.Checkbox.Checked` **(Leaf)** -- `VeltCommentsSidebarWireframe.Status.Content.Item.Checkbox.Unchecked` **(Leaf)** - ---- - -### `VeltCommentsSidebarWireframe.LocationFilterDropdown` - -#### `VeltCommentsSidebarWireframe.LocationFilterDropdown.Trigger` -- `VeltCommentsSidebarWireframe.LocationFilterDropdown.Trigger.Label` **(Leaf)** - -#### `VeltCommentsSidebarWireframe.LocationFilterDropdown.Content` **(Leaf)** - ---- - -### `VeltCommentsSidebarWireframe.MinimalFilterDropdown` - -#### `VeltCommentsSidebarWireframe.MinimalFilterDropdown.Trigger` **(Leaf)** - -#### `VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content` -- `VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SortDate` **(Leaf)** -- `VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SortUnread` **(Leaf)** -- `VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.FilterAll` **(Leaf)** -- `VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.FilterUnread` **(Leaf)** -- `VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.FilterRead` **(Leaf)** -- `VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.FilterResolved` **(Leaf)** -- `VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SelectedIcon` **(Leaf)** - ---- - -### `VeltCommentsSidebarWireframe.MinimalActionsDropdown` - -#### `VeltCommentsSidebarWireframe.MinimalActionsDropdown.Trigger` **(Leaf)** - -#### `VeltCommentsSidebarWireframe.MinimalActionsDropdown.Content` -- `VeltCommentsSidebarWireframe.MinimalActionsDropdown.Content.MarkAllRead` **(Leaf)** -- `VeltCommentsSidebarWireframe.MinimalActionsDropdown.Content.MarkAllResolved` **(Leaf)** - ---- - -### `VeltCommentsSidebarWireframe.DocumentFilterDropdown` - -#### `VeltCommentsSidebarWireframe.DocumentFilterDropdown.Trigger` **(Leaf)** - -#### `VeltCommentsSidebarWireframe.DocumentFilterDropdown.Content` **(Leaf)** - ---- - -### `VeltCommentsSidebarWireframe.FilterButton` **(Leaf)** - ---- - -### `VeltCommentsSidebarWireframe.Filter` - -#### `VeltCommentsSidebarWireframe.Filter.Title` **(Leaf)** - -#### `VeltCommentsSidebarWireframe.Filter.CloseButton` **(Leaf)** - -#### `VeltCommentsSidebarWireframe.Filter.Location` -- `VeltCommentsSidebarWireframe.Filter.Location.Name` **(Leaf)** -- `VeltCommentsSidebarWireframe.Filter.Location.Search` - - `VeltCommentsSidebarWireframe.Filter.Location.Search.Tags` - - `VeltCommentsSidebarWireframe.Filter.Location.Search.Tags.Item` - - `VeltCommentsSidebarWireframe.Filter.Location.Search.Tags.Item.Name` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Location.Search.Tags.Item.Close` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Location.Search.HiddenCount` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Location.Search.Input` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Location.Search.DropdownIcon` **(Leaf)** -- `VeltCommentsSidebarWireframe.Filter.Location.Item` - - `VeltCommentsSidebarWireframe.Filter.Location.Item.Checkbox` - - `VeltCommentsSidebarWireframe.Filter.Location.Item.Checkbox.Checked` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Location.Item.Checkbox.Unchecked` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Location.Item.Name` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Location.Item.Count` **(Leaf)** -- `VeltCommentsSidebarWireframe.Filter.Location.ViewAll` **(Leaf)** - ---- - -#### `VeltCommentsSidebarWireframe.Filter.Document` -- `VeltCommentsSidebarWireframe.Filter.Document.Name` **(Leaf)** -- `VeltCommentsSidebarWireframe.Filter.Document.Search` - - `VeltCommentsSidebarWireframe.Filter.Document.Search.Tags` - - `VeltCommentsSidebarWireframe.Filter.Document.Search.Tags.Item` - - `VeltCommentsSidebarWireframe.Filter.Document.Search.Tags.Item.Name` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Document.Search.Tags.Item.Close` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Document.Search.HiddenCount` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Document.Search.Input` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Document.Search.DropdownIcon` **(Leaf)** -- `VeltCommentsSidebarWireframe.Filter.Document.Item` - - `VeltCommentsSidebarWireframe.Filter.Document.Item.Checkbox` - - `VeltCommentsSidebarWireframe.Filter.Document.Item.Checkbox.Checked` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Document.Item.Checkbox.Unchecked` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Document.Item.Name` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Document.Item.Count` **(Leaf)** -- `VeltCommentsSidebarWireframe.Filter.Document.ViewAll` **(Leaf)** - ---- - -#### `VeltCommentsSidebarWireframe.Filter.Involved` -- `VeltCommentsSidebarWireframe.Filter.Involved.Name` **(Leaf)** -- `VeltCommentsSidebarWireframe.Filter.Involved.Search` - - `VeltCommentsSidebarWireframe.Filter.Involved.Search.Tags` - - `VeltCommentsSidebarWireframe.Filter.Involved.Search.Tags.Item` - - `VeltCommentsSidebarWireframe.Filter.Involved.Search.Tags.Item.Name` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Involved.Search.Tags.Item.Close` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Involved.Search.HiddenCount` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Involved.Search.Input` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Involved.Search.DropdownIcon` **(Leaf)** -- `VeltCommentsSidebarWireframe.Filter.Involved.Item` - - `VeltCommentsSidebarWireframe.Filter.Involved.Item.Checkbox` - - `VeltCommentsSidebarWireframe.Filter.Involved.Item.Checkbox.Checked` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Involved.Item.Checkbox.Unchecked` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Involved.Item.Name` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Involved.Item.Count` **(Leaf)** - ---- - -#### `VeltCommentsSidebarWireframe.Filter.People` -- `VeltCommentsSidebarWireframe.Filter.People.Name` **(Leaf)** -- `VeltCommentsSidebarWireframe.Filter.People.Search` - - `VeltCommentsSidebarWireframe.Filter.People.Search.Tags` - - `VeltCommentsSidebarWireframe.Filter.People.Search.Tags.Item` - - `VeltCommentsSidebarWireframe.Filter.People.Search.Tags.Item.Name` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.People.Search.Tags.Item.Close` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.People.Search.HiddenCount` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.People.Search.Input` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.People.Search.DropdownIcon` **(Leaf)** -- `VeltCommentsSidebarWireframe.Filter.People.Item` - - `VeltCommentsSidebarWireframe.Filter.People.Item.Checkbox` - - `VeltCommentsSidebarWireframe.Filter.People.Item.Checkbox.Checked` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.People.Item.Checkbox.Unchecked` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.People.Item.Name` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.People.Item.Count` **(Leaf)** - ---- - -#### `VeltCommentsSidebarWireframe.Filter.Tagged` -- `VeltCommentsSidebarWireframe.Filter.Tagged.Name` **(Leaf)** -- `VeltCommentsSidebarWireframe.Filter.Tagged.Search` - - `VeltCommentsSidebarWireframe.Filter.Tagged.Search.Tags` - - `VeltCommentsSidebarWireframe.Filter.Tagged.Search.Tags.Item` - - `VeltCommentsSidebarWireframe.Filter.Tagged.Search.Tags.Item.Name` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Tagged.Search.Tags.Item.Close` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Tagged.Search.HiddenCount` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Tagged.Search.Input` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Tagged.Search.DropdownIcon` **(Leaf)** -- `VeltCommentsSidebarWireframe.Filter.Tagged.Item` - - `VeltCommentsSidebarWireframe.Filter.Tagged.Item.Checkbox` - - `VeltCommentsSidebarWireframe.Filter.Tagged.Item.Checkbox.Checked` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Tagged.Item.Checkbox.Unchecked` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Tagged.Item.Name` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Tagged.Item.Count` **(Leaf)** - ---- - -#### `VeltCommentsSidebarWireframe.Filter.Assigned` -- `VeltCommentsSidebarWireframe.Filter.Assigned.Name` **(Leaf)** -- `VeltCommentsSidebarWireframe.Filter.Assigned.Search` - - `VeltCommentsSidebarWireframe.Filter.Assigned.Search.Tags` - - `VeltCommentsSidebarWireframe.Filter.Assigned.Search.Tags.Item` - - `VeltCommentsSidebarWireframe.Filter.Assigned.Search.Tags.Item.Name` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Assigned.Search.Tags.Item.Close` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Assigned.Search.HiddenCount` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Assigned.Search.Input` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Assigned.Search.DropdownIcon` **(Leaf)** -- `VeltCommentsSidebarWireframe.Filter.Assigned.Item` - - `VeltCommentsSidebarWireframe.Filter.Assigned.Item.Checkbox` - - `VeltCommentsSidebarWireframe.Filter.Assigned.Item.Checkbox.Checked` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Assigned.Item.Checkbox.Unchecked` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Assigned.Item.Name` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Assigned.Item.Count` **(Leaf)** - ---- - -#### `VeltCommentsSidebarWireframe.Filter.Custom` -- `VeltCommentsSidebarWireframe.Filter.Custom.Name` **(Leaf)** -- `VeltCommentsSidebarWireframe.Filter.Custom.Search` - - `VeltCommentsSidebarWireframe.Filter.Custom.Search.Tags` - - `VeltCommentsSidebarWireframe.Filter.Custom.Search.Tags.Item` - - `VeltCommentsSidebarWireframe.Filter.Custom.Search.Tags.Item.Name` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Custom.Search.Tags.Item.Close` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Custom.Search.HiddenCount` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Custom.Search.Input` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Custom.Search.DropdownIcon` **(Leaf)** -- `VeltCommentsSidebarWireframe.Filter.Custom.Item` - - `VeltCommentsSidebarWireframe.Filter.Custom.Item.Checkbox` - - `VeltCommentsSidebarWireframe.Filter.Custom.Item.Checkbox.Checked` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Custom.Item.Checkbox.Unchecked` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Custom.Item.Name` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Custom.Item.Count` **(Leaf)** - ---- - -#### `VeltCommentsSidebarWireframe.Filter.Category` -- `VeltCommentsSidebarWireframe.Filter.Category.Name` **(Leaf)** -- `VeltCommentsSidebarWireframe.Filter.Category.Search` - - `VeltCommentsSidebarWireframe.Filter.Category.Search.Tags` - - `VeltCommentsSidebarWireframe.Filter.Category.Search.Tags.Item` - - `VeltCommentsSidebarWireframe.Filter.Category.Search.Tags.Item.Name` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Category.Search.Tags.Item.Close` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Category.Search.HiddenCount` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Category.Search.Input` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Category.Search.DropdownIcon` **(Leaf)** -- `VeltCommentsSidebarWireframe.Filter.Category.Item` - - `VeltCommentsSidebarWireframe.Filter.Category.Item.Checkbox` - - `VeltCommentsSidebarWireframe.Filter.Category.Item.Checkbox.Checked` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Category.Item.Checkbox.Unchecked` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Category.Item.Name` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Category.Item.Count` **(Leaf)** - ---- - -#### `VeltCommentsSidebarWireframe.Filter.Priority` -- `VeltCommentsSidebarWireframe.Filter.Priority.Name` **(Leaf)** -- `VeltCommentsSidebarWireframe.Filter.Priority.Search` - - `VeltCommentsSidebarWireframe.Filter.Priority.Search.Tags` - - `VeltCommentsSidebarWireframe.Filter.Priority.Search.Tags.Item` - - `VeltCommentsSidebarWireframe.Filter.Priority.Search.Tags.Item.Name` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Priority.Search.Tags.Item.Close` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Priority.Search.HiddenCount` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Priority.Search.Input` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Priority.Search.DropdownIcon` **(Leaf)** -- `VeltCommentsSidebarWireframe.Filter.Priority.Item` - - `VeltCommentsSidebarWireframe.Filter.Priority.Item.Checkbox` - - `VeltCommentsSidebarWireframe.Filter.Priority.Item.Checkbox.Checked` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Priority.Item.Checkbox.Unchecked` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Priority.Item.Name` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Priority.Item.Count` **(Leaf)** - ---- - -#### `VeltCommentsSidebarWireframe.Filter.Status` -- `VeltCommentsSidebarWireframe.Filter.Status.Name` **(Leaf)** -- `VeltCommentsSidebarWireframe.Filter.Status.Search` - - `VeltCommentsSidebarWireframe.Filter.Status.Search.Tags` - - `VeltCommentsSidebarWireframe.Filter.Status.Search.Tags.Item` - - `VeltCommentsSidebarWireframe.Filter.Status.Search.Tags.Item.Name` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Status.Search.Tags.Item.Close` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Status.Search.HiddenCount` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Status.Search.Input` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Status.Search.DropdownIcon` **(Leaf)** -- `VeltCommentsSidebarWireframe.Filter.Status.Item` - - `VeltCommentsSidebarWireframe.Filter.Status.Item.Checkbox` - - `VeltCommentsSidebarWireframe.Filter.Status.Item.Checkbox.Checked` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Status.Item.Checkbox.Unchecked` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Status.Item.Name` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Status.Item.Count` **(Leaf)** - ---- - -#### `VeltCommentsSidebarWireframe.Filter.CommentType` -- `VeltCommentsSidebarWireframe.Filter.CommentType.Name` **(Leaf)** -- `VeltCommentsSidebarWireframe.Filter.CommentType.Item` - - `VeltCommentsSidebarWireframe.Filter.CommentType.Item.Checkbox` - - `VeltCommentsSidebarWireframe.Filter.CommentType.Item.Checkbox.Checked` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.CommentType.Item.Checkbox.Unchecked` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.CommentType.Item.Name` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.CommentType.Item.Count` **(Leaf)** - ---- - -#### `VeltCommentsSidebarWireframe.Filter.Versions` -- `VeltCommentsSidebarWireframe.Filter.Versions.Name` **(Leaf)** -- `VeltCommentsSidebarWireframe.Filter.Versions.Search` - - `VeltCommentsSidebarWireframe.Filter.Versions.Search.Tags` - - `VeltCommentsSidebarWireframe.Filter.Versions.Search.Tags.Item` - - `VeltCommentsSidebarWireframe.Filter.Versions.Search.Tags.Item.Name` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Versions.Search.Tags.Item.Close` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Versions.Search.HiddenCount` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Versions.Search.Input` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Versions.Search.DropdownIcon` **(Leaf)** -- `VeltCommentsSidebarWireframe.Filter.Versions.Item` - - `VeltCommentsSidebarWireframe.Filter.Versions.Item.Checkbox` - - `VeltCommentsSidebarWireframe.Filter.Versions.Item.Checkbox.Checked` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Versions.Item.Checkbox.Unchecked` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Versions.Item.Name` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Versions.Item.Count` **(Leaf)** - ---- - -#### `VeltCommentsSidebarWireframe.Filter.GroupBy` -- `VeltCommentsSidebarWireframe.Filter.GroupBy.Name` **(Leaf)** -- `VeltCommentsSidebarWireframe.Filter.GroupBy.Item` - - `VeltCommentsSidebarWireframe.Filter.GroupBy.Item.Checkbox` - - `VeltCommentsSidebarWireframe.Filter.GroupBy.Item.Checkbox.Checked` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.GroupBy.Item.Checkbox.Unchecked` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.GroupBy.Item.Name` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.GroupBy.Item.Count` **(Leaf)** - -#### `VeltCommentsSidebarWireframe.Filter.ResetButton` **(Leaf)** - -#### `VeltCommentsSidebarWireframe.Filter.DoneButton` **(Leaf)** - ---- - -### `VeltCommentsSidebarWireframe.Filter.Item` -- `VeltCommentsSidebarWireframe.Filter.Item.Checkbox` - - `VeltCommentsSidebarWireframe.Filter.Item.Checkbox.Checked` **(Leaf)** - - `VeltCommentsSidebarWireframe.Filter.Item.Checkbox.Unchecked` **(Leaf)** -- `VeltCommentsSidebarWireframe.Filter.Item.Name` **(Leaf)** -- `VeltCommentsSidebarWireframe.Filter.Item.Count` **(Leaf)** - ---- - -### `VeltCommentsSidebarWireframe.List` - -#### `VeltCommentsSidebarWireframe.List.Item` -- `VeltCommentsSidebarWireframe.List.Item.Group` - - `VeltCommentsSidebarWireframe.List.Item.Group.Name` **(Leaf)** - - `VeltCommentsSidebarWireframe.List.Item.Group.Count` **(Leaf)** - - `VeltCommentsSidebarWireframe.List.Item.Group.Arrow` **(Leaf)** -- `VeltCommentsSidebarWireframe.List.Item.Annotation` **(Leaf)** - ---- - -### `VeltCommentsSidebarWireframe.EmptyPlaceholder` **(Leaf)** - ---- - -### `VeltCommentsSidebarWireframe.PageModeComposer` **(Leaf)** - ---- - -### `VeltCommentsSidebarWireframe.FocusedThread` - -#### `VeltCommentsSidebarWireframe.FocusedThread.BackButton` **(Leaf)** - -#### `VeltCommentsSidebarWireframe.FocusedThread.DialogContainer` **(Leaf)** - ---- - -## Related (Global status dropdown alternative) - -`VeltCommentsSidebarStatusDropdownWireframe` - -### `VeltCommentsSidebarStatusDropdownWireframe.Trigger` **(Leaf)** - -### `VeltCommentsSidebarStatusDropdownWireframe.Content` **(Leaf)** - - - -## HTML (1:1 mirror) - -`velt-comments-sidebar-wireframe` - -### `velt-comment-sidebar-skeleton-wireframe` **(Leaf)** - ---- - -### `velt-comment-sidebar-panel-wireframe` - -#### `velt-comments-sidebar-header-wireframe` -- `velt-comments-sidebar-fullscreen-button-wireframe` **(Leaf)** -- `velt-comments-sidebar-close-button-wireframe` **(Leaf)** -- `velt-comments-sidebar-reset-filter-button-wireframe` **(Leaf)** -- `velt-comments-sidebar-search-wireframe` **(Leaf)** - -##### `velt-comments-sidebar-status-wireframe` -- `velt-comments-sidebar-status-dropdown-trigger-wireframe` - - `velt-comments-sidebar-status-dropdown-trigger-name-wireframe` **(Leaf)** - - `velt-comments-sidebar-status-dropdown-trigger-arrow-wireframe` **(Leaf)** - - `velt-comments-sidebar-status-dropdown-trigger-indicator-wireframe` **(Leaf)** -- `velt-comments-sidebar-status-dropdown-content-wireframe` - - `velt-comments-sidebar-status-dropdown-content-item-wireframe` - - `velt-comments-sidebar-status-dropdown-content-item-icon-wireframe` **(Leaf)** - - `velt-comments-sidebar-status-dropdown-content-item-name-wireframe` **(Leaf)** - - `velt-comments-sidebar-status-dropdown-content-item-count-wireframe` **(Leaf)** - - `velt-comments-sidebar-status-dropdown-content-item-checkbox-wireframe` - - `velt-comments-sidebar-status-dropdown-content-item-checkbox-unchecked-wireframe` **(Leaf)** - - `velt-comments-sidebar-status-dropdown-content-item-checkbox-checked-wireframe` **(Leaf)** - -##### `velt-comments-sidebar-location-filter-dropdown-wireframe` -- `velt-comments-sidebar-location-filter-dropdown-trigger-wireframe` - - `velt-comments-sidebar-location-filter-dropdown-trigger-label-wireframe` **(Leaf)** -- `velt-comments-sidebar-location-filter-dropdown-content-wireframe` **(Leaf)** - -##### `velt-comments-sidebar-minimal-filter-dropdown-wireframe` -- `velt-comments-sidebar-minimal-filter-dropdown-trigger-wireframe` **(Leaf)** -- `velt-comments-sidebar-minimal-filter-dropdown-content-wireframe` - - `velt-comments-sidebar-minimal-filter-dropdown-content-sort-date-wireframe` - - `velt-comments-sidebar-minimal-filter-dropdown-content-selected-icon-wireframe` **(Leaf)** - - `velt-comments-sidebar-minimal-filter-dropdown-content-sort-unread-wireframe` - - `velt-comments-sidebar-minimal-filter-dropdown-content-selected-icon-wireframe` **(Leaf)** - - `velt-comments-sidebar-minimal-filter-dropdown-content-filter-all-wireframe` - - `velt-comments-sidebar-minimal-filter-dropdown-content-selected-icon-wireframe` **(Leaf)** - - `velt-comments-sidebar-minimal-filter-dropdown-content-filter-unread-wireframe` - - `velt-comments-sidebar-minimal-filter-dropdown-content-selected-icon-wireframe` **(Leaf)** - - `velt-comments-sidebar-minimal-filter-dropdown-content-filter-read-wireframe` - - `velt-comments-sidebar-minimal-filter-dropdown-content-selected-icon-wireframe` **(Leaf)** - - `velt-comments-sidebar-minimal-filter-dropdown-content-filter-resolved-wireframe` - - `velt-comments-sidebar-minimal-filter-dropdown-content-selected-icon-wireframe` **(Leaf)** - -##### `velt-comments-sidebar-minimal-actions-dropdown-wireframe` -- `velt-comments-sidebar-minimal-actions-dropdown-trigger-wireframe` **(Leaf)** -- `velt-comments-sidebar-minimal-actions-dropdown-content-wireframe` - - `velt-comments-sidebar-minimal-actions-dropdown-content-mark-all-read-wireframe` **(Leaf)** - - `velt-comments-sidebar-minimal-actions-dropdown-content-mark-all-resolved-wireframe` **(Leaf)** - -##### `velt-comments-sidebar-document-filter-dropdown-wireframe` -- `velt-comments-sidebar-document-filter-dropdown-trigger-wireframe` **(Leaf)** -- `velt-comments-sidebar-document-filter-dropdown-content-wireframe` - - `velt-comments-sidebar-filter-document-wireframe` **(Leaf)** - -- `velt-comments-sidebar-filter-button-wireframe` **(Leaf)** - ---- - -#### `velt-comments-sidebar-filter-wireframe` -- `velt-comments-sidebar-filter-title-wireframe` **(Leaf)** -- `velt-comments-sidebar-filter-close-button-wireframe` **(Leaf)** - -##### `velt-comments-sidebar-filter-location-wireframe` -- `velt-comments-sidebar-filter-name-wireframe` **(Leaf)** -- `velt-comments-sidebar-filter-search-wireframe` - - `velt-comments-sidebar-filter-search-tags-wireframe` - - `velt-comments-sidebar-filter-search-tags-item-wireframe` - - `velt-comments-sidebar-filter-search-tags-item-name-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-search-tags-item-close-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-search-hidden-count-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-search-input-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-search-dropdown-icon-wireframe` **(Leaf)** -- `velt-comments-sidebar-filter-item-wireframe` - - `velt-comments-sidebar-filter-item-checkbox-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-item-name-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-item-count-wireframe` **(Leaf)** -- `velt-comments-sidebar-filter-view-all-wireframe` **(Leaf)** - -##### `velt-comments-sidebar-filter-document-wireframe` -- `velt-comments-sidebar-filter-name-wireframe` **(Leaf)** -- `velt-comments-sidebar-filter-search-wireframe` - - `velt-comments-sidebar-filter-search-tags-wireframe` - - `velt-comments-sidebar-filter-search-tags-item-wireframe` - - `velt-comments-sidebar-filter-search-tags-item-name-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-search-tags-item-close-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-search-hidden-count-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-search-input-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-search-dropdown-icon-wireframe` **(Leaf)** -- `velt-comments-sidebar-filter-item-wireframe` - - `velt-comments-sidebar-filter-item-checkbox-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-item-name-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-item-count-wireframe` **(Leaf)** -- `velt-comments-sidebar-filter-view-all-wireframe` **(Leaf)** - -##### `velt-comments-sidebar-filter-involved-wireframe` -- `velt-comments-sidebar-filter-name-wireframe` **(Leaf)** -- `velt-comments-sidebar-filter-search-wireframe` - - `velt-comments-sidebar-filter-search-tags-wireframe` - - `velt-comments-sidebar-filter-search-tags-item-wireframe` - - `velt-comments-sidebar-filter-search-tags-item-name-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-search-tags-item-close-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-search-hidden-count-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-search-input-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-search-dropdown-icon-wireframe` **(Leaf)** -- `velt-comments-sidebar-filter-item-wireframe` - - `velt-comments-sidebar-filter-item-checkbox-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-item-name-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-item-count-wireframe` **(Leaf)** - -##### `velt-comments-sidebar-filter-people-wireframe` -- `velt-comments-sidebar-filter-name-wireframe` **(Leaf)** -- `velt-comments-sidebar-filter-search-wireframe` - - `velt-comments-sidebar-filter-search-tags-wireframe` - - `velt-comments-sidebar-filter-search-tags-item-wireframe` - - `velt-comments-sidebar-filter-search-tags-item-name-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-search-tags-item-close-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-search-hidden-count-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-search-input-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-search-dropdown-icon-wireframe` **(Leaf)** -- `velt-comments-sidebar-filter-item-wireframe` - - `velt-comments-sidebar-filter-item-checkbox-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-item-name-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-item-count-wireframe` **(Leaf)** - -##### `velt-comments-sidebar-filter-custom-wireframe` -- `velt-comments-sidebar-filter-name-wireframe` **(Leaf)** -- `velt-comments-sidebar-filter-search-wireframe` - - `velt-comments-sidebar-filter-search-tags-wireframe` - - `velt-comments-sidebar-filter-search-tags-item-wireframe` - - `velt-comments-sidebar-filter-search-tags-item-name-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-search-tags-item-close-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-search-hidden-count-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-search-input-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-search-dropdown-icon-wireframe` **(Leaf)** -- `velt-comments-sidebar-filter-item-wireframe` - - `velt-comments-sidebar-filter-item-checkbox-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-item-name-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-item-count-wireframe` **(Leaf)** - -##### `velt-comments-sidebar-filter-tagged-wireframe` -- `velt-comments-sidebar-filter-name-wireframe` **(Leaf)** -- `velt-comments-sidebar-filter-search-wireframe` - - `velt-comments-sidebar-filter-search-tags-wireframe` - - `velt-comments-sidebar-filter-search-tags-item-wireframe` - - `velt-comments-sidebar-filter-search-tags-item-name-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-search-tags-item-close-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-search-hidden-count-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-search-input-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-search-dropdown-icon-wireframe` **(Leaf)** -- `velt-comments-sidebar-filter-item-wireframe` - - `velt-comments-sidebar-filter-item-checkbox-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-item-name-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-item-count-wireframe` **(Leaf)** - -##### `velt-comments-sidebar-filter-assigned-wireframe` -- `velt-comments-sidebar-filter-name-wireframe` **(Leaf)** -- `velt-comments-sidebar-filter-search-wireframe` - - `velt-comments-sidebar-filter-search-tags-wireframe` - - `velt-comments-sidebar-filter-search-tags-item-wireframe` - - `velt-comments-sidebar-filter-search-tags-item-name-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-search-tags-item-close-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-search-hidden-count-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-search-input-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-search-dropdown-icon-wireframe` **(Leaf)** -- `velt-comments-sidebar-filter-item-wireframe` - - `velt-comments-sidebar-filter-item-checkbox-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-item-name-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-item-count-wireframe` **(Leaf)** - -##### `velt-comments-sidebar-filter-category-wireframe` -- `velt-comments-sidebar-filter-name-wireframe` **(Leaf)** -- `velt-comments-sidebar-filter-search-wireframe` - - `velt-comments-sidebar-filter-search-tags-wireframe` - - `velt-comments-sidebar-filter-search-tags-item-wireframe` - - `velt-comments-sidebar-filter-search-tags-item-name-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-search-tags-item-close-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-search-hidden-count-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-search-input-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-search-dropdown-icon-wireframe` **(Leaf)** -- `velt-comments-sidebar-filter-item-wireframe` - - `velt-comments-sidebar-filter-item-checkbox-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-item-name-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-item-count-wireframe` **(Leaf)** - -##### `velt-comments-sidebar-filter-comment-type-wireframe` -- `velt-comments-sidebar-filter-name-wireframe` **(Leaf)** -- `velt-comments-sidebar-filter-item-wireframe` - - `velt-comments-sidebar-filter-item-checkbox-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-item-name-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-item-count-wireframe` **(Leaf)** - -##### `velt-comments-sidebar-filter-priority-wireframe` -- `velt-comments-sidebar-filter-name-wireframe` **(Leaf)** -- `velt-comments-sidebar-filter-search-wireframe` - - `velt-comments-sidebar-filter-search-tags-wireframe` - - `velt-comments-sidebar-filter-search-tags-item-wireframe` - - `velt-comments-sidebar-filter-search-tags-item-name-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-search-tags-item-close-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-search-hidden-count-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-search-input-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-search-dropdown-icon-wireframe` **(Leaf)** -- `velt-comments-sidebar-filter-item-wireframe` - - `velt-comments-sidebar-filter-item-checkbox-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-item-name-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-item-count-wireframe` **(Leaf)** - -##### `velt-comments-sidebar-filter-status-wireframe` -- `velt-comments-sidebar-filter-name-wireframe` **(Leaf)** -- `velt-comments-sidebar-filter-search-wireframe` - - `velt-comments-sidebar-filter-search-tags-wireframe` - - `velt-comments-sidebar-filter-search-tags-item-wireframe` - - `velt-comments-sidebar-filter-search-tags-item-name-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-search-tags-item-close-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-search-hidden-count-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-search-input-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-search-dropdown-icon-wireframe` **(Leaf)** -- `velt-comments-sidebar-filter-item-wireframe` - - `velt-comments-sidebar-filter-item-checkbox-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-item-name-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-item-count-wireframe` **(Leaf)** - -##### `velt-comments-sidebar-filter-versions-wireframe` -- `velt-comments-sidebar-filter-name-wireframe` **(Leaf)** -- `velt-comments-sidebar-filter-search-wireframe` - - `velt-comments-sidebar-filter-search-tags-wireframe` - - `velt-comments-sidebar-filter-search-tags-item-wireframe` - - `velt-comments-sidebar-filter-search-tags-item-name-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-search-tags-item-close-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-search-hidden-count-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-search-input-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-search-dropdown-icon-wireframe` **(Leaf)** -- `velt-comments-sidebar-filter-item-wireframe` - - `velt-comments-sidebar-filter-item-checkbox-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-item-name-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-item-count-wireframe` **(Leaf)** - -##### `velt-comments-sidebar-filter-group-by-wireframe` -- `velt-comments-sidebar-filter-name-wireframe` **(Leaf)** -- `velt-comments-sidebar-filter-item-wireframe` - - `velt-comments-sidebar-filter-item-checkbox-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-item-name-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-item-count-wireframe` **(Leaf)** -- `velt-comments-sidebar-filter-reset-button-wireframe` **(Leaf)** -- `velt-comments-sidebar-filter-done-button-wireframe` **(Leaf)** - ---- - -#### `velt-comments-sidebar-list-wireframe` -- `velt-comments-sidebar-list-item-wireframe` - - `velt-comments-sidebar-list-item-group-wireframe` - - `velt-comments-sidebar-list-item-group-name-wireframe` **(Leaf)** - - `velt-comments-sidebar-list-item-group-count-wireframe` **(Leaf)** - - `velt-comments-sidebar-list-item-group-arrow-wireframe` **(Leaf)** - - `velt-comments-sidebar-list-item-annotation-wireframe` **(Leaf)** - -#### `velt-comments-sidebar-empty-placeholder-wireframe` **(Leaf)** - -#### `velt-comments-sidebar-page-mode-composer-wireframe` **(Leaf)** - ---- - -### `velt-comments-sidebar-focused-thread-wireframe` -- `velt-comments-sidebar-focused-thread-back-button-wireframe` **(Leaf)** -- `velt-comments-sidebar-focused-thread-dialog-container-wireframe` **(Leaf)** - ---- - -## Common Filter Item (Reusable) - -`velt-comments-sidebar-filter-item-wireframe` -- `velt-comments-sidebar-filter-item-checkbox-wireframe` - - `velt-comments-sidebar-filter-item-checkbox-checked-wireframe` **(Leaf)** - - `velt-comments-sidebar-filter-item-checkbox-unchecked-wireframe` **(Leaf)** -- `velt-comments-sidebar-filter-item-name-wireframe` **(Leaf)** -- `velt-comments-sidebar-filter-item-count-wireframe` **(Leaf)** - diff --git a/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-components.mdx b/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-components.mdx deleted file mode 100644 index 273aa2df2..000000000 --- a/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-components.mdx +++ /dev/null @@ -1,6553 +0,0 @@ ---- -title: "Comment Sidebar v1 Wireframes" -description: "Comment Sidebar Component." ---- - - -We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components. - - -## Overview - - - - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -## Skeleton - - - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -## Panel - - - - - - - -```jsx - - - - - - - - - - -``` - - -```html - - - - - - - - - -``` - - - -### Header (Panel) - - - - - - - -```jsx - - - - - - - - - - - - - - -``` - - -```html - - - - - - - - - - - - - - -``` - - - -#### FullscreenButton (Panel Header) - -Button to toggle full-screen mode for the Comments Sidebar. This component only appears when full-screen mode is enabled via the `fullScreen` prop or API method. Clicking it allows users to expand the sidebar to fill the entire viewport or return to normal mode. - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### CloseButton (Panel Header) - - - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Search (Panel Header) - - - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### ResetFilterButton (Panel Header) - - - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Status (Panel Header) - - - - - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Trigger (Panel Header Status)** - - - - - - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -##### **Name (Panel Header Status Trigger)** - - - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Arrow (Panel Header Status Trigger)** - - - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Indicator (Panel Header Status Trigger)** - - - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Content (Panel Header Status)** - - - - - - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -##### **Item (Panel Header Status Content)** - - - - - - - -```jsx - - - - - - - - -``` - - -```html - - - - - - - - -``` - - - -##### **Icon (Panel Header Status Content Item)** - - - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Name (Panel Header Status Content Item)** - - - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Count (Panel Header Status Content Item)** - - - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Checkbox (Panel Header Status Content Item)** - - - - - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Checked (Panel Header Status Content Item Checkbox)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Unchecked (Panel Header Status Content Item Checkbox)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### LocationFilterDropdown (Panel Header) - - - - - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Trigger (Panel Header LocationFilterDropdown)** - - - - - - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -##### **Label (Panel Header LocationFilterDropdown Trigger)** - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Content (Panel Header LocationFilterDropdown)** - - - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### MinimalFilterDropdown (Panel Header) - - - - - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Trigger (Panel Header MinimalFilterDropdown)** - - - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Content (Panel Header MinimalFilterDropdown)** - - - - - - - -```jsx - - - - - - - - - - - - -``` - - -```html - - - - - - - - - - - - -``` - - - -##### **SortDate (Panel Header MinimalFilterDropdown Content)** - - - - - - - -```jsx - - - - Sort date - - -``` - - -```html - - - - Sort by date - - -``` - - - -##### **SelectedIcon (Panel Header MinimalFilterDropdown Content SortDate)** - - -```jsx - - - Sort date - -``` - - -```html - - - Sort by date - -``` - - - -##### **SortUnread (Panel Header MinimalFilterDropdown Content)** - - - - - - - -```jsx - - - - Sort unread - - -``` - - -```html - - - - Sort by unread - - -``` - - - -##### **SelectedIcon (Panel Header MinimalFilterDropdown Content SortUnread)** - - -```jsx - - - Sort unread - -``` - - -```html - - - Sort by unread - -``` - - - -##### **FilterAll (Panel Header MinimalFilterDropdown Content)** - - - - - - - -```jsx - - - - Filter All - - -``` - - -```html - - - - Unread or Read - - -``` - - - -##### **SelectedIcon (Panel Header MinimalFilterDropdown Content FilterAll)** - - -```jsx - - - Filter All - -``` - - -```html - - - Unread or Read - -``` - - - -##### **FilterUnread (Panel Header MinimalFilterDropdown Content)** - - - - - - - -```jsx - - - - Filter unread - - -``` - - -```html - - - - Unread only - - -``` - - - -##### **SelectedIcon (Panel Header MinimalFilterDropdown Content FilterUnread)** - - -```jsx - - - Filter unread - -``` - - -```html - - - Unread only - -``` - - - -##### **FilterRead (Panel Header MinimalFilterDropdown Content)** - - - - - - - -```jsx - - - - Filter read - - -``` - - -```html - - - - Read only - - -``` - - - -##### **SelectedIcon (Panel Header MinimalFilterDropdown Content FilterRead)** - - -```jsx - - - Filter read - -``` - - -```html - - - Read only - -``` - - - -##### **FilterResolved (Panel Header MinimalFilterDropdown Content)** - - - - - - - -```jsx - - - - Filter resolved - - -``` - - -```html - - - - Resolved - - -``` - - - -##### **SelectedIcon (Panel Header MinimalFilterDropdown Content FilterResolved)** - - -```jsx - - - Filter resolved - -``` - - -```html - - - Resolved - -``` - - - -##### **FilterOpen (Panel Header MinimalFilterDropdown Content)** - - - -```jsx - - - - Filter open - - -``` - - -```html - - - - Open only - - -``` - - - -##### **SelectedIcon (Panel Header MinimalFilterDropdown Content FilterOpen)** - - -```jsx - - - Filter open - -``` - - -```html - - - Open only - -``` - - - -##### **FilterReset (Panel Header MinimalFilterDropdown Content)** - - - -```jsx - - - - Reset filters - - -``` - - -```html - - - - Reset filters - - -``` - - - -##### **SelectedIcon (Panel Header MinimalFilterDropdown Content FilterReset)** - - -```jsx - - - Reset filters - -``` - - -```html - - - Reset filters - -``` - - - -#### MinimalActionsDropdown (Panel Header) - - - - - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Trigger (Panel Header MinimalActionsDropdown)** - - - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Content (Panel Header MinimalActionsDropdown)** - - - - - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **MarkAllRead (Panel Header MinimalActionsDropdown Content)** - - - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **MarkAllResolved (Panel Header MinimalActionsDropdown Content)** - - - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### DocumentFilterDropdown (Panel Header) - - - - - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Trigger (Panel Header DocumentFilterDropdown)** - - - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Content (Panel Header DocumentFilterDropdown)** - - - - - - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - - -##### **Document (Panel Header DocumentFilterDropdown Content)** - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### FilterButton (Panel Header) - - - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### Filter (Panel) - - - - - -```jsx - - - - - - - - - - - - - - - - - - - - - -``` - - -```html - - - - - - - - - - - - - - - - - - - - - -``` - - - -#### Title (Panel Filter) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### CloseButton (Panel Filter) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Location (Panel Filter) - -Location filter component in the comments sidebar panel filter - - - -```jsx - - - - - - - - -``` - - -```html - - - - - - - - -``` - - - -##### **Name (Panel Filter Location)** - -Name component within the location filter - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Search (Panel Filter Location)** - -Search component within the location filter - - - -```jsx - - - - - - - - -``` - - -```html - - - - - - - - -``` - - - -##### **Tags (Panel Filter Location Search)** - -Tags component within the location filter search - - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -##### **Item (Panel Filter Location Search Tags)** - -Item component within the location filter search tags - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **HiddenCount (Panel Filter Location Search)** - -Hidden count component within the location filter search - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Input (Panel Filter Location Search)** - -Input component within the location filter search - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **DropdownIcon (Panel Filter Location Search)** - -Dropdown icon component within the location filter search - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Item (Panel Filter Location)** - -Item component within the location filter - - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -##### **Checkbox (Panel Filter Location Item)** - -Checkbox component within the location filter item - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Checked (Panel Filter Location Item Checkbox)** - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Unchecked (Panel Filter Location Item Checkbox)** - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Name (Panel Filter Location Item)** - -Name component within the location filter item - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Count (Panel Filter Location Item)** - -Count component within the location filter item - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **ViewAll (Panel Filter Location)** - -View all component within the location filter - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Document (Panel Filter) - -Document filter component in the comments sidebar panel filter - - - -```jsx - - - - - - - - -``` - - -```html - - - - - - - - -``` - - - -##### **Name (Panel Filter Document)** - -Name component within the document filter - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Search (Panel Filter Document)** - -Search component within the document filter - - - -```jsx - - - - - - - - -``` - - -```html - - - - - - - - -``` - - - -##### **Tags (Panel Filter Document Search)** - -Tags component within the document filter search - - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -##### **Item (Panel Filter Document Search Tags)** - -Item component within the document filter search tags - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **HiddenCount (Panel Filter Document Search)** - -Hidden count component within the document filter search - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Input (Panel Filter Document Search)** - -Input component within the document filter search - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **DropdownIcon (Panel Filter Document Search)** - -Dropdown icon component within the document filter search - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Item (Panel Filter Document)** - -Item component within the document filter - - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -##### **Checkbox (Panel Filter Document Item)** - -Checkbox component within the document filter item - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Checked (Panel Filter Document Item Checkbox)** - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Unchecked (Panel Filter Document Item Checkbox)** - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Name (Panel Filter Document Item)** - -Name component within the document filter item - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Count (Panel Filter Document Item)** - -Count component within the document filter item - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **ViewAll (Panel Filter Document)** - -View all component within the document filter - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Involved (Panel Filter) - -Involved filter component in the comments sidebar panel filter - - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -##### **Name (Panel Filter Involved)** - -Name component within the involved filter - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Search (Panel Filter Involved)** - -Search component within the involved filter - - - -```jsx - - - - - - - - -``` - - -```html - - - - - - - - -``` - - - -##### **Tags (Panel Filter Involved Search)** - -Tags component within the involved filter search - - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -##### **Item (Panel Filter Involved Search Tags)** - -Item component within the involved filter search tags - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **HiddenCount (Panel Filter Involved Search)** - -Hidden count component within the involved filter search - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Input (Panel Filter Involved Search)** - -Input component within the involved filter search - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **DropdownIcon (Panel Filter Involved Search)** - -Dropdown icon component within the involved filter search - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Item (Panel Filter Involved)** - -Item component within the involved filter - - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -##### **Checkbox (Panel Filter Involved Item)** - -Checkbox component within the involved filter item - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Checked (Panel Filter Involved Item Checkbox)** - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Unchecked (Panel Filter Involved Item Checkbox)** - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Name (Panel Filter Involved Item)** - -Name component within the involved filter item - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Count (Panel Filter Involved Item)** - -Count component within the involved filter item - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### People (Panel Filter) - -People filter component in the comments sidebar panel filter - - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -##### **Name (Panel Filter People)** - - -People filter component in the comments sidebar panel filter - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Search (Panel Filter People)** - - -People filter component in the comments sidebar panel filter - - - -```jsx - - - - - - - - -``` - - -```html - - - - - - - - -``` - - - -##### **Tags (Panel Filter People Search)** - -People filter component in the comments sidebar panel filter - - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -##### **Item (Panel Filter People Search Tags)** - -People filter component in the comments sidebar panel filter - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Name (Panel Filter People Search Tags Item)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Close (Panel Filter People Search Tags Item)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **HiddenCount (Panel Filter People Search)** - -People filter component in the comments sidebar panel filter - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Input (Panel Filter People Search)** - -People filter component in the comments sidebar panel filter - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **DropdownIcon (Panel Filter People Search)** - -People filter component in the comments sidebar panel filter - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Item (Panel Filter People)** - -People filter component in the comments sidebar panel filter - - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -##### **Checkbox (Panel Filter People Item)** - -People filter component in the comments sidebar panel filter - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Checked (Panel Filter People Item Checkbox)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Unchecked (Panel Filter People Item Checkbox)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Name (Panel Filter People Item)** - -People filter component in the comments sidebar panel filter - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Count (Panel Filter People Item)** - -People filter component in the comments sidebar panel filter - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Tagged (Panel Filter) - - -Tagged filter component in the comments sidebar panel filter - - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -##### **Name (Panel Filter Tagged)** - - -Name component within the tagged filter - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Search (Panel Filter Tagged)** - - -Search component within the tagged filter - - - -```jsx - - - - - - - - -``` - - -```html - - - - - - - - -``` - - - -##### **Tags (Panel Filter Tagged Search)** - - -Tags component within the tagged filter search - - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -##### **Item (Panel Filter Tagged Search Tags)** - - -Item component within the tagged filter search tags - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Name (Panel Filter Tagged Search Tags Item)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Close (Panel Filter Tagged Search Tags Item)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **HiddenCount (Panel Filter Tagged Search)** - - -Hidden count component within the tagged filter search - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Input (Panel Filter Tagged Search)** - - -Input component within the tagged filter search - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **DropdownIcon (Panel Filter Tagged Search)** - - -Dropdown icon component within the tagged filter search - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Item (Panel Filter Tagged)** - - -Item component within the tagged filter - - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -##### **Checkbox (Panel Filter Tagged Item)** - - -Checkbox component within the tagged filter item - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Checked (Panel Filter Tagged Item Checkbox)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Unchecked (Panel Filter Tagged Item Checkbox)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Name (Panel Filter Tagged Item)** - - -Name component within the tagged filter item - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Count (Panel Filter Tagged Item)** - - -Count component within the tagged filter item - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Assigned (Panel Filter) - - -Assigned filter component in the comments sidebar panel filter - - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -##### **Name (Panel Filter Assigned)** - - -Name component within the assigned filter - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Search (Panel Filter Assigned)** - - -Search component within the assigned filter - - - -```jsx - - - - - - - - -``` - - -```html - - - - - - - - -``` - - - -##### **Tags (Panel Filter Assigned Search)** - - -Tags component within the assigned filter search - - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -##### **Item (Panel Filter Assigned Search Tags)** - - -Item component within the assigned filter search tags - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Name (Panel Filter Assigned Search Tags Item)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Close (Panel Filter Assigned Search Tags Item)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **HiddenCount (Panel Filter Assigned Search)** - - -Hidden count component within the assigned filter search - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Input (Panel Filter Assigned Search)** - - -Input component within the assigned filter search - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **DropdownIcon (Panel Filter Assigned Search)** - - -Dropdown icon component within the assigned filter search - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Item (Panel Filter Assigned)** - - -Item component within the assigned filter - - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -##### **Checkbox (Panel Filter Assigned Item)** - - -Checkbox component within the assigned filter item - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Checked (Panel Filter Assigned Item Checkbox)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Unchecked (Panel Filter Assigned Item Checkbox)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Name (Panel Filter Assigned Item)** - - -Name component within the assigned filter item - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Count (Panel Filter Assigned Item)** - - -Count component within the assigned filter item - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Custom (Panel Filter) - - -Custom filter component in the comments sidebar panel filter - - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -##### **Name (Panel Filter Custom)** - - -Name component within the custom filter - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Search (Panel Filter Custom)** - - -Search component within the custom filter - - - -```jsx - - - - - - - - -``` - - -```html - - - - - - - - -``` - - - -##### **Tags (Panel Filter Custom Search)** - - -Tags component within the custom filter search - - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -##### **Item (Panel Filter Custom Search Tags)** - - -Item component within the custom filter search tags - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Name (Panel Filter Custom Search Tags Item)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Close (Panel Filter Custom Search Tags Item)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **HiddenCount (Panel Filter Custom Search)** - - -Hidden count component within the custom filter search - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Input (Panel Filter Custom Search)** - - -Input component within the custom filter search - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **DropdownIcon (Panel Filter Custom Search)** - - -Dropdown icon component within the custom filter search - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Item (Panel Filter Custom)** - - -Item component within the custom filter - - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -##### **Checkbox (Panel Filter Custom Item)** - - -Checkbox component within the custom filter item - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Checked (Panel Filter Custom Item Checkbox)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Unchecked (Panel Filter Custom Item Checkbox)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Name (Panel Filter Custom Item)** - - -Name component within the custom filter item - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Count (Panel Filter Custom Item)** - - -Count component within the custom filter item - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Category (Panel Filter) - - -Category filter component in the comments sidebar panel filter - - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -##### **Name (Panel Filter Category)** - - -Name component within the category filter - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Search (Panel Filter Category)** - - -Search component within the category filter - - - -```jsx - - - - - - - - -``` - - -```html - - - - - - - - -``` - - - -##### **Tags (Panel Filter Category Search)** - - -Tags component within the category filter search - - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -##### **Item (Panel Filter Category Search Tags)** - - -Item component within the category filter search tags - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Name (Panel Filter Category Search Tags Item)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Close (Panel Filter Category Search Tags Item)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **HiddenCount (Panel Filter Category Search)** - - -Hidden count component within the category filter search - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Input (Panel Filter Category Search)** - - -Input component within the category filter search - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **DropdownIcon (Panel Filter Category Search)** - - -Dropdown icon component within the category filter search - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Item (Panel Filter Category)** - - -Item component within the category filter - - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -##### **Checkbox (Panel Filter Category Item)** - - -Checkbox component within the category filter item - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Checked (Panel Filter Category Item Checkbox)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Unchecked (Panel Filter Category Item Checkbox)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Name (Panel Filter Category Item)** - - -Name component within the category filter item - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Count (Panel Filter Category Item)** - - -Count component within the category filter item - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Priority (Panel Filter) - - -Priority filter component in the comments sidebar panel filter - - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -##### **Name (Panel Filter Priority)** - - -Name component within the priority filter - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Search (Panel Filter Priority)** - - -Search component within the priority filter - - - -```jsx - - - - - - - - -``` - - -```html - - - - - - - - -``` - - - -##### **Tags (Panel Filter Priority Search)** - - -Tags component within the priority filter search - - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -##### **Item (Panel Filter Priority Search Tags)** - - -Item component within the priority filter search tags - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Name (Panel Filter Priority Search Tags Item)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Close (Panel Filter Priority Search Tags Item)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **HiddenCount (Panel Filter Priority Search)** - - -Hidden count component within the priority filter search - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Input (Panel Filter Priority Search)** - - -Input component within the priority filter search - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **DropdownIcon (Panel Filter Priority Search)** - - -Dropdown icon component within the priority filter search - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Item (Panel Filter Priority)** - - -Item component within the priority filter - - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -##### **Checkbox (Panel Filter Priority Item)** - - -Checkbox component within the priority filter item - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Checked (Panel Filter Priority Item Checkbox)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Unchecked (Panel Filter Priority Item Checkbox)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Name (Panel Filter Priority Item)** - - -Name component within the priority filter item - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Count (Panel Filter Priority Item)** - - -Count component within the priority filter item - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Status (Panel Filter) - - -Status filter component in the comments sidebar panel filter - - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -##### **Name (Panel Filter Status)** - - -Name component within the status filter - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Search (Panel Filter Status)** - - -Search component within the status filter - - - -```jsx - - - - - - - - -``` - - -```html - - - - - - - - -``` - - - -##### **Tags (Panel Filter Status Search)** - - -Tags component within the status filter search - - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -##### **Item (Panel Filter Status Search Tags)** - - -Item component within the status filter search tags - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Name (Panel Filter Status Search Tags Item)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Close (Panel Filter Status Search Tags Item)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **HiddenCount (Panel Filter Status Search)** - - -Hidden count component within the status filter search - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Input (Panel Filter Status Search)** - - -Input component within the status filter search - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **DropdownIcon (Panel Filter Status Search)** - - -Dropdown icon component within the status filter search - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Item (Panel Filter Status)** - - -Item component within the status filter - - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -##### **Checkbox (Panel Filter Status Item)** - - -Checkbox component within the status filter item - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Checked (Panel Filter Status Item Checkbox)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Unchecked (Panel Filter Status Item Checkbox)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Name (Panel Filter Status Item)** - - -Name component within the status filter item - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Count (Panel Filter Status Item)** - - -Count component within the status filter item - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### CommentType (Panel Filter) - - -CommentType filter component in the comments sidebar panel filter - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Name (Panel Filter CommentType)** - - -Name component within the commentType filter - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Item (Panel Filter CommentType)** - - -Item component within the commentType filter - - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -##### **Checkbox (Panel Filter CommentType Item)** - - -Checkbox component within the commentType filter item - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Checked (Panel Filter CommentType Item Checkbox)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Unchecked (Panel Filter CommentType Item Checkbox)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Name (Panel Filter CommentType Item)** - - -Name component within the commentType filter item - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Count (Panel Filter CommentType Item)** - - -Count component within the commentType filter item - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Versions (Panel Filter) - - -Versions filter component in the comments sidebar panel filter - - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -##### **Name (Panel Filter Versions)** - - -Name component within the versions filter - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Search (Panel Filter Versions)** - - -Search component within the versions filter - - - -```jsx - - - - - - - - -``` - - -```html - - - - - - - - -``` - - - -##### **Tags (Panel Filter Versions Search)** - - -Tags component within the versions filter search - - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -##### **Item (Panel Filter Versions Search Tags)** - - -Item component within the versions filter search tags - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -###### **Name (Panel Filter Versions Search Tags Item)** - -Name component within the versions filter search tags item - - - -```jsx - - - -``` - - -```html - - - -``` - - - -###### **Close (Panel Filter Versions Search Tags Item)** - -Close component within the versions filter search tags item - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **HiddenCount (Panel Filter Versions Search)** - - -Hidden count component within the versions filter search - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Input (Panel Filter Versions Search)** - - -Input component within the versions filter search - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **DropdownIcon (Panel Filter Versions Search)** - - -Dropdown icon component within the versions filter search - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Item (Panel Filter Versions)** - - -Item component within the versions filter - - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -##### **Checkbox (Panel Filter Versions Item)** - - -Checkbox component within the versions filter item - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Checked (Panel Filter Versions Item Checkbox)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Unchecked (Panel Filter Versions Item Checkbox)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Name (Panel Filter Versions Item)** - - -Name component within the versions filter item - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Count (Panel Filter Versions Item)** - - -Count component within the versions filter item - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### GroupBy (Panel Filter) - - -GroupBy filter component in the comments sidebar panel filter - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Name (Panel Filter GroupBy)** - - -Name component within the groupBy filter - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Item (Panel Filter GroupBy)** - - -Item component within the groupBy filter - - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -##### **Checkbox (Panel Filter GroupBy Item)** - - -Checkbox component within the groupBy filter item - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Checked (Panel Filter GroupBy Item Checkbox)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Unchecked (Panel Filter GroupBy Item Checkbox)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Name (Panel Filter GroupBy Item)** - - -Name component within the groupBy filter item - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Count (Panel Filter GroupBy Item)** - - -Count component within the groupBy filter item - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### ResetButton (Panel Filter) - - -Reset button component in the comments sidebar panel filter - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### DoneButton (Panel Filter) - - -Done button component in the comments sidebar panel filter - - - -```jsx - - - -``` - - -```html - - - -``` - - - - -If you want to change the filters globally across all filters in the sidebar, customize the shared filter option item (shown below) once and reuse it. Use `VeltCommentsSidebarWireframe.Filter.Item` (and its `Checkbox`, `Name`, and `Count` subcomponents) to apply changes across all filters. - - -### Item (Panel) - - -Item component in the comments sidebar panel - - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -#### Checkbox (Panel Item) - - -Checkbox component in the comments sidebar panel item - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Checked (Panel Item Checkbox)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Unchecked (Panel Item Checkbox)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Name (Panel Item) - - -Name component in the comments sidebar panel item - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Count (Panel Item) - - -Count component in the comments sidebar panel item - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### List (Panel) - - -List component in the comments sidebar panel - - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -#### Item (Panel List) - - -Item component in the comments sidebar panel list - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Group (Panel List Item)** - - -Group component in the comments sidebar panel list item - - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -##### **Name (Panel List Item Group)** - - -Name component in the comments sidebar panel list item group - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Count (Panel List Item Group)** - - -Count component in the comments sidebar panel list item group - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Arrow (Panel List Item Group)** - - -Arrow component in the comments sidebar panel list item group - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Annotation (Panel List Item)** - - -Annotation component in the comments sidebar panel list item - - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -### EmptyPlaceholder (Panel) - - -Empty placeholder component in the comments sidebar panel - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### PageModeComposer (Panel) - - - - - - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -## FocusedThread - - - - - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -### BackButton (FocusedThread) - - - - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### DialogContainer (FocusedThread) - - - - - - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - - - -## 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** -```jsx - -``` - -##### **API methods** - -```jsx -const commentElement = client.getCommentElement(); -commentElement.enableSidebarShadowDOM(); -commentElement.disableSidebarShadowDOM(); -``` - - - - -##### **Example** -```jsx - -``` - -##### **API methods** - -```jsx -const commentElement = Velt.getCommentElement(); -commentElement.enableSidebarShadowDOM(); -commentElement.disableSidebarShadowDOM(); -``` - - - - - -### Dark Mode -![](/images/customization/velt-comment-sidebar-1.png) - -![](/images/sidebar-breakdown-dark.png) -By default, all components are in Light Mode, but there are several properties and methods to enable Dark Mode. - -`Default: false` - -To enable Dark Mode for comments sidebar: - - - - -##### **Example** -```js - -``` - -##### **API methods** - -```jsx -const commentElement = client.getCommentElement(); -commentElement.enableDarkMode(); -commentElement.disableDarkMode(); -``` - - - - - -##### **Example** -```js - -``` - -##### **API methods** - -```jsx -const commentElement = Velt.getCommentElement(); -commentElement.enableDarkMode(); -commentElement.disableDarkMode(); -``` - - - - -## Variants - -Here are the variants that you can use in Comments Sidebar: -- `variant`: This is the variant for the entire Comments Sidebar. -- `dialogVariant`: This is the variant for the Comment Dialog that appears in the Comments Sidebar. -- `pageModeComposerVariant`: This is the variant for the Comment Composer that appears in the Comments Sidebar in page mode. -- `focusedThreadDialogVariant`: This is the variant for the Comment Dialog that appears when a focused thread mode is enabled. - - - - -```jsx React / Next.js - -``` - - -```jsx Other Frameworks - -``` - - diff --git a/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-v2-primitives.mdx b/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-v2-primitives.mdx deleted file mode 100644 index 9445695a1..000000000 --- a/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-v2-primitives.mdx +++ /dev/null @@ -1,1747 +0,0 @@ ---- -title: Comment Sidebar V2 Primitives -description: 56+ primitive components for building custom Comment Sidebar V2 interfaces with maximum flexibility. ---- - - -We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components. - - - -Explore primitives interactively in our [Storybook](https://storybook.velt.dev/). - - -## Overview - -The Comment Sidebar V2 Primitives API provides 56+ granular components that can be used independently to build completely custom sidebar interfaces. Unlike the V1 sidebar's monolithic structure, every section of the V2 sidebar is an independently importable and composable primitive. Each primitive can be used standalone or composed together for maximum customization flexibility. - -Key features of the V2 architecture: -- **Flat primitive components** — each UI section is individually replaceable -- **Unified filter model** — replaces the legacy `minimalFilter` + `advancedFilters` system -- **CDK virtual scroll** — renders only the visible viewport slice for smooth performance on large comment sets -- **Focused-thread view** — opens individual threads in a dedicated view inside the sidebar -- **Conditional styling** — all primitives support `velt-class` conditional styling via `applyConditionalClasses` - - -The root container `VeltCommentsSidebarV2` remains plural. All standalone sub-primitives use the singular form `VeltCommentSidebarV2*` (React) / `velt-comment-sidebar-…-v2` (HTML). - - -## Usage Patterns - -### Pattern 1: Drop-in Replacement - -Use `VeltCommentsSidebarV2` as a direct replacement for `VeltCommentsSidebar`. - - - -```jsx - console.log('sidebar opened', data)} - onSidebarClose={(data) => console.log('sidebar closed', data)} - onCommentClick={(data) => console.log('comment clicked', data)} - onCommentNavigationButtonClick={(data) => console.log('nav button clicked', data)} -/> -``` - - -```html - -``` - - - -### Pattern 2: Version Prop on Existing Sidebar - -Route the existing `VeltCommentsSidebar` to the V2 implementation by setting `version="2"`. - - - -```jsx - -``` - - -```html - -``` - - - -### Pattern 3: Compose from Primitives - -Build a fully custom sidebar by composing individual primitives. - - - -```jsx - - - - - - - - - - -``` - - -```html - - - - - - - - - - -``` - - - -## Components - - -The `MinimalActionsDropdown` primitive family was removed in this release and replaced by the combined `actions` filter dropdown, configured via `minimal-filters`. - - -### VeltCommentsSidebarV2 - -Root container for the V2 sidebar. Provides shared state context to all child primitives via `parentLocalUIState`. See [`VeltCommentsSidebarV2Props`](/api-reference/sdk/models/data-models#veltcommentssidebarv2props) for the type definition. - - - -```jsx - console.log('sidebar opened', data)} - onSidebarClose={(data) => console.log('sidebar closed', data)} - onCommentClick={(data) => console.log('comment clicked', data)} - onCommentNavigationButtonClick={(data) => console.log('nav button clicked', data)} -/> -``` - -**Props:** - -| Prop | Type | Default | Description | -|------|------|---------|-------------| -| `pageMode` | `boolean` | `false` | Enable page-level comments mode | -| `focusedThreadMode` | `boolean` | `false` | Open individual threads in a focused view inside the sidebar | -| `readOnly` | `boolean` | `false` | Render the sidebar in read-only mode | -| `embedMode` | `string \| null` | `null` | Embed the sidebar inside a custom container | -| `floatingMode` | `boolean` | `false` | Render the sidebar in floating mode | -| `position` | `'left' \| 'right'` | `'right'` | Anchor position of the sidebar panel | -| `variant` | `string` | `'sidebar'` | Display variant | -| `forceClose` | `boolean` | `true` | Force the sidebar closed programmatically | -| `version` | `string` | - | When set to `"2"` on `VeltCommentsSidebar`, routes to the V2 implementation | -| `onSidebarOpen` | `(data: any) => void` | - | Callback fired when the sidebar opens | -| `onSidebarClose` | `(data: any) => void` | - | Callback fired when the sidebar closes | -| `onCommentClick` | `(data: any) => void` | - | Callback fired when a comment item is clicked | -| `onCommentNavigationButtonClick` | `(data: any) => void` | - | Callback fired when the comment navigation button is clicked | - - -```html - -``` - -**Attributes:** - -| Attribute | Type | Default | Description | -|-----------|------|---------|-------------| -| `page-mode` | `string` | `"false"` | Enable page-level comments mode | -| `focused-thread-mode` | `string` | `"false"` | Open individual threads in a focused view inside the sidebar | -| `read-only` | `string` | `"false"` | Render the sidebar in read-only mode | -| `embed-mode` | `string` | `"null"` | Embed the sidebar inside a custom container | -| `floating-mode` | `string` | `"false"` | Render the sidebar in floating mode | -| `position` | `string` | `"right"` | Anchor position of the sidebar panel | -| `variant` | `string` | `"sidebar"` | Display variant | -| `force-close` | `string` | `"true"` | Force the sidebar closed programmatically | -| `version` | `string` | - | When set to `"2"` on `velt-comments-sidebar`, routes to the V2 implementation | - - - ---- - -### VeltCommentSidebarV2Skeleton - -Loading skeleton displayed while the sidebar content is loading. - - - -```jsx - -``` - -**Props:** No additional props. - - -```html - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2Panel - -Main panel container that holds all sidebar content sections: header, list, empty placeholder, page-mode composer, and focused thread. - - - -```jsx - - - - - - - -``` - -**Props:** No additional props. - - -```html - - - - - - - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2Header - -Header section of the sidebar panel. Contains the close button, fullscreen button, search, filter button, and filter dropdown. - - - -```jsx - - - - - - - -``` - -**Props:** No additional props. - - -```html - - - - - - - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2CloseButton - -Button to close the sidebar panel. - - - -```jsx - -``` - -**Props:** No additional props. - - -```html - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2FullscreenButton - -Fullscreen toggle in the header; emits `onFullscreenClick` when activated. - - - -```jsx - -``` - -**Props:** No additional props. - - -```html - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2Search - -Search container in the header that holds the search icon and input. - - - -```jsx - - - - -``` - -**Props:** No additional props. - - -```html - - - - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2SearchIcon - -Search icon rendered inside the search container. - - - -```jsx - -``` - -**Props:** No additional props. - - -```html - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2SearchInput - -Text input for searching comments within the sidebar. - - - -```jsx - -``` - -**Props:** No additional props. - - -```html - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2FilterButton - -Header button that opens the filter UI; shows an applied-state icon when filters are active. - - - -```jsx - - - -``` - -**Props:** No additional props. - - -```html - - - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2FilterButtonAppliedIcon - -Icon shown on the filter button when one or more filters are applied. - - - -```jsx - -``` - -**Props:** No additional props. - - -```html - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2FilterContainer - -Root container for the Main Filter bottom-sheet, holding the title, action buttons, group-by control, and section list. - - - -```jsx - - - - - - - - -``` - -**Props:** No additional props. - - -```html - - - - - - - - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2FilterContainerTitle - -Title text for the Main Filter container. - - - -```jsx - -``` - -**Props:** No additional props. - - -```html - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2FilterContainerCloseButton - -Button that closes the Main Filter container. - - - -```jsx - -``` - -**Props:** No additional props. - - -```html - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2FilterContainerApplyButton - -Button that applies the currently selected filters and closes the container. - - - -```jsx - -``` - -**Props:** No additional props. - - -```html - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2FilterContainerResetButton - -Button that clears all selections in the Main Filter container. - - - -```jsx - -``` - -**Props:** No additional props. - - -```html - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2FilterContainerGroupBy - -Group-by control that selects how filtered results are grouped. - - - -```jsx - -``` - -**Props:** No additional props. - - -```html - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2FilterContainerSectionList - -Scrollable list of filter sections within the Main Filter container. - - - -```jsx - - - -``` - -**Props:** No additional props. - - -```html - - - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2FilterContainerSection - -Individual filter section containing a label and a field. - - - -```jsx - - - - -``` - -**Props:** No additional props. - - -```html - - - - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2FilterContainerSectionLabel - -Label text for a filter section. - - - -```jsx - -``` - -**Props:** No additional props. - - -```html - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2FilterContainerSectionField - -Field wrapper for a filter section that hosts the control and its options. Accepts a `searchable` boolean input that toggles the per-section search box. - - - -```jsx - - - - -``` - -**Props:** - -| Prop | Type | Default | Description | -|------|------|---------|-------------| -| `searchable` | `boolean` | `false` | Toggles the per-section search box | - - -```html - - - - -``` - -**Attributes:** - -| Attribute | Type | Default | Description | -|-----------|------|---------|-------------| -| `searchable` | `string` | `"false"` | Toggles the per-section search box | - - - ---- - -### VeltCommentSidebarV2FilterContainerSectionControl - -Control surface for a filter section that displays the selected value and toggles the option list. Accepts a `searchable` boolean input that toggles the per-section search box. - - - -```jsx - - - - - - -``` - -**Props:** - -| Prop | Type | Default | Description | -|------|------|---------|-------------| -| `searchable` | `boolean` | `false` | Toggles the per-section search box | - - -```html - - - - - - -``` - -**Attributes:** - -| Attribute | Type | Default | Description | -|-----------|------|---------|-------------| -| `searchable` | `string` | `"false"` | Toggles the per-section search box | - - - ---- - -### VeltCommentSidebarV2FilterContainerSectionControlChevron - -Chevron indicator showing the open/closed state of a section control. - - - -```jsx - -``` - -**Props:** No additional props. - - -```html - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2FilterContainerSectionControlValue - -Displays the currently selected value(s) of a section control. - - - -```jsx - -``` - -**Props:** No additional props. - - -```html - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2FilterContainerSectionControlChipList - -List of selected-value chips for a section control. - - - -```jsx - - - -``` - -**Props:** No additional props. - - -```html - - - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2FilterContainerSectionControlChip - -Individual chip representing a selected value in a section control. - - - -```jsx - -``` - -**Props:** No additional props. - - -```html - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2FilterContainerSectionControlSearch - -Per-section search box within a section control. Rendered when the section is `searchable`. - - - -```jsx - -``` - -**Props:** - -| Prop | Type | Default | Description | -|------|------|---------|-------------| -| `searchable` | `boolean` | `false` | Toggles the per-section search box | - - -```html - -``` - -**Attributes:** - -| Attribute | Type | Default | Description | -|-----------|------|---------|-------------| -| `searchable` | `string` | `"false"` | Toggles the per-section search box | - - - ---- - -### VeltCommentSidebarV2FilterContainerSectionOptionList - -List of selectable options within a filter section. Accepts a `searchable` boolean input that toggles the per-section search box. - - - -```jsx - - - -``` - -**Props:** - -| Prop | Type | Default | Description | -|------|------|---------|-------------| -| `searchable` | `boolean` | `false` | Toggles the per-section search box | - - -```html - - - -``` - -**Attributes:** - -| Attribute | Type | Default | Description | -|-----------|------|---------|-------------| -| `searchable` | `string` | `"false"` | Toggles the per-section search box | - - - ---- - -### VeltCommentSidebarV2FilterContainerSectionOption - -Individual selectable option containing a checkbox, name, and count. - - - -```jsx - - - - - -``` - -**Props:** No additional props. - - -```html - - - - - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2FilterContainerSectionOptionCheckbox - -Checkbox indicating whether an option is selected. - - - -```jsx - -``` - -**Props:** No additional props. - - -```html - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2FilterContainerSectionOptionName - -Display name for a filter option. - - - -```jsx - -``` - -**Props:** No additional props. - - -```html - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2FilterContainerSectionOptionCount - -Count of matching comments for a filter option. - - - -```jsx - -``` - -**Props:** No additional props. - - -```html - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2FilterDropdown - -Dropdown menu in the header for filtering comments. Uses the unified filter model that replaces the legacy `minimalFilter` + `advancedFilters` system. - - - -```jsx - - - - - - - - - - - - - - - - -``` - -**Props:** - -| Prop | Type | Default | Description | -|------|------|---------|-------------| -| `type` | `'filter' \| 'sort' \| 'quick' \| 'actions'` | unset | Scopes which content the dropdown renders. See [Filter-dropdown `type` scoping](/async-collaboration/comments-sidebar/v2/customize-behavior#filter-dropdown-type-scoping). | -| `fields` | [`FilterField[]`](/api-reference/sdk/models/data-models#filterfield) | `[]` | Fields shown when `type` is `filter`. | -| `field` | `string` | unset | Single field id — shorthand for a one-field `filter` dropdown. | -| `label` | `string` | unset | Trigger label for the dropdown. | -| `sorts` | `(string \| `[`SidebarSortConfig`](/api-reference/sdk/models/data-models#sidebarsortconfig)`)[]` | `[]` | Sort options shown when `type` is `sort` or `actions`. | -| `actions` | `(string \| `[`SidebarQuickFilterConfig`](/api-reference/sdk/models/data-models#sidebarquickfilterconfig)`)[]` | `[]` | Quick presets/predicates shown when `type` is `quick` or `actions`. | -| `showCategoryFilters` | `boolean` | unset | Show the built-in category filter sections in the dropdown. | - -These inputs mirror a single [`SidebarMinimalFilterConfig`](/api-reference/sdk/models/data-models#sidebarminimalfilterconfig) entry from `minimalFilters`. - - -```html - - - - - - - - - - - - - - - - -``` - -**Attributes:** - -| Attribute | Type | Default | Description | -|-----------|------|---------|-------------| -| `type` | `string` | unset | Scopes which content the dropdown renders (`filter` / `sort` / `quick` / `actions`). | -| `fields` | `string` (JSON) | `[]` | `FilterField[]` shown when `type` is `filter`. | -| `field` | `string` | unset | Single field id — shorthand for a one-field `filter` dropdown. | -| `label` | `string` | unset | Trigger label for the dropdown. | -| `sorts` | `string` (JSON) | `[]` | Sort options shown when `type` is `sort` or `actions`. | -| `actions` | `string` (JSON) | `[]` | Quick presets/predicates shown when `type` is `quick` or `actions`. | -| `show-category-filters` | `string` | unset | Show the built-in category filter sections in the dropdown. | - - - ---- - -### VeltCommentSidebarV2FilterDropdownTrigger - -Trigger button that opens the filter dropdown. - - - -```jsx - -``` - -**Props:** No additional props. - - -```html - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2FilterDropdownContent - -Content container for the filter dropdown. - - - -```jsx - - - -``` - -**Props:** No additional props. - - -```html - - - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2FilterDropdownContentList - -Scrollable list of filter options. Contains filter items and filter categories. - - - -```jsx - - - - -``` - -**Props:** No additional props. - - -```html - - - - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2FilterDropdownContentListItem - -Individual filter option within the filter list. Contains an indicator, a label, and a count. - - - -```jsx - - - - - -``` - -**Props:** No additional props. - - -```html - - - - - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2FilterDropdownContentListItemIndicator - -Visual indicator (such as a checkbox or icon) showing the active state of a filter option. - - - -```jsx - -``` - -**Props:** No additional props. - - -```html - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2FilterDropdownContentListItemLabel - -Text label for a filter option. - - - -```jsx - -``` - -**Props:** No additional props. - - -```html - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2FilterDropdownContentListItemCount - -Count of matching comments shown alongside a filter option. - - - -```jsx - -``` - -**Props:** No additional props. - - -```html - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2FilterDropdownContentListCategory - -Group container for organizing filter options into categories. - - - -```jsx - - - - -``` - -**Props:** No additional props. - - -```html - - - - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2FilterDropdownContentListCategoryLabel - -Text label for a filter category. - - - -```jsx - -``` - -**Props:** No additional props. - - -```html - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2FilterDropdownContentListCategoryContent - -Content area within a filter category, rendering the category's filter items. - - - -```jsx - -``` - -**Props:** No additional props. - - -```html - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2List - -Scrollable list of comment threads. Uses CDK virtual scroll to render only the visible viewport slice, enabling smooth performance on large comment sets. - - - -```jsx - - - - -``` - -**Props:** No additional props. - - -```html - - - - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2ListGroupHeader - -Group header rendered inside the list to label and separate grouped comment threads. - - - -```jsx - - - - - - -``` - -**Props:** No additional props. - - -```html - - - - - - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2ListGroupHeaderLabel - -Label text for a list group header. - - - -```jsx - -``` - -**Props:** No additional props. - - -```html - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2ListGroupHeaderCount - -Count of comments within a list group. - - - -```jsx - -``` - -**Props:** No additional props. - - -```html - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2ListGroupHeaderChevron - -Chevron indicating the expanded/collapsed state of a list group. - - - -```jsx - -``` - -**Props:** No additional props. - - -```html - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2ListGroupHeaderSeparator - -Separator rendered between list group headers. - - - -```jsx - -``` - -**Props:** No additional props. - - -```html - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2ListItem - -Individual comment thread item rendered within the list. - - - -```jsx - -``` - -**Props:** No additional props. - - -```html - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2EmptyPlaceholder - -Placeholder displayed when no comments match the current filter or when the sidebar has no comments. Contains an optional reset-filter button. - - - -```jsx - - - -``` - -**Props:** No additional props. - - -```html - - - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2ResetFilterButton - -Button that clears all active filters, returning the sidebar to its unfiltered state. - - - -```jsx - -``` - -**Props:** No additional props. - - -```html - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2PageModeComposer - -Composer for creating new page-level comments directly from the sidebar. Only visible when `pageMode` is enabled. - - - -```jsx - -``` - -**Props:** No additional props. - - -```html - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2FocusedThread - -Container for the focused-thread view that opens when a comment is clicked with `focusedThreadMode` enabled. Contains a back button and the dialog container. - - - -```jsx - - - - -``` - -**Props:** No additional props. - - -```html - - - - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2FocusedThreadBackButton - -Back button that exits the focused-thread view and returns to the comment list. - - - -```jsx - -``` - -**Props:** No additional props. - - -```html - -``` - -**Attributes:** No additional attributes. - - - ---- - -### VeltCommentSidebarV2FocusedThreadDialogContainer - -Container that renders the full comment dialog for the focused thread. - - - -```jsx - -``` - -**Props:** No additional props. - - -```html - -``` - -**Attributes:** No additional attributes. - - - ---- - -## Component Map - -All 56 primitives and their corresponding HTML elements: - -| React Component | HTML Element | -|----------------|-------------| -| `VeltCommentsSidebarV2` | `velt-comments-sidebar-v2` | -| `VeltCommentSidebarV2Skeleton` | `velt-comment-sidebar-skeleton-v2` | -| `VeltCommentSidebarV2Panel` | `velt-comment-sidebar-panel-v2` | -| `VeltCommentSidebarV2Header` | `velt-comment-sidebar-header-v2` | -| `VeltCommentSidebarV2CloseButton` | `velt-comment-sidebar-close-button-v2` | -| `VeltCommentSidebarV2FullscreenButton` | `velt-comment-sidebar-fullscreen-button-v2` | -| `VeltCommentSidebarV2Search` | `velt-comment-sidebar-search-v2` | -| `VeltCommentSidebarV2SearchIcon` | `velt-comment-sidebar-search-v2-icon` | -| `VeltCommentSidebarV2SearchInput` | `velt-comment-sidebar-search-v2-input` | -| `VeltCommentSidebarV2FilterButton` | `velt-comment-sidebar-filter-button-v2` | -| `VeltCommentSidebarV2FilterButtonAppliedIcon` | `velt-comment-sidebar-filter-button-v2-applied-icon` | -| `VeltCommentSidebarV2FilterContainer` | `velt-comment-sidebar-filter-container-v2` | -| `VeltCommentSidebarV2FilterContainerTitle` | `velt-comment-sidebar-filter-container-v2-title` | -| `VeltCommentSidebarV2FilterContainerCloseButton` | `velt-comment-sidebar-filter-container-v2-close-button` | -| `VeltCommentSidebarV2FilterContainerApplyButton` | `velt-comment-sidebar-filter-container-v2-apply-button` | -| `VeltCommentSidebarV2FilterContainerResetButton` | `velt-comment-sidebar-filter-container-v2-reset-button` | -| `VeltCommentSidebarV2FilterContainerGroupBy` | `velt-comment-sidebar-filter-container-v2-group-by` | -| `VeltCommentSidebarV2FilterContainerSectionList` | `velt-comment-sidebar-filter-container-v2-section-list` | -| `VeltCommentSidebarV2FilterContainerSection` | `velt-comment-sidebar-filter-container-v2-section` | -| `VeltCommentSidebarV2FilterContainerSectionLabel` | `velt-comment-sidebar-filter-container-v2-section-label` | -| `VeltCommentSidebarV2FilterContainerSectionField` | `velt-comment-sidebar-filter-container-v2-section-field` | -| `VeltCommentSidebarV2FilterContainerSectionControl` | `velt-comment-sidebar-filter-container-v2-section-control` | -| `VeltCommentSidebarV2FilterContainerSectionControlChevron` | `velt-comment-sidebar-filter-container-v2-section-control-chevron` | -| `VeltCommentSidebarV2FilterContainerSectionControlValue` | `velt-comment-sidebar-filter-container-v2-section-control-value` | -| `VeltCommentSidebarV2FilterContainerSectionControlChipList` | `velt-comment-sidebar-filter-container-v2-section-control-chip-list` | -| `VeltCommentSidebarV2FilterContainerSectionControlChip` | `velt-comment-sidebar-filter-container-v2-section-control-chip` | -| `VeltCommentSidebarV2FilterContainerSectionControlSearch` | `velt-comment-sidebar-filter-container-v2-section-control-search` | -| `VeltCommentSidebarV2FilterContainerSectionOptionList` | `velt-comment-sidebar-filter-container-v2-section-option-list` | -| `VeltCommentSidebarV2FilterContainerSectionOption` | `velt-comment-sidebar-filter-container-v2-section-option` | -| `VeltCommentSidebarV2FilterContainerSectionOptionCheckbox` | `velt-comment-sidebar-filter-container-v2-section-option-checkbox` | -| `VeltCommentSidebarV2FilterContainerSectionOptionName` | `velt-comment-sidebar-filter-container-v2-section-option-name` | -| `VeltCommentSidebarV2FilterContainerSectionOptionCount` | `velt-comment-sidebar-filter-container-v2-section-option-count` | -| `VeltCommentSidebarV2FilterDropdown` | `velt-comment-sidebar-filter-dropdown-v2` | -| `VeltCommentSidebarV2FilterDropdownTrigger` | `velt-comment-sidebar-filter-dropdown-trigger-v2` | -| `VeltCommentSidebarV2FilterDropdownContent` | `velt-comment-sidebar-filter-dropdown-content-v2` | -| `VeltCommentSidebarV2FilterDropdownContentList` | `velt-comment-sidebar-filter-dropdown-content-list-v2` | -| `VeltCommentSidebarV2FilterDropdownContentListItem` | `velt-comment-sidebar-filter-dropdown-content-list-item-v2` | -| `VeltCommentSidebarV2FilterDropdownContentListItemIndicator` | `velt-comment-sidebar-filter-dropdown-content-list-item-indicator-v2` | -| `VeltCommentSidebarV2FilterDropdownContentListItemLabel` | `velt-comment-sidebar-filter-dropdown-content-list-item-label-v2` | -| `VeltCommentSidebarV2FilterDropdownContentListItemCount` | `velt-comment-sidebar-filter-dropdown-content-list-item-count-v2` | -| `VeltCommentSidebarV2FilterDropdownContentListCategory` | `velt-comment-sidebar-filter-dropdown-content-list-category-v2` | -| `VeltCommentSidebarV2FilterDropdownContentListCategoryLabel` | `velt-comment-sidebar-filter-dropdown-content-list-category-label-v2` | -| `VeltCommentSidebarV2FilterDropdownContentListCategoryContent` | `velt-comment-sidebar-filter-dropdown-content-list-category-content-v2` | -| `VeltCommentSidebarV2List` | `velt-comment-sidebar-list-v2` | -| `VeltCommentSidebarV2ListGroupHeader` | `velt-comment-sidebar-list-group-header-v2` | -| `VeltCommentSidebarV2ListGroupHeaderLabel` | `velt-comment-sidebar-list-group-header-v2-label` | -| `VeltCommentSidebarV2ListGroupHeaderCount` | `velt-comment-sidebar-list-group-header-v2-count` | -| `VeltCommentSidebarV2ListGroupHeaderChevron` | `velt-comment-sidebar-list-group-header-v2-chevron` | -| `VeltCommentSidebarV2ListGroupHeaderSeparator` | `velt-comment-sidebar-list-group-header-v2-separator` | -| `VeltCommentSidebarV2ListItem` | `velt-comment-sidebar-list-item-v2` | -| `VeltCommentSidebarV2EmptyPlaceholder` | `velt-comment-sidebar-empty-placeholder-v2` | -| `VeltCommentSidebarV2ResetFilterButton` | `velt-comment-sidebar-reset-filter-button-v2` | -| `VeltCommentSidebarV2PageModeComposer` | `velt-comment-sidebar-page-mode-composer-v2` | -| `VeltCommentSidebarV2FocusedThread` | `velt-comment-sidebar-focused-thread-v2` | -| `VeltCommentSidebarV2FocusedThreadBackButton` | `velt-comment-sidebar-focused-thread-back-button-v2` | -| `VeltCommentSidebarV2FocusedThreadDialogContainer` | `velt-comment-sidebar-focused-thread-dialog-container-v2` | diff --git a/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-v2-wireframes.mdx b/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-v2-wireframes.mdx deleted file mode 100644 index b795cc33c..000000000 --- a/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-v2-wireframes.mdx +++ /dev/null @@ -1,1303 +0,0 @@ ---- -title: "Comment Sidebar v2 Wireframes" -description: "Comment Sidebar V2 Component — primitive-based wireframe with 27+ standalone primitives." ---- - - -We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components. - - -## Overview - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -## Skeleton - - - -```jsx - - - -``` - - -```html - - - -``` - - - -## Panel - - - -```jsx - - - - - - - - - -``` - - -```html - - - - - - - - - -``` - - - -### Header (Panel) - - - -```jsx - - - - - - - - - - - - - - - -``` - - -```html - - - - - - - - - - - - - - - -``` - - - -The `FilterContainer` is the Main Filter bottom-sheet/menu surface; the `FilterDropdown` is the header dropdown that renders mini-filter, sort, quick, and combined `actions` content depending on its configured `type`. The `actions` dropdown replaces the removed minimal-actions dropdown. - -#### CloseButton (Panel Header) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Search (Panel Header) - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Icon (Panel Header Search)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Input (Panel Header Search)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### FilterButton (Panel Header) - - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -The `FilterButton` opens the Main Filter container. Bind `appliedCount` and `isFilterActive` on its child wireframes to surface the active-filter state. - -##### **AppliedIcon (Panel Header FilterButton)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### FilterContainer (Panel Header) - - - -```jsx - - - - - - - - - - -``` - - -```html - - - - - - - - - - -``` - - - -The Main Filter container is the bottom-sheet/menu filter surface. `GroupBy` renders only when grouping is enabled (`groupingEnabled`); bind `groupByOptions` for its options. Available data variables on these wireframes include `value`, `label`, `count`, `mode`, `selected`, `group`, `groupingEnabled`, `groupByOptions`, `chips`, `searchable`, `placeholder`, `isFilterActive`, and `appliedCount`. - -##### **Title (Panel Header FilterContainer)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **GroupBy (Panel Header FilterContainer)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **SectionList (Panel Header FilterContainer)** - - - -```jsx - - - - - - - - - - - - - - - - - - - - - - - - -``` - - -```html - - - - - - - - - - - - - - - - - - - - - - - - -``` - - - -`SectionControl`, `SectionControlSearch`, `SectionOptionList`, and `SectionField` accept a `searchable` boolean input that toggles the per-section search box. Bind dynamic data (`value`, `label`, `count`, `selected`, `chips`, `placeholder`) on the leaf wireframe, not its container — bindings update live only when bound to a signal on the leaf. - -**Section (Panel Header FilterContainer SectionList)** - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -**SectionLabel (Panel Header FilterContainer Section)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -**SectionField (Panel Header FilterContainer Section)** - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -**SectionControl (Panel Header FilterContainer SectionField)** - - - -```jsx - - - - - - - - - - -``` - - -```html - - - - - - - - - - -``` - - - -**SectionControlChevron (Panel Header FilterContainer SectionControl)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -**SectionControlValue (Panel Header FilterContainer SectionControl)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -**SectionControlChipList (Panel Header FilterContainer SectionControl)** - - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -**SectionControlChip (Panel Header FilterContainer SectionControlChipList)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -**SectionControlSearch (Panel Header FilterContainer SectionControl)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -**SectionOptionList (Panel Header FilterContainer SectionField)** - - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -**SectionOption (Panel Header FilterContainer SectionOptionList)** - - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -**SectionOptionCheckbox (Panel Header FilterContainer SectionOption)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -**SectionOptionName (Panel Header FilterContainer SectionOption)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -**SectionOptionCount (Panel Header FilterContainer SectionOption)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **ResetButton (Panel Header FilterContainer)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **ApplyButton (Panel Header FilterContainer)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **CloseButton (Panel Header FilterContainer)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### FullscreenButton (Panel Header) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### FilterDropdown (Panel Header) - - - -```jsx - - - - - - - - - - - - - - - - - - -``` - - -```html - - - - - - - - - - - - - - - - - - -``` - - - -The `FilterDropdown` renders mini-filter, sort, quick, or combined `actions` content depending on its configured `type`. The `CategoryLabel` and per-item `Count` sub-slots are new in this release. - -##### **Trigger (Panel Header FilterDropdown)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Content (Panel Header FilterDropdown)** - - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -**List (Panel Header FilterDropdown Content)** - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -**Label (Panel Header FilterDropdown Content List Category)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -**Item (Panel Header FilterDropdown Content List)** - - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -**Indicator (Panel Header FilterDropdown Content List Item)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -**Label (Panel Header FilterDropdown Content List Item)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -**Count (Panel Header FilterDropdown Content List Item)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -**Category (Panel Header FilterDropdown Content List)** - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -**Content (Panel Header FilterDropdown Content List Category)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### List (Panel) - - - -```jsx - - - - - - - - - - -``` - - -```html - - - - - - - - - - -``` - - - -The group header renders once per group when grouping is enabled. Bind `group.label` and `group.count` on the leaf wireframes to surface live group metadata. - -#### ListGroupHeader (Panel List) - - - -```jsx - - - - - - - - -``` - - -```html - - - - - - - - -``` - - - -##### **Label (Panel List ListGroupHeader)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Count (Panel List ListGroupHeader)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Chevron (Panel List ListGroupHeader)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Separator (Panel List ListGroupHeader)** - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### EmptyPlaceholder (Panel) - - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -#### ResetFilterButton (Panel EmptyPlaceholder) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### PageModeComposer (Panel) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### FocusedThread (Panel) - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -#### BackButton (Panel FocusedThread) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### DialogContainer (Panel FocusedThread) - - - -```jsx - - - -``` - - -```html - - - -``` - - \ No newline at end of file diff --git a/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-wireframe-variables.mdx b/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-wireframe-variables.mdx deleted file mode 100644 index aa4077ace..000000000 --- a/ui-customization/features/async/comments/comment-sidebar/comment-sidebar-wireframe-variables.mdx +++ /dev/null @@ -1,577 +0,0 @@ ---- -title: Comment Sidebar Wireframe Variables -description: Template variables exposed by the Comment Sidebar wireframe — read them with velt-data, velt-if, and velt-class to drive dynamic content, conditional rendering, and class toggling. ---- - - - New to wireframes? Start with [UI Customization Concepts](/ui-customization/overview) and the [Template Variables](/ui-customization/template-variables) overview. - - -## Overview - -The **Comment Sidebar** is the panel that lists all annotations in a document — with filters, search, focused-thread view, and a page-mode composer. Variables below are available inside any `` or `` tag (both prefixes are used) via three forms: - -| You want to… | Use | Example | -|---|---|---| -| Display a value as text | `` | `` | -| Hide / show conditionally | `velt-if="{var}"` | `velt-if="{componentConfig.skeletonLoading}"` | -| Toggle a CSS class | `velt-class="'cls': {var}"` | `velt-class="'filter-{selectedMinimalFilterDropdownOption.filter}': true"` | - - - **Hybrid access pattern.** Unlike Comment Dialog, the sidebar uses a **flat `componentConfig`** model — every property lives directly on the root rather than nested under `appState` / `data` / `uiState` / `featureState`. A small set of sidebar-specific names **are** mapped — those are listed under [Mapped Variables](#mapped-variables) and resolve via bare names. For everything else, write `{componentConfig.}` and the resolver will reach it via the flat fallback. - - -## Mapped Variables - -These entries resolve only inside sidebar wireframes — their data is set by the sidebar's `componentConfigSignal`. - -| Variable | Type | Sample Value | Description | Example | -|---|---|---|---|---| -| `focusedAnnotation` | [`CommentAnnotation`](/api-reference/sdk/models/data-models#commentannotation) | `{ annotationId: "ann-42", from: { name: "Mayank" }, comments: [{ commentText: "Looks good", ... }], ... }` | The currently-focused annotation in focused-thread view. Supports deep paths (`{focusedAnnotation.from.name}`, `{focusedAnnotation.comments.length}`). | `` | -| `selectedMinimalFilterDropdownOption` | `{ filter: string; sort: string }` | `{ filter: "all", sort: "date" }` | Currently-selected option in the minimal filter dropdown. | `velt-class="'filter-{selectedMinimalFilterDropdownOption.filter}': true"` | -| `appliedFiltersCount` | `number` | `2` | Number of filters currently applied — drives the badge on the filter button. | `` | -| `filteredCommentAnnotationsCount` | `number` | `12` | Count of annotations after filtering. | `` | -| `unreadCommentAnnotationCount` | `number` | `3` | Count of unread annotations on the current document. Also exposed inside Comment Dialog. | `` | - -### Inherited Mapped Variables - -The sidebar shares these standard mapped entries with every other Comments feature. For full definitions see [Comment Dialog Wireframe Variables](../comment-dialog/wireframe-variables): - -- App state: `user`, `isUserAdmin`, `isKnownUser`. -- Per-instance UI: `darkMode`, `variant`. -- Comment data: `annotation`, `annotations`, `allAnnotations`, `commentAnnotation`, `commentAnnotations`. - -Inside a sidebar wireframe that nests a comment-dialog wireframe (e.g. focused-thread mode), all of the [Comment Dialog variables](../comment-dialog/wireframe-variables) become available. - -## Component Config - -Many sidebar properties are not in the wireframe map. Reach them via `{componentConfig.}`. Grouped by area for readability — the underlying shape is flat. - -**Layout / mode** — which rendering mode the sidebar is in. - -| Variable | Type | Description | Example | -|---|---|---|---| -| `componentConfig.darkMode` | `boolean` | Per-sidebar dark-mode flag. | `velt-class="'dark': {componentConfig.darkMode}"` | -| `componentConfig.variant` | `string` | Wireframe variant id (default `'sidebar'`). | `` | -| `componentConfig.fullScreen` | `boolean` | Sidebar is rendered full-screen. | `velt-class="'fullscreen': {componentConfig.fullScreen}"` | -| `componentConfig.embedMode` | `string` \| `null` | Embedded vs floating vs default layout. | `velt-class="'embed-{componentConfig.embedMode}': true"` | -| `componentConfig.floatingMode` | `boolean` | Floating overlay layout is active. | `velt-class="'floating': {componentConfig.floatingMode}"` | -| `componentConfig.pageMode` | `boolean` | Page-mode layout is active. | `velt-class="'page-mode': {componentConfig.pageMode}"` | -| `componentConfig.readOnly` | `boolean` | Read-only mode is active. | `velt-class="'readonly': {componentConfig.readOnly}"` | -| `componentConfig.sidebarVisible` | `boolean` | Master visibility toggle. | `velt-if="{componentConfig.sidebarVisible}"` | -| `componentConfig.sidebarReadMode` | `boolean` | Read-mode flag. | `velt-class="'read-mode': {componentConfig.sidebarReadMode}"` | -| `componentConfig.fullExpanded` | `boolean` | Sidebar is fully expanded. | `velt-class="'expanded': {componentConfig.fullExpanded}"` | - -**Loading / empty state.** - -| Variable | Type | Description | Example | -|---|---|---|---| -| `componentConfig.skeletonLoading` | `boolean` | Skeleton loader is active while annotations load. | `velt-if="{componentConfig.skeletonLoading}"` | -| `componentConfig.noCommentsFound` | `boolean` | No annotations exist in scope. | `velt-if="{componentConfig.noCommentsFound}"` | -| `componentConfig.noCommentsFoundForAppliedFilters` | `boolean` | Filters reduced the list to zero. | `velt-if="{componentConfig.noCommentsFoundForAppliedFilters}"` | - -**Filter state.** - -| Variable | Type | Description | Example | -|---|---|---|---| -| `componentConfig.moreFiltersVisible` | `boolean` | Expanded filter panel is open. | `velt-class="'filters-open': {componentConfig.moreFiltersVisible}"` | -| `componentConfig.filterConfig` | [`CommentSidebarFilterConfig`](/api-reference/sdk/models/data-models#commentsidebarfilterconfig) | Filter-panel configuration (`layout`, ordering, etc.). | `` | -| `componentConfig.filters` | `Record` | Currently-selected filter values per category. | `` | -| `componentConfig.systemFiltersOperator` | `'AND'` \| `'OR'` | How multiple filter categories compose. | `velt-class="'op-{componentConfig.systemFiltersOperator}': true"` | - -**List data.** - -| Variable | Type | Description | Example | -|---|---|---|---| -| `componentConfig.virtualScrollData` | `{ type: string; data: any }[]` | Virtual-scroll items (annotations + section dividers). | `` | -| `componentConfig.commentAnnotationsCountByFilters` | `Record>` | Per-filter-category-and-id annotation count. | `` | - -**Callbacks.** - -| Variable | Type | Description | Example | -|---|---|---|---| -| `componentConfig.openMoreFilters` | `Function` | Open the more-filters panel. Wire to a custom trigger. | _Call this from your custom click handler._ | -| `componentConfig.toggleMoreFilters` | `Function` | Toggle the more-filters panel. | _Call this from your custom click handler._ | - -## Common Props - -The root `` element accepts a wide set of attributes; the most useful for wireframe authors: - -| React Prop | HTML Attribute | Type | Default | Description | -|---|---|---|---|---| -| `fullScreen` | `full-screen` | `boolean` | `false` | Full-screen layout. | -| `embedMode` | `embed-mode` | `string` | `null` | Embedded layout id (e.g. `'figma'`). | -| `floatingMode` | `floating-mode` | `boolean` | `false` | Floating-overlay layout. | -| `pageMode` | `page-mode` | `boolean` | `false` | Page-mode layout (includes top-level composer). | -| `darkMode` | `dark-mode` | `boolean` | `false` | Force dark mode. | -| `readOnly` | `read-only` | `boolean` | `false` | Read-only mode. | -| `variant` | `variant` | `string` | `'sidebar'` | Wireframe variant id. | -| `dialogVariant` | `dialog-variant` | `string` | — | Variant forwarded to nested comment-dialogs. | -| `focusedThreadDialogVariant` | `focused-thread-dialog-variant` | `string` | — | Variant for the focused-thread dialog. | -| `pageModeComposerVariant` | `page-mode-composer-variant` | `string` | — | Variant for the page-mode composer. | -| `sortBy` | `sort-by` | `string` | — | Sort field. | -| `sortOrder` | `sort-order` | `'asc'` \| `'desc'` | — | Sort direction. | -| `currentLocationSuffix` | `current-location-suffix` | `string` | — | Per-location suffix used in location-scoped filters. | -| `systemFiltersOperator` | `system-filters-operator` | `'AND'` \| `'OR'` | `'AND'` | How filter categories compose. | -| `selection` | `selection` | `string` | — | Selection behavior mode. | -| `expandOnSelection` | `expand-on-selection` | `boolean` | — | Auto-expand sidebar on annotation selection. | -| `sortData` | `sort-data` | `string` | — | Sort data source. | -| `queryParamsComments` | `query-params-comments` | `boolean` | — | Use URL query params for comment navigation. | - -Signal inputs (for parent-child component composition): -- `[componentConfigSignal]` — shared per-sidebar config signal. - -Every primitive accepts `default-condition` to bypass `shouldShow` for previews. - -## Context-Specific Variables - -These are only resolvable inside the nested wireframe tags noted in the **Available in** column. Each is injected by the iteration / focused-thread primitive that owns the tag. - -| Variable | Type | Available in | Example | -|---|---|---|---| -| `focusedAnnotation` | [`CommentAnnotation`](/api-reference/sdk/models/data-models#commentannotation) | `` and descendants | `` | -| `sidebarRef` | `HTMLElement` | Focused-thread context — DOM reference to the sidebar overlay (used by inner overlay positioning). | _Internal — not normally read in user wireframes._ | -| `filter` | `{ name: string }` | Per-filter-category tags — `` and friends. | `` | -| `item` | `{ name: string; count: number; selected: boolean }` | Per-option-row tags — filter-item children, status / location / document dropdown content-items. | `` | -| `group` | `{ name: string; count: number; expanded: boolean }` | `` and children | `velt-class="'expanded': {group.expanded}"` | -| `tag` | `{ name: string }` | Filter-search-tag children — `` and friends | `` | - -## Type Reference - -Types referenced by the variables above are documented in [Data Models](/api-reference/sdk/models/data-models): - -| Type | Description | -|---|---| -| [`CommentAnnotation`](/api-reference/sdk/models/data-models#commentannotation) | The annotation thread (id, status, comments, etc.). | -| [`User`](/api-reference/sdk/models/data-models#user) | Identified end-user object. | -| [`CommentSidebarFilterConfig`](/api-reference/sdk/models/data-models#commentsidebarfilterconfig) | Filter-panel configuration (`layout`, ordering, etc.). | - -## Subcomponents - -Each subcomponent below has its own wireframe tag. For per-subcomponent CSS classes, see [Styling](/ui-customization/styling); for per-subcomponent props, see the existing [Comment Sidebar Components](./comment-sidebar-components). - -### `comments-sidebar` (root) - -The root primitive — the `` element customers place in their app. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None — root only sees common variables. | -| `shouldShow` | `componentConfig.isFirstComponent || componentConfig.floatingMode || componentConfig.embedMode`. The floating-mode overlay additionally requires `componentConfig.sidebarVisible`. | - -| Class | Applied when | -|---|---| -| `velt-comments-sidebar-container` | Always on the host wrapper. | -| `dark` | `componentConfig.darkMode` is true. | -| `snippyly-sidebar-panel velt-overlay-panel` | On the floating overlay container. | - - - -```jsx - - - -
- Comments - - - -
- - - -

No comments yet.

- - - - -``` - - -```html - - - -
- Comments - - - -
- - - -

No comments yet.

- - - - -``` - - - ---- - -### `comments-sidebar-wrapper` - -Wrapper element that hosts the actual sidebar content + scroll container. Always rendered when the sidebar is visible. - -- **Public element:** `` -- **Wireframe tag:** Registered via the wrapper's own template; exposes `componentConfigSignal` and `[darkMode]`. - -| Property | Value | -|---|---| -| Extra variables | None beyond common variables. | - ---- - -### `comment-sidebar-header` - -Top of the sidebar — title row with the action buttons (filter, fullscreen, close, search…). - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None beyond common variables. | - ---- - -### `comment-sidebar-filter-button` - -Filter icon button. Click opens the more-filters panel. An alternate badge SVG renders when `appliedFiltersCount > 0`. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | -| Host classes | `velt-sidebar-header--filter-button` (always); `velt-comments-sidebar-filter-button-open` when `componentConfig.moreFiltersVisible` is true. | - ---- - -### `comment-sidebar-close-button` / `comment-sidebar-fullscreen-button` - -Close / fullscreen toggle buttons in the header. - -- **Wireframe tags:** ``, `` - -| Property | Value | -|---|---| -| Extra variables | None. | - ---- - -### `comment-sidebar-search` - -Search input row. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | - ---- - -### `comment-sidebar-filter` - -The expanded filter panel — opens when the filter button is clicked. Contains many child filter primitives (status / priority / people / pages / documents / accessMode / commentCategory / version), each with its own `-wireframe>`. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | Per-iteration `filter` (category metadata) and `item` (per-option row) — see [Context-Specific Variables](#context-specific-variables). | - ---- - -### `comment-sidebar-minimal-filter-dropdown` - -The compact filter + sort dropdown shown in the minimal layout (when `filterConfig.layout === 'minimal'`). Composes a trigger + content; each has its own wireframe tag. - -- **Wireframe tag:** `` - -| Variable | Type | Example | -|---|---|---| -| `selectedMinimalFilterDropdownOption.filter` | `string` | `velt-class="'filter-{selectedMinimalFilterDropdownOption.filter}': true"` | -| `selectedMinimalFilterDropdownOption.sort` | `string` | `` | - ---- - -### `comment-sidebar-minimal-actions-dropdown` - -The "⋯" actions dropdown next to the minimal filter (mark all read, etc.). - -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | - ---- - -### `comment-sidebar-status` - -Status filter dropdown (one of the per-category filter dropdowns; lives inside the filter panel). A standalone selector is also available as ``. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | Per-iteration `item` for each status option — see [Context-Specific Variables](#context-specific-variables). | - ---- - -### `comment-sidebar-list` - -The annotations list. Iterates `componentConfig.virtualScrollData` and renders a comment-dialog primitive (in sidebar mode) per annotation entry. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None at the list level. Nested comment-dialog wireframes (e.g. ``) resolve in the standard Comment Dialog scope — see [Comment Dialog Wireframe Variables](../comment-dialog/wireframe-variables). | - ---- - -### `comment-sidebar-empty-placeholder` - -Empty-state shown when the document has no annotations or the active filters reduce to zero. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | -| `shouldShow` | `componentConfig.noCommentsFound || componentConfig.noCommentsFoundForAppliedFilters` | - -| Class | Applied when | -|---|---| -| `velt-sidebar--no-comments-container` | Always on the wrapper. | -| `velt-sidebar--no-comments-block` | Inner block. | -| `velt-sidebar--no-comments-message-container` | Message wrapper. | -| `velt-sidebar--no-comments-message-header` | Heading. | - ---- - -### `comment-sidebar-skeleton` - -Skeleton loader shown while annotations are being fetched. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | -| `shouldShow` | `componentConfig.skeletonLoading === true` | - ---- - -### `comment-sidebar-focused-thread` - -Focused-thread view — a single annotation taken full-width inside the sidebar with a back button. **This is where `focusedAnnotation` becomes resolvable.** - -- **Public element:** `` -- **Wireframe tag:** `` - -| Variable | Type | Example | -|---|---|---| -| `focusedAnnotation` | [`CommentAnnotation`](/api-reference/sdk/models/data-models#commentannotation) | `` | -| `sidebarRef` | `HTMLElement` | _Internal — DOM reference for overlay positioning._ | - -| Property | Value | -|---|---| -| `shouldShow` | `!componentConfig.skeletonLoading && componentConfig.focusedAnnotation` is set. | - -| Class | Applied when | -|---|---| -| `velt-comment-sidebar-focused-thread` | Always on the wrapper. | - -The focused-thread renders its own back-button + a comment-dialog (in `dialogVariant='sidebar'` and `focusedThreadDialogVariant='sidebar'` modes). Inside the inner comment-dialog wireframes the standard Comment Dialog variables resolve — see [Comment Dialog Wireframe Variables](../comment-dialog/wireframe-variables). - ---- - -### `comment-sidebar-page-mode-composer` - -The page-level "Add comment" composer at the top of the sidebar when `componentConfig.pageMode` is enabled. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | Delegates to the standard Comment Dialog composer — see [Comment Dialog Composer](../comment-dialog/wireframe-variables#comment-dialog-composer). | - ---- - -### `comment-sidebar-action-button` / `comment-sidebar-reset-filter-button` - -Generic action-button / reset-filter-button primitives used inside the empty placeholder and other positions. - -- **Wireframe tags:** ``, `` - -| Property | Value | -|---|---| -| Extra variables | None. | - ---- - -### `comment-sidebar-location-filter-dropdown` / `-document-filter-dropdown` / `-status-dropdown` - -Standalone filter dropdowns customers can place anywhere in their UI (independent of the main filter panel). Each has its own trigger + content + content-item structure. - -- **Wireframe tags:** ``, ``, `` - -| Property | Value | -|---|---| -| Extra variables | Per-iteration `item` for each option — see [Context-Specific Variables](#context-specific-variables). | - -## Deeply-Nested Wireframe Tags - -The sidebar has the largest set of overridable surfaces in the SDK. Tags are grouped by area below — every tag is registered and customers can override any individual surface. - -### Top-level sidebar tags - -| Tag | Notes | Example | -|---|---|---| -| `` | The visible panel container. | `velt-class="'embed': {componentConfig.embedMode}"` | -| `` | Sidebar header bar. | (composes header children) | -| `` | Open / close toggle button. | (click handler) | -| `` | Close button. | (click handler closes the sidebar) | -| `` | Fullscreen toggle. | `velt-class="'fullscreen': {componentConfig.fullScreen}"` | -| `` | Search input row. | `` | -| `` | The annotations list. | (composes list-item rows) | -| `` | Per-annotation row. | `velt-class="'is-selected': {annotation.selected}"` | -| `` | Container for the inline comment-dialog inside a list item. | (composes the nested dialog) | -| `` | Section divider for grouped lists. | `velt-class="'expanded': {group.expanded}"` | -| `` | Group name label. | `` | -| `` | Group count badge. | `` | -| `` | Expand / collapse chevron. | `velt-class="'open': {group.expanded}"` | -| `` | Skeleton loader. | `velt-if="{componentConfig.skeletonLoading}"` | -| `` | Page-mode wrapper variant. | `velt-if="{componentConfig.pageMode}"` | -| `` | Reset-filters button (used in empty placeholder). | `velt-if="{componentConfig.appliedFiltersCount} > 0"` | -| `` | Container for the focused-thread comment-dialog. | (composes the nested dialog) | - -### Filter panel tags - -The expanded filter panel composes a title + close + many per-category sub-panels + done / reset buttons + per-item primitives. - -| Tag | Notes | Example | -|---|---|---| -| `` | The expanded filter panel root. | `velt-class="'open': {componentConfig.moreFiltersVisible}"` | -| `` | Panel title. | (static label) | -| `` | Close button. | (click handler) | -| `` | "Done" button to apply changes. | (click handler) | -| `` | Reset-all button. | `velt-if="{componentConfig.appliedFiltersCount} > 0"` | -| `` | "View all" expander for a category with many options. | (click handler) | -| `` | Filter category name label. | `` | -| `` | Status filter category. | (composes per-status rows) | -| `` | Priority filter category. | (composes per-priority rows) | -| `` | People filter category. | (composes per-user rows) | -| `` | Assigned-to filter category. | (composes per-user rows) | -| `` | Tagged-with filter category. | (composes per-user rows) | -| `` | Involved-in filter category. | (composes per-user rows) | -| `` | Document filter category. | (composes per-document rows) | -| `` | Location filter category. | (composes per-location rows) | -| `` | Version filter category. | (composes per-version rows) | -| `` | Comment-type filter category. | (composes per-type rows) | -| `` | Comment-category filter. | (composes per-category rows) | -| `` | Custom filter category (for customer-defined filters). | (composes per-option rows) | -| `` | Group-by selector. | (composes per-group rows) | - -### Filter-item tags - -Inside each filter category, each individual option is rendered as a `filter-item`. - -| Tag | Notes | Example | -|---|---|---| -| `` | Per-option row. | `velt-class="'selected': {item.selected}"` | -| `` | Option name. | `` | -| `` | Option's annotation-count badge. | `` | -| `` | Checkbox wrapper. | (composes the two variants below) | -| `` | Checkbox icon (checked variant). | `velt-if="{item.selected}"` | -| `` | Checkbox icon (unchecked variant). | `velt-if="!{item.selected}"` | - -### Filter-search tags - -| Tag | Notes | Example | -|---|---|---| -| `` | Search input wrapper inside the filter panel. | (composes input + tags) | -| `` | The actual input. | (input handler) | -| `` | Dropdown chevron icon. | _Visual only._ | -| `` | Selected-tag pills container. | `` | -| `` | A single selected-tag pill. | `` | -| `` | Tag name. | `` | -| `` | Tag remove (×) button. | (click handler) | -| `` | "+N more" badge when tags overflow. | `` | - -### Standalone status / location / document dropdown tags - -Customers can place these dropdowns outside the main filter panel. - -| Tag | Notes | Example | -|---|---|---| -| `` | Standalone status-filter root. | (composes trigger + content) | -| `` | Trigger pill. | (click handler) | -| `` | Label inside trigger. | `` | -| `` | Trigger chevron. | _Visual only._ | -| `` | Selected-count indicator dot. | `velt-if="{appliedFiltersCount} > 0"` | -| `` | Open menu wrapper. | (composes content rows) | -| `` | Per-status row. | `velt-class="'selected': {item.selected}"` | -| `` | Status name. | `` | -| `` | Status icon. | `` | -| `` | Status count badge. | `` | -| `` | Checkbox. | (composes the two variants below) | -| `` | Checked variant. | `velt-if="{item.selected}"` | -| `` | Unchecked variant. | `velt-if="!{item.selected}"` | -| `` | Document-filter dropdown trigger. | (click handler) | -| `` | Trigger label. | `` | -| `` | Document-filter open menu. | (composes content rows) | -| `` | Location-filter root. | (composes trigger + content) | -| `` | Trigger pill. | (click handler) | -| `` | Trigger label. | `` | -| `` | Open menu. | (composes content rows) | - -### Minimal filter / actions dropdown tags - -Compact filter + sort UI used in the minimal layout (matches the multi-thread pattern). - -| Tag | Notes | Example | -|---|---|---| -| `` | Trigger pill. | (click handler) | -| `` | Open menu. | (composes filter rows) | -| `` | "All" filter row. | `velt-class="'selected': '{selectedMinimalFilterDropdownOption.filter} === \'all\\''"` | -| `` | "Open" filter row. | `velt-class="'selected': '{selectedMinimalFilterDropdownOption.filter} === \'open\\''"` | -| `` | "Resolved" filter row. | (selected-state) | -| `` | "Read" filter row. | (selected-state) | -| `` | "Unread" filter row. | (selected-state) | -| `` | "Assigned to me" row. | (selected-state) | -| `` | Reset-filter row. | (click handler) | -| `` | Per-row selected tick. | `velt-if="{item.selected}"` | -| `` | Sort-by-date row. | (selected-state) | -| `` | Sort-by-unread row. | (selected-state) | -| `` | Actions dropdown trigger ("⋯"). | (click handler) | -| `` | Actions menu. | (composes the actions below) | -| `` | "Mark all as read" action. | (click handler) | -| `` | "Mark all as resolved" action. | (click handler) | - -## Related - -- [Comment Sidebar Components](./comment-sidebar-components) — wireframe overview and components reference. -- [Comment Sidebar V2 Wireframes](./comment-sidebar-v2-wireframes) — composition reference for the wireframe tags themselves. -- [Comment Sidebar V2 Primitives](./comment-sidebar-v2-primitives) — granular components if you don't need a full wireframe. -- [Comment Sidebar Button Wireframe Variables](../comment-sidebar-button/wireframe-variables) — the button that opens this sidebar. -- [Comment Dialog Wireframe Variables](../comment-dialog/wireframe-variables) — variables that resolve inside nested dialog tags rendered by the list / focused-thread. -- [Template Variables](/ui-customization/template-variables) — overview of the `velt-data` / `velt-if` / `velt-class` system. diff --git a/ui-customization/features/async/comments/comment-tool-wireframe-variables.mdx b/ui-customization/features/async/comments/comment-tool-wireframe-variables.mdx deleted file mode 100644 index 9e50319c5..000000000 --- a/ui-customization/features/async/comments/comment-tool-wireframe-variables.mdx +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: Comment Tool Wireframe Variables -description: Template variables exposed by the Comment Tool wireframe — read them with velt-data, velt-if, and velt-class to drive dynamic content, conditional rendering, and class toggling. ---- - - - New to wireframes? Start with [UI Customization Concepts](/ui-customization/overview) and the [Template Variables](/ui-customization/template-variables) overview. - - -## Overview - -The **Comment Tool** wireframe exposes the variables below. Use them inside a `` tag via three forms: - -| You want to… | Use | Example | -|---|---|---| -| Display a value as text | `` | `` | -| Hide / show conditionally | `velt-if="{var}"` | `velt-if="{globalConfig.featureState.addCommentMode}"` | -| Toggle a CSS class | `velt-class="'cls': {var}"` | `velt-class="'is-disabled': '!{commentToolEnabled}'"` | - - - This feature uses the **flat-config** access pattern — variables are referenced via the explicit `componentConfig.` (per-instance) or `globalConfig.featureState.` (cross-document) form. The wireframe also exposes a flat compatibility shape that surfaces top-level flags directly: `{commentToolEnabled}`, `{addCommentMode}`, and `{disabled}` resolve without any prefix. Tables below use the canonical full path for clarity. - - -## Component Config - -| Variable | Type | Description | Example | -|---|---|---|---| -| `globalConfig.featureState.commentToolEnabled` | `boolean` | Comment Tool is enabled at the workspace level. | `velt-class="'is-disabled': '!{globalConfig.featureState.commentToolEnabled}'"` | -| `globalConfig.featureState.addCommentMode` | `boolean` | Add-comment mode is currently active (next click anywhere drops a new pin). | `velt-class="'add-mode': {globalConfig.featureState.addCommentMode}"` | -| `globalConfig.featureState.popoverMode` | `boolean` | Popover mode is enabled — the comment dialog opens as a popover after a pin is dropped. | `velt-class="'popover': {globalConfig.featureState.popoverMode}"` | -| `globalConfig.featureState.groupMatchedComments` | `boolean` | Matched comments are grouped together on the page. | `velt-class="'grouped': {globalConfig.featureState.groupMatchedComments}"` | -| `componentConfig.data.commentAnnotationAvailable` | `boolean` | An annotation is currently associated with this tool instance. | `velt-if="{componentConfig.data.commentAnnotationAvailable}"` | -| `componentConfig.data.context` | `object` \| `null` | Free-form annotation context bound to this tool instance. | `` | -| `componentConfig.data.contextOptions` | [`ContextOptions`](/api-reference/sdk/models/data-models#contextoptions) \| `null` | Context-options config for the next annotation. | _Used internally — read individual fields if needed._ | -| `componentConfig.data.folderId` | `string` \| `null` | Folder this tool drops annotations into. | `` | -| `componentConfig.data.veltFolderId` | `string` \| `null` | Velt-managed folder id (when no client folder is set). | `` | -| `componentConfig.data.clientDocumentId` | `string` \| `null` | Client-supplied document id. | `` | -| `componentConfig.data.documentId` | `string` \| `null` | Resolved document id for this instance. | `` | -| `componentConfig.data.locationId` | `string` \| `null` | Location id this tool is scoped to. | `` | -| `componentConfig.data.targetElementId` | `string` \| `null` | DOM target the next annotation will anchor onto. | `` | -| `componentConfig.data.sourceId` | `string` \| `null` | Source-id passed through from the host application. | `` | -| `componentConfig.data.disabled` | `boolean` | Tool is disabled by host configuration. | `velt-class="'is-disabled': {componentConfig.data.disabled}"` | -| `componentConfig.uiState.showDefaultBtn` | `boolean` | Default built-in button should render. Set to `false` when a wireframe overrides the button entirely. | `velt-if="{componentConfig.uiState.showDefaultBtn}"` | -| `componentConfig.uiState.shadowDom` | `boolean` | Shadow-DOM rendering is enabled. Set on the host element, not from inside the wireframe. | _Host config — set via element attribute._ | -| `componentConfig.uiState.darkMode` | `boolean` | Dark mode is active for this instance. | `velt-class="'dark': {componentConfig.uiState.darkMode}"` | -| `componentConfig.uiState.addCommentMode` | `boolean` | Per-instance mirror of `globalConfig.featureState.addCommentMode`. | `velt-class="'active': {componentConfig.uiState.addCommentMode}"` | -| `componentConfig.uiState.contextInPageModeComposer` | `boolean` | Tool is rendering inside a page-mode composer. | `velt-class="'in-composer': {componentConfig.uiState.contextInPageModeComposer}"` | -| `componentConfig.uiState.commentToolEnabled` | `boolean` | Per-instance mirror of `globalConfig.featureState.commentToolEnabled`. | `velt-class="'enabled': {componentConfig.uiState.commentToolEnabled}"` | -| `parentLocalUIState.darkMode` | `boolean` | Local dark-mode flag (host attribute). | `velt-class="'dark': {parentLocalUIState.darkMode}"` | -| `parentLocalUIState.variant` | `string` | Per-instance variant tag set on the host element. | `` | -| `parentLocalUIState.shadowDom` | `boolean` | Local shadow-DOM flag. | _Host config — set via element attribute._ | - -## Subcomponents - -### `comment-tool` (root) - -The trigger button customers place in their toolbar. Clicking it puts the document into add-comment mode (the next click anywhere drops a new pin). - -- **Public element:** `` -- **Wireframe tag:** `` (singular — registered name differs from the public element). - -| Property | Value | -|---|---| -| Extra variables | None — root only sees common variables. | -| `shouldShow` | Always renders. The inner button visually disables when `commentToolEnabled === false`. | - -#### Classes - -| Class | Applied when | -|---|---| -| `velt-comment-tool` | Always on the host wrapper. | -| `velt-tool--action-btn` | Always on the inner button. | -| `active` | `addCommentMode` is true. | -| `velt-tool--action-btn-disabled` | `commentToolEnabled` is false. | -| `velt-tool--action-btn-icon` | On the inner SVG. | -| `velt-comment-tool--custom-btn` | On the custom-button slot (when overridden). | - - - -```jsx - - - -``` - - -```html - - - -``` - - - -## Related - -- [Comment Tool](./comment-tool) — wireframe overview and default markup for this primitive. -- [Template Variables](/ui-customization/template-variables) — overview of the `velt-data` / `velt-if` / `velt-class` system. diff --git a/ui-customization/features/async/comments/comment-tool.mdx b/ui-customization/features/async/comments/comment-tool.mdx deleted file mode 100644 index 082628dd2..000000000 --- a/ui-customization/features/async/comments/comment-tool.mdx +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Comment Tool -description: The button to add new comments. ---- - - -We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components. - - -## VeltCommentToolWireframe -![](/images/customization/comments/comment-tool/comment-tool.png) - - -```jsx - - - {/* Your custom element */} - - -``` - - -```html - - - - - -``` - - - -## 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` - - - - -```jsx - -``` - - - -```jsx - -``` - - - - -### Dark Mode -![](/images/customization/velt-comment-tool-1.png) - -Default: `false` - - - - -```js - -``` - - - -```js - -``` - - - diff --git a/ui-customization/features/async/comments/comment-video-player.mdx b/ui-customization/features/async/comments/comment-video-player.mdx deleted file mode 100644 index 0cdef398b..000000000 --- a/ui-customization/features/async/comments/comment-video-player.mdx +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: "Velt Video Player" ---- - -![](/images/customization/comments/velt-video-player/video-player.png) - -## 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` - - - - -```jsx - -``` - - - - - -```jsx - -``` - - - - \ No newline at end of file diff --git a/ui-customization/features/async/comments/confirm-dialog.mdx b/ui-customization/features/async/comments/confirm-dialog.mdx deleted file mode 100644 index d66febfdd..000000000 --- a/ui-customization/features/async/comments/confirm-dialog.mdx +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: Confirmation Dialog -description: The Confirmation Dialog that appears when you delete a comment annotation. - ---- - -We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components. - - -## VeltConfirmDialogWireframe -![](/images/customization/comments/confirmation-dialog/confirm-dialog-overview.png) - - - -```jsx - - - - - - - - -``` - - -```html - - - - - - - - -``` - - - -## Title -![](/images/customization/comments/confirmation-dialog/confirm-dialog-title.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -## Message -![](/images/customization/comments/confirmation-dialog/confirm-dialog-message.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -## RejectButton -![](/images/customization/comments/confirmation-dialog/confirm-dialog-reject.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -## ApproveButton -![](/images/customization/comments/confirmation-dialog/confirm-dialog-approve.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - - -## Styling - -### Disable ShadowDOM -ShadowDOM is not used in this component. You can apply your styling directly to the component. - - -### Dark Mode -This component takes the dark mode property from the parent feature (eg: comments) where this used. -If the parent feature component is in dark mode, this component will also be in dark mode. - -### Type-Scoped CSS Classes - -When the confirm dialog is shown, a modifier class is added to the root element based on the `type` prop (see [`ConfirmDialogComponentConfig`](/api-reference/sdk/models/data-models#confirmdialogcomponentconfig)): - -- `velt-confirm-dialog` — always present (base class) -- `velt-confirm-dialog--comment` — added automatically when deleting a comment -- `velt-confirm-dialog--reply` — added automatically when deleting a reply -- `velt-confirm-dialog--{type}` — general form for any custom `type` string (e.g., `archive`, `mention`) -- No modifier class is added when `type` is omitted or empty - -```css -/* Style the delete-comment confirmation differently from delete-reply */ -.velt-confirm-dialog--comment { /* ... */ } -.velt-confirm-dialog--reply { /* ... */ } -``` \ No newline at end of file diff --git a/ui-customization/features/async/comments/inline-comments-section/primitives.mdx b/ui-customization/features/async/comments/inline-comments-section/primitives.mdx deleted file mode 100644 index d186449cf..000000000 --- a/ui-customization/features/async/comments/inline-comments-section/primitives.mdx +++ /dev/null @@ -1,578 +0,0 @@ ---- -title: Inline Comments Section Primitives -description: Primitive-based components for building custom Inline Comments Section interfaces with maximum flexibility. ---- - - -Explore primitives interactively in our [Storybook](https://storybook.velt.dev/). - - - -Inline Comments Section primitives can be used standalone: primitives that share the same `targetElementId` (React) or `target-element-id` (HTML) map to the same context, so standalone primitives co-locate with the root component's data. - - -### VeltInlineCommentsSectionCommentCount - -Comment count display for the inline comments section. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltInlineCommentsSectionComposerContainer - -Composer container for the inline comments section. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltInlineCommentsSectionList - -List container for inline comments. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltInlineCommentsSectionPanel - -Panel container for the inline comments section. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltInlineCommentsSectionSkeleton - -Loading skeleton for the inline comments section. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltInlineCommentsSectionFilterDropdown - -Complete filter dropdown for the inline comments section. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltInlineCommentsSectionFilterDropdownTrigger - -Trigger button for the inline comments section filter dropdown. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltInlineCommentsSectionFilterDropdownTriggerArrow - -Arrow indicator for the inline comments section filter dropdown trigger. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltInlineCommentsSectionFilterDropdownTriggerName - -Name display for the inline comments section filter dropdown trigger. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltInlineCommentsSectionFilterDropdownContent - -Content container for the inline comments section filter dropdown. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltInlineCommentsSectionFilterDropdownContentList - -List container within the inline comments section filter dropdown content. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltInlineCommentsSectionFilterDropdownContentListItem - -Individual list item within the inline comments section filter dropdown. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltInlineCommentsSectionFilterDropdownContentListItemCheckbox - -Checkbox within a filter dropdown list item. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltInlineCommentsSectionFilterDropdownContentListItemLabel - -Label within a filter dropdown list item. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltInlineCommentsSectionFilterDropdownContentApplyButton - -Apply button within the inline comments section filter dropdown content. - - - -```jsx - -``` - -**Props:** - -| Prop | Type | Default | Description | -|------|------|---------|-------------| -| `targetElementId` | `string` | — | ID of the target element whose inline comments section context the button applies to | -| `defaultCondition` | `boolean` | — | When `false`, the component always renders regardless of internal state | - - -```html - - -``` - -**Attributes:** - -| Attribute | Type | Default | Description | -|-----------|------|---------|-------------| -| `target-element-id` | `string` | — | ID of the target element whose inline comments section context the button applies to | -| `default-condition` | `string` | — | When `"false"`, the component always renders regardless of internal state | - - - ---- - -### VeltInlineCommentsSectionSortingDropdown - -Complete sorting dropdown for the inline comments section. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltInlineCommentsSectionSortingDropdownTrigger - -Trigger button for the inline comments section sorting dropdown. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltInlineCommentsSectionSortingDropdownTriggerIcon - -Icon for the inline comments section sorting dropdown trigger. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltInlineCommentsSectionSortingDropdownTriggerName - -Name display for the inline comments section sorting dropdown trigger. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltInlineCommentsSectionSortingDropdownContent - -Content container for the inline comments section sorting dropdown. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltInlineCommentsSectionSortingDropdownContentItem - -Individual sort option item within the sorting dropdown. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltInlineCommentsSectionSortingDropdownContentItemIcon - -Icon for a sort option item in the sorting dropdown. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltInlineCommentsSectionSortingDropdownContentItemName - -Name label for a sort option item in the sorting dropdown. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltInlineCommentsSectionSortingDropdownContentItemTick - -Tick/checkmark for the active sort option item in the sorting dropdown. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - \ No newline at end of file diff --git a/ui-customization/features/async/comments/inline-comments-section/wireframe-variables.mdx b/ui-customization/features/async/comments/inline-comments-section/wireframe-variables.mdx deleted file mode 100644 index f77735846..000000000 --- a/ui-customization/features/async/comments/inline-comments-section/wireframe-variables.mdx +++ /dev/null @@ -1,317 +0,0 @@ ---- -title: Inline Comments Section Wireframe Variables -description: Template variables exposed by the Inline Comments Section wireframe — read them with velt-data, velt-if, and velt-class to drive dynamic content, conditional rendering, and class toggling. ---- - - - New to wireframes? Start with [UI Customization Concepts](/ui-customization/overview) and the [Template Variables](/ui-customization/template-variables) overview. - - -## Overview - -The **Inline Comments Section** wireframe exposes the variables below. Use them inside any `` tag via three forms: - -| You want to… | Use | Example | -|---|---|---| -| Display a value as text | `` | `` | -| Hide / show conditionally | `velt-if="{var}"` | `velt-if="{skeletonLoading}"` | -| Toggle a CSS class | `velt-class="'cls': {var}"` | `velt-class="'sort-{sortState.sortOrder}': true"` | - -All variables are mapped — reference them by their short name. You do not need the `componentConfig.` prefix. - - - **Naming conflicts — use full path.** A few names collide with mappings used elsewhere. Inside an Inline Comments Section wireframe, prefer the explicit path on the right when reading these values: - - | Conflicting name | Use this in Inline Comments Section | - |---|---| - | `readOnly` | `featureState.readOnly` | - | `messageTruncation` | `featureState.messageTruncation` | - | `messageTruncationLines` | `featureState.messageTruncationLines` | - | `componentId` | `uiState.componentId` | - - -The list iterates through the standard Comment Dialog primitives — see [Comment Dialog Wireframe Variables](../comment-dialog/wireframe-variables) for variables that resolve inside nested dialog tags. - -## App State - -App-wide values resolved from the shared signal. - -| Variable | Type | Description | Example | -|---|---|---|---| -| `user` | [`User`](/api-reference/sdk/models/data-models#user) | Currently identified end-user. | `` | - -## Data State - -Per-section data: the live annotation list, the in-flight composer annotation, and available statuses. - -| Variable | Type | Description | Example | -|---|---|---|---| -| `annotations` | [`CommentAnnotation`](/api-reference/sdk/models/data-models#commentannotation)`[]` | Annotations rendered in this section after filter / sort. | `` | -| `filteredComments` | [`CommentAnnotation`](/api-reference/sdk/models/data-models#commentannotation)`[]` | V2 alias for `annotations` — filtered list for the section. | `` | -| `sortedComments` | [`CommentAnnotation`](/api-reference/sdk/models/data-models#commentannotation)`[]` | V2 alias — filtered and sorted list after sort order is applied. | `` | -| `allAnnotations` | [`CommentAnnotation`](/api-reference/sdk/models/data-models#commentannotation)`[]` | Unfiltered list scoped to the section's target element. | `` | -| `composerCommentAnnotation` | [`CommentAnnotation`](/api-reference/sdk/models/data-models#commentannotation) \| `undefined` | Draft annotation being composed in this section. | `velt-if="{composerCommentAnnotation}"` | -| `statuses` | [`CustomStatus`](/api-reference/sdk/models/data-models#customstatus)`[]` | Available status options for the filter dropdown. | `` | - -## UI State - -Per-instance UI flags driven by the section itself. - -| Variable | Type | Description | Example | -|---|---|---|---| -| `skeletonLoading` | `boolean` | Skeleton loader is active while annotations load. | `velt-if="{skeletonLoading}"` | -| `darkMode` | `boolean` | Dark mode is active. | `velt-class="'dark': {darkMode}"` | -| `variant` | `string` | Per-instance variant tag set on the host element. | `` | -| `uiState.componentId` | `string` | Unique id of this section instance. | `` | -| `filterState` | `InlineSectionFilterState` | Combined filter state (filters + dropdown open). | `` | -| `filterState.filters` | `InlineSectionFilterItem[]` | Per-status filter rows. | `` | -| `filterState.filterDropdownOpen` | `boolean` | Filter dropdown menu is open. | `velt-class="'open': {filterState.filterDropdownOpen}"` | -| `sortState` | `InlineSectionSortState` | Combined sort state. | `` | -| `sortState.sortBy` | `'createdAt'` \| `'lastUpdated'` | Current sort field. | `` | -| `sortState.sortOrder` | `'asc'` \| `'desc'` | Current sort direction. | `velt-class="'sort-{sortState.sortOrder}': true"` | -| `sortState.activeSortOption` | `InlineSortingCriteria` | Currently selected sort option. | `` | -| `sortState.sortingDropdownOpen` | `boolean` | Sort dropdown menu is open. | `velt-class="'open': {sortState.sortingDropdownOpen}"` | -| `isResolvedCommentsOnDomFilterSelected` | `boolean` | "Show resolved" filter is currently selected. | `velt-class="'show-resolved': {isResolvedCommentsOnDomFilterSelected}"` | -| `resolvedCommentsOnDom` | `boolean` | Resolved annotations are rendered. | `velt-if="{resolvedCommentsOnDom}"` | -| `selectedAnnotationsMap` | `SelectedAnnotationsMap` | Map keyed by `annotationId` → selected flag. | `velt-class="'selected': {selectedAnnotationsMap[annotation.annotationId]}"` | -| `selectedAnnotationsLocationMap` | `SelectedAnnotationsLocationMap` | Internal selection bookkeeping by location. | _Internal — read entries via bracket notation if needed._ | -| `parentLocalUIState.shadowDom` | `boolean` | Shadow-DOM rendering is enabled. | _Host config — set via element attribute._ | -| `dialogVariant` | `string` | Variant forwarded to nested comment-dialogs. | `` | -| `composerVariant` | `string` | Variant forwarded to the composer. | `` | -| `composerPosition` | `ComposerPosition` | Composer placement (`'top'` or `'bottom'`). | `velt-class="'composer-{composerPosition}': true"` | -| `multiThread` | `boolean` | Multi-thread layout is active. | `velt-class="'multi-thread': {multiThread}"` | -| `fullExpanded` | `boolean` | Section is fully expanded. | `velt-class="'expanded': {fullExpanded}"` | -| `commentPlaceholder` | `string` | Placeholder for the new-comment composer. | `` | -| `replyPlaceholder` | `string` | Placeholder for the reply composer. | `` | -| `composerPlaceholder` | `string` | Generic composer placeholder. | `` | -| `editPlaceholder` | `string` | Placeholder for the generic edit composer. | `` | -| `editCommentPlaceholder` | `string` | Placeholder for the edit-comment composer. | `` | -| `editReplyPlaceholder` | `string` | Placeholder for the edit-reply composer. | `` | -| `targetElementId` | `string` | DOM target the section is anchored to. | `` | -| `folderId` | `string` | Folder this section's annotations belong to. | `` | -| `veltFolderId` | `string` | Velt-managed folder id. | `` | -| `clientDocumentId` | `string` | Client-supplied document id. | `` | -| `documentId` | `string` | Resolved document id for this section. | `` | -| `locationId` | `string` | Location id this section is scoped to. | `` | -| `context` | `Record` | Free-form annotation context. | `` | -| `contextOptions` | [`ContextOptions`](/api-reference/sdk/models/data-models#contextoptions) | Context-options config for new annotations. | `` | -| `readOnly` | `boolean` | Per-instance read-only flag. Prefer `featureState.readOnly` (see naming conflicts above). | `velt-class="'readonly': {readOnly}"` | -| `messageTruncation` | `boolean` | Per-instance truncation flag. Prefer `featureState.messageTruncation` (see naming conflicts above). | `velt-class="'truncate': {messageTruncation}"` | -| `messageTruncationLines` | `number` | Per-instance truncation line count. Prefer `featureState.messageTruncationLines` (see naming conflicts above). | `` | - -## Feature State - -Capability flags toggled via SDK config. - -| Variable | Type | Description | Example | -|---|---|---|---| -| `featureState.readOnly` | `boolean` | Section is in read-only mode. | `velt-class="'readonly': {featureState.readOnly}"` | -| `featureState.anonymousEmail` | `boolean` | Anonymous-email capture is enabled. | `velt-if="{featureState.anonymousEmail}"` | -| `featureState.messageTruncation` | `boolean` | Long messages are truncated. | `velt-class="'truncate': {featureState.messageTruncation}"` | -| `featureState.messageTruncationLines` | `number` | Line count for truncation. | `` | - -## Common Props - -Every Inline Comments Section primitive accepts: - -| React Prop | HTML Attribute | Type | Default | Description | -|---|---|---|---|---| -| `defaultCondition` | `default-condition` | `boolean \| "true" \| "false"` | `true` | When `false`, the component always renders regardless of internal state. | - -Signal inputs (for parent-child component composition): -- `[componentConfigSignal]` — shared per-section config signal (annotations, statuses, filter / sort state). -- `[parentLocalUIState]` — per-instance UI state signal. - -The root `` element additionally accepts attributes that map onto config and local UI state values: `target-element-id`, `folder-id`, `document-id`, `location-id`, `context`, `dialog-variant`, `composer-variant`, `composer-position`, `comment-placeholder` / `reply-placeholder` / `composer-placeholder` / `edit-placeholder`, `multi-thread`, `full-expanded`, `read-only`, `message-truncation`, `message-truncation-lines`, `dark-mode`, `variant`, `shadow-dom`. - -## Context-Specific Variables - -These are only resolvable inside the nested wireframe tags noted in the **Available in** column. Each is injected by the iteration primitive that owns the tag. - -| Variable | Type | Available in | Example | -|---|---|---|---| -| `filter` | `InlineSectionFilterItem<`[`CustomStatus`](/api-reference/sdk/models/data-models#customstatus)`>` | filter-dropdown list-item / checkbox / label tags | `` | -| `filter.id` | `string` | Same as above. | `` | -| `filter.isSelected` | `boolean` | Same as above. | `velt-class="'selected': {filter.isSelected}"` | -| `filter.metadata` | [`CustomStatus`](/api-reference/sdk/models/data-models#customstatus) | Same as above. | `` | -| `sortOption` | `InlineSortingCriteria` | sorting-dropdown content-item / -icon / -tick tags | `` | -| `sortOptionText` | `string` | sorting-dropdown content-item / -name tags | `` | -| `isActive` | `boolean` | sorting-dropdown content-item | `velt-class="'active': {isActive}"` | -| `isAscending` | `boolean` | sorting-dropdown content-item-icon | `velt-if="{isAscending}"` | - -## Type Reference - -Types referenced by the variables above are documented in [Data Models](/api-reference/sdk/models/data-models): - -| Type | Description | -|---|---| -| [`CommentAnnotation`](/api-reference/sdk/models/data-models#commentannotation) | The annotation thread (id, status, comments, etc.). | -| [`CustomStatus`](/api-reference/sdk/models/data-models#customstatus) | Status definition (id, name, color, icon). | -| [`User`](/api-reference/sdk/models/data-models#user) | Identified end-user object. | -| [`ContextOptions`](/api-reference/sdk/models/data-models#contextoptions) | Context-options config for new annotations. | -| `InlineSectionFilterState` | Combined filter-state shape (`filters`, `filterDropdownOpen`). | -| `InlineSectionFilterItem` | One filter row (`id`, `isSelected`, `metadata`). | -| `InlineSortingCriteria` | Sort-option discriminator (`'createdAt'`, `'lastUpdated'`, `'mostReplies'`, etc.). | -| `ComposerPosition` | Composer placement (`'top'` \| `'bottom'`). | - -## Subcomponents - -Each subcomponent below has its own wireframe tag. - -### `inline-comments-section` (root) - -The customer-facing root primitive customers place in their app. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None — root only sees common variables. | -| `shouldShow` | Always renders when present. | - ---- - -### `inline-comments-section-panel` - -The wrapper container for the section. Composes header (count + filter + sort) + list + composer. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None beyond common variables. | - ---- - -### `inline-comments-section-skeleton` - -Skeleton loader. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | -| `shouldShow` | `skeletonLoading === true` | - ---- - -### `inline-comments-section-comment-count` - -The "N comments" label at the top of the section. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None beyond common variables. | - - - -```jsx - - comments - -``` - - -```html - - comments - -``` - - - ---- - -### `inline-comments-section-list` - -Iterates `annotations` and renders a comment-dialog primitive per entry. Inside, the standard [Comment Dialog Wireframe Variables](../comment-dialog/wireframe-variables) resolve. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None at the list level. The nested comment-dialog tags receive `commentObj` / `commentIndex` from each iteration — see Comment Dialog. | - ---- - -### `inline-comments-section-composer-container` - -The per-section composer (renders the standard comment-dialog composer). Inside this wireframe the standard Comment Dialog Composer variables are available. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None at the container level. The nested composer injects `editMode` / `commentObj` / `commentIndex` — see [Comment Dialog Wireframe Variables](../comment-dialog/wireframe-variables#comment-dialog-composer). | - -## Deeply-Nested Wireframe Tags - -The filter and sort dropdowns decompose further. Each tag below has its own `` registration and inherits context variables from its parent dropdown. - -### Filter dropdown tags - -The filter dropdown lets the user filter the section by status. Composes trigger + content (with apply button) + per-status list-items. - -| Tag | Notes | Example | -|---|---|---| -| `` | Root. | `velt-class="'open': {filterState.filterDropdownOpen}"` | -| `` | Trigger pill. | (click handler) | -| `` | Trigger label. | `` | -| `` | Chevron. | _Visual only._ | -| `` | Open menu. | `velt-class="'open': {filterState.filterDropdownOpen}"` | -| `` | List wrapper. | (iterates over `filterState.filters`) | -| `` | Per-status row. Exposes `filter`. | `` | -| `` | Checkbox. Exposes `filter`. | `velt-class="'checked': {filter.isSelected}"` | -| `` | Status name. Exposes `filter`. | `` | -| `` | Apply button. | (click handler) | - -### Sorting dropdown tags - -The sort dropdown — pick between "Created first", "Last updated", "Most replies", etc. Composes trigger + content + per-option content-items with tick / icon / name. - -| Tag | Notes | Example | -|---|---|---| -| `` | Root. | `velt-class="'open': {sortState.sortingDropdownOpen}"` | -| `` | Trigger pill. | (click handler) | -| `` | Trigger icon. | `velt-class="'sort-{sortState.sortOrder}': true"` | -| `` | Trigger label. | `` | -| `` | Open menu. | `velt-class="'open': {sortState.sortingDropdownOpen}"` | -| `` | Per-option row. Exposes `sortOption`, `sortOptionText`, `isActive`. | `velt-class="'active': {isActive}"` | -| `` | Per-option icon. Exposes `sortOption`, `isAscending`. | `velt-if="{isAscending}"` | -| `` | Per-option label. Exposes `sortOptionText`. | `` | -| `` | Selected-indicator tick. Exposes `sortOption`. Visible only when this is the active sort option. | `` | - - - -```jsx - - - -``` - - -```html - - - -``` - - - -## Related - -- [Inline Comments Section Wireframes](./wireframes) — composition reference for the wireframe tags themselves. -- [Inline Comments Section Primitives](./primitives) — granular components if you don't need a full wireframe. -- [Comment Dialog Wireframe Variables](../comment-dialog/wireframe-variables) — variables that resolve inside nested dialog tags rendered by the list. -- [Template Variables](/ui-customization/template-variables) — overview of the `velt-data` / `velt-if` / `velt-class` system. diff --git a/ui-customization/features/async/comments/inline-comments-section/wireframes.mdx b/ui-customization/features/async/comments/inline-comments-section/wireframes.mdx deleted file mode 100644 index 853ea27a8..000000000 --- a/ui-customization/features/async/comments/inline-comments-section/wireframes.mdx +++ /dev/null @@ -1,533 +0,0 @@ ---- -title: Inline Comments Section Wireframes -description: Wireframe components for building custom Inline Comments Section interfaces with maximum flexibility. ---- - - -We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components. - - -## VeltInlineCommentsSectionWireframe -![](/images/customization/comments/inline-comments/inline-comments-overview.png) - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -### Skeleton -![](/images/customization/comments/inline-comments/inline-comments-skeleton.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -### Panel -![](/images/customization/comments/inline-comments/inline-comments-panel.png) - - -```jsx - - - - - - - - - -``` - - -```html - - - - - - - - - -``` - - - -#### ComposerContainer -![](/images/customization/comments/inline-comments/inline-comments-panel-composer.png) - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -##### **VeltCommentDialogWireframe.Composer** -You can find the wireframe for the `Comment Dialog Composer` [here](/ui-customization/features/async/comments/comment-dialog/wireframes#composer). - -#### SortingDropdown -![](/images/customization/comments/inline-comments/inline-comments-panel-sorting-dropdown.png) - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Trigger** -![](/images/customization/comments/inline-comments/inline-comments-panel-sorting-trigger.png) - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Name** -![](/images/customization/comments/inline-comments/inline-comments-panel-sorting-trigger-name.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Icon** -![](/images/customization/comments/inline-comments/inline-comments-panel-sorting-trigger-icon.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Content** -![](/images/customization/comments/inline-comments/inline-comments-panel-trigger-dropdown-content.png) - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -##### **Item** -![](/images/customization/comments/inline-comments/inline-comments-panel-trigger-dropdown-content-item.png) - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -#### FilterDropdown (Panel) - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Trigger (Panel FilterDropdown)** - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Arrow (Panel FilterDropdown Trigger)** - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Name (Panel FilterDropdown Trigger)** - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Content (Panel FilterDropdown)** - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **List (Panel FilterDropdown Content)** - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -##### **Item (Panel FilterDropdown Content List)** - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### **Label (Panel FilterDropdown Content List Item)** - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Checkbox (Panel FilterDropdown Content List Item)** - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **ApplyButton (Panel FilterDropdown Content)** - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### CommentCount -![](/images/customization/comments/inline-comments/inline-comments-panel-comment-count.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### List -![](/images/customization/comments/inline-comments/inline-comments-panel-list.png) - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -##### **VeltCommentDialogWireframe** -You can find the wireframe for the `Comment Dialog` [here](/ui-customization/features/async/comments/comment-dialog/wireframes). - - -## Pre-defined Variants -Here are the pre-deinfed variants: -1. `dialog-variant`: Use this to customize the `Comment Dialog` that appears within the `Inline Comments Section` component. -2. `variant`: Use this to customize the entire `Inline Comments Section` component itself. -3. `composer-variant`: Use this to customize the main Composer that appears within the `Inline Comments Section` component. - - -Learn more about Variants [here](/ui-customization/layout#variants) - - - - -```jsx React / Next.js - -``` - - -```HTML - - -``` - - diff --git a/ui-customization/features/async/comments/multithread-comments/primitives.mdx b/ui-customization/features/async/comments/multithread-comments/primitives.mdx deleted file mode 100644 index 85e1c891b..000000000 --- a/ui-customization/features/async/comments/multithread-comments/primitives.mdx +++ /dev/null @@ -1,596 +0,0 @@ ---- -title: MultiThread Comment Dialog Primitives -description: Primitive-based components for building custom MultiThread Comment Dialog interfaces with maximum flexibility. ---- - - -Explore primitives interactively in our [Storybook](https://storybook.velt.dev/). - - - -MultiThread Comment Dialog primitives can be used standalone: pass `multiThreadAnnotationId` (React) or `multi-thread-annotation-id` (HTML) to render a primitive with real annotation data without a parent root component. - - -### VeltMultiThreadCommentDialog - -Root component for the multi-thread comment dialog. - - - -```jsx - console.log(e)} -/> -``` - -**Props:** - -| Prop | Type | Default | Description | -|------|------|---------|-------------| -| `annotationId` | `string` | — | The annotation ID | -| `multiThreadAnnotationId` | `string` | — | The multi-thread annotation ID | -| `annotation` | `any` | — | Annotation data object | -| `readOnly` | `boolean` | `false` | Disables user interaction | -| `defaultCondition` | `boolean` | `true` | When `false`, the component always renders regardless of internal state | -| `variant` | `string` | — | Visual variant for the component | -| `inboxMode` | `boolean` | `false` | Renders the dialog in inbox mode | -| `onSaveComment` | `Function` | — | Callback fired when a comment is saved | - - -`` is now registered as a standalone custom element for non-React use. - -```html - - -``` - -**Attributes:** - -| Attribute | Type | Default | Description | -|-----------|------|---------|-------------| -| `annotation-id` | `string` | — | The annotation ID | -| `multi-thread-annotation-id` | `string` | — | The multi-thread annotation ID | -| `annotation` | `string` (JSON) | — | Annotation data object as serialized JSON | -| `read-only` | `string` | `"false"` | Disables user interaction | -| `default-condition` | `string` | `"true"` | When `"false"`, the component always renders regardless of internal state | -| `variant` | `string` | — | Visual variant for the component | -| `inbox-mode` | `string` | `"false"` | Renders the dialog in inbox mode | - -Listen for the `onSaveComment` event on the element via `addEventListener`. - - - ---- - -### VeltMultiThreadCommentDialogList - -List container for multi-thread comment dialog threads. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltMultiThreadCommentDialogPanel - -Panel container for the multi-thread comment dialog. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltMultiThreadCommentDialogComposerContainer - -Composer container for the multi-thread comment dialog. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltMultiThreadCommentDialogCommentCount - -Comment count display for the multi-thread comment dialog. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltMultiThreadCommentDialogEmptyPlaceholder - -Empty state placeholder for the multi-thread comment dialog. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltMultiThreadCommentDialogCloseButton - -Close button for the multi-thread comment dialog. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltMultiThreadCommentDialogNewThreadButton - -Button to start a new thread in the multi-thread comment dialog. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltMultiThreadCommentDialogResetFilterButton - -Button to reset active filters in the multi-thread comment dialog. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltMultiThreadCommentDialogMinimalFilterDropdown - -Minimal filter dropdown for the multi-thread comment dialog. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltMultiThreadCommentDialogMinimalFilterDropdownTrigger - -Trigger button for the minimal filter dropdown. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltMultiThreadCommentDialogMinimalFilterDropdownContent - -Content container for the minimal filter dropdown. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltMultiThreadCommentDialogMinimalFilterDropdownContentFilterAll - -Filter-all option within the minimal filter dropdown. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltMultiThreadCommentDialogMinimalFilterDropdownContentFilterRead - -Filter-read option within the minimal filter dropdown. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltMultiThreadCommentDialogMinimalFilterDropdownContentFilterResolved - -Filter-resolved option within the minimal filter dropdown. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltMultiThreadCommentDialogMinimalFilterDropdownContentFilterUnread - -Filter-unread option within the minimal filter dropdown. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltMultiThreadCommentDialogMinimalFilterDropdownContentSelectedIcon - -Selected state icon within the minimal filter dropdown. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltMultiThreadCommentDialogMinimalFilterDropdownContentSortDate - -Sort-by-date option within the minimal filter dropdown. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltMultiThreadCommentDialogMinimalFilterDropdownContentSortUnread - -Sort-by-unread option within the minimal filter dropdown. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltMultiThreadCommentDialogMinimalActionsDropdown - -Minimal actions dropdown for the multi-thread comment dialog. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltMultiThreadCommentDialogMinimalActionsDropdownTrigger - -Trigger button for the minimal actions dropdown. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltMultiThreadCommentDialogMinimalActionsDropdownContent - -Content container for the minimal actions dropdown. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltMultiThreadCommentDialogMinimalActionsDropdownContentMarkAllRead - -Mark-all-read action within the minimal actions dropdown. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltMultiThreadCommentDialogMinimalActionsDropdownContentMarkAllResolved - -Mark-all-resolved action within the minimal actions dropdown. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - diff --git a/ui-customization/features/async/comments/multithread-comments/wireframe-variables.mdx b/ui-customization/features/async/comments/multithread-comments/wireframe-variables.mdx deleted file mode 100644 index 720c224b2..000000000 --- a/ui-customization/features/async/comments/multithread-comments/wireframe-variables.mdx +++ /dev/null @@ -1,317 +0,0 @@ ---- -title: Multithread Comments Wireframe Variables -description: Template variables exposed by the Multithread Comments wireframe — read them with velt-data, velt-if, and velt-class to drive dynamic content, conditional rendering, and class toggling. ---- - - - New to wireframes? Start with [UI Customization Concepts](/ui-customization/overview) and the [Template Variables](/ui-customization/template-variables) overview. - - -## Overview - -The **Multithread Comments** wireframe (a multi-thread comment dialog) hosts multiple comment threads in a single panel. Variables below are available inside any `` tag via three forms: - -| You want to… | Use | Example | -|---|---|---| -| Display a value as text | `` | `` | -| Hide / show conditionally | `velt-if="{var}"` | `velt-if="{noCommentsFound}"` | -| Toggle a CSS class | `velt-class="'cls': {var}"` | `velt-class="'filter-{minimalFilter}': true"` | - -All variables are mapped — reference them by their short name. You do not need the `componentConfig.` prefix. - - - **Naming conflicts — use full path.** A few names collide with mappings used by Comment Dialog. Inside a Multithread Comments wireframe, prefer the explicit path on the right when reading these values: - - | Conflicting name | Use this in Multithread Comments | - |---|---| - | `user` | `data.user` | - | `shadowDom` | `parentLocalUIState.shadowDom` (per-render) or `uiState.shadowDom` (per-instance) | - - -The list iterates through the standard Comment Dialog primitives — see [Comment Dialog Wireframe Variables](../comment-dialog/wireframe-variables) for variables that resolve inside nested dialog tags. - -## Data State - -Per-instance data: the live thread list, the focused / draft annotation, and host-application context. - -| Variable | Type | Description | Example | -|---|---|---|---| -| `annotation` | [`CommentAnnotation`](/api-reference/sdk/models/data-models#commentannotation) \| `null` | Currently focused annotation. | `velt-if="{annotation}"` | -| `annotation.annotationId` | `string` | Id of the focused annotation. | `` | -| `annotations` | [`CommentAnnotation`](/api-reference/sdk/models/data-models#commentannotation)`[]` | All annotations in scope. | `` | -| `filteredAnnotations` | [`CommentAnnotation`](/api-reference/sdk/models/data-models#commentannotation)`[]` | Annotations after filter / sort is applied. | `` | -| `multiThreadAnnotationId` | `string` \| `null` | Id of the multi-thread anchor annotation. | `` | -| `multiThreadCommentAnnotation` | [`CommentAnnotation`](/api-reference/sdk/models/data-models#commentannotation) | Anchor annotation object. | `` | -| `nonDraftCommentsCount` | `number` | Count of non-draft threads. | `` | -| `data.user` | [`User`](/api-reference/sdk/models/data-models#user) \| `null` | Currently identified end-user. | `` | -| `containerComponentId` | `string` \| `null` | Owning container id (host wiring). | `` | -| `context` | `any` | Free-form annotation context. | `` | -| `data.contextId` | `string` \| `null` | Context id linking this dialog to a host context. | `` | - -## UI State - -Per-instance UI flags driven by the dialog itself. - -| Variable | Type | Description | Example | -|---|---|---|---| -| `commentPinSelected` | `boolean` | Pin associated with the focused annotation is selected. | `velt-class="'pin-selected': {commentPinSelected}"` | -| `commentPinType` | `string` \| `null` | Pin shape (`'pin'`, `'bubble'`, etc.). | `` | -| `inboxMode` | `boolean` | Inbox-style layout is active. | `velt-class="'inbox': {inboxMode}"` | -| `readOnly` | `boolean` | Dialog is in read-only mode. | `velt-class="'readonly': {readOnly}"` | -| `hideMultiThreadAnnotationComposer` | `boolean` | Anchor-annotation composer should be hidden. | `velt-if="!{hideMultiThreadAnnotationComposer}"` | -| `dialogVariant` | `string` | Variant forwarded to nested comment-dialogs. | `` | -| `minimalFilter` | `'all'` \| `'read'` \| `'unread'` \| `'resolved'` | Currently selected filter row. | `velt-class="'filter-{minimalFilter}': true"` | -| `selectedMinimalFilterDropdownOption.sorting` | `SidebarSortingCriteria` | Currently selected sort row. | `` | -| `selectedMinimalFilterDropdownOption.filter` | `'all'` \| `'read'` \| `'unread'` \| `'resolved'` | Selected filter (mirrors `minimalFilter`). | `velt-class="'selected-{selectedMinimalFilterDropdownOption.filter}': true"` | -| `minimalFilterDropdownOpen` | `boolean` | Filter+sort dropdown menu is open. | `velt-class="'open': {minimalFilterDropdownOpen}"` | -| `minimalActionsDropdownOpen` | `boolean` | Bulk-actions dropdown menu is open. | `velt-class="'open': {minimalActionsDropdownOpen}"` | -| `noCommentsFoundForAppliedFilters` | `boolean` | Filters reduced the list to zero. | `velt-if="{noCommentsFoundForAppliedFilters}"` | -| `noCommentsFound` | `boolean` | No annotations exist in scope. | `velt-if="{noCommentsFound}"` | -| `darkMode` | `boolean` | Dark mode is active. | `velt-class="'dark': {darkMode}"` | -| `variant` | `string` \| `null` | Per-instance variant tag set on the host element. | `` | -| `uiState.shadowDom` | `boolean` | Shadow-DOM rendering is enabled (per-instance). | _Host config — set via element attribute._ | -| `parentLocalUIState.darkMode` | `boolean` | Dark-mode flag (per-render). Alias for `darkMode`. | _Host config — set via element attribute._ | -| `parentLocalUIState.variant` | `string` | Variant tag (per-render). Alias for `variant`. | _Host config — set via element attribute._ | -| `parentLocalUIState.shadowDom` | `boolean` | Shadow-DOM flag (per-render). | _Host config — set via element attribute._ | - -## Common Props - -Every Multithread Comments primitive accepts: - -| React Prop | HTML Attribute | Type | Default | Description | -|---|---|---|---|---| -| `defaultCondition` | `default-condition` | `boolean \| "true" \| "false"` | `true` | When `false`, the component always renders regardless of internal state. | - -Signal inputs (for parent-child component composition): -- `[componentConfigSignal]` — shared per-instance config signal (annotation list, filter / sort state). -- `[parentLocalUIState]` — per-instance UI state signal. - -## Context-Specific Variables - -Only resolvable inside the nested wireframe tags noted in the **Available in** column. - -| Variable | Type | Available in | Example | -|---|---|---|---| -| `isSelected` | `boolean` | All six `*-minimal-filter-dropdown-content-{filter,sort}-*` tags | `velt-class="'is-selected': {isSelected}"` | - -## Type Reference - -Types referenced by the variables above are documented in [Data Models](/api-reference/sdk/models/data-models): - -| Type | Description | -|---|---| -| [`CommentAnnotation`](/api-reference/sdk/models/data-models#commentannotation) | The annotation thread (id, status, comments, etc.). | -| [`User`](/api-reference/sdk/models/data-models#user) | Identified end-user object. | -| [`SidebarSortingCriteria`](/api-reference/sdk/models/data-models#sidebarsortingcriteria) | Sort-option discriminator shared with the sidebar (`'date'`, `'unread'`, or `null`). | - -## Subcomponents - -Each subcomponent below has its own wireframe tag. - -### `multi-thread-comment-dialog-panel` - -The customer-facing root panel container. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None — root only sees common variables. | - ---- - -### `multi-thread-comment-dialog-list` - -Iterates `filteredAnnotations` and renders a comment-dialog primitive per annotation. Inside, the standard [Comment Dialog Wireframe Variables](../comment-dialog/wireframe-variables) apply. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None at the list level. The nested comment-dialog tags receive `commentObj` / `commentIndex` from each iteration. | - ---- - -### `multi-thread-comment-dialog-comment-count` - -The count label at the top. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None beyond common variables. | - - - -```jsx - - threads - -``` - - -```html - - threads - -``` - - - ---- - -### `multi-thread-comment-dialog-empty-placeholder` - -Empty-state shown when filters reduce the list to zero or no annotations exist. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None beyond common variables. | -| `shouldShow` | `noCommentsFound || noCommentsFoundForAppliedFilters` | - - - -```jsx - -

No threads to show.

- -``` - - -```html - -

No threads to show.

- -``` - - - ---- - -### `multi-thread-comment-dialog-close-button` - -The close button. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | - ---- - -### `multi-thread-comment-dialog-new-thread-button` - -The add-thread button. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | - ---- - -### `multi-thread-comment-dialog-reset-filter-button` - -Shown inside the empty placeholder when filters are active. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | -| `shouldShow` | `noCommentsFoundForAppliedFilters` | - ---- - -### `multi-thread-comment-dialog-composer-container` - -The new-thread composer container. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None at the container level. The nested composer injects `editMode` / `commentObj` / `commentIndex` — see [Comment Dialog Wireframe Variables](../comment-dialog/wireframe-variables#comment-dialog-composer). | -| `shouldShow` | `!hideMultiThreadAnnotationComposer` | - -## Deeply-Nested Wireframe Tags - -The filter+sort dropdown and bulk-actions dropdown decompose further. Each tag below has its own `` registration. - -### Multi-Thread root tag - -| Tag | Notes | Example | -|---|---|---| -| `` | Outer wireframe — wraps the entire panel. The `panel` child is the visible container. | (composes the panel) | - -### Minimal filter dropdown tags - -The filter+sort dropdown (similar to the sidebar's minimal-filter-dropdown). Each row exposes `isSelected`. - -| Tag | Notes | Example | -|---|---|---| -| `` | Root. | `velt-class="'open': {minimalFilterDropdownOpen}"` | -| `` | Trigger pill. | (click handler) | -| `` | Open menu. | `velt-class="'open': {minimalFilterDropdownOpen}"` | -| `` | "All" filter row. Exposes `isSelected`. | `velt-class="'is-selected': {isSelected}"` | -| `` | "Read" filter row. Exposes `isSelected`. | `velt-class="'is-selected': {isSelected}"` | -| `` | "Unread" filter row. Exposes `isSelected`. | `velt-class="'is-selected': {isSelected}"` | -| `` | "Resolved" filter row. Exposes `isSelected`. | `velt-class="'is-selected': {isSelected}"` | -| `` | Per-row selected tick. | `velt-if="{isSelected}"` | -| `` | "Sort by date" row. Exposes `isSelected`. | `velt-class="'is-selected': {isSelected}"` | -| `` | "Sort by unread" row. Exposes `isSelected`. | `velt-class="'is-selected': {isSelected}"` | - -#### Selected-row check example - - - -```jsx - -
Unread ✓
- -``` - - -```html - -
Unread ✓
- -``` - - - -### Minimal actions dropdown tags - -The bulk-actions dropdown ("Mark all as read", "Mark all as resolved"). - -| Tag | Notes | Example | -|---|---|---| -| `` | Root. | `velt-class="'open': {minimalActionsDropdownOpen}"` | -| `` | Trigger ("⋯"). | (click handler) | -| `` | Open menu. | `velt-class="'open': {minimalActionsDropdownOpen}"` | -| `` | "Mark all as read" action row. | (click handler) | -| `` | "Mark all as resolved" action row. | (click handler) | - -## Related - -- [Multithread Comments Wireframes](./wireframes) — composition reference for the wireframe tags themselves. -- [Multithread Comments Primitives](./primitives) — granular components if you don't need a full wireframe. -- [Comment Dialog Wireframe Variables](../comment-dialog/wireframe-variables) — variables that resolve inside nested dialog tags rendered by the list. -- [Template Variables](/ui-customization/template-variables) — overview of the `velt-data` / `velt-if` / `velt-class` system. diff --git a/ui-customization/features/async/comments/multithread-comments/wireframes.mdx b/ui-customization/features/async/comments/multithread-comments/wireframes.mdx deleted file mode 100644 index aad7a70c2..000000000 --- a/ui-customization/features/async/comments/multithread-comments/wireframes.mdx +++ /dev/null @@ -1,198 +0,0 @@ ---- -title: MultiThread Comment Dialog Wireframes -description: Wireframe components for building custom MultiThread Comment Dialog interfaces with maximum flexibility. ---- - - -We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components. - - -## VeltMultiThreadCommentDialogWireframe -![](/images/customization/comments/multi-thread/multi-thread-overview.png) - - -```jsx - - - - - - - - - - - - -``` - - -```html - - - - - - - - - - - - -``` - - - -## CommentCount -![](/images/customization/comments/multi-thread/multi-thread-comments-count.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -## MinimalFilterDropdown -![](/images/customization/comments/multi-thread/multi-thread-filter-dropdown.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -## MinimalActionsDropdown -![](/images/customization/comments/multi-thread/multi-thread-actions.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -## NewThreadButton -![](/images/customization/comments/multi-thread/multi-thread-new-thread.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -## CloseButton -![](/images/customization/comments/multi-thread/multi-thread-close.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -## List -![](/images/customization/comments/multi-thread/multi-thread-list.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -## ResetFilterButton -![](/images/customization/comments/multi-thread/multi-thread-reset-filter.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -## ComposerContainer -![](/images/customization/comments/multi-thread/multi-thread-composer.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - diff --git a/ui-customization/features/async/comments/persistent-comment-mode-banner.mdx b/ui-customization/features/async/comments/persistent-comment-mode-banner.mdx deleted file mode 100644 index 683bb954d..000000000 --- a/ui-customization/features/async/comments/persistent-comment-mode-banner.mdx +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: Persistent Comment Mode Banner -description: The persistent comment mode banner that appears when persistent mode is enabled and user is adding a comment. ---- - -We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components. - - -## VeltPersistentCommentModeWireframe -![](/images/customization/comments/persistent-banner/persistent-banner-overview.png) - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -## CloseButton -![](/images/customization/comments/persistent-banner/persistent-banner-close.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -## Label - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -### Label.Public -![](/images/customization/comments/persistent-banner/persistent-banner-label-public.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -### Label.Private -![](/images/customization/comments/persistent-banner/persistent-banner-label-private.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - - -## 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` - - - - - -```jsx - -``` - - - - -```html - -``` - - diff --git a/ui-customization/features/async/comments/standalone-components/comment-composer.mdx b/ui-customization/features/async/comments/standalone-components/comment-composer.mdx deleted file mode 100644 index dfe18ad96..000000000 --- a/ui-customization/features/async/comments/standalone-components/comment-composer.mdx +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Comment Composer ---- - -We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components. - - -This component is a thin wrapper around the [Comment Dialog Composer](/ui-customization/features/async/comments/comment-dialog/wireframes#composer) component. - -## VeltCommentComposerWireframe - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### VeltCommentDialogWireframe.Composer -You can find the wireframe for the `Comment Composer` [here](/ui-customization/features/async/comments/comment-dialog/wireframes#composer). - - -## 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` - - - - -```jsx - -``` - - - -```html - -``` - - - - - -### Dark Mode - -`Default: false` - - - - -```jsx - -``` - - - - -```html - -``` - - - - -### Variants -- Define variants for the entire Comment Composer component. This will enable you to show different Composer UI in different parts of your app. -- Alternatively, define a variant for the Comment Dialog component and use it here. This will enable you to show different Comment Dialog UI on the DOM vs here. -- Learn more about how to define and use variants [here](/ui-customization/layout#variants). - - - - ```jsx - - ``` - - - ```html - - ``` - - \ No newline at end of file diff --git a/ui-customization/features/async/comments/standalone-components/comment-thread.mdx b/ui-customization/features/async/comments/standalone-components/comment-thread.mdx deleted file mode 100644 index 54fc5f6e8..000000000 --- a/ui-customization/features/async/comments/standalone-components/comment-thread.mdx +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: Comment Thread ---- - -We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components. - - -This component is a thin wrapper around the [Comment Dialog](/ui-customization/features/async/comments/comment-dialog/wireframes) component. - -## VeltCommentThreadWireframe - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### VeltCommentDialogWireframe -You can find the wireframe for the `Comment Dialog` [here](/ui-customization/features/async/comments/comment-dialog/wireframes). - - -## 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` - - - - -```jsx - -``` - - - -```html - -``` - - - - - -### Dark Mode -![](/images/dark-light-mode.png) - -`Default: false` - - - - -```js - -``` - - - - -```html - -``` - - - - -### Variants -- Define variants for the entire Comment Thread component. This will enable you to show different Thread UI in different parts of your app. -- Alternatively, define a variant for the Comment Dialog component and use it here. This will enable you to show different Comment Dialog UI on the DOM vs here. -- Learn more about how to define and use variants [here](/ui-customization/layout#variants). - - - - ```jsx - - ``` - - - ```html - - ``` - - \ No newline at end of file diff --git a/ui-customization/features/async/comments/text-comment-primitives.mdx b/ui-customization/features/async/comments/text-comment-primitives.mdx deleted file mode 100644 index 104735d0c..000000000 --- a/ui-customization/features/async/comments/text-comment-primitives.mdx +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Text Comment Primitives -description: Primitive-based components for building custom Text Comment interfaces with maximum flexibility. ---- - - -Explore primitives interactively in our [Storybook](https://storybook.velt.dev/). - - -### VeltTextComment - -Root text comment component. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - \ No newline at end of file diff --git a/ui-customization/features/async/comments/text-comment-wireframe-variables.mdx b/ui-customization/features/async/comments/text-comment-wireframe-variables.mdx deleted file mode 100644 index 0fc54f14a..000000000 --- a/ui-customization/features/async/comments/text-comment-wireframe-variables.mdx +++ /dev/null @@ -1,210 +0,0 @@ ---- -title: Text Comment Wireframe Variables -description: Template variables exposed by the Text Comment wireframe — read them with velt-data, velt-if, and velt-class to drive dynamic content, conditional rendering, and class toggling. ---- - - - New to wireframes? Start with [UI Customization Concepts](/ui-customization/overview) and the [Template Variables](/ui-customization/template-variables) overview. - - -## Overview - -The **Text Comment** wireframe powers the small floating toolbar that appears next to selected text. Variables below are available inside any `` tag via three forms: - -| You want to… | Use | Example | -|---|---|---| -| Display a value as text | `` | `` | -| Hide / show conditionally | `velt-if="{var}"` | `velt-if="{showAdder}"` | -| Toggle a CSS class | `velt-class="'cls': {var}"` | `velt-class="'has-words': {selectedWordsCount} > 0"` | - -All variables are mapped — reference them by their short name. You do not need the `componentConfig.` prefix. - - - **Naming conflicts — use full path.** A few names collide with mappings used by Comment Dialog. Inside a Text Comment wireframe, prefer the explicit path on the right when reading these values: - - | Conflicting name | Use this in Text Comment | - |---|---| - | `user` | `data.user` | - | `disabled` | `uiState.disabled` | - | `left` | `uiState.left` | - | `isPlanExpired` | `uiState.isPlanExpired` | - | `shadowDom` | `parentLocalUIState.shadowDom` | - - -## Data State - -Per-instance data: the active selection's position, word / character counts, and the current user. - -| Variable | Type | Description | Example | -|---|---|---|---| -| `position` | `{ top: number, left: number }` | Absolute position of the floating toolbar relative to the viewport. | `` | -| `position.top` | `number` | Top offset in pixels. | `` | -| `position.left` | `number` | Left offset in pixels. | `` | -| `selectedWordsCount` | `number` | Number of words in the active selection. | `velt-class="'has-words': {selectedWordsCount} > 0"` | -| `selectedCharactersCount` | `number` | Number of characters in the active selection. | `` | -| `allowedElementIds` | `string[]` | Element ids the selection must originate from for the tool to render. | `` | -| `contextId` | `string` \| `null` | Context id linking this tool to a host context. | `` | -| `data.user` | [`User`](/api-reference/sdk/models/data-models#user) \| `null` | Currently identified end-user. | `` | - -## UI State - -Per-instance UI flags driven by the tool itself. - -| Variable | Type | Description | Example | -|---|---|---|---| -| `showAdder` | `boolean` | Floating "add comment" adder is visible for the current selection. | `velt-if="{showAdder}"` | -| `commentToolEnabled` | `boolean` | Comment Tool is enabled at the workspace level. | `velt-class="'tool-on': {commentToolEnabled}"` | -| `isUserAllowed` | `boolean` | Current user has permission to add text comments. | `velt-if="{isUserAllowed}"` | -| `enableTextComments` | `boolean` | Text Comments feature is enabled by config. | `velt-if="{enableTextComments}"` | -| `rewriterEnabled` | `boolean` | AI rewriter feature is enabled. | `velt-if="{rewriterEnabled}"` | -| `rewriterDefaultUIEnabled` | `boolean` | Default rewriter UI should render (instead of a custom one). | `velt-if="{rewriterDefaultUIEnabled}"` | -| `MIN_ALLOWED_WORDS_COUNT` | `number` | Minimum words required before the toolbar shows. | `` | -| `MIN_ALLOWED_CHARACTERS_COUNT` | `number` | Minimum characters required before the toolbar shows. | `` | -| `MAX_ALLOWED_CHARACTERS_COUNT` | `number` | Maximum characters allowed before the toolbar hides. | `` | -| `uiState.disabled` | `boolean` | Tool is disabled by host configuration. | `velt-class="'disabled': {uiState.disabled}"` | -| `uiState.left` | `number` | Horizontal offset of the toolbar (raw value before `position` resolution). | `` | -| `uiState.isPlanExpired` | `boolean` | Workspace plan is expired. | `velt-class="'plan-expired': {uiState.isPlanExpired}"` | -| `darkMode` | `boolean` | Dark mode is active. | `velt-class="'dark': {darkMode}"` | -| `variant` | `string` | Per-instance variant tag set on the host element. | `` | -| `parentLocalUIState.shadowDom` | `boolean` | Shadow-DOM rendering is enabled for this instance. | _Host config — set via element attribute._ | - - - **Global config (read-only, internal).** `shadowDom` lives on an internal `globalConfigSignal` not exposed to wireframes — it is reflected onto each primitive's local state, so use `{parentLocalUIState.shadowDom}` to read it. - - -## Common Props - -Every Text Comment primitive accepts: - -| React Prop | HTML Attribute | Type | Default | Description | -|---|---|---|---|---| -| `defaultCondition` | `default-condition` | `boolean \| "true" \| "false"` | `true` | When `false`, the component always renders regardless of internal state. | - -Signal inputs (for parent-child component composition): -- `[componentConfigSignal]` — shared per-instance config signal (selection position, user, counts, allowed elements). -- `[parentLocalUIState]` — per-instance UI state signal (`darkMode`, `variant`, `shadowDom`). - -## Type Reference - -Types referenced by the variables above are documented in [Data Models](/api-reference/sdk/models/data-models): - -| Type | Description | -|---|---| -| [`User`](/api-reference/sdk/models/data-models#user) | Identified end-user object. | - -## Subcomponents - -Each subcomponent below has its own wireframe tag. - -### `text-comment-tool` (root) - -The root tool that renders next to a text selection. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None — root only sees common variables. | -| `shouldShow` | Renders only when an active selection exists inside an allowed element and word / character counts fall within the configured min / max. | - - - -```jsx - - words selected - - -``` - - -```html - - words selected - - -``` - - - ---- - -### `text-comment-toolbar` - -The toolbar wrapper that hosts the action buttons. - -- **Public element:** `` -- **Wireframe tag:** `` -- **Children (own wireframes):** `*-toolbar-comment-annotation`, `*-toolbar-copywriter`, `*-toolbar-generic`, `*-toolbar-divider`. - -| Property | Value | -|---|---| -| Extra variables | None beyond common variables. | - ---- - -### `text-comment-toolbar-comment-annotation` - -The "Comment" action button — clicking attaches a new annotation to the selected text. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | - ---- - -### `text-comment-toolbar-copywriter` - -The "AI rewrite" / copywriter action button. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | -| `shouldShow` | `rewriterEnabled === true` | - ---- - -### `text-comment-toolbar-generic` - -A generic, customisable action position for an extra button. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | - ---- - -### `text-comment-toolbar-divider` - -Vertical separator between toolbar items. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | - -## Deeply-Nested Wireframe Tags - -### Text Comment root tag - -| Tag | Notes | Example | -|---|---|---| -| `` | Outer wireframe — wraps the tool. | (composes the tool) | - -## Related - -- [Text Comment Primitives](./text-comment-primitives) — granular components shared across the tool and toolbar. -- [Text Comment Tool Wireframes](./text-comment/text-comment-tool/wireframes) — composition reference for the tool wireframe. -- [Text Comment Toolbar Wireframes](./text-comment/text-comment-toolbar/wireframes) — composition reference for the toolbar wireframe. -- [Template Variables](/ui-customization/template-variables) — overview of the `velt-data` / `velt-if` / `velt-class` system. diff --git a/ui-customization/features/async/comments/text-comment/text-comment-tool/primitives.mdx b/ui-customization/features/async/comments/text-comment/text-comment-tool/primitives.mdx deleted file mode 100644 index 35fe1a755..000000000 --- a/ui-customization/features/async/comments/text-comment/text-comment-tool/primitives.mdx +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Text Comment Tool Primitives -description: Primitive-based components for building custom Text Comment Tool interfaces with maximum flexibility. ---- - - -Explore primitives interactively in our [Storybook](https://storybook.velt.dev/). - - -Tool component used to initiate text commenting. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - \ No newline at end of file diff --git a/ui-customization/features/async/comments/text-comment/text-comment-tool/wireframes.mdx b/ui-customization/features/async/comments/text-comment/text-comment-tool/wireframes.mdx deleted file mode 100644 index 89542d234..000000000 --- a/ui-customization/features/async/comments/text-comment/text-comment-tool/wireframes.mdx +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Text Comment Tool Wireframes -description: Wireframe components for building custom Text Comment Tool interfaces with maximum flexibility. ---- - -We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components. - - -## VeltTextCommentToolWireframe -![](/images/customization/comments/text-comment-tool/comment-text-tool.png) - - -```jsx - - - {/* Your custom element */} - - -``` - - -```html - - - - - -``` - - - - -## 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` - - - - - -```jsx - -``` - - - - -```jsx - -``` - - - -### 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 text comment tool. - - - -**Using Props:** -```js - -``` - -**Using API:** -```jsx -const commentElement = client.getCommentElement(); -commentElement.enableDarkMode(); -commentElement.disableDarkMode(); -``` - - - - -**Using Props:** -```js - -``` - -**Using API:** - -```jsx -const commentElement = Velt.getCommentElement(); -commentElement.enableDarkMode(); -commentElement.disableDarkMode(); -``` - - \ No newline at end of file diff --git a/ui-customization/features/async/comments/text-comment/text-comment-toolbar/primitives.mdx b/ui-customization/features/async/comments/text-comment/text-comment-toolbar/primitives.mdx deleted file mode 100644 index 4f43ea962..000000000 --- a/ui-customization/features/async/comments/text-comment/text-comment-toolbar/primitives.mdx +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: Text Comment Toolbar Primitives -description: Primitive-based components for building custom Text Comment Toolbar interfaces with maximum flexibility. - ---- - - -Explore primitives interactively in our [Storybook](https://storybook.velt.dev/). - - -### VeltTextCommentToolbar - -Toolbar container for text comment tools. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltTextCommentToolbarCommentAnnotation - -Comment annotation item within the text comment toolbar. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltTextCommentToolbarDivider - -Divider element within the text comment toolbar. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltTextCommentToolbarCopywriter - -Copywriter tool item within the text comment toolbar. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltTextCommentToolbarGeneric - -Generic tool item within the text comment toolbar. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - \ No newline at end of file diff --git a/ui-customization/features/async/comments/text-comment/text-comment-toolbar/wireframes.mdx b/ui-customization/features/async/comments/text-comment/text-comment-toolbar/wireframes.mdx deleted file mode 100644 index 42be99e07..000000000 --- a/ui-customization/features/async/comments/text-comment/text-comment-toolbar/wireframes.mdx +++ /dev/null @@ -1,177 +0,0 @@ ---- -title: Text Comment Toolbar Wireframes -description: Wireframe components for building custom Text Comment Toolbar interfaces with maximum flexibility. - ---- - -We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components. - - -## VeltTextCommentToolbarWireframe -![](/images/customization/comments/text-comment-toolbar/comment-text-toolbar-overview.png) - - -```jsx - - - - - - - - -``` - - -```html - - - - - - - - -``` - - - -## CommentAnnotation -![](/images/customization/comments/text-comment-toolbar/comment-text-toolbar-comment-tool.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -## Divider -![](/images/customization/comments/text-comment-toolbar/comment-text-toolbar-divider.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -## Copywriter -![](/images/customization/comments/text-comment-toolbar/comment-text-toolbar-copywriter.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -## Generic -![](/images/customization/comments/text-comment-toolbar/comment-text-toolbar-generic.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - - -## 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` - - - - - -```jsx - -``` - - - - -```jsx - -``` - - - -### Dark Mode -By default, all components are in Light Mode, but there are several properties and methods to enable Dark Mode. - -Default: `false` - - - -**Using Props:** -```js - -``` - -**Using API:** -```jsx -const commentElement = client.getCommentElement(); -commentElement.enableDarkMode(); -commentElement.disableDarkMode(); -``` - - - - -**Using Props:** -```js - -``` - -**Using API:** - -```jsx -const commentElement = Velt.getCommentElement(); -commentElement.enableDarkMode(); -commentElement.disableDarkMode(); -``` - - - - diff --git a/ui-customization/features/async/inline-reactions.mdx b/ui-customization/features/async/inline-reactions.mdx deleted file mode 100644 index 793a567f6..000000000 --- a/ui-customization/features/async/inline-reactions.mdx +++ /dev/null @@ -1,224 +0,0 @@ ---- -title: Inline Reactions Section -description: This component is used to render the reaction tool and all the reactions. ---- - - -We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components. - - -## VeltInlineReactionsSectionWireframe -![](/images/customization/comments/inline-reactions/inline-reactions-overview.png) - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -### Panel -![](/images/customization/comments/inline-reactions/inline-reactions-overview-breakdown.png) - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -#### ToolContainer -![](/images/customization/comments/inline-reactions/inline-reactions-tool-container.png) - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -##### VeltReactionToolWireframe - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### List -![](/images/customization/comments/inline-reactions/inline-reactions-list.png) - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -##### VeltReactionPinWireframe - - -```jsx - - - -``` - - -```html - - - -``` - - - - -## 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` - - - - -```jsx - -``` - - - - -```jsx - -``` - - - - - -### Dark Mode -Default: `false` - - - - -**Using Props:** -```js - -``` - -**Using API:** -```js -const reactionElement = client.getReactionElement(); -reactionElement.enableDarkMode(); -reactionElement.disableDarkMode(); -``` - - - -**Using Props:** -```html - -``` - -**Using API:** -```js -const reactionElement = Velt.getReactionElement(); -reactionElement.enableDarkMode(); -reactionElement.disableDarkMode(); -``` - - - - -## Variants -### Pre-defined Variants - -The Inline Reactions has 1 pre-defined variant: - - `inline`: This will customize the default components inside the Inline Reactions Component. - - You can define your own variants and use them in different places of your app. - - - -```jsx - - - -``` - - -```html - - - -``` - - \ No newline at end of file diff --git a/ui-customization/features/async/notifications/notifications-panel/primitives.mdx b/ui-customization/features/async/notifications/notifications-panel/primitives.mdx deleted file mode 100644 index e7863087b..000000000 --- a/ui-customization/features/async/notifications/notifications-panel/primitives.mdx +++ /dev/null @@ -1,1630 +0,0 @@ ---- -title: Notifications Panel Primitives -description: Primitive components for building custom Notifications panel interfaces. ---- - - -Explore primitives interactively in our [Storybook](https://storybook.velt.dev/). - - -## Overview - -The Notifications Primitives API provides granular components that can be used independently to build fully custom notification tool and panel interfaces. All primitives share a common set of inputs documented below; list-type primitives additionally support template forwarding via slot attributes (`[listItemTemplate]`, `[itemTemplate]`, `[triggerTemplate]`). - -## Common Inputs - -All Notifications primitive components accept the following inputs. See [`NotificationsPrimitiveCommonProps`](/api-reference/sdk/models/data-models#notificationsprimitivecommonprops) for the full type definition. - -| React Prop | HTML Attribute | Type | Default | Description | -|------------|----------------|------|---------|-------------| -| `variant` | `variant` | `string` | — | Visual variant for the component. | -| `darkMode` | `dark-mode` | `boolean` | `false` | Enables dark mode rendering. | -| `shadowDom` | `shadow-dom` | `boolean` | `false` | Renders the component inside a Shadow DOM. | -| `parentLocalUIState` | `parent-local-ui-state` | `object` | — | Local UI state passed down from a parent primitive. | - ---- - -## Components - -### VeltNotificationsToolIcon - -Icon displayed in the notifications tool trigger button. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsToolUnreadIcon - -Icon shown in the notifications tool trigger when there are unread notifications. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsToolLabel - -Text label displayed in the notifications tool trigger button. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsToolUnreadCount - -Badge showing the count of unread notifications on the tool trigger. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelTitle - -Title container at the top of the notifications panel. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelTitleText - -Text displayed inside the notifications panel title. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelHeader - -Header bar of the notifications panel containing tabs and action buttons. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelHeaderTabForYou - -Tab in the panel header that filters notifications addressed to the current user. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelHeaderTabPeople - -Tab in the panel header that groups notifications by people. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelHeaderTabDocuments - -Tab in the panel header that groups notifications by document. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelHeaderTabAll - -Tab in the panel header that shows all notifications. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelContent - -Main content area of the notifications panel that renders the active tab's view. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelContentForYou - -Content view for the "For You" tab listing notifications directed at the current user. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelContentAll - -Content view for the "All" tab showing every notification. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelContentAllList - -Scrollable list of all notifications inside the "All" content view. Forwards `[listItemTemplate]` to each `VeltNotificationsPanelContentAllListItem` rendered inside it. - - - -```jsx - -``` - -**Props:** Common inputs (see [Common Inputs](#common-inputs) section) plus: - -| Prop | Type | Description | -|------|------|-------------| -| `listItemTemplate` | `TemplateRef` | Custom template forwarded to each list item child. | - - -```html - -``` - -**Attributes:** Common attributes (see [Common Inputs](#common-inputs) section) plus: - -| Attribute | Type | Description | -|-----------|------|-------------| -| `list-item-template` | `TemplateRef` | Custom template forwarded to each list item child. | - - - ---- - -### VeltNotificationsPanelContentAllListItem - -A single notification row inside the "All" list. Supports `[listItemTemplate]` for custom row templates. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelContentAllListItemLabel - -Label displayed on a notification row in the "All" list. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelContentAllListItemContent - -Content body of a single notification row in the "All" list. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelContentAllReadContainer - -Container that groups already-read notifications in the "All" view. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelContentPeople - -Content view for the "People" tab grouping notifications by sender. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelContentPeopleList - -Scrollable list of people groups inside the "People" content view. Forwards `[listItemTemplate]` to each `VeltNotificationsPanelContentPeopleListItem` rendered inside it. - - - -```jsx - -``` - -**Props:** Common inputs (see [Common Inputs](#common-inputs) section) plus: - -| Prop | Type | Description | -|------|------|-------------| -| `listItemTemplate` | `TemplateRef` | Custom template forwarded to each list item child. | - - -```html - -``` - -**Attributes:** Common attributes (see [Common Inputs](#common-inputs) section) plus: - -| Attribute | Type | Description | -|-----------|------|-------------| -| `list-item-template` | `TemplateRef` | Custom template forwarded to each list item child. | - - - ---- - -### VeltNotificationsPanelContentPeopleListItem - -A single person group row in the "People" list. Supports `[listItemTemplate]` for custom row templates. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelContentPeopleListItemAvatar - -Avatar image for a person in the "People" list. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelContentPeopleListItemName - -Display name for a person in the "People" list. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelContentPeopleListItemCount - -Unread notification count badge for a person in the "People" list. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelContentPeopleListItemContent - -Expanded notification content displayed under a person row in the "People" list. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelContentDocuments - -Content view for the "Documents" tab grouping notifications by document. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelContentDocumentsList - -Scrollable list of document groups inside the "Documents" content view. Forwards `[listItemTemplate]` to each `VeltNotificationsPanelContentDocumentsListItem` rendered inside it. - - - -```jsx - -``` - -**Props:** Common inputs (see [Common Inputs](#common-inputs) section) plus: - -| Prop | Type | Description | -|------|------|-------------| -| `listItemTemplate` | `TemplateRef` | Custom template forwarded to each list item child. | - - -```html - -``` - -**Attributes:** Common attributes (see [Common Inputs](#common-inputs) section) plus: - -| Attribute | Type | Description | -|-----------|------|-------------| -| `list-item-template` | `TemplateRef` | Custom template forwarded to each list item child. | - - - ---- - -### VeltNotificationsPanelContentDocumentsListItem - -A single document group row in the "Documents" list. Supports `[listItemTemplate]` for custom row templates. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelContentDocumentsListItemName - -Document name displayed in a "Documents" list row. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelContentDocumentsListItemCount - -Unread notification count badge for a document in the "Documents" list. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelContentDocumentsListItemContent - -Expanded notification content displayed under a document row in the "Documents" list. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelContentDocumentsListItemUnread - -Unread indicator shown on a document row in the "Documents" list. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelContentList - -Generic scrollable notification list used across multiple tab views. Forwards `[listItemTemplate]` to each `VeltNotificationsPanelContentListItem` rendered inside it. - - - -```jsx - -``` - -**Props:** Common inputs (see [Common Inputs](#common-inputs) section) plus: - -| Prop | Type | Description | -|------|------|-------------| -| `listItemTemplate` | `TemplateRef` | Custom template forwarded to each list item child. | -| `listType` | `'all' \| 'for-you'` | Selects which notification feed to render from the shared context. Default: `'all'`. | -| `documentId` | `string` | Renders notifications for the given document from `notificationsByDocumentId`. | - -`listType` and `documentId` are ignored when `notifications` is bound directly. - - -```html - -``` - -**Attributes:** Common attributes (see [Common Inputs](#common-inputs) section) plus: - -| Attribute | Type | Description | -|-----------|------|-------------| -| `list-item-template` | `TemplateRef` | Custom template forwarded to each list item child. | -| `list-type` | `'all' \| 'for-you'` | Selects which notification feed to render from the shared context. Default: `"all"`. | -| `document-id` | `string` | Renders notifications for the given document from `notificationsByDocumentId`. | - -`list-type` and `document-id` are ignored when `[notifications]` is bound directly. - - - ---- - -### VeltNotificationsPanelContentListItem - -A single row in the generic notification list. Supports `[listItemTemplate]` for custom row templates. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelContentListItemAvatar - -User avatar displayed on a notification list row. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelContentListItemUnread - -Unread dot indicator on a notification list row. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelContentListItemHeadline - -Primary headline text of a notification list row. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelContentListItemBody - -Body text beneath the headline on a notification list row. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelContentListItemFileName - -File or document name displayed on a notification list row. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelContentListItemTime - -Relative or absolute timestamp on a notification list row. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelContentLoadMore - -Button to load additional notifications beyond the initial set. - - - -```jsx - -``` - -**Props:** Common inputs (see [Common Inputs](#common-inputs) section) plus: - -| Prop | Type | Description | -|------|------|-------------| -| `listType` | `'all' \| 'for-you'` | Selects which notification feed to load more from. Default: `'all'`. | -| `documentId` | `string` | Loads more notifications for the given document from `notificationsByDocumentId`. | - -`listType` and `documentId` are ignored when `notifications` is bound directly. - - -```html - -``` - -**Attributes:** Common attributes (see [Common Inputs](#common-inputs) section) plus: - -| Attribute | Type | Description | -|-----------|------|-------------| -| `list-type` | `'all' \| 'for-you'` | Selects which notification feed to load more from. Default: `"all"`. | -| `document-id` | `string` | Loads more notifications for the given document from `notificationsByDocumentId`. | - -`list-type` and `document-id` are ignored when `[notifications]` is bound directly. - - - ---- - -### VeltNotificationsPanelCloseButton - -Button that closes the notifications panel. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelReadAllButton - -Button that marks all notifications as read. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelViewAllButton - -Button that navigates to a full notifications view. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelSkeleton - -Loading skeleton displayed while notification data is being fetched. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelSettingsButton - -Button that opens the notifications settings panel. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelSettings - -Container for the notifications settings view. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelSettingsHeader - -Header bar of the notifications settings view. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelSettingsHeaderTitle - -Title text displayed in the notifications settings header. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelSettingsTitle - -Section title within the notifications settings view. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelSettingsDescription - -Descriptive text for a settings section. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelSettingsList - -List container for notification settings items. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelSettingsMuteAllTitle - -Title label for the mute-all notifications toggle row. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelSettingsMuteAllDescription - -Description text for the mute-all notifications toggle row. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelSettingsMuteAllToggle - -Toggle switch that mutes all notifications. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelSettingsAccordion - -Accordion container for grouped notification settings options. Forwards `[itemTemplate]` to each `VeltNotificationsPanelSettingsAccordionContentItem` and `[triggerTemplate]` to each `VeltNotificationsPanelSettingsAccordionTrigger` rendered inside it. - - - -```jsx - -``` - -**Props:** Common inputs (see [Common Inputs](#common-inputs) section) plus: - -| Prop | Type | Description | -|------|------|-------------| -| `itemTemplate` | `TemplateRef` | Custom template forwarded to each accordion content item child. | -| `triggerTemplate` | `TemplateRef` | Custom template forwarded to each accordion trigger child. | - - -```html - -``` - -**Attributes:** Common attributes (see [Common Inputs](#common-inputs) section) plus: - -| Attribute | Type | Description | -|-----------|------|-------------| -| `item-template` | `TemplateRef` | Custom template forwarded to each accordion content item child. | -| `trigger-template` | `TemplateRef` | Custom template forwarded to each accordion trigger child. | - - - ---- - -### VeltNotificationsPanelSettingsAccordionTrigger - -Clickable trigger row that expands or collapses a settings accordion section. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelSettingsAccordionTriggerLabel - -Label text displayed on a settings accordion trigger row. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelSettingsAccordionTriggerIcon - -Icon displayed on a settings accordion trigger row. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelSettingsAccordionTriggerSelectedValue - -Displays the currently selected value on a settings accordion trigger row. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelSettingsAccordionContent - -Expanded content area of a settings accordion section. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelSettingsAccordionContentItem - -A single selectable option inside an expanded settings accordion. Supports `[itemTemplate]` for custom option templates. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelSettingsAccordionContentItemLabel - -Label text for a settings accordion content option. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelSettingsAccordionContentItemIcon - -Icon for a settings accordion content option. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelSettingsBackButton - -Button that navigates back from the settings view to the main notifications panel. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsPanelSettingsFooter - -Footer area of the notifications settings view. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - diff --git a/ui-customization/features/async/notifications/notifications-panel/wireframe-variables.mdx b/ui-customization/features/async/notifications/notifications-panel/wireframe-variables.mdx deleted file mode 100644 index a607fef8c..000000000 --- a/ui-customization/features/async/notifications/notifications-panel/wireframe-variables.mdx +++ /dev/null @@ -1,512 +0,0 @@ ---- -title: Notifications Panel Wireframe Variables -description: Template variables exposed by the Notifications Panel wireframe — read them with velt-data, velt-if, and velt-class to drive dynamic content, conditional rendering, and class toggling. ---- - - - New to wireframes? Start with [UI Customization Concepts](/ui-customization/overview) and the [Template Variables](/ui-customization/template-variables) overview. - - -## Overview - -The **Notifications Panel** wireframe exposes the variables below. Use them inside any `` tag via three forms: - -| You want to… | Use | Example | -|---|---|---| -| Display a value as text | `` | `` | -| Hide / show conditionally | `velt-if="{var}"` | `velt-if="{settingsOpen}"` | -| Toggle a CSS class | `velt-class="'cls': {var}"` | `velt-class="'tab-{selectedTab}': true"` | - -All variables are mapped — reference them by their short name. You do not need the `componentConfig.` prefix. - -## Data State - -Per-feature data: the four notification groupings, the active settings tree, and the current document name. - -| Variable | Type | Description | Example | -|---|---|---|---| -| `notificationsForYouInSession` | [`Notification`](/api-reference/sdk/models/data-models#notification)`[]` \| `null` | Notifications matched to the current user. | `` | -| `notificationsInSession` | [`Notification`](/api-reference/sdk/models/data-models#notification)`[]` \| `null` | All in-session notifications (combined feed). | `` | -| `notificationsByUserMap` | `Record` | Notifications grouped by user email. | `` | -| `notificationsByDocumentId` | `{ documentId: string; notifications: Notification[] }[]` \| `null` | Notifications grouped by document. | `` | -| `notificationsByDate` | `{ date: string; displayName: string; notifications: Notification[] }[]` \| `null` | Notifications grouped by date bucket. | `` | -| `currentDocumentName` | `string` | Display name of the current document. | `` | -| `unreadNotificationsForYou` | `number` | Unread-count badge for the For-you tab (also exposed by the notifications-tool). | `` | -| `settingsConfig` | [`NotificationInitialSettingsConfig`](/api-reference/sdk/models/data-models#notificationinitialsettingsconfig)`[]` | Settings-tree configuration for the in-panel settings view. | `` | -| `settingsSelectedOption` | `Record` | Selected option per accordion. | `` | - -## UI State - -Per-instance UI flags driven by the panel itself. - -| Variable | Type | Description | Example | -|---|---|---|---| -| `selectedTab` | `'forYou'` \| `'people'` \| `'documents'` \| `'all'` | Active tab id. | `velt-class="'tab-{selectedTab}': true"` | -| `tabConfig` | [`NotificationTabConfig`](/api-reference/sdk/models/data-models#notificationtabconfig) \| `null` | Per-tab visibility config (`forYou`, `people`, `documents`, `all`). | `velt-if="{tabConfig.forYou}"` | -| `TABS` | `{ ForYou: 'forYou'; People: 'people'; Documents: 'documents'; All: 'all' }` | Constant tab-id map. Useful when comparing to `selectedTab`. | `velt-class="'is-foryou': '{selectedTab} === {TABS.ForYou}'"` | -| `tabPage` | `{ forYou: number; people: number; documents: number; all: number }` | Pagination cursor per tab. | `` | -| `pageSize` | `number` | Page size (default `5`). | `` | -| `panelOpenMode` | `'popover'` \| `'sidebar'` \| ... | Layout mode for the panel. | `velt-class="'mode-{panelOpenMode}': true"` | -| `settingsOpen` | `boolean` | Settings view is open. | `velt-class="'settings-open': {settingsOpen}"` | -| `settingsAccordionExpanded` | `Record` | Per-accordion expanded state, keyed by setting id. | `velt-class="'inbox-open': {settingsAccordionExpanded.inbox}"` | -| `settingsMutedAll` | `boolean` | Master "mute all" toggle state. | `velt-class="'muted-all': {settingsMutedAll}"` | -| `settingsItemRecentlyClosed` | `boolean` | Triggers the close animation. | `velt-class="'recently-closed': {settingsItemRecentlyClosed}"` | -| `settingsLayout` | `'accordion'` \| ... | Settings UI layout. | `velt-class="'layout-{settingsLayout}': true"` | -| `tabCount` | `number` | Number of visible tabs. | `` | -| `usersExpanded` | `Record` | Per-user accordion expanded state, keyed by email. | `velt-class="'expanded': {usersExpanded[notification.from.email]}"` | -| `documentExpanded` | `Record` | Per-document accordion expanded state, keyed by document id. | `velt-class="'expanded': {documentExpanded[notification.documentId]}"` | -| `shadowDom` | `boolean` | Shadow-DOM wrapping flag. | _Host config — set via element attribute._ | -| `notificationsPanelVisible` | `boolean` | Panel itself is currently visible (also exposed by the notifications-tool). | `velt-class="'panel-visible': {notificationsPanelVisible}"` | -| `darkMode` | `boolean` | Dark mode is active. | `velt-class="'theme-dark': {darkMode}"` | -| `variant` | `string` | Per-instance variant tag set on the host element. | `` | - -## Feature State - -Capability flags toggled via SDK config. - -| Variable | Type | Description | Example | -|---|---|---|---| -| `settingsEnabled` | `boolean` | Settings view is available. | `velt-if="{settingsEnabled}"` | - -## Common Props - -Every Notifications Panel primitive accepts: - -| React Prop | HTML Attribute | Type | Default | Description | -|---|---|---|---|---| -| `defaultCondition` | `default-condition` | `boolean \| "true" \| "false"` | `true` | When `false`, the component always renders regardless of internal state. | - -Signal inputs (for parent-child component composition): -- `[componentConfigSignal]` — shared per-feature config signal (notification groupings, tab config, settings). -- `[parentLocalUIState]` — per-instance UI state signal (`darkMode`, `variant`). - -## Context-Specific Variables - -These are only resolvable inside the nested wireframe tags noted in the **Available in** column. Each is injected by the iteration primitive that owns the tag. - -| Variable | Type | Available in | Example | -|---|---|---|---| -| `notification` | [`Notification`](/api-reference/sdk/models/data-models#notification) | `` and descendants | `` | -| `notifications` | [`Notification`](/api-reference/sdk/models/data-models#notification)`[]` | `*-content-list`, `*-content-load-more` | `` | -| `isLoadMoreVisible` | `boolean` | `*-content-load-more` | `velt-if="{isLoadMoreVisible}"` | -| `isAllRead` | `boolean` | `*-content-all-read-container` | `velt-if="{isAllRead}"` | -| `isDefault` | `boolean` | `` and its icon/label descendants | `velt-class="'default': {isDefault}"` | - -`isDefault` is `true` when the notification setting option is the default value for that settings accordion row. - -## Type Reference - -Types referenced by the variables above are documented in [Data Models](/api-reference/sdk/models/data-models): - -| Type | Description | -|---|---| -| [`Notification`](/api-reference/sdk/models/data-models#notification) | A single notification (id, type, title, message, icon, from, to, documentId, documentName, createdAt, read, link, metadata). | -| [`User`](/api-reference/sdk/models/data-models#user) | Identified end-user object (used by `notification.from`, `notification.to`). | -| [`NotificationInitialSettingsConfig`](/api-reference/sdk/models/data-models#notificationinitialsettingsconfig) | One row of the settings tree (id, name, type, options). | -| [`NotificationConfigValue`](/api-reference/sdk/models/data-models#notificationconfigvalue) | A selectable value inside a settings dropdown. | -| [`NotificationTabConfig`](/api-reference/sdk/models/data-models#notificationtabconfig) | Per-tab visibility flags (`forYou`, `people`, `documents`, `all`). | - -## Subcomponents - -Each subcomponent below has its own wireframe tag. The tables show extra variables beyond the common set, the `shouldShow` condition, and host CSS classes. - -### `notifications-panel` (root) - -The root primitive — the `` element customers place in their app. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None — root only sees common variables. | -| Host class | `v-notifications-panel-container velt-notifications-panel` | -| Conditional classes | `bottom-sheet` (when `bottomSheetMode`), `velt-notifications-panel--sidebar-panel` (when `panelOpenMode === 'sidebar'`) | - ---- - -### `notifications-panel-title` - -The panel title bar (heading + actions toolbar). - -- **Public element:** `` -- **Wireframe tag:** `` -- **Children:** `*-title-text`, `*-close-button`, `*-settings-button`, `*-read-all-button`, `*-view-all-button`. - -| Property | Value | -|---|---| -| Extra variables | None beyond common variables. | -| Host classes | `velt-notification-panel--title` (heading), `velt-notification-panel--actions` (actions toolbar) | - ---- - -### `notifications-panel-title-text` - -The text inside the title heading. Defaults to "Notifications". - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | - ---- - -### `notifications-panel-close-button` - -Close button — clicking calls `componentConfig.closeNotificationsPanel()`. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | -| Host class | `velt-notification-panel--close-button` | - ---- - -### `notifications-panel-settings-button` - -Gear-icon button that opens the settings view. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | -| `shouldShow` | Parent gates rendering on `settingsEnabled === true`. | -| Host classes | `velt-notifications-panel--settings-button-container` (outer wrapper), `velt-notifications-panel--settings-button` (inner button) | - ---- - -### `notifications-panel-read-all-button` - -"Mark all as read" button. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | -| Host class | `v-read-all-btn velt-notifications-panel--read-all-button` | - ---- - -### `notifications-panel-view-all-button` - -"View all" link that takes the user to the full notifications history. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | -| Host class | `all-notifications-view-all-btn velt-notifications-panel--view-all-button` | - ---- - -### `notifications-panel-skeleton` - -Skeleton loader shown while notifications are being fetched. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | -| `shouldShow` | Driven by parent — renders while `isLoading === true`. | -| Host classes | `skeleton skeleton-item-card` (card), `shine skeleton-item-avatar` (avatar shimmer), `skeleton-item-info` / `skeleton-iten-name-info` / `skeleton-item-body-info` (layout pieces) | - ---- - -### `notifications-panel-header` - -Tab strip across the top of the panel. Renders the four tab children. - -- **Public element:** `` -- **Wireframe tag:** `` -- **Children:** `*-tab-for-you`, `*-tab-people`, `*-tab-documents`, `*-tab-all`. - -| Property | Value | -|---|---| -| Extra variables | None at the header level. | -| Host classes | `v-notifications-panel-header velt-notifications-panel--header` (wrapper), `v-tabs-container velt-notifications-panel--tabs-container` (tabs container) | - ---- - -### `notifications-panel-header-tab-for-you` / `-tab-people` / `-tab-documents` / `-tab-all` - -The four tab buttons. Same shape; differ only in which `selectedTab` value they highlight. - -- **Public elements:** ``, ``, ``, `` -- **Wireframe tags:** `` (and the three analogous tags). - -| Property | Value | -|---|---| -| Extra variables | None. | -| `shouldShow` | Each tab is gated on `tabConfig.` being truthy. The `selected` modifier class is applied when `selectedTab === TABS.`. | -| Host class | `v-tab velt-notifications-panel--tab` | -| Conditional class | `selected` / `velt-notifications-panel--tab-selected` (when `selectedTab === TABS.`) | - ---- - -### `notifications-panel-content` - -The body container. Renders one of four content children based on `selectedTab`. - -- **Public element:** `` -- **Wireframe tag:** `` -- **Children:** `*-content-for-you`, `*-content-people`, `*-content-documents`, `*-content-all`, `*-content-list`, `*-content-load-more`, `*-content-all-read-container`. - -| Property | Value | -|---|---| -| Extra variables | None at the container level. | - ---- - -### `notifications-panel-content-for-you` / `-content-all` - -Tab body for the For-you / All tabs. Both render a chronological list (`notificationsByDate` for All, `notificationsForYouInSession` for For-you). - -- **Wireframe tags:** ``, ``. - -| Property | Value | -|---|---| -| Extra variables | None at the container level — descendants receive `notification` per iteration. | -| `shouldShow` | Gated by parent on `selectedTab` matching this tab id. | -| Host class | `v-notifications velt-notifications-panel-content` | -| Conditional class | `velt-notifications-panel-content--sidebar-panel` (when `panelOpenMode === 'sidebar'`) | - ---- - -### `notifications-panel-content-people` - -Tab body for the People tab. Iterates `notificationsByUserMap`. - -- **Wireframe tag:** ``. - -| Property | Value | -|---|---| -| Extra variables | None at the container level — list-item descendants receive `user` and `userNotifications` per row. | -| `shouldShow` | Gated by parent on `selectedTab === 'people'`. | -| Host class | `v-users velt-notifications-panel-content--people` | - ---- - -### `notifications-panel-content-documents` - -Tab body for the Documents tab. Iterates `notificationsByDocumentId`. - -- **Wireframe tag:** ``. - -| Property | Value | -|---|---| -| Extra variables | None at the container level — list-item descendants receive `documentId`, `documentName`, `documentNotifications`. | -| `shouldShow` | Gated by parent on `selectedTab === 'documents'`. | -| Host class | `v-documents velt-notifications-panel-content--document` | - ---- - -### `notifications-panel-content-list` - -Iteration primitive that renders one row per notification. Injected with the per-tab notifications array. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Variable | Type | Example | -|---|---|---| -| `notification` | [`Notification`](/api-reference/sdk/models/data-models#notification) | `` | -| `notifications` | [`Notification`](/api-reference/sdk/models/data-models#notification)`[]` | `` | - ---- - -### `notifications-panel-content-load-more` - -"Load more" button at the bottom of paginated lists. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Variable | Type | Example | -|---|---|---| -| `notifications` | [`Notification`](/api-reference/sdk/models/data-models#notification)`[]` | `` | -| `isLoadMoreVisible` | `boolean` | `velt-if="{isLoadMoreVisible}"` | - -| Property | Value | -|---|---| -| `shouldShow` | `isLoadMoreVisible === true` | -| Host class | `v-load-more-btn velt-notifications-panel--content-load-more` | - ---- - -### `notifications-panel-content-all-read-container` - -Empty-state shown when the user has no unread notifications. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Variable | Type | Example | -|---|---|---| -| `isAllRead` | `boolean` | `velt-if="{isAllRead}"` | - -| Property | Value | -|---|---| -| `shouldShow` | `isAllRead === true` | -| Host classes | `all-notifications-read-container velt-notifications-panel--all-read-container` (wrapper), `notifications-read-emoji velt-notifications-panel--emoji` (emoji icon), `all-notifications-read-message velt-notifications-panel--message` (message text) | - ---- - -### `notifications-panel-settings` - -The settings view inside the panel. Renders header + accordion list + footer (mute-all section). Visible when the user clicks the settings button. - -- **Public element:** `` -- **Wireframe tag:** `` -- **Children:** `*-settings-header`, `*-settings-back-button`, `*-settings-title`, `*-settings-description`, `*-settings-accordion`, `*-settings-list`, `*-settings-footer`, `*-settings-mute-all-title`, `*-settings-mute-all-description`, `*-settings-mute-all-toggle`. - -| Property | Value | -|---|---| -| Extra variables | None at the container level — accordion descendants receive `setting` and `option` per iteration. | -| `shouldShow` | `settingsOpen === true`. The button-rendering parent additionally requires `settingsEnabled === true`. | -| Host classes | `velt-notification-panel--settings` (wrapper), `velt-notification-panel--settings-section` (each section) | - -## Deeply-Nested Wireframe Tags - -The four tab content primitives + per-tab list-items + the settings accordion all decompose further. Each tag below has its own `` registration and inherits context variables from its parent. - -### Tab header explicit tags - -| Tag | Notes | Example | -|---|---|---| -| `` | For-you tab. | `velt-class="'selected': '{selectedTab} === {TABS.ForYou}'"` | -| `` | People tab. | `velt-class="'selected': '{selectedTab} === {TABS.People}'"` | -| `` | Documents tab. | `velt-class="'selected': '{selectedTab} === {TABS.Documents}'"` | -| `` | All tab. | `velt-class="'selected': '{selectedTab} === {TABS.All}'"` | - -### For-you / generic list-item tags - -Inside each, `notification` is the per-iteration variable. - -| Tag | Notes | Example | -|---|---|---| -| `` | A single notification row. | `velt-class="'is-unread': '!{notification.read}'"` | -| `` | Avatar of `notification.from`. | `` | -| `` | Headline text. | `` | -| `` | Body text. | `` | -| `` | Document-name fragment. | `` | -| `` | Relative timestamp. | `` | -| `` | Unread indicator dot. | `velt-if="!{notification.read}"` | - -### People-tab list-item tags - -Each row represents a user with their notifications grouped under them. - -| Tag | Notes | Example | -|---|---|---| -| `` | The list wrapper. | (iterates `notificationsByUserMap`) | -| `` | A single user row. | `velt-class="'expanded': {usersExpanded[user.email]}"` | -| `` | User avatar. | `` | -| `` | User name. | `` | -| `` | Expanded notification list under this user. | (composes generic list-items) | -| `` | Unread-count badge for this user. | `` | - -### Documents-tab list-item tags - -| Tag | Notes | Example | -|---|---|---| -| `` | A single document row. | `velt-class="'expanded': {documentExpanded[documentId]}"` | -| `` | Document name. | `` | -| `` | Expanded notification list under this document. | (composes generic list-items) | -| `` | Notification count for this document. | `` | -| `` | Unread indicator. | `velt-if="{hasUnread}"` | - -### All-tab list-item tags - -| Tag | Notes | Example | -|---|---|---| -| `` | The list wrapper. Iterates `notificationsByDate`. | (composes per-date rows) | -| `` | A single date-group row. | `` | -| `` | Notification list within a date group. | (composes generic list-items) | -| `` | Date label. | `` | - -### Settings tags - -The settings view's accordion decomposes per row. `setting` and `option` are per-iteration variables. - -| Tag | Notes | Example | -|---|---|---| -| `` | Header bar of the settings view. | (composes back-button + title) | -| `` | Header title. | (static label) | -| `` | Back button. | (click handler closes the settings view) | -| `` | Section title. | (static label) | -| `` | Section description. | (static label) | -| `` | Accordion list wrapper. | (iterates `settingsConfig`) | -| `` | A single accordion row. | `velt-class="'expanded': {settingsAccordionExpanded[setting.id]}"` | -| `` | Trigger of an accordion row. | (click handler) | -| `` | Trigger icon. | `` | -| `` | Trigger label. | `` | -| `` | Currently-selected value displayed on the trigger. | `` | -| `` | Expanded content (option list). | (iterates `setting.options`) | -| `` | Per-option row. | `velt-class="'selected': '{option.value} === {settingsSelectedOption[setting.id]}'"` | -| `` | Option icon. | `` | -| `` | Option label. | `` | -| `` | Footer wrapper holding the mute-all section. | (composes mute-all children) | -| `` | "Mute all" label. | (static label) | -| `` | Description text. | (static label) | -| `` | Toggle switch bound to `settingsMutedAll`. | `velt-class="'on': {settingsMutedAll}"` | - -## Example - -A minimal notifications panel with a title bar (title + close + settings + read-all buttons) and the per-tab content area. - - - -```jsx - - - -
- - - - -
- - - - -``` - - -```html - - - -
- - - - -
- - - - -``` - - - -## Related - -- [Notifications Panel Wireframes](./wireframes) — composition reference for the wireframe tags themselves. -- [Notifications Panel Primitives](./primitives) — granular components if you don't need a full wireframe. -- [Notifications Tool Wireframe Variables](../notifications-tool/wireframe-variables) — variables for the bell-icon trigger that opens this panel (most variables are shared). -- [Template Variables](/ui-customization/template-variables) — overview of the `velt-data` / `velt-if` / `velt-class` system. diff --git a/ui-customization/features/async/notifications/notifications-panel/wireframes.mdx b/ui-customization/features/async/notifications/notifications-panel/wireframes.mdx deleted file mode 100644 index 24d2d6b0d..000000000 --- a/ui-customization/features/async/notifications/notifications-panel/wireframes.mdx +++ /dev/null @@ -1,1385 +0,0 @@ ---- -title: Notifications Panel Wireframes -description: Wireframes for the Notifications Panel. ---- - - -We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components. - - -## Overview -![](/images/customization/notification/notification-overview.png) - - -```jsx - - - - - - - - - - - -``` - - -```html - - - - - - - - - - - -``` - - - -## Title -![](/images/customization/notification/notification-title.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -## ReadAllButton -![](/images/customization/notification/notification-read-all.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -## Skeleton -![](/images/customization/notification/notification-skeleton.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -## Header -![](/images/customization/notification/notification-header.png) - - -```jsx - - - - - - - - -``` - - -```html - - - - - - - - -``` - - - -#### TabAll -![](/images/customization/notification/notification-header-tab-all.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### TabDocuments -![](/images/customization/notification/notification-header-tab-documents.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### TabForYou -![](/images/customization/notification/notification-header-tab-for-you.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### TabPeople -![](/images/customization/notification/notification-header-people.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -## Content -![](/images/customization/notification/notification-content.png) - - -```jsx - - - - - - - - -``` - - -```html - - - - - - - - -``` - - - -### ForYou -![](/images/customization/notification/notification-content-for-you.png) - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -### All -![](/images/customization/notification/notification-content-all.png) - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -#### All List -![](/images/customization/notification/notification-content-all-list.png) - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -#### All List Item -![](/images/customization/notification/notification-content-all-list-item.png) - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -#### All List Item Label -![](/images/customization/notification/notification-content-all-list-item-label.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### All List Item Content -![](/images/customization/notification/notification-content-all-list-item-content.png) - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -### Documents -![](/images/customization/notification/notification-content-documents.png) - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -#### Documents List -![](/images/customization/notification/notification-content-documents-list.png) - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -#### Documents List Item -![](/images/customization/notification/notification-content-documents-list-item.png) - - -```jsx - - - - - - - - -``` - - -```html - - - - - - - - -``` - - - -#### Documents List Item Unread -![](/images/customization/notification/notification-content-documents-list-item-unread.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Documents List Item Name -![](/images/customization/notification/notification-content-documents-list-item-name.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Documents List Item Count -![](/images/customization/notification/notification-content-documents-list-item-count.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Documents List Item Content -![](/images/customization/notification/notification-content-documents-list-item-content.png) - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -### People -![](/images/customization/notification/notification-content-people.png) - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -#### People List -![](/images/customization/notification/notification-content-people-list.png) - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -#### People List Item -![](/images/customization/notification/notification-content-people-list-item.png) - - -```jsx - - - - - - - - -``` - - -```html - - - - - - - - -``` - - - -#### People List Item Avatar -![](/images/customization/notification/notification-content-people-list-item-unread.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### People List Item Name -![](/images/customization/notification/notification-content-people-list-item-name.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### People List Item Count -![](/images/customization/notification/notification-content-people-list-item-count.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### People List Item Content -![](/images/customization/notification/notification-content-people-list-item-content.png) - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -## Settings -![](/images/customization/notification/notification-settings.png) - - -```jsx - - - - - - - - - -``` - - -```html - - - - - - - - - -``` - - - -### Settings Header -![](/images/customization/notification/notification-settings-header.png) - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -#### Header BackButton -![](/images/customization/notification/notification-settings-header-back-button.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Header Title -![](/images/customization/notification/notification-settings-header-title.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -### Settings Title -![](/images/customization/notification/notification-settings-title.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -### Settings Description -![](/images/customization/notification/notification-settings-description.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -### Settings List -![](/images/customization/notification/notification-settings-list.png) - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -#### Settings List Accordion -![](/images/customization/notification/notification-settings-list-accordion.png) - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -#### Accordion Trigger -![](/images/customization/notification/notification-settings-accordion-trigger.png) - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -#### Accordion Trigger Label -![](/images/customization/notification/notification-settings-accordion-trigger-label.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Accordion Trigger SelectedValue -![](/images/customization/notification/notification-settings-accordion-trigger-selected-value.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Accordion Trigger Icon -![](/images/customization/notification/notification-settings-accordion-trigger-icon.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Accordion Content -![](/images/customization/notification/notification-settings-accordion-content.png) - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -#### Accordion Content Item -![](/images/customization/notification/notification-settings-accordion-content-item.png) - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -#### Accordion Content Item Icon -![](/images/customization/notification/notification-settings-accordion-content-item-icon.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Accordion Content Item Label -![](/images/customization/notification/notification-settings-accordion-content-item-label.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -### Settings Footer -![](/images/customization/notification/notification-settings-footer.png) - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -#### MuteAllTitle -![](/images/customization/notification/notification-settings-footer-mute-all-title.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### MuteAllDescription -![](/images/customization/notification/notification-settings-footer-mute-all-description.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### MuteAllToggle -![](/images/customization/notification/notification-settings-footer-mute-all-toggle.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -## Shared Components - -### Content List -![](/images/customization/notification/common-content-list.png) - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -### Content List Item -![](/images/customization/notification/common-content-list-item.png) - - -```jsx - - - - - - - - - - -``` - - -```html - - - - - - - - - - -``` - - - -#### Content List Item Avatar -![](/images/customization/notification/common-content-list-item-avatar.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Content List Item Unread -![](/images/customization/notification/common-content-list-item-unread.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Content List Item Headline -![](/images/customization/notification/common-content-list-item-headline.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Content List Item Body -![](/images/customization/notification/common-content-list-item-body.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Content List Item FileName -![](/images/customization/notification/common-content-list-item-file-name.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Content List Item Time -![](/images/customization/notification/common-content-list-item-time.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -### LoadMore -![](/images/customization/notification/common-content-load-more.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -### AllReadContainer -![](/images/customization/notification/common-content-all-read-container.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - - -## 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` - - - - -```jsx - -``` - - - -```jsx - -``` - - - - -### Dark Mode - -`Default: false` - - - - -```js - -``` - - - -```html - -``` - - - \ No newline at end of file diff --git a/ui-customization/features/async/notifications/notifications-tool/primitives.mdx b/ui-customization/features/async/notifications/notifications-tool/primitives.mdx deleted file mode 100644 index 4ae6b5d08..000000000 --- a/ui-customization/features/async/notifications/notifications-tool/primitives.mdx +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: Notifications Tool Primitives -description: Pprimitive components for building custom Notifications tool interfaces with maximum flexibility. ---- - - -Explore primitives interactively in our [Storybook](https://storybook.velt.dev/). - - -## Overview - -The Notifications Primitives API provides granular components that can be used independently to build fully custom notification tool and panel interfaces. All primitives share a common set of inputs documented below; list-type primitives additionally support template forwarding via slot attributes (`[listItemTemplate]`, `[itemTemplate]`, `[triggerTemplate]`). - -## Common Inputs - -All Notifications primitive components accept the following inputs. See [`NotificationsPrimitiveCommonProps`](/api-reference/sdk/models/data-models#notificationsprimitivecommonprops) for the full type definition. - -| React Prop | HTML Attribute | Type | Default | Description | -|------------|----------------|------|---------|-------------| -| `variant` | `variant` | `string` | — | Visual variant for the component. | -| `darkMode` | `dark-mode` | `boolean` | `false` | Enables dark mode rendering. | -| `shadowDom` | `shadow-dom` | `boolean` | `false` | Renders the component inside a Shadow DOM. | -| `parentLocalUIState` | `parent-local-ui-state` | `object` | — | Local UI state passed down from a parent primitive. | - ---- - -## Components - -### VeltNotificationsToolIcon - -Icon displayed in the notifications tool trigger button. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsToolUnreadIcon - -Icon shown in the notifications tool trigger when there are unread notifications. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsToolLabel - -Text label displayed in the notifications tool trigger button. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - - ---- - -### VeltNotificationsToolUnreadCount - -Badge showing the count of unread notifications on the tool trigger. - - - -```jsx - -``` - -**Props:** Common inputs only (see [Common Inputs](#common-inputs) section). - - -```html - -``` - -**Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section). - - \ No newline at end of file diff --git a/ui-customization/features/async/notifications/notifications-tool/wireframe-variables.mdx b/ui-customization/features/async/notifications/notifications-tool/wireframe-variables.mdx deleted file mode 100644 index abb41e9c2..000000000 --- a/ui-customization/features/async/notifications/notifications-tool/wireframe-variables.mdx +++ /dev/null @@ -1,203 +0,0 @@ ---- -title: Notifications Tool Wireframe Variables -description: Template variables exposed by the Notifications Tool wireframe — read them with velt-data, velt-if, and velt-class to drive dynamic content, conditional rendering, and class toggling. ---- - - - New to wireframes? Start with [UI Customization Concepts](/ui-customization/overview) and the [Template Variables](/ui-customization/template-variables) overview. - - -## Overview - -The **Notifications Tool** wireframe powers the small bell-icon button (with unread-count badge) customers place in their app's toolbar to open the linked [Notifications Panel](../notifications-panel/wireframe-variables). It supports a numeric badge or an unread-only icon mode (dot indicator without a number). Variables below are available inside any `` tag via three forms: - -| You want to… | Use | Example | -|---|---|---| -| Display a value as text | `` | `` | -| Hide / show conditionally | `velt-if="{var}"` | `velt-if="{unreadNotificationsForYou.length} > 0"` | -| Toggle a CSS class | `velt-class="'cls': {var}"` | `velt-class="'panel-open': {notificationsPanelVisible}"` | - -All variables are mapped — reference them by their short name. You do not need the `componentConfig.` prefix. - - - The tool shares its `componentConfigSignal` with the linked panel. Every variable on the [Notifications Panel Wireframe Variables](../notifications-panel/wireframe-variables) page resolves here too — only the two **tool-specific** entries below are documented as new on this page. - - -## Data State - -Tool-specific data — drives the bell icon, the unread badge, and the active-state styling. - -| Variable | Type | Description | Example | -|---|---|---|---| -| `unreadNotificationsForYou` | [`Notification`](/api-reference/sdk/models/data-models#notification)`[]` | Unread notifications list. Length drives the count badge. | `` | - -## UI State - -| Variable | Type | Description | Example | -|---|---|---|---| -| `notificationsPanelVisible` | `boolean` | Linked panel is currently open. Drives the `active` modifier on the trigger. | `velt-class="'panel-open': {notificationsPanelVisible}"` | -| `darkMode` | `boolean` | Dark mode is active. | `velt-class="'theme-dark': {darkMode}"` | -| `variant` | `string` | Per-instance variant tag set on the host element. | `` | - -The tool's `componentConfigSignal` also includes `tabConfig`, `shadowDom`, `panelShadowDom`, `considerAllNotifications`, `template`, and `settingsLayout` — all set on the public element as kebab-case attributes (see [Common Props](#common-props) below). Inside a wireframe these still resolve as bare names. - -## Common Props - -The tool inherits the same base inputs as the panel — see [Notifications Panel — Common Props](../notifications-panel/wireframe-variables#common-props). - -The root `` element additionally accepts these public attributes: - -| React Prop | HTML Attribute | Type | Default | Description | -|---|---|---|---|---| -| `considerAllNotifications` | `consider-all-notifications` | `boolean \| "true" \| "false"` | `false` | Count all notifications, not just unread. | -| `shadowDom` | `shadow-dom` | `boolean \| "true" \| "false"` | `true` | Wrap the tool in Shadow DOM. | -| `panelShadowDom` | `panel-shadow-dom` | `boolean \| "true" \| "false"` | `true` | Wrap the linked panel in Shadow DOM. | -| `settingsLayout` | `settings-layout` | `'accordion'` \| ... | `'accordion'` | Forward to the linked panel. | -| `variant` | `variant` | `string` | — | Wireframe variant id. | - -## Type Reference - -Types referenced by the variables above are documented in [Data Models](/api-reference/sdk/models/data-models): - -| Type | Description | -|---|---| -| [`Notification`](/api-reference/sdk/models/data-models#notification) | A single notification (id, type, title, message, icon, from, to, documentId, documentName, createdAt, read, link, metadata). | - -For the full type set used inside the linked panel — see [Notifications Panel — Type Reference](../notifications-panel/wireframe-variables#type-reference). - -## Subcomponents - -Each subcomponent below has its own wireframe tag. - -### `notifications-tool` (root) - -The bell-icon trigger. - -- **Public element:** `` -- **Wireframe tag:** `` -- **Variant:** read from `componentConfig.uiState.variant`. - -| Property | Value | -|---|---| -| Extra variables | None — root only sees common variables. | - -#### Classes - -| Class | Applied when | -|---|---| -| `v-document-viewer-tread-container velt-notifications-tool` | Always on the host wrapper. | -| `action-btn velt-notifications-tool--action-button` | Inner clickable button. | -| `active` / `velt-notification-tool-open` | `notificationsPanelVisible` is true. | -| `velt-notifications-tool--container` | Inner content wrapper. | -| `velt-notifications-panel-sidebar-container` | Sidebar-mode panel anchor. | - - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - ---- - -### `notifications-tool-icon` - -The default bell icon shown when there are no unread notifications. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | -| `shouldShow` | Parent gates this on `unreadNotificationsForYou.length === 0`. | - -#### Classes - -| Class | Applied when | -|---|---| -| `action-btn-icon velt-notifications-tool--icon` | Always on the inner SVG. | - ---- - -### `notifications-tool-unread-icon` - -The bell-icon variant shown when there are unread notifications (different colour / shape). - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | -| `shouldShow` | Parent gates this on `unreadNotificationsForYou.length > 0`. | - -#### Classes - -| Class | Applied when | -|---|---| -| `action-btn-icon velt-notifications-tool--icon` | Always on the inner SVG. | - ---- - -### `notifications-tool-label` - -Optional "Notifications" label next to the bell. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | - -#### Classes - -| Class | Applied when | -|---|---| -| `action-btn-label velt-notifications-tool--label` | Always on the host span. | - ---- - -### `notifications-tool-unread-count` - -The unread-count badge ("3", "12", …). Hidden when there are no unread notifications. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | None. | -| `shouldShow` | `unreadNotificationsForYou.length > 0` | - -## Related - -- [Notifications Tool Wireframes](./wireframes) — composition reference for the wireframe tags themselves. -- [Notifications Tool Primitives](./primitives) — granular components if you don't need a full wireframe. -- [Notifications Panel Wireframe Variables](../notifications-panel/wireframe-variables) — the linked panel's full variable set, all of which is shared with the tool. -- [Template Variables](/ui-customization/template-variables) — overview of the `velt-data` / `velt-if` / `velt-class` system. diff --git a/ui-customization/features/async/notifications/notifications-tool/wireframes.mdx b/ui-customization/features/async/notifications/notifications-tool/wireframes.mdx deleted file mode 100644 index 95bb58b37..000000000 --- a/ui-customization/features/async/notifications/notifications-tool/wireframes.mdx +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: Notifications Tool Wireframes -description: Wireframes for the Notifications Tool. ---- - - -We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components. - - - -## VeltNotificationsToolWireframe - -![](/images/customization/notification/notification-tool.png) - - - - -```jsx - - - - - - - - -``` - - -```html - - - - - - - - -``` - - - -## 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** - - - - -```jsx - -``` - - - - -```jsx - -``` - - - - - - -### Dark Mode - -`Default: false` - - - - -```js - -``` - - - -```js - -``` - - - - -## Variant -You can define and use [variants](/ui-customization/layout#variants) for the Notification Tool or the Notification Panel. - -1. `variant`: For the Notification Tool. -2. `panelVariant`: For the Notification Panel. - - - -```jsx - -``` - - -```html - -``` - - - diff --git a/ui-customization/features/async/reactions-wireframe-variables.mdx b/ui-customization/features/async/reactions-wireframe-variables.mdx deleted file mode 100644 index 0236f4c00..000000000 --- a/ui-customization/features/async/reactions-wireframe-variables.mdx +++ /dev/null @@ -1,206 +0,0 @@ ---- -title: Reactions Wireframe Variables -description: Template variables exposed by the Reactions wireframe — read them with velt-data, velt-if, and velt-class to drive dynamic content, conditional rendering, and class toggling. ---- - - - New to wireframes? Start with [UI Customization Concepts](/ui-customization/overview) and the [Template Variables](/ui-customization/template-variables) overview. - - -## Overview - -The **Reactions** feature renders emoji reactions on annotations and on inline page content. Variables below are available inside any ``, ``, or `` tag via three forms: - -| You want to… | Use | Example | -|---|---|---| -| Display a value as text | `` | `` | -| Hide / show conditionally | `velt-if="{var}"` | `velt-if="{componentConfig.tooltipVisible}"` | -| Toggle a CSS class | `velt-class="'cls': {var}"` | `velt-class="'is-mine': {componentConfig.isReactionSelectedByCurrentUser}"` | - - - This feature uses the **flat-config** access pattern — variables are referenced via the explicit `componentConfig.` form. Each primitive carries its own `componentConfigSignal` — the tool, the pin, and the inline-reactions section expose different variable sets (documented separately below). - - -## Component Config — Reaction Tool - -State on the `` "+" emoji-picker button. - -| Variable | Type | Description | Example | -|---|---|---|---| -| `componentConfig.variant` | `string` | Wireframe variant id. | `` | -| `componentConfig.onClickOutside` | `Function` | Close handler — call from a click-outside region. | _Call this from your custom dismiss handler._ | -| `componentConfig.handleEmojiSelected` | `Function` | Emoji-selection handler. Call with the chosen emoji string. | _Call this from your custom emoji button click._ | -| `componentConfig.excludeReactionIds` | `string[]` | Reaction ids to hide from the picker. | `` | - -## Component Config — Reaction Pin - -State on a single `` (an emoji "pin" placed on the page or next to a comment). - -| Variable | Type | Description | Example | -|---|---|---|---| -| `componentConfig.type` | [`ReactionPinType`](/api-reference/sdk/models/data-models#reactionpintype) | Pin variant (`'comment'`, `'inline'`, etc.). | `velt-class="'pin-{componentConfig.type}': true"` | -| `componentConfig.annotationId` | `string` | The reaction-annotation id this pin represents. | `` | -| `componentConfig.annotation` | `ReactionAnnotation` | Full annotation object — `from`, `emoji`, `users`, `createdAt`, etc. | `` | -| `componentConfig.disableTooltip` | `boolean` | Hide the hover tooltip. | `velt-if="!{componentConfig.disableTooltip}"` | -| `componentConfig.customTooltipTemplate` | `TemplateRef` | Optional custom tooltip template (set programmatically via the `[template]` input — not used in wireframes). | _Internal — programmatic only._ | -| `componentConfig.isReactionSelectedByCurrentUser` | `boolean` | Local user has reacted with this emoji. | `velt-class="'is-mine': {componentConfig.isReactionSelectedByCurrentUser}"` | -| `componentConfig.user` | [`User`](/api-reference/sdk/models/data-models#user) | Currently identified end-user. | `` | -| `componentConfig.tooltipVisible` | `boolean` | Tooltip is currently open. | `velt-class="'tooltip-on': {componentConfig.tooltipVisible}"` | -| `componentConfig.shadowDom` | `boolean` | Shadow-DOM rendering is enabled. | _Host config — set via element attribute._ | -| `componentConfig.variant` | `string` | Wireframe variant id. | `` | -| `componentConfig.excludeReactionIds` | `string[]` | Reaction ids to hide. | `` | -| `componentConfig.commentReactionAnnotationIds` | `string[]` | When this pin lives next to a comment, the full list of reactions on the comment. | `` | - -## Component Config — Inline Reactions Section - -State on the `` — an inline strip of reactions for a target element. - -| Variable | Type | Description | Example | -|---|---|---|---| -| `componentConfig.targetReactionElementId` | `string` | Anchor element id. | `` | -| `componentConfig.annotations` | `ReactionAnnotation[]` | Reactions placed on this target. | `` | -| `componentConfig.user` | [`User`](/api-reference/sdk/models/data-models#user) \| `null` | Currently identified end-user. | `` | -| `componentConfig.skeletonLoading` | `boolean` | Skeleton loader is active. | `velt-if="{componentConfig.skeletonLoading}"` | -| `componentConfig.darkMode` | `boolean` | Dark mode is active. | `velt-class="'dark': {componentConfig.darkMode}"` | -| `componentConfig.variant` | `string` | Per-instance variant tag. | `` | -| `componentConfig.shadowDom` | `boolean` | Shadow-DOM rendering is enabled. | _Host config — set via element attribute._ | -| `componentConfig.onEmojiSelected` | `(emoji: string) => void` | Emoji-picked handler. | _Call this from your custom emoji button click._ | -| `componentConfig.onReactionClick` | `(reactionAnnotation: ReactionAnnotation) => void` | Pin-click handler. | _Call this from your custom pin click._ | -| `componentConfig.reactionAnnotationsTrackByFn` | `Function` | Identity function used internally to track list items. | _Internal — used as a track-by function._ | - -## Context-Specific Variables - -These are only resolvable inside the nested wireframe tags noted in the **Available in** column. Each is injected by the iteration primitive that owns the tag. - -| Variable | Type | Available in | Example | -|---|---|---|---| -| `user` | [`User`](/api-reference/sdk/models/data-models#user) | Reaction-pin tooltip rows — `` and its children | `` | -| `reaction` | [`ReactionAnnotation`](/api-reference/sdk/models/data-models#reactionannotation) | `` and its children | `` | -| `emoji` | `{ key: string; value: string; name?: string }` | Reactions-panel rows — `` and `` | `` | -| `isSelected` | `boolean` | Reactions-panel rows — `true` for the currently-selected emoji. | `velt-class="'is-selected': {isSelected}"` | - -## Type Reference - -Types referenced by the variables above are documented in [Data Models](/api-reference/sdk/models/data-models): - -| Type | Description | -|---|---| -| [`User`](/api-reference/sdk/models/data-models#user) | Identified end-user object. | -| [`ReactionPinType`](/api-reference/sdk/models/data-models#reactionpintype) | Pin variant discriminator (`'comment'`, `'inline'`, etc.). | -| `ReactionAnnotation` | The reaction-annotation — `from`, `emoji`, `users`, `createdAt`. | - -## Subcomponents - -Each subcomponent below has its own wireframe tag. - -### `reaction-tool` - -The "+" emoji-picker button. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | See [Component Config — Reaction Tool](#component-config-reaction-tool). | - ---- - -### `reaction-pin` - -A single placed emoji reaction. - -- **Public element:** `` -- **Wireframe tag:** `` -- **Children:** `*-pin-emoji`, `*-pin-count`, `*-pin-tooltip-users`, `*-pin-tooltip-user`, `*-pin-tooltip-user-avatar`, `*-pin-tooltip-user-name`. - -| Property | Value | -|---|---| -| Extra variables | See [Component Config — Reaction Pin](#component-config-reaction-pin). | - ---- - -### `inline-reactions-section` - -An inline strip of reactions placed next to a target element. - -- **Public element:** `` -- **Wireframe tag:** `` -- **Children:** `*-tool-container`, `*-panel`, `*-list`. - -| Property | Value | -|---|---| -| Extra variables | See [Component Config — Inline Reactions Section](#component-config-inline-reactions-section). | - -#### Children - -| Wireframe tag | Notes | -|---|---| -| `` | Wraps the emoji-picker tool. | -| `` | Panel wrapper that hosts the reaction list. | -| `` | Iterates `componentConfig.annotations` and renders one reaction-pin per entry. | - -## Deeply-Nested Wireframe Tags - -The reaction-pin and the reactions-panel decompose further. Each tag below has its own `` registration and inherits context variables from its parent. - -### Reaction Pin tags - -The reaction-pin's `componentConfig.annotation` carries `from` (the reactor), `emoji`, and `users` (everyone who reacted with the same emoji). - -| Tag | Notes | Example | -|---|---|---| -| `` | The emoji glyph itself. | `` | -| `` | The "+N" count badge when multiple users have reacted with the same emoji. | `` | -| `` | The hover tooltip wrapper listing all reactors. | `velt-class="'visible': {componentConfig.tooltipVisible}"` | -| `` | A single reactor row inside the tooltip (iterated). | `` | -| `` | Avatar inside a tooltip row. | `` | -| `` | Name inside a tooltip row. | `` | - -### Reactions Panel tags - -When the user clicks the `reaction-tool` "+" button, the reactions-panel emoji picker opens. Each row exposes the per-iteration variable `emoji` (`{ key, value, name? }`) and `isSelected`. - -| Tag | Notes | Example | -|---|---|---| -| `` | The list wrapper that iterates the filtered emojis. | (composes per-item rows) | -| `` | A single emoji row. | `velt-class="'is-selected': {isSelected}"` | -| `` | The emoji glyph itself. | `` | - -### Reactions Panel example - - - -```jsx - - - -``` - - -```html - - - -``` - - - -## Related - -- [Inline Reactions](./inline-reactions) — wireframe overview for the inline-reactions section primitive. -- [Template Variables](/ui-customization/template-variables) — overview of the `velt-data` / `velt-if` / `velt-class` system. diff --git a/ui-customization/features/async/recorder/control-panel.mdx b/ui-customization/features/async/recorder/control-panel.mdx deleted file mode 100644 index 6e422e163..000000000 --- a/ui-customization/features/async/recorder/control-panel.mdx +++ /dev/null @@ -1,896 +0,0 @@ ---- -title: Control Panel -description: Recorder control panel component. ---- - - -We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components. - - -## Overview -![](/images/customization/recorder/screen-control-panel-overview-modes.png) - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -## Floating Mode -![](/images/customization/recorder/screen-control-panel-floating-mode-overview.png) - - - -```jsx - - - - - - - - -``` - - -```html - - - - - - - - -``` - - - -### Container (Floating Mode) - -![](/images/customization/recorder/screen-control-panel-floating-mode-container.png) - - - -```jsx - - - - - - - - -``` - - -```html - - - - - - - - -``` - - - -#### Video (Floating Mode Container) -![](/images/customization/recorder/screen-control-panel-floating-mode-container-video.png) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Waveform (Floating Mode Container) -![](/images/customization/recorder/screen-control-panel-floating-mode-container-waveform.png) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### CollapsedButton (Floating Mode Container) -![](/images/customization/recorder/screen-control-panel-floating-mode-container-collapse.png) - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### On (CollapsedButton) - -![](/images/customization/recorder/screen-control-panel-floating-mode-container-collapse-on.png) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### Off (CollapsedButton) - -![](/images/customization/recorder/screen-control-panel-floating-mode-container-collapse-off.png) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Paused (Floating Mode Container) - -![](/images/customization/recorder/screen-control-panel-floating-mode-container-paused.png) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### ScreenMiniContainer (Floating Mode) -![](/images/customization/recorder/mini-screen-control-panel-floating-mode-container.png) - - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -#### Video (Floating Mode ScreenMiniContainer) -![](/images/customization/recorder/screen-control-panel-floating-mode-mini-container-video.png) -This is the same Video component as used in the Floating Mode Container. - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Screen (Floating Mode ScreenMiniContainer) -![](/images/customization/recorder/screen-control-panel-floating-mode-mini-container-screen.png) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### Loading (Floating Mode) -![](/images/customization/recorder/screen-control-panel-loading.png) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### ActionBar (Floating Mode) -![](/images/customization/recorder/screen-control-panel-action-bar.png) - - - -```jsx - - - - - - - - - - - -``` - - -```html - - - - - - - - - - - -``` - - - -#### TypeIcon (ActionBar) -![](/images/customization/recorder/screen-control-panel-action-bar-type-icon.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Time (ActionBar) -![](/images/customization/recorder/screen-control-panel-action-bar-time.png) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Waveform (ActionBar) -![](/images/customization/recorder/screen-control-panel-action-bar-waveform.png) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Toggle (ActionBar) -![](/images/customization/recorder/screen-control-panel-action-bar-toggle.png) - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### Pause (Toggle) -![](/images/customization/recorder/screen-control-panel-action-bar-toggle-pause.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### Play (Toggle) -![](/images/customization/recorder/screen-control-panel-action-bar-toggle-play.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Pip (ActionBar) - -Picture-in-Picture button for screen recordings with camera. This allows users to view the recording in a floating window during screen capture. - - -Picture-in-Picture is only supported in Chrome browsers and only works for screen recordings when the camera is active. This feature is disabled by default. - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Stop (ActionBar) -![](/images/customization/recorder/screen-control-panel-action-bar-stop.png) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Clear (ActionBar) -![](/images/customization/recorder/screen-control-panel-action-bar-clear.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -## Thread Mode - -![](/images/customization/recorder/screen-control-panel-floating-mode-overview.png) - - - -```jsx - - - - - - - - -``` - - -```html - - - - - - - - -``` - - - -### Video (Thread Mode) -![](/images/customization/recorder/screen-control-panel-floating-mode-container-video.png) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### Loading (Thread Mode) -![](/images/customization/recorder/screen-control-panel-loading.png) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### ActionBar (Thread Mode) -![](/images/customization/recorder/screen-control-panel-action-bar.png) - -This ActionBar is similar in structure to the Floating Mode ActionBar but specific to ThreadMode. - - -```jsx - - - - - - - - - - - -``` - - -```html - - - - - - - - - - - -``` - - - -#### TypeIcon (Thread Mode ActionBar) -![](/images/customization/recorder/screen-control-panel-action-bar-type-icon.png) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Time (Thread Mode ActionBar) -![](/images/customization/recorder/screen-control-panel-action-bar-time.png) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Waveform (Thread Mode ActionBar) -![](/images/customization/recorder/screen-control-panel-action-bar-waveform.png) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Toggle (Thread Mode ActionBar) -![](/images/customization/recorder/screen-control-panel-action-bar-toggle.png) - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### Pause (Thread Mode Toggle) -![](/images/customization/recorder/screen-control-panel-action-bar-toggle-pause.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### Play (Thread Mode Toggle) -![](/images/customization/recorder/screen-control-panel-action-bar-toggle-play.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Pip (Thread Mode ActionBar) - -Picture-in-Picture button for screen recordings with camera in Thread Mode. This allows users to view the recording in a floating window during screen capture. - - -Picture-in-Picture is only supported in Chrome browsers and only works for screen recordings when the camera is active. This feature is disabled by default. - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Stop (Thread Mode ActionBar) -![](/images/customization/recorder/screen-control-panel-action-bar-stop.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Clear (Thread Mode ActionBar) -![](/images/customization/recorder/screen-control-panel-action-bar-clear.png) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### ScreenMiniContainer (Thread Mode) -![](/images/customization/recorder/mini-screen-control-panel-floating-mode-container.png) - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -#### Video (Thread Mode ScreenMiniContainer) -![](/images/customization/recorder/screen-control-panel-floating-mode-mini-container-video.png) - -This is the same Video component as used in the main Thread Mode section. - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Screen (Thread Mode ScreenMiniContainer) -![](/images/customization/recorder/screen-control-panel-floating-mode-mini-container-screen.png) - - - -```jsx - - - -``` - - -```html - - - -``` - - diff --git a/ui-customization/features/async/recorder/media-source-settings.mdx b/ui-customization/features/async/recorder/media-source-settings.mdx deleted file mode 100644 index 3d6b65e12..000000000 --- a/ui-customization/features/async/recorder/media-source-settings.mdx +++ /dev/null @@ -1,326 +0,0 @@ ---- -title: Media Source Settings -description: Media source settings component. ---- - -We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components. - - -## Overview -![](/images/customization/recorder/media-source-settings-overview.png) - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -## Audio -![](/images/customization/recorder/media-source-settings-audio-overview.png) - - - -```jsx - - - - - - - - -``` - - -```html - - - - - - - - -``` - - - -### ToggleIcon -![](/images/customization/recorder/media-source-settings-audio-toggle-icon.png) - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -### SelectedLabel -![](/images/customization/recorder/media-source-settings-audio-selected-label.png) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### Divider -![](/images/customization/recorder/media-source-settings-audio-divider.png) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### Options -![](/images/customization/recorder/media-source-settings-audio-options.png) - - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -#### Item -![](/images/customization/recorder/media-source-settings-audio-options-item.png) - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -## Video -![](/images/customization/recorder/media-source-settings-video-overview.png) - - - -```jsx - - - - - - - - -``` - - -```html - - - - - - - - -``` - - - -### ToggleIcon -![](/images/customization/recorder/media-source-settings-audio-toggle-icon.png) - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -### SelectedLabel -![](/images/customization/recorder/media-source-settings-video-selected-label.png) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### Divider -![](/images/customization/recorder/media-source-settings-audio-divider.png) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### Options -![](/images/customization/recorder/media-source-settings-video-options.png) - - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -#### Item -![](/images/customization/recorder/media-source-settings-video-item.png) - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - diff --git a/ui-customization/features/async/recorder/recorder-player-expanded.mdx b/ui-customization/features/async/recorder/recorder-player-expanded.mdx deleted file mode 100644 index d18b69ed9..000000000 --- a/ui-customization/features/async/recorder/recorder-player-expanded.mdx +++ /dev/null @@ -1,534 +0,0 @@ ---- -title: Recorder Player Expanded -description: Recorder player expanded component. This is the expanded player that appears when user wants to view the recording in full screen. ---- - - -We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components. - - -## Overview -![](/images/customization/recorder/recorder-player-expanded-overview.png) - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -## Panel -![](/images/customization/recorder/recorder-player-expanded-panel-overview.png) - - - -```jsx - - - - - - - - - -``` - - -```html - - - - - - - - - -``` - - - -#### Display -![](/images/customization/recorder/recorder-player-expanded-panel-display.png) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Subtitles -![](/images/customization/recorder/recorder-player-expanded-panel-subtitles.png) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### CopyLink -![](/images/customization/recorder/recorder-player-expanded-panel-copy-link.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### MinimizeButton -![](/images/customization/recorder/recorder-player-expanded-panel-minimize.png) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Controls -![](/images/customization/recorder/recorder-player-expanded-panel-controls.png) - - - -```jsx - - - - - - - - - - - - -``` - - -```html - - - - - - - - - - - - -``` - - - -#### ProgressBar -![](/images/customization/recorder/recorder-player-expanded-panel-controls-progress-bar.png) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### ToggleButton -![](/images/customization/recorder/recorder-player-expanded-panel-controls-toggle-icon.png) - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### Pause - - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### Play - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Time -![](/images/customization/recorder/recorder-player-expanded-panel-controls-time.png) - - - -```jsx - - - - - - - -``` - - -```html - - - - - - -``` - - - -##### CurrentTime - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### TotalTime - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### SubtitleButton -![](/images/customization/recorder/recorder-player-expanded-panel-controls-subtitles.png) - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### Icon - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### Tooltip - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### TranscriptionButton -![](/images/customization/recorder/recorder-player-expanded-panel-controls-transcription.png) - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -##### Icon - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### Tooltip - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### VolumeButton -![](/images/customization/recorder/recorder-player-expanded-panel-controls-volume.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### SettingsButton -![](/images/customization/recorder/recorder-player-expanded-panel-controls-settings.png) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### DeleteButton -![](/images/customization/recorder/recorder-player-expanded-panel-controls-delete.png) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -## Transcription -![](/images/customization/recorder/recorder-player-expanded-transcription.png) - - - -```jsx - - - -``` - - -```html - - - -``` - - - diff --git a/ui-customization/features/async/recorder/recorder-player.mdx b/ui-customization/features/async/recorder/recorder-player.mdx deleted file mode 100644 index d67c0eb2d..000000000 --- a/ui-customization/features/async/recorder/recorder-player.mdx +++ /dev/null @@ -1,709 +0,0 @@ ---- -title: Recorder player -description: Recorder player component. This is the small player that appears when a recording is done. ---- - - -We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components. - - -## Overview -![](/images/customization/recorder/recorder-player-overview.png) - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -## VideoContainer -![](/images/customization/recorder/recorder-player-video.png) - - -```jsx - - - - - - - - - - - - - - - - -``` - - -```html - - - - - - - - - - - - - - - - -``` - - - -#### Video -![](/images/customization/recorder/recorder-player-video.png) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Timeline -![](/images/customization/recorder/recorder-player-video-timeline.png) - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -#### PlayButton -![](/images/customization/recorder/recorder-player-video-playbutton.png) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### SeekBar -![](/images/customization/recorder/recorder-player-video-seekbar.png) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### FullScreenButton -![](/images/customization/recorder/recorder-player-video-minimize.png) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Overlay -![](/images/customization/recorder/recorder-player-video-overlay.png) - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -#### PlayButton -![](/images/customization/recorder/recorder-player-video-playbutton.png) - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -#### Time - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Subtitles -![](/images/customization/recorder/recorder-player-video-subtitles.png) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Avatar -![](/images/customization/recorder/recorder-player-video-avatar.png) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Name -![](/images/customization/recorder/recorder-player-video-name.png) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### SubtitlesButton -![](/images/customization/recorder/recorder-player-video-subtitles-button.png) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Transcription -![](/images/customization/recorder/recorder-player-video-transcript.png) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### EditButton - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### CopyLink -![](/images/customization/recorder/recorder-player-video-copy-link.png) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Delete -![](/images/customization/recorder/recorder-player-video-delete.png) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -## AudioContainer -![](/images/customization/recorder/recorder-player-audio.png) - - - -```jsx - - - - - - - - - - - - - - - -``` - - -```html - - - - - - - - - - - - - - - -``` - - - -#### AudioToggle -![](/images/customization/recorder/recorder-player-audio-toggle.png) - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -#### Pause - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Play - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Time -![](/images/customization/recorder/recorder-player-audio-time.png) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### AudioWaveform -![](/images/customization/recorder/recorder-player-audio-waveform.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Subtitles -![](/images/customization/recorder/recorder-player-audio-subtitles.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Avatar -![](/images/customization/recorder/recorder-player-audio-avatar.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Name -![](/images/customization/recorder/recorder-player-audio-name.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### SubtitlesButton -![](/images/customization/recorder/recorder-player-audio-subtitles-button.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Transcription -![](/images/customization/recorder/recorder-player-audio-transcription.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### CopyLink -![](/images/customization/recorder/recorder-player-audio-copy-link.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Delete -![](/images/customization/recorder/recorder-player-audio-delete.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Audio - -This tag loads the audio recording and is hidden by default to prevent it from displaying in the UI. - - - -```jsx - - - -``` - - -```html - - - -``` - - - diff --git a/ui-customization/features/async/recorder/recorder-tool.mdx b/ui-customization/features/async/recorder/recorder-tool.mdx deleted file mode 100644 index 7d0d939b1..000000000 --- a/ui-customization/features/async/recorder/recorder-tool.mdx +++ /dev/null @@ -1,253 +0,0 @@ ---- -title: Recorder Tool -description: The button to add new recordings. ---- - - -We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components. - - -## VeltRecorderAllToolWireframe - -![](/images/customization/recorder/recorder-tool-all-overview.png) - - -```jsx - - - {/* ... Add your content here */} - - -``` - - -```html - - - - - -``` - - - -### VeltRecorderAllToolMenuWireframe -![](/images/customization/recorder/recorder-tool-all.png) - - -```jsx - - - - {/* ... Add your content here */} - - - {/* ... Add your content here */} - - - {/* ... Add your content here */} - - - -``` - - -```html - - - - - - - - - - - - - -``` - - - -#### Audio -![](/images/customization/recorder/recorder-tool-audio.png) - - -```jsx - - - {/* ... Add your content here */} - - -``` - - -```html - - - - - -``` - - - -#### Video -![](/images/customization/recorder/recorder-tool-video.png) - - -```jsx - - - {/* ... Add your content here */} - - -``` - - -```html - - - - - -``` - - - -#### Screen -![](/images/customization/recorder/recorder-tool-screen.png) - - -```jsx - - - {/* ... Add your content here */} - - -``` - - -```html - - - - - -``` - - - -## VeltRecorderAudioToolWireframe -![](/images/customization/recorder/recorder-tool-audio-tool.png) - - -```jsx - - - {/* ... Add your content here */} - - -``` - - -```html - - - - - -``` - - - -## VeltRecorderVideoToolWireframe -![](/images/customization/recorder/recorder-tool-video-tool.png) - - -```jsx - - - {/* ... Add your content here */} - - -``` - - -```html - - - - - -``` - - - -## VeltRecorderScreenToolWireframe -![](/images/customization/recorder/recorder-tool-screen-tool.png) - - -```jsx - - - {/* ... Add your content here */} - - -``` - - -```html - - - - - -``` - - - - -# 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` - - - - -```jsx - -``` - - - -```html - -``` - - - - -## Dark Mode - -`Default: false` - - - - -```js - -``` - - - -```html - -``` - - - \ No newline at end of file diff --git a/ui-customization/features/async/recorder/recording-preview-steps-dialog.mdx b/ui-customization/features/async/recorder/recording-preview-steps-dialog.mdx deleted file mode 100644 index 506b499be..000000000 --- a/ui-customization/features/async/recorder/recording-preview-steps-dialog.mdx +++ /dev/null @@ -1,864 +0,0 @@ ---- -title: Recording Preview Steps Dialog -description: Recording preview steps dialog component. ---- - - -We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components. - - -## Overview -![](/images/customization/recorder/recorder-player-expanded-transcription.png) - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -### Audio - -This component is used for audio recording preview. - -![](/images/customization/recorder/preview-breakdown-audio.png) - - -```jsx - - - - - - - - -``` - - -```html - - - - - - - - -``` - - - -#### Audio Bottom Panel - -Bottom panel of the audio recording preview dialog. - -![](/images/customization/recorder/preview-audio-bottom-panel.png) - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -##### Icon -![](/images/customization/recorder/preview-audio-bottom-panel-icon.png) - - - -```jsx - -``` - - -```html - -``` - - - -##### Countdown -![](/images/customization/recorder/preview-audio-bottom-panel-timer.png) - - - -```jsx - -``` - - -```html - -``` - - - -##### Close -![](/images/customization/recorder/preview-audio-bottom-panel-close.png) - - - -```jsx - -``` - - -```html - -``` - - - -#### Audio Button Panel - -Button panel of the audio recording preview dialog. - -![](/images/customization/recorder/preview-audio-button-panel.png) - - - -```jsx - - - - - - - - -``` - - -```html - - - - - - - - -``` - - - -##### Start Recording -![](/images/customization/recorder/preview-audio-button-panel-start.png) - - -```jsx - -``` - - -```html - -``` - - - -##### Mic Button -![](/images/customization/recorder/preview-audio-button-panel-mic.png) - - -```jsx - - - - -``` - - -```html - - - - -``` - - - -###### On -![](/images/customization/recorder/preview-audio-button-panel-mic-on.png) - - -```jsx - -``` - - -```html - -``` - - - -###### Off -![](/images/customization/recorder/preview-audio-button-panel-mic-off.png) - - -```jsx - -``` - - -```html - -``` - - - -##### Settings -![](/images/customization/recorder/preview-audio-button-panel-settings.png) - - -```jsx - -``` - - -```html - -``` - - - -#### Audio Timer - -Timer of the audio recording preview dialog. - -![](/images/customization/recorder/preview-timer.png) - - - -```jsx - - - - -``` - - -```html - - - - -``` - - - -##### Countdown - - - -```jsx - -``` - - -```html - -``` - - - -##### Cancel - - - -```jsx - -``` - - -```html - -``` - - - -#### Close Button - -![](/images/customization/recorder/preview-close.png) - - - -```jsx - -``` - - -```html - -``` - - - -#### Waveform - -![](/images/customization/recorder/preview-audio-waveform.png) - - - -```jsx - -``` - - -```html - -``` - - - -#### Settings Panel - -![](/images/customization/recorder/preview-audio-button-panel-settings-panel.png) - - - -```jsx - -``` - - -```html - -``` - - - -### Video - -This component is used for both video and screen recording previews. - -![](/images/customization/recorder/preview-breakdown-video.png) - - - -```jsx - - - - - - - - - - - -``` - - -```html - - - - - - - - - - - -``` - - - -#### Video Bottom Panel - -Bottom panel of the video recording preview dialog. - -![](/images/customization/recorder/preview-video-bottom-panel.png) - - - -```jsx - - - - - - -// If you want to customize the Icon for individual media types, you can use the following: - - - {/* Your custom icon here */} - - - - {/* Your custom icon here */} - - - - {/* Your custom icon here */} - -``` - - -```html - - - - - - - - - - - - - - - - - - -``` - - - -##### Icon - -![](/images/customization/recorder/preview-video-bottom-panel-icon.png) - - - -```jsx - - -// To customize for a specific media type: -{/* audio icon */} -{/* video icon */} -{/* screen icon */} -``` - - -```html - - - - - - -``` - - - -##### Countdown - -![](/images/customization/recorder/preview-video-bottom-panel-timer.png) - - - -```jsx - -``` - - -```html - -``` - - - -##### Close - -![](/images/customization/recorder/preview-video-bottom-panel-close.png) - - - -```jsx - -``` - - -```html - -``` - - - -#### Video Button Panel - -Button panel of the video recording preview dialog. - -![](/images/customization/recorder/preview-video-button-panel.png) - - - -```jsx - - - - - - - - - - - - -``` - - -```html - - - - - - - - - - - - -``` - - - -##### Start Recording - -![](/images/customization/recorder/preview-video-button-panel-start.png) - - - -```jsx - -``` - - -```html - -``` - - - -##### Mic Button - -![](/images/customization/recorder/preview-video-button-panel-mic.png) - - - -```jsx - - - - -``` - - -```html - - - - -``` - - - -###### On - -![](/images/customization/recorder/preview-video-button-panel-mic-on.png) - - - -```jsx - -``` - - -```html - -``` - - - -###### Off - -![](/images/customization/recorder/preview-video-button-panel-mic-off.png) - - - -```jsx - -``` - - -```html - -``` - - - -##### Camera Button - -![](/images/customization/recorder/preview-video-button-panel-camera.png) - - - -```jsx - - - - -``` - - -```html - - - - -``` - - - -###### On - -![](/images/customization/recorder/preview-video-button-panel-camera-on.png) - - - -```jsx - -``` - - -```html - -``` - - - -###### Off - -![](/images/customization/recorder/preview-video-button-panel-camera-off.png) - - - -```jsx - -``` - - -```html - -``` - - - -##### Settings - -![](/images/customization/recorder/preview-video-button-panel-settings.png) - - - -```jsx - -``` - - -```html - -``` - - - -#### Video Timer - -Timer of the video recording preview dialog. - -![](/images/customization/recorder/preview-timer.png) - - - -```jsx - - - - -``` - - -```html - - - - -``` - - - -##### Countdown - - - -```jsx - -``` - - -```html - -``` - - - -##### Cancel - - - -```jsx - -``` - - -```html - -``` - - - -#### Waveform - -![](/images/customization/recorder/preview-video-waveform.png) - - - -```jsx - -``` - - -```html - -``` - - - -#### Close Button - -![](/images/customization/recorder/preview-close.png) - - - -```jsx - -``` - - -```html - -``` - - - -#### Camera Off Message - -![](/images/customization/recorder/preview-camera-off.png) - - - -```jsx - -``` - - -```html - -``` - - - -#### Settings Panel - -![](/images/customization/recorder/preview-video-button-panel-settings-panel.png) - - - -```jsx - -``` - - -```html - -``` - - - -#### Video Player - -![](/images/customization/recorder/preview-video-player.png) - - - -```jsx - -``` - - -```html - -``` - - - -#### ScreenPlayer (Video) - -This component is used for screen recording preview within the video dialog. It displays the screen capture content for screen recordings. - - - -```jsx - - - -``` - - -```html - - - -``` - - diff --git a/ui-customization/features/async/recorder/subtitles.mdx b/ui-customization/features/async/recorder/subtitles.mdx deleted file mode 100644 index 550f85371..000000000 --- a/ui-customization/features/async/recorder/subtitles.mdx +++ /dev/null @@ -1,204 +0,0 @@ ---- -title: Subtitles -description: Subtitles component. ---- - - -We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components. - - -## Overview - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -## EmbedMode -![](/images/customization/recorder/subtitles-embed-mode.png) - - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -#### Text - - -```jsx - - - -``` - - -```html - - - -``` - - - -## FloatingMode -![](/images/customization/recorder/subtitles-floating-mode.png) - - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -#### Button -![](/images/customization/recorder/subtitles-floating-mode-button.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Tooltip -![](/images/customization/recorder/subtitles-floating-mode-tooltip.png) - - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Panel -![](/images/customization/recorder/subtitles-floating-mode-panel.png) - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -#### CloseButton - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Text - - -```jsx - - - -``` - - -```html - - - -``` - - - diff --git a/ui-customization/features/async/recorder/transcription-wireframe-variables.mdx b/ui-customization/features/async/recorder/transcription-wireframe-variables.mdx deleted file mode 100644 index 6c4edf31c..000000000 --- a/ui-customization/features/async/recorder/transcription-wireframe-variables.mdx +++ /dev/null @@ -1,218 +0,0 @@ ---- -title: Transcription Wireframe Variables -description: Template variables exposed by the Transcription, Subtitles, and Subtitles Dialog wireframes — read them with velt-data, velt-if, and velt-class to drive dynamic content, conditional rendering, and class toggling. ---- - - - New to wireframes? Start with [UI Customization Concepts](/ui-customization/overview) and the [Template Variables](/ui-customization/template-variables) overview. - - -## Overview - -The **Transcription / Subtitles** feature renders the voice-to-text transcript panel, the live subtitles overlay during playback, and a popover-variant subtitles dialog. Variables below are available inside any `` or `` tag via three forms: - -| You want to… | Use | Example | -|---|---|---| -| Display a value as text | `` | `` | -| Hide / show conditionally | `velt-if="{var}"` | `velt-if="{componentConfig.transcriptionVisible}"` | -| Toggle a CSS class | `velt-class="'cls': {var}"` | `velt-class="'mode-{componentConfig.mode}': true"` | - - - This feature uses the **flat-config** access pattern — variables are referenced via the explicit `componentConfig.` form. The page covers three related primitives — transcription, subtitles, and subtitles-dialog — which expose distinct variable sets (documented separately below). - - -## Component Config — Transcription - -State on `` and its child tags. - -| Variable | Type | Description | Example | -|---|---|---|---| -| `componentConfig.mode` | `'floating'` \| `'sidebar'` \| ... | Layout mode. | `velt-class="'mode-{componentConfig.mode}': true"` | -| `componentConfig.transcription` | [`Transcription`](/api-reference/sdk/models/data-models#transcription) | The transcript object — includes summary, timestamps, etc. | `` | -| `componentConfig.transcriptionVisible` | `boolean` | Transcript panel is open. | `velt-class="'visible': {componentConfig.transcriptionVisible}"` | -| `componentConfig.vttFileTextArray` | `{ startTime: string; endTime: string; startTimeInSeconds: number; endTimeInSeconds: number; text: string }[]` | Parsed VTT segments for display. | `` | -| `componentConfig.highlightedTextIndex` | `number` | Currently-playing segment index. | `velt-class="'segment-{componentConfig.highlightedTextIndex}-active': true"` | -| `componentConfig.showMoreSummary` | `boolean` | Summary is in expanded state. | `velt-class="'summary-open': {componentConfig.showMoreSummary}"` | -| `componentConfig.copySummaryButtonTooltip` | `string` | Tooltip text for the copy button. | `` | -| `componentConfig.sidebarVisible` | `boolean` | Sidebar-mode panel is visible. | `velt-if="{componentConfig.sidebarVisible}"` | -| `componentConfig.darkMode` | `boolean` | Dark mode is active. | `velt-class="'dark': {componentConfig.darkMode}"` | -| `componentConfig.showDefaultBtn` | `boolean` | Default trigger button should render. | `velt-if="{componentConfig.showDefaultBtn}"` | - -### Helper functions - -The transcription config also exposes callbacks you can attach to your own buttons: - -| Function | Description | -|---|---| -| `componentConfig.onDragRelease(...)` | Drag-to-position release handler. | -| `componentConfig.copyToClipboard(...)` | Copy-summary handler. | -| `componentConfig.toggleSidebar(...)` | Toggle the sidebar variant. | -| `componentConfig.onClose(...)` | Close handler. | -| `componentConfig.onSeekTo(seconds)` | Seek the player to a given timestamp. | -| `componentConfig.onTranscriptionButtonClick(...)` | Trigger-button click handler. | -| `componentConfig.toggleShowMoreSummary(...)` | Expand / collapse summary handler. | - -## Component Config — Subtitles / Subtitles Dialog - -State on `` and ``. Both primitives share the same config shape — the dialog adds a few CDK-overlay positioning fields. - -| Variable | Type | Description | Example | -|---|---|---|---| -| `componentConfig.subtitlesVisible` | `boolean` | Subtitles panel is visible. | `velt-class="'visible': {componentConfig.subtitlesVisible}"` | -| `componentConfig.dialogVisible` | `boolean` | Dialog variant is visible. | `velt-if="{componentConfig.dialogVisible}"` | -| `componentConfig.highlightedTextIndex` | `number` | Active segment index (`-1` when no segment is playing). | `velt-class="'segment-{componentConfig.highlightedTextIndex}-active': true"` | -| `componentConfig.vttFileTextArray` | `{ startTime, endTime, startTimeInSeconds, endTimeInSeconds, text }[]` | Parsed VTT segments. Same shape as Transcription. | `` | -| `componentConfig.transcription` | [`Transcription`](/api-reference/sdk/models/data-models#transcription) | The transcript object. Same as Transcription. | `` | -| `componentConfig.overlayTrigger` | `CdkOverlayOrigin` | CDK overlay anchor. | _Internal — CDK overlay config._ | -| `componentConfig.positions` | `ConnectedPosition[]` | CDK overlay position pairs. | _Internal — CDK overlay config._ | -| `componentConfig.cdkConnectedOverlayOffsetX` | `number` | Overlay horizontal nudge offset. | _Internal — used to compute inline style._ | -| `componentConfig.cdkConnectedOverlayOffsetY` | `number` | Overlay vertical nudge offset. | _Internal — used to compute inline style._ | -| `componentConfig.overlayOriginX` | `OverlayOriginX` | Anchor origin X axis. | _Internal — CDK overlay config._ | -| `componentConfig.overlayOriginY` | `OverlayOriginY` | Anchor origin Y axis. | _Internal — CDK overlay config._ | -| `componentConfig.showDefaultBtn` | `boolean` | Default toggle button should render. | `velt-if="{componentConfig.showDefaultBtn}"` | -| `componentConfig.onSubtitlesButtonClick` | `Function` | Subtitle-button click handler. | _Call this from your custom button click._ | - -## Context-Specific Variables - -These are only resolvable inside the iteration primitive that owns the tag. - -| Variable | Type | Available in | Example | -|---|---|---|---| -| `segment` | `{ startTime: string; endTime: string; startTimeInSeconds: number; endTimeInSeconds: number; text: string }` | `` — per-iteration row from `vttFileTextArray`. | `` | -| `currentTime` | `number` | Same content-item iteration. Current playback time (used to compute active-segment styling). | `velt-class="'is-active': '{segment.startTimeInSeconds} <= {currentTime} && {segment.endTimeInSeconds} > {currentTime}'"` | - -## Type Reference - -Types referenced by the variables above: - -| Type | Description | -|---|---| -| [`Transcription`](/api-reference/sdk/models/data-models#transcription) | Transcript object — includes `summary`, segments, language, etc. | -| `CdkOverlayOrigin` | Overlay anchor reference used by the dialog's positioning engine. | -| `ConnectedPosition` | Position-pair config used by the dialog's positioning engine. | -| `OverlayOriginX` | CDK overlay origin X-axis discriminator. | -| `OverlayOriginY` | CDK overlay origin Y-axis discriminator. | - -## Subcomponents - -Each subcomponent below has its own wireframe tag. - -### `transcription` - -The transcript panel — full transcript with speaker labels and clickable segments. - -- **Public element:** `` -- **Wireframe tag:** No root wireframe slot — register a wireframe directly on one of the mode-specific tags: `` or ``. - -| Property | Value | -|---|---| -| Extra variables | See [Component Config — Transcription](#component-config-transcription) and the per-iteration `segment` / `currentTime` injected into content-item children. | - - - The transcription feature has no root wireframe slot — register a wireframe directly on one of the mode-specific tags (`` or ``). - - - - -```jsx - - - -
- Transcript - -
- - - - - -``` - - -```html - - - -
- Transcript - -
- - - - - -``` - - - ---- - -### `subtitles` - -The live subtitle overlay shown during playback. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | See [Component Config — Subtitles / Subtitles Dialog](#component-config-subtitles--subtitles-dialog). | - ---- - -### `subtitles-dialog` - -The popover variant of subtitles. - -- **Public element:** `` -- **Wireframe tag:** `` - -| Property | Value | -|---|---| -| Extra variables | Same data as `subtitles` — adds CDK overlay positioning fields (see above). | -| `shouldShow` | `componentConfig.dialogVisible === true` | - -## Deeply-Nested Wireframe Tags - -The transcription and subtitles primitives decompose further. Each tag below has its own `` or `` registration. - -### Transcription tags - -| Tag | Notes | Example | -|---|---|---| -| `` | The button that opens the transcript panel. | `velt-if="{componentConfig.showDefaultBtn}"` | -| `` | Tooltip on the button. | _Visual only._ | -| `` | The transcript panel root. | `velt-class="'visible': {componentConfig.transcriptionVisible}"` | -| `` | Inner scroll container. | (composes the segment list) | -| `` | A single transcript-segment row. Iterates `vttFileTextArray`; injects `segment` and `currentTime`. | `velt-class="'is-active': '{segment.startTimeInSeconds} <= {currentTime} && {segment.endTimeInSeconds} > {currentTime}'"` | -| `` | Summary section at the top of the panel. | (composes the summary copy + toggle) | -| `` | Show-more / show-less toggle for the summary. | (click handler) | -| `` | Variant shown when the summary is expanded. | `velt-if="{componentConfig.showMoreSummary}"` | -| `` | Variant shown when collapsed. | `velt-if="!{componentConfig.showMoreSummary}"` | -| `` | Copy-summary button. | (click handler) | -| `` | Inner button element. | (click handler) | -| `` | "Copied!" tooltip. | `` | -| `` | Close button. | (click handler) | -| `` | Variant rendered in floating mode. | `velt-if="{componentConfig.mode} === 'floating'"` | -| `` | Variant rendered in embed mode. | `velt-if="{componentConfig.mode} === 'embed'"` | - -### Subtitles tags - -| Tag | Notes | Example | -|---|---|---| -| `` | The button that toggles subtitles. | `velt-if="{componentConfig.showDefaultBtn}"` | -| `` | Tooltip on the button. | _Visual only._ | -| `` | The subtitle text panel. | `velt-class="'visible': {componentConfig.subtitlesVisible}"` | -| `` | Close button. | (click handler) | -| `` | Variant in floating mode. | (mode-specific layout) | -| `` | Variant in embed mode. | (mode-specific layout) | - -## Related - -- [Transcription](./transcription) — wireframe overview for the transcript panel primitive. -- [Subtitles](./subtitles) — wireframe overview for the subtitles primitive. -- [Recorder Player Expanded](./recorder-player-expanded) — where the transcription panel is hosted during full-screen playback. -- [Recorder Wireframe Variables](./wireframe-variables) — the parent recorder feature. -- [Template Variables](/ui-customization/template-variables) — overview of the `velt-data` / `velt-if` / `velt-class` system. diff --git a/ui-customization/features/async/recorder/transcription.mdx b/ui-customization/features/async/recorder/transcription.mdx deleted file mode 100644 index 6912def7c..000000000 --- a/ui-customization/features/async/recorder/transcription.mdx +++ /dev/null @@ -1,744 +0,0 @@ ---- -title: Transcription -description: Transcription component. ---- - - -We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components. - - -## Overview -![](/images/customization/recorder/transcription-panel-overview.png) - - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -## FloatingMode - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -#### Button -![](/images/customization/recorder/transcription-panel-button.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Tooltip -![](/images/customization/recorder/transcription-panel-button-tooltip.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### PanelContainer -![](/images/customization/recorder/transcription-panel.png) - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -#### Panel -![](/images/customization/recorder/transcription-panel-breakdown.png) - - -```jsx - - - - - - - - -``` - - -```html - - - - - - - - -``` - - - -#### CloseButton -![](/images/customization/recorder/transcription-panel-close.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### CopyLink -![](/images/customization/recorder/transcription-panel-copy.png) - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -#### Button - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Tooltip - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Summary -![](/images/customization/recorder/transcription-summary.png) - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -#### Text -![](/images/customization/recorder/transcription-summary-text.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### ExpandToggle -![](/images/customization/recorder/transcription-summary-expand.png) - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -#### On - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Off - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Content -![](/images/customization/recorder/transcription-panel-content.png) - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -#### Item -![](/images/customization/recorder/transcription-panel-content-item.png) - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -#### Text -![](/images/customization/recorder/transcription-panel-content-item-text.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Time -![](/images/customization/recorder/transcription-panel-content-item-time.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -## EmbedMode - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -#### Panel -![](/images/customization/recorder/transcription-panel-breakdown.png) - - - -```jsx - - - - - - - - -``` - - -```html - - - - - - - - -``` - - - -#### CloseButton -![](/images/customization/recorder/transcription-panel-close.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### CopyLink -![](/images/customization/recorder/transcription-panel-copy.png) - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -#### Button - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Tooltip - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Summary -![](/images/customization/recorder/transcription-summary.png) - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -#### Text -![](/images/customization/recorder/transcription-summary-text.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### ExpandToggle -![](/images/customization/recorder/transcription-summary-expand.png) - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -#### On - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Off - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Content -![](/images/customization/recorder/transcription-panel-content.png) - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -#### Item -![](/images/customization/recorder/transcription-panel-content-item.png) - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -#### Text -![](/images/customization/recorder/transcription-panel-content-item-text.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Time -![](/images/customization/recorder/transcription-panel-content-item-time.png) - - -```jsx - - - -``` - - -```html - - - -``` - - \ No newline at end of file diff --git a/ui-customization/features/async/recorder/video-editor.mdx b/ui-customization/features/async/recorder/video-editor.mdx deleted file mode 100644 index 190181a89..000000000 --- a/ui-customization/features/async/recorder/video-editor.mdx +++ /dev/null @@ -1,861 +0,0 @@ ---- -title: Video Editor -description: Video editor component. ---- - - -We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components. - - -## Overview -![](/images/customization/recorder/editor-overview.png) - - -```jsx - - - - - - - - - - - - - - - - -``` - - -```html - - - - - - - - - - - - - - - - -``` - - - -### Title -![](/images/customization/recorder/editor-title.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -### ApplyButton -![](/images/customization/recorder/editor-apply.png) - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -#### Loading -![](/images/customization/recorder/editor-apply-loading.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -### RetakeButton -![](/images/customization/recorder/editor-retake.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -### DownloadButton -![](/images/customization/recorder/editor-download.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -### CloseButton -![](/images/customization/recorder/editor-close.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -### Preview -![](/images/customization/recorder/editor-preview.png) - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -#### Loading -![](/images/customization/recorder/editor-preview-loading.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Video - - -```jsx - - - -``` - - -```html - - - -``` - - - -### ToggleButton -![](/images/customization/recorder/editor-toggle.png) - -**Template Variables:** - -| Variable | Description | -|----------|-------------| -| `isPlayingTrimPreview` | This is true when the video is playing in the preview else it is false | - - - - -```jsx - - - -``` - - -```html - - - -``` - - - -### Time -![](/images/customization/recorder/editor-time.png) - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -#### CurrentTime -![](/images/customization/recorder/editor-time-current.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### TotalTime -![](/images/customization/recorder/editor-time-total.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -### SplitButton -![](/images/customization/recorder/editor-split.png) - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -#### CurrentTime -![](/images/customization/recorder/editor-split-current.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -### DeleteButton -![](/images/customization/recorder/editor-remove.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -### AddZoomButton -![](/images/customization/recorder/editor-add-zoom.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -### Timeline -![](/images/customization/recorder/editor-timeline-container-1.png) - - -```jsx - - - - - - - - -``` - - -```html - - - - - - - - -``` - - - -#### BackspaceHint -![](/images/customization/recorder/editor-timeline-backspace-hint.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Onboarding -![](/images/customization/recorder/editor-timeline-onboarding.png) - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -##### **Content** -![](/images/customization/recorder/editor-timeline-onboarding-content.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Text** -![](/images/customization/recorder/editor-timeline-onboarding-text.png) - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -###### **Title** -![](/images/customization/recorder/editor-timeline-onboarding-text-title.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -###### **Description** -![](/images/customization/recorder/editor-timeline-onboarding-text-description.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Arrow** -![](/images/customization/recorder/editor-timeline-onboarding-arrow.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Container -![](/images/customization/recorder/editor-timeline-container.png) - - -```jsx - - - - - - - -``` - - -```html - - - - - - - -``` - - - -##### **Playhead** -![](/images/customization/recorder/editor-timeline-container-playhead.png) - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -###### **Line** -![](/images/customization/recorder/editor-timeline-container-playhead-line.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -###### **Actions** -![](/images/customization/recorder/editor-timeline-container-playhead-actions.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Trim** -![](/images/customization/recorder/editor-timeline-container-trim.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -##### **Scale** -![](/images/customization/recorder/editor-timeline-container-scale.png) - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -###### **ZoomButton** -![](/images/customization/recorder/editor-timeline-container-scale-zoom.png) - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -###### **Trigger** -![](/images/customization/recorder/editor-timeline-container-scale-zoom-trigger.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -###### **Options** -![](/images/customization/recorder/editor-timeline-container-scale-zoom-options.png) - - -```jsx - - - - - - -``` - - -```html - - - - - - -``` - - - -###### **List** -![](/images/customization/recorder/editor-timeline-container-scale-zoom-options-list.png) - - -```jsx - - - - - -``` - - -```html - - - - - -``` - - - -###### **Item** -![](/images/customization/recorder/editor-timeline-container-scale-zoom-option-list-item.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -###### **Input** -![](/images/customization/recorder/editor-timeline-container-scale-zoom-options-1.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - -#### Marker -![](/images/customization/recorder/editor-timeline-container-marker.png) - - -```jsx - - - -``` - - -```html - - - -``` - - - diff --git a/ui-customization/features/async/recorder/wireframe-variables.mdx b/ui-customization/features/async/recorder/wireframe-variables.mdx deleted file mode 100644 index a8171f6d2..000000000 --- a/ui-customization/features/async/recorder/wireframe-variables.mdx +++ /dev/null @@ -1,420 +0,0 @@ ---- -title: Recorder Wireframe Variables -description: Template variables exposed by the Recorder wireframe — read them with velt-data, velt-if, and velt-class to drive dynamic content, conditional rendering, and class toggling. ---- - - - New to wireframes? Start with [UI Customization Concepts](/ui-customization/overview) and the [Template Variables](/ui-customization/template-variables) overview. - - -## Overview - -The **Recorder** feature powers audio / video / screen recording inside comments and standalone playback. Variables below are available inside any `` tag via three forms: - -| You want to… | Use | Example | -|---|---|---| -| Display a value as text | `` | `` | -| Hide / show conditionally | `velt-if="{var}"` | `velt-if="{componentConfigSignal.recordingInProgress}"` | -| Toggle a CSS class | `velt-class="'cls': {var}"` | `velt-class="'is-{componentConfigSignal.recordingType}': true"` | - - - This feature uses the **flat-config** access pattern — every property lives directly on the root of `componentConfigSignal()` (no nested `appState` / `featureState` / `data` / `uiState`). Reach values via `{componentConfigSignal.}`. The shorter `{}` form also works for any field at the root of the recorder's componentConfig **except** for the names listed in the warning below. - - - - **Naming conflicts — use full path.** A few names collide with mappings used elsewhere. Inside a Recorder wireframe, prefer the explicit path on the right when reading these values: - - | Conflicting name | Map points to | Use this for Recorder | - |---|---|---| - | `disabled` | `parentLocalUIState.disabled` | `componentConfigSignal.disabled` | - | `darkMode` | `parentLocalUIState.darkMode` | `componentConfigSignal.darkMode` | - | `variant` | `parentLocalUIState.variant` | `componentConfigSignal.variant` | - | `screenSharingSupported` | `componentConfigSignal.featureState.screenSharingSupported` | `componentConfigSignal.screenSharingSupported` | - | `user` | `componentConfigSignal.appState.user` | `componentConfigSignal.user` | - | `annotation` | `componentConfigSignal.data.annotation` | `componentConfigSignal.annotation` | - - -## Component Config — Recorder Button - -State on the `` trigger. - -| Variable | Type | Description | Example | -|---|---|---|---| -| `componentConfigSignal.buttonLabel` | `string` | Custom label text (e.g. `"Record"`). | `` | -| `componentConfigSignal.recordingInProgress` | `boolean` | Recording is currently active. | `velt-class="'is-recording': {componentConfigSignal.recordingInProgress}"` | -| `componentConfigSignal.types` | `RecorderMode[]` | Recorder modes permitted on this button (subset of `'audio' \| 'video' \| 'screen' \| 'all'`). | `` | -| `componentConfigSignal.recorderModes` | `{ AUDIO: 'audio'; VIDEO: 'video'; SCREEN: 'screen'; ALL: 'all' }` | Constant id map. Useful when comparing to `componentConfigSignal.types`. | `` | -| `componentConfigSignal.disabled` | `boolean` | Button is disabled. | `velt-class="'is-disabled': {componentConfigSignal.disabled}"` | -| `componentConfigSignal.darkMode` | `boolean` | Dark mode is active. | `velt-class="'theme-dark': {componentConfigSignal.darkMode}"` | -| `componentConfigSignal.shadowDom` | `boolean` | Shadow-DOM rendering is enabled. | _Host config — set via element attribute._ | -| `componentConfigSignal.screenSharingSupported` | `boolean` | Browser supports `getDisplayMedia`. | `velt-if="{componentConfigSignal.screenSharingSupported}"` | -| `componentConfigSignal.recordingCountdown` | `boolean` | 3-2-1 countdown overlay is enabled. | `velt-if="{componentConfigSignal.recordingCountdown}"` | -| `componentConfigSignal.variant` | `string` | Wireframe variant id. | `` | -| `componentConfigSignal.initRecording` | `Function` | Click handler — call `componentConfigSignal.initRecording(type)` from a custom button. | _Call this from your custom button click._ | - -## Component Config — Recorder Pin - -State on the `` icon shown over a recorder annotation. - -| Variable | Type | Description | Example | -|---|---|---|---| -| `componentConfigSignal.recorderPinAnnotation` | [`RecorderAnnotation`](/api-reference/sdk/models/data-models#recorderannotation) | The annotation this pin represents. Includes `from`, `recorderId`, `recorders`, etc. | `` | -| `componentConfigSignal.recorderPinSelected` | `boolean` | Pin is currently selected. | `velt-class="'pin-selected': {componentConfigSignal.recorderPinSelected}"` | -| `componentConfigSignal.multipleRecorderPinsSelected` | `boolean` | Multi-select mode is active. | `velt-class="'multi-selected': {componentConfigSignal.multipleRecorderPinsSelected}"` | -| `componentConfigSignal.dragging` | `boolean` | Pin is being dragged. | `velt-class="'dragging': {componentConfigSignal.dragging}"` | - -## Component Config — Recorder Player (shared) - -State shared by `` and every `recorder-player-*` inner primitive. Each tag receives the same `componentConfigSignal` carrying the active recording's metadata + behaviour callbacks. - -| Variable | Type | Description | Example | -|---|---|---|---| -| `componentConfigSignal.recordingTranscriptionEnabled` | `boolean` | Transcription overlay is enabled for this recording. | `velt-class="'transcript-on': {componentConfigSignal.recordingTranscriptionEnabled}"` | -| `componentConfigSignal.recordingType` | `'audio'` \| `'video'` \| `'screen'` | Recorder type for this recording. | `velt-class="'is-{componentConfigSignal.recordingType}': true"` | -| `componentConfigSignal.recorderInitData` | [`RecorderInitData`](/api-reference/sdk/models/data-models#recorderinitdata) | Active recording handle. | _Internal — used by playback._ | -| `componentConfigSignal.attachment` | [`Attachment`](/api-reference/sdk/models/data-models#attachment) | Saved-attachment record (`url`, etc.). | `` | -| `componentConfigSignal.videoPosterDefaultImage` | `string` | Default poster image used when the video has no first frame yet. | `` | -| `componentConfigSignal.annotation` | [`RecorderAnnotation`](/api-reference/sdk/models/data-models#recorderannotation) | Recorder annotation backing this playback. | `` | -| `componentConfigSignal.totalTimeValue` | `number` | Total playback duration in milliseconds. | `` | -| `componentConfigSignal.currentTimeValue` | `number` | Current playback position in milliseconds. | `` | -| `componentConfigSignal.user` | [`User`](/api-reference/sdk/models/data-models#user) | Currently identified end-user. | `` | -| `componentConfigSignal.dragging` | `boolean` | Pin / panel is being dragged. | `velt-class="'dragging': {componentConfigSignal.dragging}"` | -| `componentConfigSignal.recorderPinSelected` | `boolean` | Pin is currently selected. | `velt-class="'pin-selected': {componentConfigSignal.recorderPinSelected}"` | -| `componentConfigSignal.sourceFeature` | `'comment'` \| `'standalone'` \| ... | Where this player is mounted. | `velt-class="'source-{componentConfigSignal.sourceFeature}': true"` | -| `componentConfigSignal.videoContainerHovered` | `boolean` | Video container is hovered. | `velt-class="'hovered': {componentConfigSignal.videoContainerHovered}"` | -| `componentConfigSignal.mode` | `'floating'` \| `'thread'` | Layout mode. | `velt-class="'mode-{componentConfigSignal.mode}': true"` | -| `componentConfigSignal.variant` | `RecorderVariant` | Wireframe variant id (`'default'` \| ...). | `` | - -### Player behaviour callbacks - -The shared player config also exposes ~15 behaviour callbacks you can attach to your own buttons: - -| Callback | Description | -|---|---| -| `componentConfigSignal.timeUpdate(...)` | Time-update handler. | -| `componentConfigSignal.toggleVideo(...)` | Play / pause toggle. | -| `componentConfigSignal.onSliderGrab(...)` / `onSliderDrag(...)` / `onSliderRelease(...)` | Timeline scrubber handlers. | -| `componentConfigSignal.onSeekToVideo(seconds)` / `componentConfigSignal.onSeekToAudio(seconds)` | Seek to a timestamp. | -| `componentConfigSignal.onSubtitlesButtonClick(...)` / `onSubtitlesPanelDragged(...)` | Subtitles overlay handlers. | -| `componentConfigSignal.onTranscriptionButtonClick(...)` / `onTranscriptionPanelDragged(...)` / `onTranscriptionTimestampClick(...)` / `onTranscriptionSummaryCopy(...)` | Transcription overlay handlers. | -| `componentConfigSignal.toggleAnnotation(...)` | Show / hide the annotation badge. | -| `componentConfigSignal.copyLink(...)` | Copy the playback URL. | -| `componentConfigSignal.deleteRecorderAnnotation(...)` | Delete the recording. | -| `componentConfigSignal.setVideoContainerHovered(boolean)` | Manual hover toggle. | - -## Type Reference - -Types referenced by the variables above: - -| Type | Description | -|---|---| -| [`User`](/api-reference/sdk/models/data-models#user) | Identified end-user object. | -| [`RecorderAnnotation`](/api-reference/sdk/models/data-models#recorderannotation) | Recorder annotation — `from`, `recorderId`, `recorders`, etc. | -| [`Attachment`](/api-reference/sdk/models/data-models#attachment) | Saved attachment record. | -| [`RecorderInitData`](/api-reference/sdk/models/data-models#recorderinitdata) | Active-recording handle exposed during playback. | -| `RecorderMode` | Recorder type discriminator (`'audio'` \| `'video'` \| `'screen'` \| `'all'`). | -| `RecorderVariant` | Wireframe variant id. | - -## Subcomponents - -Each subcomponent below has its own wireframe tag. - -### `recorder-button` (root) - -The record-trigger button. - -- **Public element:** `` -- **Wireframe tag:** No direct wireframe slot — see child slots below. -- **Children:** `recorder-audio-tool`, `recorder-video-tool`, `recorder-screen-tool`, `recorder-all-tool` — one per recorder type. - -| Property | Value | -|---|---| -| Extra variables | See [Component Config — Recorder Button](#component-config-recorder-button). | -| Host class | `velt-recorder-tool` (always). | - -#### Children - -| Primitive | Public element | Renders when | -|---|---|---| -| `recorder-audio-tool` | `` | `'audio'` is in `componentConfigSignal.types`. | -| `recorder-video-tool` | `` | `'video'` is in `componentConfigSignal.types`. | -| `recorder-screen-tool` | `` | `'screen'` is in `componentConfigSignal.types` **and** `componentConfigSignal.screenSharingSupported` is true. | -| `recorder-all-tool` | `` | The unified "record any" button is active. | - ---- - -### `recorder-control-panel` - -The control panel that appears during an active recording (record / pause / stop / discard). - -- **Public element:** `` -- **Wireframe tag:** No direct wireframe slot — see child slots below. - -| Property | Value | -|---|---| -| Extra variables | None beyond the shared player config. | - -| React Prop | HTML Attribute | Type | Default | Description | -|---|---|---|---|---| -| `mode` | `mode` | `'floating'` \| `'thread'` | `'floating'` | Layout mode. | -| `panelId` | `panel-id` | `string` | — | Identifier when multiple panels are mounted. | - ---- - -### `recorder-pin` - -The pin icon shown over a recorder annotation. - -- **Public element:** `` -- **Wireframe tag:** No direct wireframe slot — see child slots below. - -| Property | Value | -|---|---| -| Extra variables | See [Component Config — Recorder Pin](#component-config-recorder-pin). | -| Host class | `recorder-pin-container` (always). `recorder-pin-player-container` on the inner player wrapper. | - -| Angular Binding | Type | Default | Description | -|---|---|---|---| -| `[recorderPinAnnotation]` | [`RecorderAnnotation`](/api-reference/sdk/models/data-models#recorderannotation) | — | Required. The annotation this pin represents. | -| `[recorderPinSelected]` | `boolean` | `false` | Whether the pin is currently selected. | -| `[multipleRecorderPinsSelected]` | `boolean` | `false` | Whether multi-select mode is active. | -| `[avatarErrorImage]` | `string` | `''` | Fallback avatar URL. | -| `[user]` | [`User`](/api-reference/sdk/models/data-models#user) | — | Required. The current end-user. | -| `[dragging]` | `boolean` | `false` | Whether the pin is being dragged. | -| `[targetElement]` | `HTMLElement` | — | Anchor element for positioning. | - ---- - -### `recorder-player` - -The playback widget (audio + video). Composes ~20 sub-primitives — each with its own wireframe tag (see [Recorder Player Internals](#recorder-player-internals) below). - -- **Public element:** `` -- **Wireframe tag:** No direct wireframe slot — see child slots below. - -| Property | Value | -|---|---| -| Extra variables | See [Component Config — Recorder Player (shared)](#component-config-recorder-player-shared). | - -## Recorder Player Internals - -Each player primitive below has its own `-wireframe>` tag. All receive the same shared `componentConfigSignal`. - -### `recorder-player-overlay` - -The overlay UI on top of the playing video (controls + scrubber + buttons). Most controls live inside the overlay. - -- **Wireframe tag:** `` - ---- - -### `recorder-player-video-container` / `recorder-player-video` - -Container for the ` -**Drawbacks:** -- Custom CSS required for the entire component tree since adding children components to wireframes removes Velt's default styles. + -**Example:** Customizing the entire Comment Dialog structure: +Inside a `Velt…Wireframe`, lay out the slots however your design wants. Your own elements (`
`, `
`) provide structure/visuals; the `Velt…Wireframe.X` slots are where Velt's behavior renders. - - +```tsx +import { VeltCommentDialogWireframe } from "@veltdev/react"; -```jsx - +export function VeltCommentDialogWf() { + return ( - - -
- - - - -
+
+ +
+
+ + +
+
+ + + + +
+
+ + + + + +
+ +
+ + + +
+
+ + + + + +
+ + + +
+ +
- + ); +} ``` - - - -```html - - - - -
- - - - -
- - +Then mount the live feature somewhere (it renders using the template above): + +```tsx + +// or a standalone thread: + ``` - - -# Variants + +**Slots take inputs too.** Some slots accept props, such as `Composer.ActionButton type="submit"`, `Composer.Input placeholder="..."`, and `ThreadCard.Reactions excludeReactionIds={[...]}`. The complete slot list, per-slot props, and every wireframe component are in [`Wireframe components`](/ui-customization/reference/wireframe-components). + + + -Variants allow you to: -- Create multiple styled versions of the same component -- Switch between them dynamically in different parts of your app -- Maintain consistent behavior while having different looks +## What it can and can't do -### Create Custom Variants +| ✅ Wireframes can | ❌ Wireframes can't | +|---|---| +| Give Velt's UI any layout/structure you want | Run your React handlers/state/hooks inside slots | +| Add non-interactive custom markup around Velt's parts | Host live UI-library components (interactivity is stripped) | +| Conditionally render via `velt-if` and show data via `velt-data` | Change Velt's *behavior* (slots give you Velt's behavior, not custom) | +| Override only the slots you care about | Relayout a **list/repeater** slot: customize its **item** instead ([list/repeater slots](#7b-listrepeater-slots--custom-layout-is-ignored-the-replacetemplate-false-case)) | +| Customize each row via its item slot | Be split across multiple `` roots | -Custom variants let you define your own versions of components. For example: You can have a variant of Comment Sidebar for one page and another for another page. +--- - - -On the wireframe component, add the `variant` prop to define your custom variants. +## Notes & deep-dives - - +### 3b. Scoping: global vs scoped wireframes (important) -```jsx +Where you place a child wireframe changes **where it applies**: + +- **Child wireframe nested *inside* its parent wireframe → scoped to that parent's render.** It travels as part of the parent's cloned subtree, so it only customizes the child *as it appears inside that parent*. Example: a `ThreadCard` layout placed inside `VeltCommentDialogWireframe` customizes thread cards **in the dialog**, not elsewhere. +- **Child wireframe placed *directly* at the `` root → global.** It registers under its own key and applies to that component **everywhere it renders** (dialog, sidebar, inline section, …). + +```tsx - {/* Variant for preview page */} - - {/* Custom layout for preview */} - - - {/* Variant for editor page */} - - {/* Custom layout for editor */} - + {/* SCOPED: this ThreadCard layout applies only inside the dialog */} + + + + {/* …custom… */} + + + + + {/* GLOBAL: a ThreadCard registered at the root would apply to thread cards everywhere */} ``` - - - -```html - - {/* Variant for preview page */} - - {/* Custom layout for preview */} - - - {/* Variant for editor page */} - - {/* Custom layout for editor */} - - -``` - - - +**Mechanism:** the registry is a flat global map keyed by component name (+ optional `variant`/suffix), never by parent. The root `` scan registers only its **direct** children as global keys; a nested child isn't a direct child, so it isn't registered globally: it rides inside the parent's clone. Collisions resolve **first-with-content-wins**, so a global/root definition is *not* overwritten by a nested one. Practical rule: **nest to scope, root-level to go global; don't register the same component both ways.** - -- Use the `variant` prop on the related Velt component to apply the custom variant you defined. The value should match the variant name from step 1. -- For example, use `variant="preview-page"` to apply the preview page variant you created above. +### 3c. Variants: multiple looks for the same component - - +By default a component has **one** registered wireframe. **Variants let you register several wireframe templates for the *same* component and choose which one renders, by a `variant` name.** This is how you give one component **different looks in different contexts**: without that, a component looks identical everywhere it appears. -```jsx - -``` +- **Register a variant:** put `variant=""` on the `Velt…Wireframe`. Its template is registered under that variant (internally keyed as `component---`). +- **Select a variant:** the live component renders the wireframe whose variant matches its **current variant**. You set that with the component's variant prop(s): the general `variant`, and because the comment dialog is reused in several contexts: `dialogVariant`, `focusedThreadDialogVariant`, and `pageModeComposerVariant` pick the variant for each of those contexts. +- **Fallback:** if no wireframe matches the active variant, Velt falls back to the **base (no-variant) wireframe** for that component. So "one base wireframe + a couple of variant wireframes" is the normal setup. + +Example: the comment dialog appears both as a floating popover on the page **and** as a row inside the sidebar; give each its own design: - +```tsx + + {/* base look (used for the floating dialog) */} + …floating layout… - -```html - + {/* a different look, used only when the dialog renders inside the sidebar */} + …compact row layout… + + +// tell the sidebar's embedded dialog to use the "sidebar" variant: + ``` - - - - -### Use Pre-defined Variants +**When to use:** the same component needs two+ distinct designs (floating vs sidebar vs focused-thread vs page-mode composer), or A/B variations. **When not:** if the look is the same everywhere, skip variants: one base wireframe is enough. (Variant names are yours to choose; they just have to match between the `variant` on the wireframe and the `…Variant` prop on the component.) -Many components come with built-in variants optimized for specific use cases. For example, the Comment Dialog has two pre-defined variants for different contexts: +### 4. Slot granularity: override only what you want - - +The slot tree is **very** fine-grained (hundreds of slots across the SDK). For example, inside a comment dialog you'll find slots such as: composer → `Input` / `Attachments` (image *and* other, each with delete/download/loading sub-slots) / `AssignUser`; thread-card → `Avatar` / `Attachments` / `Name` / `Time` / `Message` / `Options` / `Reactions`; assignee-banner → `ResolveButton` / `UnresolveButton`; options dropdown → `Edit` / `Delete`. -```jsx - - {/* For Pin, Area, and Text comments */} - - {/* Custom layout */} - +**You only fill the slots you care about: a slot you never declare falls back to Velt's default.** This means you can do a tiny override (just the empty state) or a near-total rebuild (overriding 40+ slots across the dialog/sidebar). **Two exceptions to the fallback rule:** **container/structural** slots (see the warning below: declare a container and you own its whole child tree) and **list/repeater** slots ([see list/repeater slots](#7b-listrepeater-slots--custom-layout-is-ignored-the-replacetemplate-false-case): Velt keeps rendering its own loop; customize the *item*, not the wrapper). - {/* For Sidebar comments */} - - {/* Custom layout */} - - -``` + +**Container slots are the exception: verified in-browser.** The fallback rule holds for **leaf** slots, but the moment you declare a **structural/container** slot (a feature root like `velt-comments-sidebar-v2-wireframe`, or a parent like the sidebar `panel`/`header`), **you own its layout: any structural children you *don't* declare inside it disappear: they do NOT fall back to Velt's default.** Tested live: a sidebar root wireframe containing *only* a custom empty-placeholder rendered the empty state correctly **but dropped the search box, filter buttons, and list** (which the default empty state shows). Fix: declare the full structural tree you want inside the container (e.g. `panel → header(search, filter) → list → empty-placeholder`), exactly as the SDK's own wireframe examples do. **Rule of thumb:** override a *leaf* and the rest stays; override a *container* and you must re-declare its children. + - - - -```html - - {/* For Pin, Area, and Text comments */} - - {/* Custom layout */} - - - {/* For Sidebar comments */} - - {/* Custom layout */} - - -``` - - +The complete slot list per feature: [`Wireframe components`](/ui-customization/reference/wireframe-components). - -- Each component's documentation lists its supported pre-defined variants -- Pre-defined variants are optimized for specific use cases but can still be customized -- You can combine pre-defined variants with your own custom styling - +### 5. Tokens: conditional rendering, classes, and live data +Inside wireframe markup you can read live state with **`{…}` tokens** and use them three ways. (Full syntax + the 240+ variable names: [`Wireframe tokens`](/ui-customization/conditional-templates).) -# Common Customization Tasks +**`velt-if`: show/hide based on a condition:** -### Replace Default Layout +```tsx +import { VeltIf } from "@veltdev/react"; -Simply provide your own HTML or components as children of the wireframe component: + + +

Be the first to comment

+ + +

No comments match your filters

+ + +``` - - +`velt-if` supports logical/comparison operators, e.g. `condition="{enableResolve} && {canResolveAnnotation}"` or `condition="{commentIndex} === 0"`. -```jsx - - - - - +**`velt-data`: print a live value as text:** + +```tsx +import { VeltData } from "@veltdev/react"; +Assigned to ``` - - - -```html - - - - - +**`velt-class`: toggle CSS classes conditionally:** + +```tsx +
+{/* or the single-class form: */} +
``` - - -### Remove Components +> Where do variable names come from? They're a fixed set (`{user}`, `{annotation}`, `{comment}`, `{commentIndex}`, `{noCommentsFound}`, `{darkMode}`, …). **A name not in the catalog resolves to `undefined`.** Never invent one. Syntax: [`Wireframe tokens`](/ui-customization/conditional-templates); full catalog: [`Wireframe variables`](/ui-customization/template-variables). -To remove a component, you either: -- simply omit it from the wireframe template as shown below, or -- use [Conditional Templates](/ui-customization/conditional-templates) +### 6. The interactivity rule (the single most important thing) - - +> **Inside a wireframe, your own React interactivity does NOT run. Behavior comes only from Velt's `Velt…Wireframe.X` slot components.** -```jsx - - - {/* Priority and CopyLink buttons removed */} - - - - - -``` +When Velt renders a wireframe, it **copies your slot markup** into its own render tree (technically: it serializes your slot to HTML and re-instantiates only the `velt-*` slot elements inside it). The copy is plain DOM. That means, for markup you put in a slot: - - - -```html - - - {/* Priority and CopyLink buttons removed */} - - - - - -``` - - +| In your wireframe markup | Survives into the live UI? | +|---|---| +| Static elements (`
`, ``, `
`, icons) | ✅ yes | +| **Your UI-library components used as static presentation** (a ``, ``, styled button shell) | ✅ yes: their **rendered markup + CSS classes** survive | +| CSS `className` / inline styles | ✅ yes | +| `{…}` tokens (`velt-if`, `velt-class`, `velt-data`) | ✅ yes (Velt resolves them) | +| `Velt…Wireframe.X` slot components | ✅ yes: **this is where behavior comes from** | +| Your React `onClick`, `useState`, hooks | ❌ **no: silently dead** | +| A UI-library component's **behavior** (its own click/state/effects) | ❌ no: only its static markup renders | -### Reorder Components -To reorder components, simply rearrange them within the wireframe template. +> **Using your UI library in wireframes = static components and classes.** You *can* drop in your design-system components for their look (markup + classes survive the clone), but their interactivity does not run. For interactive library components, use [primitives](/ui-customization/primitives). - - +**Why:** Velt reduces wireframe slot content to an HTML string, which strips React listeners; it then re-instantiates only its own `velt-*` components. A probe ` ``` - - - -```html - - - - - - - - - +If your design genuinely needs custom interactive behavior that no slot provides, that's the signal to go **[headless](/ui-customization/headless)**. + +### 7. Page-mode (a common wireframe scenario) + +"Page mode" renders the comments **sidebar anchored to elements on your page** (e.g. one thread per form question), with a per-element **comment-count bubble** and a page-mode composer. It's still just wireframes: you fill the sidebar/thread/composer slots and the comment-bubble count slot to get custom comment cards, attachments, reactions, and assignment rows, all while Velt keeps the behavior. + +> Page mode usually goes hand-in-hand with **context**: attaching your domain data (e.g. the question id/title) to each comment and reading it back in the dialog/composer. See [`Context`](/ui-customization/context). + +### 7b. List/repeater slots: custom layout is ignored (the `replaceTemplate: false` case) + +A few slots are **list/repeater containers**: they render a loop of child items (e.g. the comments **list**, the presence **avatar list**, the **reactions panel items**, the activity-log **list**). These slots run in a mode where **your custom layout/markup around them does NOT replace the container**: Velt keeps rendering its own loop and ignores wrapper divs or reordering you put there. + +What this means in practice: + +- ❌ Wrapping a list slot in your own grid/flex layout, or adding sibling markup inside it, **won't take effect**: the default loop renders regardless. +- ✅ **Customize the repeated *item* instead.** Velt passes a child/item template directly to the specific child component, so you style/restructure each **row via its own item wireframe** (e.g. customize the *list item*, not the *list*). The list keeps Velt's looping; you control how one item looks. + +```tsx +{/* The LIST container keeps Velt's loop: your wrapping layout here is ignored. + Customize the per-row look via the item/child slot it renders. */} + + {/* ← customize the ROW here */} + ``` - - \ No newline at end of file + +Rule of thumb: **if a slot represents a *list of things*, don't relayout the list: restructure the item.** (If you truly need a custom list layout/virtualization, that's a signal for [primitives](/ui-customization/primitives), where you own the loop.) + +### 8. How to discover slots and variables + +- **Slots & slot props:** [`Wireframe components`](/ui-customization/reference/wireframe-components) (every wireframe + full slot trees) and the overview in [`Component catalog`](/ui-customization/reference/component-catalog). +- **Variables/tokens:** syntax in [`Wireframe tokens`](/ui-customization/conditional-templates); the full `{…}` catalog in [`Wireframe variables`](/ui-customization/template-variables). +- **Stateful CSS classes** (to style state without a slot): [`CSS classes`](/ui-customization/reference/css-classes). + +## Checklist + +- [ ] Exactly **one** `` in the app. +- [ ] The live feature component (`VeltComments` / `VeltCommentsSidebar` / `VeltCommentDialog`) is **mounted** in addition to the wireframe. +- [ ] No React `onClick`/`useState`/hooks inside slot markup: interactivity comes from `Velt…Wireframe.X` slots only. +- [ ] For list/repeater slots, customized the **item**, not the container layout ([list/repeater slots](#7b-listrepeater-slots--custom-layout-is-ignored-the-replacetemplate-false-case)). +- [ ] Only real slot names ([`Wireframe components`](/ui-customization/reference/wireframe-components)) and real `{…}` variables ([`Wireframe variables`](/ui-customization/template-variables)). +- [ ] `shadowDom={false}` if you style the result. +- [ ] Decided scope per child wireframe: nested = scoped, root = global ([scoping](#3b-scoping--global-vs-scoped-wireframes-important)). +- [ ] Unfilled slots intentionally left to Velt defaults. diff --git a/ui-customization/localisation.mdx b/ui-customization/localisation.mdx index 6a33d5154..a696b77ff 100644 --- a/ui-customization/localisation.mdx +++ b/ui-customization/localisation.mdx @@ -1,89 +1,101 @@ --- -title: Localisation +title: "Cross-cutting concerns: a11y, i18n, RTL, responsive, testing" +sidebarTitle: "Cross-cutting" +description: "Handle accessibility, localization, RTL, responsive behavior, and testing across Velt customizations." --- -Localize all static strings visible in the SDK Components. - - - If you notice any missing strings, please reach out to us. - - -## Steps - - -Get the complete list of strings that can be localized [here](https://firebasestorage.googleapis.com/v0/b/snippyly.appspot.com/o/external%2Flocalization-strings-map.json?alt=media&token=0cdd2b52-10ed-4033-a08a-5c2b622ce7df). - - -- Translate the strings in the languages you want to support. -- Create an object with the translations for the languages you want to support in the following format: - -```json -{ - "language-code-1": { - "original string 1": "translated string 1", - "original string 2": "translated string 2", - ... - }, - "language-code-2": { - "original string 1": "translated string 1", - "original string 2": "translated string 2", - ... - }, - ... -} -``` - - -Call the `setTranslations` method with the translations object you created in the previous step. - -```js -client.setTranslations(translationsObject); -``` - - - -Set the language you want to use for the SDK. The language code should be the same as the language code you used in the translations object. - -```js -client.setLanguage('en'); -``` - - - -## Example - - -```jsx -// Provide the localization object for the languages you want to support. -client.setTranslations({ - 'en': { - 'All comments': 'All comments', - }, - 'fr': { - 'All comments': 'Tous les commentaires', - }, - // Add more languages as needed. -}); - -// Set one of the languages you've provided the translations for. -client.setLanguage('en'); -``` - - -```js -// Provide the localization object for the languages you want to support. -Velt.setTranslations({ - 'en': { - 'All comments': 'All comments', - }, - 'fr': { - 'All comments': 'Tous les commentaires', - }, - // Add more languages as needed. -}); - -// Set one of the languages you've provided the translations for. -Velt.setLanguage('en'); -``` - - \ No newline at end of file + +This is the canonical public docs page for cross-cutting customization concerns. The guide repo calls this topic `cross-cutting`; the docs keep the existing `/ui-customization/localisation` route and redirect `/ui-customization/cross-cutting` here. + + +These apply to **every** approach and feature. Handle them as you build, not after. (The short version lives in [`Setup`](/ui-customization/setup#6-crosscutting-concerns-a11y-i18n-rtl-responsive-testing); this is the deep version.) + +--- + +## Accessibility (a11y) + +**What Velt gives you for free, and when you keep it:** + +- **Velt's default UI and its slot components** ship with roles, labels, keyboard handling, and focus management. +- **Primitives** render Velt's components, so they **keep** that a11y. Wrapping a primitive in your own UI library is fine: the Velt part stays accessible. +- **Wireframes**: Velt's behavior **and a11y** live in the `Velt…Wireframe.X` **slot components**: keep using them for anything interactive (buttons, inputs, dropdowns). The custom markup *you* add around slots is **yours to make accessible.** +- **Headless**: you own 100% of the a11y: there's no Velt UI to inherit from. + +**Your checklist when wireframing or going headless:** + +- Use semantic elements (`