@cometchat/chat-uikit-angular 4.3.17 → 4.3.19

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.19",
             };
         }
         if (CometChatUIKitSharedSettings) {
@@ -1976,7 +1976,12 @@ class CometChatUIKit {
                 .build();
             CometChatUIKitCalls.init(callAppSetting).then(() => {
                 console.log("CometChatCalls initialization success");
-                new CallingExtension().enable();
+                if (this.uiKitSettings?.getCallingExtension()) {
+                    this.uiKitSettings?.getCallingExtension().enable();
+                }
+                else {
+                    this.defaultCallingExtension.enable();
+                }
             }, (error) => {
                 console.log("CometChatCalls initialization failed with error:", error);
             });
@@ -2353,6 +2358,11 @@ CometChatUIKit.defaultExtensions = [
     new PollsExtension(),
     new ImageModerationExtension(),
 ];
+/**
+  * Default callingExtension included in the UI Kit.
+  * @type {CallingExtensionDataSource}
+  */
+CometChatUIKit.defaultCallingExtension = new CallingExtension();
 CometChatUIKit.defaultAIFeatures = [
     new AIConversationStarterExtension(),
     new AISmartRepliesExtension(),
@@ -2829,11 +2839,11 @@ class CometChatCallButtonsComponent {
         };
         this.wrapperStyle = () => {
             return {
-                height: this.callButtonsStyle.height,
-                width: this.callButtonsStyle.width,
-                background: this.callButtonsStyle.background,
-                border: this.callButtonsStyle.border,
-                borderRadius: this.callButtonsStyle.borderRadius
+                height: this.callButtonsStyle?.height,
+                width: this.callButtonsStyle?.width,
+                background: this.callButtonsStyle?.background,
+                border: this.callButtonsStyle?.border,
+                borderRadius: this.callButtonsStyle?.borderRadius
             };
         };
     }
@@ -2854,11 +2864,10 @@ class CometChatCallButtonsComponent {
         this.unsubscribeToEvents();
     }
     getCallBuilder() {
-        let audioOnlyCall = this.activeCall?.getType() == CometChatUIKitConstants.MessageTypes.audio ? true : false;
-        const callSettings = new CometChatUIKitCalls.CallSettingsBuilder()
-            .enableDefaultLayout(true)
-            .setIsAudioOnlyCall(audioOnlyCall)
-            .setCallListener(new CometChatUIKitCalls.OngoingCallListener({
+        const audioOnlyCall = this.activeCall?.getType() === CometChatUIKitConstants.MessageTypes.audio;
+        const builder = this.ongoingCallConfiguration?.callSettingsBuilder ? this.ongoingCallConfiguration.callSettingsBuilder(audioOnlyCall, this.user, this.group)
+            : new CometChatUIKitCalls.CallSettingsBuilder().enableDefaultLayout(true).setIsAudioOnlyCall(audioOnlyCall);
+        builder.setCallListener(new CometChatUIKitCalls.OngoingCallListener({
             onCallEnded: () => {
                 StorageUtils.setItem(CometChatUIKitConstants.calls.activecall, null);
                 if (this.call?.getReceiverType() == CometChatUIKitConstants.MessageReceiverType.user) {
@@ -2889,9 +2898,8 @@ class CometChatCallButtonsComponent {
                     this.onError(error);
                 }
             },
-        }))
-            .build();
-        return callSettings;
+        }));
+        return builder.build();
     }
     closeCallScreen() {
         this.disableButtons = false;
@@ -2977,7 +2985,7 @@ class CometChatCallButtonsComponent {
     getVoiceCallButtonStyle(disableButtons) {
         const buttonIconTint = disableButtons
             ? this.themeService.theme.palette.getAccent600()
-            : this.callButtonsStyle.voiceCallIconTint;
+            : this.callButtonsStyle?.voiceCallIconTint;
         return {
             ...this.videoCallButtonStyle,
             buttonIconTint,
@@ -2986,7 +2994,7 @@ class CometChatCallButtonsComponent {
     getVideoCallButtonStyle(disableButtons) {
         const buttonIconTint = disableButtons
             ? this.themeService.theme.palette.getAccent600()
-            : this.callButtonsStyle.videoCallIconTint;
+            : this.callButtonsStyle?.videoCallIconTint;
         return {
             ...this.videoCallButtonStyle,
             buttonIconTint,
@@ -3454,6 +3462,7 @@ class CometChatIncomingCallComponent {
         this.disableSoundForCalls = false;
         this.acceptButtonText = localize("ACCEPT");
         this.declineButtonText = localize("DECLINE");
+        this.ongoingCallConfiguration = new CallScreenConfiguration({});
         this.onError = (error) => {
             console.log(error);
         };
@@ -3742,10 +3751,12 @@ class CometChatIncomingCallComponent {
     }
     getCallBuilder() {
         let audioOnlyCall = this.activeCall?.getType() == CometChatUIKitConstants.MessageTypes.audio ? true : false;
-        const callSettings = new CometChatUIKitCalls.CallSettingsBuilder()
-            .enableDefaultLayout(true)
-            .setIsAudioOnlyCall(audioOnlyCall)
-            .setCallListener(new CometChatUIKitCalls.OngoingCallListener({
+        const builder = this.ongoingCallConfiguration?.callSettingsBuilder?.(this.activeCall) ||
+            new CometChatUIKitCalls.CallSettingsBuilder().enableDefaultLayout(true).setIsAudioOnlyCall(audioOnlyCall);
+        if (this.activeCall?.getType() === CometChatUIKitConstants.calls.meeting) {
+            return undefined;
+        }
+        builder.setCallListener(new CometChatUIKitCalls.OngoingCallListener({
             onCallEnded: () => {
                 StorageUtils.setItem(CometChatUIKitConstants.calls.activecall, null);
                 if (this.call?.getReceiverType() == CometChatUIKitConstants.MessageReceiverType.user) {
@@ -3774,9 +3785,8 @@ class CometChatIncomingCallComponent {
             onError: (error) => {
                 console.log("Error :", error);
             },
-        }))
-            .build();
-        return callSettings;
+        }));
+        return builder.build();
     }
     setThemeStyle() {
         this.setincomingCallStyle();
@@ -3856,10 +3866,10 @@ class CometChatIncomingCallComponent {
     }
 }
 CometChatIncomingCallComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatIncomingCallComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
-CometChatIncomingCallComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatIncomingCallComponent, selector: "cometchat-incoming-call", inputs: { call: "call", disableSoundForCalls: "disableSoundForCalls", customSoundForCalls: "customSoundForCalls", onAccept: "onAccept", onDecline: "onDecline", acceptButtonText: "acceptButtonText", declineButtonText: "declineButtonText", subtitleView: "subtitleView", onError: "onError", listItemStyle: "listItemStyle", avatarStyle: "avatarStyle", incomingCallStyle: "incomingCallStyle" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-incoming-call__wrapper\" [ngStyle]=\"wrapperStyle()\" *ngIf=\"call && showIncomingCallScreen\">\n    <div class=\"cc-incoming-call__listitem\">\n        <cometchat-list-item [title]=\"call.getSender().getName()\"\n        [listItemStyle]=\"listItemStyle\"\n        [hideSeparator]=\"true\" >\n        <div slot=\"subtitleView\" class=\"cc-incoming-call__subtitle-view\" *ngIf=\"subtitleView;else subtitle\">\n            <ng-container *ngTemplateOutlet=\"subtitleView\">\n            </ng-container>\n        </div>\n        <ng-template #subtitle>\n           <div slot=\"subtitleView\"  class=\"cc-incoming-call__subtitle-view\">\n          <div class=\"cc-call__icon\">\n            <cometchat-icon [iconStyle]=\"iconStyle\" [URL]=\"getCallTypeIcon()\"></cometchat-icon>\n          </div>\n          <cometchat-label class=\"cc-call__type\" [text]=\"subtitleText\" [labelStyle]=\"subtitleStyle()\">\n\n          </cometchat-label>\n          </div>\n        </ng-template>\n      <div slot=\"tailView\"  class=\"cc-incoming-call__tail-view\">\n        <div class=\"tail__view\">\n          <div class=\"cc-incoming-call__avatar\">\n            <cometchat-avatar [avatarStyle]=\"avatarStyle\" [image]=\"call.getSender().getAvatar()\" [name]=\"call.getSender().getName()\">\n\n            </cometchat-avatar>\n          </div>\n        </div>\n        </div>\n    </cometchat-list-item>\n    </div>\n    <div class=\"cc-incoming-call-buttons\">\n        <cometchat-button (cc-button-clicked)=\"rejectIncomingCall()\"  [buttonStyle]=\"declineButtonStyle\" [text]=\"declineButtonText\"></cometchat-button>\n        <cometchat-button (cc-button-clicked)=\"acceptIncomingCall()\"  [buttonStyle]=\"acceptButtonStyle\" [text]=\"acceptButtonText\" ></cometchat-button>\n        </div>\n</div>\n<cometchat-ongoing-call *ngIf=\"showOngoingCall && activeCall && !showIncomingCallScreen\" [ongoingCallStyle]=\"ongoingCallStyle\" [sessionID]=\"sessionId\"  [callSettingsBuilder]=\"getCallBuilder()!\"></cometchat-ongoing-call>\n", styles: [".cc-incoming-call__wrapper{position:absolute;left:8px;top:8px;height:-moz-fit-content;height:fit-content;width:-moz-fit-content;width:fit-content;min-height:104px;min-width:230px;z-index:100;display:flex;flex-direction:column;justify-content:flex-start;gap:8px;align-items:flex-start}.cc-incoming-call-buttons{display:flex;gap:8px}.cc-incoming-call__tail-view{position:relative}.cc-incoming-call__subtitle-view{display:flex;align-items:center;justify-content:flex-start;gap:6px}.cc-incoming-call__listitem{width:100%;margin-left:-4px}\n"], components: [{ type: CometChatOngoingCallComponent, selector: "cometchat-ongoing-call", inputs: ["ongoingCallStyle", "resizeIconHoverText", "sessionID", "minimizeIconURL", "maximizeIconURL", "callSettingsBuilder", "callWorkflow", "onError"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CometChatIncomingCallComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatIncomingCallComponent, selector: "cometchat-incoming-call", inputs: { call: "call", disableSoundForCalls: "disableSoundForCalls", customSoundForCalls: "customSoundForCalls", onAccept: "onAccept", onDecline: "onDecline", acceptButtonText: "acceptButtonText", declineButtonText: "declineButtonText", subtitleView: "subtitleView", ongoingCallConfiguration: "ongoingCallConfiguration", onError: "onError", listItemStyle: "listItemStyle", avatarStyle: "avatarStyle", incomingCallStyle: "incomingCallStyle" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-incoming-call__wrapper\" [ngStyle]=\"wrapperStyle()\" *ngIf=\"call && showIncomingCallScreen\">\n    <div class=\"cc-incoming-call__listitem\">\n        <cometchat-list-item [title]=\"call.getSender().getName()\"\n        [listItemStyle]=\"listItemStyle\"\n        [hideSeparator]=\"true\" >\n        <div slot=\"subtitleView\" class=\"cc-incoming-call__subtitle-view\" *ngIf=\"subtitleView;else subtitle\">\n            <ng-container *ngTemplateOutlet=\"subtitleView\">\n            </ng-container>\n        </div>\n        <ng-template #subtitle>\n           <div slot=\"subtitleView\"  class=\"cc-incoming-call__subtitle-view\">\n          <div class=\"cc-call__icon\">\n            <cometchat-icon [iconStyle]=\"iconStyle\" [URL]=\"getCallTypeIcon()\"></cometchat-icon>\n          </div>\n          <cometchat-label class=\"cc-call__type\" [text]=\"subtitleText\" [labelStyle]=\"subtitleStyle()\">\n\n          </cometchat-label>\n          </div>\n        </ng-template>\n      <div slot=\"tailView\"  class=\"cc-incoming-call__tail-view\">\n        <div class=\"tail__view\">\n          <div class=\"cc-incoming-call__avatar\">\n            <cometchat-avatar [avatarStyle]=\"avatarStyle\" [image]=\"call.getSender().getAvatar()\" [name]=\"call.getSender().getName()\">\n\n            </cometchat-avatar>\n          </div>\n        </div>\n        </div>\n    </cometchat-list-item>\n    </div>\n    <div class=\"cc-incoming-call-buttons\">\n        <cometchat-button (cc-button-clicked)=\"rejectIncomingCall()\"  [buttonStyle]=\"declineButtonStyle\" [text]=\"declineButtonText\"></cometchat-button>\n        <cometchat-button (cc-button-clicked)=\"acceptIncomingCall()\"  [buttonStyle]=\"acceptButtonStyle\" [text]=\"acceptButtonText\" ></cometchat-button>\n        </div>\n</div>\n<cometchat-ongoing-call *ngIf=\"showOngoingCall && activeCall && !showIncomingCallScreen\"\n  [maximizeIconURL]=\"ongoingCallConfiguration.maximizeIconURL\"\n  [minimizeIconURL]=\"ongoingCallConfiguration.minimizeIconURL\"\n  [ongoingCallStyle]=\"ongoingCallConfiguration.ongoingCallStyle || ongoingCallStyle\" [sessionID]=\"sessionId\"\n  [callSettingsBuilder]=\"getCallBuilder()!\"></cometchat-ongoing-call>", styles: [".cc-incoming-call__wrapper{position:absolute;left:8px;top:8px;height:-moz-fit-content;height:fit-content;width:-moz-fit-content;width:fit-content;min-height:104px;min-width:230px;z-index:100;display:flex;flex-direction:column;justify-content:flex-start;gap:8px;align-items:flex-start}.cc-incoming-call-buttons{display:flex;gap:8px}.cc-incoming-call__tail-view{position:relative}.cc-incoming-call__subtitle-view{display:flex;align-items:center;justify-content:flex-start;gap:6px}.cc-incoming-call__listitem{width:100%;margin-left:-4px}\n"], components: [{ type: CometChatOngoingCallComponent, selector: "cometchat-ongoing-call", inputs: ["ongoingCallStyle", "resizeIconHoverText", "sessionID", "minimizeIconURL", "maximizeIconURL", "callSettingsBuilder", "callWorkflow", "onError"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatIncomingCallComponent, decorators: [{
             type: Component,
-            args: [{ selector: "cometchat-incoming-call", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-incoming-call__wrapper\" [ngStyle]=\"wrapperStyle()\" *ngIf=\"call && showIncomingCallScreen\">\n    <div class=\"cc-incoming-call__listitem\">\n        <cometchat-list-item [title]=\"call.getSender().getName()\"\n        [listItemStyle]=\"listItemStyle\"\n        [hideSeparator]=\"true\" >\n        <div slot=\"subtitleView\" class=\"cc-incoming-call__subtitle-view\" *ngIf=\"subtitleView;else subtitle\">\n            <ng-container *ngTemplateOutlet=\"subtitleView\">\n            </ng-container>\n        </div>\n        <ng-template #subtitle>\n           <div slot=\"subtitleView\"  class=\"cc-incoming-call__subtitle-view\">\n          <div class=\"cc-call__icon\">\n            <cometchat-icon [iconStyle]=\"iconStyle\" [URL]=\"getCallTypeIcon()\"></cometchat-icon>\n          </div>\n          <cometchat-label class=\"cc-call__type\" [text]=\"subtitleText\" [labelStyle]=\"subtitleStyle()\">\n\n          </cometchat-label>\n          </div>\n        </ng-template>\n      <div slot=\"tailView\"  class=\"cc-incoming-call__tail-view\">\n        <div class=\"tail__view\">\n          <div class=\"cc-incoming-call__avatar\">\n            <cometchat-avatar [avatarStyle]=\"avatarStyle\" [image]=\"call.getSender().getAvatar()\" [name]=\"call.getSender().getName()\">\n\n            </cometchat-avatar>\n          </div>\n        </div>\n        </div>\n    </cometchat-list-item>\n    </div>\n    <div class=\"cc-incoming-call-buttons\">\n        <cometchat-button (cc-button-clicked)=\"rejectIncomingCall()\"  [buttonStyle]=\"declineButtonStyle\" [text]=\"declineButtonText\"></cometchat-button>\n        <cometchat-button (cc-button-clicked)=\"acceptIncomingCall()\"  [buttonStyle]=\"acceptButtonStyle\" [text]=\"acceptButtonText\" ></cometchat-button>\n        </div>\n</div>\n<cometchat-ongoing-call *ngIf=\"showOngoingCall && activeCall && !showIncomingCallScreen\" [ongoingCallStyle]=\"ongoingCallStyle\" [sessionID]=\"sessionId\"  [callSettingsBuilder]=\"getCallBuilder()!\"></cometchat-ongoing-call>\n", styles: [".cc-incoming-call__wrapper{position:absolute;left:8px;top:8px;height:-moz-fit-content;height:fit-content;width:-moz-fit-content;width:fit-content;min-height:104px;min-width:230px;z-index:100;display:flex;flex-direction:column;justify-content:flex-start;gap:8px;align-items:flex-start}.cc-incoming-call-buttons{display:flex;gap:8px}.cc-incoming-call__tail-view{position:relative}.cc-incoming-call__subtitle-view{display:flex;align-items:center;justify-content:flex-start;gap:6px}.cc-incoming-call__listitem{width:100%;margin-left:-4px}\n"] }]
+            args: [{ selector: "cometchat-incoming-call", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-incoming-call__wrapper\" [ngStyle]=\"wrapperStyle()\" *ngIf=\"call && showIncomingCallScreen\">\n    <div class=\"cc-incoming-call__listitem\">\n        <cometchat-list-item [title]=\"call.getSender().getName()\"\n        [listItemStyle]=\"listItemStyle\"\n        [hideSeparator]=\"true\" >\n        <div slot=\"subtitleView\" class=\"cc-incoming-call__subtitle-view\" *ngIf=\"subtitleView;else subtitle\">\n            <ng-container *ngTemplateOutlet=\"subtitleView\">\n            </ng-container>\n        </div>\n        <ng-template #subtitle>\n           <div slot=\"subtitleView\"  class=\"cc-incoming-call__subtitle-view\">\n          <div class=\"cc-call__icon\">\n            <cometchat-icon [iconStyle]=\"iconStyle\" [URL]=\"getCallTypeIcon()\"></cometchat-icon>\n          </div>\n          <cometchat-label class=\"cc-call__type\" [text]=\"subtitleText\" [labelStyle]=\"subtitleStyle()\">\n\n          </cometchat-label>\n          </div>\n        </ng-template>\n      <div slot=\"tailView\"  class=\"cc-incoming-call__tail-view\">\n        <div class=\"tail__view\">\n          <div class=\"cc-incoming-call__avatar\">\n            <cometchat-avatar [avatarStyle]=\"avatarStyle\" [image]=\"call.getSender().getAvatar()\" [name]=\"call.getSender().getName()\">\n\n            </cometchat-avatar>\n          </div>\n        </div>\n        </div>\n    </cometchat-list-item>\n    </div>\n    <div class=\"cc-incoming-call-buttons\">\n        <cometchat-button (cc-button-clicked)=\"rejectIncomingCall()\"  [buttonStyle]=\"declineButtonStyle\" [text]=\"declineButtonText\"></cometchat-button>\n        <cometchat-button (cc-button-clicked)=\"acceptIncomingCall()\"  [buttonStyle]=\"acceptButtonStyle\" [text]=\"acceptButtonText\" ></cometchat-button>\n        </div>\n</div>\n<cometchat-ongoing-call *ngIf=\"showOngoingCall && activeCall && !showIncomingCallScreen\"\n  [maximizeIconURL]=\"ongoingCallConfiguration.maximizeIconURL\"\n  [minimizeIconURL]=\"ongoingCallConfiguration.minimizeIconURL\"\n  [ongoingCallStyle]=\"ongoingCallConfiguration.ongoingCallStyle || ongoingCallStyle\" [sessionID]=\"sessionId\"\n  [callSettingsBuilder]=\"getCallBuilder()!\"></cometchat-ongoing-call>", styles: [".cc-incoming-call__wrapper{position:absolute;left:8px;top:8px;height:-moz-fit-content;height:fit-content;width:-moz-fit-content;width:fit-content;min-height:104px;min-width:230px;z-index:100;display:flex;flex-direction:column;justify-content:flex-start;gap:8px;align-items:flex-start}.cc-incoming-call-buttons{display:flex;gap:8px}.cc-incoming-call__tail-view{position:relative}.cc-incoming-call__subtitle-view{display:flex;align-items:center;justify-content:flex-start;gap:6px}.cc-incoming-call__listitem{width:100%;margin-left:-4px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { call: [{
                 type: Input
             }], disableSoundForCalls: [{
@@ -3876,6 +3886,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], subtitleView: [{
                 type: Input
+            }], ongoingCallConfiguration: [{
+                type: Input
             }], onError: [{
                 type: Input
             }], listItemStyle: [{
@@ -4058,6 +4070,7 @@ class CometChatUsersComponent {
             else {
                 delete this.selectedUsers[user.getUid()];
             }
+            this.ref.detectChanges();
         };
         this.fetchNextUsersList = (state = States.loading) => {
             this.onScrolledToBottom = null;
@@ -7421,7 +7434,7 @@ class CometChatConversationsComponent {
         try {
             if (!this.disableSoundForMessages) {
                 if (this.customSoundForMessages) {
-                    CometChatSoundManager.play(this.customSoundForMessages);
+                    CometChatSoundManager.play(CometChatSoundManager.Sound.incomingMessageFromOther, this.customSoundForMessages);
                 }
                 else {
                     CometChatSoundManager.play(CometChatSoundManager.Sound.incomingMessageFromOther);
@@ -8670,7 +8683,7 @@ class CometChatMessageListComponent {
         };
         this.setBubbleView = () => {
             this.messageTemplate.forEach((element) => {
-                this.messageTypesMap[element.type] = element;
+                this.messageTypesMap[element.category + '_' + element.type] = element;
             });
         };
         this.openThreadView = (message) => {
@@ -8772,14 +8785,14 @@ class CometChatMessageListComponent {
          * @returns User-defined TemplateRef if present, otherwise null
          */
         this.getContentView = (message) => {
-            if (this.messageTypesMap[message?.getType()] &&
-                this.messageTypesMap[message?.getType()]?.contentView) {
-                return this.messageTypesMap[message?.getType()]?.contentView(message);
+            if (this.messageTypesMap[message.getCategory() + '_' + message?.getType()] &&
+                this.messageTypesMap[message.getCategory() + '_' + message?.getType()]?.contentView) {
+                return this.messageTypesMap[message.getCategory() + '_' + message?.getType()]?.contentView(message);
             }
             else {
                 return message.getDeletedAt()
                     ? this.typesMap["text"]
-                    : this.typesMap[message?.getType()];
+                    : this.typesMap[message.getCategory() + '_' + message?.getType()];
             }
         };
         this.setBubbleAlignment = (message) => {
@@ -8808,9 +8821,9 @@ class CometChatMessageListComponent {
         this.getBubbleWrapper = (message) => {
             let view;
             if (this.messageTypesMap &&
-                this.messageTypesMap[message?.getType()] &&
-                this.messageTypesMap[message?.getType()].bubbleView) {
-                view = this.messageTypesMap[message?.getType()].bubbleView(message);
+                this.messageTypesMap[message?.getCategory() + '_' + message?.getType()] &&
+                this.messageTypesMap[message?.getCategory() + '_' + message?.getType()].bubbleView) {
+                view = this.messageTypesMap[message?.getCategory() + '_' + message?.getType()].bubbleView(message);
                 return view;
             }
             else {
@@ -10610,9 +10623,9 @@ class CometChatMessageListComponent {
      */
     getHeaderView(message) {
         let view = null;
-        if (this.messageTypesMap[message?.getType()] &&
-            this.messageTypesMap[message?.getType()]?.headerView) {
-            view = this.messageTypesMap[message?.getType()]?.headerView(message);
+        if (this.messageTypesMap[message.getCategory() + '_' + message?.getType()] &&
+            this.messageTypesMap[message.getCategory() + '_' + message?.getType()]?.headerView) {
+            view = this.messageTypesMap[message.getCategory() + '_' + message?.getType()]?.headerView(message);
             return view;
         }
         else {
@@ -10628,9 +10641,9 @@ class CometChatMessageListComponent {
      */
     getFooterView(message) {
         let view = null;
-        if (this.messageTypesMap[message?.getType()] &&
-            this.messageTypesMap[message?.getType()]?.footerView) {
-            view = this.messageTypesMap[message?.getType()]?.footerView(message);
+        if (this.messageTypesMap[message.getCategory() + '_' + message?.getType()] &&
+            this.messageTypesMap[message.getCategory() + '_' + message?.getType()]?.footerView) {
+            view = this.messageTypesMap[message.getCategory() + '_' + message?.getType()]?.footerView(message);
             return view;
         }
         else {
@@ -10645,9 +10658,9 @@ class CometChatMessageListComponent {
      * @returns User-defined TemplateRef if present, otherwise null
      */
     getBottomView(message) {
-        if (this.messageTypesMap[message?.getType()] &&
-            this.messageTypesMap[message?.getType()]?.bottomView) {
-            return this.messageTypesMap[message?.getType()]?.bottomView(message);
+        if (this.messageTypesMap[message.getCategory() + '_' + message?.getType()] &&
+            this.messageTypesMap[message.getCategory() + '_' + message?.getType()]?.bottomView) {
+            return this.messageTypesMap[message.getCategory() + '_' + message?.getType()]?.bottomView(message);
         }
         else {
             return null;
@@ -10661,9 +10674,9 @@ class CometChatMessageListComponent {
      * @returns User-defined TemplateRef if present, otherwise null
      */
     getStatusInfoView(message) {
-        if (this.messageTypesMap[message?.getType()] &&
-            this.messageTypesMap[message?.getType()]?.statusInfoView) {
-            return this.messageTypesMap[message?.getType()]?.statusInfoView(message);
+        if (this.messageTypesMap[message.getCategory() + '_' + message?.getType()] &&
+            this.messageTypesMap[message.getCategory() + '_' + message?.getType()]?.statusInfoView) {
+            return this.messageTypesMap[message.getCategory() + '_' + message?.getType()]?.statusInfoView(message);
         }
         else {
             return null;
@@ -10930,20 +10943,22 @@ class CometChatMessageListComponent {
      */
     checkMessageTemplate() {
         this.typesMap = {
-            text: this.textBubble,
-            file: this.fileBubble,
-            audio: this.audioBubble,
-            video: this.videoBubble,
-            image: this.imageBubble,
-            groupMember: this.textBubble,
-            extension_sticker: this.stickerBubble,
-            extension_whiteboard: this.whiteboardBubble,
-            extension_document: this.documentBubble,
-            extension_poll: this.pollBubble,
-            meeting: this.directCalling,
-            scheduler: this.schedulerBubble,
-            form: this.formBubble,
-            card: this.cardBubble,
+            [CometChatUIKitConstants.MessageCategory.message + '_' + CometChatUIKitConstants.MessageTypes.text]: this.textBubble,
+            [CometChatUIKitConstants.MessageCategory.message + '_' + CometChatUIKitConstants.MessageTypes.file]: this.fileBubble,
+            [CometChatUIKitConstants.MessageCategory.message + '_' + CometChatUIKitConstants.MessageTypes.audio]: this.audioBubble,
+            [CometChatUIKitConstants.MessageCategory.message + '_' + CometChatUIKitConstants.MessageTypes.video]: this.videoBubble,
+            [CometChatUIKitConstants.MessageCategory.message + '_' + CometChatUIKitConstants.MessageTypes.image]: this.imageBubble,
+            [CometChatUIKitConstants.MessageCategory.action + '_' + CometChatUIKitConstants.MessageTypes.groupMember]: this.textBubble,
+            custom_extension_sticker: this.stickerBubble,
+            custom_extension_whiteboard: this.whiteboardBubble,
+            custom_extension_document: this.documentBubble,
+            custom_extension_poll: this.pollBubble,
+            custom_meeting: this.directCalling,
+            [CometChatUIKitConstants.MessageCategory.call + '_' + CometChatUIKitConstants.MessageTypes.audio]: this.audioBubble,
+            [CometChatUIKitConstants.MessageCategory.call + '_' + CometChatUIKitConstants.MessageTypes.video]: this.videoBubble,
+            [CometChatUIKitConstants.MessageCategory.interactive + '_' + CometChatUIKitConstants.MessageTypes.scheduler]: this.schedulerBubble,
+            [CometChatUIKitConstants.MessageCategory.interactive + '_' + CometChatUIKitConstants.MessageTypes.form]: this.formBubble,
+            [CometChatUIKitConstants.MessageCategory.interactive + '_' + CometChatUIKitConstants.MessageTypes.card]: this.cardBubble,
         };
         this.setBubbleView();
     }
@@ -12195,9 +12210,6 @@ class CometChatMessageListComponent {
                     case MessageStatus.inprogress: {
                         if (this.isPartOfCurrentChatForUIEvent(message)) {
                             this.addMessage(message);
-                            if (!this.disableSoundForMessages) {
-                                this.playAudio();
-                            }
                         }
                         break;
                     }
@@ -13532,7 +13544,13 @@ class CometChatMessageComposerComponent {
         this.ref = ref;
         this.themeService = themeService;
         this.disableSoundForMessages = false;
+        /**
+      * @deprecated
+      *
+      * This property is deprecated as of version 4.3.19 due to newer property 'customSoundForMessages'. It will be removed in subsequent versions.
+      */
         this.customSoundForMessage = "";
+        this.customSoundForMessages = "";
         this.disableTypingEvents = false;
         this.text = "";
         this.placeholderText = localize("ENTER_YOUR_MESSAGE_HERE");
@@ -13847,6 +13865,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;
@@ -13871,7 +13922,7 @@ class CometChatMessageComposerComponent {
                 this.stickerConfiguration?.configuration?.ccStickerClicked({
                     name: stickerName,
                     url: sticker,
-                }, this.loggedInUser, this.user, this.group, this.parentMessageId, this.onError, this.customSoundForMessage, this.disableSoundForMessages);
+                }, this.loggedInUser, this.user, this.group, this.parentMessageId, this.onError, this.customSoundForMessage || this.customSoundForMessages, this.disableSoundForMessages);
             }
         };
         this.openImagePicker = () => {
@@ -14323,7 +14374,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();
                 }
             }
         });
@@ -14658,8 +14714,8 @@ class CometChatMessageComposerComponent {
     }
     playAudio() {
         if (!this.disableSoundForMessages) {
-            if (this.customSoundForMessage) {
-                CometChatSoundManager.play(CometChatSoundManager.Sound.outgoingMessage, this.customSoundForMessage);
+            if (this.customSoundForMessage || this.customSoundForMessages) {
+                CometChatSoundManager.play(CometChatSoundManager.Sound.outgoingMessage, this.customSoundForMessage || this.customSoundForMessages);
             }
             else {
                 CometChatSoundManager.play(CometChatSoundManager.Sound.outgoingMessage);
@@ -15220,7 +15276,7 @@ class CometChatMessageComposerComponent {
     }
 }
 CometChatMessageComposerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageComposerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
-CometChatMessageComposerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatMessageComposerComponent, selector: "cometchat-message-composer", inputs: { user: "user", group: "group", disableSoundForMessages: "disableSoundForMessages", customSoundForMessage: "customSoundForMessage", disableTypingEvents: "disableTypingEvents", text: "text", placeholderText: "placeholderText", headerView: "headerView", onTextChange: "onTextChange", attachmentIconURL: "attachmentIconURL", attachmentOptions: "attachmentOptions", secondaryButtonView: "secondaryButtonView", auxilaryButtonView: "auxilaryButtonView", auxiliaryButtonsAlignment: "auxiliaryButtonsAlignment", sendButtonView: "sendButtonView", parentMessageId: "parentMessageId", hideLiveReaction: "hideLiveReaction", LiveReactionIconURL: "LiveReactionIconURL", backButtonIconURL: "backButtonIconURL", mentionsWarningText: "mentionsWarningText", mentionsWarningStyle: "mentionsWarningStyle", messageComposerStyle: "messageComposerStyle", onSendButtonClick: "onSendButtonClick", onError: "onError", backdropStyle: "backdropStyle", actionSheetStyle: "actionSheetStyle", aiActionSheetStyle: "aiActionSheetStyle", hideVoiceRecording: "hideVoiceRecording", mediaRecorderStyle: "mediaRecorderStyle", aiOptionsStyle: "aiOptionsStyle", aiIconURL: "aiIconURL", voiceRecordingIconURL: "voiceRecordingIconURL", voiceRecordingCloseIconURL: "voiceRecordingCloseIconURL", voiceRecordingStartIconURL: "voiceRecordingStartIconURL", voiceRecordingStopIconURL: "voiceRecordingStopIconURL", voiceRecordingSubmitIconURL: "voiceRecordingSubmitIconURL", hideLayoutMode: "hideLayoutMode", emojiIconURL: "emojiIconURL", userMemberWrapperConfiguration: "userMemberWrapperConfiguration", disableMentions: "disableMentions", textFormatters: "textFormatters" }, outputs: { childEvent: "childEvent" }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "emojiButtonRef", first: true, predicate: ["emojiButtonRef"], descendants: true }, { propertyName: "actionSheetRef", first: true, predicate: ["actionSheetRef"], descendants: true }, { propertyName: "stickerButtonRef", first: true, predicate: ["stickerButtonRef"], descendants: true }, { propertyName: "mediaRecordedRef", first: true, predicate: ["mediaRecordedRef"], descendants: true }, { propertyName: "aiButtonRef", first: true, predicate: ["aiButtonRef"], descendants: true }, { propertyName: "userMemberWrapperRef", first: true, predicate: ["userMemberWrapperRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-message-composer__wrapper\" [ngStyle]=\"composerWrapperStyle()\">\n  <div class=\"cc-messagecomposer__mentions\" *ngIf=\"showListForMentions\"\n    #userMemberWrapperRef>\n    <cometchat-user-member-wrapper [userMemberListType]=\"userMemberListType\"\n      [onItemClick]=\"userMemberWrapperConfiguration.onItemClick || defaultMentionsItemClickHandler\"\n      [usersRequestBuilder]=\"usersRequestBuilder\"\n      [searchKeyword]=\"mentionsSearchTerm\"\n      [subtitleView]=\"userMemberWrapperConfiguration.subtitleView\"\n      [disableUsersPresence]=\"userMemberWrapperConfiguration.disableUsersPresence\"\n      [avatarStyle]=\"userMemberWrapperConfiguration.avatarStyle\"\n      [listItemView]=\"userMemberWrapperConfiguration.listItemView\"\n      [statusIndicatorStyle]=\"userMemberWrapperConfiguration.statusIndicatorStyle\"\n      [userPresencePlacement]=\"userMemberWrapperConfiguration.userPresencePlacement\"\n      [hideSeperator]=\"userMemberWrapperConfiguration.hideSeparator\"\n      [loadingStateView]=\"userMemberWrapperConfiguration.loadingStateView\"\n      [onEmpty]=\"defaultOnEmptyForMentions\"\n      [loadingIconUrl]=\"userMemberWrapperConfiguration.loadingIconURL\"\n      [group]=\"group\" [groupMemberRequestBuilder]=\"groupMembersRequestBuilder\"\n      [disableLoadingState]=\"true\"\n      [onError]=\"defaultOnEmptyForMentions\"></cometchat-user-member-wrapper>\n\n    <div *ngIf=\"showMentionsCountWarning\"\n      class=\"cc-messagecomposer__mentions-limit-exceeded\">\n      <cometchat-icon-button\n        [text]=\"mentionsWarningText || localize('MENTIONS_LIMIT_WARNING_MESSAGE')\"\n        [iconURL]=\"InfoSimpleIcon\"\n        [buttonStyle]=\"getMentionInfoIconStyle()\"></cometchat-icon-button>\n    </div>\n\n  </div>\n  <div class=\"cc-message-composer__header-view\"\n    *ngIf=\"headerView; else messagePreview\">\n    <ng-container\n      *ngTemplateOutlet=\"headerView;context:{ $implicit: user ?? group, composerId:composerId }\">\n    </ng-container>\n  </div>\n  <ng-template #messagePreview>\n    <div class=\"cc-message-composer__header-view\" *ngIf=\"showPreview\">\n      <cometchat-preview [previewStyle]=\"previewStyle\"\n        [previewSubtitle]=\"editPreviewText\"\n        (cc-preview-close-clicked)=\"closePreview()\"> </cometchat-preview>\n    </div>\n  </ng-template>\n  <div class=\"cc-message-composer__input\">\n\n    <cometchat-text-input (cc-text-input-entered)=\"sendMessageOnEnter($event)\"\n      #inputRef [text]=\"text\"\n      (cc-text-input-changed)=\"messageInputChanged($event)\"\n      [textInputStyle]=\"textInputStyle\" [placeholderText]=\"placeholderText\"\n      [auxiliaryButtonAlignment]=\"auxiliaryButtonsAlignment\"\n      [textFormatters]=\"textFormatters\">\n\n      <div data-slot=\"secondaryView\">\n        <div *ngIf=\"secondaryButtonView;else secondaryButton\">\n          <ng-container\n            *ngTemplateOutlet=\"secondaryButtonView;context:{ $implicit: user ?? group, composerId:composerId }\">\n          </ng-container>\n        </div>\n        <ng-template #secondaryButton>\n          <div class=\"cc-message-composer__attachbutton\">\n            <cometchat-popover\n              (cc-popover-outside-clicked)=\"handleOutsideClick()\"\n              [placement]=\"auxilaryPlacement\" [popoverStyle]=\"popoverStyle\">\n              <cometchat-action-sheet slot=\"content\"\n                [title]=\"localize('ADD_TO_CHAT')\" [actions]=\"composerActions\"\n                [actionSheetStyle]=\"actionSheetStyle\"\n                (cc-actionsheet-clicked)=\"handleActions($event)\"\n                [hideLayoutMode]=\"hideLayoutMode\"\n                >\n              </cometchat-action-sheet>\n              <cometchat-button #actionSheetRef slot=\"children\"\n                (cc-button-clicked)=\"openActionSheet($event)\"\n                [iconURL]=\"!showActionSheetItem || (showEmojiKeyboard && !showActionSheetItem)  ? attachmentIconURL  : closeButtonIconURL\"\n                [buttonStyle]=\"attachmentButtonStyle\"></cometchat-button>\n            </cometchat-popover>\n          </div>\n        </ng-template>\n      </div>\n\n      <div class=\"cc-message-composer__auxiliary\" data-slot=\"auxilaryView\">\n        <div class=\"cc-message-composer__custom-auxiliary-view\"\n          *ngIf=\"auxilaryButtonView\">\n          <ng-container\n            *ngTemplateOutlet=\"auxilaryButtonView;context:{ $implicit: user ?? group, composerId:composerId }\">\n          </ng-container>\n        </div>\n        <!-- AI Cards -->\n        <div class=\"cc-message-composer__stickerkeyboard\"\n          *ngIf=\"!auxilaryButtonView\">\n          <cometchat-popover (cc-popover-click)=\"openStickerKeyboard($event)\"\n            [popoverStyle]=\"aiPopover\" [placement]=\"auxilaryPlacement\">\n            <cometchat-ai-card [state]=\"smartReplyState\"\n              *ngIf=\"showSmartReply && !showActionSheetItemAI && !showAiBotList\"\n              slot=\"content\" [loadingStateText]=\"loadingStateText\"\n              [emptyStateText]=\"emptyStateText\"\n              [errorStateText]=\"errorStateText\">\n              <div slot=\"loadedView\" class=\"smart-replies-wrapper\">\n\n                <div class=\"cc-message-composer__smartreply-header\">\n                  <div class=\"cc-message-composer__back-button\">\n                    <cometchat-button\n                      *ngIf=\"repliesArray && repliesArray.length > 0 \"\n                      [iconURL]=\"backButtonIconURL\"\n                      (cc-button-clicked)=\"onAiBackButtonClick()\"\n                      [buttonStyle]=\"backButtonStyle()\">\n                    </cometchat-button>\n                  </div>\n                  <div class=\"cc-message-composer__smartreply-header-view\">\n                    <p>{{ localize(\"SUGGEST_A_REPLY\") }}</p>\n                  </div>\n                </div>\n\n                <div class=\"cc-message-composer__smartreply-content\">\n                  <smart-replies\n                    *ngIf=\"repliesArray && repliesArray.length > 0 \"\n                    [smartReplyStyle]=\"smartReplyStyle\" [replies]=\"repliesArray\"\n                    [closeIconURL]=\"''\" (cc-reply-clicked)=\"sendReply($event)\">\n                  </smart-replies>\n                </div>\n\n\n\n\n\n              </div>\n            </cometchat-ai-card>\n\n            <div *ngIf=\"showAiBotList  && !showActionSheetItemAI\"\n              slot=\"content\">\n              <div class=\"cc-message-composer__aibotlist\">\n                <cometchat-button *ngIf=\" aiBotList && aiBotList.length> 1 \"\n                  [iconURL]=\"backButtonIconURL\"\n                  (cc-button-clicked)=\"onAiBackButtonClick()\"\n                  [buttonStyle]=\"backButtonStyle()\">\n                </cometchat-button>\n                <p>{{ localize(\"COMETCHAT_ASK_AI_BOT\") }}</p>\n              </div>\n              <cometchat-action-sheet\n                *ngIf=\"showAiBotList  && !showActionSheetItemAI\" slot=\"content\"\n                [actions]=\"aiActionButtons\" [title]=\"localize('AI')\"\n                [actionSheetStyle]=\"aiActionSheetStyle\" [hideLayoutMode]=\"true\"\n                (cc-actionsheet-clicked)=\"handleActions($event)\">\n              </cometchat-action-sheet>\n            </div>\n\n            <cometchat-action-sheet *ngIf=\"showActionSheetItemAI\" slot=\"content\"\n              [actions]=\"buttons\" [title]=\"localize('AI')\"\n              [actionSheetStyle]=\"aiActionSheetStyle\" [hideLayoutMode]=\"true\"\n              (cc-actionsheet-clicked)=\"handleActions($event)\">\n            </cometchat-action-sheet>\n\n            <cometchat-button *ngIf=\"isAiEnabled\" [hoverText]=\"localize('AI')\"\n              slot=\"children\" #aiButtonRef\n              (cc-button-clicked)=\"openAiFeatures($event)\"\n              [iconURL]=\"!showAiFeatures ? aiIconURL : closeButtonIconURL\"\n              [buttonStyle]=\"stickerButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n\n        <div class=\"cc-message-composer__stickerkeyboard\"\n          *ngIf=\"enableStickerKeyboard && !auxilaryButtonView\">\n          <cometchat-popover (cc-popover-outside-clicked)=\"handleOutsideClick()\"\n            [popoverStyle]=\"stickerPopover\" [placement]=\"auxilaryPlacement\">\n            <stickers-keyboard slot=\"content\"\n              [stickerStyle]=\"stickerKeyboardStyle\"\n              (cc-sticker-clicked)=\"sendSticker($event)\">\n            </stickers-keyboard>\n            <cometchat-button [hoverText]=\"localize('STICKER')\" slot=\"children\"\n              #stickerButtonRef\n              (cc-button-clicked)=\"openStickerKeyboard($event)\"\n              [iconURL]=\" !showStickerKeyboard ? stickerButtonIconURL : closeButtonIconURL\"\n              [buttonStyle]=\"stickerButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n        <div class=\"cc-message-composer__emojikeyboard\"\n          *ngIf=\"!auxilaryButtonView\">\n          <cometchat-popover (cc-popover-outside-clicked)=\"handleOutsideClick()\"\n            [placement]=\"auxilaryPlacement\" [popoverStyle]=\"emojiPopover\">\n            <cometchat-emoji-keyboard slot=\"content\"\n              [emojiKeyboardStyle]=\"emojiKeyboardStyle\"\n              (cc-emoji-clicked)=\"appendEmoji($event)\">\n            </cometchat-emoji-keyboard>\n            <cometchat-button #emojiButtonRef [hoverText]=\"localize('EMOJI')\"\n              slot=\"children\" (cc-button-clicked)=\"openEmojiKeyboard($event)\"\n              [iconURL]=\" !showEmojiKeyboard  || (!showEmojiKeyboard && showActionSheetItem) ? emojiIconURL : closeButtonIconURL\"\n              [buttonStyle]=\"emojiButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n        <div class=\"cc-message-composer__mediarecorder\"\n          *ngIf=\"!hideVoiceRecording\">\n          <cometchat-popover (cc-popover-outside-clicked)=\"handleOutsideClick()\"\n            [popoverStyle]=\"mediaRecordedPopover\"\n            [placement]=\"auxilaryPlacement\">\n\n            <cometchat-media-recorder *ngIf=\"toggleMediaRecorded\"\n              [autoRecording]=\"true\" startIconText=\"\" stopIconText=\"\"\n              submitButtonIconText=\"\"\n              [submitButtonIconURL]=\"voiceRecordingSubmitIconURL\"\n              [startIconURL]=\"voiceRecordingStartIconURL\"\n              [stopIconURL]=\"voiceRecordingStopIconURL\"\n              [closeIconURL]=\"voiceRecordingCloseIconURL\"\n              (cc-media-recorder-submitted)=\"sendRecordedMedia($event)\"\n              (cc-media-recorder-closed)=\"closeMediaRecorder($event)\"\n              slot=\"content\"\n              [mediaPlayerStyle]=\"mediaRecorderStyle\"></cometchat-media-recorder>\n            <cometchat-icon-button [hoverText]=\"localize('VOICE_RECORDING')\"\n              slot=\"children\" #mediaRecordedRef\n              (cc-button-clicked)=\"openMediaRecorded($event)\"\n              [iconURL]=\" !toggleMediaRecorded ? voiceRecordingIconURL : closeButtonIconURL\"\n              [buttonStyle]=\"mediaRecorderButtonStyle\"></cometchat-icon-button>\n          </cometchat-popover>\n        </div>\n      </div>\n      <div data-slot=\"primaryView\">\n        <div *ngIf=\"sendButtonView;else sendButton\">\n          <ng-container\n            *ngTemplateOutlet=\"sendButtonView;context:{ item: user ?? group, composerId:composerId }\">\n          </ng-container>\n        </div>\n        <ng-template #sendButton>\n          <div class=\"cc-message-composer__sendbutton\"\n            *ngIf=\"showSendButton || hideLiveReaction\">\n            <cometchat-button [iconURL]=\"sendButtonIconURL\"\n              [buttonStyle]=\"sendButtonStyle\"\n              [hoverText]=\"localize('SEND_MESSAGE')\"\n              [disabled]=\"!showSendButton\"\n              (cc-button-clicked)=\"customSendMethod(messageText)\">\n            </cometchat-button>\n          </div>\n          <div class=\"cc-message-composer__livereaction\"\n            *ngIf=\"!hideLiveReaction && !showSendButton\">\n            <cometchat-button [iconURL]=\"LiveReactionIconURL\"\n              [hoverText]=\"localize('LIVE_REACTION')\"\n              [buttonStyle]=\"liveReactionStyle\"\n              (cc-button-clicked)=\"sendReaction()\"></cometchat-button>\n          </div>\n        </ng-template>\n      </div>\n    </cometchat-text-input>\n  </div>\n</div>\n\n<input class=\"cc-message-composer__mediainput\" #inputElement\n  (change)=\"inputChangeHandler($event)\" />\n<cometchat-backdrop *ngIf=\"showCreatePolls\" [backdropStyle]=\"backdropStyle\">\n  <create-poll [user]=\"user\" [group]=\"group\"\n    (cc-close-clicked)=\"closeCreatePolls()\"\n    [createPollStyle]=\"createPollStyle\"></create-poll>\n</cometchat-backdrop>\n", styles: [".cc-message-composer__sendbutton,.cc-message-composer__livereaction{margin:0 5px}.cc-message-composer__wrapper{height:100%;width:100%;position:relative;padding:14px 16px}.cc-message-composer__header-view{height:-moz-fit-content;height:fit-content;width:100%;bottom:120%;padding:0 0 1px}.cc-message-composer__mediainput{display:none}.cc-message-composer__auxiliary{display:flex;gap:8px}.cc-message-composer__smartreply-header{width:100%;display:flex;align-items:center;position:absolute;padding:10px;top:0;z-index:1}.cc-message-composer__back-button{margin-left:2%}.cc-message-composer__smartreply-header-view{margin-left:14%}.cc-message-composer__smartreply-content{max-height:200px}.cc-message-composer__aibotlist{display:flex;padding:10px;align-items:center;gap:45px;font-size:medium}.cc-messagecomposer__mentions{max-height:196px;min-height:28px;overflow:hidden;position:absolute;width:100%;left:50%;transform:translate(-50%,-100%);z-index:2;display:flex;padding:0 16px 1px 14px;box-sizing:border-box}.cc-messagecomposer__mentions cometchat-user-member-wrapper{max-height:196px;min-height:28px;overflow:hidden;width:100%;box-sizing:border-box;min-height:45px}.cc-messagecomposer__mentions::-webkit-scrollbar{display:none}.cc-messagecomposer__mentions-limit-exceeded{margin-top:20px;left:2px;position:relative;padding-left:13px;background-color:#fff}*{box-sizing:border-box}cometchat-ai-card{height:100%;width:100%;display:flex;border-radius:8px;overflow-y:auto;justify-content:center;align-items:center}cometchat-popover{position:relative}\n"], components: [{ type: CometChatUserMemberWrapperComponent, selector: "cometchat-user-member-wrapper", inputs: ["userMemberListType", "onItemClick", "listItemView", "avatarStyle", "statusIndicatorStyle", "searchKeyword", "group", "subtitleView", "usersRequestBuilder", "disableUsersPresence", "userPresencePlacement", "hideSeperator", "loadingStateView", "onEmpty", "onError", "groupMemberRequestBuilder", "loadingIconUrl", "disableLoadingState"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CometChatMessageComposerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatMessageComposerComponent, selector: "cometchat-message-composer", inputs: { user: "user", group: "group", disableSoundForMessages: "disableSoundForMessages", customSoundForMessage: "customSoundForMessage", customSoundForMessages: "customSoundForMessages", disableTypingEvents: "disableTypingEvents", text: "text", placeholderText: "placeholderText", headerView: "headerView", onTextChange: "onTextChange", attachmentIconURL: "attachmentIconURL", attachmentOptions: "attachmentOptions", secondaryButtonView: "secondaryButtonView", auxilaryButtonView: "auxilaryButtonView", auxiliaryButtonsAlignment: "auxiliaryButtonsAlignment", sendButtonView: "sendButtonView", parentMessageId: "parentMessageId", hideLiveReaction: "hideLiveReaction", LiveReactionIconURL: "LiveReactionIconURL", backButtonIconURL: "backButtonIconURL", mentionsWarningText: "mentionsWarningText", mentionsWarningStyle: "mentionsWarningStyle", messageComposerStyle: "messageComposerStyle", onSendButtonClick: "onSendButtonClick", onError: "onError", backdropStyle: "backdropStyle", actionSheetStyle: "actionSheetStyle", aiActionSheetStyle: "aiActionSheetStyle", hideVoiceRecording: "hideVoiceRecording", mediaRecorderStyle: "mediaRecorderStyle", aiOptionsStyle: "aiOptionsStyle", aiIconURL: "aiIconURL", voiceRecordingIconURL: "voiceRecordingIconURL", voiceRecordingCloseIconURL: "voiceRecordingCloseIconURL", voiceRecordingStartIconURL: "voiceRecordingStartIconURL", voiceRecordingStopIconURL: "voiceRecordingStopIconURL", voiceRecordingSubmitIconURL: "voiceRecordingSubmitIconURL", hideLayoutMode: "hideLayoutMode", emojiIconURL: "emojiIconURL", userMemberWrapperConfiguration: "userMemberWrapperConfiguration", disableMentions: "disableMentions", textFormatters: "textFormatters" }, outputs: { childEvent: "childEvent" }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "emojiButtonRef", first: true, predicate: ["emojiButtonRef"], descendants: true }, { propertyName: "actionSheetRef", first: true, predicate: ["actionSheetRef"], descendants: true }, { propertyName: "stickerButtonRef", first: true, predicate: ["stickerButtonRef"], descendants: true }, { propertyName: "mediaRecordedRef", first: true, predicate: ["mediaRecordedRef"], descendants: true }, { propertyName: "aiButtonRef", first: true, predicate: ["aiButtonRef"], descendants: true }, { propertyName: "userMemberWrapperRef", first: true, predicate: ["userMemberWrapperRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-message-composer__wrapper\" [ngStyle]=\"composerWrapperStyle()\">\n  <div class=\"cc-messagecomposer__mentions\" *ngIf=\"showListForMentions\"\n    #userMemberWrapperRef>\n    <cometchat-user-member-wrapper [userMemberListType]=\"userMemberListType\"\n      [onItemClick]=\"userMemberWrapperConfiguration.onItemClick || defaultMentionsItemClickHandler\"\n      [usersRequestBuilder]=\"usersRequestBuilder\"\n      [searchKeyword]=\"mentionsSearchTerm\"\n      [subtitleView]=\"userMemberWrapperConfiguration.subtitleView\"\n      [disableUsersPresence]=\"userMemberWrapperConfiguration.disableUsersPresence\"\n      [avatarStyle]=\"userMemberWrapperConfiguration.avatarStyle\"\n      [listItemView]=\"userMemberWrapperConfiguration.listItemView\"\n      [statusIndicatorStyle]=\"userMemberWrapperConfiguration.statusIndicatorStyle\"\n      [userPresencePlacement]=\"userMemberWrapperConfiguration.userPresencePlacement\"\n      [hideSeperator]=\"userMemberWrapperConfiguration.hideSeparator\"\n      [loadingStateView]=\"userMemberWrapperConfiguration.loadingStateView\"\n      [onEmpty]=\"defaultOnEmptyForMentions\"\n      [loadingIconUrl]=\"userMemberWrapperConfiguration.loadingIconURL\"\n      [group]=\"group\" [groupMemberRequestBuilder]=\"groupMembersRequestBuilder\"\n      [disableLoadingState]=\"true\"\n      [onError]=\"defaultOnEmptyForMentions\"></cometchat-user-member-wrapper>\n\n    <div *ngIf=\"showMentionsCountWarning\"\n      class=\"cc-messagecomposer__mentions-limit-exceeded\">\n      <cometchat-icon-button\n        [text]=\"mentionsWarningText || localize('MENTIONS_LIMIT_WARNING_MESSAGE')\"\n        [iconURL]=\"InfoSimpleIcon\"\n        [buttonStyle]=\"getMentionInfoIconStyle()\"></cometchat-icon-button>\n    </div>\n\n  </div>\n  <div class=\"cc-message-composer__header-view\"\n    *ngIf=\"headerView; else messagePreview\">\n    <ng-container\n      *ngTemplateOutlet=\"headerView;context:{ $implicit: user ?? group, composerId:composerId }\">\n    </ng-container>\n  </div>\n  <ng-template #messagePreview>\n    <div class=\"cc-message-composer__header-view\" *ngIf=\"showPreview\">\n      <cometchat-preview [previewStyle]=\"previewStyle\"\n        [previewSubtitle]=\"editPreviewText\"\n        (cc-preview-close-clicked)=\"closePreview()\"> </cometchat-preview>\n    </div>\n  </ng-template>\n  <div class=\"cc-message-composer__input\">\n\n    <cometchat-text-input (cc-text-input-entered)=\"sendMessageOnEnter($event)\"\n      #inputRef [text]=\"text\"\n      (cc-text-input-changed)=\"messageInputChanged($event)\"\n      [textInputStyle]=\"textInputStyle\" [placeholderText]=\"placeholderText\"\n      [auxiliaryButtonAlignment]=\"auxiliaryButtonsAlignment\"\n      [textFormatters]=\"textFormatters\">\n\n      <div data-slot=\"secondaryView\">\n        <div *ngIf=\"secondaryButtonView;else secondaryButton\">\n          <ng-container\n            *ngTemplateOutlet=\"secondaryButtonView;context:{ $implicit: user ?? group, composerId:composerId }\">\n          </ng-container>\n        </div>\n        <ng-template #secondaryButton>\n          <div class=\"cc-message-composer__attachbutton\">\n            <cometchat-popover\n              (cc-popover-outside-clicked)=\"handleOutsideClick()\"\n              [placement]=\"auxilaryPlacement\" [popoverStyle]=\"popoverStyle\">\n              <cometchat-action-sheet slot=\"content\"\n                [title]=\"localize('ADD_TO_CHAT')\" [actions]=\"composerActions\"\n                [actionSheetStyle]=\"actionSheetStyle\"\n                (cc-actionsheet-clicked)=\"handleActions($event)\"\n                [hideLayoutMode]=\"hideLayoutMode\"\n                >\n              </cometchat-action-sheet>\n              <cometchat-button #actionSheetRef slot=\"children\"\n                (cc-button-clicked)=\"openActionSheet($event)\"\n                [iconURL]=\"!showActionSheetItem || (showEmojiKeyboard && !showActionSheetItem)  ? attachmentIconURL  : closeButtonIconURL\"\n                [buttonStyle]=\"attachmentButtonStyle\"></cometchat-button>\n            </cometchat-popover>\n          </div>\n        </ng-template>\n      </div>\n\n      <div class=\"cc-message-composer__auxiliary\" data-slot=\"auxilaryView\">\n        <div class=\"cc-message-composer__custom-auxiliary-view\"\n          *ngIf=\"auxilaryButtonView\">\n          <ng-container\n            *ngTemplateOutlet=\"auxilaryButtonView;context:{ $implicit: user ?? group, composerId:composerId }\">\n          </ng-container>\n        </div>\n        <!-- AI Cards -->\n        <div class=\"cc-message-composer__stickerkeyboard\"\n          *ngIf=\"!auxilaryButtonView\">\n          <cometchat-popover (cc-popover-click)=\"openStickerKeyboard($event)\"\n            [popoverStyle]=\"aiPopover\" [placement]=\"auxilaryPlacement\">\n            <cometchat-ai-card [state]=\"smartReplyState\"\n              *ngIf=\"showSmartReply && !showActionSheetItemAI && !showAiBotList\"\n              slot=\"content\" [loadingStateText]=\"loadingStateText\"\n              [emptyStateText]=\"emptyStateText\"\n              [errorStateText]=\"errorStateText\">\n              <div slot=\"loadedView\" class=\"smart-replies-wrapper\">\n\n                <div class=\"cc-message-composer__smartreply-header\">\n                  <div class=\"cc-message-composer__back-button\">\n                    <cometchat-button\n                      *ngIf=\"repliesArray && repliesArray.length > 0 \"\n                      [iconURL]=\"backButtonIconURL\"\n                      (cc-button-clicked)=\"onAiBackButtonClick()\"\n                      [buttonStyle]=\"backButtonStyle()\">\n                    </cometchat-button>\n                  </div>\n                  <div class=\"cc-message-composer__smartreply-header-view\">\n                    <p>{{ localize(\"SUGGEST_A_REPLY\") }}</p>\n                  </div>\n                </div>\n\n                <div class=\"cc-message-composer__smartreply-content\">\n                  <smart-replies\n                    *ngIf=\"repliesArray && repliesArray.length > 0 \"\n                    [smartReplyStyle]=\"smartReplyStyle\" [replies]=\"repliesArray\"\n                    [closeIconURL]=\"''\" (cc-reply-clicked)=\"sendReply($event)\">\n                  </smart-replies>\n                </div>\n\n\n\n\n\n              </div>\n            </cometchat-ai-card>\n\n            <div *ngIf=\"showAiBotList  && !showActionSheetItemAI\"\n              slot=\"content\">\n              <div class=\"cc-message-composer__aibotlist\">\n                <cometchat-button *ngIf=\" aiBotList && aiBotList.length> 1 \"\n                  [iconURL]=\"backButtonIconURL\"\n                  (cc-button-clicked)=\"onAiBackButtonClick()\"\n                  [buttonStyle]=\"backButtonStyle()\">\n                </cometchat-button>\n                <p>{{ localize(\"COMETCHAT_ASK_AI_BOT\") }}</p>\n              </div>\n              <cometchat-action-sheet\n                *ngIf=\"showAiBotList  && !showActionSheetItemAI\" slot=\"content\"\n                [actions]=\"aiActionButtons\" [title]=\"localize('AI')\"\n                [actionSheetStyle]=\"aiActionSheetStyle\" [hideLayoutMode]=\"true\"\n                (cc-actionsheet-clicked)=\"handleActions($event)\">\n              </cometchat-action-sheet>\n            </div>\n\n            <cometchat-action-sheet *ngIf=\"showActionSheetItemAI\" slot=\"content\"\n              [actions]=\"buttons\" [title]=\"localize('AI')\"\n              [actionSheetStyle]=\"aiActionSheetStyle\" [hideLayoutMode]=\"true\"\n              (cc-actionsheet-clicked)=\"handleActions($event)\">\n            </cometchat-action-sheet>\n\n            <cometchat-button *ngIf=\"isAiEnabled\" [hoverText]=\"localize('AI')\"\n              slot=\"children\" #aiButtonRef\n              (cc-button-clicked)=\"openAiFeatures($event)\"\n              [iconURL]=\"!showAiFeatures ? aiIconURL : closeButtonIconURL\"\n              [buttonStyle]=\"stickerButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n\n        <div class=\"cc-message-composer__stickerkeyboard\"\n          *ngIf=\"enableStickerKeyboard && !auxilaryButtonView\">\n          <cometchat-popover (cc-popover-outside-clicked)=\"handleOutsideClick()\"\n            [popoverStyle]=\"stickerPopover\" [placement]=\"auxilaryPlacement\">\n            <stickers-keyboard slot=\"content\"\n              [stickerStyle]=\"stickerKeyboardStyle\"\n              (cc-sticker-clicked)=\"sendSticker($event)\">\n            </stickers-keyboard>\n            <cometchat-button [hoverText]=\"localize('STICKER')\" slot=\"children\"\n              #stickerButtonRef\n              (cc-button-clicked)=\"openStickerKeyboard($event)\"\n              [iconURL]=\" !showStickerKeyboard ? stickerButtonIconURL : closeButtonIconURL\"\n              [buttonStyle]=\"stickerButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n        <div class=\"cc-message-composer__emojikeyboard\"\n          *ngIf=\"!auxilaryButtonView\">\n          <cometchat-popover (cc-popover-outside-clicked)=\"handleOutsideClick()\"\n            [placement]=\"auxilaryPlacement\" [popoverStyle]=\"emojiPopover\">\n            <cometchat-emoji-keyboard slot=\"content\"\n              [emojiKeyboardStyle]=\"emojiKeyboardStyle\"\n              (cc-emoji-clicked)=\"appendEmoji($event)\">\n            </cometchat-emoji-keyboard>\n            <cometchat-button #emojiButtonRef [hoverText]=\"localize('EMOJI')\"\n              slot=\"children\" (cc-button-clicked)=\"openEmojiKeyboard($event)\"\n              [iconURL]=\" !showEmojiKeyboard  || (!showEmojiKeyboard && showActionSheetItem) ? emojiIconURL : closeButtonIconURL\"\n              [buttonStyle]=\"emojiButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n        <div class=\"cc-message-composer__mediarecorder\"\n          *ngIf=\"!hideVoiceRecording\">\n          <cometchat-popover (cc-popover-outside-clicked)=\"handleOutsideClick()\"\n            [popoverStyle]=\"mediaRecordedPopover\"\n            [placement]=\"auxilaryPlacement\">\n\n            <cometchat-media-recorder *ngIf=\"toggleMediaRecorded\"\n              [autoRecording]=\"true\" startIconText=\"\" stopIconText=\"\"\n              submitButtonIconText=\"\"\n              [submitButtonIconURL]=\"voiceRecordingSubmitIconURL\"\n              [startIconURL]=\"voiceRecordingStartIconURL\"\n              [stopIconURL]=\"voiceRecordingStopIconURL\"\n              [closeIconURL]=\"voiceRecordingCloseIconURL\"\n              (cc-media-recorder-submitted)=\"sendRecordedMedia($event)\"\n              (cc-media-recorder-closed)=\"closeMediaRecorder($event)\"\n              slot=\"content\"\n              [mediaPlayerStyle]=\"mediaRecorderStyle\"></cometchat-media-recorder>\n            <cometchat-icon-button [hoverText]=\"localize('VOICE_RECORDING')\"\n              slot=\"children\" #mediaRecordedRef\n              (cc-button-clicked)=\"openMediaRecorded($event)\"\n              [iconURL]=\" !toggleMediaRecorded ? voiceRecordingIconURL : closeButtonIconURL\"\n              [buttonStyle]=\"mediaRecorderButtonStyle\"></cometchat-icon-button>\n          </cometchat-popover>\n        </div>\n      </div>\n      <div data-slot=\"primaryView\">\n        <div *ngIf=\"sendButtonView;else sendButton\">\n          <ng-container\n            *ngTemplateOutlet=\"sendButtonView;context:{ item: user ?? group, composerId:composerId }\">\n          </ng-container>\n        </div>\n        <ng-template #sendButton>\n          <div class=\"cc-message-composer__sendbutton\"\n            *ngIf=\"showSendButton || hideLiveReaction\">\n            <cometchat-button [iconURL]=\"sendButtonIconURL\"\n              [buttonStyle]=\"sendButtonStyle\"\n              [hoverText]=\"localize('SEND_MESSAGE')\"\n              [disabled]=\"!showSendButton\"\n              (cc-button-clicked)=\"customSendMethod(messageText)\">\n            </cometchat-button>\n          </div>\n          <div class=\"cc-message-composer__livereaction\"\n            *ngIf=\"!hideLiveReaction && !showSendButton\">\n            <cometchat-button [iconURL]=\"LiveReactionIconURL\"\n              [hoverText]=\"localize('LIVE_REACTION')\"\n              [buttonStyle]=\"liveReactionStyle\"\n              (cc-button-clicked)=\"sendReaction()\"></cometchat-button>\n          </div>\n        </ng-template>\n      </div>\n    </cometchat-text-input>\n  </div>\n</div>\n\n<input class=\"cc-message-composer__mediainput\" #inputElement\n  (change)=\"inputChangeHandler($event)\" />\n<cometchat-backdrop *ngIf=\"showCreatePolls\" [backdropStyle]=\"backdropStyle\">\n  <create-poll [user]=\"user\" [group]=\"group\"\n    (cc-close-clicked)=\"closeCreatePolls()\"\n    [createPollStyle]=\"createPollStyle\"></create-poll>\n</cometchat-backdrop>\n", styles: [".cc-message-composer__sendbutton,.cc-message-composer__livereaction{margin:0 5px}.cc-message-composer__wrapper{height:100%;width:100%;position:relative;padding:14px 16px}.cc-message-composer__header-view{height:-moz-fit-content;height:fit-content;width:100%;bottom:120%;padding:0 0 1px}.cc-message-composer__mediainput{display:none}.cc-message-composer__auxiliary{display:flex;gap:8px}.cc-message-composer__smartreply-header{width:100%;display:flex;align-items:center;position:absolute;padding:10px;top:0;z-index:1}.cc-message-composer__back-button{margin-left:2%}.cc-message-composer__smartreply-header-view{margin-left:14%}.cc-message-composer__smartreply-content{max-height:200px}.cc-message-composer__aibotlist{display:flex;padding:10px;align-items:center;gap:45px;font-size:medium}.cc-messagecomposer__mentions{max-height:196px;min-height:28px;overflow:hidden;position:absolute;width:100%;left:50%;transform:translate(-50%,-100%);z-index:2;display:flex;padding:0 16px 1px 14px;box-sizing:border-box}.cc-messagecomposer__mentions cometchat-user-member-wrapper{max-height:196px;min-height:28px;overflow:hidden;width:100%;box-sizing:border-box;min-height:45px}.cc-messagecomposer__mentions::-webkit-scrollbar{display:none}.cc-messagecomposer__mentions-limit-exceeded{margin-top:20px;left:2px;position:relative;padding-left:13px;background-color:#fff}*{box-sizing:border-box}cometchat-ai-card{height:100%;width:100%;display:flex;border-radius:8px;overflow-y:auto;justify-content:center;align-items:center}cometchat-popover{position:relative}\n"], components: [{ type: CometChatUserMemberWrapperComponent, selector: "cometchat-user-member-wrapper", inputs: ["userMemberListType", "onItemClick", "listItemView", "avatarStyle", "statusIndicatorStyle", "searchKeyword", "group", "subtitleView", "usersRequestBuilder", "disableUsersPresence", "userPresencePlacement", "hideSeperator", "loadingStateView", "onEmpty", "onError", "groupMemberRequestBuilder", "loadingIconUrl", "disableLoadingState"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageComposerComponent, decorators: [{
             type: Component,
             args: [{ selector: "cometchat-message-composer", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-message-composer__wrapper\" [ngStyle]=\"composerWrapperStyle()\">\n  <div class=\"cc-messagecomposer__mentions\" *ngIf=\"showListForMentions\"\n    #userMemberWrapperRef>\n    <cometchat-user-member-wrapper [userMemberListType]=\"userMemberListType\"\n      [onItemClick]=\"userMemberWrapperConfiguration.onItemClick || defaultMentionsItemClickHandler\"\n      [usersRequestBuilder]=\"usersRequestBuilder\"\n      [searchKeyword]=\"mentionsSearchTerm\"\n      [subtitleView]=\"userMemberWrapperConfiguration.subtitleView\"\n      [disableUsersPresence]=\"userMemberWrapperConfiguration.disableUsersPresence\"\n      [avatarStyle]=\"userMemberWrapperConfiguration.avatarStyle\"\n      [listItemView]=\"userMemberWrapperConfiguration.listItemView\"\n      [statusIndicatorStyle]=\"userMemberWrapperConfiguration.statusIndicatorStyle\"\n      [userPresencePlacement]=\"userMemberWrapperConfiguration.userPresencePlacement\"\n      [hideSeperator]=\"userMemberWrapperConfiguration.hideSeparator\"\n      [loadingStateView]=\"userMemberWrapperConfiguration.loadingStateView\"\n      [onEmpty]=\"defaultOnEmptyForMentions\"\n      [loadingIconUrl]=\"userMemberWrapperConfiguration.loadingIconURL\"\n      [group]=\"group\" [groupMemberRequestBuilder]=\"groupMembersRequestBuilder\"\n      [disableLoadingState]=\"true\"\n      [onError]=\"defaultOnEmptyForMentions\"></cometchat-user-member-wrapper>\n\n    <div *ngIf=\"showMentionsCountWarning\"\n      class=\"cc-messagecomposer__mentions-limit-exceeded\">\n      <cometchat-icon-button\n        [text]=\"mentionsWarningText || localize('MENTIONS_LIMIT_WARNING_MESSAGE')\"\n        [iconURL]=\"InfoSimpleIcon\"\n        [buttonStyle]=\"getMentionInfoIconStyle()\"></cometchat-icon-button>\n    </div>\n\n  </div>\n  <div class=\"cc-message-composer__header-view\"\n    *ngIf=\"headerView; else messagePreview\">\n    <ng-container\n      *ngTemplateOutlet=\"headerView;context:{ $implicit: user ?? group, composerId:composerId }\">\n    </ng-container>\n  </div>\n  <ng-template #messagePreview>\n    <div class=\"cc-message-composer__header-view\" *ngIf=\"showPreview\">\n      <cometchat-preview [previewStyle]=\"previewStyle\"\n        [previewSubtitle]=\"editPreviewText\"\n        (cc-preview-close-clicked)=\"closePreview()\"> </cometchat-preview>\n    </div>\n  </ng-template>\n  <div class=\"cc-message-composer__input\">\n\n    <cometchat-text-input (cc-text-input-entered)=\"sendMessageOnEnter($event)\"\n      #inputRef [text]=\"text\"\n      (cc-text-input-changed)=\"messageInputChanged($event)\"\n      [textInputStyle]=\"textInputStyle\" [placeholderText]=\"placeholderText\"\n      [auxiliaryButtonAlignment]=\"auxiliaryButtonsAlignment\"\n      [textFormatters]=\"textFormatters\">\n\n      <div data-slot=\"secondaryView\">\n        <div *ngIf=\"secondaryButtonView;else secondaryButton\">\n          <ng-container\n            *ngTemplateOutlet=\"secondaryButtonView;context:{ $implicit: user ?? group, composerId:composerId }\">\n          </ng-container>\n        </div>\n        <ng-template #secondaryButton>\n          <div class=\"cc-message-composer__attachbutton\">\n            <cometchat-popover\n              (cc-popover-outside-clicked)=\"handleOutsideClick()\"\n              [placement]=\"auxilaryPlacement\" [popoverStyle]=\"popoverStyle\">\n              <cometchat-action-sheet slot=\"content\"\n                [title]=\"localize('ADD_TO_CHAT')\" [actions]=\"composerActions\"\n                [actionSheetStyle]=\"actionSheetStyle\"\n                (cc-actionsheet-clicked)=\"handleActions($event)\"\n                [hideLayoutMode]=\"hideLayoutMode\"\n                >\n              </cometchat-action-sheet>\n              <cometchat-button #actionSheetRef slot=\"children\"\n                (cc-button-clicked)=\"openActionSheet($event)\"\n                [iconURL]=\"!showActionSheetItem || (showEmojiKeyboard && !showActionSheetItem)  ? attachmentIconURL  : closeButtonIconURL\"\n                [buttonStyle]=\"attachmentButtonStyle\"></cometchat-button>\n            </cometchat-popover>\n          </div>\n        </ng-template>\n      </div>\n\n      <div class=\"cc-message-composer__auxiliary\" data-slot=\"auxilaryView\">\n        <div class=\"cc-message-composer__custom-auxiliary-view\"\n          *ngIf=\"auxilaryButtonView\">\n          <ng-container\n            *ngTemplateOutlet=\"auxilaryButtonView;context:{ $implicit: user ?? group, composerId:composerId }\">\n          </ng-container>\n        </div>\n        <!-- AI Cards -->\n        <div class=\"cc-message-composer__stickerkeyboard\"\n          *ngIf=\"!auxilaryButtonView\">\n          <cometchat-popover (cc-popover-click)=\"openStickerKeyboard($event)\"\n            [popoverStyle]=\"aiPopover\" [placement]=\"auxilaryPlacement\">\n            <cometchat-ai-card [state]=\"smartReplyState\"\n              *ngIf=\"showSmartReply && !showActionSheetItemAI && !showAiBotList\"\n              slot=\"content\" [loadingStateText]=\"loadingStateText\"\n              [emptyStateText]=\"emptyStateText\"\n              [errorStateText]=\"errorStateText\">\n              <div slot=\"loadedView\" class=\"smart-replies-wrapper\">\n\n                <div class=\"cc-message-composer__smartreply-header\">\n                  <div class=\"cc-message-composer__back-button\">\n                    <cometchat-button\n                      *ngIf=\"repliesArray && repliesArray.length > 0 \"\n                      [iconURL]=\"backButtonIconURL\"\n                      (cc-button-clicked)=\"onAiBackButtonClick()\"\n                      [buttonStyle]=\"backButtonStyle()\">\n                    </cometchat-button>\n                  </div>\n                  <div class=\"cc-message-composer__smartreply-header-view\">\n                    <p>{{ localize(\"SUGGEST_A_REPLY\") }}</p>\n                  </div>\n                </div>\n\n                <div class=\"cc-message-composer__smartreply-content\">\n                  <smart-replies\n                    *ngIf=\"repliesArray && repliesArray.length > 0 \"\n                    [smartReplyStyle]=\"smartReplyStyle\" [replies]=\"repliesArray\"\n                    [closeIconURL]=\"''\" (cc-reply-clicked)=\"sendReply($event)\">\n                  </smart-replies>\n                </div>\n\n\n\n\n\n              </div>\n            </cometchat-ai-card>\n\n            <div *ngIf=\"showAiBotList  && !showActionSheetItemAI\"\n              slot=\"content\">\n              <div class=\"cc-message-composer__aibotlist\">\n                <cometchat-button *ngIf=\" aiBotList && aiBotList.length> 1 \"\n                  [iconURL]=\"backButtonIconURL\"\n                  (cc-button-clicked)=\"onAiBackButtonClick()\"\n                  [buttonStyle]=\"backButtonStyle()\">\n                </cometchat-button>\n                <p>{{ localize(\"COMETCHAT_ASK_AI_BOT\") }}</p>\n              </div>\n              <cometchat-action-sheet\n                *ngIf=\"showAiBotList  && !showActionSheetItemAI\" slot=\"content\"\n                [actions]=\"aiActionButtons\" [title]=\"localize('AI')\"\n                [actionSheetStyle]=\"aiActionSheetStyle\" [hideLayoutMode]=\"true\"\n                (cc-actionsheet-clicked)=\"handleActions($event)\">\n              </cometchat-action-sheet>\n            </div>\n\n            <cometchat-action-sheet *ngIf=\"showActionSheetItemAI\" slot=\"content\"\n              [actions]=\"buttons\" [title]=\"localize('AI')\"\n              [actionSheetStyle]=\"aiActionSheetStyle\" [hideLayoutMode]=\"true\"\n              (cc-actionsheet-clicked)=\"handleActions($event)\">\n            </cometchat-action-sheet>\n\n            <cometchat-button *ngIf=\"isAiEnabled\" [hoverText]=\"localize('AI')\"\n              slot=\"children\" #aiButtonRef\n              (cc-button-clicked)=\"openAiFeatures($event)\"\n              [iconURL]=\"!showAiFeatures ? aiIconURL : closeButtonIconURL\"\n              [buttonStyle]=\"stickerButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n\n        <div class=\"cc-message-composer__stickerkeyboard\"\n          *ngIf=\"enableStickerKeyboard && !auxilaryButtonView\">\n          <cometchat-popover (cc-popover-outside-clicked)=\"handleOutsideClick()\"\n            [popoverStyle]=\"stickerPopover\" [placement]=\"auxilaryPlacement\">\n            <stickers-keyboard slot=\"content\"\n              [stickerStyle]=\"stickerKeyboardStyle\"\n              (cc-sticker-clicked)=\"sendSticker($event)\">\n            </stickers-keyboard>\n            <cometchat-button [hoverText]=\"localize('STICKER')\" slot=\"children\"\n              #stickerButtonRef\n              (cc-button-clicked)=\"openStickerKeyboard($event)\"\n              [iconURL]=\" !showStickerKeyboard ? stickerButtonIconURL : closeButtonIconURL\"\n              [buttonStyle]=\"stickerButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n        <div class=\"cc-message-composer__emojikeyboard\"\n          *ngIf=\"!auxilaryButtonView\">\n          <cometchat-popover (cc-popover-outside-clicked)=\"handleOutsideClick()\"\n            [placement]=\"auxilaryPlacement\" [popoverStyle]=\"emojiPopover\">\n            <cometchat-emoji-keyboard slot=\"content\"\n              [emojiKeyboardStyle]=\"emojiKeyboardStyle\"\n              (cc-emoji-clicked)=\"appendEmoji($event)\">\n            </cometchat-emoji-keyboard>\n            <cometchat-button #emojiButtonRef [hoverText]=\"localize('EMOJI')\"\n              slot=\"children\" (cc-button-clicked)=\"openEmojiKeyboard($event)\"\n              [iconURL]=\" !showEmojiKeyboard  || (!showEmojiKeyboard && showActionSheetItem) ? emojiIconURL : closeButtonIconURL\"\n              [buttonStyle]=\"emojiButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n        <div class=\"cc-message-composer__mediarecorder\"\n          *ngIf=\"!hideVoiceRecording\">\n          <cometchat-popover (cc-popover-outside-clicked)=\"handleOutsideClick()\"\n            [popoverStyle]=\"mediaRecordedPopover\"\n            [placement]=\"auxilaryPlacement\">\n\n            <cometchat-media-recorder *ngIf=\"toggleMediaRecorded\"\n              [autoRecording]=\"true\" startIconText=\"\" stopIconText=\"\"\n              submitButtonIconText=\"\"\n              [submitButtonIconURL]=\"voiceRecordingSubmitIconURL\"\n              [startIconURL]=\"voiceRecordingStartIconURL\"\n              [stopIconURL]=\"voiceRecordingStopIconURL\"\n              [closeIconURL]=\"voiceRecordingCloseIconURL\"\n              (cc-media-recorder-submitted)=\"sendRecordedMedia($event)\"\n              (cc-media-recorder-closed)=\"closeMediaRecorder($event)\"\n              slot=\"content\"\n              [mediaPlayerStyle]=\"mediaRecorderStyle\"></cometchat-media-recorder>\n            <cometchat-icon-button [hoverText]=\"localize('VOICE_RECORDING')\"\n              slot=\"children\" #mediaRecordedRef\n              (cc-button-clicked)=\"openMediaRecorded($event)\"\n              [iconURL]=\" !toggleMediaRecorded ? voiceRecordingIconURL : closeButtonIconURL\"\n              [buttonStyle]=\"mediaRecorderButtonStyle\"></cometchat-icon-button>\n          </cometchat-popover>\n        </div>\n      </div>\n      <div data-slot=\"primaryView\">\n        <div *ngIf=\"sendButtonView;else sendButton\">\n          <ng-container\n            *ngTemplateOutlet=\"sendButtonView;context:{ item: user ?? group, composerId:composerId }\">\n          </ng-container>\n        </div>\n        <ng-template #sendButton>\n          <div class=\"cc-message-composer__sendbutton\"\n            *ngIf=\"showSendButton || hideLiveReaction\">\n            <cometchat-button [iconURL]=\"sendButtonIconURL\"\n              [buttonStyle]=\"sendButtonStyle\"\n              [hoverText]=\"localize('SEND_MESSAGE')\"\n              [disabled]=\"!showSendButton\"\n              (cc-button-clicked)=\"customSendMethod(messageText)\">\n            </cometchat-button>\n          </div>\n          <div class=\"cc-message-composer__livereaction\"\n            *ngIf=\"!hideLiveReaction && !showSendButton\">\n            <cometchat-button [iconURL]=\"LiveReactionIconURL\"\n              [hoverText]=\"localize('LIVE_REACTION')\"\n              [buttonStyle]=\"liveReactionStyle\"\n              (cc-button-clicked)=\"sendReaction()\"></cometchat-button>\n          </div>\n        </ng-template>\n      </div>\n    </cometchat-text-input>\n  </div>\n</div>\n\n<input class=\"cc-message-composer__mediainput\" #inputElement\n  (change)=\"inputChangeHandler($event)\" />\n<cometchat-backdrop *ngIf=\"showCreatePolls\" [backdropStyle]=\"backdropStyle\">\n  <create-poll [user]=\"user\" [group]=\"group\"\n    (cc-close-clicked)=\"closeCreatePolls()\"\n    [createPollStyle]=\"createPollStyle\"></create-poll>\n</cometchat-backdrop>\n", styles: [".cc-message-composer__sendbutton,.cc-message-composer__livereaction{margin:0 5px}.cc-message-composer__wrapper{height:100%;width:100%;position:relative;padding:14px 16px}.cc-message-composer__header-view{height:-moz-fit-content;height:fit-content;width:100%;bottom:120%;padding:0 0 1px}.cc-message-composer__mediainput{display:none}.cc-message-composer__auxiliary{display:flex;gap:8px}.cc-message-composer__smartreply-header{width:100%;display:flex;align-items:center;position:absolute;padding:10px;top:0;z-index:1}.cc-message-composer__back-button{margin-left:2%}.cc-message-composer__smartreply-header-view{margin-left:14%}.cc-message-composer__smartreply-content{max-height:200px}.cc-message-composer__aibotlist{display:flex;padding:10px;align-items:center;gap:45px;font-size:medium}.cc-messagecomposer__mentions{max-height:196px;min-height:28px;overflow:hidden;position:absolute;width:100%;left:50%;transform:translate(-50%,-100%);z-index:2;display:flex;padding:0 16px 1px 14px;box-sizing:border-box}.cc-messagecomposer__mentions cometchat-user-member-wrapper{max-height:196px;min-height:28px;overflow:hidden;width:100%;box-sizing:border-box;min-height:45px}.cc-messagecomposer__mentions::-webkit-scrollbar{display:none}.cc-messagecomposer__mentions-limit-exceeded{margin-top:20px;left:2px;position:relative;padding-left:13px;background-color:#fff}*{box-sizing:border-box}cometchat-ai-card{height:100%;width:100%;display:flex;border-radius:8px;overflow-y:auto;justify-content:center;align-items:center}cometchat-popover{position:relative}\n"] }]
@@ -15256,6 +15312,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], customSoundForMessage: [{
                 type: Input
+            }], customSoundForMessages: [{
+                type: Input
             }], disableTypingEvents: [{
                 type: Input
             }], text: [{
@@ -15659,7 +15717,7 @@ class CometChatThreadedMessagesComponent {
     }
 }
 CometChatThreadedMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatThreadedMessagesComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
-CometChatThreadedMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatThreadedMessagesComponent, selector: "cometchat-threaded-messages", inputs: { onClose: "onClose", onError: "onError", parentMessage: "parentMessage", title: "title", closeIconURL: "closeIconURL", bubbleView: "bubbleView", messageActionView: "messageActionView", messageListConfiguration: "messageListConfiguration", userMemberWrapperConfiguration: "userMemberWrapperConfiguration", messageComposerConfiguration: "messageComposerConfiguration", threadedMessagesStyle: "threadedMessagesStyle", hideMessageComposer: "hideMessageComposer", messageComposerView: "messageComposerView", messageListView: "messageListView", disableSoundForMessages: "disableSoundForMessages" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-threaded-messages__wrapper\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-threaded-messages__header\">\n    <div class=\"cc-threaded-messages__title\">\n      <cometchat-label [text]=\"title\"\n        [labelStyle]=\"titleStyle\"></cometchat-label>\n    </div>\n    <div class=\"cc-threaded-messages__close\">\n      <cometchat-button [iconURL]=\"closeIconURL\" [buttonStyle]=\"buttonStyle\"\n        (cc-button-clicked)=\"closeView()\"></cometchat-button>\n    </div>\n  </div>\n  <div class=\"cc-threaded-messages__bubble-view\">\n    <ng-container\n      *ngTemplateOutlet=\"bubbleView; context:{ $implicit: parentMessage }\">\n    </ng-container>\n  </div>\n  <div class=\"cc-threaded-messages__action-view\">\n    <ng-container\n      *ngTemplateOutlet=\"messageActionView; context:{ $implicit: parentMessage }\">\n    </ng-container>\n    <cometchat-button *ngIf=\"!messageActionView\" [text]=\"getThreadCount()\"\n      [buttonStyle]=\"actionButtonStyle\"></cometchat-button>\n  </div>\n  <div class=\"cc-threaded-messages__list\" *ngIf=\"!messageListView\">\n    <cometchat-message-list #messageListRef\n      [disableReactions]=\"messageListConfiguration?.disableReactions!\"\n      [emojiKeyboardStyle]=\"messageListConfiguration?.emojiKeyboardStyle!\"\n      [reactionsConfiguration]=\"messageListConfiguration?.reactionsConfiguration!\"\n      [threadIndicatorIcon]=\"messageListConfiguration?.threadIndicatorIcon!\"\n      [parentMessageId]=\"parentMessage?.getId()\"\n      [emptyStateView]=\"messageListConfiguration.emptyStateView\"\n      [loadingStateView]=\"messageListConfiguration.loadingStateView\"\n      [user]=\"user\" [group]=\"group\"\n      [errorStateView]=\"messageListConfiguration.errorStateView\"\n      [disableReceipt]=\"messageListConfiguration.disableReceipt\"\n      [hideReceipt]=\"messageListConfiguration.hideReceipt\"\n      [readIcon]=\"messageListConfiguration.readIcon\"\n      [deliveredIcon]=\"messageListConfiguration.deliveredIcon\"\n      [sentIcon]=\"messageListConfiguration.sentIcon\"\n      [waitIcon]=\"messageListConfiguration.waitIcon\"\n      [loadingIconURL]=\"messageListConfiguration.loadingIconURL\"\n      [errorIcon]=\"messageListConfiguration.errorIcon\"\n      [alignment]=\"messageListConfiguration.alignment\"\n      [showAvatar]=\"messageListConfiguration.showAvatar\"\n      [datePattern]=\"messageListConfiguration.datePattern\"\n      [timestampAlignment]=\"messageListConfiguration.timestampAlignment\"\n      [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n      [messageTypes]=\"messageListConfiguration.templates\"\n      [templates]=\"messageListConfiguration.templates\"\n      [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder || requestBuilder\"\n      [thresholdValue]=\"messageListConfiguration.thresholdValue\"\n      [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick\"\n      [headerView]=\"messageListConfiguration.headerView\"\n      [footerView]=\"messageListConfiguration.footerView\"\n      [avatarStyle]=\"messageListConfiguration.avatarStyle\"\n      [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\"\n      [messageListStyle]=\"messageListConfiguration.messageListStyle\"\n      [onError]=\"messageListConfiguration.onError\"\n      [hideError]=\"messageListConfiguration.hideError\"\n      [hideDateSeparator]=\"messageListConfiguration.hideDateSeparator\"\n      [disableSoundForMessages]=\"disableSoundForMessages\"\n      [disableMentions]=\"messageListConfiguration.disableMentions\"\n      [textFormatters]=\"messageListConfiguration?.textFormatters\">\n    </cometchat-message-list>\n  </div>\n  <ng-container *ngIf=\"messageListView\">\n    <ng-container\n      *ngTemplateOutlet=\"messageListView;context:{  user: user, group: group,parentMessage:parentMessage }\">\n    </ng-container>\n  </ng-container>\n  <div class=\"cc-threaded-messages__composer\"\n    *ngIf=\"!hideMessageComposer && !messageComposerView\">\n    <cometchat-message-composer #messageComposerRef\n      [parentMessageId]=\"parentMessage?.getId()\" [user]=\"user\" [group]=\"group\"\n      [text]=\"messageComposerConfiguration.text\"\n      [headerView]=\"messageComposerConfiguration.headerView\"\n      [onTextChange]=\"messageComposerConfiguration.onTextChange\"\n      [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n      [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\"\n      [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\"\n      [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\"\n      [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n      [sendButtonView]=\"messageComposerConfiguration.sendButtonView\"\n      [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\"\n      [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\"\n      [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\"\n      [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n      [sendButtonIconURL]=\"messageComposerConfiguration.sendButtonIconURL\"\n      [onError]=\"messageComposerConfiguration.onError\"\n      [actionSheetStyle]=\"messageComposerConfiguration.actionSheetStyle\"\n      [userMemberWrapperConfiguration]=\"messageComposerConfiguration.userMemberWrapperConfiguration\"\n      [textFormatters]=\"messageComposerConfiguration?.textFormatters\"\n      [disableMentions]=\"messageComposerConfiguration.disableMentions\"\n      [mentionsWarningText]=\"messageComposerConfiguration?.mentionsWarningText\"\n      [mentionsWarningStyle]=\"messageComposerConfiguration?.mentionsWarningStyle\"\n      [emojiIconURL]=\"messageComposerConfiguration.emojiIconURL\"\n      [AIIconURL]=\"messageComposerConfiguration.AIIconURL\"\n      [hideVoiceRecording]=\"messageComposerConfiguration.hideVoiceRecording\"\n      [hideLayoutMode]=\"messageComposerConfiguration.hideLayoutMode\"\n      [AIOptionsStyle]=\"messageComposerConfiguration.AIOptionsStyle\"\n      [backdropStyle]=\"messageComposerConfiguration.backdropStyle\"\n      [mediaRecorderStyle]=\"messageComposerConfiguration.mediaRecorderStyle\"\n      [voiceRecordingCloseIconURL]=\"messageComposerConfiguration.voiceRecordingCloseIconURL\"\n      [voiceRecordingStartIconURL]=\"messageComposerConfiguration.voiceRecordingStartIconURL\"\n      [voiceRecordingStopIconURL]=\"messageComposerConfiguration.voiceRecordingStopIconURL\"\n      [voiceRecordingSubmitIconURL]=\"messageComposerConfiguration.voiceRecordingSubmitIconURL\"\n      [disableSoundForMessages]=\"disableSoundForMessages\"\n      >\n    </cometchat-message-composer>\n  </div>\n  <ng-container *ngIf=\"!hideMessageComposer && messageComposerView\">\n    <ng-container\n      *ngTemplateOutlet=\"messageComposerView;context:{  user: user, group: group,parentMessage:parentMessage }\">\n    </ng-container>\n  </ng-container>\n\n</div>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-threaded-messages__wrapper{display:flex;flex-direction:column;height:100%;overflow-y:auto}.cc-threaded-messages__header{height:8%;width:100%;display:flex;padding:16px;align-items:flex-start}.cc-threaded-messages__close{display:flex;align-items:center}.cc-threaded-messages__title{display:flex;align-items:center;justify-content:center;width:100%}.cc-threaded-messages__bubble-view{width:100%}.cc-threaded-messages__header{flex:0 0 auto}.cc-threaded-messages__list{flex:1 1 auto;min-height:65%}.cc-threaded-messages__composer{flex:0 0 auto;min-height:80px}\n"], components: [{ type: CometChatMessageListComponent, selector: "cometchat-message-list", inputs: ["hideError", "hideDateSeparator", "errorStateView", "loadingStateView", "emptyStateView", "errorStateText", "emptyStateText", "loadingIconURL", "user", "group", "disableReceipt", "hideReceipt", "disableSoundForMessages", "customSoundForMessages", "readIcon", "deliveredIcon", "sentIcon", "waitIcon", "errorIcon", "aiErrorIcon", "aiEmptyIcon", "alignment", "showAvatar", "datePattern", "timestampAlignment", "DateSeparatorPattern", "templates", "messagesRequestBuilder", "newMessageIndicatorText", "scrollToBottomOnNewMessages", "thresholdValue", "unreadMessageThreshold", "reactionsConfiguration", "disableReactions", "emojiKeyboardStyle", "apiConfiguration", "onThreadRepliesClick", "headerView", "footerView", "parentMessageId", "threadIndicatorIcon", "avatarStyle", "backdropStyle", "dateSeparatorStyle", "messageListStyle", "onError", "messageInformationConfiguration", "disableMentions", "textFormatters"] }, { type: CometChatMessageComposerComponent, selector: "cometchat-message-composer", inputs: ["user", "group", "disableSoundForMessages", "customSoundForMessage", "disableTypingEvents", "text", "placeholderText", "headerView", "onTextChange", "attachmentIconURL", "attachmentOptions", "secondaryButtonView", "auxilaryButtonView", "auxiliaryButtonsAlignment", "sendButtonView", "parentMessageId", "hideLiveReaction", "LiveReactionIconURL", "backButtonIconURL", "mentionsWarningText", "mentionsWarningStyle", "messageComposerStyle", "onSendButtonClick", "onError", "backdropStyle", "actionSheetStyle", "aiActionSheetStyle", "hideVoiceRecording", "mediaRecorderStyle", "aiOptionsStyle", "aiIconURL", "voiceRecordingIconURL", "voiceRecordingCloseIconURL", "voiceRecordingStartIconURL", "voiceRecordingStopIconURL", "voiceRecordingSubmitIconURL", "hideLayoutMode", "emojiIconURL", "userMemberWrapperConfiguration", "disableMentions", "textFormatters"], outputs: ["childEvent"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CometChatThreadedMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatThreadedMessagesComponent, selector: "cometchat-threaded-messages", inputs: { onClose: "onClose", onError: "onError", parentMessage: "parentMessage", title: "title", closeIconURL: "closeIconURL", bubbleView: "bubbleView", messageActionView: "messageActionView", messageListConfiguration: "messageListConfiguration", userMemberWrapperConfiguration: "userMemberWrapperConfiguration", messageComposerConfiguration: "messageComposerConfiguration", threadedMessagesStyle: "threadedMessagesStyle", hideMessageComposer: "hideMessageComposer", messageComposerView: "messageComposerView", messageListView: "messageListView", disableSoundForMessages: "disableSoundForMessages" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-threaded-messages__wrapper\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-threaded-messages__header\">\n    <div class=\"cc-threaded-messages__title\">\n      <cometchat-label [text]=\"title\"\n        [labelStyle]=\"titleStyle\"></cometchat-label>\n    </div>\n    <div class=\"cc-threaded-messages__close\">\n      <cometchat-button [iconURL]=\"closeIconURL\" [buttonStyle]=\"buttonStyle\"\n        (cc-button-clicked)=\"closeView()\"></cometchat-button>\n    </div>\n  </div>\n  <div class=\"cc-threaded-messages__bubble-view\">\n    <ng-container\n      *ngTemplateOutlet=\"bubbleView; context:{ $implicit: parentMessage }\">\n    </ng-container>\n  </div>\n  <div class=\"cc-threaded-messages__action-view\">\n    <ng-container\n      *ngTemplateOutlet=\"messageActionView; context:{ $implicit: parentMessage }\">\n    </ng-container>\n    <cometchat-button *ngIf=\"!messageActionView\" [text]=\"getThreadCount()\"\n      [buttonStyle]=\"actionButtonStyle\"></cometchat-button>\n  </div>\n  <div class=\"cc-threaded-messages__list\" *ngIf=\"!messageListView\">\n    <cometchat-message-list #messageListRef\n      [disableReactions]=\"messageListConfiguration?.disableReactions!\"\n      [emojiKeyboardStyle]=\"messageListConfiguration?.emojiKeyboardStyle!\"\n      [reactionsConfiguration]=\"messageListConfiguration?.reactionsConfiguration!\"\n      [threadIndicatorIcon]=\"messageListConfiguration?.threadIndicatorIcon!\"\n      [parentMessageId]=\"parentMessage?.getId()\"\n      [emptyStateView]=\"messageListConfiguration.emptyStateView\"\n      [loadingStateView]=\"messageListConfiguration.loadingStateView\"\n      [user]=\"user\" [group]=\"group\"\n      [errorStateView]=\"messageListConfiguration.errorStateView\"\n      [disableReceipt]=\"messageListConfiguration.disableReceipt\"\n      [hideReceipt]=\"messageListConfiguration.hideReceipt\"\n      [readIcon]=\"messageListConfiguration.readIcon\"\n      [deliveredIcon]=\"messageListConfiguration.deliveredIcon\"\n      [sentIcon]=\"messageListConfiguration.sentIcon\"\n      [waitIcon]=\"messageListConfiguration.waitIcon\"\n      [loadingIconURL]=\"messageListConfiguration.loadingIconURL\"\n      [errorIcon]=\"messageListConfiguration.errorIcon\"\n      [alignment]=\"messageListConfiguration.alignment\"\n      [showAvatar]=\"messageListConfiguration.showAvatar\"\n      [datePattern]=\"messageListConfiguration.datePattern\"\n      [timestampAlignment]=\"messageListConfiguration.timestampAlignment\"\n      [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n      [messageTypes]=\"messageListConfiguration.templates\"\n      [templates]=\"messageListConfiguration.templates\"\n      [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder || requestBuilder\"\n      [thresholdValue]=\"messageListConfiguration.thresholdValue\"\n      [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick\"\n      [headerView]=\"messageListConfiguration.headerView\"\n      [footerView]=\"messageListConfiguration.footerView\"\n      [avatarStyle]=\"messageListConfiguration.avatarStyle\"\n      [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\"\n      [messageListStyle]=\"messageListConfiguration.messageListStyle\"\n      [onError]=\"messageListConfiguration.onError\"\n      [hideError]=\"messageListConfiguration.hideError\"\n      [hideDateSeparator]=\"messageListConfiguration.hideDateSeparator\"\n      [disableSoundForMessages]=\"disableSoundForMessages\"\n      [disableMentions]=\"messageListConfiguration.disableMentions\"\n      [textFormatters]=\"messageListConfiguration?.textFormatters\">\n    </cometchat-message-list>\n  </div>\n  <ng-container *ngIf=\"messageListView\">\n    <ng-container\n      *ngTemplateOutlet=\"messageListView;context:{  user: user, group: group,parentMessage:parentMessage }\">\n    </ng-container>\n  </ng-container>\n  <div class=\"cc-threaded-messages__composer\"\n    *ngIf=\"!hideMessageComposer && !messageComposerView\">\n    <cometchat-message-composer #messageComposerRef\n      [parentMessageId]=\"parentMessage?.getId()\" [user]=\"user\" [group]=\"group\"\n      [text]=\"messageComposerConfiguration.text\"\n      [headerView]=\"messageComposerConfiguration.headerView\"\n      [onTextChange]=\"messageComposerConfiguration.onTextChange\"\n      [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n      [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\"\n      [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\"\n      [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\"\n      [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n      [sendButtonView]=\"messageComposerConfiguration.sendButtonView\"\n      [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\"\n      [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\"\n      [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\"\n      [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n      [sendButtonIconURL]=\"messageComposerConfiguration.sendButtonIconURL\"\n      [onError]=\"messageComposerConfiguration.onError\"\n      [actionSheetStyle]=\"messageComposerConfiguration.actionSheetStyle\"\n      [userMemberWrapperConfiguration]=\"messageComposerConfiguration.userMemberWrapperConfiguration\"\n      [textFormatters]=\"messageComposerConfiguration?.textFormatters\"\n      [disableMentions]=\"messageComposerConfiguration.disableMentions\"\n      [mentionsWarningText]=\"messageComposerConfiguration?.mentionsWarningText\"\n      [mentionsWarningStyle]=\"messageComposerConfiguration?.mentionsWarningStyle\"\n      [emojiIconURL]=\"messageComposerConfiguration.emojiIconURL\"\n      [AIIconURL]=\"messageComposerConfiguration.AIIconURL\"\n      [hideVoiceRecording]=\"messageComposerConfiguration.hideVoiceRecording\"\n      [hideLayoutMode]=\"messageComposerConfiguration.hideLayoutMode\"\n      [AIOptionsStyle]=\"messageComposerConfiguration.AIOptionsStyle\"\n      [backdropStyle]=\"messageComposerConfiguration.backdropStyle\"\n      [mediaRecorderStyle]=\"messageComposerConfiguration.mediaRecorderStyle\"\n      [voiceRecordingCloseIconURL]=\"messageComposerConfiguration.voiceRecordingCloseIconURL\"\n      [voiceRecordingStartIconURL]=\"messageComposerConfiguration.voiceRecordingStartIconURL\"\n      [voiceRecordingStopIconURL]=\"messageComposerConfiguration.voiceRecordingStopIconURL\"\n      [voiceRecordingSubmitIconURL]=\"messageComposerConfiguration.voiceRecordingSubmitIconURL\"\n      [disableSoundForMessages]=\"disableSoundForMessages\"\n      >\n    </cometchat-message-composer>\n  </div>\n  <ng-container *ngIf=\"!hideMessageComposer && messageComposerView\">\n    <ng-container\n      *ngTemplateOutlet=\"messageComposerView;context:{  user: user, group: group,parentMessage:parentMessage }\">\n    </ng-container>\n  </ng-container>\n\n</div>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-threaded-messages__wrapper{display:flex;flex-direction:column;height:100%;overflow-y:auto}.cc-threaded-messages__header{height:8%;width:100%;display:flex;padding:16px;align-items:flex-start}.cc-threaded-messages__close{display:flex;align-items:center}.cc-threaded-messages__title{display:flex;align-items:center;justify-content:center;width:100%}.cc-threaded-messages__bubble-view{width:100%}.cc-threaded-messages__header{flex:0 0 auto}.cc-threaded-messages__list{flex:1 1 auto;min-height:65%}.cc-threaded-messages__composer{flex:0 0 auto;min-height:80px}\n"], components: [{ type: CometChatMessageListComponent, selector: "cometchat-message-list", inputs: ["hideError", "hideDateSeparator", "errorStateView", "loadingStateView", "emptyStateView", "errorStateText", "emptyStateText", "loadingIconURL", "user", "group", "disableReceipt", "hideReceipt", "disableSoundForMessages", "customSoundForMessages", "readIcon", "deliveredIcon", "sentIcon", "waitIcon", "errorIcon", "aiErrorIcon", "aiEmptyIcon", "alignment", "showAvatar", "datePattern", "timestampAlignment", "DateSeparatorPattern", "templates", "messagesRequestBuilder", "newMessageIndicatorText", "scrollToBottomOnNewMessages", "thresholdValue", "unreadMessageThreshold", "reactionsConfiguration", "disableReactions", "emojiKeyboardStyle", "apiConfiguration", "onThreadRepliesClick", "headerView", "footerView", "parentMessageId", "threadIndicatorIcon", "avatarStyle", "backdropStyle", "dateSeparatorStyle", "messageListStyle", "onError", "messageInformationConfiguration", "disableMentions", "textFormatters"] }, { type: CometChatMessageComposerComponent, selector: "cometchat-message-composer", inputs: ["user", "group", "disableSoundForMessages", "customSoundForMessage", "customSoundForMessages", "disableTypingEvents", "text", "placeholderText", "headerView", "onTextChange", "attachmentIconURL", "attachmentOptions", "secondaryButtonView", "auxilaryButtonView", "auxiliaryButtonsAlignment", "sendButtonView", "parentMessageId", "hideLiveReaction", "LiveReactionIconURL", "backButtonIconURL", "mentionsWarningText", "mentionsWarningStyle", "messageComposerStyle", "onSendButtonClick", "onError", "backdropStyle", "actionSheetStyle", "aiActionSheetStyle", "hideVoiceRecording", "mediaRecorderStyle", "aiOptionsStyle", "aiIconURL", "voiceRecordingIconURL", "voiceRecordingCloseIconURL", "voiceRecordingStartIconURL", "voiceRecordingStopIconURL", "voiceRecordingSubmitIconURL", "hideLayoutMode", "emojiIconURL", "userMemberWrapperConfiguration", "disableMentions", "textFormatters"], outputs: ["childEvent"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { 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: CometChatThreadedMessagesComponent, decorators: [{
             type: Component,
             args: [{ selector: "cometchat-threaded-messages", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-threaded-messages__wrapper\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-threaded-messages__header\">\n    <div class=\"cc-threaded-messages__title\">\n      <cometchat-label [text]=\"title\"\n        [labelStyle]=\"titleStyle\"></cometchat-label>\n    </div>\n    <div class=\"cc-threaded-messages__close\">\n      <cometchat-button [iconURL]=\"closeIconURL\" [buttonStyle]=\"buttonStyle\"\n        (cc-button-clicked)=\"closeView()\"></cometchat-button>\n    </div>\n  </div>\n  <div class=\"cc-threaded-messages__bubble-view\">\n    <ng-container\n      *ngTemplateOutlet=\"bubbleView; context:{ $implicit: parentMessage }\">\n    </ng-container>\n  </div>\n  <div class=\"cc-threaded-messages__action-view\">\n    <ng-container\n      *ngTemplateOutlet=\"messageActionView; context:{ $implicit: parentMessage }\">\n    </ng-container>\n    <cometchat-button *ngIf=\"!messageActionView\" [text]=\"getThreadCount()\"\n      [buttonStyle]=\"actionButtonStyle\"></cometchat-button>\n  </div>\n  <div class=\"cc-threaded-messages__list\" *ngIf=\"!messageListView\">\n    <cometchat-message-list #messageListRef\n      [disableReactions]=\"messageListConfiguration?.disableReactions!\"\n      [emojiKeyboardStyle]=\"messageListConfiguration?.emojiKeyboardStyle!\"\n      [reactionsConfiguration]=\"messageListConfiguration?.reactionsConfiguration!\"\n      [threadIndicatorIcon]=\"messageListConfiguration?.threadIndicatorIcon!\"\n      [parentMessageId]=\"parentMessage?.getId()\"\n      [emptyStateView]=\"messageListConfiguration.emptyStateView\"\n      [loadingStateView]=\"messageListConfiguration.loadingStateView\"\n      [user]=\"user\" [group]=\"group\"\n      [errorStateView]=\"messageListConfiguration.errorStateView\"\n      [disableReceipt]=\"messageListConfiguration.disableReceipt\"\n      [hideReceipt]=\"messageListConfiguration.hideReceipt\"\n      [readIcon]=\"messageListConfiguration.readIcon\"\n      [deliveredIcon]=\"messageListConfiguration.deliveredIcon\"\n      [sentIcon]=\"messageListConfiguration.sentIcon\"\n      [waitIcon]=\"messageListConfiguration.waitIcon\"\n      [loadingIconURL]=\"messageListConfiguration.loadingIconURL\"\n      [errorIcon]=\"messageListConfiguration.errorIcon\"\n      [alignment]=\"messageListConfiguration.alignment\"\n      [showAvatar]=\"messageListConfiguration.showAvatar\"\n      [datePattern]=\"messageListConfiguration.datePattern\"\n      [timestampAlignment]=\"messageListConfiguration.timestampAlignment\"\n      [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n      [messageTypes]=\"messageListConfiguration.templates\"\n      [templates]=\"messageListConfiguration.templates\"\n      [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder || requestBuilder\"\n      [thresholdValue]=\"messageListConfiguration.thresholdValue\"\n      [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick\"\n      [headerView]=\"messageListConfiguration.headerView\"\n      [footerView]=\"messageListConfiguration.footerView\"\n      [avatarStyle]=\"messageListConfiguration.avatarStyle\"\n      [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\"\n      [messageListStyle]=\"messageListConfiguration.messageListStyle\"\n      [onError]=\"messageListConfiguration.onError\"\n      [hideError]=\"messageListConfiguration.hideError\"\n      [hideDateSeparator]=\"messageListConfiguration.hideDateSeparator\"\n      [disableSoundForMessages]=\"disableSoundForMessages\"\n      [disableMentions]=\"messageListConfiguration.disableMentions\"\n      [textFormatters]=\"messageListConfiguration?.textFormatters\">\n    </cometchat-message-list>\n  </div>\n  <ng-container *ngIf=\"messageListView\">\n    <ng-container\n      *ngTemplateOutlet=\"messageListView;context:{  user: user, group: group,parentMessage:parentMessage }\">\n    </ng-container>\n  </ng-container>\n  <div class=\"cc-threaded-messages__composer\"\n    *ngIf=\"!hideMessageComposer && !messageComposerView\">\n    <cometchat-message-composer #messageComposerRef\n      [parentMessageId]=\"parentMessage?.getId()\" [user]=\"user\" [group]=\"group\"\n      [text]=\"messageComposerConfiguration.text\"\n      [headerView]=\"messageComposerConfiguration.headerView\"\n      [onTextChange]=\"messageComposerConfiguration.onTextChange\"\n      [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n      [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\"\n      [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\"\n      [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\"\n      [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n      [sendButtonView]=\"messageComposerConfiguration.sendButtonView\"\n      [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\"\n      [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\"\n      [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\"\n      [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n      [sendButtonIconURL]=\"messageComposerConfiguration.sendButtonIconURL\"\n      [onError]=\"messageComposerConfiguration.onError\"\n      [actionSheetStyle]=\"messageComposerConfiguration.actionSheetStyle\"\n      [userMemberWrapperConfiguration]=\"messageComposerConfiguration.userMemberWrapperConfiguration\"\n      [textFormatters]=\"messageComposerConfiguration?.textFormatters\"\n      [disableMentions]=\"messageComposerConfiguration.disableMentions\"\n      [mentionsWarningText]=\"messageComposerConfiguration?.mentionsWarningText\"\n      [mentionsWarningStyle]=\"messageComposerConfiguration?.mentionsWarningStyle\"\n      [emojiIconURL]=\"messageComposerConfiguration.emojiIconURL\"\n      [AIIconURL]=\"messageComposerConfiguration.AIIconURL\"\n      [hideVoiceRecording]=\"messageComposerConfiguration.hideVoiceRecording\"\n      [hideLayoutMode]=\"messageComposerConfiguration.hideLayoutMode\"\n      [AIOptionsStyle]=\"messageComposerConfiguration.AIOptionsStyle\"\n      [backdropStyle]=\"messageComposerConfiguration.backdropStyle\"\n      [mediaRecorderStyle]=\"messageComposerConfiguration.mediaRecorderStyle\"\n      [voiceRecordingCloseIconURL]=\"messageComposerConfiguration.voiceRecordingCloseIconURL\"\n      [voiceRecordingStartIconURL]=\"messageComposerConfiguration.voiceRecordingStartIconURL\"\n      [voiceRecordingStopIconURL]=\"messageComposerConfiguration.voiceRecordingStopIconURL\"\n      [voiceRecordingSubmitIconURL]=\"messageComposerConfiguration.voiceRecordingSubmitIconURL\"\n      [disableSoundForMessages]=\"disableSoundForMessages\"\n      >\n    </cometchat-message-composer>\n  </div>\n  <ng-container *ngIf=\"!hideMessageComposer && messageComposerView\">\n    <ng-container\n      *ngTemplateOutlet=\"messageComposerView;context:{  user: user, group: group,parentMessage:parentMessage }\">\n    </ng-container>\n  </ng-container>\n\n</div>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-threaded-messages__wrapper{display:flex;flex-direction:column;height:100%;overflow-y:auto}.cc-threaded-messages__header{height:8%;width:100%;display:flex;padding:16px;align-items:flex-start}.cc-threaded-messages__close{display:flex;align-items:center}.cc-threaded-messages__title{display:flex;align-items:center;justify-content:center;width:100%}.cc-threaded-messages__bubble-view{width:100%}.cc-threaded-messages__header{flex:0 0 auto}.cc-threaded-messages__list{flex:1 1 auto;min-height:65%}.cc-threaded-messages__composer{flex:0 0 auto;min-height:80px}\n"] }]
@@ -17171,7 +17229,7 @@ class CometChatMessagesComponent {
     }
 }
 CometChatMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessagesComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-CometChatMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatMessagesComponent, selector: "cometchat-messages", inputs: { user: "user", group: "group", currentAskAIBot: "currentAskAIBot", hideMessageComposer: "hideMessageComposer", disableTyping: "disableTyping", messageHeaderConfiguration: "messageHeaderConfiguration", messageListConfiguration: "messageListConfiguration", messageComposerConfiguration: "messageComposerConfiguration", threadedMessageConfiguration: "threadedMessageConfiguration", detailsConfiguration: "detailsConfiguration", customSoundForIncomingMessages: "customSoundForIncomingMessages", customSoundForOutgoingMessages: "customSoundForOutgoingMessages", disableSoundForMessages: "disableSoundForMessages", messagesStyle: "messagesStyle", messageHeaderView: "messageHeaderView", messageComposerView: "messageComposerView", messageListView: "messageListView", hideMessageHeader: "hideMessageHeader", hideDetails: "hideDetails", auxiliaryMenu: "auxiliaryMenu" }, viewQueries: [{ propertyName: "messageComposerRef", first: true, predicate: ["messageComposerRef"], descendants: true }, { propertyName: "messageListRef", first: true, predicate: ["messageListRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-messages__wrapper\">\n  <cometchat-backdrop *ngIf=\"showAiBotChat\">\n    <aiassist-bot-message-list [user]=\"user\" [group]=\"group\"\n      [currentAskAIBot]=\"currentAskAIBot\"></aiassist-bot-message-list>\n  </cometchat-backdrop>\n  <div class=\"cc-messages\" [ngStyle]=\"chatListStyle()\" *ngIf=\"user || group\">\n    <div class=\"cc-messages__header\" *ngIf=\"!hideMessageHeader\">\n      <div *ngIf=\"messageHeaderView; else customHeaderView\"\n        class=\"cc-messages__header-customview\">\n        <ng-container\n          *ngTemplateOutlet=\"messageHeaderView;context:{  user: user, group: group }\">\n        </ng-container>\n      </div>\n      <ng-template #customHeaderView>\n        <cometchat-message-header [user]=\"user\" [group]=\"group\"\n          [subtitleView]=\"messageHeaderConfiguration.subtitleView\"\n          [disableUsersPresence]=\"messageHeaderConfiguration.disableUsersPresence\"\n          [protectedGroupIcon]=\"messageHeaderConfiguration.protectedGroupIcon\"\n          [passwordGroupIcon]=\"messageHeaderConfiguration.passwordGroupIcon\"\n          [privateGroupIcon]=\"messageHeaderConfiguration.privateGroupIcon\"\n          [menu]=\"headerMenu\"\n          [messageHeaderStyle]=\"messageHeaderConfiguration.messageHeaderStyle\"\n          [backButtonIconURL]=\"messageHeaderConfiguration.backButtonIconURL\"\n          [hideBackButton]=\"messageHeaderConfiguration.hideBackButton\"\n          [onError]=\"messageHeaderConfiguration.onError\"\n          [onBack]=\"messageHeaderConfiguration.onBack\"\n          [listItemStyle]=\"messageHeaderConfiguration.listItemStyle\"\n          [statusIndicatorStyle]=\"messageHeaderConfiguration.statusIndicatorStyle\"\n          [avatarStyle]=\"messageHeaderConfiguration.avatarStyle\">\n        </cometchat-message-header>\n      </ng-template>\n    </div>\n    <div class=\"cc-messages__list\" *ngIf=\"!messageListView\">\n      <cometchat-message-list #messageListRef\n        [disableReactions]=\"messageListConfiguration?.disableReactions!\"\n        [emojiKeyboardStyle]=\"messageListConfiguration?.emojiKeyboardStyle!\"\n        [threadIndicatorIcon]=\"messageListConfiguration?.threadIndicatorIcon!\"\n        [reactionsConfiguration]=\"messageListConfiguration?.reactionsConfiguration!\"\n        [messageInformationConfiguration]=\"\n        messageListConfiguration.messageInformationConfiguration\"\n        [disableSoundForMessages]=\"disableSoundForMessages\"\n        [customSoundForMessages]=\"customSoundForIncomingMessages\"\n        [emptyStateView]=\"messageListConfiguration.emptyStateView\"\n        [loadingIconURL]=\"messageListConfiguration?.loadingIconURL!\"\n        [loadingStateView]=\"messageListConfiguration.loadingStateView\"\n        [user]=\"user\" [group]=\"group\"\n        [errorStateView]=\"messageListConfiguration.errorStateView\"\n        [disableReceipt]=\"messageListConfiguration.disableReceipt\"\n        [hideReceipt]=\"messageListConfiguration.hideReceipt\"\n        [readIcon]=\"messageListConfiguration.readIcon\"\n        [deliveredIcon]=\"messageListConfiguration.deliveredIcon\"\n        [sentIcon]=\"messageListConfiguration.sentIcon\"\n        [waitIcon]=\"messageListConfiguration.waitIcon\"\n        [errorIcon]=\"messageListConfiguration.errorIcon\"\n        [alignment]=\"messageListConfiguration.alignment\"\n        [showAvatar]=\"messageListConfiguration.showAvatar\"\n        [datePattern]=\"messageListConfiguration.datePattern\"\n        [timestampAlignment]=\"messageListConfiguration.timestampAlignment\"\n        [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n        [templates]=\"messageListConfiguration.templates\"\n        [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder\"\n        [thresholdValue]=\"messageListConfiguration.thresholdValue\"\n        [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick || openThreadView\"\n        [headerView]=\"messageListConfiguration.headerView\"\n        [footerView]=\"messageListConfiguration.footerView\"\n        [avatarStyle]=\"messageListConfiguration.avatarStyle\"\n        [scrollToBottomOnNewMessages]=\"messageListConfiguration.scrollToBottomOnNewMessages\"\n        [backdropStyle]=\"messageListConfiguration.backdropStyle\"\n        [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\"\n        [messageListStyle]=\"messageListConfiguration.messageListStyle\"\n        [onError]=\"messageListConfiguration.onError\"\n        [hideError]=\"messageListConfiguration.hideError\"\n        [disableMentions]=\"messageListConfiguration.disableMentions\"\n        [textFormatters]=\"messageListConfiguration?.textFormatters\">\n      </cometchat-message-list>\n    </div>\n    <ng-container *ngIf=\"messageListView\">\n      <ng-container\n        *ngTemplateOutlet=\"messageListView;context:{  user: user, group: group }\">\n      </ng-container>\n    </ng-container>\n\n    <div class=\"cc-messages__composer\"\n      *ngIf=\"!messageComposerView && !hideMessageComposer\">\n      <cometchat-message-composer #messageComposerRef\n        [hideVoiceRecording]=\"messageComposerConfiguration.hideVoiceRecording\"\n        [disableSoundForMessages]=\"disableSoundForMessages\"\n        [voiceRecordingStopIconURL]=\"messageComposerConfiguration.voiceRecordingStopIconURL\"\n        [voiceRecordingStartIconURL]=\"messageComposerConfiguration.voiceRecordingStartIconURL\"\n        [voiceRecordingCloseIconURL]=\"messageComposerConfiguration.voiceRecordingCloseIconURL\"\n        [voiceRecordingSubmitIconURL]=\"messageComposerConfiguration.voiceRecordingSubmitIconURL\"\n        [mediaRecorderStyle]=\"messageComposerConfiguration.mediaRecorderStyle\"\n        [customSoundForMessages]=\"customSoundForOutgoingMessages\" [user]=\"user\"\n        [group]=\"group\" [text]=\"messageComposerConfiguration.text\"\n        [headerView]=\"messageComposerConfiguration.headerView\"\n        [onTextChange]=\"messageComposerConfiguration.onTextChange\"\n        [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n        [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\"\n        [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\"\n        [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\"\n        [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n        [sendButtonView]=\"messageComposerConfiguration.sendButtonView\"\n        [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\"\n        [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\"\n        [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\"\n        [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n        [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n        [onError]=\"messageComposerConfiguration.onError\"\n        [actionSheetStyle]=\"messageComposerConfiguration.actionSheetStyle\"\n        [aiOptionsStyle]=\"messageComposerConfiguration.AIOptionsStyle\"\n        [aiIconURL]=\"messageComposerConfiguration.AIIconURL\"\n        [userMemberWrapperConfiguration]=\"messageComposerConfiguration.userMemberWrapperConfiguration\"\n        [textFormatters]=\"messageComposerConfiguration?.textFormatters\"\n        [disableMentions]=\"messageComposerConfiguration.disableMentions\"\n        [mentionsWarningText]=\"messageComposerConfiguration?.mentionsWarningText\"\n        [mentionsWarningStyle]=\"messageComposerConfiguration?.mentionsWarningStyle\">\n      </cometchat-message-composer>\n    </div>\n    <div *ngIf=\"messageComposerView && !hideMessageComposer\"\n      class=\"cc-messages__composer--customview\">\n      <ng-container\n        *ngTemplateOutlet=\"messageComposerView;context:{  user: user, group: group }\">\n      </ng-container>\n    </div>\n  </div>\n  <div class=\"cc-messages__livereaction\">\n    <cometchat-live-reaction *ngIf=\"liveReaction\"\n      [reactionIconURL]=\"reactionName\"\n      [liveReactionStyle]=\"liveReactionStyle\"></cometchat-live-reaction>\n  </div>\n  <div *ngIf=\"openThreadedMessages\" class=\"cc-messages__threadedmessages\">\n    <cometchat-threaded-messages [onClose]=\"closeThreadView\"\n      [threadedMessagesStyle]=\"threadedMessageConfiguration.threadedMessagesStyle\"\n      [messageActionView]=\"threadedMessageConfiguration.messageActionView\"\n      [closeIconURL]=\"threadedMessageConfiguration.closeIconURL\"\n      [onError]=\"threadedMessageConfiguration.onError\"\n      [bubbleView]=\"threadedMessageConfiguration.bubbleView || parentBubbleView\"\n      [parentMessage]=\"threadMessageObject\" [user]=\"user\" [group]=\"group\"\n      [messageListConfiguration]=\"threadedMessageConfiguration.messageListConfiguration\"\n      [messageComposerView]=\"threadedMessageConfiguration.messageComposerView\"\n      [messageListView]=\"threadedMessageConfiguration.messageListView\"\n      [hideMessageComposer]=\"threadedMessageConfiguration.hideMessageComposer\"\n      [messageComposerConfiguration]=\"threadedMessageConfiguration.messageComposerConfiguration\"\n      [disableSoundForMessages]=\"threadedMessageConfiguration.disableSoundForMessages\"\n      ></cometchat-threaded-messages>\n  </div>\n\n  <div *ngIf=\"openDetails\" class=\"cc-messages__details\">\n    <cometchat-details\n      [protectedGroupIcon]=\"detailsConfiguration.protectedGroupIcon\"\n      [passwordGroupIcon]=\"detailsConfiguration.passwordGroupIcon\"\n      [privateGroupIcon]=\"detailsConfiguration.privateGroupIcon\"\n      [backdropStyle]=\"detailsConfiguration.backdropStyle\"\n      [disableUsersPresence]=\"detailsConfiguration?.disableUsersPresence!\"\n      [transferOwnershipConfiguration]=\"detailsConfiguration.transferOwnershipConfiguration\"\n      [groupMembersConfiguration]=\"detailsConfiguration.groupMembersConfiguration\"\n      [bannedMembersConfiguration]=\"detailsConfiguration.bannedMembersConfiguration\"\n      [addMembersConfiguration]=\"detailsConfiguration.addMembersConfiguration\"\n      [onClose]=\"detailsConfiguration.onClose || closeDetailsPage\"\n      [listItemStyle]=\"detailsConfiguration.listItemStyle\"\n      [detailsStyle]=\"detailsConfiguration.detailsStyle\"\n      [avatarStyle]=\"detailsConfiguration.avatarStyle\"\n      [statusIndicatorStyle]=\"detailsConfiguration.statusIndicatorStyle\"\n      [leaveDialogStyle]=\"detailsConfiguration.leaveDialogStyle\"\n      [data]=\"setDetailsTemplate()\"\n      [customProfileView]=\"detailsConfiguration.customProfileView\"\n      [subtitleView]=\"detailsConfiguration.subtitleView\"\n      [hideProfile]=\"detailsConfiguration.hideProfile\"\n      [onError]=\"detailsConfiguration.onError\"\n      [closeButtonIconURL]=\"detailsConfiguration.closeButtonIconURL\"\n      [user]=\"user\" [group]=\"group\"></cometchat-details>\n  </div>\n</div>\n<ng-template #headerMenu>\n  <div class=\"cc-messages__headermenu\">\n    <div class=\"cc-messages__auxiliarymenu\"\n      *ngIf=\"getAuxilaryView(); else elseBlock\">\n      <ng-container\n        *ngTemplateOutlet=\"getAuxilaryView();context:{  user: user, group: group }\">\n      </ng-container>\n    </div>\n    <ng-template #elseBlock>\n      <cometchat-call-buttons *ngIf=\"enableCalling\" voiceCallIconText=\"\"\n        videoCallIconText=\"\" [user]=\"user\" [group]=\"group\"\n        [callButtonsStyle]=\"callButtonsStyle\">\n      </cometchat-call-buttons>\n    </ng-template>\n    <cometchat-button *ngIf=\"!hideDetails\" [iconURL]=\"infoIconStyle\"\n      [buttonStyle]=\"detailsButtonStyle\"\n      (cc-button-clicked)=\"openDetailsPage()\"></cometchat-button>\n  </div>\n</ng-template>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-messages__wrapper{position:relative;height:100%;width:100%}.cc-messages{display:flex;flex-direction:column;position:relative;height:100%;width:100%;box-sizing:border-box;justify-content:space-between}.cc-messages__headermenu{display:flex;justify-content:center;align-items:center}.cc-messages__threadedmessages,.cc-messages__details{position:absolute;top:0;left:0;height:100%;width:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;max-width:100%;z-index:1}.cc-messages__header{width:100%}.cc-messages__list{overflow:hidden;width:100%;height:100%}cometchat-threaded-messages{height:100%;display:flex}.cc-messages__composer{width:100%;display:flex;flex-direction:column;justify-content:flex-end}\n"], components: [{ type: AIAssistBotMessageListComponent, selector: "aiassist-bot-message-list", inputs: ["hideSearch", "footerView", "user", "group", "currentAskAIBot", "subtitleText", "sendIconUrl", "waitIcon", "errorIcon", "botFirstMessageText", "closeButtonIconURL", "sendButtonIconURL", "avatarStyle", "aiBotChatHeaderStyle", "aiBotChatContainerStyle", "datePattern", "alignment"] }, { type: CometChatMessageHeaderComponent, selector: "cometchat-message-header", inputs: ["avatarStyle", "statusIndicatorStyle", "messageHeaderStyle", "listItemStyle", "subtitleView", "disableUsersPresence", "disableTyping", "protectedGroupIcon", "passwordGroupIcon", "privateGroupIcon", "menu", "user", "group", "backButtonIconURL", "hideBackButton", "listItemView", "onError", "onBack"] }, { type: CometChatMessageListComponent, selector: "cometchat-message-list", inputs: ["hideError", "hideDateSeparator", "errorStateView", "loadingStateView", "emptyStateView", "errorStateText", "emptyStateText", "loadingIconURL", "user", "group", "disableReceipt", "hideReceipt", "disableSoundForMessages", "customSoundForMessages", "readIcon", "deliveredIcon", "sentIcon", "waitIcon", "errorIcon", "aiErrorIcon", "aiEmptyIcon", "alignment", "showAvatar", "datePattern", "timestampAlignment", "DateSeparatorPattern", "templates", "messagesRequestBuilder", "newMessageIndicatorText", "scrollToBottomOnNewMessages", "thresholdValue", "unreadMessageThreshold", "reactionsConfiguration", "disableReactions", "emojiKeyboardStyle", "apiConfiguration", "onThreadRepliesClick", "headerView", "footerView", "parentMessageId", "threadIndicatorIcon", "avatarStyle", "backdropStyle", "dateSeparatorStyle", "messageListStyle", "onError", "messageInformationConfiguration", "disableMentions", "textFormatters"] }, { type: CometChatMessageComposerComponent, selector: "cometchat-message-composer", inputs: ["user", "group", "disableSoundForMessages", "customSoundForMessage", "disableTypingEvents", "text", "placeholderText", "headerView", "onTextChange", "attachmentIconURL", "attachmentOptions", "secondaryButtonView", "auxilaryButtonView", "auxiliaryButtonsAlignment", "sendButtonView", "parentMessageId", "hideLiveReaction", "LiveReactionIconURL", "backButtonIconURL", "mentionsWarningText", "mentionsWarningStyle", "messageComposerStyle", "onSendButtonClick", "onError", "backdropStyle", "actionSheetStyle", "aiActionSheetStyle", "hideVoiceRecording", "mediaRecorderStyle", "aiOptionsStyle", "aiIconURL", "voiceRecordingIconURL", "voiceRecordingCloseIconURL", "voiceRecordingStartIconURL", "voiceRecordingStopIconURL", "voiceRecordingSubmitIconURL", "hideLayoutMode", "emojiIconURL", "userMemberWrapperConfiguration", "disableMentions", "textFormatters"], outputs: ["childEvent"] }, { type: CometChatThreadedMessagesComponent, selector: "cometchat-threaded-messages", inputs: ["onClose", "onError", "parentMessage", "title", "closeIconURL", "bubbleView", "messageActionView", "messageListConfiguration", "userMemberWrapperConfiguration", "messageComposerConfiguration", "threadedMessagesStyle", "hideMessageComposer", "messageComposerView", "messageListView", "disableSoundForMessages"] }, { type: CometChatDetailsComponent, selector: "cometchat-details", inputs: ["group", "user", "title", "closeButtonIconURL", "hideProfile", "subtitleView", "customProfileView", "data", "disableUsersPresence", "privateGroupIcon", "protectedGroupIcon", "passwordGroupIcon", "onError", "onClose", "leaveGroupConfirmButtonText", "leaveGroupCancelButtonText", "leaveGroupDialogMessage", "leaveGroupDialogStyle", "deleteGroupConfirmButtonText", "deleteGroupDialogMessage", "deleteGroupCancelButtonText", "deleteGroupDialogStyle", "transferOwnershipConfirmButtonText", "transferOwnershipDialogMessage", "transferOwnershipCancelButtonText", "transferOwnershipDialogStyle", "addMembersConfiguration", "bannedMembersConfiguration", "groupMembersConfiguration", "transferOwnershipConfiguration", "statusIndicatorStyle", "backdropStyle", "avatarStyle", "detailsStyle", "listItemStyle"] }, { type: CometChatCallButtonsComponent, selector: "cometchat-call-buttons", inputs: ["user", "group", "voiceCallIconURL", "voiceCallIconText", "voiceCallIconHoverText", "videoCallIconURL", "videoCallIconText", "videoCallIconHoverText", "onVoiceCallClick", "onVideoCallClick", "onError", "callButtonsStyle", "outgoingCallConfiguration", "ongoingCallConfiguration"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CometChatMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatMessagesComponent, selector: "cometchat-messages", inputs: { user: "user", group: "group", currentAskAIBot: "currentAskAIBot", hideMessageComposer: "hideMessageComposer", disableTyping: "disableTyping", messageHeaderConfiguration: "messageHeaderConfiguration", messageListConfiguration: "messageListConfiguration", messageComposerConfiguration: "messageComposerConfiguration", threadedMessageConfiguration: "threadedMessageConfiguration", detailsConfiguration: "detailsConfiguration", customSoundForIncomingMessages: "customSoundForIncomingMessages", customSoundForOutgoingMessages: "customSoundForOutgoingMessages", disableSoundForMessages: "disableSoundForMessages", messagesStyle: "messagesStyle", messageHeaderView: "messageHeaderView", messageComposerView: "messageComposerView", messageListView: "messageListView", hideMessageHeader: "hideMessageHeader", hideDetails: "hideDetails", auxiliaryMenu: "auxiliaryMenu" }, viewQueries: [{ propertyName: "messageComposerRef", first: true, predicate: ["messageComposerRef"], descendants: true }, { propertyName: "messageListRef", first: true, predicate: ["messageListRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-messages__wrapper\">\n  <cometchat-backdrop *ngIf=\"showAiBotChat\">\n    <aiassist-bot-message-list [user]=\"user\" [group]=\"group\"\n      [currentAskAIBot]=\"currentAskAIBot\"></aiassist-bot-message-list>\n  </cometchat-backdrop>\n  <div class=\"cc-messages\" [ngStyle]=\"chatListStyle()\" *ngIf=\"user || group\">\n    <div class=\"cc-messages__header\" *ngIf=\"!hideMessageHeader\">\n      <div *ngIf=\"messageHeaderView; else customHeaderView\"\n        class=\"cc-messages__header-customview\">\n        <ng-container\n          *ngTemplateOutlet=\"messageHeaderView;context:{  user: user, group: group }\">\n        </ng-container>\n      </div>\n      <ng-template #customHeaderView>\n        <cometchat-message-header [user]=\"user\" [group]=\"group\"\n          [subtitleView]=\"messageHeaderConfiguration.subtitleView\"\n          [disableUsersPresence]=\"messageHeaderConfiguration.disableUsersPresence\"\n          [protectedGroupIcon]=\"messageHeaderConfiguration.protectedGroupIcon\"\n          [passwordGroupIcon]=\"messageHeaderConfiguration.passwordGroupIcon\"\n          [privateGroupIcon]=\"messageHeaderConfiguration.privateGroupIcon\"\n          [menu]=\"headerMenu\"\n          [messageHeaderStyle]=\"messageHeaderConfiguration.messageHeaderStyle\"\n          [backButtonIconURL]=\"messageHeaderConfiguration.backButtonIconURL\"\n          [hideBackButton]=\"messageHeaderConfiguration.hideBackButton\"\n          [onError]=\"messageHeaderConfiguration.onError\"\n          [onBack]=\"messageHeaderConfiguration.onBack\"\n          [listItemStyle]=\"messageHeaderConfiguration.listItemStyle\"\n          [statusIndicatorStyle]=\"messageHeaderConfiguration.statusIndicatorStyle\"\n          [avatarStyle]=\"messageHeaderConfiguration.avatarStyle\">\n        </cometchat-message-header>\n      </ng-template>\n    </div>\n    <div class=\"cc-messages__list\" *ngIf=\"!messageListView\">\n      <cometchat-message-list #messageListRef\n        [disableReactions]=\"messageListConfiguration?.disableReactions!\"\n        [emojiKeyboardStyle]=\"messageListConfiguration?.emojiKeyboardStyle!\"\n        [threadIndicatorIcon]=\"messageListConfiguration?.threadIndicatorIcon!\"\n        [reactionsConfiguration]=\"messageListConfiguration?.reactionsConfiguration!\"\n        [messageInformationConfiguration]=\"\n        messageListConfiguration.messageInformationConfiguration\"\n        [disableSoundForMessages]=\"disableSoundForMessages\"\n        [customSoundForMessages]=\"customSoundForIncomingMessages\"\n        [emptyStateView]=\"messageListConfiguration.emptyStateView\"\n        [loadingIconURL]=\"messageListConfiguration?.loadingIconURL!\"\n        [loadingStateView]=\"messageListConfiguration.loadingStateView\"\n        [user]=\"user\" [group]=\"group\"\n        [errorStateView]=\"messageListConfiguration.errorStateView\"\n        [disableReceipt]=\"messageListConfiguration.disableReceipt\"\n        [hideReceipt]=\"messageListConfiguration.hideReceipt\"\n        [readIcon]=\"messageListConfiguration.readIcon\"\n        [deliveredIcon]=\"messageListConfiguration.deliveredIcon\"\n        [sentIcon]=\"messageListConfiguration.sentIcon\"\n        [waitIcon]=\"messageListConfiguration.waitIcon\"\n        [errorIcon]=\"messageListConfiguration.errorIcon\"\n        [alignment]=\"messageListConfiguration.alignment\"\n        [showAvatar]=\"messageListConfiguration.showAvatar\"\n        [datePattern]=\"messageListConfiguration.datePattern\"\n        [timestampAlignment]=\"messageListConfiguration.timestampAlignment\"\n        [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n        [templates]=\"messageListConfiguration.templates\"\n        [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder\"\n        [thresholdValue]=\"messageListConfiguration.thresholdValue\"\n        [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick || openThreadView\"\n        [headerView]=\"messageListConfiguration.headerView\"\n        [footerView]=\"messageListConfiguration.footerView\"\n        [avatarStyle]=\"messageListConfiguration.avatarStyle\"\n        [scrollToBottomOnNewMessages]=\"messageListConfiguration.scrollToBottomOnNewMessages\"\n        [backdropStyle]=\"messageListConfiguration.backdropStyle\"\n        [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\"\n        [messageListStyle]=\"messageListConfiguration.messageListStyle\"\n        [onError]=\"messageListConfiguration.onError\"\n        [hideError]=\"messageListConfiguration.hideError\"\n        [disableMentions]=\"messageListConfiguration.disableMentions\"\n        [textFormatters]=\"messageListConfiguration?.textFormatters\">\n      </cometchat-message-list>\n    </div>\n    <ng-container *ngIf=\"messageListView\">\n      <ng-container\n        *ngTemplateOutlet=\"messageListView;context:{  user: user, group: group }\">\n      </ng-container>\n    </ng-container>\n\n    <div class=\"cc-messages__composer\"\n      *ngIf=\"!messageComposerView && !hideMessageComposer\">\n      <cometchat-message-composer #messageComposerRef\n        [hideVoiceRecording]=\"messageComposerConfiguration.hideVoiceRecording\"\n        [disableSoundForMessages]=\"disableSoundForMessages\"\n        [voiceRecordingStopIconURL]=\"messageComposerConfiguration.voiceRecordingStopIconURL\"\n        [voiceRecordingStartIconURL]=\"messageComposerConfiguration.voiceRecordingStartIconURL\"\n        [voiceRecordingCloseIconURL]=\"messageComposerConfiguration.voiceRecordingCloseIconURL\"\n        [voiceRecordingSubmitIconURL]=\"messageComposerConfiguration.voiceRecordingSubmitIconURL\"\n        [mediaRecorderStyle]=\"messageComposerConfiguration.mediaRecorderStyle\"\n        [customSoundForMessages]=\"customSoundForOutgoingMessages\" [user]=\"user\"\n        [group]=\"group\" [text]=\"messageComposerConfiguration.text\"\n        [headerView]=\"messageComposerConfiguration.headerView\"\n        [onTextChange]=\"messageComposerConfiguration.onTextChange\"\n        [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n        [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\"\n        [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\"\n        [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\"\n        [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n        [sendButtonView]=\"messageComposerConfiguration.sendButtonView\"\n        [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\"\n        [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\"\n        [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\"\n        [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n        [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n        [onError]=\"messageComposerConfiguration.onError\"\n        [actionSheetStyle]=\"messageComposerConfiguration.actionSheetStyle\"\n        [aiOptionsStyle]=\"messageComposerConfiguration.AIOptionsStyle\"\n        [aiIconURL]=\"messageComposerConfiguration.AIIconURL\"\n        [userMemberWrapperConfiguration]=\"messageComposerConfiguration.userMemberWrapperConfiguration\"\n        [textFormatters]=\"messageComposerConfiguration?.textFormatters\"\n        [disableMentions]=\"messageComposerConfiguration.disableMentions\"\n        [mentionsWarningText]=\"messageComposerConfiguration?.mentionsWarningText\"\n        [mentionsWarningStyle]=\"messageComposerConfiguration?.mentionsWarningStyle\">\n      </cometchat-message-composer>\n    </div>\n    <div *ngIf=\"messageComposerView && !hideMessageComposer\"\n      class=\"cc-messages__composer--customview\">\n      <ng-container\n        *ngTemplateOutlet=\"messageComposerView;context:{  user: user, group: group }\">\n      </ng-container>\n    </div>\n  </div>\n  <div class=\"cc-messages__livereaction\">\n    <cometchat-live-reaction *ngIf=\"liveReaction\"\n      [reactionIconURL]=\"reactionName\"\n      [liveReactionStyle]=\"liveReactionStyle\"></cometchat-live-reaction>\n  </div>\n  <div *ngIf=\"openThreadedMessages\" class=\"cc-messages__threadedmessages\">\n    <cometchat-threaded-messages [onClose]=\"closeThreadView\"\n      [threadedMessagesStyle]=\"threadedMessageConfiguration.threadedMessagesStyle\"\n      [messageActionView]=\"threadedMessageConfiguration.messageActionView\"\n      [closeIconURL]=\"threadedMessageConfiguration.closeIconURL\"\n      [onError]=\"threadedMessageConfiguration.onError\"\n      [bubbleView]=\"threadedMessageConfiguration.bubbleView || parentBubbleView\"\n      [parentMessage]=\"threadMessageObject\" [user]=\"user\" [group]=\"group\"\n      [messageListConfiguration]=\"threadedMessageConfiguration.messageListConfiguration\"\n      [messageComposerView]=\"threadedMessageConfiguration.messageComposerView\"\n      [messageListView]=\"threadedMessageConfiguration.messageListView\"\n      [hideMessageComposer]=\"threadedMessageConfiguration.hideMessageComposer\"\n      [messageComposerConfiguration]=\"threadedMessageConfiguration.messageComposerConfiguration\"\n      [disableSoundForMessages]=\"threadedMessageConfiguration.disableSoundForMessages\"\n      ></cometchat-threaded-messages>\n  </div>\n\n  <div *ngIf=\"openDetails\" class=\"cc-messages__details\">\n    <cometchat-details\n      [protectedGroupIcon]=\"detailsConfiguration.protectedGroupIcon\"\n      [passwordGroupIcon]=\"detailsConfiguration.passwordGroupIcon\"\n      [privateGroupIcon]=\"detailsConfiguration.privateGroupIcon\"\n      [backdropStyle]=\"detailsConfiguration.backdropStyle\"\n      [disableUsersPresence]=\"detailsConfiguration?.disableUsersPresence!\"\n      [transferOwnershipConfiguration]=\"detailsConfiguration.transferOwnershipConfiguration\"\n      [groupMembersConfiguration]=\"detailsConfiguration.groupMembersConfiguration\"\n      [bannedMembersConfiguration]=\"detailsConfiguration.bannedMembersConfiguration\"\n      [addMembersConfiguration]=\"detailsConfiguration.addMembersConfiguration\"\n      [onClose]=\"detailsConfiguration.onClose || closeDetailsPage\"\n      [listItemStyle]=\"detailsConfiguration.listItemStyle\"\n      [detailsStyle]=\"detailsConfiguration.detailsStyle\"\n      [avatarStyle]=\"detailsConfiguration.avatarStyle\"\n      [statusIndicatorStyle]=\"detailsConfiguration.statusIndicatorStyle\"\n      [leaveDialogStyle]=\"detailsConfiguration.leaveDialogStyle\"\n      [data]=\"setDetailsTemplate()\"\n      [customProfileView]=\"detailsConfiguration.customProfileView\"\n      [subtitleView]=\"detailsConfiguration.subtitleView\"\n      [hideProfile]=\"detailsConfiguration.hideProfile\"\n      [onError]=\"detailsConfiguration.onError\"\n      [closeButtonIconURL]=\"detailsConfiguration.closeButtonIconURL\"\n      [user]=\"user\" [group]=\"group\"></cometchat-details>\n  </div>\n</div>\n<ng-template #headerMenu>\n  <div class=\"cc-messages__headermenu\">\n    <div class=\"cc-messages__auxiliarymenu\"\n      *ngIf=\"getAuxilaryView(); else elseBlock\">\n      <ng-container\n        *ngTemplateOutlet=\"getAuxilaryView();context:{  user: user, group: group }\">\n      </ng-container>\n    </div>\n    <ng-template #elseBlock>\n      <cometchat-call-buttons *ngIf=\"enableCalling\" voiceCallIconText=\"\"\n        videoCallIconText=\"\" [user]=\"user\" [group]=\"group\"\n        [callButtonsStyle]=\"callButtonsStyle\">\n      </cometchat-call-buttons>\n    </ng-template>\n    <cometchat-button *ngIf=\"!hideDetails\" [iconURL]=\"infoIconStyle\"\n      [buttonStyle]=\"detailsButtonStyle\"\n      (cc-button-clicked)=\"openDetailsPage()\"></cometchat-button>\n  </div>\n</ng-template>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-messages__wrapper{position:relative;height:100%;width:100%}.cc-messages{display:flex;flex-direction:column;position:relative;height:100%;width:100%;box-sizing:border-box;justify-content:space-between}.cc-messages__headermenu{display:flex;justify-content:center;align-items:center}.cc-messages__threadedmessages,.cc-messages__details{position:absolute;top:0;left:0;height:100%;width:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;max-width:100%;z-index:1}.cc-messages__header{width:100%}.cc-messages__list{overflow:hidden;width:100%;height:100%}cometchat-threaded-messages{height:100%;display:flex}.cc-messages__composer{width:100%;display:flex;flex-direction:column;justify-content:flex-end}\n"], components: [{ type: AIAssistBotMessageListComponent, selector: "aiassist-bot-message-list", inputs: ["hideSearch", "footerView", "user", "group", "currentAskAIBot", "subtitleText", "sendIconUrl", "waitIcon", "errorIcon", "botFirstMessageText", "closeButtonIconURL", "sendButtonIconURL", "avatarStyle", "aiBotChatHeaderStyle", "aiBotChatContainerStyle", "datePattern", "alignment"] }, { type: CometChatMessageHeaderComponent, selector: "cometchat-message-header", inputs: ["avatarStyle", "statusIndicatorStyle", "messageHeaderStyle", "listItemStyle", "subtitleView", "disableUsersPresence", "disableTyping", "protectedGroupIcon", "passwordGroupIcon", "privateGroupIcon", "menu", "user", "group", "backButtonIconURL", "hideBackButton", "listItemView", "onError", "onBack"] }, { type: CometChatMessageListComponent, selector: "cometchat-message-list", inputs: ["hideError", "hideDateSeparator", "errorStateView", "loadingStateView", "emptyStateView", "errorStateText", "emptyStateText", "loadingIconURL", "user", "group", "disableReceipt", "hideReceipt", "disableSoundForMessages", "customSoundForMessages", "readIcon", "deliveredIcon", "sentIcon", "waitIcon", "errorIcon", "aiErrorIcon", "aiEmptyIcon", "alignment", "showAvatar", "datePattern", "timestampAlignment", "DateSeparatorPattern", "templates", "messagesRequestBuilder", "newMessageIndicatorText", "scrollToBottomOnNewMessages", "thresholdValue", "unreadMessageThreshold", "reactionsConfiguration", "disableReactions", "emojiKeyboardStyle", "apiConfiguration", "onThreadRepliesClick", "headerView", "footerView", "parentMessageId", "threadIndicatorIcon", "avatarStyle", "backdropStyle", "dateSeparatorStyle", "messageListStyle", "onError", "messageInformationConfiguration", "disableMentions", "textFormatters"] }, { type: CometChatMessageComposerComponent, selector: "cometchat-message-composer", inputs: ["user", "group", "disableSoundForMessages", "customSoundForMessage", "customSoundForMessages", "disableTypingEvents", "text", "placeholderText", "headerView", "onTextChange", "attachmentIconURL", "attachmentOptions", "secondaryButtonView", "auxilaryButtonView", "auxiliaryButtonsAlignment", "sendButtonView", "parentMessageId", "hideLiveReaction", "LiveReactionIconURL", "backButtonIconURL", "mentionsWarningText", "mentionsWarningStyle", "messageComposerStyle", "onSendButtonClick", "onError", "backdropStyle", "actionSheetStyle", "aiActionSheetStyle", "hideVoiceRecording", "mediaRecorderStyle", "aiOptionsStyle", "aiIconURL", "voiceRecordingIconURL", "voiceRecordingCloseIconURL", "voiceRecordingStartIconURL", "voiceRecordingStopIconURL", "voiceRecordingSubmitIconURL", "hideLayoutMode", "emojiIconURL", "userMemberWrapperConfiguration", "disableMentions", "textFormatters"], outputs: ["childEvent"] }, { type: CometChatThreadedMessagesComponent, selector: "cometchat-threaded-messages", inputs: ["onClose", "onError", "parentMessage", "title", "closeIconURL", "bubbleView", "messageActionView", "messageListConfiguration", "userMemberWrapperConfiguration", "messageComposerConfiguration", "threadedMessagesStyle", "hideMessageComposer", "messageComposerView", "messageListView", "disableSoundForMessages"] }, { type: CometChatDetailsComponent, selector: "cometchat-details", inputs: ["group", "user", "title", "closeButtonIconURL", "hideProfile", "subtitleView", "customProfileView", "data", "disableUsersPresence", "privateGroupIcon", "protectedGroupIcon", "passwordGroupIcon", "onError", "onClose", "leaveGroupConfirmButtonText", "leaveGroupCancelButtonText", "leaveGroupDialogMessage", "leaveGroupDialogStyle", "deleteGroupConfirmButtonText", "deleteGroupDialogMessage", "deleteGroupCancelButtonText", "deleteGroupDialogStyle", "transferOwnershipConfirmButtonText", "transferOwnershipDialogMessage", "transferOwnershipCancelButtonText", "transferOwnershipDialogStyle", "addMembersConfiguration", "bannedMembersConfiguration", "groupMembersConfiguration", "transferOwnershipConfiguration", "statusIndicatorStyle", "backdropStyle", "avatarStyle", "detailsStyle", "listItemStyle"] }, { type: CometChatCallButtonsComponent, selector: "cometchat-call-buttons", inputs: ["user", "group", "voiceCallIconURL", "voiceCallIconText", "voiceCallIconHoverText", "videoCallIconURL", "videoCallIconText", "videoCallIconHoverText", "onVoiceCallClick", "onVideoCallClick", "onError", "callButtonsStyle", "outgoingCallConfiguration", "ongoingCallConfiguration"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessagesComponent, decorators: [{
             type: Component,
             args: [{ selector: "cometchat-messages", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-messages__wrapper\">\n  <cometchat-backdrop *ngIf=\"showAiBotChat\">\n    <aiassist-bot-message-list [user]=\"user\" [group]=\"group\"\n      [currentAskAIBot]=\"currentAskAIBot\"></aiassist-bot-message-list>\n  </cometchat-backdrop>\n  <div class=\"cc-messages\" [ngStyle]=\"chatListStyle()\" *ngIf=\"user || group\">\n    <div class=\"cc-messages__header\" *ngIf=\"!hideMessageHeader\">\n      <div *ngIf=\"messageHeaderView; else customHeaderView\"\n        class=\"cc-messages__header-customview\">\n        <ng-container\n          *ngTemplateOutlet=\"messageHeaderView;context:{  user: user, group: group }\">\n        </ng-container>\n      </div>\n      <ng-template #customHeaderView>\n        <cometchat-message-header [user]=\"user\" [group]=\"group\"\n          [subtitleView]=\"messageHeaderConfiguration.subtitleView\"\n          [disableUsersPresence]=\"messageHeaderConfiguration.disableUsersPresence\"\n          [protectedGroupIcon]=\"messageHeaderConfiguration.protectedGroupIcon\"\n          [passwordGroupIcon]=\"messageHeaderConfiguration.passwordGroupIcon\"\n          [privateGroupIcon]=\"messageHeaderConfiguration.privateGroupIcon\"\n          [menu]=\"headerMenu\"\n          [messageHeaderStyle]=\"messageHeaderConfiguration.messageHeaderStyle\"\n          [backButtonIconURL]=\"messageHeaderConfiguration.backButtonIconURL\"\n          [hideBackButton]=\"messageHeaderConfiguration.hideBackButton\"\n          [onError]=\"messageHeaderConfiguration.onError\"\n          [onBack]=\"messageHeaderConfiguration.onBack\"\n          [listItemStyle]=\"messageHeaderConfiguration.listItemStyle\"\n          [statusIndicatorStyle]=\"messageHeaderConfiguration.statusIndicatorStyle\"\n          [avatarStyle]=\"messageHeaderConfiguration.avatarStyle\">\n        </cometchat-message-header>\n      </ng-template>\n    </div>\n    <div class=\"cc-messages__list\" *ngIf=\"!messageListView\">\n      <cometchat-message-list #messageListRef\n        [disableReactions]=\"messageListConfiguration?.disableReactions!\"\n        [emojiKeyboardStyle]=\"messageListConfiguration?.emojiKeyboardStyle!\"\n        [threadIndicatorIcon]=\"messageListConfiguration?.threadIndicatorIcon!\"\n        [reactionsConfiguration]=\"messageListConfiguration?.reactionsConfiguration!\"\n        [messageInformationConfiguration]=\"\n        messageListConfiguration.messageInformationConfiguration\"\n        [disableSoundForMessages]=\"disableSoundForMessages\"\n        [customSoundForMessages]=\"customSoundForIncomingMessages\"\n        [emptyStateView]=\"messageListConfiguration.emptyStateView\"\n        [loadingIconURL]=\"messageListConfiguration?.loadingIconURL!\"\n        [loadingStateView]=\"messageListConfiguration.loadingStateView\"\n        [user]=\"user\" [group]=\"group\"\n        [errorStateView]=\"messageListConfiguration.errorStateView\"\n        [disableReceipt]=\"messageListConfiguration.disableReceipt\"\n        [hideReceipt]=\"messageListConfiguration.hideReceipt\"\n        [readIcon]=\"messageListConfiguration.readIcon\"\n        [deliveredIcon]=\"messageListConfiguration.deliveredIcon\"\n        [sentIcon]=\"messageListConfiguration.sentIcon\"\n        [waitIcon]=\"messageListConfiguration.waitIcon\"\n        [errorIcon]=\"messageListConfiguration.errorIcon\"\n        [alignment]=\"messageListConfiguration.alignment\"\n        [showAvatar]=\"messageListConfiguration.showAvatar\"\n        [datePattern]=\"messageListConfiguration.datePattern\"\n        [timestampAlignment]=\"messageListConfiguration.timestampAlignment\"\n        [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n        [templates]=\"messageListConfiguration.templates\"\n        [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder\"\n        [thresholdValue]=\"messageListConfiguration.thresholdValue\"\n        [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick || openThreadView\"\n        [headerView]=\"messageListConfiguration.headerView\"\n        [footerView]=\"messageListConfiguration.footerView\"\n        [avatarStyle]=\"messageListConfiguration.avatarStyle\"\n        [scrollToBottomOnNewMessages]=\"messageListConfiguration.scrollToBottomOnNewMessages\"\n        [backdropStyle]=\"messageListConfiguration.backdropStyle\"\n        [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\"\n        [messageListStyle]=\"messageListConfiguration.messageListStyle\"\n        [onError]=\"messageListConfiguration.onError\"\n        [hideError]=\"messageListConfiguration.hideError\"\n        [disableMentions]=\"messageListConfiguration.disableMentions\"\n        [textFormatters]=\"messageListConfiguration?.textFormatters\">\n      </cometchat-message-list>\n    </div>\n    <ng-container *ngIf=\"messageListView\">\n      <ng-container\n        *ngTemplateOutlet=\"messageListView;context:{  user: user, group: group }\">\n      </ng-container>\n    </ng-container>\n\n    <div class=\"cc-messages__composer\"\n      *ngIf=\"!messageComposerView && !hideMessageComposer\">\n      <cometchat-message-composer #messageComposerRef\n        [hideVoiceRecording]=\"messageComposerConfiguration.hideVoiceRecording\"\n        [disableSoundForMessages]=\"disableSoundForMessages\"\n        [voiceRecordingStopIconURL]=\"messageComposerConfiguration.voiceRecordingStopIconURL\"\n        [voiceRecordingStartIconURL]=\"messageComposerConfiguration.voiceRecordingStartIconURL\"\n        [voiceRecordingCloseIconURL]=\"messageComposerConfiguration.voiceRecordingCloseIconURL\"\n        [voiceRecordingSubmitIconURL]=\"messageComposerConfiguration.voiceRecordingSubmitIconURL\"\n        [mediaRecorderStyle]=\"messageComposerConfiguration.mediaRecorderStyle\"\n        [customSoundForMessages]=\"customSoundForOutgoingMessages\" [user]=\"user\"\n        [group]=\"group\" [text]=\"messageComposerConfiguration.text\"\n        [headerView]=\"messageComposerConfiguration.headerView\"\n        [onTextChange]=\"messageComposerConfiguration.onTextChange\"\n        [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n        [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\"\n        [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\"\n        [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\"\n        [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n        [sendButtonView]=\"messageComposerConfiguration.sendButtonView\"\n        [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\"\n        [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\"\n        [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\"\n        [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n        [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n        [onError]=\"messageComposerConfiguration.onError\"\n        [actionSheetStyle]=\"messageComposerConfiguration.actionSheetStyle\"\n        [aiOptionsStyle]=\"messageComposerConfiguration.AIOptionsStyle\"\n        [aiIconURL]=\"messageComposerConfiguration.AIIconURL\"\n        [userMemberWrapperConfiguration]=\"messageComposerConfiguration.userMemberWrapperConfiguration\"\n        [textFormatters]=\"messageComposerConfiguration?.textFormatters\"\n        [disableMentions]=\"messageComposerConfiguration.disableMentions\"\n        [mentionsWarningText]=\"messageComposerConfiguration?.mentionsWarningText\"\n        [mentionsWarningStyle]=\"messageComposerConfiguration?.mentionsWarningStyle\">\n      </cometchat-message-composer>\n    </div>\n    <div *ngIf=\"messageComposerView && !hideMessageComposer\"\n      class=\"cc-messages__composer--customview\">\n      <ng-container\n        *ngTemplateOutlet=\"messageComposerView;context:{  user: user, group: group }\">\n      </ng-container>\n    </div>\n  </div>\n  <div class=\"cc-messages__livereaction\">\n    <cometchat-live-reaction *ngIf=\"liveReaction\"\n      [reactionIconURL]=\"reactionName\"\n      [liveReactionStyle]=\"liveReactionStyle\"></cometchat-live-reaction>\n  </div>\n  <div *ngIf=\"openThreadedMessages\" class=\"cc-messages__threadedmessages\">\n    <cometchat-threaded-messages [onClose]=\"closeThreadView\"\n      [threadedMessagesStyle]=\"threadedMessageConfiguration.threadedMessagesStyle\"\n      [messageActionView]=\"threadedMessageConfiguration.messageActionView\"\n      [closeIconURL]=\"threadedMessageConfiguration.closeIconURL\"\n      [onError]=\"threadedMessageConfiguration.onError\"\n      [bubbleView]=\"threadedMessageConfiguration.bubbleView || parentBubbleView\"\n      [parentMessage]=\"threadMessageObject\" [user]=\"user\" [group]=\"group\"\n      [messageListConfiguration]=\"threadedMessageConfiguration.messageListConfiguration\"\n      [messageComposerView]=\"threadedMessageConfiguration.messageComposerView\"\n      [messageListView]=\"threadedMessageConfiguration.messageListView\"\n      [hideMessageComposer]=\"threadedMessageConfiguration.hideMessageComposer\"\n      [messageComposerConfiguration]=\"threadedMessageConfiguration.messageComposerConfiguration\"\n      [disableSoundForMessages]=\"threadedMessageConfiguration.disableSoundForMessages\"\n      ></cometchat-threaded-messages>\n  </div>\n\n  <div *ngIf=\"openDetails\" class=\"cc-messages__details\">\n    <cometchat-details\n      [protectedGroupIcon]=\"detailsConfiguration.protectedGroupIcon\"\n      [passwordGroupIcon]=\"detailsConfiguration.passwordGroupIcon\"\n      [privateGroupIcon]=\"detailsConfiguration.privateGroupIcon\"\n      [backdropStyle]=\"detailsConfiguration.backdropStyle\"\n      [disableUsersPresence]=\"detailsConfiguration?.disableUsersPresence!\"\n      [transferOwnershipConfiguration]=\"detailsConfiguration.transferOwnershipConfiguration\"\n      [groupMembersConfiguration]=\"detailsConfiguration.groupMembersConfiguration\"\n      [bannedMembersConfiguration]=\"detailsConfiguration.bannedMembersConfiguration\"\n      [addMembersConfiguration]=\"detailsConfiguration.addMembersConfiguration\"\n      [onClose]=\"detailsConfiguration.onClose || closeDetailsPage\"\n      [listItemStyle]=\"detailsConfiguration.listItemStyle\"\n      [detailsStyle]=\"detailsConfiguration.detailsStyle\"\n      [avatarStyle]=\"detailsConfiguration.avatarStyle\"\n      [statusIndicatorStyle]=\"detailsConfiguration.statusIndicatorStyle\"\n      [leaveDialogStyle]=\"detailsConfiguration.leaveDialogStyle\"\n      [data]=\"setDetailsTemplate()\"\n      [customProfileView]=\"detailsConfiguration.customProfileView\"\n      [subtitleView]=\"detailsConfiguration.subtitleView\"\n      [hideProfile]=\"detailsConfiguration.hideProfile\"\n      [onError]=\"detailsConfiguration.onError\"\n      [closeButtonIconURL]=\"detailsConfiguration.closeButtonIconURL\"\n      [user]=\"user\" [group]=\"group\"></cometchat-details>\n  </div>\n</div>\n<ng-template #headerMenu>\n  <div class=\"cc-messages__headermenu\">\n    <div class=\"cc-messages__auxiliarymenu\"\n      *ngIf=\"getAuxilaryView(); else elseBlock\">\n      <ng-container\n        *ngTemplateOutlet=\"getAuxilaryView();context:{  user: user, group: group }\">\n      </ng-container>\n    </div>\n    <ng-template #elseBlock>\n      <cometchat-call-buttons *ngIf=\"enableCalling\" voiceCallIconText=\"\"\n        videoCallIconText=\"\" [user]=\"user\" [group]=\"group\"\n        [callButtonsStyle]=\"callButtonsStyle\">\n      </cometchat-call-buttons>\n    </ng-template>\n    <cometchat-button *ngIf=\"!hideDetails\" [iconURL]=\"infoIconStyle\"\n      [buttonStyle]=\"detailsButtonStyle\"\n      (cc-button-clicked)=\"openDetailsPage()\"></cometchat-button>\n  </div>\n</ng-template>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-messages__wrapper{position:relative;height:100%;width:100%}.cc-messages{display:flex;flex-direction:column;position:relative;height:100%;width:100%;box-sizing:border-box;justify-content:space-between}.cc-messages__headermenu{display:flex;justify-content:center;align-items:center}.cc-messages__threadedmessages,.cc-messages__details{position:absolute;top:0;left:0;height:100%;width:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;max-width:100%;z-index:1}.cc-messages__header{width:100%}.cc-messages__list{overflow:hidden;width:100%;height:100%}cometchat-threaded-messages{height:100%;display:flex}.cc-messages__composer{width:100%;display:flex;flex-direction:column;justify-content:flex-end}\n"] }]
@@ -18057,7 +18115,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 +18411,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 +18525,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 +18692,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 +19232,7 @@ class CometChatGroupsWithMessagesComponent {
                 border: this.groupsWithMessagesStyle.border,
                 borderRadius: this.groupsWithMessagesStyle.borderRadius,
                 background: this.groupsWithMessagesStyle.background || this.themeService.theme.palette.getBackground(),
+                position: 'relative'
             };
         };
     }
@@ -19229,8 +19294,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",
@@ -19245,7 +19315,7 @@ class CometChatGroupsWithMessagesComponent {
             this.messagesConfiguration.messageListConfiguration.messageInformationConfiguration.messageInformationStyle.width = divWidth + "px";
         }
         else {
-            this.createGroupStyle.height = "620px";
+            this.createGroupStyle.height = this.createGroupConfiguration.createGroupStyle.height || "620px";
             this.messagesConfiguration.detailsConfiguration.transferOwnershipConfiguration.transferOwnershipStyle.height = "650px";
             this.messagesConfiguration.detailsConfiguration.transferOwnershipConfiguration.transferOwnershipStyle.width = "360px";
         }
@@ -19539,6 +19609,7 @@ class CometChatUsersWithMessagesComponent {
                 border: this.usersWithMessagesStyle.border,
                 borderRadius: this.usersWithMessagesStyle.borderRadius,
                 background: this.usersWithMessagesStyle.background || this.themeService.theme.palette.getBackground(),
+                position: 'relative'
             };
         };
     }
@@ -19546,8 +19617,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 +21841,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",