@cometchat/chat-uikit-angular 4.3.17 → 4.3.18

package/fesm2020/cometchat-chat-uikit-angular.mjs

@@ -1909,7 +1909,7 @@ class CometChatUIKit {
         if (window) {
             window.CometChatUiKit = {
                 name: "@cometchat/chat-uikit-angular",
-                version: "4.3.17",
+                version: "4.3.18",
             };
         }
         if (CometChatUIKitSharedSettings) {
@@ -4058,6 +4058,7 @@ class CometChatUsersComponent {
             else {
                 delete this.selectedUsers[user.getUid()];
             }
+            this.ref.detectChanges();
         };
         this.fetchNextUsersList = (state = States.loading) => {
             this.onScrolledToBottom = null;
@@ -13847,6 +13848,39 @@ class CometChatMessageComposerComponent {
             }
             return true;
         };
+        /*
+      * isPartOfCurrentChatForUIEvent: To check if the message belongs for this list and is not part of thread even for current list
+      it only runs for UI event because it assumes logged in user is always sender
+      * @param: message: CometChat.BaseMessage
+      */
+        this.isPartOfCurrentChatForUIEvent = (message) => {
+            if (this.parentMessageId) {
+                if (message.getParentMessageId() === this.parentMessageId) {
+                    return true;
+                }
+                else {
+                    return false;
+                }
+            }
+            else {
+                if (message.getParentMessageId()) {
+                    return false;
+                }
+                if (this.user) {
+                    if (message.getReceiverType() === CometChatUIKitConstants.MessageReceiverType.user &&
+                        message?.getReceiverId() === this.user.getUid()) {
+                        return true;
+                    }
+                }
+                else if (this.group) {
+                    if (message.getReceiverType() === CometChatUIKitConstants.MessageReceiverType.group &&
+                        message?.getReceiverId() === this.group.getGuid()) {
+                        return true;
+                    }
+                }
+                return false;
+            }
+        };
         this.handleActions = (event) => {
             let action = event?.detail?.action;
             this.showAiFeatures = false;
@@ -14323,7 +14357,12 @@ class CometChatMessageComposerComponent {
             if ((this.parentMessageId && parentId && parentId == this.parentMessageId) || (!this.parentMessageId && !parentId)) {
                 if (object?.status == MessageStatus.inprogress) {
                     this.messageToBeEdited = object.message;
-                    this.openEditPreview();
+                    if (this.isPartOfCurrentChatForUIEvent(object?.message)) {
+                        this.openEditPreview();
+                    }
+                }
+                if (object?.status === MessageStatus.success && object.message instanceof CometChat.TextMessage) {
+                    this.closePreview();
                 }
             }
         });
@@ -18057,7 +18096,7 @@ class CometChatContactsComponent {
             else {
                 this.groupsList.push(group);
             }
-            this.isLimitReached = this.groupsList.length + this.usersList.length >= this.selectionLimit;
+            this.isLimitReached = this.groupsList.length + this.usersList.length > this.selectionLimit;
             this.ref.detectChanges();
         };
         this.onUserSelected = (user) => {
@@ -18353,6 +18392,7 @@ class CometChatConversationsWithMessagesComponent {
                 border: this.conversationsWithMessagesStyle.border,
                 borderRadius: this.conversationsWithMessagesStyle.borderRadius,
                 background: this.conversationsWithMessagesStyle.background || this.themeService.theme.palette.getBackground(),
+                position: 'relative'
             };
         };
         this.contactsWrapperStyles = () => {
@@ -18466,8 +18506,13 @@ class CometChatConversationsWithMessagesComponent {
         this.updateBackdropHeight();
     }
     updateBackdropHeight() {
-        const divHeight = this.elementRef.nativeElement.offsetHeight;
-        const divWidth = this.elementRef.nativeElement.offsetWidth;
+        let divHeight = this.elementRef.nativeElement.offsetHeight;
+        let divWidth = this.elementRef.nativeElement.offsetWidth;
+        if (divHeight === 0 || divWidth === 0) {
+            const rect = this.elementRef.nativeElement.getBoundingClientRect();
+            divHeight = rect.height;
+            divWidth = rect.width;
+        }
         let backdropStyle = {
             height: divHeight + "px",
             width: divWidth + "px",
@@ -18628,10 +18673,10 @@ class CometChatConversationsWithMessagesComponent {
     }
 }
 CometChatConversationsWithMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatConversationsWithMessagesComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
-CometChatConversationsWithMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatConversationsWithMessagesComponent, selector: "cometchat-conversations-with-messages", inputs: { user: "user", group: "group", isMobileView: "isMobileView", messageText: "messageText", conversationsWithMessagesStyle: "conversationsWithMessagesStyle", messagesConfiguration: "messagesConfiguration", conversationConfiguration: "conversationConfiguration", onError: "onError", startNewConversationIconURL: "startNewConversationIconURL", hideStartNewConversation: "hideStartNewConversation", StartConversationConfiguration: "StartConversationConfiguration" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-with-messages__wrapper\" [ngStyle]=\"chatsWrapperStyles()\">\n  <div class=\"cc-with-messages__sidebar\" [ngClass]=\"{mobile : isMobileView}\"\n    [ngStyle]=\"sideBarStyle\">\n    <cometchat-conversations #conversationRef\n      [activeConversation]=\"activeConversation\"\n      [onItemClick]=\"conversationConfiguration.onItemClick || onItemClick\"\n      [conversationsStyle]=\"conversationConfiguration.conversationsStyle\"\n      [statusIndicatorStyle]=\"conversationConfiguration?.statusIndicatorStyle\"\n      [avatarStyle]=\"conversationConfiguration?.avatarStyle!\"\n      [subtitleView]=\"conversationConfiguration.subtitleView\"\n      [options]=\"conversationConfiguration.options\"\n      [disableUsersPresence]=\"conversationConfiguration.disableUsersPresence\"\n      [disableReceipt]=\"conversationConfiguration.disableReceipt\"\n      [hideReceipt]=\"conversationConfiguration.hideReceipt\"\n      [disableTyping]=\"conversationConfiguration.disableTyping\"\n      [deliveredIcon]=\"conversationConfiguration.deliveredIcon\"\n      [readIcon]=\"conversationConfiguration.readIcon\"\n      [waitIcon]=\"conversationConfiguration.waitIcon\"\n      [errorIcon]=\"conversationConfiguration.errorIcon\"\n      [datePattern]=\"conversationConfiguration.datePattern\"\n      [receiptStyle]=\"conversationConfiguration.receiptStyle\"\n      [sentIcon]=\"conversationConfiguration.sentIcon\"\n      [privateGroupIcon]=\"conversationConfiguration.privateGroupIcon\"\n      [protectedGroupIcon]=\"conversationConfiguration.protectedGroupIcon\"\n      [passwordGroupIcon]=\"conversationConfiguration.passwordGroupIcon\"\n      [customSoundForMessages]=\"conversationConfiguration.customSoundForMessages\"\n      [conversationsRequestBuilder]=\"conversationConfiguration.conversationsRequestBuilder\"\n      [emptyStateView]=\"conversationConfiguration.emptyStateView\"\n      [onSelect]=\"conversationConfiguration.onSelect\"\n      [loadingIconURL]=\"conversationConfiguration.loadingIconURL\"\n      [errorStateView]=\"conversationConfiguration.errorStateView\"\n      [loadingStateView]=\"conversationConfiguration.loadingStateView\"\n      [titleAlignment]=\"conversationConfiguration.titleAlignment\"\n      [listItemView]=\"conversationConfiguration.listItemView\"\n      [menu]=\"conversationConfiguration.menu || startConversationButton\"\n      [hideSeparator]=\"conversationConfiguration.hideSeparator\"\n      [hideError]=\"conversationConfiguration.hideError\"\n      [selectionMode]=\"conversationConfiguration.selectionMode\"\n      [disableSoundForMessages]=\"conversationConfiguration.disableSoundForMessages\"\n      [deleteConversationDialogStyle]=\"conversationConfiguration.deleteConversationDialogStyle\"\n      [badgeStyle]=\"conversationConfiguration.badgeStyle\"\n      [dateStyle]=\"conversationConfiguration.dateStyle\"\n      [listItemStyle]=\"conversationConfiguration.listItemStyle\"\n      [backdropStyle]=\"conversationConfiguration.backdropStyle\"\n      [textFormatters]=\"conversationConfiguration?.textFormatters\"\n      [disableMentions]=\"conversationConfiguration.disableMentions\"></cometchat-conversations>\n  </div>\n  <div class=\"cc-with-messages__main\" [ngClass]=\"{mobile : isMobileView}\"\n    *ngIf=\"!showStartConversation && (user || group)\">\n    <!--Message List Screen-->\n    <cometchat-messages #messagesRef [user]=\"user!\" [group]=\"group!\"\n      [messageHeaderConfiguration]=\"messagesConfiguration.messageHeaderConfiguration\"\n      [messageListConfiguration]=\"messagesConfiguration.messageListConfiguration\"\n      [messageComposerConfiguration]=\"messagesConfiguration.messageComposerConfiguration\"\n      [messagesStyle]=\"messagesConfiguration.messagesStyle\"\n      [customSoundForIncomingMessages]=\"messagesConfiguration.customSoundForIncomingMessages\"\n      [customSoundForOutgoingMessages]=\"messagesConfiguration.customSoundForOutgoingMessages\"\n      [detailsConfiguration]=\"messagesConfiguration.detailsConfiguration\"\n      [disableSoundForMessages]=\"messagesConfiguration.disableSoundForMessages\"\n      [disableTyping]=\"messagesConfiguration.disableTyping\"\n      [hideMessageComposer]=\"messagesConfiguration.hideMessageComposer\"\n      [hideMessageHeader]=\"messagesConfiguration.hideMessageHeader\"\n      [messageComposerView]=\"messagesConfiguration.messageComposerView\"\n      [messageHeaderView]=\"messagesConfiguration.messageHeaderView\"\n      [messageListView]=\"messagesConfiguration.messageListView\"\n      [hideDetails]=\"messagesConfiguration.hideDetails!\"\n      [threadedMessageConfiguration]=\"messagesConfiguration.threadedMessageConfiguration\">\n    </cometchat-messages>\n    <!--Message List Screen ENDS-->\n  </div>\n  <div class=\"cc-with-messages__start-conversation\"\n    [ngStyle]=\"contactsWrapperStyles()\"\n    [ngClass]=\"{mobile : isMobileView}\" *ngIf=\"showStartConversation\">\n\n    <cometchat-contacts [onItemClick]=\"onContactClicked\"\n      [usersConfiguration]=\"StartConversationConfiguration?.usersConfiguration!\"\n      [groupsConfiguration]=\"StartConversationConfiguration?.groupsConfiguration!\"\n      [closeIconURL]=\"StartConversationConfiguration?.closeIconURL!\"\n      [contactsStyle]=\"StartConversationConfiguration?.contactsStyle!\"\n      [selectionMode]=\"StartConversationConfiguration?.selectionMode!\"\n      [onClose]=\"closeStartConversation\"\n      [tabVisibility]=\"StartConversationConfiguration?.tabVisibility!\"\n      [selectionLimit]=\"StartConversationConfiguration?.selectionLimit!\"\n      [tabs]=\"StartConversationConfiguration?.tabs!\"\n      [hideSubmitButton]=\"StartConversationConfiguration?.hideSubmitButton!\"></cometchat-contacts>\n  </div>\n  <div class=\"cc-decorator__message--empty\"\n    *ngIf=\"!user && !group && !showStartConversation\"\n    [ngStyle]=\"emptyMessageStyle()\">\n    <cometchat-label [text]=\"messageText\"\n      [labelStyle]=\"labelStyle\"></cometchat-label>\n  </div>\n  <ng-template #startConversationButton>\n    <cometchat-button *ngIf=\"!hideStartNewConversation\"\n      [iconURL]=\"startNewConversationIconURL\"\n      [buttonStyle]=\"startConversationButtonStyle\"\n      (cc-button-clicked)=\"triggerStartConversation()\"></cometchat-button>\n\n  </ng-template>\n", styles: [".cc-with-messages__wrapper{display:flex;height:100%;width:100%;box-sizing:border-box;overflow:hidden}.cc-with-messages__sidebar{width:280px;height:100%;position:relative}.cc-with-messages__main,.cc-with-messages__start-conversation{width:calc(100% - 280px);height:100%}.mobile{width:100%!important;height:100%;position:absolute}.cc-decorator__message--empty{display:flex;justify-content:center;align-items:center}\n"], components: [{ type: CometChatConversationsComponent, selector: "cometchat-conversations", inputs: ["subtitleView", "title", "options", "searchPlaceHolder", "disableUsersPresence", "disableReceipt", "hideReceipt", "disableTyping", "deliveredIcon", "readIcon", "errorIcon", "datePattern", "onError", "sentIcon", "privateGroupIcon", "protectedGroupIcon", "passwordGroupIcon", "customSoundForMessages", "activeConversation", "searchIconURL", "hideSearch", "conversationsRequestBuilder", "emptyStateView", "onSelect", "loadingIconURL", "errorStateView", "loadingStateView", "emptyStateText", "errorStateText", "titleAlignment", "listItemView", "menu", "hideSeparator", "searchPlaceholder", "hideError", "selectionMode", "disableSoundForMessages", "confirmDialogTitle", "confirmButtonText", "cancelButtonText", "confirmDialogMessage", "onItemClick", "deleteConversationDialogStyle", "backdropStyle", "badgeStyle", "dateStyle", "conversationsStyle", "listItemStyle", "statusIndicatorStyle", "typingIndicatorText", "threadIndicatorText", "avatarStyle", "receiptStyle", "loggedInUser", "disableMentions", "textFormatters"] }, { type: CometChatMessagesComponent, selector: "cometchat-messages", inputs: ["user", "group", "currentAskAIBot", "hideMessageComposer", "disableTyping", "messageHeaderConfiguration", "messageListConfiguration", "messageComposerConfiguration", "threadedMessageConfiguration", "detailsConfiguration", "customSoundForIncomingMessages", "customSoundForOutgoingMessages", "disableSoundForMessages", "messagesStyle", "messageHeaderView", "messageComposerView", "messageListView", "hideMessageHeader", "hideDetails", "auxiliaryMenu"] }, { type: CometChatContactsComponent, selector: "cometchat-contacts", inputs: ["title", "usersTabTitle", "groupsTabTitle", "usersConfiguration", "groupsConfiguration", "onSubmitButtonClick", "closeIconURL", "contactsStyle", "selectionMode", "onClose", "onItemClick", "tabVisibility", "selectionLimit", "tabs", "hideSubmitButton", "submitButtonText"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CometChatConversationsWithMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatConversationsWithMessagesComponent, selector: "cometchat-conversations-with-messages", inputs: { user: "user", group: "group", isMobileView: "isMobileView", messageText: "messageText", conversationsWithMessagesStyle: "conversationsWithMessagesStyle", messagesConfiguration: "messagesConfiguration", conversationConfiguration: "conversationConfiguration", onError: "onError", startNewConversationIconURL: "startNewConversationIconURL", hideStartNewConversation: "hideStartNewConversation", StartConversationConfiguration: "StartConversationConfiguration" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-with-messages__wrapper\" [ngStyle]=\"chatsWrapperStyles()\">\n  <div class=\"cc-with-messages__sidebar\" [ngClass]=\"{mobile : isMobileView}\"\n    [ngStyle]=\"sideBarStyle\">\n    <cometchat-conversations #conversationRef\n      [activeConversation]=\"activeConversation\"\n      [onItemClick]=\"conversationConfiguration.onItemClick || onItemClick\"\n      [conversationsStyle]=\"conversationConfiguration.conversationsStyle\"\n      [statusIndicatorStyle]=\"conversationConfiguration?.statusIndicatorStyle\"\n      [avatarStyle]=\"conversationConfiguration?.avatarStyle!\"\n      [subtitleView]=\"conversationConfiguration.subtitleView\"\n      [options]=\"conversationConfiguration.options\"\n      [disableUsersPresence]=\"conversationConfiguration.disableUsersPresence\"\n      [disableReceipt]=\"conversationConfiguration.disableReceipt\"\n      [hideReceipt]=\"conversationConfiguration.hideReceipt\"\n      [disableTyping]=\"conversationConfiguration.disableTyping\"\n      [deliveredIcon]=\"conversationConfiguration.deliveredIcon\"\n      [readIcon]=\"conversationConfiguration.readIcon\"\n      [waitIcon]=\"conversationConfiguration.waitIcon\"\n      [errorIcon]=\"conversationConfiguration.errorIcon\"\n      [datePattern]=\"conversationConfiguration.datePattern\"\n      [receiptStyle]=\"conversationConfiguration.receiptStyle\"\n      [sentIcon]=\"conversationConfiguration.sentIcon\"\n      [privateGroupIcon]=\"conversationConfiguration.privateGroupIcon\"\n      [protectedGroupIcon]=\"conversationConfiguration.protectedGroupIcon\"\n      [passwordGroupIcon]=\"conversationConfiguration.passwordGroupIcon\"\n      [customSoundForMessages]=\"conversationConfiguration.customSoundForMessages\"\n      [conversationsRequestBuilder]=\"conversationConfiguration.conversationsRequestBuilder\"\n      [emptyStateView]=\"conversationConfiguration.emptyStateView\"\n      [onSelect]=\"conversationConfiguration.onSelect\"\n      [loadingIconURL]=\"conversationConfiguration.loadingIconURL\"\n      [errorStateView]=\"conversationConfiguration.errorStateView\"\n      [loadingStateView]=\"conversationConfiguration.loadingStateView\"\n      [titleAlignment]=\"conversationConfiguration.titleAlignment\"\n      [listItemView]=\"conversationConfiguration.listItemView\"\n      [menu]=\"conversationConfiguration.menu || startConversationButton\"\n      [hideSeparator]=\"conversationConfiguration.hideSeparator\"\n      [hideError]=\"conversationConfiguration.hideError\"\n      [selectionMode]=\"conversationConfiguration.selectionMode\"\n      [disableSoundForMessages]=\"conversationConfiguration.disableSoundForMessages\"\n      [deleteConversationDialogStyle]=\"conversationConfiguration.deleteConversationDialogStyle\"\n      [badgeStyle]=\"conversationConfiguration.badgeStyle\"\n      [dateStyle]=\"conversationConfiguration.dateStyle\"\n      [listItemStyle]=\"conversationConfiguration.listItemStyle\"\n      [backdropStyle]=\"conversationConfiguration.backdropStyle\"\n      [textFormatters]=\"conversationConfiguration?.textFormatters\"\n      [disableMentions]=\"conversationConfiguration.disableMentions\"></cometchat-conversations>\n  </div>\n  <div class=\"cc-with-messages__main\" [ngClass]=\"{mobile : isMobileView}\"\n    *ngIf=\"!showStartConversation && (user || group)\">\n    <!--Message List Screen-->\n    <cometchat-messages #messagesRef [user]=\"user!\" [group]=\"group!\"\n      [messageHeaderConfiguration]=\"messagesConfiguration.messageHeaderConfiguration\"\n      [messageListConfiguration]=\"messagesConfiguration.messageListConfiguration\"\n      [messageComposerConfiguration]=\"messagesConfiguration.messageComposerConfiguration\"\n      [messagesStyle]=\"messagesConfiguration.messagesStyle\"\n      [customSoundForIncomingMessages]=\"messagesConfiguration.customSoundForIncomingMessages\"\n      [customSoundForOutgoingMessages]=\"messagesConfiguration.customSoundForOutgoingMessages\"\n      [detailsConfiguration]=\"messagesConfiguration.detailsConfiguration\"\n      [disableSoundForMessages]=\"messagesConfiguration.disableSoundForMessages\"\n      [disableTyping]=\"messagesConfiguration.disableTyping\"\n      [hideMessageComposer]=\"messagesConfiguration.hideMessageComposer\"\n      [hideMessageHeader]=\"messagesConfiguration.hideMessageHeader\"\n      [messageComposerView]=\"messagesConfiguration.messageComposerView\"\n      [messageHeaderView]=\"messagesConfiguration.messageHeaderView\"\n      [messageListView]=\"messagesConfiguration.messageListView\"\n      [hideDetails]=\"messagesConfiguration.hideDetails!\"\n      [threadedMessageConfiguration]=\"messagesConfiguration.threadedMessageConfiguration\">\n    </cometchat-messages>\n    <!--Message List Screen ENDS-->\n  </div>\n  <div class=\"cc-with-messages__start-conversation\"\n    [ngStyle]=\"contactsWrapperStyles()\"\n    [ngClass]=\"{mobile : isMobileView}\" *ngIf=\"showStartConversation\">\n\n    <cometchat-contacts [onItemClick]=\"onContactClicked\"\n      [usersConfiguration]=\"StartConversationConfiguration?.usersConfiguration!\"\n      [groupsConfiguration]=\"StartConversationConfiguration?.groupsConfiguration!\"\n      [closeIconURL]=\"StartConversationConfiguration?.closeIconURL!\"\n      [contactsStyle]=\"StartConversationConfiguration?.contactsStyle!\"\n      [selectionMode]=\"StartConversationConfiguration?.selectionMode!\"\n      [onClose]=\"closeStartConversation\"\n      [tabVisibility]=\"StartConversationConfiguration?.tabVisibility!\"\n      [selectionLimit]=\"StartConversationConfiguration?.selectionLimit!\"\n      [tabs]=\"StartConversationConfiguration?.tabs!\"\n      [onSubmitButtonClick]=\"StartConversationConfiguration?.onSubmitButtonClick!\"\n      [hideSubmitButton]=\"StartConversationConfiguration?.hideSubmitButton!\"></cometchat-contacts>\n  </div>\n  <div class=\"cc-decorator__message--empty\"\n    *ngIf=\"!user && !group && !showStartConversation\"\n    [ngStyle]=\"emptyMessageStyle()\">\n    <cometchat-label [text]=\"messageText\"\n      [labelStyle]=\"labelStyle\"></cometchat-label>\n  </div>\n  <ng-template #startConversationButton>\n    <cometchat-button *ngIf=\"!hideStartNewConversation\"\n      [iconURL]=\"startNewConversationIconURL\"\n      [buttonStyle]=\"startConversationButtonStyle\"\n      (cc-button-clicked)=\"triggerStartConversation()\"></cometchat-button>\n\n  </ng-template>\n", styles: [".cc-with-messages__wrapper{display:flex;height:100%;width:100%;box-sizing:border-box;overflow:hidden}.cc-with-messages__sidebar{width:280px;height:100%;position:relative}.cc-with-messages__main,.cc-with-messages__start-conversation{width:calc(100% - 280px);height:100%}.mobile{width:100%!important;height:100%;position:absolute}.cc-decorator__message--empty{display:flex;justify-content:center;align-items:center}\n"], components: [{ type: CometChatConversationsComponent, selector: "cometchat-conversations", inputs: ["subtitleView", "title", "options", "searchPlaceHolder", "disableUsersPresence", "disableReceipt", "hideReceipt", "disableTyping", "deliveredIcon", "readIcon", "errorIcon", "datePattern", "onError", "sentIcon", "privateGroupIcon", "protectedGroupIcon", "passwordGroupIcon", "customSoundForMessages", "activeConversation", "searchIconURL", "hideSearch", "conversationsRequestBuilder", "emptyStateView", "onSelect", "loadingIconURL", "errorStateView", "loadingStateView", "emptyStateText", "errorStateText", "titleAlignment", "listItemView", "menu", "hideSeparator", "searchPlaceholder", "hideError", "selectionMode", "disableSoundForMessages", "confirmDialogTitle", "confirmButtonText", "cancelButtonText", "confirmDialogMessage", "onItemClick", "deleteConversationDialogStyle", "backdropStyle", "badgeStyle", "dateStyle", "conversationsStyle", "listItemStyle", "statusIndicatorStyle", "typingIndicatorText", "threadIndicatorText", "avatarStyle", "receiptStyle", "loggedInUser", "disableMentions", "textFormatters"] }, { type: CometChatMessagesComponent, selector: "cometchat-messages", inputs: ["user", "group", "currentAskAIBot", "hideMessageComposer", "disableTyping", "messageHeaderConfiguration", "messageListConfiguration", "messageComposerConfiguration", "threadedMessageConfiguration", "detailsConfiguration", "customSoundForIncomingMessages", "customSoundForOutgoingMessages", "disableSoundForMessages", "messagesStyle", "messageHeaderView", "messageComposerView", "messageListView", "hideMessageHeader", "hideDetails", "auxiliaryMenu"] }, { type: CometChatContactsComponent, selector: "cometchat-contacts", inputs: ["title", "usersTabTitle", "groupsTabTitle", "usersConfiguration", "groupsConfiguration", "onSubmitButtonClick", "closeIconURL", "contactsStyle", "selectionMode", "onClose", "onItemClick", "tabVisibility", "selectionLimit", "tabs", "hideSubmitButton", "submitButtonText"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatConversationsWithMessagesComponent, decorators: [{
             type: Component,
-            args: [{ selector: "cometchat-conversations-with-messages", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-with-messages__wrapper\" [ngStyle]=\"chatsWrapperStyles()\">\n  <div class=\"cc-with-messages__sidebar\" [ngClass]=\"{mobile : isMobileView}\"\n    [ngStyle]=\"sideBarStyle\">\n    <cometchat-conversations #conversationRef\n      [activeConversation]=\"activeConversation\"\n      [onItemClick]=\"conversationConfiguration.onItemClick || onItemClick\"\n      [conversationsStyle]=\"conversationConfiguration.conversationsStyle\"\n      [statusIndicatorStyle]=\"conversationConfiguration?.statusIndicatorStyle\"\n      [avatarStyle]=\"conversationConfiguration?.avatarStyle!\"\n      [subtitleView]=\"conversationConfiguration.subtitleView\"\n      [options]=\"conversationConfiguration.options\"\n      [disableUsersPresence]=\"conversationConfiguration.disableUsersPresence\"\n      [disableReceipt]=\"conversationConfiguration.disableReceipt\"\n      [hideReceipt]=\"conversationConfiguration.hideReceipt\"\n      [disableTyping]=\"conversationConfiguration.disableTyping\"\n      [deliveredIcon]=\"conversationConfiguration.deliveredIcon\"\n      [readIcon]=\"conversationConfiguration.readIcon\"\n      [waitIcon]=\"conversationConfiguration.waitIcon\"\n      [errorIcon]=\"conversationConfiguration.errorIcon\"\n      [datePattern]=\"conversationConfiguration.datePattern\"\n      [receiptStyle]=\"conversationConfiguration.receiptStyle\"\n      [sentIcon]=\"conversationConfiguration.sentIcon\"\n      [privateGroupIcon]=\"conversationConfiguration.privateGroupIcon\"\n      [protectedGroupIcon]=\"conversationConfiguration.protectedGroupIcon\"\n      [passwordGroupIcon]=\"conversationConfiguration.passwordGroupIcon\"\n      [customSoundForMessages]=\"conversationConfiguration.customSoundForMessages\"\n      [conversationsRequestBuilder]=\"conversationConfiguration.conversationsRequestBuilder\"\n      [emptyStateView]=\"conversationConfiguration.emptyStateView\"\n      [onSelect]=\"conversationConfiguration.onSelect\"\n      [loadingIconURL]=\"conversationConfiguration.loadingIconURL\"\n      [errorStateView]=\"conversationConfiguration.errorStateView\"\n      [loadingStateView]=\"conversationConfiguration.loadingStateView\"\n      [titleAlignment]=\"conversationConfiguration.titleAlignment\"\n      [listItemView]=\"conversationConfiguration.listItemView\"\n      [menu]=\"conversationConfiguration.menu || startConversationButton\"\n      [hideSeparator]=\"conversationConfiguration.hideSeparator\"\n      [hideError]=\"conversationConfiguration.hideError\"\n      [selectionMode]=\"conversationConfiguration.selectionMode\"\n      [disableSoundForMessages]=\"conversationConfiguration.disableSoundForMessages\"\n      [deleteConversationDialogStyle]=\"conversationConfiguration.deleteConversationDialogStyle\"\n      [badgeStyle]=\"conversationConfiguration.badgeStyle\"\n      [dateStyle]=\"conversationConfiguration.dateStyle\"\n      [listItemStyle]=\"conversationConfiguration.listItemStyle\"\n      [backdropStyle]=\"conversationConfiguration.backdropStyle\"\n      [textFormatters]=\"conversationConfiguration?.textFormatters\"\n      [disableMentions]=\"conversationConfiguration.disableMentions\"></cometchat-conversations>\n  </div>\n  <div class=\"cc-with-messages__main\" [ngClass]=\"{mobile : isMobileView}\"\n    *ngIf=\"!showStartConversation && (user || group)\">\n    <!--Message List Screen-->\n    <cometchat-messages #messagesRef [user]=\"user!\" [group]=\"group!\"\n      [messageHeaderConfiguration]=\"messagesConfiguration.messageHeaderConfiguration\"\n      [messageListConfiguration]=\"messagesConfiguration.messageListConfiguration\"\n      [messageComposerConfiguration]=\"messagesConfiguration.messageComposerConfiguration\"\n      [messagesStyle]=\"messagesConfiguration.messagesStyle\"\n      [customSoundForIncomingMessages]=\"messagesConfiguration.customSoundForIncomingMessages\"\n      [customSoundForOutgoingMessages]=\"messagesConfiguration.customSoundForOutgoingMessages\"\n      [detailsConfiguration]=\"messagesConfiguration.detailsConfiguration\"\n      [disableSoundForMessages]=\"messagesConfiguration.disableSoundForMessages\"\n      [disableTyping]=\"messagesConfiguration.disableTyping\"\n      [hideMessageComposer]=\"messagesConfiguration.hideMessageComposer\"\n      [hideMessageHeader]=\"messagesConfiguration.hideMessageHeader\"\n      [messageComposerView]=\"messagesConfiguration.messageComposerView\"\n      [messageHeaderView]=\"messagesConfiguration.messageHeaderView\"\n      [messageListView]=\"messagesConfiguration.messageListView\"\n      [hideDetails]=\"messagesConfiguration.hideDetails!\"\n      [threadedMessageConfiguration]=\"messagesConfiguration.threadedMessageConfiguration\">\n    </cometchat-messages>\n    <!--Message List Screen ENDS-->\n  </div>\n  <div class=\"cc-with-messages__start-conversation\"\n    [ngStyle]=\"contactsWrapperStyles()\"\n    [ngClass]=\"{mobile : isMobileView}\" *ngIf=\"showStartConversation\">\n\n    <cometchat-contacts [onItemClick]=\"onContactClicked\"\n      [usersConfiguration]=\"StartConversationConfiguration?.usersConfiguration!\"\n      [groupsConfiguration]=\"StartConversationConfiguration?.groupsConfiguration!\"\n      [closeIconURL]=\"StartConversationConfiguration?.closeIconURL!\"\n      [contactsStyle]=\"StartConversationConfiguration?.contactsStyle!\"\n      [selectionMode]=\"StartConversationConfiguration?.selectionMode!\"\n      [onClose]=\"closeStartConversation\"\n      [tabVisibility]=\"StartConversationConfiguration?.tabVisibility!\"\n      [selectionLimit]=\"StartConversationConfiguration?.selectionLimit!\"\n      [tabs]=\"StartConversationConfiguration?.tabs!\"\n      [hideSubmitButton]=\"StartConversationConfiguration?.hideSubmitButton!\"></cometchat-contacts>\n  </div>\n  <div class=\"cc-decorator__message--empty\"\n    *ngIf=\"!user && !group && !showStartConversation\"\n    [ngStyle]=\"emptyMessageStyle()\">\n    <cometchat-label [text]=\"messageText\"\n      [labelStyle]=\"labelStyle\"></cometchat-label>\n  </div>\n  <ng-template #startConversationButton>\n    <cometchat-button *ngIf=\"!hideStartNewConversation\"\n      [iconURL]=\"startNewConversationIconURL\"\n      [buttonStyle]=\"startConversationButtonStyle\"\n      (cc-button-clicked)=\"triggerStartConversation()\"></cometchat-button>\n\n  </ng-template>\n", styles: [".cc-with-messages__wrapper{display:flex;height:100%;width:100%;box-sizing:border-box;overflow:hidden}.cc-with-messages__sidebar{width:280px;height:100%;position:relative}.cc-with-messages__main,.cc-with-messages__start-conversation{width:calc(100% - 280px);height:100%}.mobile{width:100%!important;height:100%;position:absolute}.cc-decorator__message--empty{display:flex;justify-content:center;align-items:center}\n"] }]
+            args: [{ selector: "cometchat-conversations-with-messages", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-with-messages__wrapper\" [ngStyle]=\"chatsWrapperStyles()\">\n  <div class=\"cc-with-messages__sidebar\" [ngClass]=\"{mobile : isMobileView}\"\n    [ngStyle]=\"sideBarStyle\">\n    <cometchat-conversations #conversationRef\n      [activeConversation]=\"activeConversation\"\n      [onItemClick]=\"conversationConfiguration.onItemClick || onItemClick\"\n      [conversationsStyle]=\"conversationConfiguration.conversationsStyle\"\n      [statusIndicatorStyle]=\"conversationConfiguration?.statusIndicatorStyle\"\n      [avatarStyle]=\"conversationConfiguration?.avatarStyle!\"\n      [subtitleView]=\"conversationConfiguration.subtitleView\"\n      [options]=\"conversationConfiguration.options\"\n      [disableUsersPresence]=\"conversationConfiguration.disableUsersPresence\"\n      [disableReceipt]=\"conversationConfiguration.disableReceipt\"\n      [hideReceipt]=\"conversationConfiguration.hideReceipt\"\n      [disableTyping]=\"conversationConfiguration.disableTyping\"\n      [deliveredIcon]=\"conversationConfiguration.deliveredIcon\"\n      [readIcon]=\"conversationConfiguration.readIcon\"\n      [waitIcon]=\"conversationConfiguration.waitIcon\"\n      [errorIcon]=\"conversationConfiguration.errorIcon\"\n      [datePattern]=\"conversationConfiguration.datePattern\"\n      [receiptStyle]=\"conversationConfiguration.receiptStyle\"\n      [sentIcon]=\"conversationConfiguration.sentIcon\"\n      [privateGroupIcon]=\"conversationConfiguration.privateGroupIcon\"\n      [protectedGroupIcon]=\"conversationConfiguration.protectedGroupIcon\"\n      [passwordGroupIcon]=\"conversationConfiguration.passwordGroupIcon\"\n      [customSoundForMessages]=\"conversationConfiguration.customSoundForMessages\"\n      [conversationsRequestBuilder]=\"conversationConfiguration.conversationsRequestBuilder\"\n      [emptyStateView]=\"conversationConfiguration.emptyStateView\"\n      [onSelect]=\"conversationConfiguration.onSelect\"\n      [loadingIconURL]=\"conversationConfiguration.loadingIconURL\"\n      [errorStateView]=\"conversationConfiguration.errorStateView\"\n      [loadingStateView]=\"conversationConfiguration.loadingStateView\"\n      [titleAlignment]=\"conversationConfiguration.titleAlignment\"\n      [listItemView]=\"conversationConfiguration.listItemView\"\n      [menu]=\"conversationConfiguration.menu || startConversationButton\"\n      [hideSeparator]=\"conversationConfiguration.hideSeparator\"\n      [hideError]=\"conversationConfiguration.hideError\"\n      [selectionMode]=\"conversationConfiguration.selectionMode\"\n      [disableSoundForMessages]=\"conversationConfiguration.disableSoundForMessages\"\n      [deleteConversationDialogStyle]=\"conversationConfiguration.deleteConversationDialogStyle\"\n      [badgeStyle]=\"conversationConfiguration.badgeStyle\"\n      [dateStyle]=\"conversationConfiguration.dateStyle\"\n      [listItemStyle]=\"conversationConfiguration.listItemStyle\"\n      [backdropStyle]=\"conversationConfiguration.backdropStyle\"\n      [textFormatters]=\"conversationConfiguration?.textFormatters\"\n      [disableMentions]=\"conversationConfiguration.disableMentions\"></cometchat-conversations>\n  </div>\n  <div class=\"cc-with-messages__main\" [ngClass]=\"{mobile : isMobileView}\"\n    *ngIf=\"!showStartConversation && (user || group)\">\n    <!--Message List Screen-->\n    <cometchat-messages #messagesRef [user]=\"user!\" [group]=\"group!\"\n      [messageHeaderConfiguration]=\"messagesConfiguration.messageHeaderConfiguration\"\n      [messageListConfiguration]=\"messagesConfiguration.messageListConfiguration\"\n      [messageComposerConfiguration]=\"messagesConfiguration.messageComposerConfiguration\"\n      [messagesStyle]=\"messagesConfiguration.messagesStyle\"\n      [customSoundForIncomingMessages]=\"messagesConfiguration.customSoundForIncomingMessages\"\n      [customSoundForOutgoingMessages]=\"messagesConfiguration.customSoundForOutgoingMessages\"\n      [detailsConfiguration]=\"messagesConfiguration.detailsConfiguration\"\n      [disableSoundForMessages]=\"messagesConfiguration.disableSoundForMessages\"\n      [disableTyping]=\"messagesConfiguration.disableTyping\"\n      [hideMessageComposer]=\"messagesConfiguration.hideMessageComposer\"\n      [hideMessageHeader]=\"messagesConfiguration.hideMessageHeader\"\n      [messageComposerView]=\"messagesConfiguration.messageComposerView\"\n      [messageHeaderView]=\"messagesConfiguration.messageHeaderView\"\n      [messageListView]=\"messagesConfiguration.messageListView\"\n      [hideDetails]=\"messagesConfiguration.hideDetails!\"\n      [threadedMessageConfiguration]=\"messagesConfiguration.threadedMessageConfiguration\">\n    </cometchat-messages>\n    <!--Message List Screen ENDS-->\n  </div>\n  <div class=\"cc-with-messages__start-conversation\"\n    [ngStyle]=\"contactsWrapperStyles()\"\n    [ngClass]=\"{mobile : isMobileView}\" *ngIf=\"showStartConversation\">\n\n    <cometchat-contacts [onItemClick]=\"onContactClicked\"\n      [usersConfiguration]=\"StartConversationConfiguration?.usersConfiguration!\"\n      [groupsConfiguration]=\"StartConversationConfiguration?.groupsConfiguration!\"\n      [closeIconURL]=\"StartConversationConfiguration?.closeIconURL!\"\n      [contactsStyle]=\"StartConversationConfiguration?.contactsStyle!\"\n      [selectionMode]=\"StartConversationConfiguration?.selectionMode!\"\n      [onClose]=\"closeStartConversation\"\n      [tabVisibility]=\"StartConversationConfiguration?.tabVisibility!\"\n      [selectionLimit]=\"StartConversationConfiguration?.selectionLimit!\"\n      [tabs]=\"StartConversationConfiguration?.tabs!\"\n      [onSubmitButtonClick]=\"StartConversationConfiguration?.onSubmitButtonClick!\"\n      [hideSubmitButton]=\"StartConversationConfiguration?.hideSubmitButton!\"></cometchat-contacts>\n  </div>\n  <div class=\"cc-decorator__message--empty\"\n    *ngIf=\"!user && !group && !showStartConversation\"\n    [ngStyle]=\"emptyMessageStyle()\">\n    <cometchat-label [text]=\"messageText\"\n      [labelStyle]=\"labelStyle\"></cometchat-label>\n  </div>\n  <ng-template #startConversationButton>\n    <cometchat-button *ngIf=\"!hideStartNewConversation\"\n      [iconURL]=\"startNewConversationIconURL\"\n      [buttonStyle]=\"startConversationButtonStyle\"\n      (cc-button-clicked)=\"triggerStartConversation()\"></cometchat-button>\n\n  </ng-template>\n", styles: [".cc-with-messages__wrapper{display:flex;height:100%;width:100%;box-sizing:border-box;overflow:hidden}.cc-with-messages__sidebar{width:280px;height:100%;position:relative}.cc-with-messages__main,.cc-with-messages__start-conversation{width:calc(100% - 280px);height:100%}.mobile{width:100%!important;height:100%;position:absolute}.cc-decorator__message--empty{display:flex;justify-content:center;align-items:center}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { user: [{
                 type: Input
             }], group: [{
@@ -19168,6 +19213,7 @@ class CometChatGroupsWithMessagesComponent {
                 border: this.groupsWithMessagesStyle.border,
                 borderRadius: this.groupsWithMessagesStyle.borderRadius,
                 background: this.groupsWithMessagesStyle.background || this.themeService.theme.palette.getBackground(),
+                position: 'relative'
             };
         };
     }
@@ -19229,8 +19275,13 @@ class CometChatGroupsWithMessagesComponent {
         this.openCreateGroupPage = true;
     }
     updateBackdropHeight() {
-        const divHeight = this.elementRef.nativeElement.offsetHeight;
-        const divWidth = this.elementRef.nativeElement.offsetWidth;
+        let divHeight = this.elementRef.nativeElement.offsetHeight;
+        let divWidth = this.elementRef.nativeElement.offsetWidth;
+        if (divHeight === 0 || divWidth === 0) {
+            const rect = this.elementRef.nativeElement.getBoundingClientRect();
+            divHeight = rect.height;
+            divWidth = rect.width;
+        }
         let backdropStyle = {
             height: divHeight + "px",
             width: divWidth + "px",
@@ -19539,6 +19590,7 @@ class CometChatUsersWithMessagesComponent {
                 border: this.usersWithMessagesStyle.border,
                 borderRadius: this.usersWithMessagesStyle.borderRadius,
                 background: this.usersWithMessagesStyle.background || this.themeService.theme.palette.getBackground(),
+                position: 'relative'
             };
         };
     }
@@ -19546,8 +19598,13 @@ class CometChatUsersWithMessagesComponent {
         this.updateBackdropHeight();
     }
     updateBackdropHeight() {
-        const divHeight = this.elementRef.nativeElement.offsetHeight;
-        const divWidth = this.elementRef.nativeElement.offsetWidth;
+        let divHeight = this.elementRef.nativeElement.offsetHeight;
+        let divWidth = this.elementRef.nativeElement.offsetWidth;
+        if (divHeight === 0 || divWidth === 0) {
+            const rect = this.elementRef.nativeElement.getBoundingClientRect();
+            divHeight = rect.height;
+            divWidth = rect.width;
+        }
         let backdropStyle = {
             height: divHeight + "px",
             width: divWidth + "px",
@@ -21765,8 +21822,13 @@ class CometChatCallLogsWithDetailsComponent {
         }
     }
     updateBackdropHeight() {
-        const divHeight = this.elementRef.nativeElement.offsetHeight;
-        const divWidth = this.elementRef.nativeElement.offsetWidth;
+        let divHeight = this.elementRef.nativeElement.offsetHeight;
+        let divWidth = this.elementRef.nativeElement.offsetWidth;
+        if (divHeight === 0 || divWidth === 0) {
+            const rect = this.elementRef.nativeElement.getBoundingClientRect();
+            divHeight = rect.height;
+            divWidth = rect.width;
+        }
         this.backdropStyle = {
             height: divHeight + "px",
             width: divWidth + "px",