@veltdev/react 1.0.138 → 1.0.140

package/cjs/index.js

@@ -140,8 +140,9 @@ var loadVelt = function (callback, version, staging, develop, proxyDomain) {
     }
 };
 
-var VELT_SDK_VERSION = '1.0.156';
+var VELT_SDK_VERSION = '1.0.157';
 var VELT_SDK_INIT_EVENT = 'onVeltInit';
+var VELT_TAB_ID = 'veltTabId';
 
 var SnippylyProvider = function (props) {
     var apiKey = props.apiKey, user = props.user, config = props.config, documentId = props.documentId, language = props.language, translations = props.translations, autoTranslation = props.autoTranslation, onClientLoad = props.onClientLoad, children = props.children;
@@ -228,12 +229,12 @@ var SnippylyProvider = function (props) {
 };
 
 var SnippylyCommentBubble = function (props) {
-    var targetCommentElementId = props.targetCommentElementId, avatar = props.avatar, showAvatar = props.showAvatar, commentBubbleTargetPinHover = props.commentBubbleTargetPinHover, children = props.children, shadowDom = props.shadowDom, variant = props.variant;
-    return (React__default["default"].createElement("velt-comment-bubble", { "target-comment-element-id": targetCommentElementId, "show-avatar": [true, false].includes(showAvatar) ? (showAvatar ? 'true' : 'false') : undefined, avatar: [true, false].includes(avatar) ? (avatar ? 'true' : 'false') : undefined, "comment-bubble-target-pin-hover": commentBubbleTargetPinHover ? 'true' : undefined, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, variant: variant }, children));
+    var targetCommentElementId = props.targetCommentElementId, avatar = props.avatar, showAvatar = props.showAvatar, commentBubbleTargetPinHover = props.commentBubbleTargetPinHover, children = props.children, shadowDom = props.shadowDom, variant = props.variant, darkMode = props.darkMode;
+    return (React__default["default"].createElement("velt-comment-bubble", { "target-comment-element-id": targetCommentElementId, "show-avatar": [true, false].includes(showAvatar) ? (showAvatar ? 'true' : 'false') : undefined, avatar: [true, false].includes(avatar) ? (avatar ? 'true' : 'false') : undefined, "comment-bubble-target-pin-hover": commentBubbleTargetPinHover ? 'true' : undefined, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined, variant: variant }, children));
 };
 
 var SnippylyComments = function (props) {
-    var autoCategorize = props.autoCategorize, streamViewContainerId = props.streamViewContainerId, onSignIn = props.onSignIn, onUpgrade = props.onUpgrade, textMode = props.textMode, popoverMode = props.popoverMode, popoverTriangleComponent = props.popoverTriangleComponent, floatingCommentDialog = props.floatingCommentDialog, moderatorMode = props.moderatorMode, streamMode = props.streamMode, signInButton = props.signInButton, upgradeButton = props.upgradeButton, attachments = props.attachments, recordings = props.recordings, reactions = props.reactions, deviceInfo = props.deviceInfo, commentIndex = props.commentIndex, dialogOnHover = props.dialogOnHover, dialogOnTargetElementClick = props.dialogOnTargetElementClick, priority = props.priority, inboxMode = props.inboxMode, suggestionMode = props.suggestionMode, mobileMode = props.mobileMode, inlineCommentMode = props.inlineCommentMode, privateCommentMode = props.privateCommentMode, minimap = props.minimap, persistentCommentMode = props.persistentCommentMode, ghostComments = props.ghostComments, ghostCommentsIndicator = props.ghostCommentsIndicator, commentsOnDom = props.commentsOnDom, resolvedCommentsOnDom = props.resolvedCommentsOnDom, commentTool = props.commentTool, sidebarButtonOnCommentDialog = props.sidebarButtonOnCommentDialog, deviceIndicatorOnCommentPins = props.deviceIndicatorOnCommentPins, scrollToComment = props.scrollToComment, userMentions = props.userMentions, deleteOnBackspace = props.deleteOnBackspace, hotkey = props.hotkey, recordingSummary = props.recordingSummary, recordingCountdown = props.recordingCountdown, unreadIndicatorMode = props.unreadIndicatorMode, enterKeyToSubmit = props.enterKeyToSubmit, pinShadowDom = props.pinShadowDom, dialogShadowDom = props.dialogShadowDom, shadowDom = props.shadowDom, changeDetectionInCommentMode = props.changeDetectionInCommentMode, allowedElementIds = props.allowedElementIds, allowedElementClassNames = props.allowedElementClassNames, allowedElementQuerySelectors = props.allowedElementQuerySelectors, commentPinHighlighter = props.commentPinHighlighter, customReactions = props.customReactions, onCommentAdd = props.onCommentAdd, onCommentUpdate = props.onCommentUpdate, onCommentAccept = props.onCommentAccept, onCommentReject = props.onCommentReject, onSidebarButtonOnCommentDialogClick = props.onSidebarButtonOnCommentDialogClick, onCommentSelectionChange = props.onCommentSelectionChange, customStatus = props.customStatus, customPriority = props.customPriority, customCategory = props.customCategory, status = props.status, resolveButton = props.resolveButton, darkMode = props.darkMode, onCustomPinInject = props.onCustomPinInject, children = props.children, textCommentToolShadowDom = props.textCommentToolShadowDom, textCommentToolbarShadowDom = props.textCommentToolbarShadowDom;
+    var autoCategorize = props.autoCategorize, streamViewContainerId = props.streamViewContainerId, onSignIn = props.onSignIn, onUpgrade = props.onUpgrade, textMode = props.textMode, popoverMode = props.popoverMode, popoverTriangleComponent = props.popoverTriangleComponent, floatingCommentDialog = props.floatingCommentDialog, moderatorMode = props.moderatorMode, streamMode = props.streamMode, signInButton = props.signInButton, upgradeButton = props.upgradeButton, attachments = props.attachments, recordings = props.recordings, reactions = props.reactions, deviceInfo = props.deviceInfo, commentIndex = props.commentIndex, dialogOnHover = props.dialogOnHover, dialogOnTargetElementClick = props.dialogOnTargetElementClick, priority = props.priority, inboxMode = props.inboxMode, suggestionMode = props.suggestionMode, mobileMode = props.mobileMode, inlineCommentMode = props.inlineCommentMode, privateCommentMode = props.privateCommentMode, minimap = props.minimap, persistentCommentMode = props.persistentCommentMode, ghostComments = props.ghostComments, ghostCommentsIndicator = props.ghostCommentsIndicator, commentsOnDom = props.commentsOnDom, resolvedCommentsOnDom = props.resolvedCommentsOnDom, commentTool = props.commentTool, sidebarButtonOnCommentDialog = props.sidebarButtonOnCommentDialog, deviceIndicatorOnCommentPins = props.deviceIndicatorOnCommentPins, scrollToComment = props.scrollToComment, userMentions = props.userMentions, deleteOnBackspace = props.deleteOnBackspace, hotkey = props.hotkey, recordingSummary = props.recordingSummary, recordingCountdown = props.recordingCountdown, unreadIndicatorMode = props.unreadIndicatorMode, enterKeyToSubmit = props.enterKeyToSubmit, pinShadowDom = props.pinShadowDom, dialogShadowDom = props.dialogShadowDom, shadowDom = props.shadowDom, changeDetectionInCommentMode = props.changeDetectionInCommentMode, allowedElementIds = props.allowedElementIds, allowedElementClassNames = props.allowedElementClassNames, allowedElementQuerySelectors = props.allowedElementQuerySelectors, commentPinHighlighter = props.commentPinHighlighter, customReactions = props.customReactions, onCommentAdd = props.onCommentAdd, onCommentUpdate = props.onCommentUpdate, onCommentAccept = props.onCommentAccept, onCommentReject = props.onCommentReject, onSidebarButtonOnCommentDialogClick = props.onSidebarButtonOnCommentDialogClick, onCommentSelectionChange = props.onCommentSelectionChange, customStatus = props.customStatus, customPriority = props.customPriority, customCategory = props.customCategory, status = props.status, resolveButton = props.resolveButton, darkMode = props.darkMode, onCustomPinInject = props.onCustomPinInject, children = props.children, textCommentToolShadowDom = props.textCommentToolShadowDom, textCommentToolbarShadowDom = props.textCommentToolbarShadowDom, dialogDarkMode = props.dialogDarkMode, pinDarkMode = props.pinDarkMode, textCommentToolDarkMode = props.textCommentToolDarkMode, textCommentToolbarDarkMode = props.textCommentToolbarDarkMode;
     var ref = React.useRef();
     var onSignInRef = React.useRef(onSignIn);
     var onUpgradeRef = React.useRef(onUpgrade);
@@ -322,11 +323,11 @@ var SnippylyComments = function (props) {
             });
         }
     }, []);
