@cometchat/chat-uikit-angular 4.1.0 → 4.2.0

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

@@ -1,9 +1,9 @@
-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, InteractiveMessageUtils, ReactionsConstants, FormBubbleStyle, CardBubbleStyle, 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, CallLogsStyle, CallLogParticipantsStyle, CallLogRecordingsStyle, CallLogHistoryStyle, CallButtonsConfiguration, CallLogParticipantsConfiguration, CallLogHistoryConfiguration, CallLogRecordingsConfiguration, CallLogDetailsStyle, CallLogDetailsConfiguration, CallLogsConfiguration, WithDetailsStyle } from '@cometchat/uikit-shared';
+import { ConversationUtils, CallingDetailsUtils, ExtensionsDataSource as ExtensionsDataSource$1, CollaborativeDocumentConstants, ExtensionsId, CollaborativeWhiteboardConstants, PollsConstants, CometChatUIKitUtility, CometChatSoundManager, SmartRepliesConfiguration, StickersConstants, StickersConfiguration, CometChatUIKitSharedSettings, CometChatUIKitCalls, OutgoingCallStyle, OutgoingCallConfiguration, CallScreenConfiguration, CallButtonsStyle, StorageUtils, IncomingCallStyle, UsersStyle, AddMembersStyle, MessageHeaderStyle, ListStyle, BannedMembersStyle, MessageReceiptUtils, ConversationsStyle, MessageInformationStyle, MessageInformationConfiguration, MessageTranslationConstants, MessageTranslationStyle, InteractiveMessageUtils, CalendarStyle, TimeSlotStyle, SchedulerBubbleStyle, ReactionsConstants, FormBubbleStyle, CardBubbleStyle, 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, CallLogsStyle, CallLogParticipantsStyle, CallLogRecordingsStyle, CallLogHistoryStyle, CallButtonsConfiguration, CallLogParticipantsConfiguration, CallLogHistoryConfiguration, CallLogRecordingsConfiguration, CallLogDetailsStyle, CallLogDetailsConfiguration, CallLogsConfiguration, WithDetailsStyle } from '@cometchat/uikit-shared';
 export * from '@cometchat/uikit-shared';
 import { CometChatMessageOption, CometChatUIKitConstants, localize, fontHelper, CometChatMessageTemplate, CometChatMessageComposerAction, CometChatTheme, CometChatMessageEvents, MessageStatus, CometChatUIEvents, ChatSdkEventInitializer, CometChatLocalize, CallWorkflow, CometChatCallEvents, IconButtonAlignment, TitleAlignment, States, DatePatterns, SelectionMode, CometChatUserEvents, CometChatGroupEvents, CometChatConversationEvents, MessageBubbleAlignment, MessageListAlignment, Receipts, TimestampAlignment, DocumentIconAlignment, Placement, AuxiliaryButtonAlignment, TabAlignment, TabsVisibility, CometChatCallDetailsTemplate, CometChatCallDetailsOption } from '@cometchat/uikit-resources';
 export * from '@cometchat/uikit-resources';
-import { CallscreenStyle, AvatarStyle, ListItemStyle, DateStyle, ReceiptStyle, BadgeStyle, ConfirmDialogStyle, MenuListStyle, InputStyle, LabelStyle, RadioButtonStyle, CheckboxStyle, DropdownStyle, SingleSelectStyle, QuickViewStyle, MediaRecorderStyle, ChangeScopeStyle, CreateGroupStyle, JoinGroupStyle } from '@cometchat/uikit-elements';
-export { ActionSheetStyle, AvatarStyle, BackdropStyle, BadgeStyle, ButtonGroupStyle, CallscreenStyle, CardStyle, ChangeScopeStyle, CheckboxStyle, CometChatActionItem, CometChatActionSheet, CometChatAudioBubble, CometChatAvatar, CometChatBackdrop, CometChatBadge, CometChatButton, CometChatButtonGroup, CometChatCallscreenWrapper, CometChatCard, CometChatChangeScope, CometChatCheckbox, CometChatConfirmDialog, CometChatContextMenu, CometChatCreateGroup, CometChatDate, CometChatDivider, CometChatDocumentBubble, CometChatDraggable, CometChatDropdown, CometChatEmoji, CometChatEmojiKeyboard, CometChatFileBubble, CometChatFullScreenViewer, CometChatIcon, CometChatIconButton, CometChatImageBubble, CometChatInput, CometChatJoinGroup, CometChatLabel, CometChatListItem, CometChatLiveReaction, CometChatLoader, CometChatMediaRecorder, CometChatMenuList, CometChatMessageInput, CometChatModal, CometChatPopover, CometChatPreview, CometChatRadioButton, CometChatReceipt, CometChatSearchInput, CometChatStatusIndicator, CometChatTextBubble, CometChatVideoBubble, ConfirmDialogStyle, ContextMenuStyle, CreateGroupStyle, DateStyle, DocumentBubbleStyle, DropdownStyle, EmojiKeyboardStyle, Emojis, FileBubbleStyle, FullScreenViewerStyle, IconStyle, ImageBubbleStyle, InputStyle, JoinGroupStyle, LabelStyle, ListItemStyle, LoaderStyle, MediaRecorderStyle, MenuListStyle, MessageInputStyle, ModalStyle, PopoverStyle, PreviewStyle, RadioButtonStyle, ReceiptStyle, SearchInputStyle, TextBubbleStyle, auxiliaryButtonAlignmentEnum, layoutType } from '@cometchat/uikit-elements';
+import { CallscreenStyle, AvatarStyle, ListItemStyle, DateStyle, ReceiptStyle, BadgeStyle, ConfirmDialogStyle, MenuListStyle, QuickViewStyle, InputStyle, LabelStyle, RadioButtonStyle, CheckboxStyle, DropdownStyle, SingleSelectStyle, MediaRecorderStyle, ChangeScopeStyle, CreateGroupStyle, JoinGroupStyle } from '@cometchat/uikit-elements';
+export { ActionSheetStyle, AvatarStyle, BackdropStyle, BadgeStyle, ButtonGroupStyle, CallscreenStyle, CardStyle, ChangeScopeStyle, CheckboxStyle, CometChatActionItem, CometChatActionSheet, CometChatAudioBubble, CometChatAvatar, CometChatBackdrop, CometChatBadge, CometChatButton, CometChatButtonGroup, CometChatCallscreenWrapper, CometChatCard, CometChatChangeScope, CometChatCheckbox, CometChatConfirmDialog, CometChatContextMenu, CometChatCreateGroup, CometChatDate, CometChatDivider, CometChatDocumentBubble, CometChatDraggable, CometChatDropdown, CometChatEmoji, CometChatEmojiKeyboard, CometChatFileBubble, CometChatFullScreenViewer, CometChatIcon, CometChatIconButton, CometChatImageBubble, CometChatInput, CometChatJoinGroup, CometChatLabel, CometChatListItem, CometChatLiveReaction, CometChatLoader, CometChatMediaRecorder, CometChatMenuList, CometChatMessageInput, CometChatModal, CometChatPanel, CometChatPopover, CometChatPreview, CometChatQuickView, CometChatRadioButton, CometChatReceipt, CometChatSearchInput, CometChatSingleSelect, CometChatStatusIndicator, CometChatTextBubble, CometChatVideoBubble, ConfirmDialogStyle, ContextMenuStyle, CreateGroupStyle, DateStyle, DocumentBubbleStyle, DropdownStyle, EmojiKeyboardStyle, Emojis, FileBubbleStyle, FullScreenViewerStyle, IconStyle, ImageBubbleStyle, InputStyle, JoinGroupStyle, LabelStyle, ListItemStyle, LoaderStyle, MediaRecorderStyle, MenuListStyle, MessageInputStyle, ModalStyle, PanelStyle, PopoverStyle, PreviewStyle, QuickViewStyle, RadioButtonStyle, ReceiptStyle, SearchInputStyle, SingleSelectStyle, TextBubbleStyle, auxiliaryButtonAlignmentEnum, layoutType } from '@cometchat/uikit-elements';
 import { __awaiter } from 'tslib';
 import { CometChat } from '@cometchat/chat-sdk-javascript';
 import * as i0 from '@angular/core';
@@ -125,6 +125,13 @@ class MessageUtils {
     getBottomView(_messageObject, _alignment) {
         return null;
     }
+    getSchedulerMessageTemplate() {
+        return new CometChatMessageTemplate({
+            type: CometChatUIKitConstants.MessageTypes.scheduler,
+            category: CometChatUIKitConstants.MessageCategory.interactive,
+            options: ChatConfigurator.getDataSource().getMessageOptions,
+        });
+    }
     getTextMessageTemplate() {
         return new CometChatMessageTemplate({
             type: CometChatUIKitConstants.MessageTypes.text,
@@ -166,6 +173,20 @@ class MessageUtils {
             options: ChatConfigurator.getDataSource().getMessageOptions,
         });
     }
+    getFormMessageTemplate() {
+        return new CometChatMessageTemplate({
+            type: CometChatUIKitConstants.MessageTypes.form,
+            category: CometChatUIKitConstants.MessageCategory.interactive,
+            options: ChatConfigurator.getDataSource().getMessageOptions,
+        });
+    }
+    getCardMessageTemplate() {
+        return new CometChatMessageTemplate({
+            type: CometChatUIKitConstants.MessageTypes.card,
+            category: CometChatUIKitConstants.MessageCategory.interactive,
+            options: ChatConfigurator.getDataSource().getMessageOptions,
+        });
+    }
     getAllMessageTemplates() {
         return [
             ChatConfigurator.getDataSource().getTextMessageTemplate(),
@@ -174,6 +195,9 @@ class MessageUtils {
             ChatConfigurator.getDataSource().getAudioMessageTemplate(),
             ChatConfigurator.getDataSource().getFileMessageTemplate(),
             ChatConfigurator.getDataSource().getGroupActionTemplate(),
+            ChatConfigurator.getDataSource().getFormMessageTemplate(),
+            ChatConfigurator.getDataSource().getCardMessageTemplate(),
+            ChatConfigurator.getDataSource().getSchedulerMessageTemplate()
         ];
     }
     getMessageTemplate(messageType, messageCategory) {
@@ -201,6 +225,15 @@ class MessageUtils {
                     _template =
                         ChatConfigurator.getDataSource().getAudioMessageTemplate();
                     break;
+                case CometChatUIKitConstants.MessageTypes.form:
+                    _template = ChatConfigurator.getDataSource().getFormMessageTemplate();
+                    break;
+                case CometChatUIKitConstants.MessageTypes.card:
+                    _template = ChatConfigurator.getDataSource().getCardMessageTemplate();
+                    break;
+                case CometChatUIKitConstants.MessageTypes.scheduler:
+                    _template = ChatConfigurator.getDataSource().getSchedulerMessageTemplate();
+                    break;
             }
         }
         return _template;
@@ -235,8 +268,8 @@ class MessageUtils {
                     break;
             }
         }
-        else if (messageObject.getCategory() ==
-            CometChatUIKitConstants.MessageCategory.custom) {
+        else if ((messageObject.getCategory() == CometChatUIKitConstants.MessageCategory.custom) ||
+            (messageObject.getCategory() == CometChatUIKitConstants.MessageCategory.interactive)) {
             _optionList = ChatConfigurator.getDataSource().getCommonOptions(loggedInUser, messageObject, theme, group);
         }
         return _optionList;
@@ -268,6 +301,9 @@ class MessageUtils {
             CometChatUIKitConstants.MessageTypes.video,
             CometChatUIKitConstants.MessageTypes.file,
             CometChatUIKitConstants.MessageTypes.groupMember,
+            CometChatUIKitConstants.MessageTypes.form,
+            CometChatUIKitConstants.MessageTypes.card,
+            CometChatUIKitConstants.MessageTypes.scheduler
         ];
     }
     addList() {
@@ -277,6 +313,7 @@ class MessageUtils {
         return [
             CometChatUIKitConstants.MessageCategory.message,
             CometChatUIKitConstants.MessageCategory.action,
+            CometChatUIKitConstants.MessageCategory.interactive
         ];
     }
     getAuxiliaryOptions(id, user, group) {
@@ -455,10 +492,22 @@ class DataSourceDecorator {
         var _a;
         return ((_a = this.dataSource) !== null && _a !== void 0 ? _a : new MessageUtils()).getFileMessageTemplate();
     }
+    getFormMessageTemplate() {
+        var _a;
+        return ((_a = this.dataSource) !== null && _a !== void 0 ? _a : new MessageUtils()).getFormMessageTemplate();
+    }
+    getCardMessageTemplate() {
+        var _a;
+        return ((_a = this.dataSource) !== null && _a !== void 0 ? _a : new MessageUtils()).getCardMessageTemplate();
+    }
     getGroupActionTemplate() {
         var _a;
         return ((_a = this.dataSource) !== null && _a !== void 0 ? _a : new MessageUtils()).getGroupActionTemplate();
     }
+    getSchedulerMessageTemplate() {
+        var _a;
+        return ((_a = this.dataSource) !== null && _a !== void 0 ? _a : new MessageUtils()).getSchedulerMessageTemplate();
+    }
     getAllMessageTemplates() {
         var _a;
         return ((_a = this.dataSource) !== null && _a !== void 0 ? _a : new MessageUtils()).getAllMessageTemplates();
@@ -1567,6 +1616,7 @@ class CometChatUIKit {
     static init(uiKitSettings) {
         // perform sdk init taking values from uiKitSettings
         CometChatUIKit.uiKitSettings = uiKitSettings;
+        CometChatUIKitSharedSettings.uikitSettings = CometChatUIKit.uiKitSettings;
         if (!CometChatUIKit.checkAuthSettings())
             return undefined;
         const appSettingsBuilder = new CometChat.AppSettingsBuilder();
@@ -1902,6 +1952,37 @@ class CometChatUIKit {
             });
         });
     }
+    /**
+   * Sends a scheduler message and emits events based on the message status.
+   * @param message - The scheduler message to be sent.
+   * @param disableLocalEvents - A boolean indicating whether to disable local events or not. Default value is false.
+   */
+    static sendSchedulerMessage(message, disableLocalEvents = false) {
+        if (!disableLocalEvents) {
+            CometChatMessageEvents.ccMessageSent.next({
+                message: message,
+                status: MessageStatus.inprogress,
+            });
+        }
+        CometChat.sendInteractiveMessage(message)
+            .then((message) => {
+            if (!disableLocalEvents) {
+                CometChatMessageEvents.ccMessageSent.next({
+                    message: message,
+                    status: MessageStatus.success,
+                });
+            }
+        })
+            .catch((error) => {
+            message.setMetadata({ error });
+            if (!disableLocalEvents) {
+                CometChatMessageEvents.ccMessageSent.next({
+                    message: message,
+                    status: MessageStatus.error,
+                });
+            }
+        });
+    }
 }
 CometChatUIKit.SoundManager = CometChatSoundManager;
 CometChatUIKit.Localize = CometChatLocalize;
@@ -6156,7 +6237,7 @@ class CometChatConversationsComponent {
                     this.updateConversation(call);
                 }
             }));
