@cometchat/chat-uikit-angular 4.0.1-beta1 → 4.0.1

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

@@ -1,4 +1,4 @@
-import { ConversationUtils, CallingDetailsUtils, ExtensionsDataSource as ExtensionsDataSource$1, CollaborativeDocumentConstants, ExtensionsId, CollaborativeWhiteboardConstants, PollsConstants, CometChatUIKitUtility, CometChatSoundManager, SmartRepliesConfiguration, StickersConstants, StickersConfiguration, CometChatUIKitCalls, OutgoingCallStyle, OutgoingCallConfiguration, CallScreenConfiguration, CallButtonsStyle, StorageUtils, IncomingCallStyle, UsersStyle, AddMembersStyle, MessageHeaderStyle, ListStyle, BannedMembersStyle, MessageReceiptUtils, ConversationsStyle, MessageInformationStyle, MessageInformationConfiguration, MessageTranslationConstants, MessageTranslationStyle, ReactionsConstants, LinkPreviewConstants, ThumbnailGenerationConstants, MessageListStyle, LinkPreviewStyle, SmartRepliesConstants, MessageComposerStyle, MessageListConfiguration, MessageComposerConfiguration, ThreadedMessagesStyle, GroupMemberUtils, GroupMembersStyle, TransferOwnershipStyle, AddMembersConfiguration, BannedMembersConfiguration, GroupMembersConfiguration, TransferOwnershipConfiguration, DetailsUtils, DetailsStyle, MessageHeaderConfiguration, ThreadedMessagesConfiguration, DetailsConfiguration, MessagesStyle, GroupsStyle, UsersConfiguration, GroupsConfiguration, ContactsStyle, TabItemStyle, MessagesConfiguration, ConversationsConfiguration, ContactsConfiguration, WithMessagesStyle, CreateGroupConfiguration, JoinGroupConfiguration } from '@cometchat/uikit-shared';
+import { ConversationUtils, CallingDetailsUtils, ExtensionsDataSource as ExtensionsDataSource$1, CollaborativeDocumentConstants, ExtensionsId, CollaborativeWhiteboardConstants, PollsConstants, CometChatUIKitUtility, CometChatSoundManager, SmartRepliesConfiguration, StickersConstants, StickersConfiguration, AIExtensionDataSource, CometChatUIKitCalls, OutgoingCallStyle, OutgoingCallConfiguration, CallScreenConfiguration, CallButtonsStyle, StorageUtils, IncomingCallStyle, UsersStyle, AddMembersStyle, MessageHeaderStyle, ListStyle, BannedMembersStyle, MessageReceiptUtils, ConversationsStyle, MessageInformationStyle, MessageInformationConfiguration, MessageTranslationConstants, MessageTranslationStyle, ReactionsConstants, LinkPreviewConstants, ThumbnailGenerationConstants, MessageListStyle, LinkPreviewStyle, SmartRepliesConstants, MessageComposerStyle, MessageListConfiguration, MessageComposerConfiguration, ThreadedMessagesStyle, GroupMemberUtils, GroupMembersStyle, TransferOwnershipStyle, AddMembersConfiguration, BannedMembersConfiguration, GroupMembersConfiguration, TransferOwnershipConfiguration, DetailsUtils, DetailsStyle, MessageHeaderConfiguration, ThreadedMessagesConfiguration, DetailsConfiguration, MessagesStyle, GroupsStyle, UsersConfiguration, GroupsConfiguration, ContactsStyle, TabItemStyle, MessagesConfiguration, ConversationsConfiguration, ContactsConfiguration, WithMessagesStyle, CreateGroupConfiguration, JoinGroupConfiguration } from '@cometchat/uikit-shared';
 export * from '@cometchat/uikit-shared';
 import { CometChatMessageOption, CometChatUIKitConstants, localize, fontHelper, CometChatMessageTemplate, CometChatMessageComposerAction, CometChatTheme, CometChatMessageEvents, MessageStatus, CometChatUIEvents, CometChatLocalize, CallWorkflow, CometChatCallEvents, IconButtonAlignment, TitleAlignment, States, SelectionMode, CometChatUserEvents, CometChatGroupEvents, DatePatterns, CometChatConversationEvents, MessageBubbleAlignment, Receipts, MessageListAlignment, TimestampAlignment, DocumentIconAlignment, Placement, AuxiliaryButtonAlignment, TabAlignment, TabsVisibility } from '@cometchat/uikit-resources';
 export * from '@cometchat/uikit-resources';
@@ -1310,6 +1310,128 @@ class ThumbnailGenerationExtension extends ExtensionsDataSource$1 {
     }
 }
 