-    return (React__default["default"].createElement("velt-comments", { ref: ref, "auto-categorize": [true, false].includes(autoCategorize) ? (autoCategorize ? 'true' : 'false') : undefined, "data-stream-view-container-id": streamViewContainerId, "text-mode": [true, false].includes(textMode) ? (textMode ? 'true' : 'false') : undefined, "popover-mode": [true, false].includes(popoverMode) ? (popoverMode ? 'true' : 'false') : undefined, "popover-triangle-component": [true, false].includes(popoverTriangleComponent) ? (popoverTriangleComponent ? 'true' : 'false') : undefined, "floating-comment-dialog": [true, false].includes(floatingCommentDialog) ? (floatingCommentDialog ? 'true' : 'false') : undefined, "moderator-mode": [true, false].includes(moderatorMode) ? (moderatorMode ? 'true' : 'false') : undefined, "stream-mode": [true, false].includes(streamMode) ? (streamMode ? 'true' : 'false') : undefined, "sign-in-button": [true, false].includes(signInButton) ? (signInButton ? 'true' : 'false') : undefined, "upgrade-button": [true, false].includes(upgradeButton) ? (upgradeButton ? 'true' : 'false') : undefined, attachments: [true, false].includes(attachments) ? (attachments ? 'true' : 'false') : undefined, recordings: recordings, reactions: [true, false].includes(reactions) ? (reactions ? 'true' : 'false') : undefined, "device-info": [true, false].includes(deviceInfo) ? (deviceInfo ? 'true' : 'false') : undefined, "comment-index": [true, false].includes(commentIndex) ? (commentIndex ? 'true' : 'false') : undefined, "dialog-on-hover": [true, false].includes(dialogOnHover) ? (dialogOnHover ? 'true' : 'false') : undefined, "dialog-on-target-element-click": [true, false].includes(dialogOnTargetElementClick) ? (dialogOnTargetElementClick ? 'true' : 'false') : undefined, priority: [true, false].includes(priority) ? (priority ? 'true' : 'false') : undefined, status: [true, false].includes(status) ? (status ? 'true' : 'false') : undefined, "resolve-button": [true, false].includes(resolveButton) ? (resolveButton ? 'true' : 'false') : undefined, "inbox-mode": [true, false].includes(inboxMode) ? (inboxMode ? 'true' : 'false') : undefined, "suggestion-mode": [true, false].includes(suggestionMode) ? (suggestionMode ? 'true' : 'false') : undefined, "mobile-mode": [true, false].includes(mobileMode) ? (mobileMode ? 'true' : 'false') : undefined, "inline-comment-mode": [true, false].includes(inlineCommentMode) ? (inlineCommentMode ? 'true' : 'false') : undefined, "private-comment-mode": [true, false].includes(privateCommentMode) ? (privateCommentMode ? 'true' : 'false') : undefined, minimap: [true, false].includes(minimap) ? (minimap ? 'true' : 'false') : undefined, "persistent-comment-mode": [true, false].includes(persistentCommentMode) ? (persistentCommentMode ? 'true' : 'false') : undefined, "ghost-comments": [true, false].includes(ghostComments) ? (ghostComments ? 'true' : 'false') : undefined, "ghost-comments-indicator": [true, false].includes(ghostCommentsIndicator) ? (ghostCommentsIndicator ? 'true' : 'false') : undefined, "comments-on-dom": [true, false].includes(commentsOnDom) ? (commentsOnDom ? 'true' : 'false') : undefined, "resolved-comments-on-dom": [true, false].includes(resolvedCommentsOnDom) ? (resolvedCommentsOnDom ? 'true' : 'false') : undefined, "comment-tool": [true, false].includes(commentTool) ? (commentTool ? 'true' : 'false') : undefined, "sidebar-button-on-comment-dialog": [true, false].includes(sidebarButtonOnCommentDialog) ? (sidebarButtonOnCommentDialog ? 'true' : 'false') : undefined, "device-indicator-on-comment-pins": [true, false].includes(deviceIndicatorOnCommentPins) ? (deviceIndicatorOnCommentPins ? 'true' : 'false') : undefined, "scroll-to-comment": [true, false].includes(scrollToComment) ? (scrollToComment ? 'true' : 'false') : undefined, "user-mentions": [true, false].includes(userMentions) ? (userMentions ? 'true' : 'false') : undefined, "delete-on-backspace": [true, false].includes(deleteOnBackspace) ? (deleteOnBackspace ? 'true' : 'false') : undefined, hotkey: [true, false].includes(hotkey) ? (hotkey ? 'true' : 'false') : undefined, "recording-summary": [true, false].includes(recordingSummary) ? (recordingSummary ? 'true' : 'false') : undefined, "recording-countdown": [true, false].includes(recordingCountdown) ? (recordingCountdown ? 'true' : 'false') : undefined, "unread-indicator-mode": unreadIndicatorMode, "enter-key-to-submit": [true, false].includes(enterKeyToSubmit) ? (enterKeyToSubmit ? 'true' : 'false') : undefined, "pin-shadow-dom": [true, false].includes(pinShadowDom) ? (pinShadowDom ? 'true' : 'false') : undefined, "dialog-shadow-dom": [true, false].includes(dialogShadowDom) ? (dialogShadowDom ? 'true' : 'false') : undefined, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "text-comment-tool-shadow-dom": [true, false].includes(textCommentToolShadowDom) ? (textCommentToolShadowDom ? 'true' : 'false') : undefined, "text-comment-toolbar-shadow-dom": [true, false].includes(textCommentToolbarShadowDom) ? (textCommentToolbarShadowDom ? 'true' : 'false') : undefined, "change-detection-in-comment-mode": [true, false].includes(changeDetectionInCommentMode) ? (changeDetectionInCommentMode ? 'true' : 'false') : undefined, "allowed-element-ids": JSON.stringify(allowedElementIds), "allowed-element-class-names": JSON.stringify(allowedElementClassNames), "allowed-element-query-selectors": JSON.stringify(allowedElementQuerySelectors), "comment-pin-highlighter": [true, false].includes(commentPinHighlighter) ? (commentPinHighlighter ? 'true' : 'false') : undefined, "custom-reactions": JSON.stringify(customReactions), "custom-status": JSON.stringify(customStatus), "custom-priority": JSON.stringify(customPriority), "custom-category": JSON.stringify(customCategory), "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined }, children));
+    return (React__default["default"].createElement("velt-comments", { ref: ref, "auto-categorize": [true, false].includes(autoCategorize) ? (autoCategorize ? 'true' : 'false') : undefined, "data-stream-view-container-id": streamViewContainerId, "text-mode": [true, false].includes(textMode) ? (textMode ? 'true' : 'false') : undefined, "popover-mode": [true, false].includes(popoverMode) ? (popoverMode ? 'true' : 'false') : undefined, "popover-triangle-component": [true, false].includes(popoverTriangleComponent) ? (popoverTriangleComponent ? 'true' : 'false') : undefined, "floating-comment-dialog": [true, false].includes(floatingCommentDialog) ? (floatingCommentDialog ? 'true' : 'false') : undefined, "moderator-mode": [true, false].includes(moderatorMode) ? (moderatorMode ? 'true' : 'false') : undefined, "stream-mode": [true, false].includes(streamMode) ? (streamMode ? 'true' : 'false') : undefined, "sign-in-button": [true, false].includes(signInButton) ? (signInButton ? 'true' : 'false') : undefined, "upgrade-button": [true, false].includes(upgradeButton) ? (upgradeButton ? 'true' : 'false') : undefined, attachments: [true, false].includes(attachments) ? (attachments ? 'true' : 'false') : undefined, recordings: recordings, reactions: [true, false].includes(reactions) ? (reactions ? 'true' : 'false') : undefined, "device-info": [true, false].includes(deviceInfo) ? (deviceInfo ? 'true' : 'false') : undefined, "comment-index": [true, false].includes(commentIndex) ? (commentIndex ? 'true' : 'false') : undefined, "dialog-on-hover": [true, false].includes(dialogOnHover) ? (dialogOnHover ? 'true' : 'false') : undefined, "dialog-on-target-element-click": [true, false].includes(dialogOnTargetElementClick) ? (dialogOnTargetElementClick ? 'true' : 'false') : undefined, priority: [true, false].includes(priority) ? (priority ? 'true' : 'false') : undefined, status: [true, false].includes(status) ? (status ? 'true' : 'false') : undefined, "resolve-button": [true, false].includes(resolveButton) ? (resolveButton ? 'true' : 'false') : undefined, "inbox-mode": [true, false].includes(inboxMode) ? (inboxMode ? 'true' : 'false') : undefined, "suggestion-mode": [true, false].includes(suggestionMode) ? (suggestionMode ? 'true' : 'false') : undefined, "mobile-mode": [true, false].includes(mobileMode) ? (mobileMode ? 'true' : 'false') : undefined, "inline-comment-mode": [true, false].includes(inlineCommentMode) ? (inlineCommentMode ? 'true' : 'false') : undefined, "private-comment-mode": [true, false].includes(privateCommentMode) ? (privateCommentMode ? 'true' : 'false') : undefined, minimap: [true, false].includes(minimap) ? (minimap ? 'true' : 'false') : undefined, "persistent-comment-mode": [true, false].includes(persistentCommentMode) ? (persistentCommentMode ? 'true' : 'false') : undefined, "ghost-comments": [true, false].includes(ghostComments) ? (ghostComments ? 'true' : 'false') : undefined, "ghost-comments-indicator": [true, false].includes(ghostCommentsIndicator) ? (ghostCommentsIndicator ? 'true' : 'false') : undefined, "comments-on-dom": [true, false].includes(commentsOnDom) ? (commentsOnDom ? 'true' : 'false') : undefined, "resolved-comments-on-dom": [true, false].includes(resolvedCommentsOnDom) ? (resolvedCommentsOnDom ? 'true' : 'false') : undefined, "comment-tool": [true, false].includes(commentTool) ? (commentTool ? 'true' : 'false') : undefined, "sidebar-button-on-comment-dialog": [true, false].includes(sidebarButtonOnCommentDialog) ? (sidebarButtonOnCommentDialog ? 'true' : 'false') : undefined, "device-indicator-on-comment-pins": [true, false].includes(deviceIndicatorOnCommentPins) ? (deviceIndicatorOnCommentPins ? 'true' : 'false') : undefined, "scroll-to-comment": [true, false].includes(scrollToComment) ? (scrollToComment ? 'true' : 'false') : undefined, "user-mentions": [true, false].includes(userMentions) ? (userMentions ? 'true' : 'false') : undefined, "delete-on-backspace": [true, false].includes(deleteOnBackspace) ? (deleteOnBackspace ? 'true' : 'false') : undefined, hotkey: [true, false].includes(hotkey) ? (hotkey ? 'true' : 'false') : undefined, "recording-summary": [true, false].includes(recordingSummary) ? (recordingSummary ? 'true' : 'false') : undefined, "recording-countdown": [true, false].includes(recordingCountdown) ? (recordingCountdown ? 'true' : 'false') : undefined, "unread-indicator-mode": unreadIndicatorMode, "enter-key-to-submit": [true, false].includes(enterKeyToSubmit) ? (enterKeyToSubmit ? 'true' : 'false') : undefined, "pin-shadow-dom": [true, false].includes(pinShadowDom) ? (pinShadowDom ? 'true' : 'false') : undefined, "dialog-shadow-dom": [true, false].includes(dialogShadowDom) ? (dialogShadowDom ? 'true' : 'false') : undefined, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "text-comment-tool-shadow-dom": [true, false].includes(textCommentToolShadowDom) ? (textCommentToolShadowDom ? 'true' : 'false') : undefined, "text-comment-toolbar-shadow-dom": [true, false].includes(textCommentToolbarShadowDom) ? (textCommentToolbarShadowDom ? 'true' : 'false') : undefined, "change-detection-in-comment-mode": [true, false].includes(changeDetectionInCommentMode) ? (changeDetectionInCommentMode ? 'true' : 'false') : undefined, "allowed-element-ids": JSON.stringify(allowedElementIds), "allowed-element-class-names": JSON.stringify(allowedElementClassNames), "allowed-element-query-selectors": JSON.stringify(allowedElementQuerySelectors), "comment-pin-highlighter": [true, false].includes(commentPinHighlighter) ? (commentPinHighlighter ? 'true' : 'false') : undefined, "custom-reactions": JSON.stringify(customReactions), "custom-status": JSON.stringify(customStatus), "custom-priority": JSON.stringify(customPriority), "custom-category": JSON.stringify(customCategory), "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined, "dialog-dark-mode": [true, false].includes(dialogDarkMode) ? (dialogDarkMode ? 'true' : 'false') : undefined, "pin-dark-mode": [true, false].includes(pinDarkMode) ? (pinDarkMode ? 'true' : 'false') : undefined, "text-comment-tool-dark-mode": [true, false].includes(textCommentToolDarkMode) ? (textCommentToolDarkMode ? 'true' : 'false') : undefined, "text-comment-toolbar-dark-mode": [true, false].includes(textCommentToolbarDarkMode) ? (textCommentToolbarDarkMode ? 'true' : 'false') : undefined }, children));
 };
 
 var SnippylyCommentsSidebar = function (props) {
-    var embedMode = props.embedMode, enableUrlNavigation = props.enableUrlNavigation, urlNavigation = props.urlNavigation, pageMode = props.pageMode, currentLocationSuffix = props.currentLocationSuffix, sortData = props.sortData, filterConfig = props.filterConfig, groupConfig = props.groupConfig, filters = props.filters, variant = props.variant, pageModeComposerVariant = props.pageModeComposerVariant, dialogVariant = props.dialogVariant, shadowDom = props.shadowDom, openSidebar = props.openSidebar, onSidebarOpen = props.onSidebarOpen, onSidebarCommentClick = props.onSidebarCommentClick, onCommentClick = props.onCommentClick;
+    var embedMode = props.embedMode, enableUrlNavigation = props.enableUrlNavigation, urlNavigation = props.urlNavigation, pageMode = props.pageMode, currentLocationSuffix = props.currentLocationSuffix, sortData = props.sortData, filterConfig = props.filterConfig, groupConfig = props.groupConfig, filters = props.filters, variant = props.variant, pageModeComposerVariant = props.pageModeComposerVariant, dialogVariant = props.dialogVariant, shadowDom = props.shadowDom, openSidebar = props.openSidebar, onSidebarOpen = props.onSidebarOpen, onSidebarCommentClick = props.onSidebarCommentClick, onCommentClick = props.onCommentClick, darkMode = props.darkMode;
     var ref = React.useRef();
     var openSidebarRef = React.useRef(openSidebar);
     var onSidebarOpenRef = React.useRef(onSidebarOpen);
@@ -366,7 +367,7 @@ var SnippylyCommentsSidebar = function (props) {
             });
         }
     }, []);
-    return (React__default["default"].createElement("velt-comments-sidebar", { ref: ref, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "embed-mode": [true, false].includes(embedMode) ? (embedMode ? 'true' : 'false') : undefined, "enable-url-navigation": [true, false].includes(enableUrlNavigation) ? (enableUrlNavigation ? 'true' : 'false') : undefined, "url-navigation": [true, false].includes(urlNavigation) ? (urlNavigation ? 'true' : 'false') : undefined, "page-mode": [true, false].includes(pageMode) ? (pageMode ? 'true' : 'false') : undefined, "current-location-suffix": [true, false].includes(currentLocationSuffix) ? (currentLocationSuffix ? 'true' : 'false') : undefined, "filter-config": filterConfig ? JSON.stringify(filterConfig) : undefined, "group-config": groupConfig ? JSON.stringify(groupConfig) : undefined, filters: filters ? JSON.stringify(filters) : undefined, variant: variant, "page-mode-composer-variant": pageModeComposerVariant, "dialog-variant": dialogVariant, "sort-data": sortData }));
+    return (React__default["default"].createElement("velt-comments-sidebar", { ref: ref, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "embed-mode": [true, false].includes(embedMode) ? (embedMode ? 'true' : 'false') : undefined, "enable-url-navigation": [true, false].includes(enableUrlNavigation) ? (enableUrlNavigation ? 'true' : 'false') : undefined, "url-navigation": [true, false].includes(urlNavigation) ? (urlNavigation ? 'true' : 'false') : undefined, "page-mode": [true, false].includes(pageMode) ? (pageMode ? 'true' : 'false') : undefined, "current-location-suffix": [true, false].includes(currentLocationSuffix) ? (currentLocationSuffix ? 'true' : 'false') : undefined, "filter-config": filterConfig ? JSON.stringify(filterConfig) : undefined, "group-config": groupConfig ? JSON.stringify(groupConfig) : undefined, filters: filters ? JSON.stringify(filters) : undefined, variant: variant, "page-mode-composer-variant": pageModeComposerVariant, "dialog-variant": dialogVariant, "sort-data": sortData, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined }));
 };
 
 var SnippylyCommentTool = function (props) {
@@ -1341,60 +1342,60 @@ var VeltCommentDialogMoreReply = function (props) {
     return (React__default["default"].createElement("velt-comment-dialog-more-reply-wireframe", __assign({}, remainingProp), children));
 };
 
-var VeltCommentDialogOptionsDropdownContentAssign = function (props) {
+var VeltCommentDialogOptionsDropdownContentAssignWireframe = function (props) {
     var children = props.children, remainingProp = __rest(props, ["children"]);
     return (React__default["default"].createElement("velt-comment-dialog-options-dropdown-content-assign-wireframe", __assign({}, remainingProp), children));
 };
 
-var VeltCommentDialogOptionsDropdownContentDeleteComment = function (props) {
+var VeltCommentDialogOptionsDropdownContentDeleteCommentWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
     return (React__default["default"].createElement("velt-comment-dialog-options-dropdown-content-delete-comment-wireframe", __assign({}, remainingProps), children));
 };
 
-var VeltCommentDialogOptionsDropdownContentDeleteThread = function (props) {
+var VeltCommentDialogOptionsDropdownContentDeleteThreadWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
     return (React__default["default"].createElement("velt-comment-dialog-options-dropdown-content-delete-thread-wireframe", __assign({}, remainingProps), children));
 };
 
-var VeltCommentDialogOptionsDropdownContentDelete = function (props) {
+var VeltCommentDialogOptionsDropdownContentDeleteWireframe = function (props) {
     var children = props.children, remainingProp = __rest(props, ["children"]);
     return (React__default["default"].createElement("velt-comment-dialog-options-dropdown-content-delete-wireframe", __assign({}, remainingProp), children));
 };
-VeltCommentDialogOptionsDropdownContentDelete.Comment = VeltCommentDialogOptionsDropdownContentDeleteComment;
-VeltCommentDialogOptionsDropdownContentDelete.Thread = VeltCommentDialogOptionsDropdownContentDeleteThread;
+VeltCommentDialogOptionsDropdownContentDeleteWireframe.Comment = VeltCommentDialogOptionsDropdownContentDeleteCommentWireframe;
+VeltCommentDialogOptionsDropdownContentDeleteWireframe.Thread = VeltCommentDialogOptionsDropdownContentDeleteThreadWireframe;
 
-var VeltCommentDialogOptionsDropdownContentEdit = function (props) {
+var VeltCommentDialogOptionsDropdownContentEditWireframe = function (props) {
     var children = props.children, remainingProp = __rest(props, ["children"]);
     return (React__default["default"].createElement("velt-comment-dialog-options-dropdown-content-edit-wireframe", __assign({}, remainingProp), children));
 };
 
-var VeltCommentDialogOptionsDropdownContentMakePrivateDisable = function (props) {
+var VeltCommentDialogOptionsDropdownContentMakePrivateDisableWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
     return (React__default["default"].createElement("velt-comment-dialog-options-dropdown-content-make-private-disable-wireframe", __assign({}, remainingProps), children));
 };
 
-var VeltCommentDialogOptionsDropdownContentMakePrivateEnable = function (props) {
+var VeltCommentDialogOptionsDropdownContentMakePrivateEnableWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
     return (React__default["default"].createElement("velt-comment-dialog-options-dropdown-content-make-private-enable-wireframe", __assign({}, remainingProps), children));
 };
 
-var VeltCommentDialogOptionsDropdownContentMakePrivate = function (props) {
+var VeltCommentDialogOptionsDropdownContentMakePrivateWireframe = function (props) {
     var children = props.children, remainingProp = __rest(props, ["children"]);
     return (React__default["default"].createElement("velt-comment-dialog-options-dropdown-content-make-private-wireframe", __assign({}, remainingProp), children));
 };
-VeltCommentDialogOptionsDropdownContentMakePrivate.Enable = VeltCommentDialogOptionsDropdownContentMakePrivateEnable;
-VeltCommentDialogOptionsDropdownContentMakePrivate.Disable = VeltCommentDialogOptionsDropdownContentMakePrivateDisable;
+VeltCommentDialogOptionsDropdownContentMakePrivateWireframe.Enable = VeltCommentDialogOptionsDropdownContentMakePrivateEnableWireframe;
+VeltCommentDialogOptionsDropdownContentMakePrivateWireframe.Disable = VeltCommentDialogOptionsDropdownContentMakePrivateDisableWireframe;
 
-var VeltCommentDialogOptionsDropdownContent = function (props) {
+var VeltCommentDialogOptionsDropdownContentWireframe = function (props) {
     var children = props.children, remainingProp = __rest(props, ["children"]);
     return (React__default["default"].createElement("velt-comment-dialog-options-dropdown-content-wireframe", __assign({}, remainingProp), children));
 };
-VeltCommentDialogOptionsDropdownContent.Assign = VeltCommentDialogOptionsDropdownContentAssign;
-VeltCommentDialogOptionsDropdownContent.MakePrivate = VeltCommentDialogOptionsDropdownContentMakePrivate;
-VeltCommentDialogOptionsDropdownContent.Edit = VeltCommentDialogOptionsDropdownContentEdit;
-VeltCommentDialogOptionsDropdownContent.Delete = VeltCommentDialogOptionsDropdownContentDelete;
+VeltCommentDialogOptionsDropdownContentWireframe.Assign = VeltCommentDialogOptionsDropdownContentAssignWireframe;
+VeltCommentDialogOptionsDropdownContentWireframe.MakePrivate = VeltCommentDialogOptionsDropdownContentMakePrivateWireframe;
+VeltCommentDialogOptionsDropdownContentWireframe.Edit = VeltCommentDialogOptionsDropdownContentEditWireframe;
+VeltCommentDialogOptionsDropdownContentWireframe.Delete = VeltCommentDialogOptionsDropdownContentDeleteWireframe;
 
-var VeltCommentDialogOptionsDropdownTrigger = function (props) {
+var VeltCommentDialogOptionsDropdownTriggerWireframe = function (props) {
     var children = props.children, remainingProp = __rest(props, ["children"]);
     return (React__default["default"].createElement("velt-comment-dialog-options-dropdown-trigger-wireframe", __assign({}, remainingProp), children));
 };
@@ -1403,67 +1404,67 @@ var VeltCommentDialogOptions = function (props) {
     var children = props.children, remainingProp = __rest(props, ["children"]);
     return (React__default["default"].createElement("velt-comment-dialog-options-wireframe", __assign({}, remainingProp), children));
 };
-VeltCommentDialogOptions.Content = VeltCommentDialogOptionsDropdownContent;
-VeltCommentDialogOptions.Trigger = VeltCommentDialogOptionsDropdownTrigger;
+VeltCommentDialogOptions.Content = VeltCommentDialogOptionsDropdownContentWireframe;
+VeltCommentDialogOptions.Trigger = VeltCommentDialogOptionsDropdownTriggerWireframe;
 
-var VeltCommentDialogPriorityDropdownContentItemIcon = function (props) {
+var VeltCommentDialogPriorityDropdownContentItemIconWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
     return (React__default["default"].createElement("velt-comment-dialog-priority-dropdown-content-item-icon-wireframe", __assign({}, remainingProps), children));
 };
 
-var VeltCommentDialogPriorityDropdownContentItemName = function (props) {
+var VeltCommentDialogPriorityDropdownContentItemNameWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
     return (React__default["default"].createElement("velt-comment-dialog-priority-dropdown-content-item-name-wireframe", __assign({}, remainingProps), children));
 };
 
-var VeltCommentDialogPriorityDropdownContentItemTick = function (props) {
+var VeltCommentDialogPriorityDropdownContentItemTickWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
     return (React__default["default"].createElement("velt-comment-dialog-priority-dropdown-content-item-tick-wireframe", __assign({}, remainingProps), children));
 };
 
-var VeltCommentDialogPriorityDropdownContentItem = function (props) {
+var VeltCommentDialogPriorityDropdownContentItemWireframe = function (props) {
     var children = props.children, remainingProp = __rest(props, ["children"]);
     return (React__default["default"].createElement("velt-comment-dialog-priority-dropdown-content-item-wireframe", __assign({}, remainingProp), children));
 };
-VeltCommentDialogPriorityDropdownContentItem.Icon = VeltCommentDialogPriorityDropdownContentItemIcon;
-VeltCommentDialogPriorityDropdownContentItem.Name = VeltCommentDialogPriorityDropdownContentItemName;
-VeltCommentDialogPriorityDropdownContentItem.Tick = VeltCommentDialogPriorityDropdownContentItemTick;
+VeltCommentDialogPriorityDropdownContentItemWireframe.Icon = VeltCommentDialogPriorityDropdownContentItemIconWireframe;
+VeltCommentDialogPriorityDropdownContentItemWireframe.Name = VeltCommentDialogPriorityDropdownContentItemNameWireframe;
+VeltCommentDialogPriorityDropdownContentItemWireframe.Tick = VeltCommentDialogPriorityDropdownContentItemTickWireframe;
 
-var VeltCommentDialogPriorityDropdownContent = function (props) {
+var VeltCommentDialogPriorityDropdownContentWireframe = function (props) {
     var children = props.children, remainingProp = __rest(props, ["children"]);
     return (React__default["default"].createElement("velt-comment-dialog-priority-dropdown-content-wireframe", __assign({}, remainingProp), children));
 };
-VeltCommentDialogPriorityDropdownContent.Item = VeltCommentDialogPriorityDropdownContentItem;
+VeltCommentDialogPriorityDropdownContentWireframe.Item = VeltCommentDialogPriorityDropdownContentItemWireframe;
 
-var VeltCommentDialogPriorityDropdownTriggerArrow = function (props) {
+var VeltCommentDialogPriorityDropdownTriggerArrowWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
     return (React__default["default"].createElement("velt-comment-dialog-priority-dropdown-trigger-arrow-wireframe", __assign({}, remainingProps), children));
 };
 
-var VeltCommentDialogPriorityDropdownTriggerIcon = function (props) {
+var VeltCommentDialogPriorityDropdownTriggerIconWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
     return (React__default["default"].createElement("velt-comment-dialog-priority-dropdown-trigger-icon-wireframe", __assign({}, remainingProps), children));
 };
 
-var VeltCommentDialogPriorityDropdownTriggerName = function (props) {
+var VeltCommentDialogPriorityDropdownTriggerNameWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
     return (React__default["default"].createElement("velt-comment-dialog-priority-dropdown-trigger-name-wireframe", __assign({}, remainingProps), children));
 };
 
-var VeltCommentDialogPriorityDropdownTrigger = function (props) {
+var VeltCommentDialogPriorityDropdownTriggerWireframe = function (props) {
     var children = props.children, remainingProp = __rest(props, ["children"]);
     return (React__default["default"].createElement("velt-comment-dialog-priority-dropdown-trigger-wireframe", __assign({}, remainingProp), children));
 };
-VeltCommentDialogPriorityDropdownTrigger.Arrow = VeltCommentDialogPriorityDropdownTriggerArrow;
-VeltCommentDialogPriorityDropdownTrigger.Name = VeltCommentDialogPriorityDropdownTriggerName;
-VeltCommentDialogPriorityDropdownTrigger.Icon = VeltCommentDialogPriorityDropdownTriggerIcon;
+VeltCommentDialogPriorityDropdownTriggerWireframe.Arrow = VeltCommentDialogPriorityDropdownTriggerArrowWireframe;
+VeltCommentDialogPriorityDropdownTriggerWireframe.Name = VeltCommentDialogPriorityDropdownTriggerNameWireframe;
+VeltCommentDialogPriorityDropdownTriggerWireframe.Icon = VeltCommentDialogPriorityDropdownTriggerIconWireframe;
 
 var VeltCommentDialogPriority = function (props) {
     var children = props.children, remainingProp = __rest(props, ["children"]);
     return (React__default["default"].createElement("velt-comment-dialog-priority-wireframe", __assign({}, remainingProp), children));
 };
-VeltCommentDialogPriority.Content = VeltCommentDialogPriorityDropdownContent;
-VeltCommentDialogPriority.Trigger = VeltCommentDialogPriorityDropdownTrigger;
+VeltCommentDialogPriority.Content = VeltCommentDialogPriorityDropdownContentWireframe;
+VeltCommentDialogPriority.Trigger = VeltCommentDialogPriorityDropdownTriggerWireframe;
 
 var VeltCommentDialogPrivateBadge = function (props) {
     var children = props.children, remainingProp = __rest(props, ["children"]);
@@ -1485,58 +1486,58 @@ var VeltCommentDialogSignIn = function (props) {
     return (React__default["default"].createElement("velt-comment-dialog-sign-in-wireframe", __assign({}, remainingProp), children));
 };
 
-var VeltCommentDialogStatusDropdownContentItemIcon = function (props) {
+var VeltCommentDialogStatusDropdownContentItemIconWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
     return (React__default["default"].createElement("velt-comment-dialog-status-dropdown-content-item-icon-wireframe", __assign({}, remainingProps), children));
 };
 
-var VeltCommentDialogStatusDropdownContentItemName = function (props) {
+var VeltCommentDialogStatusDropdownContentItemNameWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
     return (React__default["default"].createElement("velt-comment-dialog-status-dropdown-content-item-name-wireframe", __assign({}, remainingProps), children));
 };
 
-var VeltCommentDialogStatusDropdownContentItem = function (props) {
+var VeltCommentDialogStatusDropdownContentItemWireframe = function (props) {
     var children = props.children, remainingProp = __rest(props, ["children"]);
     return (React__default["default"].createElement("velt-comment-dialog-status-dropdown-content-item-wireframe", __assign({}, remainingProp), children));
 };
-VeltCommentDialogStatusDropdownContentItem.Icon = VeltCommentDialogStatusDropdownContentItemIcon;
-VeltCommentDialogStatusDropdownContentItem.Name = VeltCommentDialogStatusDropdownContentItemName;
+VeltCommentDialogStatusDropdownContentItemWireframe.Icon = VeltCommentDialogStatusDropdownContentItemIconWireframe;
+VeltCommentDialogStatusDropdownContentItemWireframe.Name = VeltCommentDialogStatusDropdownContentItemNameWireframe;
 
-var VeltCommentDialogStatusDropdownContent = function (props) {
+var VeltCommentDialogStatusDropdownContentWireframe = function (props) {
     var children = props.children, remainingProp = __rest(props, ["children"]);
     return (React__default["default"].createElement("velt-comment-dialog-status-dropdown-content-wireframe", __assign({}, remainingProp), children));
 };
-VeltCommentDialogStatusDropdownContent.Item = VeltCommentDialogStatusDropdownContentItem;
+VeltCommentDialogStatusDropdownContentWireframe.Item = VeltCommentDialogStatusDropdownContentItemWireframe;
 
-var VeltCommentDialogStatusDropdownTriggerArrow = function (props) {
+var VeltCommentDialogStatusDropdownTriggerArrowWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
     return (React__default["default"].createElement("velt-comment-dialog-status-dropdown-trigger-arrow-wireframe", __assign({}, remainingProps), children));
 };
 
-var VeltCommentDialogStatusDropdownTriggerIcon = function (props) {
+var VeltCommentDialogStatusDropdownTriggerIconWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
     return (React__default["default"].createElement("velt-comment-dialog-status-dropdown-trigger-icon-wireframe", __assign({}, remainingProps), children));
 };
 
-var VeltCommentDialogStatusDropdownTriggerName = function (props) {
+var VeltCommentDialogStatusDropdownTriggerNameWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
     return (React__default["default"].createElement("velt-comment-dialog-status-dropdown-trigger-name-wireframe", __assign({}, remainingProps), children));
 };
 
-var VeltCommentDialogStatusDropdownTrigger = function (props) {
+var VeltCommentDialogStatusDropdownTriggerWireframe = function (props) {
     var children = props.children, remainingProp = __rest(props, ["children"]);
     return (React__default["default"].createElement("velt-comment-dialog-status-dropdown-trigger-wireframe", __assign({}, remainingProp), children));
 };
-VeltCommentDialogStatusDropdownTrigger.Arrow = VeltCommentDialogStatusDropdownTriggerArrow;
-VeltCommentDialogStatusDropdownTrigger.Name = VeltCommentDialogStatusDropdownTriggerName;
-VeltCommentDialogStatusDropdownTrigger.Icon = VeltCommentDialogStatusDropdownTriggerIcon;
+VeltCommentDialogStatusDropdownTriggerWireframe.Arrow = VeltCommentDialogStatusDropdownTriggerArrowWireframe;
+VeltCommentDialogStatusDropdownTriggerWireframe.Name = VeltCommentDialogStatusDropdownTriggerNameWireframe;
+VeltCommentDialogStatusDropdownTriggerWireframe.Icon = VeltCommentDialogStatusDropdownTriggerIconWireframe;
 
 var VeltCommentDialogStatus = function (props) {
     var children = props.children, remainingProp = __rest(props, ["children"]);
     return (React__default["default"].createElement("velt-comment-dialog-status-wireframe", __assign({}, remainingProp), children));
 };
-VeltCommentDialogStatus.Content = VeltCommentDialogStatusDropdownContent;
-VeltCommentDialogStatus.Trigger = VeltCommentDialogStatusDropdownTrigger;
+VeltCommentDialogStatus.Content = VeltCommentDialogStatusDropdownContentWireframe;
+VeltCommentDialogStatus.Trigger = VeltCommentDialogStatusDropdownTriggerWireframe;
 
 var VeltCommentDialogSuggestionActionAccept = function (props) {
     var children = props.children, remainingProp = __rest(props, ["children"]);
@@ -1644,8 +1645,8 @@ var VeltCommentDialogThreadCardOptions = function (props) {
     var children = props.children, remainingProp = __rest(props, ["children"]);
     return (React__default["default"].createElement("velt-comment-dialog-thread-card-options-wireframe", __assign({}, remainingProp), children));
 };
-VeltCommentDialogThreadCardOptions.Content = VeltCommentDialogOptionsDropdownContent;
-VeltCommentDialogThreadCardOptions.Trigger = VeltCommentDialogOptionsDropdownTrigger;
+VeltCommentDialogThreadCardOptions.Content = VeltCommentDialogOptionsDropdownContentWireframe;
+VeltCommentDialogThreadCardOptions.Trigger = VeltCommentDialogOptionsDropdownTriggerWireframe;
 
 var VeltCommentDialogThreadCardReactionTool = function (props) {
     var children = props.children, remainingProp = __rest(props, ["children"]);
@@ -2698,7 +2699,7 @@ function useAutocompleteChipClick() {
 
 var sessionId = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
 var getSessionId = function () {
-    return sessionId;
+    return (sessionStorage === null || sessionStorage === void 0 ? void 0 : sessionStorage.getItem(VELT_TAB_ID)) || sessionId;
 };
 var VELT_DEFAULT_LIVE_STATE_ID = 'velt-default-redux-live-state';
 var createLiveStateMiddleware = function (config) {
@@ -2794,13 +2795,13 @@ exports.VeltAutocompleteChipTooltipWireframe = VeltAutocompleteChipTooltipWirefr
 exports.VeltAutocompleteOptionWireframe = VeltAutocompleteOptionWireframe;
 exports.VeltChartComment = VeltChartComment;
 exports.VeltCommentBubble = SnippylyCommentBubble;
-exports.VeltCommentBubbleAvatar = VeltCommentBubbleAvatar;
-exports.VeltCommentBubbleCommentsCount = VeltCommentBubbleCommentsCount;
 exports.VeltCommentBubbleWireframe = VeltCommentBubbleWireframe;
-exports.VeltCommentDialogPriorityDropdownContent = VeltCommentDialogPriorityDropdownContent;
-exports.VeltCommentDialogPriorityDropdownTrigger = VeltCommentDialogPriorityDropdownTrigger;
-exports.VeltCommentDialogStatusDropdownContent = VeltCommentDialogStatusDropdownContent;
-exports.VeltCommentDialogStatusDropdownTrigger = VeltCommentDialogStatusDropdownTrigger;
+exports.VeltCommentDialogOptionsDropdownContentWireframe = VeltCommentDialogOptionsDropdownContentWireframe;
+exports.VeltCommentDialogOptionsDropdownTriggerWireframe = VeltCommentDialogOptionsDropdownTriggerWireframe;
+exports.VeltCommentDialogPriorityDropdownContentWireframe = VeltCommentDialogPriorityDropdownContentWireframe;
+exports.VeltCommentDialogPriorityDropdownTriggerWireframe = VeltCommentDialogPriorityDropdownTriggerWireframe;
+exports.VeltCommentDialogStatusDropdownContentWireframe = VeltCommentDialogStatusDropdownContentWireframe;
+exports.VeltCommentDialogStatusDropdownTriggerWireframe = VeltCommentDialogStatusDropdownTriggerWireframe;
 exports.VeltCommentDialogWireframe = VeltCommentDialogWireframe;
 exports.VeltCommentPinWireframe = VeltCommentPinWireframe;
 exports.VeltCommentPlayerTimeline = VeltCommentPlayerTimeline;
@@ -2818,8 +2819,6 @@ exports.VeltNivoChartComments = VeltNivoChartComments;
 exports.VeltNotificationsHistoryPanel = VeltNotificationsHistoryPanel;
 exports.VeltNotificationsPanel = VeltNotificationsPanel;
 exports.VeltNotificationsTool = VeltNotificationsTool;
-exports.VeltOptionsDropdownContent = VeltCommentDialogOptionsDropdownContent;
-exports.VeltOptionsDropdownTrigger = VeltCommentDialogOptionsDropdownTrigger;
 exports.VeltPresence = SnippylyPresence;
 exports.VeltProvider = SnippylyProvider;
 exports.VeltReactionPinTooltipWireframe = VeltReactionPinTooltipWireframe;