-            // SDK listeners 
+            // SDK listeners
             this.onTextMessageReceived =
                 CometChatMessageEvents.onTextMessageReceived.subscribe((textMessage) => {
                     callback(CometChatUIKitConstants.messages.TEXT_MESSAGE_RECEIVED, null, textMessage);
@@ -6173,6 +6254,10 @@ class CometChatConversationsComponent {
                 CometChatMessageEvents.onFormMessageReceived.subscribe((formMessage) => {
                     callback(CometChatUIKitConstants.messages.INTERACTIVE_MESSAGE_RECEIVED, null, formMessage);
                 });
+            this.onSchedulerMessageReceived =
+                CometChatMessageEvents.onSchedulerMessageReceived.subscribe((formMessage) => {
+                    callback(CometChatUIKitConstants.messages.INTERACTIVE_MESSAGE_RECEIVED, null, formMessage);
+                });
             this.onCardMessageReceived =
                 CometChatMessageEvents.onCardMessageReceived.subscribe((cardMessage) => {
                     callback(CometChatUIKitConstants.messages.INTERACTIVE_MESSAGE_RECEIVED, null, cardMessage);
@@ -6224,7 +6309,7 @@ class CometChatConversationsComponent {
      * Removes all listeners
      */
     removeListeners() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
         try {
             CometChat.removeUserListener(this.userListenerId);
             CometChat.removeGroupListener(this.groupListenerId);
@@ -6233,14 +6318,15 @@ class CometChatConversationsComponent {
             (_b = this.onMediaMessageReceived) === null || _b === void 0 ? void 0 : _b.unsubscribe();
             (_c = this.onCustomMessageReceived) === null || _c === void 0 ? void 0 : _c.unsubscribe();
             (_d = this.onFormMessageReceived) === null || _d === void 0 ? void 0 : _d.unsubscribe();
-            (_e = this.onCardMessageReceived) === null || _e === void 0 ? void 0 : _e.unsubscribe();
-            (_f = this.onCustomInteractiveMessageReceived) === null || _f === void 0 ? void 0 : _f.unsubscribe();
-            (_g = this.onMessagesRead) === null || _g === void 0 ? void 0 : _g.unsubscribe();
-            (_h = this.onMessageDeleted) === null || _h === void 0 ? void 0 : _h.unsubscribe();
-            (_j = this.onMessageEdited) === null || _j === void 0 ? void 0 : _j.unsubscribe();
-            (_k = this.onMessagesDelivered) === null || _k === void 0 ? void 0 : _k.unsubscribe();
-            (_l = this.onTypingStarted) === null || _l === void 0 ? void 0 : _l.unsubscribe();
-            (_m = this.onTypingEnded) === null || _m === void 0 ? void 0 : _m.unsubscribe();
+            (_e = this.onSchedulerMessageReceived) === null || _e === void 0 ? void 0 : _e.unsubscribe();
+            (_f = this.onCardMessageReceived) === null || _f === void 0 ? void 0 : _f.unsubscribe();
+            (_g = this.onCustomInteractiveMessageReceived) === null || _g === void 0 ? void 0 : _g.unsubscribe();
+            (_h = this.onMessagesRead) === null || _h === void 0 ? void 0 : _h.unsubscribe();
+            (_j = this.onMessageDeleted) === null || _j === void 0 ? void 0 : _j.unsubscribe();
+            (_k = this.onMessageEdited) === null || _k === void 0 ? void 0 : _k.unsubscribe();
+            (_l = this.onMessagesDelivered) === null || _l === void 0 ? void 0 : _l.unsubscribe();
+            (_m = this.onTypingStarted) === null || _m === void 0 ? void 0 : _m.unsubscribe();
+            (_o = this.onTypingEnded) === null || _o === void 0 ? void 0 : _o.unsubscribe();
         }
         catch (error) {
             if (this.onError) {
@@ -8004,7 +8090,7 @@ class CometChatMessageListComponent {
             this.requestBuilder
                 .fetchPrevious()
                 .then((messageList) => {
-                var _a, _b;
+                var _a, _b, _c;
                 if (messageList && messageList.length > 0) {
                     messageList = messageList.map((message, i) => {
                         if (message.getCategory() ===
@@ -8037,8 +8123,8 @@ class CometChatMessageListComponent {
                         this.lastMessageId = Number(messageList[messageList.length - 1].getId());
                     }
                     let lastMessage = messageList[messageList.length - 1];
-                    if ((lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.getSender().getUid()) !=
-                        ((_a = this.loggedInUser) === null || _a === void 0 ? void 0 : _a.getUid()) &&
+                    if (((_a = lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.getSender()) === null || _a === void 0 ? void 0 : _a.getUid()) !=
+                        ((_b = this.loggedInUser) === null || _b === void 0 ? void 0 : _b.getUid()) &&
                         !lastMessage.getDeliveredAt()) {
                         //mark the message as delivered
                         if (!this.disableReceipt) {
@@ -8073,7 +8159,7 @@ class CometChatMessageListComponent {
                     this.state = States.loaded;
                     this.ref.detectChanges();
                     //if the sender of the message is not the loggedin user, mark it as read.
-                    let prevScrollHeight = (_b = this.listScroll) === null || _b === void 0 ? void 0 : _b.nativeElement.scrollHeight;
+                    let prevScrollHeight = (_c = this.listScroll) === null || _c === void 0 ? void 0 : _c.nativeElement.scrollHeight;
                     setTimeout(() => {
                         var _a;
                         this.listScroll.nativeElement.scrollTop =
@@ -8375,24 +8461,12 @@ class CometChatMessageListComponent {
             return callSettings;
         };
         this.reInitializeMessageBuilder = () => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
             if (!this.parentMessageId) {
                 this.messageCount = 0;
             }
             this.requestBuilder = null;
             CometChat.removeGroupListener(this.groupListenerId);
             CometChat.removeCallListener(this.callListenerId);
-            (_a = this.onTextMessageReceived) === null || _a === void 0 ? void 0 : _a.unsubscribe();
-            (_b = this.onMediaMessageReceived) === null || _b === void 0 ? void 0 : _b.unsubscribe();
-            (_c = this.onCustomMessageReceived) === null || _c === void 0 ? void 0 : _c.unsubscribe();
-            (_d = this.onFormMessageReceived) === null || _d === void 0 ? void 0 : _d.unsubscribe();
-            (_e = this.onCardMessageReceived) === null || _e === void 0 ? void 0 : _e.unsubscribe();
-            (_f = this.onCustomInteractiveMessageReceived) === null || _f === void 0 ? void 0 : _f.unsubscribe();
-            (_g = this.onMessagesDelivered) === null || _g === void 0 ? void 0 : _g.unsubscribe();
-            (_h = this.onMessagesRead) === null || _h === void 0 ? void 0 : _h.unsubscribe();
-            (_j = this.onMessageDeleted) === null || _j === void 0 ? void 0 : _j.unsubscribe();
-            (_k = this.onMessageEdited) === null || _k === void 0 ? void 0 : _k.unsubscribe();
-            (_l = this.onTransientMessageReceived) === null || _l === void 0 ? void 0 : _l.unsubscribe();
             this.reInitializeMessageList();
         };
         /**
@@ -8697,6 +8771,152 @@ class CometChatMessageListComponent {
                 iconTint: this.theme.palette.getAccent600(),
             };
         };
+        this.getSchedulerBubbleStyle = (messgae) => {
+            let avatarStyle = new AvatarStyle({
+                borderRadius: "50%",
+                width: "48px",
+                height: "48px",
+                border: "none",
+                backgroundColor: this.themeService.theme.palette.getAccent700(),
+                nameTextColor: this.themeService.theme.palette.getAccent900(),
+                backgroundSize: "cover",
+                nameTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
+            });
+            let listItemStyle = new ListItemStyle({
+                height: "auto",
+                width: "100%",
+                background: "inherit",
+                activeBackground: "transparent",
+                borderRadius: "0",
+                titleFont: fontHelper(this.themeService.theme.typography.text1),
+                titleColor: this.themeService.theme.palette.getAccent(),
+                border: "none",
+                separatorColor: "",
+                hoverBackground: "transparent"
+            });
+            let calendarStyle = new CalendarStyle({
+                height: "100%",
+                width: "100%",
+                border: "none",
+                borderRadius: "0",
+                background: "transparent",
+                dateTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
+                dateTextColor: this.themeService.theme.palette.getAccent(),
+                dayTextFont: fontHelper(this.themeService.theme.typography.text2),
+                dayTextColor: this.themeService.theme.palette.getAccent(),
+                monthYearTextFont: fontHelper(this.themeService.theme.typography.text2),
+                monthYearTextColor: this.themeService.theme.palette.getAccent(),
+                defaultDateTextBackground: 'transparent',
+                disabledDateTextColor: this.themeService.theme.palette.getAccent400(),
+                disabledDateTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
+                disabledDateTextBackground: "transparent",
+                titleTextFont: fontHelper(this.themeService.theme.typography.text1),
+                titleTextColor: this.themeService.theme.palette.getAccent(),
+                timezoneTextFont: fontHelper(this.themeService.theme.typography.caption2),
+                timezoneTextColor: this.themeService.theme.palette.getAccent(),
+                arrowButtonTextColor: this.themeService.theme.palette.getAccent(),
+                arrowButtonTextFont: fontHelper(this.themeService.theme.typography.title2),
+            });
+            let timeSlotStyle = new TimeSlotStyle({
+                background: "transparent",
+                height: "fit-content",
+                width: "100%",
+                border: "none",
+                borderRadius: "0",
+                calendarIconTint: this.themeService.theme.palette.getAccent(),
+                timezoneIconTint: this.themeService.theme.palette.getAccent(),
+                emptySlotIconTint: this.themeService.theme.palette.getAccent500(),
+                emptySlotTextColor: this.themeService.theme.palette.getAccent500(),
+                emptySlotTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
+                dateTextColor: this.themeService.theme.palette.getAccent(),
+                dateTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
+                seperatorTint: this.themeService.theme.palette.getAccent100(),
+                slotBackground: this.themeService.theme.palette.getAccent900(),
+                slotBorder: "none",
+                slotBorderRadius: "8px",
+                slotTextColor: this.themeService.theme.palette.getAccent(),
+                slotTextFont: fontHelper(this.themeService.theme.typography.caption2),
+                timezoneTextColor: this.themeService.theme.palette.getAccent(),
+                timezoneTextFont: fontHelper(this.themeService.theme.typography.caption2),
+                titleTextColor: this.themeService.theme.palette.getAccent(),
+                titleTextFont: fontHelper(this.themeService.theme.typography.text1)
+            });
+            let qucikViewStyle = new QuickViewStyle({
+                background: this.themeService.theme.palette.getAccent50(),
+                height: "fit-content",
+                width: "100%",
+                titleFont: fontHelper(this.themeService.theme.typography.subtitle2),
+                titleColor: this.themeService.theme.palette.getAccent(),
+                subtitleFont: fontHelper(this.themeService.theme.typography.subtitle2),
+                subtitleColor: this.themeService.theme.palette.getAccent600(),
+                leadingBarTint: this.themeService.theme.palette.getPrimary(),
+                leadingBarWidth: "4px",
+                borderRadius: "8px",
+            });
+            return new SchedulerBubbleStyle({
+                avatarStyle: avatarStyle,
+                listItemStyle: listItemStyle,
+                quickViewStyle: qucikViewStyle,
+                dateSelectorStyle: calendarStyle,
+                timeSlotSelectorStyle: timeSlotStyle,
+                backButtonIconTint: this.themeService.theme.palette.getPrimary(),
+                background: "transparent",
+                height: "100%",
+                width: "100%",
+                border: `1px solid ${this.themeService.theme.palette.getAccent100()}`,
+                borderRadius: "8px",
+                loadingIconTint: this.themeService.theme.palette.getAccent600(),
+                suggestedTimeBackground: this.themeService.theme.palette.getAccent900(),
+                suggestedTimeBorder: `1px solid ${this.themeService.theme.palette.getPrimary()}`,
+                suggestedTimeBorderRadius: "8px",
+                suggestedTimeDisabledBackground: this.themeService.theme.palette.getAccent50(),
+                suggestedTimeDisabledBorder: `1px solid ${this.themeService.theme.palette.getAccent200()}`,
+                suggestedTimeDisabledBorderRadius: "8px",
+                suggestedTimeDisabledTextColor: this.themeService.theme.palette.getAccent700(),
+                suggestedTimeDisabledTextFont: fontHelper(this.themeService.theme.typography.text3),
+                suggestedTimeTextColor: this.themeService.theme.palette.getPrimary(),
+                suggestedTimeTextFont: fontHelper(this.themeService.theme.typography.text3),
+                moreButtonDisabledTextBackground: "transparent",
+                moreButtonDisabledTextBorder: "none",
+                moreButtonDisabledTextBorderRadius: "0",
+                moreButtonDisabledTextColor: this.themeService.theme.palette.getAccent600(),
+                moreButtonDisabledTextFont: fontHelper(this.themeService.theme.typography.caption2),
+                moreButtonTextBackground: "transparent",
+                moreButtonTextBorder: "none",
+                moreButtonTextBorderRadius: "0",
+                moreButtonTextColor: this.themeService.theme.palette.getPrimary(),
+                moreButtonTextFont: fontHelper(this.themeService.theme.typography.caption2),
+                goalCompletionTextColor: this.themeService.theme.palette.getAccent(),
+                goalCompletionTextFont: fontHelper(this.themeService.theme.typography.text3),
+                errorTextColor: this.themeService.theme.palette.getError(),
+                errorTextFont: fontHelper(this.themeService.theme.typography.text3),
+                scheduleButtonStyle: {
+                    iconHeight: "20px", iconWidth: "20px",
+                    buttonIconTint: this.themeService.theme.palette.getAccent(),
+                    buttonTextFont: fontHelper(this.themeService.theme.typography.name),
+                    buttonTextColor: this.themeService.theme.palette.getAccent("dark"),
+                    border: "none",
+                    borderRadius: "8px",
+                    background: this.themeService.theme.palette.getPrimary(),
+                    width: "100%",
+                    display: "flex",
+                    justifyContent: "center",
+                    padding: "8px"
+                },
+                seperatorTint: this.themeService.theme.palette.getAccent200(),
+                subtitleTextColor: this.themeService.theme.palette.getAccent400(),
+                subtitleTextFont: fontHelper(this.themeService.theme.typography.name),
+                summaryTextColor: this.themeService.theme.palette.getAccent(),
+                summaryTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
+                timezoneTextColor: this.themeService.theme.palette.getAccent600(),
+                timezoneTextFont: fontHelper(this.themeService.theme.typography.caption2),
+                titleTextColor: this.themeService.theme.palette.getAccent(),
+                titleTextFont: fontHelper(this.themeService.theme.typography.title1),
+                timezoneIconTint: this.themeService.theme.palette.getAccent(),
+                calendarIconTint: this.themeService.theme.palette.getAccent(),
+                clockIconTint: this.themeService.theme.palette.getAccent(),
+            });
+        };
         this.wrapperStyle = () => {
             return {
                 height: this.messageListStyle.height,
@@ -8750,7 +8970,6 @@ class CometChatMessageListComponent {
         }
     }
     ngOnChanges(changes) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         try {
             if (changes["user"] || changes["group"]) {
                 this.chatChanged = true;
@@ -8807,23 +9026,11 @@ class CometChatMessageListComponent {
                     }
                 }
                 //Removing Previous Conversation Listeners
-                (_a = this.onTextMessageReceived) === null || _a === void 0 ? void 0 : _a.unsubscribe();
-                (_b = this.onMediaMessageReceived) === null || _b === void 0 ? void 0 : _b.unsubscribe();
-                (_c = this.onCustomMessageReceived) === null || _c === void 0 ? void 0 : _c.unsubscribe();
-                (_d = this.onFormMessageReceived) === null || _d === void 0 ? void 0 : _d.unsubscribe();
-                (_e = this.onCardMessageReceived) === null || _e === void 0 ? void 0 : _e.unsubscribe();
-                (_f = this.onCustomInteractiveMessageReceived) === null || _f === void 0 ? void 0 : _f.unsubscribe();
-                (_g = this.onMessagesDelivered) === null || _g === void 0 ? void 0 : _g.unsubscribe();
-                (_h = this.onMessagesRead) === null || _h === void 0 ? void 0 : _h.unsubscribe();
-                (_j = this.onMessageDeleted) === null || _j === void 0 ? void 0 : _j.unsubscribe();
-                (_k = this.onMessageEdited) === null || _k === void 0 ? void 0 : _k.unsubscribe();
-                (_l = this.onTransientMessageReceived) === null || _l === void 0 ? void 0 : _l.unsubscribe();
                 CometChat.removeGroupListener(this.groupListenerId);
                 CometChat.removeCallListener(this.callListenerId);
                 this.groupListenerId = "group_" + new Date().getTime();
                 this.callListenerId = "call_" + new Date().getTime();
                 // Attach MessageListeners for the new conversation
-                this.addMessageEventListeners();
             }
         }
         catch (error) {
@@ -8976,7 +9183,7 @@ class CometChatMessageListComponent {
         }
     }
     ngOnDestroy() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         this.showConversationStarter = false;
         this.showConversationSummary = false;
         this.unsubscribeToEvents();
@@ -8988,13 +9195,14 @@ class CometChatMessageListComponent {
             (_b = this.onMediaMessageReceived) === null || _b === void 0 ? void 0 : _b.unsubscribe();
             (_c = this.onCustomMessageReceived) === null || _c === void 0 ? void 0 : _c.unsubscribe();
             (_d = this.onFormMessageReceived) === null || _d === void 0 ? void 0 : _d.unsubscribe();
-            (_e = this.onCardMessageReceived) === null || _e === void 0 ? void 0 : _e.unsubscribe();
-            (_f = this.onCustomInteractiveMessageReceived) === null || _f === void 0 ? void 0 : _f.unsubscribe();
-            (_g = this.onMessagesDelivered) === null || _g === void 0 ? void 0 : _g.unsubscribe();
-            (_h = this.onMessagesRead) === null || _h === void 0 ? void 0 : _h.unsubscribe();
-            (_j = this.onMessageDeleted) === null || _j === void 0 ? void 0 : _j.unsubscribe();
-            (_k = this.onMessageEdited) === null || _k === void 0 ? void 0 : _k.unsubscribe();
-            (_l = this.onTransientMessageReceived) === null || _l === void 0 ? void 0 : _l.unsubscribe();
+            (_e = this.onSchedulerMessageReceived) === null || _e === void 0 ? void 0 : _e.unsubscribe();
+            (_f = this.onCardMessageReceived) === null || _f === void 0 ? void 0 : _f.unsubscribe();
+            (_g = this.onCustomInteractiveMessageReceived) === null || _g === void 0 ? void 0 : _g.unsubscribe();
+            (_h = this.onMessagesDelivered) === null || _h === void 0 ? void 0 : _h.unsubscribe();
+            (_j = this.onMessagesRead) === null || _j === void 0 ? void 0 : _j.unsubscribe();
+            (_k = this.onMessageDeleted) === null || _k === void 0 ? void 0 : _k.unsubscribe();
+            (_l = this.onMessageEdited) === null || _l === void 0 ? void 0 : _l.unsubscribe();
+            (_m = this.onTransientMessageReceived) === null || _m === void 0 ? void 0 : _m.unsubscribe();
         }
         catch (error) {
             if (this.onError) {
@@ -9210,7 +9418,7 @@ class CometChatMessageListComponent {
             (msg === null || msg === void 0 ? void 0 : msg.getType()) == CometChatUIKitConstants.MessageTypes.audio) {
             style = {
                 borderRadius: "",
-                background: this.themeService.theme.palette.getAccent100(),
+                background: this.themeService.theme.palette.getSecondary(),
             };
         }
         else if ((msg === null || msg === void 0 ? void 0 : msg.getType()) == CometChatUIKitConstants.MessageTypes.groupMember ||
@@ -9218,13 +9426,13 @@ class CometChatMessageListComponent {
             style = {
                 background: "transparent",
                 borderRadius: "12px",
-                border: `1px solid ${this.themeService.theme.palette.getAccent100()}`,
+                border: `1px solid ${this.themeService.theme.palette.getSecondary()}`,
             };
         }
         else if (!(msg === null || msg === void 0 ? void 0 : msg.getDeletedAt()) &&
             (msg === null || msg === void 0 ? void 0 : msg.getCategory()) === CometChatUIKitConstants.MessageCategory.interactive) {
             return {
-                background: this.themeService.theme.palette.getAccent100(),
+                background: this.themeService.theme.palette.getSecondary(),
                 width: "300px",
             };
         }
@@ -9232,13 +9440,13 @@ class CometChatMessageListComponent {
             if ((msg === null || msg === void 0 ? void 0 : msg.getSender()) &&
                 (msg === null || msg === void 0 ? void 0 : msg.getSender().getUid()) != this.loggedInUser.getUid()) {
                 style = {
-                    background: this.themeService.theme.palette.getAccent100(),
+                    background: this.themeService.theme.palette.getSecondary(),
                     borderRadius: "12px",
                 };
             }
             else {
                 style = {
-                    background: this.themeService.theme.palette.getAccent100(),
+                    background: this.themeService.theme.palette.getSecondary(),
                     borderRadius: "12px",
                 };
             }
@@ -9332,7 +9540,7 @@ class CometChatMessageListComponent {
             width: "100%",
             height: "30px",
             border: `1px solid ${this.themeService.theme.palette.getAccent100()}`,
-            borderRadius: "3px",
+            borderRadius: "6px",
             padding: "0px 0px 0px 5px",
             placeholderTextColor: this.themeService.theme.palette.getAccent400(),
             placeholderTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
@@ -9361,14 +9569,14 @@ class CometChatMessageListComponent {
             borderRadius: "4px",
             background: "",
             labelTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
-            labelTextColor: this.themeService.theme.palette.getAccent600(),
+            labelTextColor: this.themeService.theme.palette.getAccent(),
         });
         const dropdownStyle = new DropdownStyle({
             height: "35px",
             width: "100%",
             background: this.themeService.theme.palette.getBackground(),
             border: `1px solid ${this.themeService.theme.palette.getAccent100()}`,
-            borderRadius: "12px",
+            borderRadius: "6px",
             activeTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
             activeTextColor: this.themeService.theme.palette.getAccent(),
             arrowIconTint: this.themeService.theme.palette.getAccent700(),
@@ -9386,7 +9594,7 @@ class CometChatMessageListComponent {
             width: "100%",
             background: this.themeService.theme.palette.getPrimary(),
             border: `none`,
-            borderRadius: "12px",
+            borderRadius: "6px",
             buttonTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
             buttonTextColor: this.themeService.theme.palette.getBackground(),
             justifyContent: "center",
@@ -9404,7 +9612,7 @@ class CometChatMessageListComponent {
             textColor: this.themeService.theme.palette.getAccent(),
             optionBackground: this.themeService.theme.palette.getBackground(),
             optionBorder: `1px solid ${this.themeService.theme.palette.getAccent100()}`,
-            optionBorderRadius: "2px",
+            optionBorderRadius: "3px",
             hoverTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
             hoverTextColor: this.themeService.theme.palette.getAccent(),
             hoverTextBackground: this.themeService.theme.palette.getAccent100(),
@@ -9442,6 +9650,10 @@ class CometChatMessageListComponent {
             goalCompletionTextColor: this.themeService.theme.palette.getAccent(),
             goalCompletionTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
             wrapperPadding: "2px",
+            datePickerBorder: `1px solid ${this.themeService.theme.palette.getAccent100()}`,
+            datePickerBorderRadius: "6px",
+            datePickerFont: fontHelper(this.themeService.theme.typography.subtitle2),
+            datePickerFontColor: this.themeService.theme.palette.getAccent(),
         });
     }
     getCardMessageBubbleStyle() {
@@ -9579,6 +9791,7 @@ class CometChatMessageListComponent {
             extension_document: this.documentBubble,
             extension_poll: this.pollBubble,
             meeting: this.directCalling,
+            scheduler: this.schedulerBubble,
             form: this.formBubble,
             card: this.cardBubble,
         };
@@ -9748,6 +9961,7 @@ class CometChatMessageListComponent {
         this.setDateStyle();
         this.setReceiptStyle();
         this.subscribeToEvents();
+        this.addMessageEventListeners();
         this.setOngoingCallStyle();
         this.state = States.loading;
         CometChat.getLoggedinUser()
@@ -10105,6 +10319,10 @@ class CometChatMessageListComponent {
                 CometChatMessageEvents.onFormMessageReceived.subscribe((message) => {
                     this.messageUpdate(CometChatUIKitConstants.messages.INTERACTIVE_MESSAGE_RECEIVED, message);
                 });
+            this.onSchedulerMessageReceived =
+                CometChatMessageEvents.onSchedulerMessageReceived.subscribe((message) => {
+                    this.messageUpdate(CometChatUIKitConstants.messages.INTERACTIVE_MESSAGE_RECEIVED, message);
+                });
             this.onCardMessageReceived =
                 CometChatMessageEvents.onCardMessageReceived.subscribe((message) => {
                     this.messageUpdate(CometChatUIKitConstants.messages.INTERACTIVE_MESSAGE_RECEIVED, message);
@@ -10806,10 +11024,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", aiErrorIcon: "aiErrorIcon", aiEmptyIcon: "aiEmptyIcon", alignment: "alignment", showAvatar: "showAvatar", datePattern: "datePattern", timestampAlignment: "timestampAlignment", DateSeparatorPattern: "DateSeparatorPattern", templates: "templates", messagesRequestBuilder: "messagesRequestBuilder", newMessageIndicatorText: "newMessageIndicatorText", scrollToBottomOnNewMessages: "scrollToBottomOnNewMessages", thresholdValue: "thresholdValue", unreadMessageThreshold: "unreadMessageThreshold", apiConfiguration: "apiConfiguration", 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: "formBubble", first: true, predicate: ["formBubble"], descendants: true }, { propertyName: "cardBubble", first: true, predicate: ["cardBubble"], 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\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\n    [ngStyle]=\"{height: showSmartReply || showConversationStarter || showConversationSummary ? '92%' : '100%'}\">\n    <div class=\"cc-message-list__top\" #top>\n    </div>\n    <div class=\"cc-message-list__decorator-message\"\n      *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\"\n          [text]=\"errorStateText\">\n        </cometchat-label>\n        <span class=\"cc-message-list__custom-view--error\"\n          *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\"\n            [dateStyle]=\"dateSeparatorStyle\">\n          </cometchat-date>\n        </span>\n      </div>\n      <div class=\"cc-message-list__date-container\"\n        *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\"\n            [dateStyle]=\"dateSeparatorStyle\">\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\"\n          [bottomView]=\"enableReactions ? reactionView : null\"\n          [headerView]=\"getHeaderView(message) || message?.getCategory() != MessageCategory.action && showHeaderTitle(message) ? bubbleHeader : null\"\n          [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\"\n              [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\"\n                  *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && !message.getDeletedAt() && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n                  <cometchat-date [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\"\n                    [pattern]=\"datePattern\">\n                  </cometchat-date>\n                </div>\n                <div\n                  *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() ||this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\"\n                  class=\"cc-message-list__receipt\">\n                  <cometchat-receipt [receipt]=\"getMessageReceipt(message)\" [receiptStyle]=\"receiptStyle\"\n                    [waitIcon]=\"waitIcon\" [sentIcon]=\"sentIcon\" [deliveredIcon]=\"deliveredIcon\" [readIcon]=\"readIcon\"\n                    [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\"\n                [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\"\n                *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\"\n                  *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)\"\n                [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\"\n    [ngStyle]=\"{bottom: showSmartReply || footerView || showConversationStarter || showConversationSummary  ? '20%' : '13%'}\">\n    <cometchat-button [text]=\"newMessageCount\" [buttonStyle]=\"unreadMessagesStyle\"\n      (cc-button-clicked)=\"scrollToBottom()\"></cometchat-button>\n  </div>\n  <div class=\"cc-message-list__footer-view\" [ngStyle]=\"{height:  'auto'}\">\n\n    <div *ngIf=\"footerView;else footer\">\n      <ng-container *ngTemplateOutlet=\"footerView\">\n      </ng-container>\n    </div>\n    <ng-template #footer>\n\n      <div class=\"cc-message-list__smart-replies\" *ngIf=\"!showConversationStarter && showSmartReply && getReplies()\">\n        <smart-replies [smartReplyStyle]=\"smartReplyStyle\" [replies]=\"getReplies()\"\n          (cc-reply-clicked)=\"sendReply($event)\" (cc-close-clicked)=\"closeSmartReply()\">\n        </smart-replies>\n      </div>\n\n\n      <div class=\"cc-message-list__conversation-starters\" *ngIf=\"enableConversationStarter && showConversationStarter\">\n        <cometchat-ai-card [state]=\"conversationStarterState\" [loadingStateText]=\"starterLoadingStateText\"\n          [emptyStateText]=\"starterEmptyStateText\" [errorStateText]=\"errorStateText\">\n          <smart-replies *ngIf=\"conversationStarterState == states.loaded && !parentMessageId\"\n            [smartReplyStyle]=\"conversationStarterStyle\" [replies]=\"conversationStarterReplies\" slot=\"loadedView\"\n            (cc-reply-clicked)=\"sendConversationStarter($event)\" [closeIconURL]=\"''\">\n          </smart-replies>\n        </cometchat-ai-card>\n      </div>\n\n      <div class=\"cc-message-list__conversation-summary\" *ngIf=\"enableConversationSummary && showConversationSummary\">\n\n        <cometchat-ai-card [state]=\"conversationSummaryState\" [loadingStateText]=\"summaryLoadingStateText\"\n          [emptyStateText]=\"summaryEmptyStateText\" [errorStateText]=\"errorStateText\" [errorIconURL]=\"aiErrorIcon\"\n          [emptyIconURL]=\"aiEmptyIcon\">\n          <cometchat-panel *ngIf=\"conversationSummaryState == states.loaded && !parentMessageId\" slot=\"loadedView\"\n            [panelStyle]=\"conversationSummaryStyle\" title=\"Conversation Summary\" [text]=\"conversationSummary\"\n            (cc-close-clicked)=\"closeConversationSummary()\">\n          </cometchat-panel>\n        </cometchat-ai-card>\n\n      </div>\n\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\"\n    [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"message?.message\"></cometchat-text-bubble>\n  <cometchat-text-bubble *ngIf=\"message?.getDeletedAt()\" [textStyle]=\"setTextBubbleStyle(message)\"\n    [text]=\"localize('MESSAGE_IS_DELETED')\"></cometchat-text-bubble>\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 [linkPreviewStyle]=\"linkPreviewStyle\" (cc-link-clicked)=\"openLinkURL($event)\"\n    *ngIf=\"!message?.getDeletedAt() && getLinkPreview(message) && enableLinkPreview\"\n    [title]=\"getLinkPreviewDetails('title',message)\" [description]=\"getLinkPreviewDetails('description',message)\"\n    [URL]=\"getLinkPreviewDetails('url',message)\" [image]=\"getLinkPreviewDetails('image',message)\"\n    [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)\"\n    [messageTranslationStyle]=\"setTranslationStyle(message)\" [translatedText]=\"isTranslated(message)\">\n    <cometchat-text-bubble *ngIf=\" !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n      [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\"\n    [subtitle]=\"localize('SHARED_FILE')\" [title]=\"message?.data?.attachments ? message?.data?.attachments[0]?.name: ''\"\n    [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\"\n    *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.audio\"\n    [iconURL]=\"getCallTypeIcon(message)\" [buttonStyle]=\"callStatusStyle(message)\"\n    [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n  <cometchat-audio-bubble *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\"\n    [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\"\n    *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.video\"\n    [iconURL]=\"getCallTypeIcon(message)\" [buttonStyle]=\"callStatusStyle(message)\"\n    [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n\n  <cometchat-video-bubble *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\"\n    [videoStyle]=\"videoBubbleStyle\" [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\"\n    [poster]=\" getImageThumbnail(message)\"></cometchat-video-bubble>\n</ng-template>\n<ng-template #imageBubble let-message>\n  <image-moderation (cc-show-dialog)=\"openWarningDialog($event)\"\n    *ngIf=\"!message.getDeletedAt() && enableImageModeration\" [message]=\"message\"\n    [imageModerationStyle]=\"imageModerationStyle\">\n    <cometchat-image-bubble (cc-image-clicked)=\"openImageInFullScreen(message)\" [imageStyle]=\"imageBubbleStyle\"\n      [src]=\" getImageThumbnail(message)\" [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n  </image-moderation>\n  <cometchat-image-bubble [imageStyle]=\"imageBubbleStyle\" (cc-image-clicked)=\"openImageInFullScreen(message)\"\n    *ngIf=\"!message.getDeletedAt() && !enableImageModeration\" [src]=\" getImageThumbnail(message)\"\n    [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n</ng-template>\n<ng-template #formBubble let-message>\n  <cometchat-form-bubble [message]=\"message\" [formBubbleStyle]=\"getFormMessageBubbleStyle()\"></cometchat-form-bubble>\n</ng-template>\n<ng-template #cardBubble let-message>\n  <cometchat-card-bubble [message]=\"message\" [cardBubbleStyle]=\"getCardMessageBubbleStyle()\"></cometchat-card-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\"\n    [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\"\n    [ccClicked]=\"launchCollaborativeWhiteboardDocument\" [iconURL]=\"whiteboardIconURL\" [title]=\"whiteboardTitle\"\n    [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\"\n    [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\"\n    [ccClicked]=\"launchCollaborativeWhiteboardDocument\" [iconURL]=\"documentIconURL\" [title]=\"documentTitle\"\n    [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\"\n    [documentStyle]=\"getCallBubbleStyle(message)\" [URL]=\"getSessionId(message)\" [ccClicked]=\"startDirectCall\"\n    [iconURL]=\"directCallIconURL\" [title]=\"getCallBubbleTitle(message)\"\n    [buttonText]=\"joinCallButtonText\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #pollBubble let-message>\n  <polls-bubble [pollStyle]=\"pollBubbleStyle\" [pollQuestion]=\"getPollBubbleData(message,'question')\"\n    [pollId]=\"getPollBubbleData(message,'id')\" [loggedInUser]=\"loggedInUser\" [senderUid]=\"getPollBubbleData(message)\"\n    [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\"\n    [leadingView]=\" showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\" [footerView]=\"footerView\"\n    [contentView]=\"contentView\" [id]=\"message?.getId() || message?.getMuid()\"\n    [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        [loggedInUser]=\"loggedInUser\" [reactionsStyle]=\"reactionsStyle(message)\"\n        [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\"\n            *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\n            *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() ||this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\"\n            class=\"cc-message-list__receipt\">\n            <cometchat-receipt [receipt]=\"getMessageReceipt(message)\" [receiptStyle]=\"receiptStyle\"\n              [waitIcon]=\"waitIcon\" [sentIcon]=\"sentIcon\" [deliveredIcon]=\"\" [readIcon]=\"deliveredIcon\"\n              [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\"\n          [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\"\n          *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\"\n            *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()\"\n    [cancelButtonText]=\"cancelText\" [confirmButtonText]=\"confirmText\" (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"confirmDialogStyle\">\n\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-full-screen-viewer (cc-close-clicked)=\"closeImageInFullScreen()\" *ngIf=\"openFullscreenView\"\n  [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()\"\n  [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)\"\n    [bottomView]=\"enableReactions && hasReaction(message) ? reactionView : null\"\n    [leadingView]=\" showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\" [contentView]=\"contentView\"\n    [id]=\"message?.getId() || message?.getMuid()\" [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"\n    [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)\"\n        [addReactionIconURL]=\"addReactionIconURL\" [loggedInUser]=\"loggedInUser\"\n        [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\"\n          [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\"\n          *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\"\n            *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\"\n    [loadingStateView]=\"messageInformationConfiguration.loadingStateView\"\n    [errorStateView]=\"messageInformationConfiguration.errorStateView\"\n    [listItemStyle]=\"messageInformationConfiguration.listItemStyle\"\n    [emptyStateView]=\"messageInformationConfiguration.emptyStateView\"\n    [loadingIconURL]=\"messageInformationConfiguration.loadingIconURL\"\n    [readIcon]=\"messageInformationConfiguration.readIcon\"\n    [deliveredIcon]=\"messageInformationConfiguration.deliveredIcon\" [onError]=\"messageInformationConfiguration.onError\"\n    [SubtitleView]=\"messageInformationConfiguration.subtitleView\"\n    [receiptDatePattern]=\"messageInformationConfiguration.receiptDatePattern\"\n    [listItemView]=\"messageInformationConfiguration.listItemView \"\n    [messageInformationStyle]=\"messageInformationConfiguration.messageInformationStyle\"\n    [onClose]=\"messageInformationConfiguration.onClose ??  closeMessageInfoPage\"\n    [bubbleView]=\"messageInformationConfiguration.bubbleView ?? messageinfoBubble\" [message]=\"messageInfoObject\">\n\n  </cometchat-message-information>\n</cometchat-backdrop>", styles: [".cc-message-list{height:100%;width:100%;overflow-y:auto;overflow-x:hidden;position:relative}.cc-message-list__wrapper{height:100%;width:100%;display:flex;flex-direction:column;justify-content:space-between;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__conversation-summary{height:100%;position:relative;bottom:0;z-index:1;padding:.1px 14px}.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%;box-sizing:border-box;margin-bottom:1px}.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}.cc_panel_container{border:1px solid #6851d6}\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", aiErrorIcon: "aiErrorIcon", aiEmptyIcon: "aiEmptyIcon", alignment: "alignment", showAvatar: "showAvatar", datePattern: "datePattern", timestampAlignment: "timestampAlignment", DateSeparatorPattern: "DateSeparatorPattern", templates: "templates", messagesRequestBuilder: "messagesRequestBuilder", newMessageIndicatorText: "newMessageIndicatorText", scrollToBottomOnNewMessages: "scrollToBottomOnNewMessages", thresholdValue: "thresholdValue", unreadMessageThreshold: "unreadMessageThreshold", apiConfiguration: "apiConfiguration", 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: "formBubble", first: true, predicate: ["formBubble"], descendants: true }, { propertyName: "cardBubble", first: true, predicate: ["cardBubble"], 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: "schedulerBubble", first: true, predicate: ["schedulerBubble"], descendants: true }, { propertyName: "pollBubble", first: true, predicate: ["pollBubble"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-message-list__wrapper\" [ngStyle]=\"wrapperStyle()\"\n  *ngIf=\"!openContactsView\">\n\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\n    [ngStyle]=\"{height: showSmartReply || showConversationStarter || showConversationSummary ? '92%' : '100%'}\">\n    <div class=\"cc-message-list__top\" #top>\n    </div>\n    <div class=\"cc-message-list__decorator-message\"\n      *ngIf=\"state == states.loading || state == states.error  || state == states.empty \"\n      [ngStyle]=\"messageContainerStyle()\">\n      <div class=\"cc-message-list__loading-view\"\n        *ngIf=\"state == states.loading \">\n        <cometchat-loader [iconURL]=\"loadingIconURL\"\n          [loaderStyle]=\"loadingStyle()\">\n        </cometchat-loader>\n        <span class=\"cc-message-list__customview--loading\"\n          *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\"\n        *ngIf=\"state == states.error  && !hideError \">\n        <cometchat-label [labelStyle]=\"errorStyle()\"\n          *ngIf=\"state == states.error  && !hideError && !errorStateView\"\n          [text]=\"errorStateText\">\n        </cometchat-label>\n        <span class=\"cc-message-list__custom-view--error\"\n          *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\"\n          *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\"\n      *ngFor=\"let message of messagesList; let i = index\">\n      <div class=\"cc-message-list__date-container\"\n        *ngIf=\"(i === 0) && message?.getSentAt()\">\n        <span class=\"cc-message-list__date\">\n          <cometchat-date [timestamp]=\"message!.getSentAt()\"\n            [pattern]=\"DateSeparatorPattern\" [dateStyle]=\"dateSeparatorStyle\">\n          </cometchat-date>\n        </span>\n      </div>\n      <div class=\"cc-message-list__date-container\"\n        *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()\"\n            [pattern]=\"DateSeparatorPattern\" [dateStyle]=\"dateSeparatorStyle\">\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)\"\n          [leadingView]=\" showAvatar ? leadingView : null\"\n          [bottomView]=\"enableReactions ? reactionView : null\"\n          [headerView]=\"getHeaderView(message) || message?.getCategory() != MessageCategory.action && showHeaderTitle(message) ? bubbleHeader : null\"\n          [footerView]=\"footerView\" [contentView]=\"contentView\"\n          [threadView]=\"threadView\"\n          [id]=\"message?.getId() || message?.getMuid()\"\n          [options]=\"setMessageOptions(message)\"\n          [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"\n          [alignment]=\"setBubbleAlignment(message)\">\n          <ng-template #contentView>\n            <ng-container\n              *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\">\n            </ng-container>\n          </ng-template>\n          <ng-template #reactionView>\n            <reactions-view *ngIf=\"hasReaction(message)\"\n              [messageObject]=\"message\"\n              [alignment]=\"setBubbleAlignment(message)\"\n              [addReactionIconURL]=\"addReactionIconURL\"\n              [loggedInUser]=\"loggedInUser\"\n              [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\n                  *ngTemplateOutlet=\"getFooterView(message);context:{ $implicit: message }\">\n                </ng-container>\n              </div>\n              <ng-template #bubbleFooter>\n                <div class=\"cc-message-list__bubble-date\"\n                  *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && !message.getDeletedAt() && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n                  <cometchat-date [timestamp]=\"message?.getSentAt()\"\n                    [dateStyle]=\"bubbleDateStyle\" [pattern]=\"datePattern\">\n                  </cometchat-date>\n                </div>\n                <div\n                  *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() ||this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\"\n                  class=\"cc-message-list__receipt\">\n                  <cometchat-receipt [receipt]=\"getMessageReceipt(message)\"\n                    [receiptStyle]=\"receiptStyle\" [waitIcon]=\"waitIcon\"\n                    [sentIcon]=\"sentIcon\" [deliveredIcon]=\"deliveredIcon\"\n                    [readIcon]=\"readIcon\"\n                    [errorIcon]=\"errorIcon\"></cometchat-receipt>\n                </div>\n              </ng-template>\n            </div>\n          </ng-template>\n          <ng-template #leadingView>\n            <div\n              *ngIf=\" message?.getCategory() != MessageCategory.action  && showHeaderTitle(message)\">\n              <cometchat-avatar [name]=\"message?.getSender()?.getName()\"\n                [avatarStyle]=\"avatarStyle\"\n                [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\n                *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\">\n              </ng-container>\n            </div>\n            <ng-template #defaultHeader>\n              <div class=\"cc-message-list__bubble-header\"\n                *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n                <cometchat-label [text]=\"message?.getSender()?.getName()\"\n                  [labelStyle]=\"labelStyle\"></cometchat-label>\n                <cometchat-date [pattern]=\"datePattern\"\n                  [timestamp]=\"message?.getSentAt()\"\n                  [dateStyle]=\"bubbleDateStyle\"\n                  *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\"\n              *ngIf=\"message?.getReplyCount() && !message.getDeletedAt()\">\n              <cometchat-divider\n                [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n              <cometchat-button [text]=\"getThreadCount(message)\"\n                [buttonStyle]=\"getThreadViewStyle(message)\"\n                [iconURL]=\"threadOpenIcon\"\n                (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\"\n    *ngIf=\"UnreadCount && UnreadCount.length > 0 && !isOnBottom\"\n    [ngStyle]=\"{bottom: showSmartReply || footerView || showConversationStarter || showConversationSummary  ? '20%' : '13%'}\">\n    <cometchat-button [text]=\"newMessageCount\"\n      [buttonStyle]=\"unreadMessagesStyle\"\n      (cc-button-clicked)=\"scrollToBottom()\"></cometchat-button>\n  </div>\n  <div class=\"cc-message-list__footer-view\" [ngStyle]=\"{height:  'auto'}\">\n\n    <div *ngIf=\"footerView;else footer\">\n      <ng-container *ngTemplateOutlet=\"footerView\">\n      </ng-container>\n    </div>\n    <ng-template #footer>\n\n      <div class=\"cc-message-list__smart-replies\"\n        *ngIf=\"!showConversationStarter && showSmartReply && getReplies()\">\n        <smart-replies [smartReplyStyle]=\"smartReplyStyle\"\n          [replies]=\"getReplies()\" (cc-reply-clicked)=\"sendReply($event)\"\n          (cc-close-clicked)=\"closeSmartReply()\">\n        </smart-replies>\n      </div>\n\n\n      <div class=\"cc-message-list__conversation-starters\"\n        *ngIf=\"enableConversationStarter && showConversationStarter\">\n        <cometchat-ai-card [state]=\"conversationStarterState\"\n          [loadingStateText]=\"starterLoadingStateText\"\n          [emptyStateText]=\"starterEmptyStateText\"\n          [errorStateText]=\"errorStateText\">\n          <smart-replies\n            *ngIf=\"conversationStarterState == states.loaded && !parentMessageId\"\n            [smartReplyStyle]=\"conversationStarterStyle\"\n            [replies]=\"conversationStarterReplies\" slot=\"loadedView\"\n            (cc-reply-clicked)=\"sendConversationStarter($event)\"\n            [closeIconURL]=\"''\">\n          </smart-replies>\n        </cometchat-ai-card>\n      </div>\n\n      <div class=\"cc-message-list__conversation-summary\"\n        *ngIf=\"enableConversationSummary && showConversationSummary\">\n\n        <cometchat-ai-card [state]=\"conversationSummaryState\"\n          [loadingStateText]=\"summaryLoadingStateText\"\n          [emptyStateText]=\"summaryEmptyStateText\"\n          [errorStateText]=\"errorStateText\" [errorIconURL]=\"aiErrorIcon\"\n          [emptyIconURL]=\"aiEmptyIcon\">\n          <cometchat-panel\n            *ngIf=\"conversationSummaryState == states.loaded && !parentMessageId\"\n            slot=\"loadedView\" [panelStyle]=\"conversationSummaryStyle\"\n            title=\"Conversation Summary\" [text]=\"conversationSummary\"\n            (cc-close-clicked)=\"closeConversationSummary()\">\n          </cometchat-panel>\n        </cometchat-ai-card>\n\n      </div>\n\n    </ng-template>\n  </div>\n\n</div>\n<!-- default bubbles -->\n<ng-template #textBubble let-message>\n  <cometchat-text-bubble\n    *ngIf=\"message?.type == MessageTypesConstant.groupMember\"\n    [textStyle]=\"setTextBubbleStyle(message)\"\n    [text]=\"message?.message\"></cometchat-text-bubble>\n  <cometchat-text-bubble *ngIf=\"message?.getDeletedAt()\"\n    [textStyle]=\"setTextBubbleStyle(message)\"\n    [text]=\"localize('MESSAGE_IS_DELETED')\"></cometchat-text-bubble>\n  <cometchat-text-bubble\n    *ngIf=\"!isTranslated(message) && !getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n    [textStyle]=\"setTextBubbleStyle(message)\"\n    [text]=\"getTextMessage(message)\"></cometchat-text-bubble>\n  <link-preview [linkPreviewStyle]=\"linkPreviewStyle\"\n    (cc-link-clicked)=\"openLinkURL($event)\"\n    *ngIf=\"!message?.getDeletedAt() && getLinkPreview(message) && enableLinkPreview\"\n    [title]=\"getLinkPreviewDetails('title',message)\"\n    [description]=\"getLinkPreviewDetails('description',message)\"\n    [URL]=\"getLinkPreviewDetails('url',message)\"\n    [image]=\"getLinkPreviewDetails('image',message)\"\n    [favIconURL]=\"getLinkPreviewDetails('favicon',message)\">\n    <cometchat-text-bubble\n      *ngIf=\"!isTranslated(message) && getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n      [textStyle]=\"setTextBubbleStyle(message)\"\n      [text]=\"getTextMessage(message)\"></cometchat-text-bubble>\n  </link-preview>\n  <message-translation-bubble [alignment]=\"getBubbleAlignment(message)\"\n    *ngIf=\"isTranslated(message)\"\n    [messageTranslationStyle]=\"setTranslationStyle(message)\"\n    [translatedText]=\"isTranslated(message)\">\n    <cometchat-text-bubble\n      *ngIf=\" !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n      [textStyle]=\"setTextBubbleStyle(message)\"\n      [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)\"\n    [downloadIconURL]=\"downloadIconURL\" [subtitle]=\"localize('SHARED_FILE')\"\n    [title]=\"message?.data?.attachments ? message?.data?.attachments[0]?.name: ''\"\n    [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\"\n    *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.audio\"\n    [iconURL]=\"getCallTypeIcon(message)\"\n    [buttonStyle]=\"callStatusStyle(message)\"\n    [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n  <cometchat-audio-bubble\n    *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\"\n    [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\">\n  </cometchat-audio-bubble>\n</ng-template>\n<ng-template #videoBubble let-message>\n  <cometchat-icon-button [disabled]=\"true\"\n    *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.video\"\n    [iconURL]=\"getCallTypeIcon(message)\"\n    [buttonStyle]=\"callStatusStyle(message)\"\n    [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n\n  <cometchat-video-bubble\n    *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\"\n    [videoStyle]=\"videoBubbleStyle\"\n    [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\"\n    [poster]=\" getImageThumbnail(message)\"></cometchat-video-bubble>\n</ng-template>\n<ng-template #imageBubble let-message>\n  <image-moderation (cc-show-dialog)=\"openWarningDialog($event)\"\n    *ngIf=\"!message.getDeletedAt() && enableImageModeration\" [message]=\"message\"\n    [imageModerationStyle]=\"imageModerationStyle\">\n    <cometchat-image-bubble (cc-image-clicked)=\"openImageInFullScreen(message)\"\n      [imageStyle]=\"imageBubbleStyle\" [src]=\" getImageThumbnail(message)\"\n      [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n  </image-moderation>\n  <cometchat-image-bubble [imageStyle]=\"imageBubbleStyle\"\n    (cc-image-clicked)=\"openImageInFullScreen(message)\"\n    *ngIf=\"!message.getDeletedAt() && !enableImageModeration\"\n    [src]=\" getImageThumbnail(message)\"\n    [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n</ng-template>\n<ng-template #formBubble let-message>\n  <cometchat-form-bubble [message]=\"message\"\n    [formBubbleStyle]=\"getFormMessageBubbleStyle()\"></cometchat-form-bubble>\n</ng-template>\n<ng-template #cardBubble let-message>\n  <cometchat-card-bubble [message]=\"message\"\n    [cardBubbleStyle]=\"getCardMessageBubbleStyle()\"></cometchat-card-bubble>\n</ng-template>\n<ng-template #customTextBubble>\n</ng-template>\n<ng-template #stickerBubble let-message>\n  <cometchat-image-bubble [src]=\"getSticker(message)\"\n    [imageStyle]=\"imageBubbleStyle\"></cometchat-image-bubble>\n\n</ng-template>\n<ng-template #whiteboardBubble let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\"\n    [iconAlignment]=\"documentBubbleAlignment\"\n    [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\"\n    [ccClicked]=\"launchCollaborativeWhiteboardDocument\"\n    [iconURL]=\"whiteboardIconURL\" [title]=\"whiteboardTitle\"\n    [buttonText]=\"whiteboardButtonText\"\n    [subtitle]=\"whiteboardSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #documentBubble let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\"\n    [iconAlignment]=\"documentBubbleAlignment\"\n    [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\"\n    [ccClicked]=\"launchCollaborativeWhiteboardDocument\"\n    [iconURL]=\"documentIconURL\" [title]=\"documentTitle\"\n    [buttonText]=\"documentButtonText\"\n    [subtitle]=\"documentSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #directCalling let-message>\n  <cometchat-document-bubble [hideSeparator]=\"true\"\n    [iconAlignment]=\"callBubbleAlignment\"\n    [documentStyle]=\"getCallBubbleStyle(message)\" [URL]=\"getSessionId(message)\"\n    [ccClicked]=\"startDirectCall\" [iconURL]=\"directCallIconURL\"\n    [title]=\"getCallBubbleTitle(message)\" [buttonText]=\"joinCallButtonText\"\n    *ngIf=\"message.category == 'custom'\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #schedulerBubble let-message>\n  <cometchat-scheduler-bubble [schedulerMessage]=\"message\"\n    [loggedInUser]=\"loggedInUser\"\n    [schedulerBubbleStyle]=\"getSchedulerBubbleStyle(message)\"></cometchat-scheduler-bubble>\n\n</ng-template>\n<ng-template #pollBubble let-message>\n  <polls-bubble [pollStyle]=\"pollBubbleStyle\"\n    [pollQuestion]=\"getPollBubbleData(message,'question')\"\n    [pollId]=\"getPollBubbleData(message,'id')\" [loggedInUser]=\"loggedInUser\"\n    [senderUid]=\"getPollBubbleData(message)\"\n    [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)\"\n    [bottomView]=\"enableReactions ? reactionView : null\"\n    [leadingView]=\" showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\"\n    [footerView]=\"footerView\" [contentView]=\"contentView\"\n    [id]=\"message?.getId() || message?.getMuid()\"\n    [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"\n    [alignment]=\"threadedAlignment\">\n    <ng-template #contentView>\n      <ng-container\n        *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\">\n      </ng-container>\n    </ng-template>\n    <ng-template #reactionView>\n      <reactions-view *ngIf=\"hasReaction(message)\" [messageObject]=\"message\"\n        [alignment]=\"setBubbleAlignment(message)\" [loggedInUser]=\"loggedInUser\"\n        [reactionsStyle]=\"reactionsStyle(message)\"\n        [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\n            *ngTemplateOutlet=\"getFooterView(message);context:{ $implicit: message }\">\n          </ng-container>\n        </div>\n        <ng-template #bubbleFooter>\n          <div class=\"cc-message-list__bubble-date\"\n            *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n            <cometchat-date [timestamp]=\"message?.getSentAt()\"\n              [dateStyle]=\"bubbleDateStyle\" [pattern]=\"datePattern\">\n            </cometchat-date>\n          </div>\n          <div\n            *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() ||this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\"\n            class=\"cc-message-list__receipt\">\n            <cometchat-receipt [receipt]=\"getMessageReceipt(message)\"\n              [receiptStyle]=\"receiptStyle\" [waitIcon]=\"waitIcon\"\n              [sentIcon]=\"sentIcon\" [deliveredIcon]=\"\"\n              [readIcon]=\"deliveredIcon\"\n              [errorIcon]=\"errorIcon\"></cometchat-receipt>\n          </div>\n        </ng-template>\n      </div>\n    </ng-template>\n    <ng-template #leadingView>\n      <div\n        *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\">\n        <cometchat-avatar [name]=\"message?.getSender()?.getName()\"\n          [avatarStyle]=\"avatarStyle\"\n          [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\n          *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\">\n        </ng-container>\n      </div>\n      <ng-template #defaultHeader>\n        <div class=\"cc-message-list__bubble-header\"\n          *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n          <cometchat-label [text]=\"message?.getSender()?.getName()\"\n            [labelStyle]=\"labelStyle\"></cometchat-label>\n          <cometchat-date [pattern]=\"datePattern\"\n            [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\"\n            *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\n  [placement]=\"keyboardAlignment\">\n  <cometchat-emoji-keyboard (cc-emoji-clicked)=\"addReaction($event)\"\n    slot=\"content\"></cometchat-emoji-keyboard>\n</cometchat-popover>\n<cometchat-backdrop *ngIf=\"openConfirmDialog\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-confirm-dialog [title]=\"''\" [messageText]=\"warningText\"\n    (cc-confirm-clicked)=\"onConfirmClick()\" [cancelButtonText]=\"cancelText\"\n    [confirmButtonText]=\"confirmText\" (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"confirmDialogStyle\">\n\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-full-screen-viewer (cc-close-clicked)=\"closeImageInFullScreen()\"\n  *ngIf=\"openFullscreenView\" [URL]=\"imageurlToOpen\"\n  [closeIconURL]=\"closeIconURL\" [fullScreenViewerStyle]=\"fullScreenViewerStyle\">\n\n</cometchat-full-screen-viewer>\n\n<!-- ongoing callscreen for direct call -->\n<cometchat-ongoing-call *ngIf=\"showOngoingCall\"\n  [callSettingsBuilder]=\"getCallBuilder()\" [ongoingCallStyle]=\"ongoingCallStyle\"\n  [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)\"\n    [bottomView]=\"enableReactions && hasReaction(message) ? reactionView : null\"\n    [leadingView]=\" showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\"\n    [contentView]=\"contentView\" [id]=\"message?.getId() || message?.getMuid()\"\n    [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"\n    [alignment]=\"messageInfoAlignment\">\n    <ng-template #contentView>\n      <ng-container\n        *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\">\n      </ng-container>\n    </ng-template>\n    <ng-template #reactionView>\n      <reactions-view *ngIf=\"hasReaction(message)\" [messageObject]=\"message\"\n        [alignment]=\"setBubbleAlignment(message)\"\n        [addReactionIconURL]=\"addReactionIconURL\" [loggedInUser]=\"loggedInUser\"\n        [reactionsStyle]=\"reactionsStyle(message)\"></reactions-view>\n    </ng-template>\n    <ng-template #leadingView>\n      <div\n        *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\">\n        <cometchat-avatar [name]=\"message?.getSender()?.getName()\"\n          [avatarStyle]=\"avatarStyle\"\n          [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\n          *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\">\n        </ng-container>\n      </div>\n      <ng-template #defaultHeader>\n        <div class=\"cc-message-list__bubble-header\"\n          *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n          <cometchat-label [text]=\"message?.getSender()?.getName()\"\n            [labelStyle]=\"labelStyle\"></cometchat-label>\n          <cometchat-date [pattern]=\"datePattern\"\n            [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\"\n            *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\n    [closeIconURL]=\"messageInformationConfiguration.closeIconURL\"\n    [loadingStateView]=\"messageInformationConfiguration.loadingStateView\"\n    [errorStateView]=\"messageInformationConfiguration.errorStateView\"\n    [listItemStyle]=\"messageInformationConfiguration.listItemStyle\"\n    [emptyStateView]=\"messageInformationConfiguration.emptyStateView\"\n    [loadingIconURL]=\"messageInformationConfiguration.loadingIconURL\"\n    [readIcon]=\"messageInformationConfiguration.readIcon\"\n    [deliveredIcon]=\"messageInformationConfiguration.deliveredIcon\"\n    [onError]=\"messageInformationConfiguration.onError\"\n    [SubtitleView]=\"messageInformationConfiguration.subtitleView\"\n    [receiptDatePattern]=\"messageInformationConfiguration.receiptDatePattern\"\n    [listItemView]=\"messageInformationConfiguration.listItemView \"\n    [messageInformationStyle]=\"messageInformationConfiguration.messageInformationStyle\"\n    [onClose]=\"messageInformationConfiguration.onClose ??  closeMessageInfoPage\"\n    [bubbleView]=\"messageInformationConfiguration.bubbleView ?? messageinfoBubble\"\n    [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%;display:flex;flex-direction:column;justify-content:space-between;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__conversation-summary{height:100%;position:relative;bottom:0;z-index:1;padding:.1px 14px}.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%;box-sizing:border-box;margin-bottom:1px}.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}.cc_panel_container{border:1px solid #6851d6}cometchat-scheduler-bubble{width:100%}\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\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\n    [ngStyle]=\"{height: showSmartReply || showConversationStarter || showConversationSummary ? '92%' : '100%'}\">\n    <div class=\"cc-message-list__top\" #top>\n    </div>\n    <div class=\"cc-message-list__decorator-message\"\n      *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\"\n          [text]=\"errorStateText\">\n        </cometchat-label>\n        <span class=\"cc-message-list__custom-view--error\"\n          *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\"\n            [dateStyle]=\"dateSeparatorStyle\">\n          </cometchat-date>\n        </span>\n      </div>\n      <div class=\"cc-message-list__date-container\"\n        *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\"\n            [dateStyle]=\"dateSeparatorStyle\">\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\"\n          [bottomView]=\"enableReactions ? reactionView : null\"\n          [headerView]=\"getHeaderView(message) || message?.getCategory() != MessageCategory.action && showHeaderTitle(message) ? bubbleHeader : null\"\n          [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\"\n              [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\"\n                  *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && !message.getDeletedAt() && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n                  <cometchat-date [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\"\n                    [pattern]=\"datePattern\">\n                  </cometchat-date>\n                </div>\n                <div\n                  *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() ||this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\"\n                  class=\"cc-message-list__receipt\">\n                  <cometchat-receipt [receipt]=\"getMessageReceipt(message)\" [receiptStyle]=\"receiptStyle\"\n                    [waitIcon]=\"waitIcon\" [sentIcon]=\"sentIcon\" [deliveredIcon]=\"deliveredIcon\" [readIcon]=\"readIcon\"\n                    [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\"\n                [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\"\n                *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\"\n                  *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)\"\n                [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\"\n    [ngStyle]=\"{bottom: showSmartReply || footerView || showConversationStarter || showConversationSummary  ? '20%' : '13%'}\">\n    <cometchat-button [text]=\"newMessageCount\" [buttonStyle]=\"unreadMessagesStyle\"\n      (cc-button-clicked)=\"scrollToBottom()\"></cometchat-button>\n  </div>\n  <div class=\"cc-message-list__footer-view\" [ngStyle]=\"{height:  'auto'}\">\n\n    <div *ngIf=\"footerView;else footer\">\n      <ng-container *ngTemplateOutlet=\"footerView\">\n      </ng-container>\n    </div>\n    <ng-template #footer>\n\n      <div class=\"cc-message-list__smart-replies\" *ngIf=\"!showConversationStarter && showSmartReply && getReplies()\">\n        <smart-replies [smartReplyStyle]=\"smartReplyStyle\" [replies]=\"getReplies()\"\n          (cc-reply-clicked)=\"sendReply($event)\" (cc-close-clicked)=\"closeSmartReply()\">\n        </smart-replies>\n      </div>\n\n\n      <div class=\"cc-message-list__conversation-starters\" *ngIf=\"enableConversationStarter && showConversationStarter\">\n        <cometchat-ai-card [state]=\"conversationStarterState\" [loadingStateText]=\"starterLoadingStateText\"\n          [emptyStateText]=\"starterEmptyStateText\" [errorStateText]=\"errorStateText\">\n          <smart-replies *ngIf=\"conversationStarterState == states.loaded && !parentMessageId\"\n            [smartReplyStyle]=\"conversationStarterStyle\" [replies]=\"conversationStarterReplies\" slot=\"loadedView\"\n            (cc-reply-clicked)=\"sendConversationStarter($event)\" [closeIconURL]=\"''\">\n          </smart-replies>\n        </cometchat-ai-card>\n      </div>\n\n      <div class=\"cc-message-list__conversation-summary\" *ngIf=\"enableConversationSummary && showConversationSummary\">\n\n        <cometchat-ai-card [state]=\"conversationSummaryState\" [loadingStateText]=\"summaryLoadingStateText\"\n          [emptyStateText]=\"summaryEmptyStateText\" [errorStateText]=\"errorStateText\" [errorIconURL]=\"aiErrorIcon\"\n          [emptyIconURL]=\"aiEmptyIcon\">\n          <cometchat-panel *ngIf=\"conversationSummaryState == states.loaded && !parentMessageId\" slot=\"loadedView\"\n            [panelStyle]=\"conversationSummaryStyle\" title=\"Conversation Summary\" [text]=\"conversationSummary\"\n            (cc-close-clicked)=\"closeConversationSummary()\">\n          </cometchat-panel>\n        </cometchat-ai-card>\n\n      </div>\n\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\"\n    [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"message?.message\"></cometchat-text-bubble>\n  <cometchat-text-bubble *ngIf=\"message?.getDeletedAt()\" [textStyle]=\"setTextBubbleStyle(message)\"\n    [text]=\"localize('MESSAGE_IS_DELETED')\"></cometchat-text-bubble>\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 [linkPreviewStyle]=\"linkPreviewStyle\" (cc-link-clicked)=\"openLinkURL($event)\"\n    *ngIf=\"!message?.getDeletedAt() && getLinkPreview(message) && enableLinkPreview\"\n    [title]=\"getLinkPreviewDetails('title',message)\" [description]=\"getLinkPreviewDetails('description',message)\"\n    [URL]=\"getLinkPreviewDetails('url',message)\" [image]=\"getLinkPreviewDetails('image',message)\"\n    [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)\"\n    [messageTranslationStyle]=\"setTranslationStyle(message)\" [translatedText]=\"isTranslated(message)\">\n    <cometchat-text-bubble *ngIf=\" !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n      [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\"\n    [subtitle]=\"localize('SHARED_FILE')\" [title]=\"message?.data?.attachments ? message?.data?.attachments[0]?.name: ''\"\n    [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\"\n    *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.audio\"\n    [iconURL]=\"getCallTypeIcon(message)\" [buttonStyle]=\"callStatusStyle(message)\"\n    [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n  <cometchat-audio-bubble *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\"\n    [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\"\n    *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.video\"\n    [iconURL]=\"getCallTypeIcon(message)\" [buttonStyle]=\"callStatusStyle(message)\"\n    [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n\n  <cometchat-video-bubble *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\"\n    [videoStyle]=\"videoBubbleStyle\" [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\"\n    [poster]=\" getImageThumbnail(message)\"></cometchat-video-bubble>\n</ng-template>\n<ng-template #imageBubble let-message>\n  <image-moderation (cc-show-dialog)=\"openWarningDialog($event)\"\n    *ngIf=\"!message.getDeletedAt() && enableImageModeration\" [message]=\"message\"\n    [imageModerationStyle]=\"imageModerationStyle\">\n    <cometchat-image-bubble (cc-image-clicked)=\"openImageInFullScreen(message)\" [imageStyle]=\"imageBubbleStyle\"\n      [src]=\" getImageThumbnail(message)\" [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n  </image-moderation>\n  <cometchat-image-bubble [imageStyle]=\"imageBubbleStyle\" (cc-image-clicked)=\"openImageInFullScreen(message)\"\n    *ngIf=\"!message.getDeletedAt() && !enableImageModeration\" [src]=\" getImageThumbnail(message)\"\n    [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n</ng-template>\n<ng-template #formBubble let-message>\n  <cometchat-form-bubble [message]=\"message\" [formBubbleStyle]=\"getFormMessageBubbleStyle()\"></cometchat-form-bubble>\n</ng-template>\n<ng-template #cardBubble let-message>\n  <cometchat-card-bubble [message]=\"message\" [cardBubbleStyle]=\"getCardMessageBubbleStyle()\"></cometchat-card-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\"\n    [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\"\n    [ccClicked]=\"launchCollaborativeWhiteboardDocument\" [iconURL]=\"whiteboardIconURL\" [title]=\"whiteboardTitle\"\n    [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\"\n    [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\"\n    [ccClicked]=\"launchCollaborativeWhiteboardDocument\" [iconURL]=\"documentIconURL\" [title]=\"documentTitle\"\n    [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\"\n    [documentStyle]=\"getCallBubbleStyle(message)\" [URL]=\"getSessionId(message)\" [ccClicked]=\"startDirectCall\"\n    [iconURL]=\"directCallIconURL\" [title]=\"getCallBubbleTitle(message)\"\n    [buttonText]=\"joinCallButtonText\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #pollBubble let-message>\n  <polls-bubble [pollStyle]=\"pollBubbleStyle\" [pollQuestion]=\"getPollBubbleData(message,'question')\"\n    [pollId]=\"getPollBubbleData(message,'id')\" [loggedInUser]=\"loggedInUser\" [senderUid]=\"getPollBubbleData(message)\"\n    [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\"\n    [leadingView]=\" showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\" [footerView]=\"footerView\"\n    [contentView]=\"contentView\" [id]=\"message?.getId() || message?.getMuid()\"\n    [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        [loggedInUser]=\"loggedInUser\" [reactionsStyle]=\"reactionsStyle(message)\"\n        [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\"\n            *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\n            *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() ||this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\"\n            class=\"cc-message-list__receipt\">\n            <cometchat-receipt [receipt]=\"getMessageReceipt(message)\" [receiptStyle]=\"receiptStyle\"\n              [waitIcon]=\"waitIcon\" [sentIcon]=\"sentIcon\" [deliveredIcon]=\"\" [readIcon]=\"deliveredIcon\"\n              [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\"\n          [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\"\n          *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\"\n            *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()\"\n    [cancelButtonText]=\"cancelText\" [confirmButtonText]=\"confirmText\" (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"confirmDialogStyle\">\n\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-full-screen-viewer (cc-close-clicked)=\"closeImageInFullScreen()\" *ngIf=\"openFullscreenView\"\n  [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()\"\n  [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)\"\n    [bottomView]=\"enableReactions && hasReaction(message) ? reactionView : null\"\n    [leadingView]=\" showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\" [contentView]=\"contentView\"\n    [id]=\"message?.getId() || message?.getMuid()\" [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"\n    [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)\"\n        [addReactionIconURL]=\"addReactionIconURL\" [loggedInUser]=\"loggedInUser\"\n        [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\"\n          [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\"\n          *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\"\n            *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\"\n    [loadingStateView]=\"messageInformationConfiguration.loadingStateView\"\n    [errorStateView]=\"messageInformationConfiguration.errorStateView\"\n    [listItemStyle]=\"messageInformationConfiguration.listItemStyle\"\n    [emptyStateView]=\"messageInformationConfiguration.emptyStateView\"\n    [loadingIconURL]=\"messageInformationConfiguration.loadingIconURL\"\n    [readIcon]=\"messageInformationConfiguration.readIcon\"\n    [deliveredIcon]=\"messageInformationConfiguration.deliveredIcon\" [onError]=\"messageInformationConfiguration.onError\"\n    [SubtitleView]=\"messageInformationConfiguration.subtitleView\"\n    [receiptDatePattern]=\"messageInformationConfiguration.receiptDatePattern\"\n    [listItemView]=\"messageInformationConfiguration.listItemView \"\n    [messageInformationStyle]=\"messageInformationConfiguration.messageInformationStyle\"\n    [onClose]=\"messageInformationConfiguration.onClose ??  closeMessageInfoPage\"\n    [bubbleView]=\"messageInformationConfiguration.bubbleView ?? messageinfoBubble\" [message]=\"messageInfoObject\">\n\n  </cometchat-message-information>\n</cometchat-backdrop>", styles: [".cc-message-list{height:100%;width:100%;overflow-y:auto;overflow-x:hidden;position:relative}.cc-message-list__wrapper{height:100%;width:100%;display:flex;flex-direction:column;justify-content:space-between;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__conversation-summary{height:100%;position:relative;bottom:0;z-index:1;padding:.1px 14px}.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%;box-sizing:border-box;margin-bottom:1px}.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}.cc_panel_container{border:1px solid #6851d6}\n"] }]
+            args: [{ selector: "cometchat-message-list", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-message-list__wrapper\" [ngStyle]=\"wrapperStyle()\"\n  *ngIf=\"!openContactsView\">\n\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\n    [ngStyle]=\"{height: showSmartReply || showConversationStarter || showConversationSummary ? '92%' : '100%'}\">\n    <div class=\"cc-message-list__top\" #top>\n    </div>\n    <div class=\"cc-message-list__decorator-message\"\n      *ngIf=\"state == states.loading || state == states.error  || state == states.empty \"\n      [ngStyle]=\"messageContainerStyle()\">\n      <div class=\"cc-message-list__loading-view\"\n        *ngIf=\"state == states.loading \">\n        <cometchat-loader [iconURL]=\"loadingIconURL\"\n          [loaderStyle]=\"loadingStyle()\">\n        </cometchat-loader>\n        <span class=\"cc-message-list__customview--loading\"\n          *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\"\n        *ngIf=\"state == states.error  && !hideError \">\n        <cometchat-label [labelStyle]=\"errorStyle()\"\n          *ngIf=\"state == states.error  && !hideError && !errorStateView\"\n          [text]=\"errorStateText\">\n        </cometchat-label>\n        <span class=\"cc-message-list__custom-view--error\"\n          *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\"\n          *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\"\n      *ngFor=\"let message of messagesList; let i = index\">\n      <div class=\"cc-message-list__date-container\"\n        *ngIf=\"(i === 0) && message?.getSentAt()\">\n        <span class=\"cc-message-list__date\">\n          <cometchat-date [timestamp]=\"message!.getSentAt()\"\n            [pattern]=\"DateSeparatorPattern\" [dateStyle]=\"dateSeparatorStyle\">\n          </cometchat-date>\n        </span>\n      </div>\n      <div class=\"cc-message-list__date-container\"\n        *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()\"\n            [pattern]=\"DateSeparatorPattern\" [dateStyle]=\"dateSeparatorStyle\">\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)\"\n          [leadingView]=\" showAvatar ? leadingView : null\"\n          [bottomView]=\"enableReactions ? reactionView : null\"\n          [headerView]=\"getHeaderView(message) || message?.getCategory() != MessageCategory.action && showHeaderTitle(message) ? bubbleHeader : null\"\n          [footerView]=\"footerView\" [contentView]=\"contentView\"\n          [threadView]=\"threadView\"\n          [id]=\"message?.getId() || message?.getMuid()\"\n          [options]=\"setMessageOptions(message)\"\n          [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"\n          [alignment]=\"setBubbleAlignment(message)\">\n          <ng-template #contentView>\n            <ng-container\n              *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\">\n            </ng-container>\n          </ng-template>\n          <ng-template #reactionView>\n            <reactions-view *ngIf=\"hasReaction(message)\"\n              [messageObject]=\"message\"\n              [alignment]=\"setBubbleAlignment(message)\"\n              [addReactionIconURL]=\"addReactionIconURL\"\n              [loggedInUser]=\"loggedInUser\"\n              [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\n                  *ngTemplateOutlet=\"getFooterView(message);context:{ $implicit: message }\">\n                </ng-container>\n              </div>\n              <ng-template #bubbleFooter>\n                <div class=\"cc-message-list__bubble-date\"\n                  *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && !message.getDeletedAt() && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n                  <cometchat-date [timestamp]=\"message?.getSentAt()\"\n                    [dateStyle]=\"bubbleDateStyle\" [pattern]=\"datePattern\">\n                  </cometchat-date>\n                </div>\n                <div\n                  *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() ||this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\"\n                  class=\"cc-message-list__receipt\">\n                  <cometchat-receipt [receipt]=\"getMessageReceipt(message)\"\n                    [receiptStyle]=\"receiptStyle\" [waitIcon]=\"waitIcon\"\n                    [sentIcon]=\"sentIcon\" [deliveredIcon]=\"deliveredIcon\"\n                    [readIcon]=\"readIcon\"\n                    [errorIcon]=\"errorIcon\"></cometchat-receipt>\n                </div>\n              </ng-template>\n            </div>\n          </ng-template>\n          <ng-template #leadingView>\n            <div\n              *ngIf=\" message?.getCategory() != MessageCategory.action  && showHeaderTitle(message)\">\n              <cometchat-avatar [name]=\"message?.getSender()?.getName()\"\n                [avatarStyle]=\"avatarStyle\"\n                [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\n                *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\">\n              </ng-container>\n            </div>\n            <ng-template #defaultHeader>\n              <div class=\"cc-message-list__bubble-header\"\n                *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n                <cometchat-label [text]=\"message?.getSender()?.getName()\"\n                  [labelStyle]=\"labelStyle\"></cometchat-label>\n                <cometchat-date [pattern]=\"datePattern\"\n                  [timestamp]=\"message?.getSentAt()\"\n                  [dateStyle]=\"bubbleDateStyle\"\n                  *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\"\n              *ngIf=\"message?.getReplyCount() && !message.getDeletedAt()\">\n              <cometchat-divider\n                [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n              <cometchat-button [text]=\"getThreadCount(message)\"\n                [buttonStyle]=\"getThreadViewStyle(message)\"\n                [iconURL]=\"threadOpenIcon\"\n                (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\"\n    *ngIf=\"UnreadCount && UnreadCount.length > 0 && !isOnBottom\"\n    [ngStyle]=\"{bottom: showSmartReply || footerView || showConversationStarter || showConversationSummary  ? '20%' : '13%'}\">\n    <cometchat-button [text]=\"newMessageCount\"\n      [buttonStyle]=\"unreadMessagesStyle\"\n      (cc-button-clicked)=\"scrollToBottom()\"></cometchat-button>\n  </div>\n  <div class=\"cc-message-list__footer-view\" [ngStyle]=\"{height:  'auto'}\">\n\n    <div *ngIf=\"footerView;else footer\">\n      <ng-container *ngTemplateOutlet=\"footerView\">\n      </ng-container>\n    </div>\n    <ng-template #footer>\n\n      <div class=\"cc-message-list__smart-replies\"\n        *ngIf=\"!showConversationStarter && showSmartReply && getReplies()\">\n        <smart-replies [smartReplyStyle]=\"smartReplyStyle\"\n          [replies]=\"getReplies()\" (cc-reply-clicked)=\"sendReply($event)\"\n          (cc-close-clicked)=\"closeSmartReply()\">\n        </smart-replies>\n      </div>\n\n\n      <div class=\"cc-message-list__conversation-starters\"\n        *ngIf=\"enableConversationStarter && showConversationStarter\">\n        <cometchat-ai-card [state]=\"conversationStarterState\"\n          [loadingStateText]=\"starterLoadingStateText\"\n          [emptyStateText]=\"starterEmptyStateText\"\n          [errorStateText]=\"errorStateText\">\n          <smart-replies\n            *ngIf=\"conversationStarterState == states.loaded && !parentMessageId\"\n            [smartReplyStyle]=\"conversationStarterStyle\"\n            [replies]=\"conversationStarterReplies\" slot=\"loadedView\"\n            (cc-reply-clicked)=\"sendConversationStarter($event)\"\n            [closeIconURL]=\"''\">\n          </smart-replies>\n        </cometchat-ai-card>\n      </div>\n\n      <div class=\"cc-message-list__conversation-summary\"\n        *ngIf=\"enableConversationSummary && showConversationSummary\">\n\n        <cometchat-ai-card [state]=\"conversationSummaryState\"\n          [loadingStateText]=\"summaryLoadingStateText\"\n          [emptyStateText]=\"summaryEmptyStateText\"\n          [errorStateText]=\"errorStateText\" [errorIconURL]=\"aiErrorIcon\"\n          [emptyIconURL]=\"aiEmptyIcon\">\n          <cometchat-panel\n            *ngIf=\"conversationSummaryState == states.loaded && !parentMessageId\"\n            slot=\"loadedView\" [panelStyle]=\"conversationSummaryStyle\"\n            title=\"Conversation Summary\" [text]=\"conversationSummary\"\n            (cc-close-clicked)=\"closeConversationSummary()\">\n          </cometchat-panel>\n        </cometchat-ai-card>\n\n      </div>\n\n    </ng-template>\n  </div>\n\n</div>\n<!-- default bubbles -->\n<ng-template #textBubble let-message>\n  <cometchat-text-bubble\n    *ngIf=\"message?.type == MessageTypesConstant.groupMember\"\n    [textStyle]=\"setTextBubbleStyle(message)\"\n    [text]=\"message?.message\"></cometchat-text-bubble>\n  <cometchat-text-bubble *ngIf=\"message?.getDeletedAt()\"\n    [textStyle]=\"setTextBubbleStyle(message)\"\n    [text]=\"localize('MESSAGE_IS_DELETED')\"></cometchat-text-bubble>\n  <cometchat-text-bubble\n    *ngIf=\"!isTranslated(message) && !getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n    [textStyle]=\"setTextBubbleStyle(message)\"\n    [text]=\"getTextMessage(message)\"></cometchat-text-bubble>\n  <link-preview [linkPreviewStyle]=\"linkPreviewStyle\"\n    (cc-link-clicked)=\"openLinkURL($event)\"\n    *ngIf=\"!message?.getDeletedAt() && getLinkPreview(message) && enableLinkPreview\"\n    [title]=\"getLinkPreviewDetails('title',message)\"\n    [description]=\"getLinkPreviewDetails('description',message)\"\n    [URL]=\"getLinkPreviewDetails('url',message)\"\n    [image]=\"getLinkPreviewDetails('image',message)\"\n    [favIconURL]=\"getLinkPreviewDetails('favicon',message)\">\n    <cometchat-text-bubble\n      *ngIf=\"!isTranslated(message) && getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n      [textStyle]=\"setTextBubbleStyle(message)\"\n      [text]=\"getTextMessage(message)\"></cometchat-text-bubble>\n  </link-preview>\n  <message-translation-bubble [alignment]=\"getBubbleAlignment(message)\"\n    *ngIf=\"isTranslated(message)\"\n    [messageTranslationStyle]=\"setTranslationStyle(message)\"\n    [translatedText]=\"isTranslated(message)\">\n    <cometchat-text-bubble\n      *ngIf=\" !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n      [textStyle]=\"setTextBubbleStyle(message)\"\n      [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)\"\n    [downloadIconURL]=\"downloadIconURL\" [subtitle]=\"localize('SHARED_FILE')\"\n    [title]=\"message?.data?.attachments ? message?.data?.attachments[0]?.name: ''\"\n    [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\"\n    *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.audio\"\n    [iconURL]=\"getCallTypeIcon(message)\"\n    [buttonStyle]=\"callStatusStyle(message)\"\n    [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n  <cometchat-audio-bubble\n    *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\"\n    [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\">\n  </cometchat-audio-bubble>\n</ng-template>\n<ng-template #videoBubble let-message>\n  <cometchat-icon-button [disabled]=\"true\"\n    *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.video\"\n    [iconURL]=\"getCallTypeIcon(message)\"\n    [buttonStyle]=\"callStatusStyle(message)\"\n    [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n\n  <cometchat-video-bubble\n    *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\"\n    [videoStyle]=\"videoBubbleStyle\"\n    [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\"\n    [poster]=\" getImageThumbnail(message)\"></cometchat-video-bubble>\n</ng-template>\n<ng-template #imageBubble let-message>\n  <image-moderation (cc-show-dialog)=\"openWarningDialog($event)\"\n    *ngIf=\"!message.getDeletedAt() && enableImageModeration\" [message]=\"message\"\n    [imageModerationStyle]=\"imageModerationStyle\">\n    <cometchat-image-bubble (cc-image-clicked)=\"openImageInFullScreen(message)\"\n      [imageStyle]=\"imageBubbleStyle\" [src]=\" getImageThumbnail(message)\"\n      [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n  </image-moderation>\n  <cometchat-image-bubble [imageStyle]=\"imageBubbleStyle\"\n    (cc-image-clicked)=\"openImageInFullScreen(message)\"\n    *ngIf=\"!message.getDeletedAt() && !enableImageModeration\"\n    [src]=\" getImageThumbnail(message)\"\n    [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n</ng-template>\n<ng-template #formBubble let-message>\n  <cometchat-form-bubble [message]=\"message\"\n    [formBubbleStyle]=\"getFormMessageBubbleStyle()\"></cometchat-form-bubble>\n</ng-template>\n<ng-template #cardBubble let-message>\n  <cometchat-card-bubble [message]=\"message\"\n    [cardBubbleStyle]=\"getCardMessageBubbleStyle()\"></cometchat-card-bubble>\n</ng-template>\n<ng-template #customTextBubble>\n</ng-template>\n<ng-template #stickerBubble let-message>\n  <cometchat-image-bubble [src]=\"getSticker(message)\"\n    [imageStyle]=\"imageBubbleStyle\"></cometchat-image-bubble>\n\n</ng-template>\n<ng-template #whiteboardBubble let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\"\n    [iconAlignment]=\"documentBubbleAlignment\"\n    [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\"\n    [ccClicked]=\"launchCollaborativeWhiteboardDocument\"\n    [iconURL]=\"whiteboardIconURL\" [title]=\"whiteboardTitle\"\n    [buttonText]=\"whiteboardButtonText\"\n    [subtitle]=\"whiteboardSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #documentBubble let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\"\n    [iconAlignment]=\"documentBubbleAlignment\"\n    [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\"\n    [ccClicked]=\"launchCollaborativeWhiteboardDocument\"\n    [iconURL]=\"documentIconURL\" [title]=\"documentTitle\"\n    [buttonText]=\"documentButtonText\"\n    [subtitle]=\"documentSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #directCalling let-message>\n  <cometchat-document-bubble [hideSeparator]=\"true\"\n    [iconAlignment]=\"callBubbleAlignment\"\n    [documentStyle]=\"getCallBubbleStyle(message)\" [URL]=\"getSessionId(message)\"\n    [ccClicked]=\"startDirectCall\" [iconURL]=\"directCallIconURL\"\n    [title]=\"getCallBubbleTitle(message)\" [buttonText]=\"joinCallButtonText\"\n    *ngIf=\"message.category == 'custom'\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #schedulerBubble let-message>\n  <cometchat-scheduler-bubble [schedulerMessage]=\"message\"\n    [loggedInUser]=\"loggedInUser\"\n    [schedulerBubbleStyle]=\"getSchedulerBubbleStyle(message)\"></cometchat-scheduler-bubble>\n\n</ng-template>\n<ng-template #pollBubble let-message>\n  <polls-bubble [pollStyle]=\"pollBubbleStyle\"\n    [pollQuestion]=\"getPollBubbleData(message,'question')\"\n    [pollId]=\"getPollBubbleData(message,'id')\" [loggedInUser]=\"loggedInUser\"\n    [senderUid]=\"getPollBubbleData(message)\"\n    [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)\"\n    [bottomView]=\"enableReactions ? reactionView : null\"\n    [leadingView]=\" showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\"\n    [footerView]=\"footerView\" [contentView]=\"contentView\"\n    [id]=\"message?.getId() || message?.getMuid()\"\n    [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"\n    [alignment]=\"threadedAlignment\">\n    <ng-template #contentView>\n      <ng-container\n        *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\">\n      </ng-container>\n    </ng-template>\n    <ng-template #reactionView>\n      <reactions-view *ngIf=\"hasReaction(message)\" [messageObject]=\"message\"\n        [alignment]=\"setBubbleAlignment(message)\" [loggedInUser]=\"loggedInUser\"\n        [reactionsStyle]=\"reactionsStyle(message)\"\n        [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\n            *ngTemplateOutlet=\"getFooterView(message);context:{ $implicit: message }\">\n          </ng-container>\n        </div>\n        <ng-template #bubbleFooter>\n          <div class=\"cc-message-list__bubble-date\"\n            *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n            <cometchat-date [timestamp]=\"message?.getSentAt()\"\n              [dateStyle]=\"bubbleDateStyle\" [pattern]=\"datePattern\">\n            </cometchat-date>\n          </div>\n          <div\n            *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() ||this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\"\n            class=\"cc-message-list__receipt\">\n            <cometchat-receipt [receipt]=\"getMessageReceipt(message)\"\n              [receiptStyle]=\"receiptStyle\" [waitIcon]=\"waitIcon\"\n              [sentIcon]=\"sentIcon\" [deliveredIcon]=\"\"\n              [readIcon]=\"deliveredIcon\"\n              [errorIcon]=\"errorIcon\"></cometchat-receipt>\n          </div>\n        </ng-template>\n      </div>\n    </ng-template>\n    <ng-template #leadingView>\n      <div\n        *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\">\n        <cometchat-avatar [name]=\"message?.getSender()?.getName()\"\n          [avatarStyle]=\"avatarStyle\"\n          [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\n          *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\">\n        </ng-container>\n      </div>\n      <ng-template #defaultHeader>\n        <div class=\"cc-message-list__bubble-header\"\n          *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n          <cometchat-label [text]=\"message?.getSender()?.getName()\"\n            [labelStyle]=\"labelStyle\"></cometchat-label>\n          <cometchat-date [pattern]=\"datePattern\"\n            [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\"\n            *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\n  [placement]=\"keyboardAlignment\">\n  <cometchat-emoji-keyboard (cc-emoji-clicked)=\"addReaction($event)\"\n    slot=\"content\"></cometchat-emoji-keyboard>\n</cometchat-popover>\n<cometchat-backdrop *ngIf=\"openConfirmDialog\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-confirm-dialog [title]=\"''\" [messageText]=\"warningText\"\n    (cc-confirm-clicked)=\"onConfirmClick()\" [cancelButtonText]=\"cancelText\"\n    [confirmButtonText]=\"confirmText\" (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"confirmDialogStyle\">\n\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-full-screen-viewer (cc-close-clicked)=\"closeImageInFullScreen()\"\n  *ngIf=\"openFullscreenView\" [URL]=\"imageurlToOpen\"\n  [closeIconURL]=\"closeIconURL\" [fullScreenViewerStyle]=\"fullScreenViewerStyle\">\n\n</cometchat-full-screen-viewer>\n\n<!-- ongoing callscreen for direct call -->\n<cometchat-ongoing-call *ngIf=\"showOngoingCall\"\n  [callSettingsBuilder]=\"getCallBuilder()\" [ongoingCallStyle]=\"ongoingCallStyle\"\n  [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)\"\n    [bottomView]=\"enableReactions && hasReaction(message) ? reactionView : null\"\n    [leadingView]=\" showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\"\n    [contentView]=\"contentView\" [id]=\"message?.getId() || message?.getMuid()\"\n    [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"\n    [alignment]=\"messageInfoAlignment\">\n    <ng-template #contentView>\n      <ng-container\n        *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\">\n      </ng-container>\n    </ng-template>\n    <ng-template #reactionView>\n      <reactions-view *ngIf=\"hasReaction(message)\" [messageObject]=\"message\"\n        [alignment]=\"setBubbleAlignment(message)\"\n        [addReactionIconURL]=\"addReactionIconURL\" [loggedInUser]=\"loggedInUser\"\n        [reactionsStyle]=\"reactionsStyle(message)\"></reactions-view>\n    </ng-template>\n    <ng-template #leadingView>\n      <div\n        *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\">\n        <cometchat-avatar [name]=\"message?.getSender()?.getName()\"\n          [avatarStyle]=\"avatarStyle\"\n          [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\n          *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\">\n        </ng-container>\n      </div>\n      <ng-template #defaultHeader>\n        <div class=\"cc-message-list__bubble-header\"\n          *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n          <cometchat-label [text]=\"message?.getSender()?.getName()\"\n            [labelStyle]=\"labelStyle\"></cometchat-label>\n          <cometchat-date [pattern]=\"datePattern\"\n            [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\"\n            *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\n    [closeIconURL]=\"messageInformationConfiguration.closeIconURL\"\n    [loadingStateView]=\"messageInformationConfiguration.loadingStateView\"\n    [errorStateView]=\"messageInformationConfiguration.errorStateView\"\n    [listItemStyle]=\"messageInformationConfiguration.listItemStyle\"\n    [emptyStateView]=\"messageInformationConfiguration.emptyStateView\"\n    [loadingIconURL]=\"messageInformationConfiguration.loadingIconURL\"\n    [readIcon]=\"messageInformationConfiguration.readIcon\"\n    [deliveredIcon]=\"messageInformationConfiguration.deliveredIcon\"\n    [onError]=\"messageInformationConfiguration.onError\"\n    [SubtitleView]=\"messageInformationConfiguration.subtitleView\"\n    [receiptDatePattern]=\"messageInformationConfiguration.receiptDatePattern\"\n    [listItemView]=\"messageInformationConfiguration.listItemView \"\n    [messageInformationStyle]=\"messageInformationConfiguration.messageInformationStyle\"\n    [onClose]=\"messageInformationConfiguration.onClose ??  closeMessageInfoPage\"\n    [bubbleView]=\"messageInformationConfiguration.bubbleView ?? messageinfoBubble\"\n    [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%;display:flex;flex-direction:column;justify-content:space-between;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__conversation-summary{height:100%;position:relative;bottom:0;z-index:1;padding:.1px 14px}.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%;box-sizing:border-box;margin-bottom:1px}.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}.cc_panel_container{border:1px solid #6851d6}cometchat-scheduler-bubble{width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { listScroll: [{
                 type: ViewChild,
                 args: ["listScroll", { static: false }]
@@ -10858,6 +11076,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], directCalling: [{
                 type: ViewChild,
                 args: ["directCalling", { static: false }]
+            }], schedulerBubble: [{
+                type: ViewChild,
+                args: ["schedulerBubble", { static: false }]
             }], pollBubble: [{
                 type: ViewChild,
                 args: ["pollBubble", { static: false }]
@@ -12558,6 +12779,55 @@ class CometChatThreadedMessagesComponent {
             this.onMessageEdited = CometChatMessageEvents.onMessageEdited.subscribe((editedMessage) => {
                 this.updateMessage(editedMessage);
             });
+            this.onTextMessageReceived =
+                CometChatMessageEvents.onTextMessageReceived.subscribe((message) => {
+                    var _a;
+                    if (message.getParentMessageId() && message.getParentMessageId() == ((_a = this.parentMessage) === null || _a === void 0 ? void 0 : _a.getId())) {
+                        this.ref.detectChanges();
+                    }
+                });
+            this.onMediaMessageReceived =
+                CometChatMessageEvents.onMediaMessageReceived.subscribe((message) => {
+                    var _a;
+                    if (message.getParentMessageId() && message.getParentMessageId() == ((_a = this.parentMessage) === null || _a === void 0 ? void 0 : _a.getId())) {
+                        this.ref.detectChanges();
+                    }
+                });
+            this.onCustomMessageReceived =
+                CometChatMessageEvents.onCustomMessageReceived.subscribe((message) => {
+                    var _a;
+                    if (message.getParentMessageId() && message.getParentMessageId() == ((_a = this.parentMessage) === null || _a === void 0 ? void 0 : _a.getId())) {
+                        this.ref.detectChanges();
+                    }
+                });
+            this.onFormMessageReceived =
+                CometChatMessageEvents.onFormMessageReceived.subscribe((message) => {
+                    var _a;
+                    if (message.getParentMessageId() && message.getParentMessageId() == ((_a = this.parentMessage) === null || _a === void 0 ? void 0 : _a.getId())) {
+                        this.ref.detectChanges();
+                    }
+                });
+            this.onSchedulerMessageReceived =
+                CometChatMessageEvents.onSchedulerMessageReceived.subscribe((message) => {
+                    var _a;
+                    if (message.getParentMessageId() && message.getParentMessageId() == ((_a = this.parentMessage) === null || _a === void 0 ? void 0 : _a.getId())) {
+                        this.ref.detectChanges();
+                    }
+                });
+            this.onCardMessageReceived =
+                CometChatMessageEvents.onCardMessageReceived.subscribe((message) => {
+                    var _a;
+                    if (message.getParentMessageId() && message.getParentMessageId() == ((_a = this.parentMessage) === null || _a === void 0 ? void 0 : _a.getId())) {
+                        this.ref.detectChanges();
+                    }
+                });
+            this.onCustomInteractiveMessageReceived =
+                CometChatMessageEvents.onCustomInteractiveMessageReceived.subscribe((message) => {
+                    var _a;
+                    if (message.getParentMessageId() && message.getParentMessageId() == ((_a = this.parentMessage) === null || _a === void 0 ? void 0 : _a.getId())) {
+                        this.ref.detectChanges();
+                    }
+                });
         }
         catch (error) {
             if (this.onError) {
@@ -12598,11 +12868,18 @@ class CometChatThreadedMessagesComponent {
         });
     }
     unsubscribeToEvents() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         (_a = this.ccMessageDeleted) === null || _a === void 0 ? void 0 : _a.unsubscribe();
         (_b = this.ccMessageEdited) === null || _b === void 0 ? void 0 : _b.unsubscribe();
         (_c = this.ccMessageRead) === null || _c === void 0 ? void 0 : _c.unsubscribe();
         (_d = this.ccMessageSent) === null || _d === void 0 ? void 0 : _d.unsubscribe();
+        (_e = this.onCardMessageReceived) === null || _e === void 0 ? void 0 : _e.unsubscribe();
+        (_f = this.onFormMessageReceived) === null || _f === void 0 ? void 0 : _f.unsubscribe();
+        (_g = this.onSchedulerMessageReceived) === null || _g === void 0 ? void 0 : _g.unsubscribe();
+        (_h = this.onTextMessageReceived) === null || _h === void 0 ? void 0 : _h.unsubscribe();
+        (_j = this.onCustomInteractiveMessageReceived) === null || _j === void 0 ? void 0 : _j.unsubscribe();
+        (_k = this.onCustomMessageReceived) === null || _k === void 0 ? void 0 : _k.unsubscribe();
+        (_l = this.onMediaMessageReceived) === null || _l === void 0 ? void 0 : _l.unsubscribe();
     }
     closeView() {
         if (this.onClose) {
@@ -12646,10 +12923,10 @@ 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" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-threaded-messages__wrapper\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-threaded-messages__header\">\n    <div class=\"cc-threaded-messages__title\">\n      <cometchat-label [text]=\"title\"\n        [labelStyle]=\"titleStyle\"></cometchat-label>\n    </div>\n    <div class=\"cc-threaded-messages__close\">\n      <cometchat-button [iconURL]=\"closeIconURL\" [buttonStyle]=\"buttonStyle\"\n        (cc-button-clicked)=\"closeView()\"></cometchat-button>\n    </div>\n  </div>\n  <div class=\"cc-threaded-messages__bubble-view\">\n    <ng-container\n      *ngTemplateOutlet=\"bubbleView; context:{ $implicit: parentMessage }\">\n    </ng-container>\n  </div>\n  <div class=\"cc-threaded-messages__action-view\">\n    <ng-container\n      *ngTemplateOutlet=\"messageActionView; context:{ $implicit: parentMessage }\">\n    </ng-container>\n    <cometchat-button *ngIf=\"!messageActionView\" [text]=\"getThreadCount()\"\n      [buttonStyle]=\"actionButtonStyle\"></cometchat-button>\n  </div>\n  <div class=\"cc-threaded-messages__list\">\n    <cometchat-message-list #messageListRef\n      [parentMessageId]=\"parentMessage!.getId()\"\n      [emptyStateView]=\"messageListConfiguration.emptyStateView\"\n      [loadingStateView]=\"messageListConfiguration.loadingStateView\"\n      [user]=\"user\" [group]=\"group\"\n      [errorStateView]=\"messageListConfiguration.errorStateView\"\n      [disableReceipt]=\"messageListConfiguration.disableReceipt\"\n      [readIcon]=\"messageListConfiguration.readIcon\"\n      [deliveredIcon]=\"messageListConfiguration.deliveredIcon\"\n      [sentIcon]=\"messageListConfiguration.sentIcon\"\n      [waitIcon]=\"messageListConfiguration.waitIcon\"\n      [errorIcon]=\"messageListConfiguration.errorIcon\"\n      [alignment]=\"messageListConfiguration.alignment\"\n      [showAvatar]=\"messageListConfiguration.showAvatar\"\n      [datePattern]=\"messageListConfiguration.datePattern\"\n      [timestampAlignment]=\"messageListConfiguration.timestampAlignment\"\n      [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n      [messageTypes]=\"messageListConfiguration.templates\"\n      [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder || requestBuilder\"\n      [thresholdValue]=\"messageListConfiguration.thresholdValue\"\n      [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick\"\n      [headerView]=\"messageListConfiguration.headerView\"\n      [footerView]=\"messageListConfiguration.footerView\"\n      [avatarStyle]=\"messageListConfiguration.avatarStyle\"\n      [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\"\n      [messageListStyle]=\"messageListConfiguration.messageListStyle\"\n      [onError]=\"messageListConfiguration.onError\">\n    </cometchat-message-list>\n  </div>\n  <div class=\"cc-threaded-messages__composer\">\n    <cometchat-message-composer #messageComposerRef\n      [parentMessageId]=\"parentMessage!.getId()\" [user]=\"user\" [group]=\"group\"\n      [text]=\"messageComposerConfiguration.text\"\n      [headerView]=\"messageComposerConfiguration.headerView\"\n      [onTextChange]=\"messageComposerConfiguration.onTextChange\"\n      [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n      [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\"\n      [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\"\n      [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\"\n      [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n      [sendButtonView]=\"messageComposerConfiguration.sendButtonView\"\n      [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\"\n      [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\"\n      [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\"\n      [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n      [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n      [onError]=\"messageComposerConfiguration.onError\"\n      [actionSheetStyle]=\"messageComposerConfiguration.actionSheetStyle\">\n    </cometchat-message-composer>\n  </div>\n</div>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-threaded-messages__wrapper{display:flex;flex-direction:column;height:100%;overflow-y:auto}.cc-threaded-messages__header{height:8%;width:100%;display:flex;padding:16px;align-items:flex-start}.cc-threaded-messages__close{display:flex;align-items:center}.cc-threaded-messages__title{display:flex;align-items:center;justify-content:center;width:100%}.cc-threaded-messages__bubble-view{width:-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", "aiErrorIcon", "aiEmptyIcon", "alignment", "showAvatar", "datePattern", "timestampAlignment", "DateSeparatorPattern", "templates", "messagesRequestBuilder", "newMessageIndicatorText", "scrollToBottomOnNewMessages", "thresholdValue", "unreadMessageThreshold", "apiConfiguration", "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", "backButtonIconURL", "messageComposerStyle", "onSendButtonClick", "onError", "backdropStyle", "actionSheetStyle", "aiActionSheetStyle", "hideVoiceRecording", "mediaRecorderStyle", "aiOptionsStyle", "aiIconURL", "voiceRecordingIconURL", "voiceRecordingCloseIconURL", "voiceRecordingStartIconURL", "voiceRecordingStopIconURL", "voiceRecordingSubmitIconURL"], outputs: ["childEvent"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CometChatThreadedMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatThreadedMessagesComponent, selector: "cometchat-threaded-messages", inputs: { onClose: "onClose", onError: "onError", parentMessage: "parentMessage", title: "title", closeIconURL: "closeIconURL", bubbleView: "bubbleView", messageActionView: "messageActionView", messageListConfiguration: "messageListConfiguration", 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\"\n        [labelStyle]=\"titleStyle\"></cometchat-label>\n    </div>\n    <div class=\"cc-threaded-messages__close\">\n      <cometchat-button [iconURL]=\"closeIconURL\" [buttonStyle]=\"buttonStyle\"\n        (cc-button-clicked)=\"closeView()\"></cometchat-button>\n    </div>\n  </div>\n  <div class=\"cc-threaded-messages__bubble-view\">\n    <ng-container\n      *ngTemplateOutlet=\"bubbleView; context:{ $implicit: parentMessage }\">\n    </ng-container>\n  </div>\n  <div class=\"cc-threaded-messages__action-view\">\n    <ng-container\n      *ngTemplateOutlet=\"messageActionView; context:{ $implicit: parentMessage }\">\n    </ng-container>\n    <cometchat-button *ngIf=\"!messageActionView\" [text]=\"getThreadCount()\"\n      [buttonStyle]=\"actionButtonStyle\"></cometchat-button>\n  </div>\n  <div class=\"cc-threaded-messages__list\">\n    <cometchat-message-list #messageListRef\n      [parentMessageId]=\"parentMessage!.getId()\"\n      [emptyStateView]=\"messageListConfiguration.emptyStateView\"\n      [loadingStateView]=\"messageListConfiguration.loadingStateView\"\n      [user]=\"user\" [group]=\"group\"\n      [errorStateView]=\"messageListConfiguration.errorStateView\"\n      [disableReceipt]=\"messageListConfiguration.disableReceipt\"\n      [readIcon]=\"messageListConfiguration.readIcon\"\n      [deliveredIcon]=\"messageListConfiguration.deliveredIcon\"\n      [sentIcon]=\"messageListConfiguration.sentIcon\"\n      [waitIcon]=\"messageListConfiguration.waitIcon\"\n      [errorIcon]=\"messageListConfiguration.errorIcon\"\n      [alignment]=\"messageListConfiguration.alignment\"\n      [showAvatar]=\"messageListConfiguration.showAvatar\"\n      [datePattern]=\"messageListConfiguration.datePattern\"\n      [timestampAlignment]=\"messageListConfiguration.timestampAlignment\"\n      [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n      [messageTypes]=\"messageListConfiguration.templates\"\n      [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder || requestBuilder\"\n      [thresholdValue]=\"messageListConfiguration.thresholdValue\"\n      [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick\"\n      [headerView]=\"messageListConfiguration.headerView\"\n      [footerView]=\"messageListConfiguration.footerView\"\n      [avatarStyle]=\"messageListConfiguration.avatarStyle\"\n      [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\"\n      [messageListStyle]=\"messageListConfiguration.messageListStyle\"\n      [onError]=\"messageListConfiguration.onError\">\n    </cometchat-message-list>\n  </div>\n  <div class=\"cc-threaded-messages__composer\">\n    <cometchat-message-composer #messageComposerRef\n      [parentMessageId]=\"parentMessage!.getId()\" [user]=\"user\" [group]=\"group\"\n      [text]=\"messageComposerConfiguration.text\"\n      [headerView]=\"messageComposerConfiguration.headerView\"\n      [onTextChange]=\"messageComposerConfiguration.onTextChange\"\n      [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n      [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\"\n      [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\"\n      [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\"\n      [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n      [sendButtonView]=\"messageComposerConfiguration.sendButtonView\"\n      [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\"\n      [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\"\n      [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\"\n      [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n      [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n      [onError]=\"messageComposerConfiguration.onError\"\n      [actionSheetStyle]=\"messageComposerConfiguration.actionSheetStyle\">\n    </cometchat-message-composer>\n  </div>\n</div>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-threaded-messages__wrapper{display:flex;flex-direction:column;height:100%;overflow-y:auto}.cc-threaded-messages__header{height:8%;width:100%;display:flex;padding:16px;align-items:flex-start}.cc-threaded-messages__close{display:flex;align-items:center}.cc-threaded-messages__title{display:flex;align-items:center;justify-content:center;width:100%}.cc-threaded-messages__bubble-view{width:100%}.cc-threaded-messages__header{flex:0 0 auto}.cc-threaded-messages__list{flex:1 1 auto;min-height:65%}.cc-threaded-messages__composer{flex:0 0 auto;min-height:80px}\n"], components: [{ type: CometChatMessageListComponent, selector: "cometchat-message-list", inputs: ["hideError", "errorStateView", "loadingStateView", "emptyStateView", "errorStateText", "emptyStateText", "loadingIconURL", "user", "group", "disableReceipt", "disableSoundForMessages", "customSoundForMessages", "readIcon", "deliveredIcon", "sentIcon", "waitIcon", "errorIcon", "aiErrorIcon", "aiEmptyIcon", "alignment", "showAvatar", "datePattern", "timestampAlignment", "DateSeparatorPattern", "templates", "messagesRequestBuilder", "newMessageIndicatorText", "scrollToBottomOnNewMessages", "thresholdValue", "unreadMessageThreshold", "apiConfiguration", "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", "backButtonIconURL", "messageComposerStyle", "onSendButtonClick", "onError", "backdropStyle", "actionSheetStyle", "aiActionSheetStyle", "hideVoiceRecording", "mediaRecorderStyle", "aiOptionsStyle", "aiIconURL", "voiceRecordingIconURL", "voiceRecordingCloseIconURL", "voiceRecordingStartIconURL", "voiceRecordingStopIconURL", "voiceRecordingSubmitIconURL"], outputs: ["childEvent"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatThreadedMessagesComponent, decorators: [{
             type: Component,
-            args: [{ selector: "cometchat-threaded-messages", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-threaded-messages__wrapper\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-threaded-messages__header\">\n    <div class=\"cc-threaded-messages__title\">\n      <cometchat-label [text]=\"title\"\n        [labelStyle]=\"titleStyle\"></cometchat-label>\n    </div>\n    <div class=\"cc-threaded-messages__close\">\n      <cometchat-button [iconURL]=\"closeIconURL\" [buttonStyle]=\"buttonStyle\"\n        (cc-button-clicked)=\"closeView()\"></cometchat-button>\n    </div>\n  </div>\n  <div class=\"cc-threaded-messages__bubble-view\">\n    <ng-container\n      *ngTemplateOutlet=\"bubbleView; context:{ $implicit: parentMessage }\">\n    </ng-container>\n  </div>\n  <div class=\"cc-threaded-messages__action-view\">\n    <ng-container\n      *ngTemplateOutlet=\"messageActionView; context:{ $implicit: parentMessage }\">\n    </ng-container>\n    <cometchat-button *ngIf=\"!messageActionView\" [text]=\"getThreadCount()\"\n      [buttonStyle]=\"actionButtonStyle\"></cometchat-button>\n  </div>\n  <div class=\"cc-threaded-messages__list\">\n    <cometchat-message-list #messageListRef\n      [parentMessageId]=\"parentMessage!.getId()\"\n      [emptyStateView]=\"messageListConfiguration.emptyStateView\"\n      [loadingStateView]=\"messageListConfiguration.loadingStateView\"\n      [user]=\"user\" [group]=\"group\"\n      [errorStateView]=\"messageListConfiguration.errorStateView\"\n      [disableReceipt]=\"messageListConfiguration.disableReceipt\"\n      [readIcon]=\"messageListConfiguration.readIcon\"\n      [deliveredIcon]=\"messageListConfiguration.deliveredIcon\"\n      [sentIcon]=\"messageListConfiguration.sentIcon\"\n      [waitIcon]=\"messageListConfiguration.waitIcon\"\n      [errorIcon]=\"messageListConfiguration.errorIcon\"\n      [alignment]=\"messageListConfiguration.alignment\"\n      [showAvatar]=\"messageListConfiguration.showAvatar\"\n      [datePattern]=\"messageListConfiguration.datePattern\"\n      [timestampAlignment]=\"messageListConfiguration.timestampAlignment\"\n      [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n      [messageTypes]=\"messageListConfiguration.templates\"\n      [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder || requestBuilder\"\n      [thresholdValue]=\"messageListConfiguration.thresholdValue\"\n      [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick\"\n      [headerView]=\"messageListConfiguration.headerView\"\n      [footerView]=\"messageListConfiguration.footerView\"\n      [avatarStyle]=\"messageListConfiguration.avatarStyle\"\n      [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\"\n      [messageListStyle]=\"messageListConfiguration.messageListStyle\"\n      [onError]=\"messageListConfiguration.onError\">\n    </cometchat-message-list>\n  </div>\n  <div class=\"cc-threaded-messages__composer\">\n    <cometchat-message-composer #messageComposerRef\n      [parentMessageId]=\"parentMessage!.getId()\" [user]=\"user\" [group]=\"group\"\n      [text]=\"messageComposerConfiguration.text\"\n      [headerView]=\"messageComposerConfiguration.headerView\"\n      [onTextChange]=\"messageComposerConfiguration.onTextChange\"\n      [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n      [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\"\n      [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\"\n      [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\"\n      [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n      [sendButtonView]=\"messageComposerConfiguration.sendButtonView\"\n      [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\"\n      [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\"\n      [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\"\n      [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n      [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n      [onError]=\"messageComposerConfiguration.onError\"\n      [actionSheetStyle]=\"messageComposerConfiguration.actionSheetStyle\">\n    </cometchat-message-composer>\n  </div>\n</div>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-threaded-messages__wrapper{display:flex;flex-direction:column;height:100%;overflow-y:auto}.cc-threaded-messages__header{height:8%;width:100%;display:flex;padding:16px;align-items:flex-start}.cc-threaded-messages__close{display:flex;align-items:center}.cc-threaded-messages__title{display:flex;align-items:center;justify-content:center;width:100%}.cc-threaded-messages__bubble-view{width:-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"] }]
+            args: [{ selector: "cometchat-threaded-messages", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-threaded-messages__wrapper\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-threaded-messages__header\">\n    <div class=\"cc-threaded-messages__title\">\n      <cometchat-label [text]=\"title\"\n        [labelStyle]=\"titleStyle\"></cometchat-label>\n    </div>\n    <div class=\"cc-threaded-messages__close\">\n      <cometchat-button [iconURL]=\"closeIconURL\" [buttonStyle]=\"buttonStyle\"\n        (cc-button-clicked)=\"closeView()\"></cometchat-button>\n    </div>\n  </div>\n  <div class=\"cc-threaded-messages__bubble-view\">\n    <ng-container\n      *ngTemplateOutlet=\"bubbleView; context:{ $implicit: parentMessage }\">\n    </ng-container>\n  </div>\n  <div class=\"cc-threaded-messages__action-view\">\n    <ng-container\n      *ngTemplateOutlet=\"messageActionView; context:{ $implicit: parentMessage }\">\n    </ng-container>\n    <cometchat-button *ngIf=\"!messageActionView\" [text]=\"getThreadCount()\"\n      [buttonStyle]=\"actionButtonStyle\"></cometchat-button>\n  </div>\n  <div class=\"cc-threaded-messages__list\">\n    <cometchat-message-list #messageListRef\n      [parentMessageId]=\"parentMessage!.getId()\"\n      [emptyStateView]=\"messageListConfiguration.emptyStateView\"\n      [loadingStateView]=\"messageListConfiguration.loadingStateView\"\n      [user]=\"user\" [group]=\"group\"\n      [errorStateView]=\"messageListConfiguration.errorStateView\"\n      [disableReceipt]=\"messageListConfiguration.disableReceipt\"\n      [readIcon]=\"messageListConfiguration.readIcon\"\n      [deliveredIcon]=\"messageListConfiguration.deliveredIcon\"\n      [sentIcon]=\"messageListConfiguration.sentIcon\"\n      [waitIcon]=\"messageListConfiguration.waitIcon\"\n      [errorIcon]=\"messageListConfiguration.errorIcon\"\n      [alignment]=\"messageListConfiguration.alignment\"\n      [showAvatar]=\"messageListConfiguration.showAvatar\"\n      [datePattern]=\"messageListConfiguration.datePattern\"\n      [timestampAlignment]=\"messageListConfiguration.timestampAlignment\"\n      [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n      [messageTypes]=\"messageListConfiguration.templates\"\n      [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder || requestBuilder\"\n      [thresholdValue]=\"messageListConfiguration.thresholdValue\"\n      [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick\"\n      [headerView]=\"messageListConfiguration.headerView\"\n      [footerView]=\"messageListConfiguration.footerView\"\n      [avatarStyle]=\"messageListConfiguration.avatarStyle\"\n      [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\"\n      [messageListStyle]=\"messageListConfiguration.messageListStyle\"\n      [onError]=\"messageListConfiguration.onError\">\n    </cometchat-message-list>\n  </div>\n  <div class=\"cc-threaded-messages__composer\">\n    <cometchat-message-composer #messageComposerRef\n      [parentMessageId]=\"parentMessage!.getId()\" [user]=\"user\" [group]=\"group\"\n      [text]=\"messageComposerConfiguration.text\"\n      [headerView]=\"messageComposerConfiguration.headerView\"\n      [onTextChange]=\"messageComposerConfiguration.onTextChange\"\n      [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n      [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\"\n      [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\"\n      [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\"\n      [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n      [sendButtonView]=\"messageComposerConfiguration.sendButtonView\"\n      [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\"\n      [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\"\n      [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\"\n      [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n      [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n      [onError]=\"messageComposerConfiguration.onError\"\n      [actionSheetStyle]=\"messageComposerConfiguration.actionSheetStyle\">\n    </cometchat-message-composer>\n  </div>\n</div>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-threaded-messages__wrapper{display:flex;flex-direction:column;height:100%;overflow-y:auto}.cc-threaded-messages__header{height:8%;width:100%;display:flex;padding:16px;align-items:flex-start}.cc-threaded-messages__close{display:flex;align-items:center}.cc-threaded-messages__title{display:flex;align-items:center;justify-content:center;width:100%}.cc-threaded-messages__bubble-view{width:100%}.cc-threaded-messages__header{flex:0 0 auto}.cc-threaded-messages__list{flex:1 1 auto;min-height:65%}.cc-threaded-messages__composer{flex:0 0 auto;min-height:80px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { onClose: [{
                 type: Input
             }], onError: [{
@@ -13275,10 +13552,10 @@ class CometChatGroupMembersComponent {
     }
 }
 CometChatGroupMembersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatGroupMembersComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
-CometChatGroupMembersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatGroupMembersComponent, selector: "cometchat-group-members", inputs: { groupMemberRequestBuilder: "groupMemberRequestBuilder", searchRequestBuilder: "searchRequestBuilder", subtitleView: "subtitleView", listItemView: "listItemView", tailView: "tailView", disableUsersPresence: "disableUsersPresence", menu: "menu", options: "options", backButtonIconURL: "backButtonIconURL", closeButtonIconURL: "closeButtonIconURL", showBackButton: "showBackButton", hideSeparator: "hideSeparator", selectionMode: "selectionMode", searchPlaceholder: "searchPlaceholder", searchIconURL: "searchIconURL", hideSearch: "hideSearch", title: "title", onError: "onError", backdropStyle: "backdropStyle", onBack: "onBack", onClose: "onClose", onSelect: "onSelect", group: "group", emptyStateView: "emptyStateView", errorStateView: "errorStateView", loadingIconURL: "loadingIconURL", loadingStateView: "loadingStateView", emptyStateText: "emptyStateText", errorStateText: "errorStateText", titleAlignment: "titleAlignment", dropdownIconURL: "dropdownIconURL", statusIndicatorStyle: "statusIndicatorStyle", avatarStyle: "avatarStyle", groupMembersStyle: "groupMembersStyle", groupScopeStyle: "groupScopeStyle", listItemStyle: "listItemStyle" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-group-members\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-group-members__back\">\n    <cometchat-button [iconURL]=\"backButtonIconURL\" [buttonStyle]=\"backButtonStyle()\" *ngIf=\"showBackButton\"   (cc-button-clicked)=\"backClicked()\" >\n\n    </cometchat-button>\n  </div>\n  <div class=\"cc-group-members__wrapper\" [ngStyle]=\"membersStyle()\">\n    <div class=\"cc-group-members__menus\" >\n      <ng-container *ngTemplateOutlet=\"menu\">\n      </ng-container>\n  </div>\n    <cometchat-list [listItemView]=\"listItemView ? listItemView : listItem\" [onScrolledToBottom]=\"onScrolledToBottom\" [onSearch]=\"onSearch\"\n        [list]=\"groupMembers\" [searchText]=\"searchKeyword\" [searchPlaceholderText]=\"searchPlaceholder\"\n        [searchIconURL]=\"searchIconURL\" [hideSearch]=\"hideSearch\"  [title]=\"title\"\n\n        [emptyStateText]=\"emptyStateText\" [loadingIconURL]=\"loadingIconURL\"\n        [titleAlignment]=\"titleAlignment\" [loadingStateView]=\"loadingStateView\" [emptyStateView]=\"emptyStateView\"\n        [errorStateText]=\"errorStateText\" [errorStateView]=\"errorStateView\" [listStyle]=\"listStyle\" [state]=\"state\">\n    </cometchat-list>\n    <ng-template #listItem let-groupMember>\n        <cometchat-list-item [title]=\"groupMember?.name\" [avatarURL]=\"groupMember?.avatar\" [avatarName]=\"groupMember?.name\"\n            [listItemStyle]=\"listItemStyle\" [avatarStyle]=\"avatarStyle\" [statusIndicatorStyle]=\"statusIndicatorStyle\"\n            [statusIndicatorColor]=\"getStatusIndicatorColor(groupMember)\" [hideSeparator]=\"hideSeparator\">\n            <div slot=\"subtitleView\" *ngIf=\"subtitleView\" class=\"cc-group-members__subtitle-view\">\n                <ng-container *ngTemplateOutlet=\"subtitleView\">\n                </ng-container>\n            </div>\n            <div slot=\"menuView\" class=\"cc-group-members__options\" *ngIf=\" !tailView && options\">\n              <cometchat-menu-list [data]=\"options(groupMember)\"  [menuListStyle]=\"menuListStyle\" (cc-menu-clicked)=\"handleMenuAction($event, groupMember)\"></cometchat-menu-list>\n          </div>\n        <div slot=\"tailView\"  class=\"cc-group-members__tail-view\">\n\n         <div *ngIf=\"tailView\">\n          <ng-container *ngTemplateOutlet=\"tailView;context:{ $implicit: groupMember }\">\n          </ng-container>\n\n         </div>\n          <div *ngIf=\"selectionMode != selectionmodeEnum.none\" >\n            <div  *ngIf=\"selectionMode == selectionmodeEnum.single\" class=\"cc-group-members__selection--single\">\n              <cometchat-radio-button (cc-radio-button-changed)=\"onMemberSelected(groupMember,$event)\"></cometchat-radio-button>\n            </div>\n            <div  *ngIf=\"selectionMode == selectionmodeEnum.multiple\" class=\"cc-group-members__selection--multiple\">\n              <cometchat-checkbox (cc-checkbox-changed)=\"onMemberSelected(groupMember,$event)\"></cometchat-checkbox>\n            </div>\n          </div>\n          <div *ngIf=\"!tailView\">\n            <div class=\"cc-group-members__scopechange\" slot=\"tailView\">\n\n              <cometchat-menu-list [moreIconURL]=\"moreIconURL\"  *ngIf=\"isArray(getOptions(groupMember))\"  [topMenuSize]=\"0\" [data]=\"getOptions(groupMember)\" (cc-menu-clicked)=\"handleMenuAction($event, groupMember)\" [menuListStyle]=\"menuListStyle\"></cometchat-menu-list>\n               <cometchat-label *ngIf=\" isString(getOptions(groupMember))\" [text]=\"getOptions(groupMember)\" [labelStyle]=\"getScopeStyle()\">\n\n               </cometchat-label>\n\n           </div>\n          </div>\n      </div>\n        </cometchat-list-item>\n\n    </ng-template>\n  </div>\n  <div class=\"cc-group-members__close\">\n    <cometchat-button [iconURL]=\"closeButtonIconURL\" [buttonStyle]=\"closeButtonStyle()\" (cc-button-clicked)=\"closeClicked()\">\n\n    </cometchat-button>\n  </div>\n</div>\n<cometchat-backdrop *ngIf=\"changeScope && memberScope.length > 0\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-change-scope  [changeScopeStyle]=\"groupScopeStyle\" [options]=\"memberScope\" [arrowIconURL]=\"dropdownIconURL\" (cc-changescope-close-clicked)=\"changeScope = false;\" (cc-changescope-changed)=\"changeMemberScope($event)\">\n\n  </cometchat-change-scope>\n</cometchat-backdrop>", styles: [".cc-group-members{display:flex;height:100%;width:100%;overflow:hidden}.cc-group-members__back{position:absolute;left:8px;padding:12px 8px 8px}.cc-group-members__wrapper{height:100%;padding:8px;width:100%}.cc-group-members__close{position:absolute;right:8px;padding:8px}.cc-group-members__tail-view{position:relative;display:flex;gap:8px;justify-content:flex-end;align-items:center}.cc-group-members__menus{position:absolute;right:12px;padding:12px;cursor:pointer}.scope__changed{height:100%;width:-moz-fit-content;width:fit-content;position:absolute;right:8px}\n"], components: [{ type: CometchatListComponent, selector: "cometchat-list", inputs: ["listItemView", "onScrolledToBottom", "onScrolledToTop", "list", "onSearch", "getSectionHeader", "searchText", "searchIconURL", "listStyle", "searchPlaceholderText", "hideSearch", "hideError", "title", "titleAlignment", "errorStateView", "loadingStateView", "emptyStateView", "state", "errorStateText", "emptyStateText", "loadingIconURL", "showSectionHeader", "sectionHeaderField", "DateSeparatorPattern", "dateSeparatorStyle"] }], 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 });
+CometChatGroupMembersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatGroupMembersComponent, selector: "cometchat-group-members", inputs: { groupMemberRequestBuilder: "groupMemberRequestBuilder", searchRequestBuilder: "searchRequestBuilder", subtitleView: "subtitleView", listItemView: "listItemView", tailView: "tailView", disableUsersPresence: "disableUsersPresence", menu: "menu", options: "options", backButtonIconURL: "backButtonIconURL", closeButtonIconURL: "closeButtonIconURL", showBackButton: "showBackButton", hideSeparator: "hideSeparator", selectionMode: "selectionMode", searchPlaceholder: "searchPlaceholder", searchIconURL: "searchIconURL", hideSearch: "hideSearch", title: "title", onError: "onError", backdropStyle: "backdropStyle", onBack: "onBack", onClose: "onClose", onSelect: "onSelect", group: "group", emptyStateView: "emptyStateView", errorStateView: "errorStateView", loadingIconURL: "loadingIconURL", loadingStateView: "loadingStateView", emptyStateText: "emptyStateText", errorStateText: "errorStateText", titleAlignment: "titleAlignment", dropdownIconURL: "dropdownIconURL", statusIndicatorStyle: "statusIndicatorStyle", avatarStyle: "avatarStyle", groupMembersStyle: "groupMembersStyle", groupScopeStyle: "groupScopeStyle", listItemStyle: "listItemStyle" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-group-members\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-group-members__back\">\n    <cometchat-button [iconURL]=\"backButtonIconURL\"\n      [buttonStyle]=\"backButtonStyle()\" *ngIf=\"showBackButton\"\n      (cc-button-clicked)=\"backClicked()\">\n\n    </cometchat-button>\n  </div>\n  <div class=\"cc-group-members__wrapper\" [ngStyle]=\"membersStyle()\">\n    <div class=\"cc-group-members__menus\">\n      <ng-container *ngTemplateOutlet=\"menu\">\n      </ng-container>\n    </div>\n    <cometchat-list [listItemView]=\"listItemView ? listItemView : listItem\"\n      [onScrolledToBottom]=\"onScrolledToBottom\" [onSearch]=\"onSearch\"\n      [list]=\"groupMembers\" [searchText]=\"searchKeyword\"\n      [searchPlaceholderText]=\"searchPlaceholder\"\n      [searchIconURL]=\"searchIconURL\" [hideSearch]=\"hideSearch\" [title]=\"title\"\n      [emptyStateText]=\"emptyStateText\" [loadingIconURL]=\"loadingIconURL\"\n      [titleAlignment]=\"titleAlignment\" [loadingStateView]=\"loadingStateView\"\n      [emptyStateView]=\"emptyStateView\" [errorStateText]=\"errorStateText\"\n      [errorStateView]=\"errorStateView\" [listStyle]=\"listStyle\" [state]=\"state\">\n    </cometchat-list>\n    <ng-template #listItem let-groupMember>\n      <cometchat-list-item [title]=\"groupMember?.name\"\n        [avatarURL]=\"groupMember?.avatar\" [avatarName]=\"groupMember?.name\"\n        [listItemStyle]=\"listItemStyle\" [avatarStyle]=\"avatarStyle\"\n        [statusIndicatorStyle]=\"statusIndicatorStyle\"\n        [statusIndicatorColor]=\"getStatusIndicatorColor(groupMember)\"\n        [hideSeparator]=\"hideSeparator\">\n        <div slot=\"subtitleView\" *ngIf=\"subtitleView\"\n          class=\"cc-group-members__subtitle-view\">\n          <ng-container *ngTemplateOutlet=\"subtitleView\">\n          </ng-container>\n        </div>\n        <div slot=\"menuView\" class=\"cc-group-members__options\"\n          *ngIf=\" !tailView && options\">\n          <cometchat-menu-list [data]=\"options(groupMember)\"\n            [menuListStyle]=\"menuListStyle\"\n            (cc-menu-clicked)=\"handleMenuAction($event, groupMember)\"></cometchat-menu-list>\n        </div>\n        <div slot=\"tailView\" class=\"cc-group-members__tail-view\">\n\n          <div *ngIf=\"tailView\">\n            <ng-container\n              *ngTemplateOutlet=\"tailView;context:{ $implicit: groupMember }\">\n            </ng-container>\n\n          </div>\n          <div *ngIf=\"selectionMode != selectionmodeEnum.none\">\n            <div *ngIf=\"selectionMode == selectionmodeEnum.single\"\n              class=\"cc-group-members__selection--single\">\n              <cometchat-radio-button\n                (cc-radio-button-changed)=\"onMemberSelected(groupMember,$event)\"></cometchat-radio-button>\n            </div>\n            <div *ngIf=\"selectionMode == selectionmodeEnum.multiple\"\n              class=\"cc-group-members__selection--multiple\">\n              <cometchat-checkbox\n                (cc-checkbox-changed)=\"onMemberSelected(groupMember,$event)\"></cometchat-checkbox>\n            </div>\n          </div>\n          <div *ngIf=\"!tailView\">\n            <div class=\"cc-group-members__scopechange\" slot=\"tailView\">\n\n              <cometchat-menu-list [moreIconURL]=\"moreIconURL\"\n                *ngIf=\"isArray(getOptions(groupMember))\" [topMenuSize]=\"0\"\n                [data]=\"getOptions(groupMember)\"\n                (cc-menu-clicked)=\"handleMenuAction($event, groupMember)\"\n                [menuListStyle]=\"menuListStyle\"></cometchat-menu-list>\n              <cometchat-label *ngIf=\" isString(getOptions(groupMember))\"\n                [text]=\"getOptions(groupMember)\" [labelStyle]=\"getScopeStyle()\">\n\n              </cometchat-label>\n\n            </div>\n          </div>\n        </div>\n      </cometchat-list-item>\n\n    </ng-template>\n  </div>\n  <div class=\"cc-group-members__close\">\n    <cometchat-button [iconURL]=\"closeButtonIconURL\"\n      [buttonStyle]=\"closeButtonStyle()\" (cc-button-clicked)=\"closeClicked()\">\n    </cometchat-button>\n  </div>\n</div>\n<cometchat-backdrop *ngIf=\"changeScope && memberScope.length > 0\"\n  [backdropStyle]=\"backdropStyle\">\n  <cometchat-change-scope [changeScopeStyle]=\"groupScopeStyle\"\n    [options]=\"memberScope\" [arrowIconURL]=\"dropdownIconURL\"\n    (cc-changescope-close-clicked)=\"changeScope = false;\"\n    (cc-changescope-changed)=\"changeMemberScope($event)\">\n\n  </cometchat-change-scope>\n</cometchat-backdrop>\n", styles: [".cc-group-members{display:flex;height:100%;width:100%;overflow:hidden}.cc-group-members__back{position:absolute;left:8px;padding:12px 8px 8px}.cc-group-members__wrapper{height:100%;padding:8px;width:100%}.cc-group-members__close{position:absolute;right:8px;padding:8px}.cc-group-members__tail-view{position:relative;display:flex;gap:8px;justify-content:flex-end;align-items:center}.cc-group-members__menus{position:absolute;right:12px;padding:12px;cursor:pointer}.scope__changed{height:100%;width:-moz-fit-content;width:fit-content;position:absolute;right:8px}\n"], components: [{ type: CometchatListComponent, selector: "cometchat-list", inputs: ["listItemView", "onScrolledToBottom", "onScrolledToTop", "list", "onSearch", "getSectionHeader", "searchText", "searchIconURL", "listStyle", "searchPlaceholderText", "hideSearch", "hideError", "title", "titleAlignment", "errorStateView", "loadingStateView", "emptyStateView", "state", "errorStateText", "emptyStateText", "loadingIconURL", "showSectionHeader", "sectionHeaderField", "DateSeparatorPattern", "dateSeparatorStyle"] }], 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: CometChatGroupMembersComponent, decorators: [{
             type: Component,
-            args: [{ selector: "cometchat-group-members", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-group-members\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-group-members__back\">\n    <cometchat-button [iconURL]=\"backButtonIconURL\" [buttonStyle]=\"backButtonStyle()\" *ngIf=\"showBackButton\"   (cc-button-clicked)=\"backClicked()\" >\n\n    </cometchat-button>\n  </div>\n  <div class=\"cc-group-members__wrapper\" [ngStyle]=\"membersStyle()\">\n    <div class=\"cc-group-members__menus\" >\n      <ng-container *ngTemplateOutlet=\"menu\">\n      </ng-container>\n  </div>\n    <cometchat-list [listItemView]=\"listItemView ? listItemView : listItem\" [onScrolledToBottom]=\"onScrolledToBottom\" [onSearch]=\"onSearch\"\n        [list]=\"groupMembers\" [searchText]=\"searchKeyword\" [searchPlaceholderText]=\"searchPlaceholder\"\n        [searchIconURL]=\"searchIconURL\" [hideSearch]=\"hideSearch\"  [title]=\"title\"\n\n        [emptyStateText]=\"emptyStateText\" [loadingIconURL]=\"loadingIconURL\"\n        [titleAlignment]=\"titleAlignment\" [loadingStateView]=\"loadingStateView\" [emptyStateView]=\"emptyStateView\"\n        [errorStateText]=\"errorStateText\" [errorStateView]=\"errorStateView\" [listStyle]=\"listStyle\" [state]=\"state\">\n    </cometchat-list>\n    <ng-template #listItem let-groupMember>\n        <cometchat-list-item [title]=\"groupMember?.name\" [avatarURL]=\"groupMember?.avatar\" [avatarName]=\"groupMember?.name\"\n            [listItemStyle]=\"listItemStyle\" [avatarStyle]=\"avatarStyle\" [statusIndicatorStyle]=\"statusIndicatorStyle\"\n            [statusIndicatorColor]=\"getStatusIndicatorColor(groupMember)\" [hideSeparator]=\"hideSeparator\">\n            <div slot=\"subtitleView\" *ngIf=\"subtitleView\" class=\"cc-group-members__subtitle-view\">\n                <ng-container *ngTemplateOutlet=\"subtitleView\">\n                </ng-container>\n            </div>\n            <div slot=\"menuView\" class=\"cc-group-members__options\" *ngIf=\" !tailView && options\">\n              <cometchat-menu-list [data]=\"options(groupMember)\"  [menuListStyle]=\"menuListStyle\" (cc-menu-clicked)=\"handleMenuAction($event, groupMember)\"></cometchat-menu-list>\n          </div>\n        <div slot=\"tailView\"  class=\"cc-group-members__tail-view\">\n\n         <div *ngIf=\"tailView\">\n          <ng-container *ngTemplateOutlet=\"tailView;context:{ $implicit: groupMember }\">\n          </ng-container>\n\n         </div>\n          <div *ngIf=\"selectionMode != selectionmodeEnum.none\" >\n            <div  *ngIf=\"selectionMode == selectionmodeEnum.single\" class=\"cc-group-members__selection--single\">\n              <cometchat-radio-button (cc-radio-button-changed)=\"onMemberSelected(groupMember,$event)\"></cometchat-radio-button>\n            </div>\n            <div  *ngIf=\"selectionMode == selectionmodeEnum.multiple\" class=\"cc-group-members__selection--multiple\">\n              <cometchat-checkbox (cc-checkbox-changed)=\"onMemberSelected(groupMember,$event)\"></cometchat-checkbox>\n            </div>\n          </div>\n          <div *ngIf=\"!tailView\">\n            <div class=\"cc-group-members__scopechange\" slot=\"tailView\">\n\n              <cometchat-menu-list [moreIconURL]=\"moreIconURL\"  *ngIf=\"isArray(getOptions(groupMember))\"  [topMenuSize]=\"0\" [data]=\"getOptions(groupMember)\" (cc-menu-clicked)=\"handleMenuAction($event, groupMember)\" [menuListStyle]=\"menuListStyle\"></cometchat-menu-list>\n               <cometchat-label *ngIf=\" isString(getOptions(groupMember))\" [text]=\"getOptions(groupMember)\" [labelStyle]=\"getScopeStyle()\">\n\n               </cometchat-label>\n\n           </div>\n          </div>\n      </div>\n        </cometchat-list-item>\n\n    </ng-template>\n  </div>\n  <div class=\"cc-group-members__close\">\n    <cometchat-button [iconURL]=\"closeButtonIconURL\" [buttonStyle]=\"closeButtonStyle()\" (cc-button-clicked)=\"closeClicked()\">\n\n    </cometchat-button>\n  </div>\n</div>\n<cometchat-backdrop *ngIf=\"changeScope && memberScope.length > 0\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-change-scope  [changeScopeStyle]=\"groupScopeStyle\" [options]=\"memberScope\" [arrowIconURL]=\"dropdownIconURL\" (cc-changescope-close-clicked)=\"changeScope = false;\" (cc-changescope-changed)=\"changeMemberScope($event)\">\n\n  </cometchat-change-scope>\n</cometchat-backdrop>", styles: [".cc-group-members{display:flex;height:100%;width:100%;overflow:hidden}.cc-group-members__back{position:absolute;left:8px;padding:12px 8px 8px}.cc-group-members__wrapper{height:100%;padding:8px;width:100%}.cc-group-members__close{position:absolute;right:8px;padding:8px}.cc-group-members__tail-view{position:relative;display:flex;gap:8px;justify-content:flex-end;align-items:center}.cc-group-members__menus{position:absolute;right:12px;padding:12px;cursor:pointer}.scope__changed{height:100%;width:-moz-fit-content;width:fit-content;position:absolute;right:8px}\n"] }]
+            args: [{ selector: "cometchat-group-members", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-group-members\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-group-members__back\">\n    <cometchat-button [iconURL]=\"backButtonIconURL\"\n      [buttonStyle]=\"backButtonStyle()\" *ngIf=\"showBackButton\"\n      (cc-button-clicked)=\"backClicked()\">\n\n    </cometchat-button>\n  </div>\n  <div class=\"cc-group-members__wrapper\" [ngStyle]=\"membersStyle()\">\n    <div class=\"cc-group-members__menus\">\n      <ng-container *ngTemplateOutlet=\"menu\">\n      </ng-container>\n    </div>\n    <cometchat-list [listItemView]=\"listItemView ? listItemView : listItem\"\n      [onScrolledToBottom]=\"onScrolledToBottom\" [onSearch]=\"onSearch\"\n      [list]=\"groupMembers\" [searchText]=\"searchKeyword\"\n      [searchPlaceholderText]=\"searchPlaceholder\"\n      [searchIconURL]=\"searchIconURL\" [hideSearch]=\"hideSearch\" [title]=\"title\"\n      [emptyStateText]=\"emptyStateText\" [loadingIconURL]=\"loadingIconURL\"\n      [titleAlignment]=\"titleAlignment\" [loadingStateView]=\"loadingStateView\"\n      [emptyStateView]=\"emptyStateView\" [errorStateText]=\"errorStateText\"\n      [errorStateView]=\"errorStateView\" [listStyle]=\"listStyle\" [state]=\"state\">\n    </cometchat-list>\n    <ng-template #listItem let-groupMember>\n      <cometchat-list-item [title]=\"groupMember?.name\"\n        [avatarURL]=\"groupMember?.avatar\" [avatarName]=\"groupMember?.name\"\n        [listItemStyle]=\"listItemStyle\" [avatarStyle]=\"avatarStyle\"\n        [statusIndicatorStyle]=\"statusIndicatorStyle\"\n        [statusIndicatorColor]=\"getStatusIndicatorColor(groupMember)\"\n        [hideSeparator]=\"hideSeparator\">\n        <div slot=\"subtitleView\" *ngIf=\"subtitleView\"\n          class=\"cc-group-members__subtitle-view\">\n          <ng-container *ngTemplateOutlet=\"subtitleView\">\n          </ng-container>\n        </div>\n        <div slot=\"menuView\" class=\"cc-group-members__options\"\n          *ngIf=\" !tailView && options\">\n          <cometchat-menu-list [data]=\"options(groupMember)\"\n            [menuListStyle]=\"menuListStyle\"\n            (cc-menu-clicked)=\"handleMenuAction($event, groupMember)\"></cometchat-menu-list>\n        </div>\n        <div slot=\"tailView\" class=\"cc-group-members__tail-view\">\n\n          <div *ngIf=\"tailView\">\n            <ng-container\n              *ngTemplateOutlet=\"tailView;context:{ $implicit: groupMember }\">\n            </ng-container>\n\n          </div>\n          <div *ngIf=\"selectionMode != selectionmodeEnum.none\">\n            <div *ngIf=\"selectionMode == selectionmodeEnum.single\"\n              class=\"cc-group-members__selection--single\">\n              <cometchat-radio-button\n                (cc-radio-button-changed)=\"onMemberSelected(groupMember,$event)\"></cometchat-radio-button>\n            </div>\n            <div *ngIf=\"selectionMode == selectionmodeEnum.multiple\"\n              class=\"cc-group-members__selection--multiple\">\n              <cometchat-checkbox\n                (cc-checkbox-changed)=\"onMemberSelected(groupMember,$event)\"></cometchat-checkbox>\n            </div>\n          </div>\n          <div *ngIf=\"!tailView\">\n            <div class=\"cc-group-members__scopechange\" slot=\"tailView\">\n\n              <cometchat-menu-list [moreIconURL]=\"moreIconURL\"\n                *ngIf=\"isArray(getOptions(groupMember))\" [topMenuSize]=\"0\"\n                [data]=\"getOptions(groupMember)\"\n                (cc-menu-clicked)=\"handleMenuAction($event, groupMember)\"\n                [menuListStyle]=\"menuListStyle\"></cometchat-menu-list>\n              <cometchat-label *ngIf=\" isString(getOptions(groupMember))\"\n                [text]=\"getOptions(groupMember)\" [labelStyle]=\"getScopeStyle()\">\n\n              </cometchat-label>\n\n            </div>\n          </div>\n        </div>\n      </cometchat-list-item>\n\n    </ng-template>\n  </div>\n  <div class=\"cc-group-members__close\">\n    <cometchat-button [iconURL]=\"closeButtonIconURL\"\n      [buttonStyle]=\"closeButtonStyle()\" (cc-button-clicked)=\"closeClicked()\">\n    </cometchat-button>\n  </div>\n</div>\n<cometchat-backdrop *ngIf=\"changeScope && memberScope.length > 0\"\n  [backdropStyle]=\"backdropStyle\">\n  <cometchat-change-scope [changeScopeStyle]=\"groupScopeStyle\"\n    [options]=\"memberScope\" [arrowIconURL]=\"dropdownIconURL\"\n    (cc-changescope-close-clicked)=\"changeScope = false;\"\n    (cc-changescope-changed)=\"changeMemberScope($event)\">\n\n  </cometchat-change-scope>\n</cometchat-backdrop>\n", styles: [".cc-group-members{display:flex;height:100%;width:100%;overflow:hidden}.cc-group-members__back{position:absolute;left:8px;padding:12px 8px 8px}.cc-group-members__wrapper{height:100%;padding:8px;width:100%}.cc-group-members__close{position:absolute;right:8px;padding:8px}.cc-group-members__tail-view{position:relative;display:flex;gap:8px;justify-content:flex-end;align-items:center}.cc-group-members__menus{position:absolute;right:12px;padding:12px;cursor:pointer}.scope__changed{height:100%;width:-moz-fit-content;width:fit-content;position:absolute;right:8px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { groupMemberRequestBuilder: [{
                 type: Input
             }], searchRequestBuilder: [{
@@ -16077,7 +16354,6 @@ class CometChatConversationsWithMessagesComponent {
             if (this.group && this.group.getGuid() == (item === null || item === void 0 ? void 0 : item.leftGroup.getGuid()) && ((_a = this.loggedInUser) === null || _a === void 0 ? void 0 : _a.getUid()) == ((_b = item === null || item === void 0 ? void 0 : item.userLeft) === null || _b === void 0 ? void 0 : _b.getUid())) {
                 this.group = null;
                 this.activeConversation = null;
-                console.log(this.group, this.user, this.activeConversation);
                 this.ref.detectChanges();
             }
         });