+class AIEnablerDecorator extends DataSourceDecorator {
+    constructor(dataSource, features) {
+        super(dataSource);
+    }
+    getId() {
+        return "aienabler";
+    }
+}
+
+class AISmartRepliesExtensionDecorator extends DataSourceDecorator {
+    constructor(dataSource) {
+        super(dataSource);
+    }
+    getId() {
+        return "aismartreply";
+    }
+}
+
+class AISmartRepliesExtension extends AIExtensionDataSource {
+    constructor() {
+        super();
+    }
+    addExtension() {
+        ChatConfigurator.enable((dataSource) => new AISmartRepliesExtensionDecorator(dataSource));
+    }
+    getExtensionId() {
+        return "smart-replies";
+    }
+    enable() {
+        this.addExtension();
+    }
+}
+
+class AIConversationStarterDecorator extends DataSourceDecorator {
+    constructor(dataSource) {
+        super(dataSource);
+    }
+    getId() {
+        return "aiconversationstarter";
+    }
+}
+
+class AIConversationStarterExtension extends AIExtensionDataSource {
+    constructor() {
+        super();
+    }
+    addExtension() {
+        ChatConfigurator.enable((dataSource) => new AIConversationStarterDecorator(dataSource));
+    }
+    getExtensionId() {
+        return "conversation-starter";
+    }
+    enable() {
+        this.addExtension();
+    }
+}
+
+class AIEnabler extends AIExtensionDataSource {
+    constructor(defaultFeatures) {
+        super();
+        this.defaultAIFeatures = defaultFeatures;
+    }
+    addExtension() {
+    }
+    getExtensionId() {
+        return "ai-enabler";
+    }
+    enable() {
+        var _a;
+        let features = {};
+        const processFeatures = (feature) => {
+            return CometChat.isAIFeatureEnabled(feature.getExtensionId())
+                .then((response) => {
+                if (response) {
+                    feature === null || feature === void 0 ? void 0 : feature.enable();
+                    if (feature.getExtensionId() !== "conversation-starter") {
+                        features[feature.getExtensionId()] = {
+                            enabled: true,
+                            configuration: feature.getConfiguration(),
+                            enabler: feature,
+                        };
+                    }
+                }
+            })
+                .catch((err) => {
+                console.error(err);
+            });
+        };
+        if (this.defaultAIFeatures && this.defaultAIFeatures.length >= 1) {
+            const promises = this.defaultAIFeatures.map((feature) => processFeatures(feature));
+            Promise.all(promises)
+                .then(() => {
+                if (Object.keys(features).length > 0) {
+                    ChatConfigurator.enable((dataSource) => new AIEnablerDecorator(dataSource, features));
+                }
+            })
+                .catch((err) => {
+                console.error(err);
+            });
+        }
+        else if (((_a = this.defaultAIFeatures) === null || _a === void 0 ? void 0 : _a.length) === 0) {
+            return;
+        }
+        else {
+            const defaultFeatures = [
+                new AISmartRepliesExtension(),
+                new AIConversationStarterExtension(),
+            ];
+            const promises = defaultFeatures.map((feature) => processFeatures(feature));
+            Promise.all(promises)
+                .then(() => {
+                if (Object.keys(features).length > 0) {
+                    ChatConfigurator.enable((dataSource) => new AIEnablerDecorator(dataSource, features));
+                }
+            })
+                .catch((err) => {
+                console.error(err);
+            });
+        }
+    }
+}
+
 class CometChatUIKit {
     static getDataSource() {
         return ChatConfigurator.getDataSource();
@@ -1381,11 +1503,21 @@ class CometChatUIKit {
         }
     }
     static initiateAfterLogin() {
+        var _a, _b;
         if (CometChatUIKit.uiKitSettings != null) {
             this.enableCalling();
-            this.defaultExtensions.forEach((extension) => {
-                extension === null || extension === void 0 ? void 0 : extension.enable();
-            });
+            let extensionList = ((_a = this.uiKitSettings) === null || _a === void 0 ? void 0 : _a.extensions) || this.defaultExtensions;
+            if (extensionList.length > 0) {
+                extensionList.forEach((extension) => {
+                    extension === null || extension === void 0 ? void 0 : extension.enable();
+                });
+            }
+            if (this.uiKitSettings.aiFeatures) {
+                (_b = this.uiKitSettings.aiFeatures) === null || _b === void 0 ? void 0 : _b.enable();
+            }
+            else {
+                new AIEnabler().enable();
+            }
         }
     }
     static login(details) {
@@ -6829,6 +6961,9 @@ class CometChatMessageListComponent {
         this.imageModerationStyle = {};
         this.timestampEnum = TimestampAlignment;
         this.chatChanged = true;
+        this.starterErrorStateText = localize("SOMETHING_WRONG");
+        this.starterEmptyStateText = localize("NO_MESSAGES_FOUND");
+        this.starterLoadingStateText = localize("GENERATING_ICEBREAKERS");
         this.timeStampColor = "";
         this.timeStampFont = "";
         this.smartReplyStyle = {
@@ -6836,7 +6971,12 @@ class CometChatMessageListComponent {
             height: "100%",
             border: "none",
         };
+        this.conversationStarterStyle = {};
         this.showSmartReply = false;
+        this.enableConversationStarter = false;
+        this.showConversationStarter = false;
+        this.conversationStarterState = States.loading;
+        this.conversationStarterReplies = [];
         this.smartReplyMessage = null;
         this.enableSmartReply = false;
         this.timeStampBackground = "";
@@ -7233,10 +7373,15 @@ class CometChatMessageListComponent {
                 // No Messages Found
                 if (messageList.length === 0 && this.messagesList.length === 0) {
                     this.state = States.empty;
+                    if (!this.parentMessageId && this.enableConversationStarter) {
+                        this.fetchConversationStarter();
+                    }
                     this.ref.detectChanges();
                     return;
                 }
                 if (messageList && messageList.length > 0) {
+                    this.showConversationStarter = false;
+                    this.conversationStarterReplies = [];
                     if (this.firstReload) {
                         this.lastMessageId = Number(messageList[messageList.length - 1].getId());
                     }
@@ -7746,6 +7891,14 @@ class CometChatMessageListComponent {
                 this.closeSmartReply();
             }
         };
+        this.sendConversationStarter = (event) => {
+            var _a;
+            let reply = (_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.reply;
+            CometChatUIEvents.ccComposeMessage.next(reply);
+            this.showConversationStarter = false;
+            this.conversationStarterReplies = [];
+            this.ref.detectChanges();
+        };
         /**
       * styling part
       */
@@ -7766,6 +7919,12 @@ class CometChatMessageListComponent {
                 textColor: this.messageListStyle.errorStateTextColor,
             };
         };
+        this.conversationStarterStateStyle = () => {
+            return {
+                textFont: fontHelper(this.theme.typography.title2),
+                textColor: this.theme.palette.getAccent600(),
+            };
+        };
         this.emptyStyle = () => {
             return {
                 textFont: this.messageListStyle.emptyStateTextFont,
@@ -7777,6 +7936,11 @@ class CometChatMessageListComponent {
                 iconTint: this.messageListStyle.loadingIconTint,
             };
         };
+        this.conversationStarterLoader = () => {
+            return {
+                iconTint: this.theme.palette.getAccent600(),
+            };
+        };
         this.wrapperStyle = () => {
             return {
                 height: this.messageListStyle.height,
@@ -7830,6 +7994,8 @@ class CometChatMessageListComponent {
     ngOnChanges(changes) {
         try {
             if (changes[CometChatUIKitConstants.MessageReceiverType.user] || changes[CometChatUIKitConstants.MessageReceiverType.group]) {
+                this.showConversationStarter = false;
+                this.conversationStarterReplies = [];
                 this.state = States.loading;
                 this.messagesList = [];
                 this.ref.detectChanges();
@@ -8034,6 +8200,7 @@ class CometChatMessageListComponent {
         }
     }
     ngOnDestroy() {
+        this.showConversationStarter = false;
         this.unsubscribeToEvents();
         try {
             //Removing Message Listeners
@@ -8046,6 +8213,7 @@ class CometChatMessageListComponent {
                 this.onError(CometChatException(error));
             }
         }
+        this.ref.detectChanges();
     }
     reactionsStyle(message) {
         var _a;
@@ -8473,6 +8641,9 @@ class CometChatMessageListComponent {
         if (ChatConfigurator.names.includes('calling')) {
             this.enableCalling = true;
         }
+        if (ChatConfigurator.names.includes('aiconversationstarter')) {
+            this.enableConversationStarter = true;
+        }
     }
     openImageInFullScreen(message) {
         var _a, _b;
@@ -8633,6 +8804,7 @@ class CometChatMessageListComponent {
             buttonTextFont: fontHelper(this.themeService.theme.typography.text3)
         };
         this.smartReplyStyle = Object.assign({ replyTextFont: fontHelper(this.themeService.theme.typography.caption1), replyTextColor: this.themeService.theme.palette.getAccent(), replyBackground: this.themeService.theme.palette.getBackground(), boxShadow: `0px 0px 1px ${this.themeService.theme.palette.getAccent600()}`, closeIconTint: this.themeService.theme.palette.getAccent600(), background: this.themeService.theme.palette.getBackground() }, this.smartReplyStyle);
+        this.conversationStarterStyle = Object.assign({ replyTextFont: fontHelper(this.themeService.theme.typography.caption1), replyTextColor: this.themeService.theme.palette.getAccent(), replyBackground: this.themeService.theme.palette.getBackground(), boxShadow: `0px 0px 1px ${this.themeService.theme.palette.getAccent600()}`, closeIconTint: this.themeService.theme.palette.getAccent600(), background: this.themeService.theme.palette.getBackground() }, this.conversationStarterStyle);
         this.fullScreenViewerStyle.closeIconTint = this.themeService.theme.palette.getPrimary();
         let defaultStyle = new MessageListStyle({
             background: this.themeService.theme.palette.getBackground(),
@@ -8937,6 +9109,9 @@ class CometChatMessageListComponent {
      */
     messageUpdate(key = null, message = null, group = null, options = null) {
         try {
+            this.showConversationStarter = false;
+            this.conversationStarterReplies = [];
+            this.ref.detectChanges();
             switch (key) {
                 case CometChatUIKitConstants.messages.TEXT_MESSAGE_RECEIVED:
                 case CometChatUIKitConstants.messages.MEDIA_MESSAGE_RECEIVED:
@@ -9385,6 +9560,9 @@ class CometChatMessageListComponent {
                         break;
                     }
                     case MessageStatus.success: {
+                        this.showConversationStarter = false;
+                        this.conversationStarterReplies = [];
+                        this.ref.detectChanges();
                         if (message.getParentMessageId() || this.parentMessageId) {
                             this.updateReplyCount(message);
                         }
@@ -9419,6 +9597,41 @@ class CometChatMessageListComponent {
             this.addMessage(call);
         });
     }
+    fetchConversationStarter() {
+        this.showConversationStarter = true;
+        this.conversationStarterState = States.loading;
+        let receiverType = this.user ? CometChatUIKitConstants.MessageReceiverType.user : CometChatUIKitConstants.MessageReceiverType.group;
+        let receiverId = this.user ? this.user.getUid() : this.group.getGuid();
+        CometChat.getConversationStarter(receiverId, receiverType).then((response) => {
+            var _a;
+            if (response) {
+                Object.keys(response).forEach((reply) => {
+                    if (response[reply] && response[reply] != "") {
+                        this.conversationStarterReplies.push(response[reply]);
+                    }
+                });
+                if (this.conversationStarterReplies && this.conversationStarterReplies.length > 0 && ((_a = this.messagesList) === null || _a === void 0 ? void 0 : _a.length) <= 0) {
+                    this.conversationStarterState = States.loaded;
+                    this.ref.detectChanges();
+                }
+                else {
+                    this.conversationStarterState = States.empty;
+                    this.ref.detectChanges();
+                }
+            }
+            else {
+                this.conversationStarterState = States.empty;
+                this.ref.detectChanges();
+            }
+        })
+            .catch((err) => {
+            if (this.onError) {
+                this.onError(err);
+            }
+            this.conversationStarterState = States.error;
+            this.ref.detectChanges();
+        });
+    }
     getReplies() {
         var _a, _b, _c;
         let smartReply = this.smartReplyMessage;
@@ -9445,10 +9658,10 @@ class CometChatMessageListComponent {
     }
 }
 CometChatMessageListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageListComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
-CometChatMessageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatMessageListComponent, selector: "cometchat-message-list", inputs: { hideError: "hideError", errorStateView: "errorStateView", loadingStateView: "loadingStateView", emptyStateView: "emptyStateView", errorStateText: "errorStateText", emptyStateText: "emptyStateText", loadingIconURL: "loadingIconURL", user: "user", group: "group", disableReceipt: "disableReceipt", disableSoundForMessages: "disableSoundForMessages", customSoundForMessages: "customSoundForMessages", readIcon: "readIcon", deliveredIcon: "deliveredIcon", sentIcon: "sentIcon", waitIcon: "waitIcon", errorIcon: "errorIcon", alignment: "alignment", showAvatar: "showAvatar", datePattern: "datePattern", timestampAlignment: "timestampAlignment", DateSeparatorPattern: "DateSeparatorPattern", templates: "templates", messagesRequestBuilder: "messagesRequestBuilder", newMessageIndicatorText: "newMessageIndicatorText", scrollToBottomOnNewMessages: "scrollToBottomOnNewMessages", thresholdValue: "thresholdValue", onThreadRepliesClick: "onThreadRepliesClick", headerView: "headerView", footerView: "footerView", parentMessageId: "parentMessageId", avatarStyle: "avatarStyle", backdropStyle: "backdropStyle", dateSeparatorStyle: "dateSeparatorStyle", messageListStyle: "messageListStyle", onError: "onError", messageInformationConfiguration: "messageInformationConfiguration" }, viewQueries: [{ propertyName: "listScroll", first: true, predicate: ["listScroll"], descendants: true }, { propertyName: "bottom", first: true, predicate: ["bottom"], descendants: true }, { propertyName: "top", first: true, predicate: ["top"], descendants: true }, { propertyName: "textBubble", first: true, predicate: ["textBubble"], descendants: true }, { propertyName: "threadMessageBubble", first: true, predicate: ["threadMessageBubble"], descendants: true }, { propertyName: "fileBubble", first: true, predicate: ["fileBubble"], descendants: true }, { propertyName: "audioBubble", first: true, predicate: ["audioBubble"], descendants: true }, { propertyName: "videoBubble", first: true, predicate: ["videoBubble"], descendants: true }, { propertyName: "imageBubble", first: true, predicate: ["imageBubble"], descendants: true }, { propertyName: "stickerBubble", first: true, predicate: ["stickerBubble"], descendants: true }, { propertyName: "documentBubble", first: true, predicate: ["documentBubble"], descendants: true }, { propertyName: "whiteboardBubble", first: true, predicate: ["whiteboardBubble"], descendants: true }, { propertyName: "popoverRef", first: true, predicate: ["popoverRef"], descendants: true }, { propertyName: "directCalling", first: true, predicate: ["directCalling"], descendants: true }, { propertyName: "pollBubble", first: true, predicate: ["pollBubble"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-message-list__wrapper\" [ngStyle]=\"wrapperStyle()\" *ngIf=\"!openContactsView\">\n  <div class=\"cc-message-list__header-view\">\n<div *ngIf=\"headerView\">\n  <ng-container *ngTemplateOutlet=\"headerView\">\n  </ng-container>\n</div>\n        </div>\n  <div class=\"cc-message-list\" #listScroll [ngStyle]=\"{height: showSmartReply ? '92%' : '100%'}\">\n    <div class=\"cc-message-list__top\" #top>\n    </div>\n    <div class=\"cc-message-list__decorator-message\" *ngIf=\"state == states.loading || state == states.error  || state == states.empty \"\n      [ngStyle]=\"messageContainerStyle()\">\n      <div class=\"cc-message-list__loading-view\" *ngIf=\"state == states.loading \">\n        <cometchat-loader [iconURL]=\"loadingIconURL\" [loaderStyle]=\"loadingStyle()\">\n        </cometchat-loader>\n        <span class=\"cc-message-list__customview--loading\" *ngIf=\"state == states.loading  && loadingStateView\">\n          <ng-container *ngTemplateOutlet=\"loadingStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"cc-message-list__error-view\" *ngIf=\"state == states.error  && !hideError \">\n        <cometchat-label [labelStyle]=\"errorStyle()\" *ngIf=\"state == states.error  && !hideError && !errorStateView\" [text]=\"errorStateText\"\n          >\n        </cometchat-label>\n        <span class=\"cc-message-list__custom-view--error\" *ngIf=\"state == states.error  && !hideError && errorStateView\">\n          <ng-container *ngTemplateOutlet=\"errorStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"cc-message-list__empty-view\" *ngIf=\"state == states.empty\">\n        <cometchat-label [labelStyle]=\"emptyStyle()\" *ngIf=\"state == states.empty && !emptyStateView\" [text]=\"emptyStateText\"\n          >\n        </cometchat-label>\n        <span class=\"cc-message-list__custom-view--empty\" *ngIf=\"state == states.empty && emptyStateView\">\n          <ng-container *ngTemplateOutlet=\"emptyStateView\">\n          </ng-container>\n        </span>\n      </div>\n    </div>\n    <div class=\"cc-message-list__bubble\" *ngFor=\"let message of messagesList; let i = index\">\n      <div class=\"cc-message-list__date-container\" *ngIf=\"(i === 0) && message?.getSentAt()\">\n        <span class=\"cc-message-list__date\" >\n          <cometchat-date [timestamp]=\"message!.getSentAt()\"  [pattern]=\"DateSeparatorPattern\" [dateStyle]=\"dateSeparatorStyle\"\n           >\n          </cometchat-date>\n        </span>\n      </div>\n      <div class=\"cc-message-list__date-container\" *ngIf=\"(i > 0 && isDateDifferent(messagesList[i - 1]?.getSentAt(), messagesList[i]?.getSentAt())) && message?.getSentAt()\">\n        <span class=\"cc-message-list__date\"  >\n          <cometchat-date [timestamp]=\"message?.getSentAt()\" [pattern]=\"DateSeparatorPattern\"   [dateStyle]=\"dateSeparatorStyle\"\n           >\n          </cometchat-date>\n        </span>\n      </div>\n        <div *ngIf=\"getBubbleWrapper(message) \">\n          <ng-container *ngTemplateOutlet=\"getBubbleWrapper(message)\">\n          </ng-container>\n        </div>\n       <div>\n        <cometchat-message-bubble  *ngIf=\"!getBubbleWrapper(message)\" [leadingView]=\" showAvatar ? leadingView : null\" [bottomView]=\"enableReactions ? reactionView : null\"\n        [headerView]=\"getHeaderView(message) || message?.getCategory() != MessageCategory.action && showHeaderTitle(message) ? bubbleHeader : null\" [footerView]=\"footerView\"  [contentView]=\"contentView\" [threadView]=\"threadView\"\n         [id]=\"message?.getId() || message?.getMuid()\" [options]=\"setMessageOptions(message)\"\n          [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"  [alignment]=\"setBubbleAlignment(message)\">\n        <ng-template #contentView>\n          <ng-container *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\" >\n          </ng-container>\n        </ng-template>\n        <ng-template #reactionView>\n          <reactions-view *ngIf=\"hasReaction(message)\" [messageObject]=\"message\" [alignment]=\"setBubbleAlignment(message)\"  [addReactionIconURL]=\"addReactionIconURL\"\n          [loggedInUser]=\"loggedInUser\" [reactionsStyle]=\"reactionsStyle(message)\"></reactions-view>\n          </ng-template>\n         <ng-template #footerView>\n          <div  class=\"cc-message-list__bubble-footer\">\n            <div *ngIf=\"getFooterView(message);else bubbleFooter\">\n              <ng-container *ngTemplateOutlet=\"getFooterView(message);context:{ $implicit: message }\" >\n              </ng-container>\n            </div>\n            <ng-template #bubbleFooter>\n              <div class=\"cc-message-list__bubble-date\" *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && !message.getDeletedAt() && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n                <cometchat-date [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" [pattern]=\"datePattern\">\n                </cometchat-date>\n               </div>\n                 <div *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() ||this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\" class=\"cc-message-list__receipt\">\n                    <cometchat-receipt [receipt]=\"getMessageReceipt(message)\" [receiptStyle]=\"receiptStyle\" [waitIcon]=\"waitIcon\" [sentIcon]=\"sentIcon\" [deliveredIcon]=\"deliveredIcon\" [readIcon]=\"readIcon\" [errorIcon]=\"errorIcon\"></cometchat-receipt>\n                 </div>\n            </ng-template>\n          </div>\n         </ng-template>\n<ng-template #leadingView>\n  <div  *ngIf=\" message?.getCategory() != MessageCategory.action  && showHeaderTitle(message)\" >\n    <cometchat-avatar [name]=\"message?.getSender()?.getName()\" [avatarStyle]=\"avatarStyle\" [image]=\"message?.getSender()?.getAvatar()\">\n    </cometchat-avatar>\n  </div>\n</ng-template>\n<ng-template #bubbleHeader>\n  <div *ngIf=\"getHeaderView(message);else defaultHeader\">\n    <ng-container *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\" >\n    </ng-container>\n  </div>\n<ng-template #defaultHeader>\n  <div  class=\"cc-message-list__bubble-header\" *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n    <cometchat-label [text]=\"message?.getSender()?.getName()\" [labelStyle]=\"labelStyle\"></cometchat-label>\n    <cometchat-date [pattern]=\"datePattern\" [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n   </div>\n</ng-template>\n</ng-template>\n<ng-template #threadView>\n  <div class=\"cc-message-list__threadreplies\" *ngIf=\"message?.getReplyCount() && !message.getDeletedAt()\" >\n    <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n    <cometchat-button [text]=\"getThreadCount(message)\" [buttonStyle]=\"getThreadViewStyle(message)\" [iconURL]=\"threadOpenIcon\" (cc-button-clicked)=\"openThreadView(message)\">\n    </cometchat-button>\n  </div>\n</ng-template>\n      </cometchat-message-bubble>\n       </div>\n    </div>\n    <div class=\"cc-message-list__bottom\" #bottom>\n    </div>\n\n  </div>\n  <div class=\"cc-message-list__message-indicator\" *ngIf=\"UnreadCount && UnreadCount.length > 0 && !isOnBottom\" [ngStyle]=\"{bottom: showSmartReply || footerView ? '20%' : '13%'}\">\n    <cometchat-button [text]=\"newMessageCount\" [buttonStyle]=\"unreadMessagesStyle\" (cc-button-clicked)=\"scrollToBottom()\"></cometchat-button>\n  </div>\n  <div class=\"cc-message-list__footer-view\" [ngStyle]=\"{height: showSmartReply  ? '8%' : 'auto'}\">\n\n    <div *ngIf=\"footerView;else footer\">\n      <ng-container *ngTemplateOutlet=\"footerView\">\n      </ng-container>\n    </div>\n    <ng-template #footer>\n      <div class=\"cc-message-list__smart-replies\" *ngIf=\"showSmartReply && getReplies()\">\n        <smart-replies [smartReplyStyle]=\"smartReplyStyle\" [replies]=\"getReplies()\" (cc-reply-clicked)=\"sendReply($event)\" (cc-close-clicked)=\"closeSmartReply()\">\n        </smart-replies>\n      </div>\n    </ng-template>\n        </div>\n\n</div>\n<!-- default bubbles -->\n<ng-template #textBubble let-message>\n  <cometchat-text-bubble *ngIf=\"message?.type == MessageTypesConstant.groupMember\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"message?.message\"></cometchat-text-bubble>\n  <cometchat-text-bubble *ngIf=\"message?.getDeletedAt()\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"localize('MESSAGE_IS_DELETED')\"></cometchat-text-bubble>\n<cometchat-text-bubble *ngIf=\"!isTranslated(message) && !getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"getTextMessage(message)\"></cometchat-text-bubble>\n<link-preview [linkPreviewStyle]=\"linkPreviewStyle\" (cc-link-clicked)=\"openLinkURL($event)\" *ngIf=\"!message?.getDeletedAt() && getLinkPreview(message) && enableLinkPreview\" [title]=\"getLinkPreviewDetails('title',message)\" [description]=\"getLinkPreviewDetails('description',message)\" [URL]=\"getLinkPreviewDetails('url',message)\" [image]=\"getLinkPreviewDetails('image',message)\" [favIconURL]=\"getLinkPreviewDetails('favicon',message)\">\n  <cometchat-text-bubble\n  *ngIf=\"!isTranslated(message) && getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n  [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"getTextMessage(message)\"></cometchat-text-bubble>\n</link-preview>\n<message-translation-bubble [alignment]=\"getBubbleAlignment(message)\" *ngIf=\"isTranslated(message)\"  [messageTranslationStyle]=\"setTranslationStyle(message)\" [translatedText]=\"isTranslated(message)\">\n  <cometchat-text-bubble *ngIf=\" !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"message?.text\"></cometchat-text-bubble>\n\n</message-translation-bubble>\n</ng-template>\n<ng-template #fileBubble let-message>\n\n  <cometchat-file-bubble [fileStyle]=\"setFileBubbleStyle(message)\" [downloadIconURL]=\"downloadIconURL\" [subtitle]=\"localize('SHARED_FILE')\" [title]=\"message?.data?.attachments ? message?.data?.attachments[0]?.name: ''\" [fileURL]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\"></cometchat-file-bubble>\n</ng-template>\n<ng-template #audioBubble let-message>\n  <cometchat-icon-button [disabled]=\"true\" *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.audio\" [iconURL]=\"getCallTypeIcon(message)\" [buttonStyle]=\"callStatusStyle(message)\" [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n  <cometchat-audio-bubble *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\"  [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\" > </cometchat-audio-bubble>\n</ng-template>\n<ng-template #videoBubble let-message>\n  <cometchat-icon-button [disabled]=\"true\" *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.video\" [iconURL]=\"getCallTypeIcon(message)\" [buttonStyle]=\"callStatusStyle(message)\" [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n\n  <cometchat-video-bubble *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\" [videoStyle]=\"videoBubbleStyle\" [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\" [poster]=\" getImageThumbnail(message)\"></cometchat-video-bubble>\n</ng-template>\n<ng-template #imageBubble let-message>\n <image-moderation  (cc-show-dialog)=\"openWarningDialog($event)\" *ngIf=\"!message.getDeletedAt() && enableImageModeration\" [message]=\"message\" [imageModerationStyle]=\"imageModerationStyle\">\n  <cometchat-image-bubble (cc-image-clicked)=\"openImageInFullScreen(message)\" [imageStyle]=\"imageBubbleStyle\"   [src]=\" getImageThumbnail(message)\" [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n </image-moderation>\n  <cometchat-image-bubble [imageStyle]=\"imageBubbleStyle\" (cc-image-clicked)=\"openImageInFullScreen(message)\" *ngIf=\"!message.getDeletedAt() && !enableImageModeration\"  [src]=\" getImageThumbnail(message)\" [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n</ng-template>\n<ng-template #customTextBubble>\n</ng-template>\n<ng-template #stickerBubble  let-message>\n  <cometchat-image-bubble [src]=\"getSticker(message)\" [imageStyle]=\"imageBubbleStyle\" ></cometchat-image-bubble>\n\n</ng-template>\n<ng-template #whiteboardBubble  let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\" [iconAlignment]=\"documentBubbleAlignment\" [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\" [ccClicked]=\"launchCollaborativeWhiteboardDocument\" [iconURL]=\"whiteboardIconURL\" [title]=\"whiteboardTitle\" [buttonText]=\"whiteboardButtonText\" [subtitle]=\"whiteboardSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #documentBubble  let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\" [iconAlignment]=\"documentBubbleAlignment\" [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\" [ccClicked]=\"launchCollaborativeWhiteboardDocument\" [iconURL]=\"documentIconURL\" [title]=\"documentTitle\" [buttonText]=\"documentButtonText\" [subtitle]=\"documentSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #directCalling  let-message>\n  <cometchat-document-bubble  [hideSeparator]=\"true\" [iconAlignment]=\"callBubbleAlignment\" [documentStyle]=\"getCallBubbleStyle(message)\" [URL]=\"getSessionId(message)\" [ccClicked]=\"startDirectCall\" [iconURL]=\"directCallIconURL\" [title]=\"getCallBubbleTitle(message)\" [buttonText]=\"joinCallButtonText\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #pollBubble  let-message>\n  <polls-bubble [pollStyle]=\"pollBubbleStyle\"  [pollQuestion]=\"getPollBubbleData(message,'question')\" [pollId]=\"getPollBubbleData(message,'id')\"\n   [loggedInUser]=\"loggedInUser\" [senderUid]=\"getPollBubbleData(message)\" [metadata]=\"message?.metadata\"></polls-bubble>\n\n</ng-template>\n\n<!-- thread bubble view -->\n<ng-template #threadMessageBubble let-message>\n  <div *ngIf=\"getBubbleWrapper(message)\">\n    <ng-container *ngTemplateOutlet=\"getBubbleWrapper(message)\">\n    </ng-container>\n  </div>\n  <cometchat-message-bubble  *ngIf=\"!getBubbleWrapper(message)\" [bottomView]=\"enableReactions ? reactionView : null\" [leadingView]=\" showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\" [footerView]=\"footerView\"\n  [contentView]=\"contentView\"  [id]=\"message?.getId() || message?.getMuid()\"  [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"  [alignment]=\"threadedAlignment\">\n    <ng-template #contentView>\n      <ng-container *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\" >\n      </ng-container>\n    </ng-template>\n    <ng-template #reactionView>\n      <reactions-view *ngIf=\"hasReaction(message)\" [messageObject]=\"message\" [alignment]=\"setBubbleAlignment(message)\"\n      \n      [loggedInUser]=\"loggedInUser\" [reactionsStyle]=\"reactionsStyle(message)\" [addReactionIconURL]=\"addReactionIconURL\"></reactions-view>\n      </ng-template>\n     <ng-template #footerView>\n      <div  class=\"cc-message-list__bubble-footer\">\n        <div *ngIf=\"getFooterView(message);else bubbleFooter\">\n          <ng-container *ngTemplateOutlet=\"getFooterView(message);context:{ $implicit: message }\" >\n          </ng-container>\n        </div>\n        <ng-template #bubbleFooter>\n          <div class=\"cc-message-list__bubble-date\" *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n            <cometchat-date [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" [pattern]=\"datePattern\">\n            </cometchat-date>\n           </div>\n             <div *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() ||this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\" class=\"cc-message-list__receipt\">\n                <cometchat-receipt [receipt]=\"getMessageReceipt(message)\" [receiptStyle]=\"receiptStyle\" [waitIcon]=\"waitIcon\" [sentIcon]=\"sentIcon\" [deliveredIcon]=\"\" [readIcon]=\"deliveredIcon\" [errorIcon]=\"errorIcon\"></cometchat-receipt>\n             </div>\n        </ng-template>\n      </div>\n     </ng-template>\n<ng-template #leadingView>\n<div  *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\" >\n<cometchat-avatar [name]=\"message?.getSender()?.getName()\" [avatarStyle]=\"avatarStyle\" [image]=\"message?.getSender()?.getAvatar()\">\n</cometchat-avatar>\n</div>\n</ng-template>\n<ng-template #bubbleHeader>\n<div *ngIf=\"getHeaderView(message);else defaultHeader\">\n<ng-container *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\" >\n</ng-container>\n</div>\n<ng-template #defaultHeader>\n<div  class=\"cc-message-list__bubble-header\" *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n<cometchat-label [text]=\"message?.getSender()?.getName()\" [labelStyle]=\"labelStyle\"></cometchat-label>\n<cometchat-date [pattern]=\"datePattern\" [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n</div>\n</ng-template>\n</ng-template>\n  </cometchat-message-bubble>\n\n</ng-template>\n\n\n<!--  -->\n<ng-template #bubbleView></ng-template>\n<cometchat-popover [popoverStyle]=\"popoverStyle\"  #popoverRef [placement]=\"keyboardAlignment\">\n<cometchat-emoji-keyboard (cc-emoji-clicked)=\"addReaction($event)\"  slot=\"content\"></cometchat-emoji-keyboard>\n</cometchat-popover>\n<cometchat-backdrop *ngIf=\"openConfirmDialog\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-confirm-dialog [title]=\"''\" [messageText]=\"warningText\" (cc-confirm-clicked)=\"onConfirmClick()\" [cancelButtonText]=\"cancelText\" [confirmButtonText]=\"confirmText\" (cc-cancel-clicked)=\"onCancelClick()\" [confirmDialogStyle]=\"confirmDialogStyle\">\n\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-full-screen-viewer (cc-close-clicked)=\"closeImageInFullScreen()\" *ngIf=\"openFullscreenView\" [URL]=\"imageurlToOpen\" [closeIconURL]=\"closeIconURL\" [fullScreenViewerStyle]=\"fullScreenViewerStyle\">\n\n</cometchat-full-screen-viewer>\n\n<!-- ongoing callscreen for direct call -->\n<cometchat-ongoing-call *ngIf=\"showOngoingCall\" [callSettingsBuilder]=\"getCallBuilder()\" [ongoingCallStyle]=\"ongoingCallStyle\" [sessionID]=\"sessionId\"></cometchat-ongoing-call>\n<!-- message information view -->\n<!-- thread bubble view -->\n<ng-template #messageinfoBubble let-message>\n  <div *ngIf=\"getBubbleWrapper(message)\">\n    <ng-container *ngTemplateOutlet=\"getBubbleWrapper(message)\">\n    </ng-container>\n  </div>\n  <cometchat-message-bubble  *ngIf=\"!getBubbleWrapper(message)\" [bottomView]=\"enableReactions && hasReaction(message) ? reactionView : null\" [leadingView]=\" showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\"\n  [contentView]=\"contentView\"  [id]=\"message?.getId() || message?.getMuid()\"  [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"  [alignment]=\"messageInfoAlignment\">\n    <ng-template #contentView>\n      <ng-container *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\" >\n      </ng-container>\n    </ng-template>\n    <ng-template #reactionView>\n      <reactions-view *ngIf=\"hasReaction(message)\" [messageObject]=\"message\" [alignment]=\"setBubbleAlignment(message)\"  [addReactionIconURL]=\"addReactionIconURL\"\n      [loggedInUser]=\"loggedInUser\" [reactionsStyle]=\"reactionsStyle(message)\"></reactions-view>\n      </ng-template>\n<ng-template #leadingView>\n<div  *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\" >\n<cometchat-avatar [name]=\"message?.getSender()?.getName()\" [avatarStyle]=\"avatarStyle\" [image]=\"message?.getSender()?.getAvatar()\">\n</cometchat-avatar>\n</div>\n</ng-template>\n<ng-template #bubbleHeader>\n<div *ngIf=\"getHeaderView(message);else defaultHeader\">\n<ng-container *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\" >\n</ng-container>\n</div>\n<ng-template #defaultHeader>\n<div  class=\"cc-message-list__bubble-header\" *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n<cometchat-label [text]=\"message?.getSender()?.getName()\" [labelStyle]=\"labelStyle\"></cometchat-label>\n<cometchat-date [pattern]=\"datePattern\" [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n</div>\n</ng-template>\n</ng-template>\n  </cometchat-message-bubble>\n\n</ng-template>\n<cometchat-backdrop *ngIf=\"openMessageInfoPage\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-message-information [closeIconURL]=\"messageInformationConfiguration.closeIconURL\"  [loadingStateView]=\"messageInformationConfiguration.loadingStateView\" [errorStateView]=\"messageInformationConfiguration.errorStateView\" [listItemStyle]=\"messageInformationConfiguration.listItemStyle\" [emptyStateView]=\"messageInformationConfiguration.emptyStateView\" [loadingIconURL]=\"messageInformationConfiguration.loadingIconURL\" [readIcon]=\"messageInformationConfiguration.readIcon\" [deliveredIcon]=\"messageInformationConfiguration.deliveredIcon\" [onError]=\"messageInformationConfiguration.onError\" [SubtitleView]=\"messageInformationConfiguration.subtitleView\" [receiptDatePattern]=\"messageInformationConfiguration.receiptDatePattern\" [listItemView]=\"messageInformationConfiguration.listItemView \" [messageInformationStyle]=\"messageInformationConfiguration.messageInformationStyle\" [onClose]=\"messageInformationConfiguration.onClose ??  closeMessageInfoPage\" [bubbleView]=\"messageInformationConfiguration.bubbleView ?? messageinfoBubble\" [message]=\"messageInfoObject\">\n\n  </cometchat-message-information>\n</cometchat-backdrop>\n", styles: [".cc-message-list{height:100%;width:100%;overflow-y:auto;overflow-x:hidden;position:relative}.cc-message-list__wrapper{height:100%;width:100%;overflow-y:hidden}.cc-message-list__bubble-footer{display:flex;justify-content:center;align-items:center}.cc-message-list__date-container{text-align:center;margin:5px 0}.cc-message-list__smart-replies{height:-moz-fit-content;height:fit-content;width:100%;position:absolute;bottom:0;z-index:1}.cc-message-list__date{border-radius:10px;display:flex;justify-content:center}.cc-message-list__threadreplies{min-width:130px;width:100%}.cc-message-list__message-indicator{height:25px;display:flex;align-items:center;justify-content:center;width:100%;bottom:10%;position:absolute}.cc-message-list__footer-view{z-index:1;position:relative;width:100%}.cc-message-list__decorator-message{margin:0;line-height:30px;word-wrap:break-word;padding:0 8px;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;height:100%}.cc-message-list::-webkit-scrollbar{background:transparent;width:8px}.cc-message-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}\n"], components: [{ type: CometChatMessageBubbleComponent, selector: "cometchat-message-bubble", inputs: ["messageBubbleStyle", "alignment", "options", "id", "leadingView", "headerView", "replyView", "contentView", "threadView", "footerView", "bottomView", "moreIconURL", "topMenuSize"] }, { type: CometChatOngoingCallComponent, selector: "cometchat-ongoing-call", inputs: ["ongoingCallStyle", "resizeIconHoverText", "sessionID", "minimizeIconURL", "maximizeIconURL", "callSettingsBuilder", "callWorkflow", "onError"] }, { type: CometChatMessageInformationComponent, selector: "cometchat-message-information", inputs: ["closeIconURL", "message", "title", "template", "bubbleView", "subtitleView", "listItemView", "receiptDatePattern", "onError", "messageInformationStyle", "readIcon", "deliveredIcon", "onClose", "listItemStyle", "emptyStateText", "errorStateText", "emptyStateView", "loadingIconURL", "loadingStateView", "errorStateView"] }], 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"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CometChatMessageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatMessageListComponent, selector: "cometchat-message-list", inputs: { hideError: "hideError", errorStateView: "errorStateView", loadingStateView: "loadingStateView", emptyStateView: "emptyStateView", errorStateText: "errorStateText", emptyStateText: "emptyStateText", loadingIconURL: "loadingIconURL", user: "user", group: "group", disableReceipt: "disableReceipt", disableSoundForMessages: "disableSoundForMessages", customSoundForMessages: "customSoundForMessages", readIcon: "readIcon", deliveredIcon: "deliveredIcon", sentIcon: "sentIcon", waitIcon: "waitIcon", errorIcon: "errorIcon", alignment: "alignment", showAvatar: "showAvatar", datePattern: "datePattern", timestampAlignment: "timestampAlignment", DateSeparatorPattern: "DateSeparatorPattern", templates: "templates", messagesRequestBuilder: "messagesRequestBuilder", newMessageIndicatorText: "newMessageIndicatorText", scrollToBottomOnNewMessages: "scrollToBottomOnNewMessages", thresholdValue: "thresholdValue", onThreadRepliesClick: "onThreadRepliesClick", headerView: "headerView", footerView: "footerView", parentMessageId: "parentMessageId", avatarStyle: "avatarStyle", backdropStyle: "backdropStyle", dateSeparatorStyle: "dateSeparatorStyle", messageListStyle: "messageListStyle", onError: "onError", messageInformationConfiguration: "messageInformationConfiguration" }, viewQueries: [{ propertyName: "listScroll", first: true, predicate: ["listScroll"], descendants: true }, { propertyName: "bottom", first: true, predicate: ["bottom"], descendants: true }, { propertyName: "top", first: true, predicate: ["top"], descendants: true }, { propertyName: "textBubble", first: true, predicate: ["textBubble"], descendants: true }, { propertyName: "threadMessageBubble", first: true, predicate: ["threadMessageBubble"], descendants: true }, { propertyName: "fileBubble", first: true, predicate: ["fileBubble"], descendants: true }, { propertyName: "audioBubble", first: true, predicate: ["audioBubble"], descendants: true }, { propertyName: "videoBubble", first: true, predicate: ["videoBubble"], descendants: true }, { propertyName: "imageBubble", first: true, predicate: ["imageBubble"], descendants: true }, { propertyName: "stickerBubble", first: true, predicate: ["stickerBubble"], descendants: true }, { propertyName: "documentBubble", first: true, predicate: ["documentBubble"], descendants: true }, { propertyName: "whiteboardBubble", first: true, predicate: ["whiteboardBubble"], descendants: true }, { propertyName: "popoverRef", first: true, predicate: ["popoverRef"], descendants: true }, { propertyName: "directCalling", first: true, predicate: ["directCalling"], descendants: true }, { propertyName: "pollBubble", first: true, predicate: ["pollBubble"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-message-list__wrapper\" [ngStyle]=\"wrapperStyle()\" *ngIf=\"!openContactsView\">\n  <div class=\"cc-message-list__header-view\">\n<div *ngIf=\"headerView\">\n  <ng-container *ngTemplateOutlet=\"headerView\">\n  </ng-container>\n</div>\n        </div>\n  <div class=\"cc-message-list\" #listScroll [ngStyle]=\"{height: showSmartReply || showConversationStarter ? '92%' : '100%'}\">\n    <div class=\"cc-message-list__top\" #top>\n    </div>\n    <div class=\"cc-message-list__decorator-message\" *ngIf=\"state == states.loading || state == states.error  || state == states.empty \"\n      [ngStyle]=\"messageContainerStyle()\">\n      <div class=\"cc-message-list__loading-view\" *ngIf=\"state == states.loading \">\n        <cometchat-loader [iconURL]=\"loadingIconURL\" [loaderStyle]=\"loadingStyle()\">\n        </cometchat-loader>\n        <span class=\"cc-message-list__customview--loading\" *ngIf=\"state == states.loading  && loadingStateView\">\n          <ng-container *ngTemplateOutlet=\"loadingStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"cc-message-list__error-view\" *ngIf=\"state == states.error  && !hideError \">\n        <cometchat-label [labelStyle]=\"errorStyle()\" *ngIf=\"state == states.error  && !hideError && !errorStateView\" [text]=\"errorStateText\"\n          >\n        </cometchat-label>\n        <span class=\"cc-message-list__custom-view--error\" *ngIf=\"state == states.error  && !hideError && errorStateView\">\n          <ng-container *ngTemplateOutlet=\"errorStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"cc-message-list__empty-view\" *ngIf=\"state == states.empty\">\n        <!-- <cometchat-label [labelStyle]=\"emptyStyle()\" *ngIf=\"state == states.empty && !emptyStateView\" [text]=\"emptyStateText\"\n          >\n        </cometchat-label> -->\n        <span class=\"cc-message-list__custom-view--empty\" *ngIf=\"state == states.empty && emptyStateView\">\n          <ng-container *ngTemplateOutlet=\"emptyStateView\">\n          </ng-container>\n        </span>\n      </div>\n    </div>\n    <div class=\"cc-message-list__bubble\" *ngFor=\"let message of messagesList; let i = index\">\n      <div class=\"cc-message-list__date-container\" *ngIf=\"(i === 0) && message?.getSentAt()\">\n        <span class=\"cc-message-list__date\" >\n          <cometchat-date [timestamp]=\"message!.getSentAt()\"  [pattern]=\"DateSeparatorPattern\" [dateStyle]=\"dateSeparatorStyle\"\n           >\n          </cometchat-date>\n        </span>\n      </div>\n      <div class=\"cc-message-list__date-container\" *ngIf=\"(i > 0 && isDateDifferent(messagesList[i - 1]?.getSentAt(), messagesList[i]?.getSentAt())) && message?.getSentAt()\">\n        <span class=\"cc-message-list__date\"  >\n          <cometchat-date [timestamp]=\"message?.getSentAt()\" [pattern]=\"DateSeparatorPattern\"   [dateStyle]=\"dateSeparatorStyle\"\n           >\n          </cometchat-date>\n        </span>\n      </div>\n        <div *ngIf=\"getBubbleWrapper(message) \">\n          <ng-container *ngTemplateOutlet=\"getBubbleWrapper(message)\">\n          </ng-container>\n        </div>\n       <div>\n        <cometchat-message-bubble  *ngIf=\"!getBubbleWrapper(message)\" [leadingView]=\" showAvatar ? leadingView : null\" [bottomView]=\"enableReactions ? reactionView : null\"\n        [headerView]=\"getHeaderView(message) || message?.getCategory() != MessageCategory.action && showHeaderTitle(message) ? bubbleHeader : null\" [footerView]=\"footerView\"  [contentView]=\"contentView\" [threadView]=\"threadView\"\n         [id]=\"message?.getId() || message?.getMuid()\" [options]=\"setMessageOptions(message)\"\n          [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"  [alignment]=\"setBubbleAlignment(message)\">\n        <ng-template #contentView>\n          <ng-container *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\" >\n          </ng-container>\n        </ng-template>\n        <ng-template #reactionView>\n          <reactions-view *ngIf=\"hasReaction(message)\" [messageObject]=\"message\" [alignment]=\"setBubbleAlignment(message)\"  [addReactionIconURL]=\"addReactionIconURL\"\n          [loggedInUser]=\"loggedInUser\" [reactionsStyle]=\"reactionsStyle(message)\"></reactions-view>\n          </ng-template>\n         <ng-template #footerView>\n          <div  class=\"cc-message-list__bubble-footer\">\n            <div *ngIf=\"getFooterView(message);else bubbleFooter\">\n              <ng-container *ngTemplateOutlet=\"getFooterView(message);context:{ $implicit: message }\" >\n              </ng-container>\n            </div>\n            <ng-template #bubbleFooter>\n              <div class=\"cc-message-list__bubble-date\" *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && !message.getDeletedAt() && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n                <cometchat-date [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" [pattern]=\"datePattern\">\n                </cometchat-date>\n               </div>\n                 <div *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() ||this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\" class=\"cc-message-list__receipt\">\n                    <cometchat-receipt [receipt]=\"getMessageReceipt(message)\" [receiptStyle]=\"receiptStyle\" [waitIcon]=\"waitIcon\" [sentIcon]=\"sentIcon\" [deliveredIcon]=\"deliveredIcon\" [readIcon]=\"readIcon\" [errorIcon]=\"errorIcon\"></cometchat-receipt>\n                 </div>\n            </ng-template>\n          </div>\n         </ng-template>\n<ng-template #leadingView>\n  <div  *ngIf=\" message?.getCategory() != MessageCategory.action  && showHeaderTitle(message)\" >\n    <cometchat-avatar [name]=\"message?.getSender()?.getName()\" [avatarStyle]=\"avatarStyle\" [image]=\"message?.getSender()?.getAvatar()\">\n    </cometchat-avatar>\n  </div>\n</ng-template>\n<ng-template #bubbleHeader>\n  <div *ngIf=\"getHeaderView(message);else defaultHeader\">\n    <ng-container *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\" >\n    </ng-container>\n  </div>\n<ng-template #defaultHeader>\n  <div  class=\"cc-message-list__bubble-header\" *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n    <cometchat-label [text]=\"message?.getSender()?.getName()\" [labelStyle]=\"labelStyle\"></cometchat-label>\n    <cometchat-date [pattern]=\"datePattern\" [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n   </div>\n</ng-template>\n</ng-template>\n<ng-template #threadView>\n  <div class=\"cc-message-list__threadreplies\" *ngIf=\"message?.getReplyCount() && !message.getDeletedAt()\" >\n    <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n    <cometchat-button [text]=\"getThreadCount(message)\" [buttonStyle]=\"getThreadViewStyle(message)\" [iconURL]=\"threadOpenIcon\" (cc-button-clicked)=\"openThreadView(message)\">\n    </cometchat-button>\n  </div>\n</ng-template>\n      </cometchat-message-bubble>\n       </div>\n    </div>\n    <div class=\"cc-message-list__bottom\" #bottom>\n    </div>\n\n  </div>\n  <div class=\"cc-message-list__message-indicator\" *ngIf=\"UnreadCount && UnreadCount.length > 0 && !isOnBottom\" [ngStyle]=\"{bottom: showSmartReply || footerView || showConversationStarter  ? '20%' : '13%'}\">\n    <cometchat-button [text]=\"newMessageCount\" [buttonStyle]=\"unreadMessagesStyle\" (cc-button-clicked)=\"scrollToBottom()\"></cometchat-button>\n  </div>\n  <div class=\"cc-message-list__footer-view\" [ngStyle]=\"{height: showSmartReply || showConversationStarter ? '8%' : 'auto'}\">\n\n    <div *ngIf=\"footerView;else footer\">\n      <ng-container *ngTemplateOutlet=\"footerView\">\n      </ng-container>\n    </div>\n    <ng-template #footer>\n      <div class=\"cc-message-list__smart-replies\" *ngIf=\"!showConversationStarter && showSmartReply && getReplies()\">\n        <smart-replies [smartReplyStyle]=\"smartReplyStyle\" [replies]=\"getReplies()\" (cc-reply-clicked)=\"sendReply($event)\" (cc-close-clicked)=\"closeSmartReply()\">\n        </smart-replies>\n      </div>\n      <div class=\"cc-message-list__conversation-starters\" *ngIf=\"enableConversationStarter && showConversationStarter\">\n        <div class=\"cc-message-list__footer__decorator-message\" *ngIf=\"conversationStarterState == states.loading || conversationStarterState == states.error  || conversationStarterState == states.empty \"\n        >\n        <div class=\"cc-message-list__footer-view-decorator\" *ngIf=\"conversationStarterState == states.loading\">\n          <cometchat-loader iconURL=\"assets/Spinner.svg\" [loaderStyle]=\"conversationStarterLoader()\">\n          </cometchat-loader>\n          <cometchat-label [labelStyle]=\"conversationStarterStateStyle()\"  [text]=\"starterLoadingStateText\"\n          >\n        </cometchat-label>\n        \n        </div>\n        <div class=\"cc-message-list__footer-view-decorator\" *ngIf=\"conversationStarterState == states.error  && !hideError \">\n          <cometchat-loader iconURL=\"assets/ai-error.svg\" [loaderStyle]=\"conversationStarterLoader()\">\n          </cometchat-loader>\n          <cometchat-label [labelStyle]=\"conversationStarterStateStyle()\"  [text]=\"starterErrorStateText\"\n            >\n          </cometchat-label>\n        \n        </div>\n        <div class=\"cc-message-list__footer-view-decorator\" *ngIf=\"conversationStarterState == states.empty\">\n          <cometchat-loader iconURL=\"assets/ai-empty.svg\" [loaderStyle]=\"conversationStarterLoader()\">\n          </cometchat-loader>\n          <cometchat-label [labelStyle]=\"conversationStarterStateStyle()\"  [text]=\"starterEmptyStateText\"\n            >\n          </cometchat-label>\n  \n        </div>\n      </div>\n        <smart-replies *ngIf=\"conversationStarterState == states.loaded && !parentMessageId\" [smartReplyStyle]=\"conversationStarterStyle\" [replies]=\"conversationStarterReplies\"  (cc-reply-clicked)=\"sendConversationStarter($event)\"  [closeIconURL]=\"''\">\n        </smart-replies>\n      </div>\n    </ng-template>\n        </div>\n\n</div>\n<!-- default bubbles -->\n<ng-template #textBubble let-message>\n  <cometchat-text-bubble *ngIf=\"message?.type == MessageTypesConstant.groupMember\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"message?.message\"></cometchat-text-bubble>\n  <cometchat-text-bubble *ngIf=\"message?.getDeletedAt()\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"localize('MESSAGE_IS_DELETED')\"></cometchat-text-bubble>\n<cometchat-text-bubble *ngIf=\"!isTranslated(message) && !getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"getTextMessage(message)\"></cometchat-text-bubble>\n<link-preview [linkPreviewStyle]=\"linkPreviewStyle\" (cc-link-clicked)=\"openLinkURL($event)\" *ngIf=\"!message?.getDeletedAt() && getLinkPreview(message) && enableLinkPreview\" [title]=\"getLinkPreviewDetails('title',message)\" [description]=\"getLinkPreviewDetails('description',message)\" [URL]=\"getLinkPreviewDetails('url',message)\" [image]=\"getLinkPreviewDetails('image',message)\" [favIconURL]=\"getLinkPreviewDetails('favicon',message)\">\n  <cometchat-text-bubble\n  *ngIf=\"!isTranslated(message) && getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n  [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"getTextMessage(message)\"></cometchat-text-bubble>\n</link-preview>\n<message-translation-bubble [alignment]=\"getBubbleAlignment(message)\" *ngIf=\"isTranslated(message)\"  [messageTranslationStyle]=\"setTranslationStyle(message)\" [translatedText]=\"isTranslated(message)\">\n  <cometchat-text-bubble *ngIf=\" !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"message?.text\"></cometchat-text-bubble>\n\n</message-translation-bubble>\n</ng-template>\n<ng-template #fileBubble let-message>\n\n  <cometchat-file-bubble [fileStyle]=\"setFileBubbleStyle(message)\" [downloadIconURL]=\"downloadIconURL\" [subtitle]=\"localize('SHARED_FILE')\" [title]=\"message?.data?.attachments ? message?.data?.attachments[0]?.name: ''\" [fileURL]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\"></cometchat-file-bubble>\n</ng-template>\n<ng-template #audioBubble let-message>\n  <cometchat-icon-button [disabled]=\"true\" *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.audio\" [iconURL]=\"getCallTypeIcon(message)\" [buttonStyle]=\"callStatusStyle(message)\" [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n  <cometchat-audio-bubble *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\"  [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\" > </cometchat-audio-bubble>\n</ng-template>\n<ng-template #videoBubble let-message>\n  <cometchat-icon-button [disabled]=\"true\" *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.video\" [iconURL]=\"getCallTypeIcon(message)\" [buttonStyle]=\"callStatusStyle(message)\" [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n\n  <cometchat-video-bubble *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\" [videoStyle]=\"videoBubbleStyle\" [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\" [poster]=\" getImageThumbnail(message)\"></cometchat-video-bubble>\n</ng-template>\n<ng-template #imageBubble let-message>\n <image-moderation  (cc-show-dialog)=\"openWarningDialog($event)\" *ngIf=\"!message.getDeletedAt() && enableImageModeration\" [message]=\"message\" [imageModerationStyle]=\"imageModerationStyle\">\n  <cometchat-image-bubble (cc-image-clicked)=\"openImageInFullScreen(message)\" [imageStyle]=\"imageBubbleStyle\"   [src]=\" getImageThumbnail(message)\" [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n </image-moderation>\n  <cometchat-image-bubble [imageStyle]=\"imageBubbleStyle\" (cc-image-clicked)=\"openImageInFullScreen(message)\" *ngIf=\"!message.getDeletedAt() && !enableImageModeration\"  [src]=\" getImageThumbnail(message)\" [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n</ng-template>\n<ng-template #customTextBubble>\n</ng-template>\n<ng-template #stickerBubble  let-message>\n  <cometchat-image-bubble [src]=\"getSticker(message)\" [imageStyle]=\"imageBubbleStyle\" ></cometchat-image-bubble>\n\n</ng-template>\n<ng-template #whiteboardBubble  let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\" [iconAlignment]=\"documentBubbleAlignment\" [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\" [ccClicked]=\"launchCollaborativeWhiteboardDocument\" [iconURL]=\"whiteboardIconURL\" [title]=\"whiteboardTitle\" [buttonText]=\"whiteboardButtonText\" [subtitle]=\"whiteboardSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #documentBubble  let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\" [iconAlignment]=\"documentBubbleAlignment\" [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\" [ccClicked]=\"launchCollaborativeWhiteboardDocument\" [iconURL]=\"documentIconURL\" [title]=\"documentTitle\" [buttonText]=\"documentButtonText\" [subtitle]=\"documentSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #directCalling  let-message>\n  <cometchat-document-bubble  [hideSeparator]=\"true\" [iconAlignment]=\"callBubbleAlignment\" [documentStyle]=\"getCallBubbleStyle(message)\" [URL]=\"getSessionId(message)\" [ccClicked]=\"startDirectCall\" [iconURL]=\"directCallIconURL\" [title]=\"getCallBubbleTitle(message)\" [buttonText]=\"joinCallButtonText\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #pollBubble  let-message>\n  <polls-bubble [pollStyle]=\"pollBubbleStyle\"  [pollQuestion]=\"getPollBubbleData(message,'question')\" [pollId]=\"getPollBubbleData(message,'id')\"\n   [loggedInUser]=\"loggedInUser\" [senderUid]=\"getPollBubbleData(message)\" [metadata]=\"message?.metadata\"></polls-bubble>\n\n</ng-template>\n\n<!-- thread bubble view -->\n<ng-template #threadMessageBubble let-message>\n  <div *ngIf=\"getBubbleWrapper(message)\">\n    <ng-container *ngTemplateOutlet=\"getBubbleWrapper(message)\">\n    </ng-container>\n  </div>\n  <cometchat-message-bubble  *ngIf=\"!getBubbleWrapper(message)\" [bottomView]=\"enableReactions ? reactionView : null\" [leadingView]=\" showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\" [footerView]=\"footerView\"\n  [contentView]=\"contentView\"  [id]=\"message?.getId() || message?.getMuid()\"  [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"  [alignment]=\"threadedAlignment\">\n    <ng-template #contentView>\n      <ng-container *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\" >\n      </ng-container>\n    </ng-template>\n    <ng-template #reactionView>\n      <reactions-view *ngIf=\"hasReaction(message)\" [messageObject]=\"message\" [alignment]=\"setBubbleAlignment(message)\"\n      \n      [loggedInUser]=\"loggedInUser\" [reactionsStyle]=\"reactionsStyle(message)\" [addReactionIconURL]=\"addReactionIconURL\"></reactions-view>\n      </ng-template>\n     <ng-template #footerView>\n      <div  class=\"cc-message-list__bubble-footer\">\n        <div *ngIf=\"getFooterView(message);else bubbleFooter\">\n          <ng-container *ngTemplateOutlet=\"getFooterView(message);context:{ $implicit: message }\" >\n          </ng-container>\n        </div>\n        <ng-template #bubbleFooter>\n          <div class=\"cc-message-list__bubble-date\" *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n            <cometchat-date [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" [pattern]=\"datePattern\">\n            </cometchat-date>\n           </div>\n             <div *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() ||this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\" class=\"cc-message-list__receipt\">\n                <cometchat-receipt [receipt]=\"getMessageReceipt(message)\" [receiptStyle]=\"receiptStyle\" [waitIcon]=\"waitIcon\" [sentIcon]=\"sentIcon\" [deliveredIcon]=\"\" [readIcon]=\"deliveredIcon\" [errorIcon]=\"errorIcon\"></cometchat-receipt>\n             </div>\n        </ng-template>\n      </div>\n     </ng-template>\n<ng-template #leadingView>\n<div  *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\" >\n<cometchat-avatar [name]=\"message?.getSender()?.getName()\" [avatarStyle]=\"avatarStyle\" [image]=\"message?.getSender()?.getAvatar()\">\n</cometchat-avatar>\n</div>\n</ng-template>\n<ng-template #bubbleHeader>\n<div *ngIf=\"getHeaderView(message);else defaultHeader\">\n<ng-container *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\" >\n</ng-container>\n</div>\n<ng-template #defaultHeader>\n<div  class=\"cc-message-list__bubble-header\" *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n<cometchat-label [text]=\"message?.getSender()?.getName()\" [labelStyle]=\"labelStyle\"></cometchat-label>\n<cometchat-date [pattern]=\"datePattern\" [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n</div>\n</ng-template>\n</ng-template>\n  </cometchat-message-bubble>\n\n</ng-template>\n\n\n<!--  -->\n<ng-template #bubbleView></ng-template>\n<cometchat-popover [popoverStyle]=\"popoverStyle\"  #popoverRef [placement]=\"keyboardAlignment\">\n<cometchat-emoji-keyboard (cc-emoji-clicked)=\"addReaction($event)\"  slot=\"content\"></cometchat-emoji-keyboard>\n</cometchat-popover>\n<cometchat-backdrop *ngIf=\"openConfirmDialog\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-confirm-dialog [title]=\"''\" [messageText]=\"warningText\" (cc-confirm-clicked)=\"onConfirmClick()\" [cancelButtonText]=\"cancelText\" [confirmButtonText]=\"confirmText\" (cc-cancel-clicked)=\"onCancelClick()\" [confirmDialogStyle]=\"confirmDialogStyle\">\n\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-full-screen-viewer (cc-close-clicked)=\"closeImageInFullScreen()\" *ngIf=\"openFullscreenView\" [URL]=\"imageurlToOpen\" [closeIconURL]=\"closeIconURL\" [fullScreenViewerStyle]=\"fullScreenViewerStyle\">\n\n</cometchat-full-screen-viewer>\n\n<!-- ongoing callscreen for direct call -->\n<cometchat-ongoing-call *ngIf=\"showOngoingCall\" [callSettingsBuilder]=\"getCallBuilder()\" [ongoingCallStyle]=\"ongoingCallStyle\" [sessionID]=\"sessionId\"></cometchat-ongoing-call>\n<!-- message information view -->\n<!-- thread bubble view -->\n<ng-template #messageinfoBubble let-message>\n  <div *ngIf=\"getBubbleWrapper(message)\">\n    <ng-container *ngTemplateOutlet=\"getBubbleWrapper(message)\">\n    </ng-container>\n  </div>\n  <cometchat-message-bubble  *ngIf=\"!getBubbleWrapper(message)\" [bottomView]=\"enableReactions && hasReaction(message) ? reactionView : null\" [leadingView]=\" showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\"\n  [contentView]=\"contentView\"  [id]=\"message?.getId() || message?.getMuid()\"  [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"  [alignment]=\"messageInfoAlignment\">\n    <ng-template #contentView>\n      <ng-container *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\" >\n      </ng-container>\n    </ng-template>\n    <ng-template #reactionView>\n      <reactions-view *ngIf=\"hasReaction(message)\" [messageObject]=\"message\" [alignment]=\"setBubbleAlignment(message)\"  [addReactionIconURL]=\"addReactionIconURL\"\n      [loggedInUser]=\"loggedInUser\" [reactionsStyle]=\"reactionsStyle(message)\"></reactions-view>\n      </ng-template>\n<ng-template #leadingView>\n<div  *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\" >\n<cometchat-avatar [name]=\"message?.getSender()?.getName()\" [avatarStyle]=\"avatarStyle\" [image]=\"message?.getSender()?.getAvatar()\">\n</cometchat-avatar>\n</div>\n</ng-template>\n<ng-template #bubbleHeader>\n<div *ngIf=\"getHeaderView(message);else defaultHeader\">\n<ng-container *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\" >\n</ng-container>\n</div>\n<ng-template #defaultHeader>\n<div  class=\"cc-message-list__bubble-header\" *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n<cometchat-label [text]=\"message?.getSender()?.getName()\" [labelStyle]=\"labelStyle\"></cometchat-label>\n<cometchat-date [pattern]=\"datePattern\" [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n</div>\n</ng-template>\n</ng-template>\n  </cometchat-message-bubble>\n\n</ng-template>\n<cometchat-backdrop *ngIf=\"openMessageInfoPage\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-message-information [closeIconURL]=\"messageInformationConfiguration.closeIconURL\"  [loadingStateView]=\"messageInformationConfiguration.loadingStateView\" [errorStateView]=\"messageInformationConfiguration.errorStateView\" [listItemStyle]=\"messageInformationConfiguration.listItemStyle\" [emptyStateView]=\"messageInformationConfiguration.emptyStateView\" [loadingIconURL]=\"messageInformationConfiguration.loadingIconURL\" [readIcon]=\"messageInformationConfiguration.readIcon\" [deliveredIcon]=\"messageInformationConfiguration.deliveredIcon\" [onError]=\"messageInformationConfiguration.onError\" [SubtitleView]=\"messageInformationConfiguration.subtitleView\" [receiptDatePattern]=\"messageInformationConfiguration.receiptDatePattern\" [listItemView]=\"messageInformationConfiguration.listItemView \" [messageInformationStyle]=\"messageInformationConfiguration.messageInformationStyle\" [onClose]=\"messageInformationConfiguration.onClose ??  closeMessageInfoPage\" [bubbleView]=\"messageInformationConfiguration.bubbleView ?? messageinfoBubble\" [message]=\"messageInfoObject\">\n\n  </cometchat-message-information>\n</cometchat-backdrop>\n", styles: [".cc-message-list{height:100%;width:100%;overflow-y:auto;overflow-x:hidden;position:relative}.cc-message-list__wrapper{height:100%;width:100%;overflow-y:hidden}.cc-message-list__bubble-footer{display:flex;justify-content:center;align-items:center}.cc-message-list__date-container{text-align:center;margin:5px 0}.cc-message-list__smart-replies,.cc-message-list__conversation-starters{height:-moz-fit-content;height:fit-content;width:100%;position:absolute;bottom:0;z-index:1}.cc-message-list__date{border-radius:10px;display:flex;justify-content:center}.cc-message-list__threadreplies{min-width:130px;width:100%}.cc-message-list__message-indicator{height:25px;display:flex;align-items:center;justify-content:center;width:100%;bottom:10%;position:absolute}.cc-message-list__footer-view{z-index:1;position:relative;width:100%}.cc-message-list__decorator-message{margin:0;line-height:30px;word-wrap:break-word;padding:0 8px;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;height:100%}.cc-message-list__footer__decorator-message{margin:0;line-height:30px;word-wrap:break-word;padding:0 8px 0 16px;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:flex-start;height:100%}.cc-message-list::-webkit-scrollbar{background:transparent;width:8px}.cc-message-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.cc-message-list__footer-view-decorator{display:flex;flex-direction:row;column-gap:8px}\n"], components: [{ type: CometChatMessageBubbleComponent, selector: "cometchat-message-bubble", inputs: ["messageBubbleStyle", "alignment", "options", "id", "leadingView", "headerView", "replyView", "contentView", "threadView", "footerView", "bottomView", "moreIconURL", "topMenuSize"] }, { type: CometChatOngoingCallComponent, selector: "cometchat-ongoing-call", inputs: ["ongoingCallStyle", "resizeIconHoverText", "sessionID", "minimizeIconURL", "maximizeIconURL", "callSettingsBuilder", "callWorkflow", "onError"] }, { type: CometChatMessageInformationComponent, selector: "cometchat-message-information", inputs: ["closeIconURL", "message", "title", "template", "bubbleView", "subtitleView", "listItemView", "receiptDatePattern", "onError", "messageInformationStyle", "readIcon", "deliveredIcon", "onClose", "listItemStyle", "emptyStateText", "errorStateText", "emptyStateView", "loadingIconURL", "loadingStateView", "errorStateView"] }], 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"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageListComponent, decorators: [{
             type: Component,
-            args: [{ selector: "cometchat-message-list", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-message-list__wrapper\" [ngStyle]=\"wrapperStyle()\" *ngIf=\"!openContactsView\">\n  <div class=\"cc-message-list__header-view\">\n<div *ngIf=\"headerView\">\n  <ng-container *ngTemplateOutlet=\"headerView\">\n  </ng-container>\n</div>\n        </div>\n  <div class=\"cc-message-list\" #listScroll [ngStyle]=\"{height: showSmartReply ? '92%' : '100%'}\">\n    <div class=\"cc-message-list__top\" #top>\n    </div>\n    <div class=\"cc-message-list__decorator-message\" *ngIf=\"state == states.loading || state == states.error  || state == states.empty \"\n      [ngStyle]=\"messageContainerStyle()\">\n      <div class=\"cc-message-list__loading-view\" *ngIf=\"state == states.loading \">\n        <cometchat-loader [iconURL]=\"loadingIconURL\" [loaderStyle]=\"loadingStyle()\">\n        </cometchat-loader>\n        <span class=\"cc-message-list__customview--loading\" *ngIf=\"state == states.loading  && loadingStateView\">\n          <ng-container *ngTemplateOutlet=\"loadingStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"cc-message-list__error-view\" *ngIf=\"state == states.error  && !hideError \">\n        <cometchat-label [labelStyle]=\"errorStyle()\" *ngIf=\"state == states.error  && !hideError && !errorStateView\" [text]=\"errorStateText\"\n          >\n        </cometchat-label>\n        <span class=\"cc-message-list__custom-view--error\" *ngIf=\"state == states.error  && !hideError && errorStateView\">\n          <ng-container *ngTemplateOutlet=\"errorStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"cc-message-list__empty-view\" *ngIf=\"state == states.empty\">\n        <cometchat-label [labelStyle]=\"emptyStyle()\" *ngIf=\"state == states.empty && !emptyStateView\" [text]=\"emptyStateText\"\n          >\n        </cometchat-label>\n        <span class=\"cc-message-list__custom-view--empty\" *ngIf=\"state == states.empty && emptyStateView\">\n          <ng-container *ngTemplateOutlet=\"emptyStateView\">\n          </ng-container>\n        </span>\n      </div>\n    </div>\n    <div class=\"cc-message-list__bubble\" *ngFor=\"let message of messagesList; let i = index\">\n      <div class=\"cc-message-list__date-container\" *ngIf=\"(i === 0) && message?.getSentAt()\">\n        <span class=\"cc-message-list__date\" >\n          <cometchat-date [timestamp]=\"message!.getSentAt()\"  [pattern]=\"DateSeparatorPattern\" [dateStyle]=\"dateSeparatorStyle\"\n           >\n          </cometchat-date>\n        </span>\n      </div>\n      <div class=\"cc-message-list__date-container\" *ngIf=\"(i > 0 && isDateDifferent(messagesList[i - 1]?.getSentAt(), messagesList[i]?.getSentAt())) && message?.getSentAt()\">\n        <span class=\"cc-message-list__date\"  >\n          <cometchat-date [timestamp]=\"message?.getSentAt()\" [pattern]=\"DateSeparatorPattern\"   [dateStyle]=\"dateSeparatorStyle\"\n           >\n          </cometchat-date>\n        </span>\n      </div>\n        <div *ngIf=\"getBubbleWrapper(message) \">\n          <ng-container *ngTemplateOutlet=\"getBubbleWrapper(message)\">\n          </ng-container>\n        </div>\n       <div>\n        <cometchat-message-bubble  *ngIf=\"!getBubbleWrapper(message)\" [leadingView]=\" showAvatar ? leadingView : null\" [bottomView]=\"enableReactions ? reactionView : null\"\n        [headerView]=\"getHeaderView(message) || message?.getCategory() != MessageCategory.action && showHeaderTitle(message) ? bubbleHeader : null\" [footerView]=\"footerView\"  [contentView]=\"contentView\" [threadView]=\"threadView\"\n         [id]=\"message?.getId() || message?.getMuid()\" [options]=\"setMessageOptions(message)\"\n          [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"  [alignment]=\"setBubbleAlignment(message)\">\n        <ng-template #contentView>\n          <ng-container *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\" >\n          </ng-container>\n        </ng-template>\n        <ng-template #reactionView>\n          <reactions-view *ngIf=\"hasReaction(message)\" [messageObject]=\"message\" [alignment]=\"setBubbleAlignment(message)\"  [addReactionIconURL]=\"addReactionIconURL\"\n          [loggedInUser]=\"loggedInUser\" [reactionsStyle]=\"reactionsStyle(message)\"></reactions-view>\n          </ng-template>\n         <ng-template #footerView>\n          <div  class=\"cc-message-list__bubble-footer\">\n            <div *ngIf=\"getFooterView(message);else bubbleFooter\">\n              <ng-container *ngTemplateOutlet=\"getFooterView(message);context:{ $implicit: message }\" >\n              </ng-container>\n            </div>\n            <ng-template #bubbleFooter>\n              <div class=\"cc-message-list__bubble-date\" *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && !message.getDeletedAt() && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n                <cometchat-date [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" [pattern]=\"datePattern\">\n                </cometchat-date>\n               </div>\n                 <div *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() ||this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\" class=\"cc-message-list__receipt\">\n                    <cometchat-receipt [receipt]=\"getMessageReceipt(message)\" [receiptStyle]=\"receiptStyle\" [waitIcon]=\"waitIcon\" [sentIcon]=\"sentIcon\" [deliveredIcon]=\"deliveredIcon\" [readIcon]=\"readIcon\" [errorIcon]=\"errorIcon\"></cometchat-receipt>\n                 </div>\n            </ng-template>\n          </div>\n         </ng-template>\n<ng-template #leadingView>\n  <div  *ngIf=\" message?.getCategory() != MessageCategory.action  && showHeaderTitle(message)\" >\n    <cometchat-avatar [name]=\"message?.getSender()?.getName()\" [avatarStyle]=\"avatarStyle\" [image]=\"message?.getSender()?.getAvatar()\">\n    </cometchat-avatar>\n  </div>\n</ng-template>\n<ng-template #bubbleHeader>\n  <div *ngIf=\"getHeaderView(message);else defaultHeader\">\n    <ng-container *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\" >\n    </ng-container>\n  </div>\n<ng-template #defaultHeader>\n  <div  class=\"cc-message-list__bubble-header\" *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n    <cometchat-label [text]=\"message?.getSender()?.getName()\" [labelStyle]=\"labelStyle\"></cometchat-label>\n    <cometchat-date [pattern]=\"datePattern\" [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n   </div>\n</ng-template>\n</ng-template>\n<ng-template #threadView>\n  <div class=\"cc-message-list__threadreplies\" *ngIf=\"message?.getReplyCount() && !message.getDeletedAt()\" >\n    <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n    <cometchat-button [text]=\"getThreadCount(message)\" [buttonStyle]=\"getThreadViewStyle(message)\" [iconURL]=\"threadOpenIcon\" (cc-button-clicked)=\"openThreadView(message)\">\n    </cometchat-button>\n  </div>\n</ng-template>\n      </cometchat-message-bubble>\n       </div>\n    </div>\n    <div class=\"cc-message-list__bottom\" #bottom>\n    </div>\n\n  </div>\n  <div class=\"cc-message-list__message-indicator\" *ngIf=\"UnreadCount && UnreadCount.length > 0 && !isOnBottom\" [ngStyle]=\"{bottom: showSmartReply || footerView ? '20%' : '13%'}\">\n    <cometchat-button [text]=\"newMessageCount\" [buttonStyle]=\"unreadMessagesStyle\" (cc-button-clicked)=\"scrollToBottom()\"></cometchat-button>\n  </div>\n  <div class=\"cc-message-list__footer-view\" [ngStyle]=\"{height: showSmartReply  ? '8%' : 'auto'}\">\n\n    <div *ngIf=\"footerView;else footer\">\n      <ng-container *ngTemplateOutlet=\"footerView\">\n      </ng-container>\n    </div>\n    <ng-template #footer>\n      <div class=\"cc-message-list__smart-replies\" *ngIf=\"showSmartReply && getReplies()\">\n        <smart-replies [smartReplyStyle]=\"smartReplyStyle\" [replies]=\"getReplies()\" (cc-reply-clicked)=\"sendReply($event)\" (cc-close-clicked)=\"closeSmartReply()\">\n        </smart-replies>\n      </div>\n    </ng-template>\n        </div>\n\n</div>\n<!-- default bubbles -->\n<ng-template #textBubble let-message>\n  <cometchat-text-bubble *ngIf=\"message?.type == MessageTypesConstant.groupMember\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"message?.message\"></cometchat-text-bubble>\n  <cometchat-text-bubble *ngIf=\"message?.getDeletedAt()\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"localize('MESSAGE_IS_DELETED')\"></cometchat-text-bubble>\n<cometchat-text-bubble *ngIf=\"!isTranslated(message) && !getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"getTextMessage(message)\"></cometchat-text-bubble>\n<link-preview [linkPreviewStyle]=\"linkPreviewStyle\" (cc-link-clicked)=\"openLinkURL($event)\" *ngIf=\"!message?.getDeletedAt() && getLinkPreview(message) && enableLinkPreview\" [title]=\"getLinkPreviewDetails('title',message)\" [description]=\"getLinkPreviewDetails('description',message)\" [URL]=\"getLinkPreviewDetails('url',message)\" [image]=\"getLinkPreviewDetails('image',message)\" [favIconURL]=\"getLinkPreviewDetails('favicon',message)\">\n  <cometchat-text-bubble\n  *ngIf=\"!isTranslated(message) && getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n  [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"getTextMessage(message)\"></cometchat-text-bubble>\n</link-preview>\n<message-translation-bubble [alignment]=\"getBubbleAlignment(message)\" *ngIf=\"isTranslated(message)\"  [messageTranslationStyle]=\"setTranslationStyle(message)\" [translatedText]=\"isTranslated(message)\">\n  <cometchat-text-bubble *ngIf=\" !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"message?.text\"></cometchat-text-bubble>\n\n</message-translation-bubble>\n</ng-template>\n<ng-template #fileBubble let-message>\n\n  <cometchat-file-bubble [fileStyle]=\"setFileBubbleStyle(message)\" [downloadIconURL]=\"downloadIconURL\" [subtitle]=\"localize('SHARED_FILE')\" [title]=\"message?.data?.attachments ? message?.data?.attachments[0]?.name: ''\" [fileURL]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\"></cometchat-file-bubble>\n</ng-template>\n<ng-template #audioBubble let-message>\n  <cometchat-icon-button [disabled]=\"true\" *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.audio\" [iconURL]=\"getCallTypeIcon(message)\" [buttonStyle]=\"callStatusStyle(message)\" [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n  <cometchat-audio-bubble *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\"  [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\" > </cometchat-audio-bubble>\n</ng-template>\n<ng-template #videoBubble let-message>\n  <cometchat-icon-button [disabled]=\"true\" *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.video\" [iconURL]=\"getCallTypeIcon(message)\" [buttonStyle]=\"callStatusStyle(message)\" [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n\n  <cometchat-video-bubble *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\" [videoStyle]=\"videoBubbleStyle\" [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\" [poster]=\" getImageThumbnail(message)\"></cometchat-video-bubble>\n</ng-template>\n<ng-template #imageBubble let-message>\n <image-moderation  (cc-show-dialog)=\"openWarningDialog($event)\" *ngIf=\"!message.getDeletedAt() && enableImageModeration\" [message]=\"message\" [imageModerationStyle]=\"imageModerationStyle\">\n  <cometchat-image-bubble (cc-image-clicked)=\"openImageInFullScreen(message)\" [imageStyle]=\"imageBubbleStyle\"   [src]=\" getImageThumbnail(message)\" [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n </image-moderation>\n  <cometchat-image-bubble [imageStyle]=\"imageBubbleStyle\" (cc-image-clicked)=\"openImageInFullScreen(message)\" *ngIf=\"!message.getDeletedAt() && !enableImageModeration\"  [src]=\" getImageThumbnail(message)\" [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n</ng-template>\n<ng-template #customTextBubble>\n</ng-template>\n<ng-template #stickerBubble  let-message>\n  <cometchat-image-bubble [src]=\"getSticker(message)\" [imageStyle]=\"imageBubbleStyle\" ></cometchat-image-bubble>\n\n</ng-template>\n<ng-template #whiteboardBubble  let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\" [iconAlignment]=\"documentBubbleAlignment\" [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\" [ccClicked]=\"launchCollaborativeWhiteboardDocument\" [iconURL]=\"whiteboardIconURL\" [title]=\"whiteboardTitle\" [buttonText]=\"whiteboardButtonText\" [subtitle]=\"whiteboardSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #documentBubble  let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\" [iconAlignment]=\"documentBubbleAlignment\" [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\" [ccClicked]=\"launchCollaborativeWhiteboardDocument\" [iconURL]=\"documentIconURL\" [title]=\"documentTitle\" [buttonText]=\"documentButtonText\" [subtitle]=\"documentSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #directCalling  let-message>\n  <cometchat-document-bubble  [hideSeparator]=\"true\" [iconAlignment]=\"callBubbleAlignment\" [documentStyle]=\"getCallBubbleStyle(message)\" [URL]=\"getSessionId(message)\" [ccClicked]=\"startDirectCall\" [iconURL]=\"directCallIconURL\" [title]=\"getCallBubbleTitle(message)\" [buttonText]=\"joinCallButtonText\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #pollBubble  let-message>\n  <polls-bubble [pollStyle]=\"pollBubbleStyle\"  [pollQuestion]=\"getPollBubbleData(message,'question')\" [pollId]=\"getPollBubbleData(message,'id')\"\n   [loggedInUser]=\"loggedInUser\" [senderUid]=\"getPollBubbleData(message)\" [metadata]=\"message?.metadata\"></polls-bubble>\n\n</ng-template>\n\n<!-- thread bubble view -->\n<ng-template #threadMessageBubble let-message>\n  <div *ngIf=\"getBubbleWrapper(message)\">\n    <ng-container *ngTemplateOutlet=\"getBubbleWrapper(message)\">\n    </ng-container>\n  </div>\n  <cometchat-message-bubble  *ngIf=\"!getBubbleWrapper(message)\" [bottomView]=\"enableReactions ? reactionView : null\" [leadingView]=\" showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\" [footerView]=\"footerView\"\n  [contentView]=\"contentView\"  [id]=\"message?.getId() || message?.getMuid()\"  [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"  [alignment]=\"threadedAlignment\">\n    <ng-template #contentView>\n      <ng-container *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\" >\n      </ng-container>\n    </ng-template>\n    <ng-template #reactionView>\n      <reactions-view *ngIf=\"hasReaction(message)\" [messageObject]=\"message\" [alignment]=\"setBubbleAlignment(message)\"\n      \n      [loggedInUser]=\"loggedInUser\" [reactionsStyle]=\"reactionsStyle(message)\" [addReactionIconURL]=\"addReactionIconURL\"></reactions-view>\n      </ng-template>\n     <ng-template #footerView>\n      <div  class=\"cc-message-list__bubble-footer\">\n        <div *ngIf=\"getFooterView(message);else bubbleFooter\">\n          <ng-container *ngTemplateOutlet=\"getFooterView(message);context:{ $implicit: message }\" >\n          </ng-container>\n        </div>\n        <ng-template #bubbleFooter>\n          <div class=\"cc-message-list__bubble-date\" *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n            <cometchat-date [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" [pattern]=\"datePattern\">\n            </cometchat-date>\n           </div>\n             <div *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() ||this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\" class=\"cc-message-list__receipt\">\n                <cometchat-receipt [receipt]=\"getMessageReceipt(message)\" [receiptStyle]=\"receiptStyle\" [waitIcon]=\"waitIcon\" [sentIcon]=\"sentIcon\" [deliveredIcon]=\"\" [readIcon]=\"deliveredIcon\" [errorIcon]=\"errorIcon\"></cometchat-receipt>\n             </div>\n        </ng-template>\n      </div>\n     </ng-template>\n<ng-template #leadingView>\n<div  *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\" >\n<cometchat-avatar [name]=\"message?.getSender()?.getName()\" [avatarStyle]=\"avatarStyle\" [image]=\"message?.getSender()?.getAvatar()\">\n</cometchat-avatar>\n</div>\n</ng-template>\n<ng-template #bubbleHeader>\n<div *ngIf=\"getHeaderView(message);else defaultHeader\">\n<ng-container *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\" >\n</ng-container>\n</div>\n<ng-template #defaultHeader>\n<div  class=\"cc-message-list__bubble-header\" *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n<cometchat-label [text]=\"message?.getSender()?.getName()\" [labelStyle]=\"labelStyle\"></cometchat-label>\n<cometchat-date [pattern]=\"datePattern\" [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n</div>\n</ng-template>\n</ng-template>\n  </cometchat-message-bubble>\n\n</ng-template>\n\n\n<!--  -->\n<ng-template #bubbleView></ng-template>\n<cometchat-popover [popoverStyle]=\"popoverStyle\"  #popoverRef [placement]=\"keyboardAlignment\">\n<cometchat-emoji-keyboard (cc-emoji-clicked)=\"addReaction($event)\"  slot=\"content\"></cometchat-emoji-keyboard>\n</cometchat-popover>\n<cometchat-backdrop *ngIf=\"openConfirmDialog\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-confirm-dialog [title]=\"''\" [messageText]=\"warningText\" (cc-confirm-clicked)=\"onConfirmClick()\" [cancelButtonText]=\"cancelText\" [confirmButtonText]=\"confirmText\" (cc-cancel-clicked)=\"onCancelClick()\" [confirmDialogStyle]=\"confirmDialogStyle\">\n\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-full-screen-viewer (cc-close-clicked)=\"closeImageInFullScreen()\" *ngIf=\"openFullscreenView\" [URL]=\"imageurlToOpen\" [closeIconURL]=\"closeIconURL\" [fullScreenViewerStyle]=\"fullScreenViewerStyle\">\n\n</cometchat-full-screen-viewer>\n\n<!-- ongoing callscreen for direct call -->\n<cometchat-ongoing-call *ngIf=\"showOngoingCall\" [callSettingsBuilder]=\"getCallBuilder()\" [ongoingCallStyle]=\"ongoingCallStyle\" [sessionID]=\"sessionId\"></cometchat-ongoing-call>\n<!-- message information view -->\n<!-- thread bubble view -->\n<ng-template #messageinfoBubble let-message>\n  <div *ngIf=\"getBubbleWrapper(message)\">\n    <ng-container *ngTemplateOutlet=\"getBubbleWrapper(message)\">\n    </ng-container>\n  </div>\n  <cometchat-message-bubble  *ngIf=\"!getBubbleWrapper(message)\" [bottomView]=\"enableReactions && hasReaction(message) ? reactionView : null\" [leadingView]=\" showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\"\n  [contentView]=\"contentView\"  [id]=\"message?.getId() || message?.getMuid()\"  [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"  [alignment]=\"messageInfoAlignment\">\n    <ng-template #contentView>\n      <ng-container *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\" >\n      </ng-container>\n    </ng-template>\n    <ng-template #reactionView>\n      <reactions-view *ngIf=\"hasReaction(message)\" [messageObject]=\"message\" [alignment]=\"setBubbleAlignment(message)\"  [addReactionIconURL]=\"addReactionIconURL\"\n      [loggedInUser]=\"loggedInUser\" [reactionsStyle]=\"reactionsStyle(message)\"></reactions-view>\n      </ng-template>\n<ng-template #leadingView>\n<div  *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\" >\n<cometchat-avatar [name]=\"message?.getSender()?.getName()\" [avatarStyle]=\"avatarStyle\" [image]=\"message?.getSender()?.getAvatar()\">\n</cometchat-avatar>\n</div>\n</ng-template>\n<ng-template #bubbleHeader>\n<div *ngIf=\"getHeaderView(message);else defaultHeader\">\n<ng-container *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\" >\n</ng-container>\n</div>\n<ng-template #defaultHeader>\n<div  class=\"cc-message-list__bubble-header\" *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n<cometchat-label [text]=\"message?.getSender()?.getName()\" [labelStyle]=\"labelStyle\"></cometchat-label>\n<cometchat-date [pattern]=\"datePattern\" [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n</div>\n</ng-template>\n</ng-template>\n  </cometchat-message-bubble>\n\n</ng-template>\n<cometchat-backdrop *ngIf=\"openMessageInfoPage\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-message-information [closeIconURL]=\"messageInformationConfiguration.closeIconURL\"  [loadingStateView]=\"messageInformationConfiguration.loadingStateView\" [errorStateView]=\"messageInformationConfiguration.errorStateView\" [listItemStyle]=\"messageInformationConfiguration.listItemStyle\" [emptyStateView]=\"messageInformationConfiguration.emptyStateView\" [loadingIconURL]=\"messageInformationConfiguration.loadingIconURL\" [readIcon]=\"messageInformationConfiguration.readIcon\" [deliveredIcon]=\"messageInformationConfiguration.deliveredIcon\" [onError]=\"messageInformationConfiguration.onError\" [SubtitleView]=\"messageInformationConfiguration.subtitleView\" [receiptDatePattern]=\"messageInformationConfiguration.receiptDatePattern\" [listItemView]=\"messageInformationConfiguration.listItemView \" [messageInformationStyle]=\"messageInformationConfiguration.messageInformationStyle\" [onClose]=\"messageInformationConfiguration.onClose ??  closeMessageInfoPage\" [bubbleView]=\"messageInformationConfiguration.bubbleView ?? messageinfoBubble\" [message]=\"messageInfoObject\">\n\n  </cometchat-message-information>\n</cometchat-backdrop>\n", styles: [".cc-message-list{height:100%;width:100%;overflow-y:auto;overflow-x:hidden;position:relative}.cc-message-list__wrapper{height:100%;width:100%;overflow-y:hidden}.cc-message-list__bubble-footer{display:flex;justify-content:center;align-items:center}.cc-message-list__date-container{text-align:center;margin:5px 0}.cc-message-list__smart-replies{height:-moz-fit-content;height:fit-content;width:100%;position:absolute;bottom:0;z-index:1}.cc-message-list__date{border-radius:10px;display:flex;justify-content:center}.cc-message-list__threadreplies{min-width:130px;width:100%}.cc-message-list__message-indicator{height:25px;display:flex;align-items:center;justify-content:center;width:100%;bottom:10%;position:absolute}.cc-message-list__footer-view{z-index:1;position:relative;width:100%}.cc-message-list__decorator-message{margin:0;line-height:30px;word-wrap:break-word;padding:0 8px;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;height:100%}.cc-message-list::-webkit-scrollbar{background:transparent;width:8px}.cc-message-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}\n"] }]
+            args: [{ selector: "cometchat-message-list", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-message-list__wrapper\" [ngStyle]=\"wrapperStyle()\" *ngIf=\"!openContactsView\">\n  <div class=\"cc-message-list__header-view\">\n<div *ngIf=\"headerView\">\n  <ng-container *ngTemplateOutlet=\"headerView\">\n  </ng-container>\n</div>\n        </div>\n  <div class=\"cc-message-list\" #listScroll [ngStyle]=\"{height: showSmartReply || showConversationStarter ? '92%' : '100%'}\">\n    <div class=\"cc-message-list__top\" #top>\n    </div>\n    <div class=\"cc-message-list__decorator-message\" *ngIf=\"state == states.loading || state == states.error  || state == states.empty \"\n      [ngStyle]=\"messageContainerStyle()\">\n      <div class=\"cc-message-list__loading-view\" *ngIf=\"state == states.loading \">\n        <cometchat-loader [iconURL]=\"loadingIconURL\" [loaderStyle]=\"loadingStyle()\">\n        </cometchat-loader>\n        <span class=\"cc-message-list__customview--loading\" *ngIf=\"state == states.loading  && loadingStateView\">\n          <ng-container *ngTemplateOutlet=\"loadingStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"cc-message-list__error-view\" *ngIf=\"state == states.error  && !hideError \">\n        <cometchat-label [labelStyle]=\"errorStyle()\" *ngIf=\"state == states.error  && !hideError && !errorStateView\" [text]=\"errorStateText\"\n          >\n        </cometchat-label>\n        <span class=\"cc-message-list__custom-view--error\" *ngIf=\"state == states.error  && !hideError && errorStateView\">\n          <ng-container *ngTemplateOutlet=\"errorStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"cc-message-list__empty-view\" *ngIf=\"state == states.empty\">\n        <!-- <cometchat-label [labelStyle]=\"emptyStyle()\" *ngIf=\"state == states.empty && !emptyStateView\" [text]=\"emptyStateText\"\n          >\n        </cometchat-label> -->\n        <span class=\"cc-message-list__custom-view--empty\" *ngIf=\"state == states.empty && emptyStateView\">\n          <ng-container *ngTemplateOutlet=\"emptyStateView\">\n          </ng-container>\n        </span>\n      </div>\n    </div>\n    <div class=\"cc-message-list__bubble\" *ngFor=\"let message of messagesList; let i = index\">\n      <div class=\"cc-message-list__date-container\" *ngIf=\"(i === 0) && message?.getSentAt()\">\n        <span class=\"cc-message-list__date\" >\n          <cometchat-date [timestamp]=\"message!.getSentAt()\"  [pattern]=\"DateSeparatorPattern\" [dateStyle]=\"dateSeparatorStyle\"\n           >\n          </cometchat-date>\n        </span>\n      </div>\n      <div class=\"cc-message-list__date-container\" *ngIf=\"(i > 0 && isDateDifferent(messagesList[i - 1]?.getSentAt(), messagesList[i]?.getSentAt())) && message?.getSentAt()\">\n        <span class=\"cc-message-list__date\"  >\n          <cometchat-date [timestamp]=\"message?.getSentAt()\" [pattern]=\"DateSeparatorPattern\"   [dateStyle]=\"dateSeparatorStyle\"\n           >\n          </cometchat-date>\n        </span>\n      </div>\n        <div *ngIf=\"getBubbleWrapper(message) \">\n          <ng-container *ngTemplateOutlet=\"getBubbleWrapper(message)\">\n          </ng-container>\n        </div>\n       <div>\n        <cometchat-message-bubble  *ngIf=\"!getBubbleWrapper(message)\" [leadingView]=\" showAvatar ? leadingView : null\" [bottomView]=\"enableReactions ? reactionView : null\"\n        [headerView]=\"getHeaderView(message) || message?.getCategory() != MessageCategory.action && showHeaderTitle(message) ? bubbleHeader : null\" [footerView]=\"footerView\"  [contentView]=\"contentView\" [threadView]=\"threadView\"\n         [id]=\"message?.getId() || message?.getMuid()\" [options]=\"setMessageOptions(message)\"\n          [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"  [alignment]=\"setBubbleAlignment(message)\">\n        <ng-template #contentView>\n          <ng-container *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\" >\n          </ng-container>\n        </ng-template>\n        <ng-template #reactionView>\n          <reactions-view *ngIf=\"hasReaction(message)\" [messageObject]=\"message\" [alignment]=\"setBubbleAlignment(message)\"  [addReactionIconURL]=\"addReactionIconURL\"\n          [loggedInUser]=\"loggedInUser\" [reactionsStyle]=\"reactionsStyle(message)\"></reactions-view>\n          </ng-template>\n         <ng-template #footerView>\n          <div  class=\"cc-message-list__bubble-footer\">\n            <div *ngIf=\"getFooterView(message);else bubbleFooter\">\n              <ng-container *ngTemplateOutlet=\"getFooterView(message);context:{ $implicit: message }\" >\n              </ng-container>\n            </div>\n            <ng-template #bubbleFooter>\n              <div class=\"cc-message-list__bubble-date\" *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && !message.getDeletedAt() && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n                <cometchat-date [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" [pattern]=\"datePattern\">\n                </cometchat-date>\n               </div>\n                 <div *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() ||this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\" class=\"cc-message-list__receipt\">\n                    <cometchat-receipt [receipt]=\"getMessageReceipt(message)\" [receiptStyle]=\"receiptStyle\" [waitIcon]=\"waitIcon\" [sentIcon]=\"sentIcon\" [deliveredIcon]=\"deliveredIcon\" [readIcon]=\"readIcon\" [errorIcon]=\"errorIcon\"></cometchat-receipt>\n                 </div>\n            </ng-template>\n          </div>\n         </ng-template>\n<ng-template #leadingView>\n  <div  *ngIf=\" message?.getCategory() != MessageCategory.action  && showHeaderTitle(message)\" >\n    <cometchat-avatar [name]=\"message?.getSender()?.getName()\" [avatarStyle]=\"avatarStyle\" [image]=\"message?.getSender()?.getAvatar()\">\n    </cometchat-avatar>\n  </div>\n</ng-template>\n<ng-template #bubbleHeader>\n  <div *ngIf=\"getHeaderView(message);else defaultHeader\">\n    <ng-container *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\" >\n    </ng-container>\n  </div>\n<ng-template #defaultHeader>\n  <div  class=\"cc-message-list__bubble-header\" *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n    <cometchat-label [text]=\"message?.getSender()?.getName()\" [labelStyle]=\"labelStyle\"></cometchat-label>\n    <cometchat-date [pattern]=\"datePattern\" [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n   </div>\n</ng-template>\n</ng-template>\n<ng-template #threadView>\n  <div class=\"cc-message-list__threadreplies\" *ngIf=\"message?.getReplyCount() && !message.getDeletedAt()\" >\n    <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n    <cometchat-button [text]=\"getThreadCount(message)\" [buttonStyle]=\"getThreadViewStyle(message)\" [iconURL]=\"threadOpenIcon\" (cc-button-clicked)=\"openThreadView(message)\">\n    </cometchat-button>\n  </div>\n</ng-template>\n      </cometchat-message-bubble>\n       </div>\n    </div>\n    <div class=\"cc-message-list__bottom\" #bottom>\n    </div>\n\n  </div>\n  <div class=\"cc-message-list__message-indicator\" *ngIf=\"UnreadCount && UnreadCount.length > 0 && !isOnBottom\" [ngStyle]=\"{bottom: showSmartReply || footerView || showConversationStarter  ? '20%' : '13%'}\">\n    <cometchat-button [text]=\"newMessageCount\" [buttonStyle]=\"unreadMessagesStyle\" (cc-button-clicked)=\"scrollToBottom()\"></cometchat-button>\n  </div>\n  <div class=\"cc-message-list__footer-view\" [ngStyle]=\"{height: showSmartReply || showConversationStarter ? '8%' : 'auto'}\">\n\n    <div *ngIf=\"footerView;else footer\">\n      <ng-container *ngTemplateOutlet=\"footerView\">\n      </ng-container>\n    </div>\n    <ng-template #footer>\n      <div class=\"cc-message-list__smart-replies\" *ngIf=\"!showConversationStarter && showSmartReply && getReplies()\">\n        <smart-replies [smartReplyStyle]=\"smartReplyStyle\" [replies]=\"getReplies()\" (cc-reply-clicked)=\"sendReply($event)\" (cc-close-clicked)=\"closeSmartReply()\">\n        </smart-replies>\n      </div>\n      <div class=\"cc-message-list__conversation-starters\" *ngIf=\"enableConversationStarter && showConversationStarter\">\n        <div class=\"cc-message-list__footer__decorator-message\" *ngIf=\"conversationStarterState == states.loading || conversationStarterState == states.error  || conversationStarterState == states.empty \"\n        >\n        <div class=\"cc-message-list__footer-view-decorator\" *ngIf=\"conversationStarterState == states.loading\">\n          <cometchat-loader iconURL=\"assets/Spinner.svg\" [loaderStyle]=\"conversationStarterLoader()\">\n          </cometchat-loader>\n          <cometchat-label [labelStyle]=\"conversationStarterStateStyle()\"  [text]=\"starterLoadingStateText\"\n          >\n        </cometchat-label>\n        \n        </div>\n        <div class=\"cc-message-list__footer-view-decorator\" *ngIf=\"conversationStarterState == states.error  && !hideError \">\n          <cometchat-loader iconURL=\"assets/ai-error.svg\" [loaderStyle]=\"conversationStarterLoader()\">\n          </cometchat-loader>\n          <cometchat-label [labelStyle]=\"conversationStarterStateStyle()\"  [text]=\"starterErrorStateText\"\n            >\n          </cometchat-label>\n        \n        </div>\n        <div class=\"cc-message-list__footer-view-decorator\" *ngIf=\"conversationStarterState == states.empty\">\n          <cometchat-loader iconURL=\"assets/ai-empty.svg\" [loaderStyle]=\"conversationStarterLoader()\">\n          </cometchat-loader>\n          <cometchat-label [labelStyle]=\"conversationStarterStateStyle()\"  [text]=\"starterEmptyStateText\"\n            >\n          </cometchat-label>\n  \n        </div>\n      </div>\n        <smart-replies *ngIf=\"conversationStarterState == states.loaded && !parentMessageId\" [smartReplyStyle]=\"conversationStarterStyle\" [replies]=\"conversationStarterReplies\"  (cc-reply-clicked)=\"sendConversationStarter($event)\"  [closeIconURL]=\"''\">\n        </smart-replies>\n      </div>\n    </ng-template>\n        </div>\n\n</div>\n<!-- default bubbles -->\n<ng-template #textBubble let-message>\n  <cometchat-text-bubble *ngIf=\"message?.type == MessageTypesConstant.groupMember\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"message?.message\"></cometchat-text-bubble>\n  <cometchat-text-bubble *ngIf=\"message?.getDeletedAt()\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"localize('MESSAGE_IS_DELETED')\"></cometchat-text-bubble>\n<cometchat-text-bubble *ngIf=\"!isTranslated(message) && !getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"getTextMessage(message)\"></cometchat-text-bubble>\n<link-preview [linkPreviewStyle]=\"linkPreviewStyle\" (cc-link-clicked)=\"openLinkURL($event)\" *ngIf=\"!message?.getDeletedAt() && getLinkPreview(message) && enableLinkPreview\" [title]=\"getLinkPreviewDetails('title',message)\" [description]=\"getLinkPreviewDetails('description',message)\" [URL]=\"getLinkPreviewDetails('url',message)\" [image]=\"getLinkPreviewDetails('image',message)\" [favIconURL]=\"getLinkPreviewDetails('favicon',message)\">\n  <cometchat-text-bubble\n  *ngIf=\"!isTranslated(message) && getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n  [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"getTextMessage(message)\"></cometchat-text-bubble>\n</link-preview>\n<message-translation-bubble [alignment]=\"getBubbleAlignment(message)\" *ngIf=\"isTranslated(message)\"  [messageTranslationStyle]=\"setTranslationStyle(message)\" [translatedText]=\"isTranslated(message)\">\n  <cometchat-text-bubble *ngIf=\" !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"message?.text\"></cometchat-text-bubble>\n\n</message-translation-bubble>\n</ng-template>\n<ng-template #fileBubble let-message>\n\n  <cometchat-file-bubble [fileStyle]=\"setFileBubbleStyle(message)\" [downloadIconURL]=\"downloadIconURL\" [subtitle]=\"localize('SHARED_FILE')\" [title]=\"message?.data?.attachments ? message?.data?.attachments[0]?.name: ''\" [fileURL]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\"></cometchat-file-bubble>\n</ng-template>\n<ng-template #audioBubble let-message>\n  <cometchat-icon-button [disabled]=\"true\" *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.audio\" [iconURL]=\"getCallTypeIcon(message)\" [buttonStyle]=\"callStatusStyle(message)\" [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n  <cometchat-audio-bubble *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\"  [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\" > </cometchat-audio-bubble>\n</ng-template>\n<ng-template #videoBubble let-message>\n  <cometchat-icon-button [disabled]=\"true\" *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.video\" [iconURL]=\"getCallTypeIcon(message)\" [buttonStyle]=\"callStatusStyle(message)\" [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n\n  <cometchat-video-bubble *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\" [videoStyle]=\"videoBubbleStyle\" [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\" [poster]=\" getImageThumbnail(message)\"></cometchat-video-bubble>\n</ng-template>\n<ng-template #imageBubble let-message>\n <image-moderation  (cc-show-dialog)=\"openWarningDialog($event)\" *ngIf=\"!message.getDeletedAt() && enableImageModeration\" [message]=\"message\" [imageModerationStyle]=\"imageModerationStyle\">\n  <cometchat-image-bubble (cc-image-clicked)=\"openImageInFullScreen(message)\" [imageStyle]=\"imageBubbleStyle\"   [src]=\" getImageThumbnail(message)\" [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n </image-moderation>\n  <cometchat-image-bubble [imageStyle]=\"imageBubbleStyle\" (cc-image-clicked)=\"openImageInFullScreen(message)\" *ngIf=\"!message.getDeletedAt() && !enableImageModeration\"  [src]=\" getImageThumbnail(message)\" [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n</ng-template>\n<ng-template #customTextBubble>\n</ng-template>\n<ng-template #stickerBubble  let-message>\n  <cometchat-image-bubble [src]=\"getSticker(message)\" [imageStyle]=\"imageBubbleStyle\" ></cometchat-image-bubble>\n\n</ng-template>\n<ng-template #whiteboardBubble  let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\" [iconAlignment]=\"documentBubbleAlignment\" [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\" [ccClicked]=\"launchCollaborativeWhiteboardDocument\" [iconURL]=\"whiteboardIconURL\" [title]=\"whiteboardTitle\" [buttonText]=\"whiteboardButtonText\" [subtitle]=\"whiteboardSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #documentBubble  let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\" [iconAlignment]=\"documentBubbleAlignment\" [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\" [ccClicked]=\"launchCollaborativeWhiteboardDocument\" [iconURL]=\"documentIconURL\" [title]=\"documentTitle\" [buttonText]=\"documentButtonText\" [subtitle]=\"documentSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #directCalling  let-message>\n  <cometchat-document-bubble  [hideSeparator]=\"true\" [iconAlignment]=\"callBubbleAlignment\" [documentStyle]=\"getCallBubbleStyle(message)\" [URL]=\"getSessionId(message)\" [ccClicked]=\"startDirectCall\" [iconURL]=\"directCallIconURL\" [title]=\"getCallBubbleTitle(message)\" [buttonText]=\"joinCallButtonText\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #pollBubble  let-message>\n  <polls-bubble [pollStyle]=\"pollBubbleStyle\"  [pollQuestion]=\"getPollBubbleData(message,'question')\" [pollId]=\"getPollBubbleData(message,'id')\"\n   [loggedInUser]=\"loggedInUser\" [senderUid]=\"getPollBubbleData(message)\" [metadata]=\"message?.metadata\"></polls-bubble>\n\n</ng-template>\n\n<!-- thread bubble view -->\n<ng-template #threadMessageBubble let-message>\n  <div *ngIf=\"getBubbleWrapper(message)\">\n    <ng-container *ngTemplateOutlet=\"getBubbleWrapper(message)\">\n    </ng-container>\n  </div>\n  <cometchat-message-bubble  *ngIf=\"!getBubbleWrapper(message)\" [bottomView]=\"enableReactions ? reactionView : null\" [leadingView]=\" showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\" [footerView]=\"footerView\"\n  [contentView]=\"contentView\"  [id]=\"message?.getId() || message?.getMuid()\"  [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"  [alignment]=\"threadedAlignment\">\n    <ng-template #contentView>\n      <ng-container *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\" >\n      </ng-container>\n    </ng-template>\n    <ng-template #reactionView>\n      <reactions-view *ngIf=\"hasReaction(message)\" [messageObject]=\"message\" [alignment]=\"setBubbleAlignment(message)\"\n      \n      [loggedInUser]=\"loggedInUser\" [reactionsStyle]=\"reactionsStyle(message)\" [addReactionIconURL]=\"addReactionIconURL\"></reactions-view>\n      </ng-template>\n     <ng-template #footerView>\n      <div  class=\"cc-message-list__bubble-footer\">\n        <div *ngIf=\"getFooterView(message);else bubbleFooter\">\n          <ng-container *ngTemplateOutlet=\"getFooterView(message);context:{ $implicit: message }\" >\n          </ng-container>\n        </div>\n        <ng-template #bubbleFooter>\n          <div class=\"cc-message-list__bubble-date\" *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n            <cometchat-date [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" [pattern]=\"datePattern\">\n            </cometchat-date>\n           </div>\n             <div *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() ||this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\" class=\"cc-message-list__receipt\">\n                <cometchat-receipt [receipt]=\"getMessageReceipt(message)\" [receiptStyle]=\"receiptStyle\" [waitIcon]=\"waitIcon\" [sentIcon]=\"sentIcon\" [deliveredIcon]=\"\" [readIcon]=\"deliveredIcon\" [errorIcon]=\"errorIcon\"></cometchat-receipt>\n             </div>\n        </ng-template>\n      </div>\n     </ng-template>\n<ng-template #leadingView>\n<div  *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\" >\n<cometchat-avatar [name]=\"message?.getSender()?.getName()\" [avatarStyle]=\"avatarStyle\" [image]=\"message?.getSender()?.getAvatar()\">\n</cometchat-avatar>\n</div>\n</ng-template>\n<ng-template #bubbleHeader>\n<div *ngIf=\"getHeaderView(message);else defaultHeader\">\n<ng-container *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\" >\n</ng-container>\n</div>\n<ng-template #defaultHeader>\n<div  class=\"cc-message-list__bubble-header\" *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n<cometchat-label [text]=\"message?.getSender()?.getName()\" [labelStyle]=\"labelStyle\"></cometchat-label>\n<cometchat-date [pattern]=\"datePattern\" [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n</div>\n</ng-template>\n</ng-template>\n  </cometchat-message-bubble>\n\n</ng-template>\n\n\n<!--  -->\n<ng-template #bubbleView></ng-template>\n<cometchat-popover [popoverStyle]=\"popoverStyle\"  #popoverRef [placement]=\"keyboardAlignment\">\n<cometchat-emoji-keyboard (cc-emoji-clicked)=\"addReaction($event)\"  slot=\"content\"></cometchat-emoji-keyboard>\n</cometchat-popover>\n<cometchat-backdrop *ngIf=\"openConfirmDialog\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-confirm-dialog [title]=\"''\" [messageText]=\"warningText\" (cc-confirm-clicked)=\"onConfirmClick()\" [cancelButtonText]=\"cancelText\" [confirmButtonText]=\"confirmText\" (cc-cancel-clicked)=\"onCancelClick()\" [confirmDialogStyle]=\"confirmDialogStyle\">\n\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-full-screen-viewer (cc-close-clicked)=\"closeImageInFullScreen()\" *ngIf=\"openFullscreenView\" [URL]=\"imageurlToOpen\" [closeIconURL]=\"closeIconURL\" [fullScreenViewerStyle]=\"fullScreenViewerStyle\">\n\n</cometchat-full-screen-viewer>\n\n<!-- ongoing callscreen for direct call -->\n<cometchat-ongoing-call *ngIf=\"showOngoingCall\" [callSettingsBuilder]=\"getCallBuilder()\" [ongoingCallStyle]=\"ongoingCallStyle\" [sessionID]=\"sessionId\"></cometchat-ongoing-call>\n<!-- message information view -->\n<!-- thread bubble view -->\n<ng-template #messageinfoBubble let-message>\n  <div *ngIf=\"getBubbleWrapper(message)\">\n    <ng-container *ngTemplateOutlet=\"getBubbleWrapper(message)\">\n    </ng-container>\n  </div>\n  <cometchat-message-bubble  *ngIf=\"!getBubbleWrapper(message)\" [bottomView]=\"enableReactions && hasReaction(message) ? reactionView : null\" [leadingView]=\" showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\"\n  [contentView]=\"contentView\"  [id]=\"message?.getId() || message?.getMuid()\"  [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"  [alignment]=\"messageInfoAlignment\">\n    <ng-template #contentView>\n      <ng-container *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\" >\n      </ng-container>\n    </ng-template>\n    <ng-template #reactionView>\n      <reactions-view *ngIf=\"hasReaction(message)\" [messageObject]=\"message\" [alignment]=\"setBubbleAlignment(message)\"  [addReactionIconURL]=\"addReactionIconURL\"\n      [loggedInUser]=\"loggedInUser\" [reactionsStyle]=\"reactionsStyle(message)\"></reactions-view>\n      </ng-template>\n<ng-template #leadingView>\n<div  *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\" >\n<cometchat-avatar [name]=\"message?.getSender()?.getName()\" [avatarStyle]=\"avatarStyle\" [image]=\"message?.getSender()?.getAvatar()\">\n</cometchat-avatar>\n</div>\n</ng-template>\n<ng-template #bubbleHeader>\n<div *ngIf=\"getHeaderView(message);else defaultHeader\">\n<ng-container *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\" >\n</ng-container>\n</div>\n<ng-template #defaultHeader>\n<div  class=\"cc-message-list__bubble-header\" *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n<cometchat-label [text]=\"message?.getSender()?.getName()\" [labelStyle]=\"labelStyle\"></cometchat-label>\n<cometchat-date [pattern]=\"datePattern\" [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n</div>\n</ng-template>\n</ng-template>\n  </cometchat-message-bubble>\n\n</ng-template>\n<cometchat-backdrop *ngIf=\"openMessageInfoPage\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-message-information [closeIconURL]=\"messageInformationConfiguration.closeIconURL\"  [loadingStateView]=\"messageInformationConfiguration.loadingStateView\" [errorStateView]=\"messageInformationConfiguration.errorStateView\" [listItemStyle]=\"messageInformationConfiguration.listItemStyle\" [emptyStateView]=\"messageInformationConfiguration.emptyStateView\" [loadingIconURL]=\"messageInformationConfiguration.loadingIconURL\" [readIcon]=\"messageInformationConfiguration.readIcon\" [deliveredIcon]=\"messageInformationConfiguration.deliveredIcon\" [onError]=\"messageInformationConfiguration.onError\" [SubtitleView]=\"messageInformationConfiguration.subtitleView\" [receiptDatePattern]=\"messageInformationConfiguration.receiptDatePattern\" [listItemView]=\"messageInformationConfiguration.listItemView \" [messageInformationStyle]=\"messageInformationConfiguration.messageInformationStyle\" [onClose]=\"messageInformationConfiguration.onClose ??  closeMessageInfoPage\" [bubbleView]=\"messageInformationConfiguration.bubbleView ?? messageinfoBubble\" [message]=\"messageInfoObject\">\n\n  </cometchat-message-information>\n</cometchat-backdrop>\n", styles: [".cc-message-list{height:100%;width:100%;overflow-y:auto;overflow-x:hidden;position:relative}.cc-message-list__wrapper{height:100%;width:100%;overflow-y:hidden}.cc-message-list__bubble-footer{display:flex;justify-content:center;align-items:center}.cc-message-list__date-container{text-align:center;margin:5px 0}.cc-message-list__smart-replies,.cc-message-list__conversation-starters{height:-moz-fit-content;height:fit-content;width:100%;position:absolute;bottom:0;z-index:1}.cc-message-list__date{border-radius:10px;display:flex;justify-content:center}.cc-message-list__threadreplies{min-width:130px;width:100%}.cc-message-list__message-indicator{height:25px;display:flex;align-items:center;justify-content:center;width:100%;bottom:10%;position:absolute}.cc-message-list__footer-view{z-index:1;position:relative;width:100%}.cc-message-list__decorator-message{margin:0;line-height:30px;word-wrap:break-word;padding:0 8px;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;height:100%}.cc-message-list__footer__decorator-message{margin:0;line-height:30px;word-wrap:break-word;padding:0 8px 0 16px;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:flex-start;height:100%}.cc-message-list::-webkit-scrollbar{background:transparent;width:8px}.cc-message-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.cc-message-list__footer-view-decorator{display:flex;flex-direction:row;column-gap:8px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { listScroll: [{
                 type: ViewChild,
                 args: ["listScroll", { static: false }]
@@ -9570,6 +9783,117 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }] } });
 
+class CometChatCardViewComponent {
+    constructor(themeService, ref) {
+        this.themeService = themeService;
+        this.ref = ref;
+        this.buttons = [];
+        this.closeCallback = null;
+        this.replies = [];
+        this.state = States.loading;
+        this.states = States;
+        this.errorStateText = localize("SOMETHING_WRONG");
+        this.emptyStateText = localize("NO_MESSAGES_FOUND");
+        this.loadingStateText = localize("GENERATING_REPLIES");
+        this.theme = new CometChatTheme({});
+        this.localize = localize;
+        this.handleGoBack = () => {
+            this.currentSection = undefined;
+            this.activeButtonText = "";
+            this.state = States.loading;
+            this.replies = [];
+            this.ref.detectChanges();
+        };
+        this.stateLoader = () => {
+            return {
+                iconTint: this.theme.palette.getAccent600(),
+            };
+        };
+        this.repliesStateStyle = () => {
+            return {
+                textFont: fontHelper(this.theme.typography.title2),
+                textColor: this.theme.palette.getAccent600(),
+            };
+        };
+        this.theme = themeService.theme;
+    }
+    fetchButtonContent(button) {
+        this.activeButtonText = button.title;
+        this.currentSection = button;
+        this.state = States.loading;
+        this.ref.detectChanges();
+        button.onClick().then((response) => {
+            if (response && (response === null || response === void 0 ? void 0 : response.length) > 0) {
+                this.replies = response;
+                this.state = States.loaded;
+                this.ref.detectChanges();
+            }
+            else {
+                this.state = States.empty;
+                this.ref.detectChanges();
+            }
+        })
+            .catch((err) => {
+            console.log(err);
+            this.state = States.error;
+            this.ref.detectChanges();
+        });
+    }
+    ngOnInit() {
+        if (this.closeCallback) {
+            this.closeCallback(this.handleGoBack);
+        }
+    }
+    buttonStyles() {
+        return {
+            height: "35px",
+            width: "100%",
+            padding: "0 8px",
+            background: this.theme.palette.getAccent100(),
+            border: "none",
+            borderRadius: "8px",
+            buttonTextColor: this.theme.palette.getAccent600(),
+            buttonTextFont: fontHelper(this.theme.typography.text2),
+            margin: "8px 0"
+        };
+    }
+    repliesViewStyle() {
+        return {
+            width: "100%",
+            padding: "8px",
+            background: this.theme.palette.getAccent100(),
+            border: "none",
+            borderRadius: "8px",
+            buttonTextColor: this.theme.palette.getAccent600(),
+            buttonTextFont: fontHelper(this.theme.typography.text3),
+            margin: "8px 0",
+        };
+    }
+    backButtonStyle() {
+        return {
+            height: "24px",
+            width: "24px",
+            background: "transparent",
+            border: "none",
+            buttonIconTint: this.theme.palette.getPrimary(),
+            position: "absolute",
+            top: "8px",
+            left: "8px",
+            zIndex: 2
+        };
+    }
+}
+CometChatCardViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCardViewComponent, deps: [{ token: CometChatThemeService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+CometChatCardViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatCardViewComponent, selector: "cometchat-card-view", inputs: { buttons: "buttons", closeCallback: "closeCallback" }, ngImport: i0, template: "<div class=\"buttons-container cc__scroll-view\"  *ngIf=\"buttons && buttons.length > 0\">\n        <cometchat-label\n          [text]=\"activeButtonText ? activeButtonText : localize('AI')\"\n        ></cometchat-label>\n  \n        <div  class=\"cc__content-view-container\">\n          <div *ngIf=\"!currentSection\" class=\"cc__content-view\">\n            <cometchat-button *ngFor=\"let button of buttons\" (click)=\"fetchButtonContent(button)\" [text]=\"button.title\" [buttonStyle]=\"buttonStyles()\">\n            </cometchat-button>\n          </div>\n  \n          <div *ngIf=\"currentSection\">\n            <div style=\"height: 100%; margin-top: 12px; overflow: hidden auto;\">\n              <cometchat-button (click)=\"handleGoBack()\" iconURL=\"assets/backbutton.svg\" [buttonStyle]=\"backButtonStyle()\">\n              \n              </cometchat-button>\n  \n              <div *ngIf=\"state == states.loaded; else stateView\">\n                <cometchat-button *ngFor=\"let reply of replies\"  [text]=\"reply\" [buttonStyle]=\"repliesViewStyle()\">\n                </cometchat-button>\n              </div>\n  \n              <ng-template #stateView>\n                <div class=\"cc-cardview___decorator-message\" *ngIf=\"state == states.loading || state == states.error  || state == states.empty\">\n        <div class=\"cc-cardview__view-decorator\" *ngIf=\"state == states.loading\">\n          <cometchat-loader iconURL=\"assets/Spinner.svg\" [loaderStyle]=\"stateLoader()\">\n          </cometchat-loader>\n          <cometchat-label [labelStyle]=\"repliesStateStyle()\"  [text]=\"loadingStateText\"\n          >\n        </cometchat-label>\n        \n        </div>\n        <div class=\"cc-cardview__view-decorator\" *ngIf=\"state == states.error \">\n          <cometchat-loader iconURL=\"assets/ai-error.svg\" [loaderStyle]=\"stateLoader()\">\n          </cometchat-loader>\n          <cometchat-label [labelStyle]=\"repliesStateStyle()\"  [text]=\"errorStateText\"\n            >\n          </cometchat-label>\n        \n        </div>\n        <div class=\"cc-cardview__view-decorator\" *ngIf=\"state == states.empty\">\n          <cometchat-loader iconURL=\"assets/ai-empty.svg\" [loaderStyle]=\"stateLoader()\">\n          </cometchat-loader>\n          <cometchat-label [labelStyle]=\"repliesStateStyle()\"  [text]=\"emptyStateText\"\n            >\n          </cometchat-label>\n  \n        </div>\n      </div>\n              </ng-template>\n            </div>\n          </div>\n        </div>\n    \n  </div>", styles: [".buttons-container{background-color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;overflow:hidden;padding:8px}.cc__content-view{height:100%;width:100%;overflow:hidden auto}.cc__content-view-container{height:100%;width:100%;margin-top:8px;overflow:hidden}.cc__content-view::-webkit-scrollbar{background:transparent;width:8px}.cc__content-view::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.cc-cardview___decorator-message{margin:0;line-height:30px;word-wrap:break-word;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;height:100%;position:absolute;bottom:0}\n"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCardViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cometchat-card-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"buttons-container cc__scroll-view\"  *ngIf=\"buttons && buttons.length > 0\">\n        <cometchat-label\n          [text]=\"activeButtonText ? activeButtonText : localize('AI')\"\n        ></cometchat-label>\n  \n        <div  class=\"cc__content-view-container\">\n          <div *ngIf=\"!currentSection\" class=\"cc__content-view\">\n            <cometchat-button *ngFor=\"let button of buttons\" (click)=\"fetchButtonContent(button)\" [text]=\"button.title\" [buttonStyle]=\"buttonStyles()\">\n            </cometchat-button>\n          </div>\n  \n          <div *ngIf=\"currentSection\">\n            <div style=\"height: 100%; margin-top: 12px; overflow: hidden auto;\">\n              <cometchat-button (click)=\"handleGoBack()\" iconURL=\"assets/backbutton.svg\" [buttonStyle]=\"backButtonStyle()\">\n              \n              </cometchat-button>\n  \n              <div *ngIf=\"state == states.loaded; else stateView\">\n                <cometchat-button *ngFor=\"let reply of replies\"  [text]=\"reply\" [buttonStyle]=\"repliesViewStyle()\">\n                </cometchat-button>\n              </div>\n  \n              <ng-template #stateView>\n                <div class=\"cc-cardview___decorator-message\" *ngIf=\"state == states.loading || state == states.error  || state == states.empty\">\n        <div class=\"cc-cardview__view-decorator\" *ngIf=\"state == states.loading\">\n          <cometchat-loader iconURL=\"assets/Spinner.svg\" [loaderStyle]=\"stateLoader()\">\n          </cometchat-loader>\n          <cometchat-label [labelStyle]=\"repliesStateStyle()\"  [text]=\"loadingStateText\"\n          >\n        </cometchat-label>\n        \n        </div>\n        <div class=\"cc-cardview__view-decorator\" *ngIf=\"state == states.error \">\n          <cometchat-loader iconURL=\"assets/ai-error.svg\" [loaderStyle]=\"stateLoader()\">\n          </cometchat-loader>\n          <cometchat-label [labelStyle]=\"repliesStateStyle()\"  [text]=\"errorStateText\"\n            >\n          </cometchat-label>\n        \n        </div>\n        <div class=\"cc-cardview__view-decorator\" *ngIf=\"state == states.empty\">\n          <cometchat-loader iconURL=\"assets/ai-empty.svg\" [loaderStyle]=\"stateLoader()\">\n          </cometchat-loader>\n          <cometchat-label [labelStyle]=\"repliesStateStyle()\"  [text]=\"emptyStateText\"\n            >\n          </cometchat-label>\n  \n        </div>\n      </div>\n              </ng-template>\n            </div>\n          </div>\n        </div>\n    \n  </div>", styles: [".buttons-container{background-color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;overflow:hidden;padding:8px}.cc__content-view{height:100%;width:100%;overflow:hidden auto}.cc__content-view-container{height:100%;width:100%;margin-top:8px;overflow:hidden}.cc__content-view::-webkit-scrollbar{background:transparent;width:8px}.cc__content-view::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.cc-cardview___decorator-message{margin:0;line-height:30px;word-wrap:break-word;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;height:100%;position:absolute;bottom:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: CometChatThemeService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { buttons: [{
+                type: Input
+            }], closeCallback: [{
+                type: Input
+            }] } });
+
 /**
 *
 * CometChatMessageComposer is used to send message to user or group.
@@ -9619,7 +9943,9 @@ class CometChatMessageComposerComponent {
         this.showCreatePolls = false;
         this.showStickerKeyboard = false;
         this.showActionSheetItem = false;
+        this.showAiFeatures = false;
         this.showPreview = false;
+        this.aiFeaturesCloseCallback = null;
         this.acceptHandlers = {
             "image/*": this.onImageChange.bind(this),
             "video/*": this.onVideoChange.bind(this),
@@ -9630,6 +9956,7 @@ class CometChatMessageComposerComponent {
         this.toggleMediaRecorded = false;
         this.stickerConfiguration = {};
         this.closeButtonIconURL = "assets/plus-rotated.svg";
+        this.buttons = [];
         this.sendButtonStyle = {
             height: "24px",
             width: "24px",
@@ -9706,6 +10033,14 @@ class CometChatMessageComposerComponent {
             borderRadius: "8px",
             boxShadow: "0px 0px 8px rgba(20, 20, 20, 0.2)",
         };
+        this.aiPopover = {
+            width: "280px",
+            height: "220px",
+            border: "none",
+            background: "transparent",
+            borderRadius: "8px",
+            boxShadow: "0px 0px 8px rgba(20, 20, 20, 0.2)",
+        };
         this.mediaRecordedPopover = {
             width: "250px",
             height: "100px",
@@ -9748,6 +10083,8 @@ class CometChatMessageComposerComponent {
         this.messageSending = false;
         this.showSendButton = false;
         this.showEmojiKeyboard = false;
+        this.isAiEnabled = false;
+        this.smartReplies = [];
         this.sendMessageOnEnter = (event) => {
             var _a, _b;
             this.showSendButton = false;
@@ -9889,6 +10226,44 @@ class CometChatMessageComposerComponent {
                 this.showStickerKeyboard = !this.showStickerKeyboard;
                 this.ref.detectChanges();
             }
+            if (this.showAiFeatures) {
+                this.aiButtonRef.nativeElement.click();
+                this.showAiFeatures = !this.showAiFeatures;
+                this.ref.detectChanges();
+            }
+            else {
+                return;
+            }
+        };
+        this.handleAiFeaturesClose = (callback) => {
+            this.aiFeaturesCloseCallback = callback;
+        };
+        this.openAiFeatures = (event) => {
+            var _a;
+            if (this.aiFeaturesCloseCallback) {
+                this.aiFeaturesCloseCallback();
+            }
+            if ((_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.hasOwnProperty("isOpen")) {
+                this.showAiFeatures = false;
+                this.ref.detectChanges();
+                return;
+            }
+            this.showAiFeatures = !this.showAiFeatures;
+            this.closeMediaRecorder();
+            if (this.showEmojiKeyboard) {
+                this.emojiButtonRef.nativeElement.click();
+                this.showEmojiKeyboard = !this.showEmojiKeyboard;
+            }
+            if (this.showStickerKeyboard) {
+                this.stickerButtonRef.nativeElement.click();
+                this.showStickerKeyboard = !this.showStickerKeyboard;
+                this.ref.detectChanges();
+            }
+            if (this.showActionSheetItem) {
+                this.actionSheetRef.nativeElement.click();
+                this.showActionSheetItem = !this.showActionSheetItem;
+                this.ref.detectChanges();
+            }
             else {
                 return;
             }
@@ -9912,6 +10287,11 @@ class CometChatMessageComposerComponent {
                 this.showStickerKeyboard = !this.showStickerKeyboard;
                 this.ref.detectChanges();
             }
+            if (this.showAiFeatures) {
+                this.aiButtonRef.nativeElement.click();
+                this.showAiFeatures = !this.showAiFeatures;
+                this.ref.detectChanges();
+            }
             else {
                 return;
             }
@@ -9940,6 +10320,11 @@ class CometChatMessageComposerComponent {
                 this.showStickerKeyboard = !this.showStickerKeyboard;
                 this.ref.detectChanges();
             }
+            if (this.showAiFeatures) {
+                this.aiButtonRef.nativeElement.click();
+                this.showAiFeatures = !this.showAiFeatures;
+                this.ref.detectChanges();
+            }
             else {
                 return;
             }
@@ -9968,6 +10353,25 @@ class CometChatMessageComposerComponent {
                 return;
             }
         };
+        this.getSmartReplies = () => {
+            return new Promise((resolve, reject) => {
+                var _a, _b;
+                let receiverId = this.user ? (_a = this.user) === null || _a === void 0 ? void 0 : _a.getUid() : (_b = this.group) === null || _b === void 0 ? void 0 : _b.getGuid();
+                let receiverType = this.user ? CometChatUIKitConstants.MessageReceiverType.user : CometChatUIKitConstants.MessageReceiverType.group;
+                CometChat.getSmartReplies(receiverId, receiverType).then((response) => {
+                    let repliesArray = [];
+                    Object.keys(response).forEach((reply) => {
+                        if (response[reply] && response[reply] != "") {
+                            repliesArray.push(response[reply]);
+                        }
+                    });
+                    resolve(repliesArray);
+                })
+                    .catch((err) => {
+                    return reject(err);
+                });
+            });
+        };
     }
     sendReaction() {
         var _a, _b;
@@ -10028,6 +10432,10 @@ class CometChatMessageComposerComponent {
                 this.openEditPreview();
             }
         });
+        this.ccComposeMessage = CometChatUIEvents.ccComposeMessage.subscribe((text) => {
+            this.text = text;
+            this.ref.detectChanges();
+        });
     }
     openEditPreview() {
         this.showPreview = true;
@@ -10038,15 +10446,43 @@ class CometChatMessageComposerComponent {
         var _a;
         (_a = this.ccMessageEdit) === null || _a === void 0 ? void 0 : _a.unsubscribe();
     }
+    closeModals() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        if (this.showActionSheetItem) {
+            (_b = (_a = this.actionSheetRef) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.click();
+            this.showActionSheetItem = false;
+        }
+        if (this.showEmojiKeyboard) {
+            (_d = (_c = this.emojiButtonRef) === null || _c === void 0 ? void 0 : _c.nativeElement) === null || _d === void 0 ? void 0 : _d.click();
+            this.showEmojiKeyboard = false;
+        }
+        if (this.showStickerKeyboard) {
+            (_f = (_e = this.stickerButtonRef) === null || _e === void 0 ? void 0 : _e.nativeElement) === null || _f === void 0 ? void 0 : _f.click();
+            this.showStickerKeyboard = false;
+        }
+        if (this.toggleMediaRecorded) {
+            (_h = (_g = this.mediaRecordedRef) === null || _g === void 0 ? void 0 : _g.nativeElement) === null || _h === void 0 ? void 0 : _h.click();
+            this.toggleMediaRecorded = false;
+        }
+        if (this.showAiFeatures) {
+            (_k = (_j = this.aiButtonRef) === null || _j === void 0 ? void 0 : _j.nativeElement) === null || _k === void 0 ? void 0 : _k.click();
+            this.showAiFeatures = false;
+        }
+    }
     ngOnChanges(changes) {
-        var _a;
+        var _a, _b, _c;
         if (changes["user"] || changes["group"]) {
+            this.closeModals();
+            this.messageText = "";
+            (_b = (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.emptyInputField();
+            this.showSendButton = false;
+            this.text = "";
             this.composerId = this.getComposerId();
             if (this.attachmentOptions) {
                 this.composerActions = this.attachmentOptions(this.user || this.group, this.composerId);
             }
             else {
-                this.composerActions = (_a = ChatConfigurator.getDataSource()) === null || _a === void 0 ? void 0 : _a.getAttachmentOptions(this.themeService.theme, this.user, this.group, this.composerId);
+                this.composerActions = (_c = ChatConfigurator.getDataSource()) === null || _c === void 0 ? void 0 : _c.getAttachmentOptions(this.themeService.theme, this.user, this.group, this.composerId);
                 this.addAttachmentCallback();
             }
         }
@@ -10430,6 +10866,20 @@ class CometChatMessageComposerComponent {
         else {
             this.enableStickerKeyboard = false;
         }
+        this.enableAiFeatures();
+    }
+    enableAiFeatures() {
+        if (ChatConfigurator.names.includes('aienabler') && !this.parentMessageId) {
+            this.isAiEnabled = true;
+            if (ChatConfigurator.names.includes('aismartreply')) {
+                this.buttons.push({
+                    title: localize("SUGGEST_A_REPLY"),
+                    id: "aismartreply",
+                    onClick: this.getSmartReplies
+                });
+                this.ref.detectChanges();
+            }
+        }
     }
     composerWrapperStyle() {
         return {
@@ -10440,6 +10890,8 @@ class CometChatMessageComposerComponent {
         this.emojiPopover.boxShadow = `0px 0px 32px ${this.themeService.theme.palette.getAccent50()}`;
         this.stickerPopover.boxShadow = `0px 0px 32px ${this.themeService.theme.palette.getAccent50()}`;
         this.mediaRecordedPopover.boxShadow = `0px 0px 32px ${this.themeService.theme.palette.getAccent50()}`;
+        this.aiPopover.background = this.themeService.theme.palette.getBackground();
+        this.aiPopover.boxShadow = `0px 0px 32px ${this.themeService.theme.palette.getAccent50()}`;
         this.setComposerStyle();
         this.actionsheetStyle = {
             layoutModeIconTint: this.messageComposerStyle.ActionSheetLayoutModeIconTint || this.themeService.theme.palette.getAccent(),
@@ -10611,10 +11063,10 @@ 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", messageComposerStyle: "messageComposerStyle", onSendButtonClick: "onSendButtonClick", onError: "onError", backdropStyle: "backdropStyle", hideVoiceRecording: "hideVoiceRecording", mediaRecorderStyle: "mediaRecorderStyle", voiceRecordingIconURL: "voiceRecordingIconURL", voiceRecordingCloseIconURL: "voiceRecordingCloseIconURL", voiceRecordingStartIconURL: "voiceRecordingStartIconURL", voiceRecordingStopIconURL: "voiceRecordingStopIconURL", voiceRecordingSubmitIconURL: "voiceRecordingSubmitIconURL" }, 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 }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-message-composer__wrapper\" [ngStyle]=\"composerWrapperStyle()\">\n  <div class=\"cc-message-composer__header-view\" *ngIf=\"headerView; else messagePreview\">\n    <ng-container *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\" [previewSubtitle]=\"messageToBeEdited.getText()\" (cc-preview-close-clicked)=\"closePreview()\"> </cometchat-preview>\n    </div>\n  </ng-template>\n<div class=\"cc-message-composer__input\">\n  <cometchat-message-input (cc-message-input-entered)=\"sendMessageOnEnter($event)\" #inputRef [text]=\"text\" (cc-message-input-changed)=\"messageInputChanged($event)\" [messageInputStyle]=\"messageInputStyle\" [placeholderText]=\"placeholderText\" [auxiliaryButtonAlignment]=\"auxiliaryButtonsAlignment\">\n    <div slot=\"secondaryView\">\n      <div *ngIf=\"secondaryButtonView;else secondaryButton\">\n        <ng-container *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 (cc-popover-outside-click)=\"openActionSheet($event)\" [placement]=\"auxilaryPlacement\" [popoverStyle]=\"popoverStyle\" >\n          <cometchat-action-sheet slot=\"content\" [actions]=\"composerActions\" [actionSheetStyle]=\"actionsheetStyle\" (cc-actionsheet-clicked)=\"handleActions($event)\">\n          </cometchat-action-sheet>\n            <cometchat-button #actionSheetRef slot=\"children\" (cc-button-clicked)=\"openActionSheet($event)\" [iconURL]=\"!showActionSheetItem || (showEmojiKeyboard && !showActionSheetItem)  ? attachmentIconURL  : closeButtonIconURL\" [buttonStyle]=\"attachmentButtonStyle\"></cometchat-button>\n        </cometchat-popover>\n    </div>\n      </ng-template>\n    </div>\n\n      <div class=\"cc-message-composer__auxiliary\" slot=\"auxilaryView\">\n        <div class=\"cc-message-composer__custom-auxiliary-view\" *ngIf=\"auxilaryButtonView\">\n          <ng-container *ngTemplateOutlet=\"auxilaryButtonView;context:{ $implicit: user ?? group, composerId:composerId }\">\n          </ng-container>\n        </div>\n   \n        <div class=\"cc-message-composer__stickerkeyboard\" *ngIf=\"enableStickerKeyboard\">\n          <cometchat-popover (cc-popover-outside-click)=\"openStickerKeyboard($event)\" [popoverStyle]=\"stickerPopover\" [placement]=\"auxilaryPlacement\" >\n            <stickers-keyboard  slot=\"content\"  [stickerStyle]=\"stickerKeyboardStyle\" (cc-sticker-clicked)=\"sendSticker($event)\">\n            </stickers-keyboard>\n            <cometchat-button [hoverText]=\"localize('STICKER')\" slot=\"children\" #stickerButtonRef  (cc-button-clicked)=\"openStickerKeyboard($event)\" [iconURL]=\" !showStickerKeyboard ? stickerButtonIconURL : closeButtonIconURL\" [buttonStyle]=\"stickerButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n        <div class=\"cc-message-composer__emojikeyboard\">\n          <cometchat-popover (cc-popover-outside-click)=\"openEmojiKeyboard($event)\" [placement]=\"auxilaryPlacement\" [popoverStyle]=\"emojiPopover\" >\n            <cometchat-emoji-keyboard slot=\"content\" [emojiKeyboardStyle]=\"emojiKeyboardStyle\" (cc-emoji-clicked)=\"appendEmoji($event)\">\n            </cometchat-emoji-keyboard>\n            <cometchat-button #emojiButtonRef [hoverText]=\"localize('EMOJI')\" slot=\"children\" (cc-button-clicked)=\"openEmojiKeyboard($event)\" [iconURL]=\" !showEmojiKeyboard  || (!showEmojiKeyboard && showActionSheetItem) ? emojiButtonIconURL : closeButtonIconURL\" [buttonStyle]=\"emojiButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n        <div class=\"cc-message-composer__mediarecorder\" *ngIf=\"!hideVoiceRecording\">\n          <cometchat-popover [closeOnOutsideClick]=\"false\"  [popoverStyle]=\"mediaRecordedPopover\" [placement]=\"auxilaryPlacement\" >\n            \n            <cometchat-media-recorder *ngIf=\"toggleMediaRecorded\" [autoRecording]=\"true\"  startIconText=\"\" stopIconText=\"\" submitButtonIconText=\"\" [submitButtonIconURL]=\"voiceRecordingSubmitIconURL\" [startIconURL]=\"voiceRecordingStartIconURL\" [stopIconURL]=\"voiceRecordingStopIconURL\"  [closeIconURL]=\"voiceRecordingCloseIconURL\" (cc-media-recorder-submitted)=\"sendRecordedMedia($event)\" (cc-media-recorder-closed)=\"closeMediaRecorder($event)\" slot=\"content\" [mediaPlayerStyle]=\"mediaRecorderStyle\"></cometchat-media-recorder>\n            <cometchat-icon-button [hoverText]=\"localize('VOICE_RECORDING')\" slot=\"children\" #mediaRecordedRef  (cc-button-clicked)=\"openMediaRecorded($event)\" [iconURL]=\" !toggleMediaRecorded ? voiceRecordingIconURL : closeButtonIconURL\" [buttonStyle]=\"mediaRecorderButtonStyle\"></cometchat-icon-button>\n          </cometchat-popover>\n        </div>\n      </div>\n    <div slot=\"primaryView\">\n      <div *ngIf=\"sendButtonView;else sendButton\">\n      </div>\n      <ng-template #sendButton>\n        <div class=\"cc-message-composer__sendbutton\" *ngIf=\"showSendButton || hideLiveReaction\">\n  <cometchat-button [iconURL]=\"sendButtonIconURL\" [buttonStyle]=\"sendButtonStyle\" [hoverText]=\"localize('SEND_MESSAGE')\" (cc-button-clicked)=\"customSendMethod(messageText)\"></cometchat-button>\n        </div>\n        <div class=\"cc-message-composer__livereaction\" *ngIf=\"!hideLiveReaction && !showSendButton\">\n          <cometchat-button [iconURL]=\"LiveReactionIconURL\" [hoverText]=\"localize('LIVE_REACTION')\" [buttonStyle]=\"liveReactionStyle\" (cc-button-clicked)=\"sendReaction()\"></cometchat-button>\n          </div>\n      </ng-template>\n    </div>\n  </cometchat-message-input>\n</div>\n</div>\n\n<input class=\"cc-message-composer__mediainput\" #inputElement (change)=\"inputChangeHandler($event)\" />\n<cometchat-backdrop *ngIf=\"showCreatePolls\" [backdropStyle]=\"backdropStyle\">\n  <create-poll [user]=\"user\" [group]=\"group\" (cc-close-clicked)=\"closeCreatePolls()\" [createPollStyle]=\"createPollStyle\"></create-poll>\n</cometchat-backdrop>", 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%}.cc-message-composer__mediainput{display:none}.cc-message-composer__auxiliary{display:flex;gap:8px}*{box-sizing:border-box}\n"], 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", 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", messageComposerStyle: "messageComposerStyle", onSendButtonClick: "onSendButtonClick", onError: "onError", backdropStyle: "backdropStyle", hideVoiceRecording: "hideVoiceRecording", mediaRecorderStyle: "mediaRecorderStyle", voiceRecordingIconURL: "voiceRecordingIconURL", voiceRecordingCloseIconURL: "voiceRecordingCloseIconURL", voiceRecordingStartIconURL: "voiceRecordingStartIconURL", voiceRecordingStopIconURL: "voiceRecordingStopIconURL", voiceRecordingSubmitIconURL: "voiceRecordingSubmitIconURL" }, 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 }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-message-composer__wrapper\" [ngStyle]=\"composerWrapperStyle()\">\n  <div class=\"cc-message-composer__header-view\" *ngIf=\"headerView; else messagePreview\">\n    <ng-container *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\" [previewSubtitle]=\"messageToBeEdited.getText()\" (cc-preview-close-clicked)=\"closePreview()\"> </cometchat-preview>\n    </div>\n  </ng-template>\n<div class=\"cc-message-composer__input\">\n  <cometchat-message-input (cc-message-input-entered)=\"sendMessageOnEnter($event)\" #inputRef [text]=\"text\" (cc-message-input-changed)=\"messageInputChanged($event)\" [messageInputStyle]=\"messageInputStyle\" [placeholderText]=\"placeholderText\" [auxiliaryButtonAlignment]=\"auxiliaryButtonsAlignment\">\n    <div slot=\"secondaryView\">\n      <div *ngIf=\"secondaryButtonView;else secondaryButton\">\n        <ng-container *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 (cc-popover-outside-click)=\"openActionSheet($event)\" [placement]=\"auxilaryPlacement\" [popoverStyle]=\"popoverStyle\" >\n          <cometchat-action-sheet slot=\"content\" [actions]=\"composerActions\" [actionSheetStyle]=\"actionsheetStyle\" (cc-actionsheet-clicked)=\"handleActions($event)\">\n          </cometchat-action-sheet>\n            <cometchat-button #actionSheetRef slot=\"children\" (cc-button-clicked)=\"openActionSheet($event)\" [iconURL]=\"!showActionSheetItem || (showEmojiKeyboard && !showActionSheetItem)  ? attachmentIconURL  : closeButtonIconURL\" [buttonStyle]=\"attachmentButtonStyle\"></cometchat-button>\n        </cometchat-popover>\n    </div>\n      </ng-template>\n    </div>\n\n      <div class=\"cc-message-composer__auxiliary\" slot=\"auxilaryView\">\n        <div class=\"cc-message-composer__custom-auxiliary-view\" *ngIf=\"auxilaryButtonView\">\n          <ng-container *ngTemplateOutlet=\"auxilaryButtonView;context:{ $implicit: user ?? group, composerId:composerId }\">\n          </ng-container>\n        </div>\n        <div class=\"cc-message-composer__stickerkeyboard\" *ngIf=\"isAiEnabled\">\n          <cometchat-popover (cc-popover-outside-click)=\"openStickerKeyboard($event)\" [popoverStyle]=\"aiPopover\" [placement]=\"auxilaryPlacement\" >\n            <cometchat-card-view [closeCallback]=\"handleAiFeaturesClose\"  slot=\"content\" [buttons]=\"buttons\">\n            </cometchat-card-view>\n            <cometchat-button [hoverText]=\"localize('AI')\" slot=\"children\" #aiButtonRef (cc-button-clicked)=\"openAiFeatures($event)\" [iconURL]=\" !showAiFeatures ? 'assets/ai-bot.svg' : closeButtonIconURL\" [buttonStyle]=\"stickerButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n   \n        <div class=\"cc-message-composer__stickerkeyboard\" *ngIf=\"enableStickerKeyboard\">\n          <cometchat-popover (cc-popover-outside-click)=\"openStickerKeyboard($event)\" [popoverStyle]=\"stickerPopover\" [placement]=\"auxilaryPlacement\" >\n            <stickers-keyboard  slot=\"content\"  [stickerStyle]=\"stickerKeyboardStyle\" (cc-sticker-clicked)=\"sendSticker($event)\">\n            </stickers-keyboard>\n            <cometchat-button [hoverText]=\"localize('STICKER')\" slot=\"children\" #stickerButtonRef  (cc-button-clicked)=\"openStickerKeyboard($event)\" [iconURL]=\" !showStickerKeyboard ? stickerButtonIconURL : closeButtonIconURL\" [buttonStyle]=\"stickerButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n        <div class=\"cc-message-composer__emojikeyboard\">\n          <cometchat-popover (cc-popover-outside-click)=\"openEmojiKeyboard($event)\" [placement]=\"auxilaryPlacement\" [popoverStyle]=\"emojiPopover\" >\n            <cometchat-emoji-keyboard slot=\"content\" [emojiKeyboardStyle]=\"emojiKeyboardStyle\" (cc-emoji-clicked)=\"appendEmoji($event)\">\n            </cometchat-emoji-keyboard>\n            <cometchat-button #emojiButtonRef [hoverText]=\"localize('EMOJI')\" slot=\"children\" (cc-button-clicked)=\"openEmojiKeyboard($event)\" [iconURL]=\" !showEmojiKeyboard  || (!showEmojiKeyboard && showActionSheetItem) ? emojiButtonIconURL : closeButtonIconURL\" [buttonStyle]=\"emojiButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n        <div class=\"cc-message-composer__mediarecorder\" *ngIf=\"!hideVoiceRecording\">\n          <cometchat-popover [closeOnOutsideClick]=\"false\"  [popoverStyle]=\"mediaRecordedPopover\" [placement]=\"auxilaryPlacement\" >\n            \n            <cometchat-media-recorder *ngIf=\"toggleMediaRecorded\" [autoRecording]=\"true\"  startIconText=\"\" stopIconText=\"\" submitButtonIconText=\"\" [submitButtonIconURL]=\"voiceRecordingSubmitIconURL\" [startIconURL]=\"voiceRecordingStartIconURL\" [stopIconURL]=\"voiceRecordingStopIconURL\"  [closeIconURL]=\"voiceRecordingCloseIconURL\" (cc-media-recorder-submitted)=\"sendRecordedMedia($event)\" (cc-media-recorder-closed)=\"closeMediaRecorder($event)\" slot=\"content\" [mediaPlayerStyle]=\"mediaRecorderStyle\"></cometchat-media-recorder>\n            <cometchat-icon-button [hoverText]=\"localize('VOICE_RECORDING')\" slot=\"children\" #mediaRecordedRef  (cc-button-clicked)=\"openMediaRecorded($event)\" [iconURL]=\" !toggleMediaRecorded ? voiceRecordingIconURL : closeButtonIconURL\" [buttonStyle]=\"mediaRecorderButtonStyle\"></cometchat-icon-button>\n          </cometchat-popover>\n        </div>\n      </div>\n    <div slot=\"primaryView\">\n      <div *ngIf=\"sendButtonView;else sendButton\">\n      </div>\n      <ng-template #sendButton>\n        <div class=\"cc-message-composer__sendbutton\" *ngIf=\"showSendButton || hideLiveReaction\">\n  <cometchat-button [iconURL]=\"sendButtonIconURL\" [buttonStyle]=\"sendButtonStyle\" [hoverText]=\"localize('SEND_MESSAGE')\" (cc-button-clicked)=\"customSendMethod(messageText)\"></cometchat-button>\n        </div>\n        <div class=\"cc-message-composer__livereaction\" *ngIf=\"!hideLiveReaction && !showSendButton\">\n          <cometchat-button [iconURL]=\"LiveReactionIconURL\" [hoverText]=\"localize('LIVE_REACTION')\" [buttonStyle]=\"liveReactionStyle\" (cc-button-clicked)=\"sendReaction()\"></cometchat-button>\n          </div>\n      </ng-template>\n    </div>\n  </cometchat-message-input>\n</div>\n</div>\n\n<input class=\"cc-message-composer__mediainput\" #inputElement (change)=\"inputChangeHandler($event)\" />\n<cometchat-backdrop *ngIf=\"showCreatePolls\" [backdropStyle]=\"backdropStyle\">\n  <create-poll [user]=\"user\" [group]=\"group\" (cc-close-clicked)=\"closeCreatePolls()\" [createPollStyle]=\"createPollStyle\"></create-poll>\n</cometchat-backdrop>", 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%}.cc-message-composer__mediainput{display:none}.cc-message-composer__auxiliary{display:flex;gap:8px}*{box-sizing:border-box}cometchat-card-view{height:100%;width:100%;overflow:hidden;display:flex;border-radius:8px}\n"], components: [{ type: CometChatCardViewComponent, selector: "cometchat-card-view", inputs: ["buttons", "closeCallback"] }], 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-message-composer__header-view\" *ngIf=\"headerView; else messagePreview\">\n    <ng-container *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\" [previewSubtitle]=\"messageToBeEdited.getText()\" (cc-preview-close-clicked)=\"closePreview()\"> </cometchat-preview>\n    </div>\n  </ng-template>\n<div class=\"cc-message-composer__input\">\n  <cometchat-message-input (cc-message-input-entered)=\"sendMessageOnEnter($event)\" #inputRef [text]=\"text\" (cc-message-input-changed)=\"messageInputChanged($event)\" [messageInputStyle]=\"messageInputStyle\" [placeholderText]=\"placeholderText\" [auxiliaryButtonAlignment]=\"auxiliaryButtonsAlignment\">\n    <div slot=\"secondaryView\">\n      <div *ngIf=\"secondaryButtonView;else secondaryButton\">\n        <ng-container *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 (cc-popover-outside-click)=\"openActionSheet($event)\" [placement]=\"auxilaryPlacement\" [popoverStyle]=\"popoverStyle\" >\n          <cometchat-action-sheet slot=\"content\" [actions]=\"composerActions\" [actionSheetStyle]=\"actionsheetStyle\" (cc-actionsheet-clicked)=\"handleActions($event)\">\n          </cometchat-action-sheet>\n            <cometchat-button #actionSheetRef slot=\"children\" (cc-button-clicked)=\"openActionSheet($event)\" [iconURL]=\"!showActionSheetItem || (showEmojiKeyboard && !showActionSheetItem)  ? attachmentIconURL  : closeButtonIconURL\" [buttonStyle]=\"attachmentButtonStyle\"></cometchat-button>\n        </cometchat-popover>\n    </div>\n      </ng-template>\n    </div>\n\n      <div class=\"cc-message-composer__auxiliary\" slot=\"auxilaryView\">\n        <div class=\"cc-message-composer__custom-auxiliary-view\" *ngIf=\"auxilaryButtonView\">\n          <ng-container *ngTemplateOutlet=\"auxilaryButtonView;context:{ $implicit: user ?? group, composerId:composerId }\">\n          </ng-container>\n        </div>\n   \n        <div class=\"cc-message-composer__stickerkeyboard\" *ngIf=\"enableStickerKeyboard\">\n          <cometchat-popover (cc-popover-outside-click)=\"openStickerKeyboard($event)\" [popoverStyle]=\"stickerPopover\" [placement]=\"auxilaryPlacement\" >\n            <stickers-keyboard  slot=\"content\"  [stickerStyle]=\"stickerKeyboardStyle\" (cc-sticker-clicked)=\"sendSticker($event)\">\n            </stickers-keyboard>\n            <cometchat-button [hoverText]=\"localize('STICKER')\" slot=\"children\" #stickerButtonRef  (cc-button-clicked)=\"openStickerKeyboard($event)\" [iconURL]=\" !showStickerKeyboard ? stickerButtonIconURL : closeButtonIconURL\" [buttonStyle]=\"stickerButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n        <div class=\"cc-message-composer__emojikeyboard\">\n          <cometchat-popover (cc-popover-outside-click)=\"openEmojiKeyboard($event)\" [placement]=\"auxilaryPlacement\" [popoverStyle]=\"emojiPopover\" >\n            <cometchat-emoji-keyboard slot=\"content\" [emojiKeyboardStyle]=\"emojiKeyboardStyle\" (cc-emoji-clicked)=\"appendEmoji($event)\">\n            </cometchat-emoji-keyboard>\n            <cometchat-button #emojiButtonRef [hoverText]=\"localize('EMOJI')\" slot=\"children\" (cc-button-clicked)=\"openEmojiKeyboard($event)\" [iconURL]=\" !showEmojiKeyboard  || (!showEmojiKeyboard && showActionSheetItem) ? emojiButtonIconURL : closeButtonIconURL\" [buttonStyle]=\"emojiButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n        <div class=\"cc-message-composer__mediarecorder\" *ngIf=\"!hideVoiceRecording\">\n          <cometchat-popover [closeOnOutsideClick]=\"false\"  [popoverStyle]=\"mediaRecordedPopover\" [placement]=\"auxilaryPlacement\" >\n            \n            <cometchat-media-recorder *ngIf=\"toggleMediaRecorded\" [autoRecording]=\"true\"  startIconText=\"\" stopIconText=\"\" submitButtonIconText=\"\" [submitButtonIconURL]=\"voiceRecordingSubmitIconURL\" [startIconURL]=\"voiceRecordingStartIconURL\" [stopIconURL]=\"voiceRecordingStopIconURL\"  [closeIconURL]=\"voiceRecordingCloseIconURL\" (cc-media-recorder-submitted)=\"sendRecordedMedia($event)\" (cc-media-recorder-closed)=\"closeMediaRecorder($event)\" slot=\"content\" [mediaPlayerStyle]=\"mediaRecorderStyle\"></cometchat-media-recorder>\n            <cometchat-icon-button [hoverText]=\"localize('VOICE_RECORDING')\" slot=\"children\" #mediaRecordedRef  (cc-button-clicked)=\"openMediaRecorded($event)\" [iconURL]=\" !toggleMediaRecorded ? voiceRecordingIconURL : closeButtonIconURL\" [buttonStyle]=\"mediaRecorderButtonStyle\"></cometchat-icon-button>\n          </cometchat-popover>\n        </div>\n      </div>\n    <div slot=\"primaryView\">\n      <div *ngIf=\"sendButtonView;else sendButton\">\n      </div>\n      <ng-template #sendButton>\n        <div class=\"cc-message-composer__sendbutton\" *ngIf=\"showSendButton || hideLiveReaction\">\n  <cometchat-button [iconURL]=\"sendButtonIconURL\" [buttonStyle]=\"sendButtonStyle\" [hoverText]=\"localize('SEND_MESSAGE')\" (cc-button-clicked)=\"customSendMethod(messageText)\"></cometchat-button>\n        </div>\n        <div class=\"cc-message-composer__livereaction\" *ngIf=\"!hideLiveReaction && !showSendButton\">\n          <cometchat-button [iconURL]=\"LiveReactionIconURL\" [hoverText]=\"localize('LIVE_REACTION')\" [buttonStyle]=\"liveReactionStyle\" (cc-button-clicked)=\"sendReaction()\"></cometchat-button>\n          </div>\n      </ng-template>\n    </div>\n  </cometchat-message-input>\n</div>\n</div>\n\n<input class=\"cc-message-composer__mediainput\" #inputElement (change)=\"inputChangeHandler($event)\" />\n<cometchat-backdrop *ngIf=\"showCreatePolls\" [backdropStyle]=\"backdropStyle\">\n  <create-poll [user]=\"user\" [group]=\"group\" (cc-close-clicked)=\"closeCreatePolls()\" [createPollStyle]=\"createPollStyle\"></create-poll>\n</cometchat-backdrop>", 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%}.cc-message-composer__mediainput{display:none}.cc-message-composer__auxiliary{display:flex;gap:8px}*{box-sizing:border-box}\n"] }]
+            args: [{ selector: 'cometchat-message-composer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-message-composer__wrapper\" [ngStyle]=\"composerWrapperStyle()\">\n  <div class=\"cc-message-composer__header-view\" *ngIf=\"headerView; else messagePreview\">\n    <ng-container *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\" [previewSubtitle]=\"messageToBeEdited.getText()\" (cc-preview-close-clicked)=\"closePreview()\"> </cometchat-preview>\n    </div>\n  </ng-template>\n<div class=\"cc-message-composer__input\">\n  <cometchat-message-input (cc-message-input-entered)=\"sendMessageOnEnter($event)\" #inputRef [text]=\"text\" (cc-message-input-changed)=\"messageInputChanged($event)\" [messageInputStyle]=\"messageInputStyle\" [placeholderText]=\"placeholderText\" [auxiliaryButtonAlignment]=\"auxiliaryButtonsAlignment\">\n    <div slot=\"secondaryView\">\n      <div *ngIf=\"secondaryButtonView;else secondaryButton\">\n        <ng-container *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 (cc-popover-outside-click)=\"openActionSheet($event)\" [placement]=\"auxilaryPlacement\" [popoverStyle]=\"popoverStyle\" >\n          <cometchat-action-sheet slot=\"content\" [actions]=\"composerActions\" [actionSheetStyle]=\"actionsheetStyle\" (cc-actionsheet-clicked)=\"handleActions($event)\">\n          </cometchat-action-sheet>\n            <cometchat-button #actionSheetRef slot=\"children\" (cc-button-clicked)=\"openActionSheet($event)\" [iconURL]=\"!showActionSheetItem || (showEmojiKeyboard && !showActionSheetItem)  ? attachmentIconURL  : closeButtonIconURL\" [buttonStyle]=\"attachmentButtonStyle\"></cometchat-button>\n        </cometchat-popover>\n    </div>\n      </ng-template>\n    </div>\n\n      <div class=\"cc-message-composer__auxiliary\" slot=\"auxilaryView\">\n        <div class=\"cc-message-composer__custom-auxiliary-view\" *ngIf=\"auxilaryButtonView\">\n          <ng-container *ngTemplateOutlet=\"auxilaryButtonView;context:{ $implicit: user ?? group, composerId:composerId }\">\n          </ng-container>\n        </div>\n        <div class=\"cc-message-composer__stickerkeyboard\" *ngIf=\"isAiEnabled\">\n          <cometchat-popover (cc-popover-outside-click)=\"openStickerKeyboard($event)\" [popoverStyle]=\"aiPopover\" [placement]=\"auxilaryPlacement\" >\n            <cometchat-card-view [closeCallback]=\"handleAiFeaturesClose\"  slot=\"content\" [buttons]=\"buttons\">\n            </cometchat-card-view>\n            <cometchat-button [hoverText]=\"localize('AI')\" slot=\"children\" #aiButtonRef (cc-button-clicked)=\"openAiFeatures($event)\" [iconURL]=\" !showAiFeatures ? 'assets/ai-bot.svg' : closeButtonIconURL\" [buttonStyle]=\"stickerButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n   \n        <div class=\"cc-message-composer__stickerkeyboard\" *ngIf=\"enableStickerKeyboard\">\n          <cometchat-popover (cc-popover-outside-click)=\"openStickerKeyboard($event)\" [popoverStyle]=\"stickerPopover\" [placement]=\"auxilaryPlacement\" >\n            <stickers-keyboard  slot=\"content\"  [stickerStyle]=\"stickerKeyboardStyle\" (cc-sticker-clicked)=\"sendSticker($event)\">\n            </stickers-keyboard>\n            <cometchat-button [hoverText]=\"localize('STICKER')\" slot=\"children\" #stickerButtonRef  (cc-button-clicked)=\"openStickerKeyboard($event)\" [iconURL]=\" !showStickerKeyboard ? stickerButtonIconURL : closeButtonIconURL\" [buttonStyle]=\"stickerButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n        <div class=\"cc-message-composer__emojikeyboard\">\n          <cometchat-popover (cc-popover-outside-click)=\"openEmojiKeyboard($event)\" [placement]=\"auxilaryPlacement\" [popoverStyle]=\"emojiPopover\" >\n            <cometchat-emoji-keyboard slot=\"content\" [emojiKeyboardStyle]=\"emojiKeyboardStyle\" (cc-emoji-clicked)=\"appendEmoji($event)\">\n            </cometchat-emoji-keyboard>\n            <cometchat-button #emojiButtonRef [hoverText]=\"localize('EMOJI')\" slot=\"children\" (cc-button-clicked)=\"openEmojiKeyboard($event)\" [iconURL]=\" !showEmojiKeyboard  || (!showEmojiKeyboard && showActionSheetItem) ? emojiButtonIconURL : closeButtonIconURL\" [buttonStyle]=\"emojiButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n        <div class=\"cc-message-composer__mediarecorder\" *ngIf=\"!hideVoiceRecording\">\n          <cometchat-popover [closeOnOutsideClick]=\"false\"  [popoverStyle]=\"mediaRecordedPopover\" [placement]=\"auxilaryPlacement\" >\n            \n            <cometchat-media-recorder *ngIf=\"toggleMediaRecorded\" [autoRecording]=\"true\"  startIconText=\"\" stopIconText=\"\" submitButtonIconText=\"\" [submitButtonIconURL]=\"voiceRecordingSubmitIconURL\" [startIconURL]=\"voiceRecordingStartIconURL\" [stopIconURL]=\"voiceRecordingStopIconURL\"  [closeIconURL]=\"voiceRecordingCloseIconURL\" (cc-media-recorder-submitted)=\"sendRecordedMedia($event)\" (cc-media-recorder-closed)=\"closeMediaRecorder($event)\" slot=\"content\" [mediaPlayerStyle]=\"mediaRecorderStyle\"></cometchat-media-recorder>\n            <cometchat-icon-button [hoverText]=\"localize('VOICE_RECORDING')\" slot=\"children\" #mediaRecordedRef  (cc-button-clicked)=\"openMediaRecorded($event)\" [iconURL]=\" !toggleMediaRecorded ? voiceRecordingIconURL : closeButtonIconURL\" [buttonStyle]=\"mediaRecorderButtonStyle\"></cometchat-icon-button>\n          </cometchat-popover>\n        </div>\n      </div>\n    <div slot=\"primaryView\">\n      <div *ngIf=\"sendButtonView;else sendButton\">\n      </div>\n      <ng-template #sendButton>\n        <div class=\"cc-message-composer__sendbutton\" *ngIf=\"showSendButton || hideLiveReaction\">\n  <cometchat-button [iconURL]=\"sendButtonIconURL\" [buttonStyle]=\"sendButtonStyle\" [hoverText]=\"localize('SEND_MESSAGE')\" (cc-button-clicked)=\"customSendMethod(messageText)\"></cometchat-button>\n        </div>\n        <div class=\"cc-message-composer__livereaction\" *ngIf=\"!hideLiveReaction && !showSendButton\">\n          <cometchat-button [iconURL]=\"LiveReactionIconURL\" [hoverText]=\"localize('LIVE_REACTION')\" [buttonStyle]=\"liveReactionStyle\" (cc-button-clicked)=\"sendReaction()\"></cometchat-button>\n          </div>\n      </ng-template>\n    </div>\n  </cometchat-message-input>\n</div>\n</div>\n\n<input class=\"cc-message-composer__mediainput\" #inputElement (change)=\"inputChangeHandler($event)\" />\n<cometchat-backdrop *ngIf=\"showCreatePolls\" [backdropStyle]=\"backdropStyle\">\n  <create-poll [user]=\"user\" [group]=\"group\" (cc-close-clicked)=\"closeCreatePolls()\" [createPollStyle]=\"createPollStyle\"></create-poll>\n</cometchat-backdrop>", 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%}.cc-message-composer__mediainput{display:none}.cc-message-composer__auxiliary{display:flex;gap:8px}*{box-sizing:border-box}cometchat-card-view{height:100%;width:100%;overflow:hidden;display:flex;border-radius:8px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { inputElementRef: [{
                 type: ViewChild,
                 args: ["inputElement", { static: false }]
@@ -10633,6 +11085,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], mediaRecordedRef: [{
                 type: ViewChild,
                 args: ["mediaRecordedRef", { static: false }]
+            }], aiButtonRef: [{
+                type: ViewChild,
+                args: ["aiButtonRef", { static: false }]
             }], user: [{
                 type: Input
             }], group: [{
@@ -10960,17 +11415,11 @@ 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", messageComposerConfiguration: "messageComposerConfiguration", threadedMessagesStyle: "threadedMessagesStyle" }, 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-threaded-messages__wrapper\" [ngStyle]=\"wrapperStyle()\">\n<div class=\"cc-threaded-messages__header\">\n<div class=\"cc-threaded-messages__title\">\n<cometchat-label [text]=\"title\" [labelStyle]=\"titleStyle\"></cometchat-label>\n</div>\n<div  class=\"cc-threaded-messages__close\">\n<cometchat-button [iconURL]=\"closeIconURL\" [buttonStyle]=\"buttonStyle\" (cc-button-clicked)=\"closeView()\"></cometchat-button>\n</div>\n</div>\n<div class=\"cc-threaded-messages__bubble-view\">\n  <ng-container *ngTemplateOutlet=\"bubbleView; context:{ $implicit: parentMessage }\">\n  </ng-container>\n</div>\n<div class=\"cc-threaded-messages__action-view\">\n  <ng-container *ngTemplateOutlet=\"messageActionView; context:{ $implicit: parentMessage }\">\n  </ng-container>\n <cometchat-button *ngIf=\"!messageActionView\" [text]=\"getThreadCount()\" [buttonStyle]=\"actionButtonStyle\"></cometchat-button>\n</div>\n<div class=\"cc-threaded-messages__list\">\n  <cometchat-message-list #messageListRef [parentMessageId]=\"parentMessage!.getId()\" [emptyStateView]=\"messageListConfiguration.emptyStateView\" [loadingStateView]=\"messageListConfiguration.loadingStateView\"  [user]=\"user\" [group]=\"group\"\n  [errorStateView]=\"messageListConfiguration.errorStateView\" [disableReceipt]=\"messageListConfiguration.disableReceipt\" [readIcon]=\"messageListConfiguration.readIcon\" [deliveredIcon]=\"messageListConfiguration.deliveredIcon\" [sentIcon]=\"messageListConfiguration.sentIcon\" [waitIcon]=\"messageListConfiguration.waitIcon\"\n  [errorIcon]=\"messageListConfiguration.errorIcon\" [alignment]=\"messageListConfiguration.alignment\" [showAvatar]=\"messageListConfiguration.showAvatar\" [datePattern]=\"messageListConfiguration.datePattern\" [timestampAlignment]=\"messageListConfiguration.timestampAlignment\" [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n  [messageTypes]=\"messageListConfiguration.templates\" [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder || requestBuilder\" [thresholdValue]=\"messageListConfiguration.thresholdValue\" [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick\" [headerView]=\"messageListConfiguration.headerView\" [footerView]=\"messageListConfiguration.footerView\"\n   [avatarStyle]=\"messageListConfiguration.avatarStyle\" [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\" [messageListStyle]=\"messageListConfiguration.messageListStyle\"  [onError]=\"messageListConfiguration.onError\"\n  >\n  </cometchat-message-list>\n</div>\n<div class=\"cc-threaded-messages__composer\">\n    <cometchat-message-composer #messageComposerRef [parentMessageId]=\"parentMessage!.getId()\"\n    [user]=\"user\" [group]=\"group\" [text]=\"messageComposerConfiguration.text\" [headerView]=\"messageComposerConfiguration.headerView\" [onTextChange]=\"messageComposerConfiguration.onTextChange\" [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n    [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\" [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\" [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\" [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n    [sendButtonView]=\"messageComposerConfiguration.sendButtonView\" [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\" [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\" [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\" [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n    [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\" [onError]=\"messageComposerConfiguration.onError\"\n    >\n    </cometchat-message-composer>\n</div>\n </div>", 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:-moz-fit-content;width:fit-content}.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", "errorStateView", "loadingStateView", "emptyStateView", "errorStateText", "emptyStateText", "loadingIconURL", "user", "group", "disableReceipt", "disableSoundForMessages", "customSoundForMessages", "readIcon", "deliveredIcon", "sentIcon", "waitIcon", "errorIcon", "alignment", "showAvatar", "datePattern", "timestampAlignment", "DateSeparatorPattern", "templates", "messagesRequestBuilder", "newMessageIndicatorText", "scrollToBottomOnNewMessages", "thresholdValue", "onThreadRepliesClick", "headerView", "footerView", "parentMessageId", "avatarStyle", "backdropStyle", "dateSeparatorStyle", "messageListStyle", "onError", "messageInformationConfiguration"] }, { 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", "messageComposerStyle", "onSendButtonClick", "onError", "backdropStyle", "hideVoiceRecording", "mediaRecorderStyle", "voiceRecordingIconURL", "voiceRecordingCloseIconURL", "voiceRecordingStartIconURL", "voiceRecordingStopIconURL", "voiceRecordingSubmitIconURL"] }], 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", messageComposerConfiguration: "messageComposerConfiguration", threadedMessagesStyle: "threadedMessagesStyle" }, 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\" [labelStyle]=\"titleStyle\"></cometchat-label>\n</div>\n<div  class=\"cc-threaded-messages__close\">\n<cometchat-button [iconURL]=\"closeIconURL\" [buttonStyle]=\"buttonStyle\" (cc-button-clicked)=\"closeView()\"></cometchat-button>\n</div>\n</div>\n<div class=\"cc-threaded-messages__bubble-view\">\n  <ng-container *ngTemplateOutlet=\"bubbleView; context:{ $implicit: parentMessage }\">\n  </ng-container>\n</div>\n<div class=\"cc-threaded-messages__action-view\">\n  <ng-container *ngTemplateOutlet=\"messageActionView; context:{ $implicit: parentMessage }\">\n  </ng-container>\n <cometchat-button *ngIf=\"!messageActionView\" [text]=\"getThreadCount()\" [buttonStyle]=\"actionButtonStyle\"></cometchat-button>\n</div>\n<div class=\"cc-threaded-messages__list\">\n  <cometchat-message-list #messageListRef [parentMessageId]=\"parentMessage!.getId()\" [emptyStateView]=\"messageListConfiguration.emptyStateView\" [loadingStateView]=\"messageListConfiguration.loadingStateView\"  [user]=\"user\" [group]=\"group\"\n  [errorStateView]=\"messageListConfiguration.errorStateView\" [disableReceipt]=\"messageListConfiguration.disableReceipt\" [readIcon]=\"messageListConfiguration.readIcon\" [deliveredIcon]=\"messageListConfiguration.deliveredIcon\" [sentIcon]=\"messageListConfiguration.sentIcon\" [waitIcon]=\"messageListConfiguration.waitIcon\"\n  [errorIcon]=\"messageListConfiguration.errorIcon\" [alignment]=\"messageListConfiguration.alignment\" [showAvatar]=\"messageListConfiguration.showAvatar\" [datePattern]=\"messageListConfiguration.datePattern\" [timestampAlignment]=\"messageListConfiguration.timestampAlignment\" [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n  [messageTypes]=\"messageListConfiguration.templates\" [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder || requestBuilder\" [thresholdValue]=\"messageListConfiguration.thresholdValue\" [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick\" [headerView]=\"messageListConfiguration.headerView\" [footerView]=\"messageListConfiguration.footerView\"\n   [avatarStyle]=\"messageListConfiguration.avatarStyle\" [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\" [messageListStyle]=\"messageListConfiguration.messageListStyle\"  [onError]=\"messageListConfiguration.onError\"\n  >\n  </cometchat-message-list>\n</div>\n<div class=\"cc-threaded-messages__composer\">\n    <cometchat-message-composer #messageComposerRef [parentMessageId]=\"parentMessage!.getId()\"\n    [user]=\"user\" [group]=\"group\" [text]=\"messageComposerConfiguration.text\" [headerView]=\"messageComposerConfiguration.headerView\" [onTextChange]=\"messageComposerConfiguration.onTextChange\" [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n    [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\" [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\" [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\" [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n    [sendButtonView]=\"messageComposerConfiguration.sendButtonView\" [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\" [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\" [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\" [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n    [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\" [onError]=\"messageComposerConfiguration.onError\"\n    >\n    </cometchat-message-composer>\n</div>\n </div>", 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:-moz-fit-content;width:fit-content}.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", "errorStateView", "loadingStateView", "emptyStateView", "errorStateText", "emptyStateText", "loadingIconURL", "user", "group", "disableReceipt", "disableSoundForMessages", "customSoundForMessages", "readIcon", "deliveredIcon", "sentIcon", "waitIcon", "errorIcon", "alignment", "showAvatar", "datePattern", "timestampAlignment", "DateSeparatorPattern", "templates", "messagesRequestBuilder", "newMessageIndicatorText", "scrollToBottomOnNewMessages", "thresholdValue", "onThreadRepliesClick", "headerView", "footerView", "parentMessageId", "avatarStyle", "backdropStyle", "dateSeparatorStyle", "messageListStyle", "onError", "messageInformationConfiguration"] }, { 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", "messageComposerStyle", "onSendButtonClick", "onError", "backdropStyle", "hideVoiceRecording", "mediaRecorderStyle", "voiceRecordingIconURL", "voiceRecordingCloseIconURL", "voiceRecordingStartIconURL", "voiceRecordingStopIconURL", "voiceRecordingSubmitIconURL"] }], 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\" [labelStyle]=\"titleStyle\"></cometchat-label>\n</div>\n<div  class=\"cc-threaded-messages__close\">\n<cometchat-button [iconURL]=\"closeIconURL\" [buttonStyle]=\"buttonStyle\" (cc-button-clicked)=\"closeView()\"></cometchat-button>\n</div>\n</div>\n<div class=\"cc-threaded-messages__bubble-view\">\n  <ng-container *ngTemplateOutlet=\"bubbleView; context:{ $implicit: parentMessage }\">\n  </ng-container>\n</div>\n<div class=\"cc-threaded-messages__action-view\">\n  <ng-container *ngTemplateOutlet=\"messageActionView; context:{ $implicit: parentMessage }\">\n  </ng-container>\n <cometchat-button *ngIf=\"!messageActionView\" [text]=\"getThreadCount()\" [buttonStyle]=\"actionButtonStyle\"></cometchat-button>\n</div>\n<div class=\"cc-threaded-messages__list\">\n  <cometchat-message-list #messageListRef [parentMessageId]=\"parentMessage!.getId()\" [emptyStateView]=\"messageListConfiguration.emptyStateView\" [loadingStateView]=\"messageListConfiguration.loadingStateView\"  [user]=\"user\" [group]=\"group\"\n  [errorStateView]=\"messageListConfiguration.errorStateView\" [disableReceipt]=\"messageListConfiguration.disableReceipt\" [readIcon]=\"messageListConfiguration.readIcon\" [deliveredIcon]=\"messageListConfiguration.deliveredIcon\" [sentIcon]=\"messageListConfiguration.sentIcon\" [waitIcon]=\"messageListConfiguration.waitIcon\"\n  [errorIcon]=\"messageListConfiguration.errorIcon\" [alignment]=\"messageListConfiguration.alignment\" [showAvatar]=\"messageListConfiguration.showAvatar\" [datePattern]=\"messageListConfiguration.datePattern\" [timestampAlignment]=\"messageListConfiguration.timestampAlignment\" [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n  [messageTypes]=\"messageListConfiguration.templates\" [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder || requestBuilder\" [thresholdValue]=\"messageListConfiguration.thresholdValue\" [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick\" [headerView]=\"messageListConfiguration.headerView\" [footerView]=\"messageListConfiguration.footerView\"\n   [avatarStyle]=\"messageListConfiguration.avatarStyle\" [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\" [messageListStyle]=\"messageListConfiguration.messageListStyle\"  [onError]=\"messageListConfiguration.onError\"\n  >\n  </cometchat-message-list>\n</div>\n<div class=\"cc-threaded-messages__composer\">\n    <cometchat-message-composer #messageComposerRef [parentMessageId]=\"parentMessage!.getId()\"\n    [user]=\"user\" [group]=\"group\" [text]=\"messageComposerConfiguration.text\" [headerView]=\"messageComposerConfiguration.headerView\" [onTextChange]=\"messageComposerConfiguration.onTextChange\" [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n    [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\" [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\" [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\" [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n    [sendButtonView]=\"messageComposerConfiguration.sendButtonView\" [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\" [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\" [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\" [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n    [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\" [onError]=\"messageComposerConfiguration.onError\"\n    >\n    </cometchat-message-composer>\n</div>\n </div>", 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:-moz-fit-content;width:fit-content}.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"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { messageComposerRef: [{
-                type: ViewChild,
-                args: ["messageComposerRef", { static: false }]
-            }], messageListRef: [{
-                type: ViewChild,
-                args: ["messageListRef", { static: false }]
-            }], onClose: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { onClose: [{
                 type: Input
             }], onError: [{
                 type: Input
@@ -13096,10 +13545,10 @@ 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", 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<div class=\"cc-messages\" [ngStyle]=\"chatListStyle()\" *ngIf=\"user || group\">\n<div class=\"cc-messages__header\" *ngIf=\"!hideMessageHeader\">\n  <div *ngIf=\"messageHeaderView; else customHeaderView\" class=\"cc-messages__header-customview\">\n    <ng-container *ngTemplateOutlet=\"messageHeaderView\">\n    </ng-container>\n  </div>\n  <ng-template #customHeaderView>\n    <cometchat-message-header [user]=\"user\" [group]=\"group\" [subtitleView]=\"messageHeaderConfiguration.subtitleView\"\n    [disableUsersPresence]=\"messageHeaderConfiguration.disableUsersPresence\" [protectedGroupIcon]=\"messageHeaderConfiguration.protectedGroupIcon\" [privateGroupIcon]=\"messageHeaderConfiguration.privateGroupIcon\" [menu]=\"headerMenu\" [messageHeaderStyle]=\"messageHeaderConfiguration.messageHeaderStyle\"\n    [backButtonIconURL]=\"messageHeaderConfiguration.backButtonIconURL\" [hideBackButton]=\"messageHeaderConfiguration.hideBackButton\" [onError]=\"messageHeaderConfiguration.onError\" [onBack]=\"messageHeaderConfiguration.onBack\" [listItemStyle]=\"messageHeaderConfiguration.listItemStyle\" [statusIndicatorStyle]=\"messageHeaderConfiguration.statusIndicatorStyle\"\n    [avatarStyle]=\"messageHeaderConfiguration.avatarStyle\"\n    >\n    </cometchat-message-header>\n  </ng-template>\n</div>\n<div class=\"cc-messages__list\">\n  <cometchat-message-list #messageListRef [messageInformationConfiguration]=\"messageListConfiguration.messageInformationConfiguration\" [disableSoundForMessages]=\"disableSoundForMessages\" [customSoundForMessages]=\"customSoundForIncomingMessages\" [emptyStateView]=\"messageListConfiguration.emptyStateView\" [loadingIconURL]=\"messageListConfiguration?.loadingIconURL!\" [loadingStateView]=\"messageListConfiguration.loadingStateView\"  [user]=\"user\" [group]=\"group\"\n  [errorStateView]=\"messageListConfiguration.errorStateView\" [disableReceipt]=\"messageListConfiguration.disableReceipt\" [readIcon]=\"messageListConfiguration.readIcon\" [deliveredIcon]=\"messageListConfiguration.deliveredIcon\" [sentIcon]=\"messageListConfiguration.sentIcon\" [waitIcon]=\"messageListConfiguration.waitIcon\"\n  [errorIcon]=\"messageListConfiguration.errorIcon\" [alignment]=\"messageListConfiguration.alignment\" [showAvatar]=\"messageListConfiguration.showAvatar\" [datePattern]=\"messageListConfiguration.datePattern\" [timestampAlignment]=\"messageListConfiguration.timestampAlignment\" [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n  [templates]=\"messageListConfiguration.templates\" [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder\" [thresholdValue]=\"messageListConfiguration.thresholdValue\" [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick || openThreadView\" [headerView]=\"messageListConfiguration.headerView\" [footerView]=\"messageListConfiguration.footerView\"\n   [avatarStyle]=\"messageListConfiguration.avatarStyle\" [backdropStyle]=\"messageListConfiguration.backdropStyle\" [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\" [messageListStyle]=\"messageListConfiguration.messageListStyle\"  [onError]=\"messageListConfiguration.onError\"\n  >\n  </cometchat-message-list>\n</div>\n<div class=\"cc-messages__composer\" *ngIf=\"!hideMessageComposer\">\n  <div *ngIf=\"messageComposerView; else customComposerView\" class=\"cc-messages__composer--customview\">\n    <ng-container *ngTemplateOutlet=\"messageComposerView\">\n    </ng-container>\n  </div>\n  <ng-template #customComposerView>\n    <cometchat-message-composer #messageComposerRef [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\"\n    [user]=\"user\" [group]=\"group\" [text]=\"messageComposerConfiguration.text\" [headerView]=\"messageComposerConfiguration.headerView\" [onTextChange]=\"messageComposerConfiguration.onTextChange\" [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n    [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\" [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\" [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\" [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n    [sendButtonView]=\"messageComposerConfiguration.sendButtonView\" [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\" [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\" [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\" [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n    [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\" [onError]=\"messageComposerConfiguration.onError\"\n    >\n    </cometchat-message-composer>\n  </ng-template>\n</div>\n </div>\n <div class=\"cc-messages__livereaction\">\n  <cometchat-live-reaction *ngIf=\"liveReaction\" [reactionIconURL]=\"reactionName\"></cometchat-live-reaction>\n</div>\n<div *ngIf=\"openThreadedMessages\" class=\"cc-messages__threadedmessages\">\n<cometchat-threaded-messages [onClose]=\"closeThreadView\" [threadedMessagesStyle]=\"threadedMessageConfiguration.threadedMessagesStyle\" [messageActionView]=\"threadedMessageConfiguration.messageActionView\" [closeIconURL]=\"threadedMessageConfiguration.closeIconURL\" [onError]=\"threadedMessageConfiguration.onError\" [bubbleView]=\"threadedMessageConfiguration.bubbleView || parentBubbleView\" [parentMessage]=\"threadMessageObject\" [user]=\"user\" [group]=\"group\"></cometchat-threaded-messages>\n</div>\n<div *ngIf=\"openDetails\" class=\"cc-messages__details\">\n  <cometchat-details [backdropStyle]=\"detailsConfiguration.backdropStyle\"  [transferOwnershipConfiguration]=\"detailsConfiguration.transferOwnershipConfiguration\" [groupMembersConfiguration]=\"detailsConfiguration.groupMembersConfiguration\" [bannedMembersConfiguration]=\"detailsConfiguration.bannedMembersConfiguration\" [addMembersConfiguration]=\"detailsConfiguration.addMembersConfiguration\"  [onClose]=\"detailsConfiguration.onClose || closeDetailsPage\" [listItemStyle]=\"detailsConfiguration.listItemStyle\" [detailsStyle]=\"detailsConfiguration.detailsStyle\" [avatarStyle]=\"detailsConfiguration.avatarStyle\" [statusIndicatorStyle]=\"detailsConfiguration.statusIndicatorStyle\" [leaveDialogStyle]=\"detailsConfiguration.leaveDialogStyle\" [data]=\"detailsConfiguration.data\" [customProfileView]=\"detailsConfiguration.customProfileView\" [subtitleView]=\"detailsConfiguration.subtitleView\" [hideProfile]=\"detailsConfiguration.hideProfile\" [onError]=\"detailsConfiguration.onError\" [closeButtonIconURL]=\"detailsConfiguration.closeButtonIconURL\"  [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\" *ngIf=\"getAuxilaryView(); else elseBlock\">\n  <ng-container *ngTemplateOutlet=\"getAuxilaryView()\">\n  </ng-container>\n</div>\n    <ng-template #elseBlock>\n      <cometchat-call-buttons *ngIf=\"enableCalling\" voiceCallIconText=\"\" videoCallIconText=\"\" [user]=\"user\" [group]=\"group\" [callButtonsStyle]=\"callButtonsStyle\">\n      </cometchat-call-buttons>\n    </ng-template>\n    <cometchat-button *ngIf=\"!hideDetails\" [iconURL]=\"infoIconStyle\" [buttonStyle]=\"detailsButtonStyle\" (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: CometChatMessageHeaderComponent, selector: "cometchat-message-header", inputs: ["avatarStyle", "statusIndicatorStyle", "messageHeaderStyle", "listItemStyle", "subtitleView", "disableUsersPresence", "disableTyping", "protectedGroupIcon", "privateGroupIcon", "menu", "user", "group", "backButtonIconURL", "hideBackButton", "listItemView", "onError", "onBack"] }, { type: CometChatMessageListComponent, selector: "cometchat-message-list", inputs: ["hideError", "errorStateView", "loadingStateView", "emptyStateView", "errorStateText", "emptyStateText", "loadingIconURL", "user", "group", "disableReceipt", "disableSoundForMessages", "customSoundForMessages", "readIcon", "deliveredIcon", "sentIcon", "waitIcon", "errorIcon", "alignment", "showAvatar", "datePattern", "timestampAlignment", "DateSeparatorPattern", "templates", "messagesRequestBuilder", "newMessageIndicatorText", "scrollToBottomOnNewMessages", "thresholdValue", "onThreadRepliesClick", "headerView", "footerView", "parentMessageId", "avatarStyle", "backdropStyle", "dateSeparatorStyle", "messageListStyle", "onError", "messageInformationConfiguration"] }, { 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", "messageComposerStyle", "onSendButtonClick", "onError", "backdropStyle", "hideVoiceRecording", "mediaRecorderStyle", "voiceRecordingIconURL", "voiceRecordingCloseIconURL", "voiceRecordingStartIconURL", "voiceRecordingStopIconURL", "voiceRecordingSubmitIconURL"] }, { type: CometChatThreadedMessagesComponent, selector: "cometchat-threaded-messages", inputs: ["onClose", "onError", "parentMessage", "title", "closeIconURL", "bubbleView", "messageActionView", "messageListConfiguration", "messageComposerConfiguration", "threadedMessagesStyle"] }, { type: CometChatDetailsComponent, selector: "cometchat-details", inputs: ["group", "user", "title", "closeButtonIconURL", "hideProfile", "subtitleView", "customProfileView", "data", "disableUsersPresence", "privateGroupIcon", "protectedGroupIcon", "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", 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<div class=\"cc-messages\" [ngStyle]=\"chatListStyle()\" *ngIf=\"user || group\">\n<div class=\"cc-messages__header\" *ngIf=\"!hideMessageHeader\">\n  <div *ngIf=\"messageHeaderView; else customHeaderView\" class=\"cc-messages__header-customview\">\n    <ng-container *ngTemplateOutlet=\"messageHeaderView\">\n    </ng-container>\n  </div>\n  <ng-template #customHeaderView>\n    <cometchat-message-header [user]=\"user\" [group]=\"group\" [subtitleView]=\"messageHeaderConfiguration.subtitleView\"\n    [disableUsersPresence]=\"messageHeaderConfiguration.disableUsersPresence\" [protectedGroupIcon]=\"messageHeaderConfiguration.protectedGroupIcon\" [privateGroupIcon]=\"messageHeaderConfiguration.privateGroupIcon\" [menu]=\"headerMenu\" [messageHeaderStyle]=\"messageHeaderConfiguration.messageHeaderStyle\"\n    [backButtonIconURL]=\"messageHeaderConfiguration.backButtonIconURL\" [hideBackButton]=\"messageHeaderConfiguration.hideBackButton\" [onError]=\"messageHeaderConfiguration.onError\" [onBack]=\"messageHeaderConfiguration.onBack\" [listItemStyle]=\"messageHeaderConfiguration.listItemStyle\" [statusIndicatorStyle]=\"messageHeaderConfiguration.statusIndicatorStyle\"\n    [avatarStyle]=\"messageHeaderConfiguration.avatarStyle\"\n    >\n    </cometchat-message-header>\n  </ng-template>\n</div>\n<div class=\"cc-messages__list\">\n  <cometchat-message-list #messageListRef [messageInformationConfiguration]=\"messageListConfiguration.messageInformationConfiguration\" [disableSoundForMessages]=\"disableSoundForMessages\" [customSoundForMessages]=\"customSoundForIncomingMessages\" [emptyStateView]=\"messageListConfiguration.emptyStateView\" [loadingIconURL]=\"messageListConfiguration?.loadingIconURL!\" [loadingStateView]=\"messageListConfiguration.loadingStateView\"  [user]=\"user\" [group]=\"group\"\n  [errorStateView]=\"messageListConfiguration.errorStateView\" [disableReceipt]=\"messageListConfiguration.disableReceipt\" [readIcon]=\"messageListConfiguration.readIcon\" [deliveredIcon]=\"messageListConfiguration.deliveredIcon\" [sentIcon]=\"messageListConfiguration.sentIcon\" [waitIcon]=\"messageListConfiguration.waitIcon\"\n  [errorIcon]=\"messageListConfiguration.errorIcon\" [alignment]=\"messageListConfiguration.alignment\" [showAvatar]=\"messageListConfiguration.showAvatar\" [datePattern]=\"messageListConfiguration.datePattern\" [timestampAlignment]=\"messageListConfiguration.timestampAlignment\" [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n  [templates]=\"messageListConfiguration.templates\" [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder\" [thresholdValue]=\"messageListConfiguration.thresholdValue\" [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick || openThreadView\" [headerView]=\"messageListConfiguration.headerView\" [footerView]=\"messageListConfiguration.footerView\"\n   [avatarStyle]=\"messageListConfiguration.avatarStyle\" [scrollToBottomOnNewMessages]=\"messageListConfiguration.scrollToBottomOnNewMessages\" [backdropStyle]=\"messageListConfiguration.backdropStyle\" [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\" [messageListStyle]=\"messageListConfiguration.messageListStyle\"  [onError]=\"messageListConfiguration.onError\"\n  >\n  </cometchat-message-list>\n</div>\n<div class=\"cc-messages__composer\" *ngIf=\"!hideMessageComposer\">\n  <div *ngIf=\"messageComposerView; else customComposerView\" class=\"cc-messages__composer--customview\">\n    <ng-container *ngTemplateOutlet=\"messageComposerView\">\n    </ng-container>\n  </div>\n  <ng-template #customComposerView>\n    <cometchat-message-composer #messageComposerRef [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\"\n    [user]=\"user\" [group]=\"group\" [text]=\"messageComposerConfiguration.text\" [headerView]=\"messageComposerConfiguration.headerView\" [onTextChange]=\"messageComposerConfiguration.onTextChange\" [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n    [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\" [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\" [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\" [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n    [sendButtonView]=\"messageComposerConfiguration.sendButtonView\" [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\" [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\" [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\" [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n    [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\" [onError]=\"messageComposerConfiguration.onError\"\n    >\n    </cometchat-message-composer>\n  </ng-template>\n</div>\n </div>\n <div class=\"cc-messages__livereaction\">\n  <cometchat-live-reaction *ngIf=\"liveReaction\" [reactionIconURL]=\"reactionName\"></cometchat-live-reaction>\n</div>\n<div *ngIf=\"openThreadedMessages\" class=\"cc-messages__threadedmessages\">\n<cometchat-threaded-messages [onClose]=\"closeThreadView\" [threadedMessagesStyle]=\"threadedMessageConfiguration.threadedMessagesStyle\" [messageActionView]=\"threadedMessageConfiguration.messageActionView\" [closeIconURL]=\"threadedMessageConfiguration.closeIconURL\" [onError]=\"threadedMessageConfiguration.onError\" [bubbleView]=\"threadedMessageConfiguration.bubbleView || parentBubbleView\" [parentMessage]=\"threadMessageObject\" [user]=\"user\" [group]=\"group\"></cometchat-threaded-messages>\n</div>\n<div *ngIf=\"openDetails\" class=\"cc-messages__details\">\n  <cometchat-details [backdropStyle]=\"detailsConfiguration.backdropStyle\"  [transferOwnershipConfiguration]=\"detailsConfiguration.transferOwnershipConfiguration\" [groupMembersConfiguration]=\"detailsConfiguration.groupMembersConfiguration\" [bannedMembersConfiguration]=\"detailsConfiguration.bannedMembersConfiguration\" [addMembersConfiguration]=\"detailsConfiguration.addMembersConfiguration\"  [onClose]=\"detailsConfiguration.onClose || closeDetailsPage\" [listItemStyle]=\"detailsConfiguration.listItemStyle\" [detailsStyle]=\"detailsConfiguration.detailsStyle\" [avatarStyle]=\"detailsConfiguration.avatarStyle\" [statusIndicatorStyle]=\"detailsConfiguration.statusIndicatorStyle\" [leaveDialogStyle]=\"detailsConfiguration.leaveDialogStyle\" [data]=\"detailsConfiguration.data\" [customProfileView]=\"detailsConfiguration.customProfileView\" [subtitleView]=\"detailsConfiguration.subtitleView\" [hideProfile]=\"detailsConfiguration.hideProfile\" [onError]=\"detailsConfiguration.onError\" [closeButtonIconURL]=\"detailsConfiguration.closeButtonIconURL\"  [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\" *ngIf=\"getAuxilaryView(); else elseBlock\">\n  <ng-container *ngTemplateOutlet=\"getAuxilaryView()\">\n  </ng-container>\n</div>\n    <ng-template #elseBlock>\n      <cometchat-call-buttons *ngIf=\"enableCalling\" voiceCallIconText=\"\" videoCallIconText=\"\" [user]=\"user\" [group]=\"group\" [callButtonsStyle]=\"callButtonsStyle\">\n      </cometchat-call-buttons>\n    </ng-template>\n    <cometchat-button *ngIf=\"!hideDetails\" [iconURL]=\"infoIconStyle\" [buttonStyle]=\"detailsButtonStyle\" (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: CometChatMessageHeaderComponent, selector: "cometchat-message-header", inputs: ["avatarStyle", "statusIndicatorStyle", "messageHeaderStyle", "listItemStyle", "subtitleView", "disableUsersPresence", "disableTyping", "protectedGroupIcon", "privateGroupIcon", "menu", "user", "group", "backButtonIconURL", "hideBackButton", "listItemView", "onError", "onBack"] }, { type: CometChatMessageListComponent, selector: "cometchat-message-list", inputs: ["hideError", "errorStateView", "loadingStateView", "emptyStateView", "errorStateText", "emptyStateText", "loadingIconURL", "user", "group", "disableReceipt", "disableSoundForMessages", "customSoundForMessages", "readIcon", "deliveredIcon", "sentIcon", "waitIcon", "errorIcon", "alignment", "showAvatar", "datePattern", "timestampAlignment", "DateSeparatorPattern", "templates", "messagesRequestBuilder", "newMessageIndicatorText", "scrollToBottomOnNewMessages", "thresholdValue", "onThreadRepliesClick", "headerView", "footerView", "parentMessageId", "avatarStyle", "backdropStyle", "dateSeparatorStyle", "messageListStyle", "onError", "messageInformationConfiguration"] }, { 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", "messageComposerStyle", "onSendButtonClick", "onError", "backdropStyle", "hideVoiceRecording", "mediaRecorderStyle", "voiceRecordingIconURL", "voiceRecordingCloseIconURL", "voiceRecordingStartIconURL", "voiceRecordingStopIconURL", "voiceRecordingSubmitIconURL"] }, { type: CometChatThreadedMessagesComponent, selector: "cometchat-threaded-messages", inputs: ["onClose", "onError", "parentMessage", "title", "closeIconURL", "bubbleView", "messageActionView", "messageListConfiguration", "messageComposerConfiguration", "threadedMessagesStyle"] }, { type: CometChatDetailsComponent, selector: "cometchat-details", inputs: ["group", "user", "title", "closeButtonIconURL", "hideProfile", "subtitleView", "customProfileView", "data", "disableUsersPresence", "privateGroupIcon", "protectedGroupIcon", "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<div class=\"cc-messages\" [ngStyle]=\"chatListStyle()\" *ngIf=\"user || group\">\n<div class=\"cc-messages__header\" *ngIf=\"!hideMessageHeader\">\n  <div *ngIf=\"messageHeaderView; else customHeaderView\" class=\"cc-messages__header-customview\">\n    <ng-container *ngTemplateOutlet=\"messageHeaderView\">\n    </ng-container>\n  </div>\n  <ng-template #customHeaderView>\n    <cometchat-message-header [user]=\"user\" [group]=\"group\" [subtitleView]=\"messageHeaderConfiguration.subtitleView\"\n    [disableUsersPresence]=\"messageHeaderConfiguration.disableUsersPresence\" [protectedGroupIcon]=\"messageHeaderConfiguration.protectedGroupIcon\" [privateGroupIcon]=\"messageHeaderConfiguration.privateGroupIcon\" [menu]=\"headerMenu\" [messageHeaderStyle]=\"messageHeaderConfiguration.messageHeaderStyle\"\n    [backButtonIconURL]=\"messageHeaderConfiguration.backButtonIconURL\" [hideBackButton]=\"messageHeaderConfiguration.hideBackButton\" [onError]=\"messageHeaderConfiguration.onError\" [onBack]=\"messageHeaderConfiguration.onBack\" [listItemStyle]=\"messageHeaderConfiguration.listItemStyle\" [statusIndicatorStyle]=\"messageHeaderConfiguration.statusIndicatorStyle\"\n    [avatarStyle]=\"messageHeaderConfiguration.avatarStyle\"\n    >\n    </cometchat-message-header>\n  </ng-template>\n</div>\n<div class=\"cc-messages__list\">\n  <cometchat-message-list #messageListRef [messageInformationConfiguration]=\"messageListConfiguration.messageInformationConfiguration\" [disableSoundForMessages]=\"disableSoundForMessages\" [customSoundForMessages]=\"customSoundForIncomingMessages\" [emptyStateView]=\"messageListConfiguration.emptyStateView\" [loadingIconURL]=\"messageListConfiguration?.loadingIconURL!\" [loadingStateView]=\"messageListConfiguration.loadingStateView\"  [user]=\"user\" [group]=\"group\"\n  [errorStateView]=\"messageListConfiguration.errorStateView\" [disableReceipt]=\"messageListConfiguration.disableReceipt\" [readIcon]=\"messageListConfiguration.readIcon\" [deliveredIcon]=\"messageListConfiguration.deliveredIcon\" [sentIcon]=\"messageListConfiguration.sentIcon\" [waitIcon]=\"messageListConfiguration.waitIcon\"\n  [errorIcon]=\"messageListConfiguration.errorIcon\" [alignment]=\"messageListConfiguration.alignment\" [showAvatar]=\"messageListConfiguration.showAvatar\" [datePattern]=\"messageListConfiguration.datePattern\" [timestampAlignment]=\"messageListConfiguration.timestampAlignment\" [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n  [templates]=\"messageListConfiguration.templates\" [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder\" [thresholdValue]=\"messageListConfiguration.thresholdValue\" [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick || openThreadView\" [headerView]=\"messageListConfiguration.headerView\" [footerView]=\"messageListConfiguration.footerView\"\n   [avatarStyle]=\"messageListConfiguration.avatarStyle\" [backdropStyle]=\"messageListConfiguration.backdropStyle\" [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\" [messageListStyle]=\"messageListConfiguration.messageListStyle\"  [onError]=\"messageListConfiguration.onError\"\n  >\n  </cometchat-message-list>\n</div>\n<div class=\"cc-messages__composer\" *ngIf=\"!hideMessageComposer\">\n  <div *ngIf=\"messageComposerView; else customComposerView\" class=\"cc-messages__composer--customview\">\n    <ng-container *ngTemplateOutlet=\"messageComposerView\">\n    </ng-container>\n  </div>\n  <ng-template #customComposerView>\n    <cometchat-message-composer #messageComposerRef [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\"\n    [user]=\"user\" [group]=\"group\" [text]=\"messageComposerConfiguration.text\" [headerView]=\"messageComposerConfiguration.headerView\" [onTextChange]=\"messageComposerConfiguration.onTextChange\" [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n    [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\" [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\" [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\" [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n    [sendButtonView]=\"messageComposerConfiguration.sendButtonView\" [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\" [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\" [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\" [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n    [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\" [onError]=\"messageComposerConfiguration.onError\"\n    >\n    </cometchat-message-composer>\n  </ng-template>\n</div>\n </div>\n <div class=\"cc-messages__livereaction\">\n  <cometchat-live-reaction *ngIf=\"liveReaction\" [reactionIconURL]=\"reactionName\"></cometchat-live-reaction>\n</div>\n<div *ngIf=\"openThreadedMessages\" class=\"cc-messages__threadedmessages\">\n<cometchat-threaded-messages [onClose]=\"closeThreadView\" [threadedMessagesStyle]=\"threadedMessageConfiguration.threadedMessagesStyle\" [messageActionView]=\"threadedMessageConfiguration.messageActionView\" [closeIconURL]=\"threadedMessageConfiguration.closeIconURL\" [onError]=\"threadedMessageConfiguration.onError\" [bubbleView]=\"threadedMessageConfiguration.bubbleView || parentBubbleView\" [parentMessage]=\"threadMessageObject\" [user]=\"user\" [group]=\"group\"></cometchat-threaded-messages>\n</div>\n<div *ngIf=\"openDetails\" class=\"cc-messages__details\">\n  <cometchat-details [backdropStyle]=\"detailsConfiguration.backdropStyle\"  [transferOwnershipConfiguration]=\"detailsConfiguration.transferOwnershipConfiguration\" [groupMembersConfiguration]=\"detailsConfiguration.groupMembersConfiguration\" [bannedMembersConfiguration]=\"detailsConfiguration.bannedMembersConfiguration\" [addMembersConfiguration]=\"detailsConfiguration.addMembersConfiguration\"  [onClose]=\"detailsConfiguration.onClose || closeDetailsPage\" [listItemStyle]=\"detailsConfiguration.listItemStyle\" [detailsStyle]=\"detailsConfiguration.detailsStyle\" [avatarStyle]=\"detailsConfiguration.avatarStyle\" [statusIndicatorStyle]=\"detailsConfiguration.statusIndicatorStyle\" [leaveDialogStyle]=\"detailsConfiguration.leaveDialogStyle\" [data]=\"detailsConfiguration.data\" [customProfileView]=\"detailsConfiguration.customProfileView\" [subtitleView]=\"detailsConfiguration.subtitleView\" [hideProfile]=\"detailsConfiguration.hideProfile\" [onError]=\"detailsConfiguration.onError\" [closeButtonIconURL]=\"detailsConfiguration.closeButtonIconURL\"  [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\" *ngIf=\"getAuxilaryView(); else elseBlock\">\n  <ng-container *ngTemplateOutlet=\"getAuxilaryView()\">\n  </ng-container>\n</div>\n    <ng-template #elseBlock>\n      <cometchat-call-buttons *ngIf=\"enableCalling\" voiceCallIconText=\"\" videoCallIconText=\"\" [user]=\"user\" [group]=\"group\" [callButtonsStyle]=\"callButtonsStyle\">\n      </cometchat-call-buttons>\n    </ng-template>\n    <cometchat-button *ngIf=\"!hideDetails\" [iconURL]=\"infoIconStyle\" [buttonStyle]=\"detailsButtonStyle\" (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"] }]
+            args: [{ selector: "cometchat-messages", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-messages__wrapper\">\n<div class=\"cc-messages\" [ngStyle]=\"chatListStyle()\" *ngIf=\"user || group\">\n<div class=\"cc-messages__header\" *ngIf=\"!hideMessageHeader\">\n  <div *ngIf=\"messageHeaderView; else customHeaderView\" class=\"cc-messages__header-customview\">\n    <ng-container *ngTemplateOutlet=\"messageHeaderView\">\n    </ng-container>\n  </div>\n  <ng-template #customHeaderView>\n    <cometchat-message-header [user]=\"user\" [group]=\"group\" [subtitleView]=\"messageHeaderConfiguration.subtitleView\"\n    [disableUsersPresence]=\"messageHeaderConfiguration.disableUsersPresence\" [protectedGroupIcon]=\"messageHeaderConfiguration.protectedGroupIcon\" [privateGroupIcon]=\"messageHeaderConfiguration.privateGroupIcon\" [menu]=\"headerMenu\" [messageHeaderStyle]=\"messageHeaderConfiguration.messageHeaderStyle\"\n    [backButtonIconURL]=\"messageHeaderConfiguration.backButtonIconURL\" [hideBackButton]=\"messageHeaderConfiguration.hideBackButton\" [onError]=\"messageHeaderConfiguration.onError\" [onBack]=\"messageHeaderConfiguration.onBack\" [listItemStyle]=\"messageHeaderConfiguration.listItemStyle\" [statusIndicatorStyle]=\"messageHeaderConfiguration.statusIndicatorStyle\"\n    [avatarStyle]=\"messageHeaderConfiguration.avatarStyle\"\n    >\n    </cometchat-message-header>\n  </ng-template>\n</div>\n<div class=\"cc-messages__list\">\n  <cometchat-message-list #messageListRef [messageInformationConfiguration]=\"messageListConfiguration.messageInformationConfiguration\" [disableSoundForMessages]=\"disableSoundForMessages\" [customSoundForMessages]=\"customSoundForIncomingMessages\" [emptyStateView]=\"messageListConfiguration.emptyStateView\" [loadingIconURL]=\"messageListConfiguration?.loadingIconURL!\" [loadingStateView]=\"messageListConfiguration.loadingStateView\"  [user]=\"user\" [group]=\"group\"\n  [errorStateView]=\"messageListConfiguration.errorStateView\" [disableReceipt]=\"messageListConfiguration.disableReceipt\" [readIcon]=\"messageListConfiguration.readIcon\" [deliveredIcon]=\"messageListConfiguration.deliveredIcon\" [sentIcon]=\"messageListConfiguration.sentIcon\" [waitIcon]=\"messageListConfiguration.waitIcon\"\n  [errorIcon]=\"messageListConfiguration.errorIcon\" [alignment]=\"messageListConfiguration.alignment\" [showAvatar]=\"messageListConfiguration.showAvatar\" [datePattern]=\"messageListConfiguration.datePattern\" [timestampAlignment]=\"messageListConfiguration.timestampAlignment\" [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n  [templates]=\"messageListConfiguration.templates\" [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder\" [thresholdValue]=\"messageListConfiguration.thresholdValue\" [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick || openThreadView\" [headerView]=\"messageListConfiguration.headerView\" [footerView]=\"messageListConfiguration.footerView\"\n   [avatarStyle]=\"messageListConfiguration.avatarStyle\" [scrollToBottomOnNewMessages]=\"messageListConfiguration.scrollToBottomOnNewMessages\" [backdropStyle]=\"messageListConfiguration.backdropStyle\" [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\" [messageListStyle]=\"messageListConfiguration.messageListStyle\"  [onError]=\"messageListConfiguration.onError\"\n  >\n  </cometchat-message-list>\n</div>\n<div class=\"cc-messages__composer\" *ngIf=\"!hideMessageComposer\">\n  <div *ngIf=\"messageComposerView; else customComposerView\" class=\"cc-messages__composer--customview\">\n    <ng-container *ngTemplateOutlet=\"messageComposerView\">\n    </ng-container>\n  </div>\n  <ng-template #customComposerView>\n    <cometchat-message-composer #messageComposerRef [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\"\n    [user]=\"user\" [group]=\"group\" [text]=\"messageComposerConfiguration.text\" [headerView]=\"messageComposerConfiguration.headerView\" [onTextChange]=\"messageComposerConfiguration.onTextChange\" [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n    [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\" [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\" [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\" [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n    [sendButtonView]=\"messageComposerConfiguration.sendButtonView\" [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\" [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\" [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\" [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n    [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\" [onError]=\"messageComposerConfiguration.onError\"\n    >\n    </cometchat-message-composer>\n  </ng-template>\n</div>\n </div>\n <div class=\"cc-messages__livereaction\">\n  <cometchat-live-reaction *ngIf=\"liveReaction\" [reactionIconURL]=\"reactionName\"></cometchat-live-reaction>\n</div>\n<div *ngIf=\"openThreadedMessages\" class=\"cc-messages__threadedmessages\">\n<cometchat-threaded-messages [onClose]=\"closeThreadView\" [threadedMessagesStyle]=\"threadedMessageConfiguration.threadedMessagesStyle\" [messageActionView]=\"threadedMessageConfiguration.messageActionView\" [closeIconURL]=\"threadedMessageConfiguration.closeIconURL\" [onError]=\"threadedMessageConfiguration.onError\" [bubbleView]=\"threadedMessageConfiguration.bubbleView || parentBubbleView\" [parentMessage]=\"threadMessageObject\" [user]=\"user\" [group]=\"group\"></cometchat-threaded-messages>\n</div>\n<div *ngIf=\"openDetails\" class=\"cc-messages__details\">\n  <cometchat-details [backdropStyle]=\"detailsConfiguration.backdropStyle\"  [transferOwnershipConfiguration]=\"detailsConfiguration.transferOwnershipConfiguration\" [groupMembersConfiguration]=\"detailsConfiguration.groupMembersConfiguration\" [bannedMembersConfiguration]=\"detailsConfiguration.bannedMembersConfiguration\" [addMembersConfiguration]=\"detailsConfiguration.addMembersConfiguration\"  [onClose]=\"detailsConfiguration.onClose || closeDetailsPage\" [listItemStyle]=\"detailsConfiguration.listItemStyle\" [detailsStyle]=\"detailsConfiguration.detailsStyle\" [avatarStyle]=\"detailsConfiguration.avatarStyle\" [statusIndicatorStyle]=\"detailsConfiguration.statusIndicatorStyle\" [leaveDialogStyle]=\"detailsConfiguration.leaveDialogStyle\" [data]=\"detailsConfiguration.data\" [customProfileView]=\"detailsConfiguration.customProfileView\" [subtitleView]=\"detailsConfiguration.subtitleView\" [hideProfile]=\"detailsConfiguration.hideProfile\" [onError]=\"detailsConfiguration.onError\" [closeButtonIconURL]=\"detailsConfiguration.closeButtonIconURL\"  [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\" *ngIf=\"getAuxilaryView(); else elseBlock\">\n  <ng-container *ngTemplateOutlet=\"getAuxilaryView()\">\n  </ng-container>\n</div>\n    <ng-template #elseBlock>\n      <cometchat-call-buttons *ngIf=\"enableCalling\" voiceCallIconText=\"\" videoCallIconText=\"\" [user]=\"user\" [group]=\"group\" [callButtonsStyle]=\"callButtonsStyle\">\n      </cometchat-call-buttons>\n    </ng-template>\n    <cometchat-button *ngIf=\"!hideDetails\" [iconURL]=\"infoIconStyle\" [buttonStyle]=\"detailsButtonStyle\" (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"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }, { type: i0.ElementRef }]; }, propDecorators: { messageComposerRef: [{
                 type: ViewChild,
                 args: ["messageComposerRef", { static: false }]
@@ -14422,17 +14871,11 @@ 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" }, viewQueries: [{ propertyName: "conversationRef", first: true, predicate: ["conversationRef"], descendants: true }, { propertyName: "messageListRef", first: true, predicate: ["messagesRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-with-messages__wrapper\" [ngStyle]=\"chatsWrapperStyles()\" >\n  <div class=\"cc-with-messages__sidebar\" [ngClass]=\"{mobile : isMobileView}\" [ngStyle]=\"sideBarStyle\">\n    <cometchat-conversations\n    #conversationRef\n    [activeConversation]=\"activeConversation\"\n    [onItemClick]=\"conversationConfiguration.onItemClick || onItemClick\"\n    [conversationsStyle]=\"conversationConfiguration.conversationsStyle\"\n    [subtitleView]=\"conversationConfiguration.subtitleView\"\n    [options]=\"conversationConfiguration.options\"\n    [disableUsersPresence]=\"conversationConfiguration.disableUsersPresence\"\n    [disableReceipt]=\"conversationConfiguration.disableReceipt\"\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    [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\n    ></cometchat-conversations>\n  </div>\n  <div class=\"cc-with-messages__main\" [ngClass]=\"{mobile : isMobileView}\" *ngIf=\"!showStartConversation && (user || group)\">\n    <!--Message List Screen-->\n    <cometchat-messages\n    #messagesRef\n    [user]=\"user!\"\n    [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    >\n    </cometchat-messages>\n    <!--Message List Screen ENDS-->\n  </div>\n  <div class=\"cc-with-messages__start-conversation\" [ngClass]=\"{mobile : isMobileView}\" *ngIf=\"showStartConversation\">\n\n  <cometchat-contacts [usersConfiguration]=\"StartConversationConfiguration.usersConfiguration\"\n  [groupsConfiguration]=\"StartConversationConfiguration.groupsConfiguration\"\n  [closeIconURL]=\"StartConversationConfiguration.closeIconURL\"\n  [contactsStyle]=\"StartConversationConfiguration.contactsStyle\"\n  [selectionMode]=\"StartConversationConfiguration.selectionMode\"\n  [onClose]=\"StartConversationConfiguration.onClose\"\n  [tabVisibility]=\"StartConversationConfiguration.tabVisibility\"\n  [selectionLimit]=\"StartConversationConfiguration.selectionLimit\"\n  [tabs]=\"StartConversationConfiguration.tabs\"\n  [hideSubmitButton]=\"StartConversationConfiguration.hideSubmitButton\"\n  [onSubmitButtonClick]=\"onContactSelected\"></cometchat-contacts>\n  </div>\n  <div class=\"cc-decorator__message--empty\" *ngIf=\"!user && !group && !showStartConversation\" [ngStyle]=\"emptyMessageStyle()\">\n    <cometchat-label [text]=\"messageText\" [labelStyle]=\"labelStyle\"></cometchat-label>\n   </div>\n   <ng-template #startConversationButton>\n    <cometchat-button *ngIf=\"!hideStartNewConversation\" [iconURL]=\"startNewConversationIconURL\" [buttonStyle]=\"startConversationButtonStyle\" (cc-button-clicked)=\"triggerStartConversation()\"></cometchat-button>\n\n  </ng-template>", 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", "disableTyping", "deliveredIcon", "readIcon", "errorIcon", "datePattern", "onError", "sentIcon", "privateGroupIcon", "protectedGroupIcon", "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"] }, { type: CometChatMessagesComponent, selector: "cometchat-messages", inputs: ["user", "group", "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}\" [ngStyle]=\"sideBarStyle\">\n    <cometchat-conversations\n    #conversationRef\n    [activeConversation]=\"activeConversation\"\n    [onItemClick]=\"conversationConfiguration.onItemClick || onItemClick\"\n    [conversationsStyle]=\"conversationConfiguration.conversationsStyle\"\n    [subtitleView]=\"conversationConfiguration.subtitleView\"\n    [options]=\"conversationConfiguration.options\"\n    [disableUsersPresence]=\"conversationConfiguration.disableUsersPresence\"\n    [disableReceipt]=\"conversationConfiguration.disableReceipt\"\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    [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\n    ></cometchat-conversations>\n  </div>\n  <div class=\"cc-with-messages__main\" [ngClass]=\"{mobile : isMobileView}\" *ngIf=\"!showStartConversation && (user || group)\">\n    <!--Message List Screen-->\n    <cometchat-messages\n    #messagesRef\n    [user]=\"user!\"\n    [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    >\n    </cometchat-messages>\n    <!--Message List Screen ENDS-->\n  </div>\n  <div class=\"cc-with-messages__start-conversation\" [ngClass]=\"{mobile : isMobileView}\" *ngIf=\"showStartConversation\">\n\n  <cometchat-contacts [usersConfiguration]=\"StartConversationConfiguration.usersConfiguration\"\n  [groupsConfiguration]=\"StartConversationConfiguration.groupsConfiguration\"\n  [closeIconURL]=\"StartConversationConfiguration.closeIconURL\"\n  [contactsStyle]=\"StartConversationConfiguration.contactsStyle\"\n  [selectionMode]=\"StartConversationConfiguration.selectionMode\"\n  [onClose]=\"StartConversationConfiguration.onClose\"\n  [tabVisibility]=\"StartConversationConfiguration.tabVisibility\"\n  [selectionLimit]=\"StartConversationConfiguration.selectionLimit\"\n  [tabs]=\"StartConversationConfiguration.tabs\"\n  [hideSubmitButton]=\"StartConversationConfiguration.hideSubmitButton\"\n  [onSubmitButtonClick]=\"onContactSelected\"></cometchat-contacts>\n  </div>\n  <div class=\"cc-decorator__message--empty\" *ngIf=\"!user && !group && !showStartConversation\" [ngStyle]=\"emptyMessageStyle()\">\n    <cometchat-label [text]=\"messageText\" [labelStyle]=\"labelStyle\"></cometchat-label>\n   </div>\n   <ng-template #startConversationButton>\n    <cometchat-button *ngIf=\"!hideStartNewConversation\" [iconURL]=\"startNewConversationIconURL\" [buttonStyle]=\"startConversationButtonStyle\" (cc-button-clicked)=\"triggerStartConversation()\"></cometchat-button>\n\n  </ng-template>", 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", "disableTyping", "deliveredIcon", "readIcon", "errorIcon", "datePattern", "onError", "sentIcon", "privateGroupIcon", "protectedGroupIcon", "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"] }, { type: CometChatMessagesComponent, selector: "cometchat-messages", inputs: ["user", "group", "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}\" [ngStyle]=\"sideBarStyle\">\n    <cometchat-conversations\n    #conversationRef\n    [activeConversation]=\"activeConversation\"\n    [onItemClick]=\"conversationConfiguration.onItemClick || onItemClick\"\n    [conversationsStyle]=\"conversationConfiguration.conversationsStyle\"\n    [subtitleView]=\"conversationConfiguration.subtitleView\"\n    [options]=\"conversationConfiguration.options\"\n    [disableUsersPresence]=\"conversationConfiguration.disableUsersPresence\"\n    [disableReceipt]=\"conversationConfiguration.disableReceipt\"\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    [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\n    ></cometchat-conversations>\n  </div>\n  <div class=\"cc-with-messages__main\" [ngClass]=\"{mobile : isMobileView}\" *ngIf=\"!showStartConversation && (user || group)\">\n    <!--Message List Screen-->\n    <cometchat-messages\n    #messagesRef\n    [user]=\"user!\"\n    [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    >\n    </cometchat-messages>\n    <!--Message List Screen ENDS-->\n  </div>\n  <div class=\"cc-with-messages__start-conversation\" [ngClass]=\"{mobile : isMobileView}\" *ngIf=\"showStartConversation\">\n\n  <cometchat-contacts [usersConfiguration]=\"StartConversationConfiguration.usersConfiguration\"\n  [groupsConfiguration]=\"StartConversationConfiguration.groupsConfiguration\"\n  [closeIconURL]=\"StartConversationConfiguration.closeIconURL\"\n  [contactsStyle]=\"StartConversationConfiguration.contactsStyle\"\n  [selectionMode]=\"StartConversationConfiguration.selectionMode\"\n  [onClose]=\"StartConversationConfiguration.onClose\"\n  [tabVisibility]=\"StartConversationConfiguration.tabVisibility\"\n  [selectionLimit]=\"StartConversationConfiguration.selectionLimit\"\n  [tabs]=\"StartConversationConfiguration.tabs\"\n  [hideSubmitButton]=\"StartConversationConfiguration.hideSubmitButton\"\n  [onSubmitButtonClick]=\"onContactSelected\"></cometchat-contacts>\n  </div>\n  <div class=\"cc-decorator__message--empty\" *ngIf=\"!user && !group && !showStartConversation\" [ngStyle]=\"emptyMessageStyle()\">\n    <cometchat-label [text]=\"messageText\" [labelStyle]=\"labelStyle\"></cometchat-label>\n   </div>\n   <ng-template #startConversationButton>\n    <cometchat-button *ngIf=\"!hideStartNewConversation\" [iconURL]=\"startNewConversationIconURL\" [buttonStyle]=\"startConversationButtonStyle\" (cc-button-clicked)=\"triggerStartConversation()\"></cometchat-button>\n\n  </ng-template>", 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: { conversationRef: [{
-                type: ViewChild,
-                args: ["conversationRef", { static: false }]
-            }], messageListRef: [{
-                type: ViewChild,
-                args: ["messagesRef", { static: false }]
-            }], user: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { user: [{
                 type: Input
             }], group: [{
                 type: Input
@@ -14585,12 +15028,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 }]
         }] });
 
+class CometChatCardView {
+}
+CometChatCardView.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCardView, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CometChatCardView.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCardView, declarations: [CometChatCardViewComponent], imports: [CommonModule], exports: [CometChatCardViewComponent] });
+CometChatCardView.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCardView, imports: [[
+            CommonModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCardView, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [CometChatCardViewComponent],
+                    imports: [
+                        CommonModule,
+                    ],
+                    exports: [CometChatCardViewComponent],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+                }]
+        }] });
+
 class CometChatMessageComposer {
 }
 CometChatMessageComposer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageComposer, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CometChatMessageComposer.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageComposer, declarations: [CometChatMessageComposerComponent], imports: [CommonModule], exports: [CometChatMessageComposerComponent] });
+CometChatMessageComposer.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageComposer, declarations: [CometChatMessageComposerComponent], imports: [CommonModule,
+        CometChatCardView], exports: [CometChatMessageComposerComponent] });
 CometChatMessageComposer.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageComposer, imports: [[
             CommonModule,
+            CometChatCardView
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageComposer, decorators: [{
             type: NgModule,
@@ -14598,6 +15062,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     declarations: [CometChatMessageComposerComponent],
                     imports: [
                         CommonModule,
+                        CometChatCardView
                     ],
                     exports: [CometChatMessageComposerComponent],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA]
@@ -15456,5 +15921,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CallingExtension, CallingExtensionDecorator, ChatConfigurator, CollaborativeDocumentExtension, CollaborativeDocumentExtensionDecorator, CollaborativeWhiteBoardExtension, CollaborativeWhiteBoardExtensionDecorator, CometChatAddMembers, CometChatAddMembersComponent, CometChatBannedMembers, CometChatBannedMembersComponent, CometChatCallButtons, CometChatCallButtonsComponent, CometChatContacts, CometChatContactsComponent, CometChatConversations, CometChatConversationsComponent, CometChatConversationsWithMessages, CometChatConversationsWithMessagesComponent, CometChatDetails, CometChatDetailsComponent, CometChatGroupMembers, CometChatGroupMembersComponent, CometChatGroups, CometChatGroupsComponent, CometChatGroupsWithMessages, CometChatGroupsWithMessagesComponent, CometChatIncomingCall, CometChatIncomingCallComponent, CometChatList, CometChatMessageBubble, CometChatMessageBubbleComponent, CometChatMessageComposer, CometChatMessageComposerComponent, CometChatMessageHeader, CometChatMessageHeaderComponent, CometChatMessageInformation, CometChatMessageInformationComponent, CometChatMessageList, CometChatMessageListComponent, CometChatMessages, CometChatMessagesComponent, CometChatOngoingCall, CometChatOngoingCallComponent, CometChatOutgoingCall, CometChatOutgoingCallComponent, CometChatTabs, CometChatTabsComponent, CometChatThemeService, CometChatThreadedMessages, CometChatThreadedMessagesComponent, CometChatTransferOwnership, CometChatTransferOwnershipComponent, CometChatUIKit, CometChatUsers, CometChatUsersComponent, CometChatUsersWithMessages, CometChatUsersWithMessagesComponent, CometchatListComponent, DataSource, DataSourceDecorator, ExtensionsDataSource, ImageModerationExtension, ImageModerationExtensionDecorator, LinkPreviewExtension, LinkPreviewExtensionDecorator, MessageTranslationExtension, MessageTranslationExtensionDecorator, MessageUtils, PollsExtension, PollsExtensionDecorator, ReactionExtension, ReactionExtensionDecorator, SmartReplyExtension, SmartReplyExtensionDecorator, StickersExtension, StickersExtensionDecorator, TextModeratorExtension, TextModeratorExtensionDecorator, ThumbnailGenerationExtension, ThumbnailGenerationExtensionDecorator };
+export { AIConversationStarterDecorator, AIConversationStarterExtension, AIEnabler, AIEnablerDecorator, AISmartRepliesExtension, AISmartRepliesExtensionDecorator, CallingExtension, CallingExtensionDecorator, ChatConfigurator, CollaborativeDocumentExtension, CollaborativeDocumentExtensionDecorator, CollaborativeWhiteBoardExtension, CollaborativeWhiteBoardExtensionDecorator, CometChatAddMembers, CometChatAddMembersComponent, CometChatBannedMembers, CometChatBannedMembersComponent, CometChatCallButtons, CometChatCallButtonsComponent, CometChatContacts, CometChatContactsComponent, CometChatConversations, CometChatConversationsComponent, CometChatConversationsWithMessages, CometChatConversationsWithMessagesComponent, CometChatDetails, CometChatDetailsComponent, CometChatGroupMembers, CometChatGroupMembersComponent, CometChatGroups, CometChatGroupsComponent, CometChatGroupsWithMessages, CometChatGroupsWithMessagesComponent, CometChatIncomingCall, CometChatIncomingCallComponent, CometChatList, CometChatMessageBubble, CometChatMessageBubbleComponent, CometChatMessageComposer, CometChatMessageComposerComponent, CometChatMessageHeader, CometChatMessageHeaderComponent, CometChatMessageInformation, CometChatMessageInformationComponent, CometChatMessageList, CometChatMessageListComponent, CometChatMessages, CometChatMessagesComponent, CometChatOngoingCall, CometChatOngoingCallComponent, CometChatOutgoingCall, CometChatOutgoingCallComponent, CometChatTabs, CometChatTabsComponent, CometChatThemeService, CometChatThreadedMessages, CometChatThreadedMessagesComponent, CometChatTransferOwnership, CometChatTransferOwnershipComponent, CometChatUIKit, CometChatUsers, CometChatUsersComponent, CometChatUsersWithMessages, CometChatUsersWithMessagesComponent, CometchatListComponent, DataSource, DataSourceDecorator, ExtensionsDataSource, ImageModerationExtension, ImageModerationExtensionDecorator, LinkPreviewExtension, LinkPreviewExtensionDecorator, MessageTranslationExtension, MessageTranslationExtensionDecorator, MessageUtils, PollsExtension, PollsExtensionDecorator, ReactionExtension, ReactionExtensionDecorator, SmartReplyExtension, SmartReplyExtensionDecorator, StickersExtension, StickersExtensionDecorator, TextModeratorExtension, TextModeratorExtensionDecorator, ThumbnailGenerationExtension, ThumbnailGenerationExtensionDecorator };
 //# sourceMappingURL=cometchat-chat-uikit-angular.mjs.map