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

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

@@ -1,8 +1,8 @@
-import { ConversationUtils, CallingDetailsUtils, ExtensionsDataSource as ExtensionsDataSource$1, CollaborativeDocumentConstants, ExtensionsId, CollaborativeWhiteboardConstants, PollsConstants, CometChatUIKitUtility, CometChatSoundManager, SmartRepliesConfiguration, StickersConstants, StickersConfiguration, CometChatUIKitCalls, OutgoingCallStyle, OutgoingCallConfiguration, CallScreenConfiguration, CallButtonsStyle, StorageUtils, IncomingCallStyle, UsersStyle, AddMembersStyle, MessageHeaderStyle, ListStyle, BannedMembersStyle, MessageReceiptUtils, ConversationsStyle, MessageInformationStyle, MessageInformationConfiguration, MessageTranslationConstants, MessageTranslationStyle, ReactionsConstants, LinkPreviewConstants, ThumbnailGenerationConstants, MessageListStyle, LinkPreviewStyle, SmartRepliesConstants, MessageComposerStyle, MessageListConfiguration, MessageComposerConfiguration, ThreadedMessagesStyle, GroupMemberUtils, GroupMembersStyle, TransferOwnershipStyle, AddMembersConfiguration, BannedMembersConfiguration, GroupMembersConfiguration, TransferOwnershipConfiguration, DetailsUtils, DetailsStyle, MessageHeaderConfiguration, ThreadedMessagesConfiguration, DetailsConfiguration, MessagesStyle, GroupsStyle, UsersConfiguration, GroupsConfiguration, ContactsStyle, TabItemStyle, MessagesConfiguration, ConversationsConfiguration, ContactsConfiguration, WithMessagesStyle, CreateGroupConfiguration, JoinGroupConfiguration } from '@cometchat/uikit-shared';
+import { ConversationUtils, AIExtensionDataSource, 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 } from '@cometchat/uikit-shared';
 export * from '@cometchat/uikit-shared';
-import { CometChatMessageOption, CometChatUIKitConstants, localize, fontHelper, CometChatMessageTemplate, CometChatMessageComposerAction, CometChatTheme, CometChatMessageEvents, MessageStatus, CometChatUIEvents, CometChatLocalize, CallWorkflow, CometChatCallEvents, IconButtonAlignment, TitleAlignment, States, SelectionMode, CometChatUserEvents, CometChatGroupEvents, DatePatterns, CometChatConversationEvents, MessageBubbleAlignment, Receipts, MessageListAlignment, TimestampAlignment, DocumentIconAlignment, Placement, AuxiliaryButtonAlignment, TabAlignment, TabsVisibility } from '@cometchat/uikit-resources';
+import { CometChatMessageOption, CometChatUIKitConstants, localize, fontHelper, CometChatMessageTemplate, CometChatMessageComposerAction, CometChatTheme, CometChatMessageEvents, MessageStatus, CometChatUIEvents, ChatSdkEventInitializer, CometChatLocalize, CallWorkflow, CometChatCallEvents, IconButtonAlignment, TitleAlignment, States, SelectionMode, CometChatUserEvents, CometChatGroupEvents, DatePatterns, CometChatConversationEvents, MessageBubbleAlignment, Receipts, MessageListAlignment, TimestampAlignment, DocumentIconAlignment, Placement, AuxiliaryButtonAlignment, TabAlignment, TabsVisibility } from '@cometchat/uikit-resources';
 export * from '@cometchat/uikit-resources';
-import { CallscreenStyle, AvatarStyle, ListItemStyle, DateStyle, ReceiptStyle, BadgeStyle, ConfirmDialogStyle, MenuListStyle, MediaRecorderStyle, ChangeScopeStyle, CreateGroupStyle, JoinGroupStyle } from '@cometchat/uikit-elements';
+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 { __awaiter } from 'tslib';
 import { CometChat } from '@cometchat/chat-sdk-javascript';
@@ -166,6 +166,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 +188,8 @@ class MessageUtils {
             ChatConfigurator.getDataSource().getAudioMessageTemplate(),
             ChatConfigurator.getDataSource().getFileMessageTemplate(),
             ChatConfigurator.getDataSource().getGroupActionTemplate(),
+            ChatConfigurator.getDataSource().getFormMessageTemplate(),
+            ChatConfigurator.getDataSource().getCardMessageTemplate()
         ];
     }
     getMessageTemplate(messageType, messageCategory) {
@@ -198,6 +214,12 @@ class MessageUtils {
                 case CometChatUIKitConstants.MessageTypes.audio:
                     _template = ChatConfigurator.getDataSource().getAudioMessageTemplate();
                     break;
+                case CometChatUIKitConstants.MessageTypes.form:
+                    _template = ChatConfigurator.getDataSource().getFormMessageTemplate();
+                    break;
+                case CometChatUIKitConstants.MessageTypes.card:
+                    _template = ChatConfigurator.getDataSource().getCardMessageTemplate();
+                    break;
             }
         }
         return _template;
@@ -231,7 +253,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;
@@ -262,14 +285,20 @@ class MessageUtils {
             CometChatUIKitConstants.MessageTypes.audio,
             CometChatUIKitConstants.MessageTypes.video,
             CometChatUIKitConstants.MessageTypes.file,
-            CometChatUIKitConstants.MessageTypes.groupMember
+            CometChatUIKitConstants.MessageTypes.groupMember,
+            CometChatUIKitConstants.MessageTypes.form,
+            CometChatUIKitConstants.MessageTypes.card
         ];
     }
     addList() {
         return "<Message Utils>";
     }
     getAllMessageCategories() {
-        return [CometChatUIKitConstants.MessageCategory.message, CometChatUIKitConstants.MessageCategory.action];
+        return [
+            CometChatUIKitConstants.MessageCategory.message,
+            CometChatUIKitConstants.MessageCategory.action,
+            CometChatUIKitConstants.MessageCategory.interactive
+        ];
     }
     getAuxiliaryOptions(id, user, group) {
         return null;
@@ -444,6 +473,14 @@ 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();
@@ -502,6 +539,128 @@ class DataSourceDecorator {
     }
 }
 
+class AIEnablerDecorator extends DataSourceDecorator {
+    constructor(dataSource, features) {
+        super(dataSource);
+    }
+    getId() {
+        return "aienabler";
+    }
+}
+
+class AISmartRepliesExtensionDecorator extends DataSourceDecorator {
+    constructor(dataSource) {
+        super(dataSource);
+    }
+    getId() {
+        return "aismartreply";
+    }
+}
+
+class AISmartRepliesExtension extends AIExtensionDataSource {
+    constructor() {
+        super();
+    }
+    addExtension() {
+        ChatConfigurator.enable((dataSource) => new AISmartRepliesExtensionDecorator(dataSource));
+    }
+    getExtensionId() {
+        return "smart-replies";
+    }
+    enable() {
+        this.addExtension();
+    }
+}
+
+class AIConversationStarterDecorator extends DataSourceDecorator {
+    constructor(dataSource) {
+        super(dataSource);
+    }
+    getId() {
+        return "aiconversationstarter";
+    }
+}
+
+class AIConversationStarterExtension extends AIExtensionDataSource {
+    constructor() {
+        super();
+    }
+    addExtension() {
+        ChatConfigurator.enable((dataSource) => new AIConversationStarterDecorator(dataSource));
+    }
+    getExtensionId() {
+        return "conversation-starter";
+    }
+    enable() {
+        this.addExtension();
+    }
+}
+
+class AIEnabler extends AIExtensionDataSource {
+    constructor(defaultFeatures) {
+        super();
+        this.defaultAIFeatures = defaultFeatures;
+    }
+    addExtension() {
+    }
+    getExtensionId() {
+        return "ai-enabler";
+    }
+    enable() {
+        var _a;
+        let features = {};
+        const processFeatures = (feature) => {
+            return CometChat.isAIFeatureEnabled(feature.getExtensionId())
+                .then((response) => {
+                if (response) {
+                    feature === null || feature === void 0 ? void 0 : feature.enable();
+                    if (feature.getExtensionId() !== "conversation-starter") {
+                        features[feature.getExtensionId()] = {
+                            enabled: true,
+                            configuration: feature.getConfiguration(),
+                            enabler: feature,
+                        };
+                    }
+                }
+            })
+                .catch((err) => {
+                console.error(err);
+            });
+        };
+        if (this.defaultAIFeatures && this.defaultAIFeatures.length >= 1) {
+            const promises = this.defaultAIFeatures.map((feature) => processFeatures(feature));
+            Promise.all(promises)
+                .then(() => {
+                if (Object.keys(features).length > 0) {
+                    ChatConfigurator.enable((dataSource) => new AIEnablerDecorator(dataSource, features));
+                }
+            })
+                .catch((err) => {
+                console.error(err);
+            });
+        }
+        else if (((_a = this.defaultAIFeatures) === null || _a === void 0 ? void 0 : _a.length) === 0) {
+            return;
+        }
+        else {
+            const defaultFeatures = [
+                new AISmartRepliesExtension(),
+                new AIConversationStarterExtension(),
+            ];
+            const promises = defaultFeatures.map((feature) => processFeatures(feature));
+            Promise.all(promises)
+                .then(() => {
+                if (Object.keys(features).length > 0) {
+                    ChatConfigurator.enable((dataSource) => new AIEnablerDecorator(dataSource, features));
+                }
+            })
+                .catch((err) => {
+                console.error(err);
+            });
+        }
+    }
+}
+
 class CallingExtensionDecorator extends DataSourceDecorator {
     constructor(dataSource) {
         super(dataSource);
@@ -1335,7 +1494,8 @@ class CometChatUIKit {
         appSettingsBuilder.overrideClientHost(uiKitSettings.getClientHost());
         const appSettings = appSettingsBuilder.build();
         return new Promise((resolve, reject) => {
-            CometChat.init(uiKitSettings === null || uiKitSettings === void 0 ? void 0 : uiKitSettings.appId, appSettings).then(() => {
+            CometChat.init(uiKitSettings === null || uiKitSettings === void 0 ? void 0 : uiKitSettings.appId, appSettings)
+                .then(() => {
                 var _a;
                 CometChat.setSource("uikit-v4", "web", "angular");
                 (_a = CometChatUIKit.getLoggedinUser()) === null || _a === void 0 ? void 0 : _a.then((user) => {
@@ -1355,9 +1515,11 @@ class CometChatUIKit {
     }
     static getLoggedinUser() {
         return new Promise((resolve, reject) => {
-            CometChat.getLoggedinUser().then((user) => {
+            CometChat.getLoggedinUser()
+                .then((user) => {
                 return resolve(user);
-            }).catch((error) => {
+            })
+                .catch((error) => {
                 return reject(error);
             })
                 .catch((error) => {
@@ -1373,19 +1535,30 @@ class CometChatUIKit {
                 .setRegion((_b = CometChatUIKit.uiKitSettings) === null || _b === void 0 ? void 0 : _b.region)
                 .build();
             CometChatUIKitCalls.init(callAppSetting).then(() => {
-                console.log('CometChatCalls initialization success');
+                console.log("CometChatCalls initialization success");
                 new CallingExtension().enable();
             }, (error) => {
-                console.log('CometChatCalls initialization failed with error:', error);
+                console.log("CometChatCalls initialization failed with error:", error);
             });
         }
     }
     static initiateAfterLogin() {
+        var _a, _b;
         if (CometChatUIKit.uiKitSettings != null) {
             this.enableCalling();
-            this.defaultExtensions.forEach((extension) => {
-                extension === null || extension === void 0 ? void 0 : extension.enable();
-            });
+            let extensionList = ((_a = this.uiKitSettings) === null || _a === void 0 ? void 0 : _a.extensions) || this.defaultExtensions;
+            ChatSdkEventInitializer.attachListeners();
+            if (extensionList.length > 0) {
+                extensionList.forEach((extension) => {
+                    extension === null || extension === void 0 ? void 0 : extension.enable();
+                });
+            }
+            if (this.uiKitSettings.aiFeatures) {
+                (_b = this.uiKitSettings.aiFeatures) === null || _b === void 0 ? void 0 : _b.enable();
+            }
+            else {
+                new AIEnabler().enable();
+            }
         }
     }
     static login(details) {
@@ -1401,12 +1574,16 @@ class CometChatUIKit {
                         this.initiateAfterLogin();
                     }
                     else {
-                        let args = details.uid ? [details.uid, CometChatUIKit.uiKitSettings.authKey] : [details.authToken];
-                        CometChat.login(...args).then((user) => {
+                        let args = details.uid
+                            ? [details.uid, CometChatUIKit.uiKitSettings.authKey]
+                            : [details.authToken];
+                        CometChat.login(...args)
+                            .then((user) => {
                             resolve(user);
                             ChatConfigurator.init();
                             this.initiateAfterLogin();
-                        }).catch((error) => {
+                        })
+                            .catch((error) => {
                             reject(error);
                         });
                     }
@@ -1421,9 +1598,11 @@ class CometChatUIKit {
             if (!CometChatUIKit.checkAuthSettings())
                 return undefined;
             return new Promise((resolve, reject) => {
-                CometChat.createUser(user, CometChatUIKit.uiKitSettings.authKey).then((user) => {
+                CometChat.createUser(user, CometChatUIKit.uiKitSettings.authKey)
+                    .then((user) => {
                     resolve(user);
-                }).catch((error) => {
+                })
+                    .catch((error) => {
                     reject(error);
                 });
             });
@@ -1434,9 +1613,11 @@ class CometChatUIKit {
             if (!CometChatUIKit.checkAuthSettings())
                 return undefined;
             return new Promise((resolve, reject) => {
-                CometChat.updateUser(user, CometChatUIKit.uiKitSettings.authKey).then((user) => {
+                CometChat.updateUser(user, CometChatUIKit.uiKitSettings.authKey)
+                    .then((user) => {
                     resolve(user);
-                }).catch((error) => {
+                })
+                    .catch((error) => {
                     reject(error);
                 });
             });
@@ -1447,9 +1628,11 @@ class CometChatUIKit {
             if (!CometChatUIKit.checkAuthSettings())
                 return undefined;
             return new Promise((resolve, reject) => {
-                CometChat.logout().then((message) => {
+                CometChat.logout()
+                    .then((message) => {
                     resolve(message);
-                }).catch((error) => {
+                })
+                    .catch((error) => {
                     reject(error);
                 });
             });
@@ -1465,19 +1648,111 @@ class CometChatUIKit {
         }
         return true;
     }
+    /**
+     * Sends a form message and emits events based on the message status.
+     * @param message - The form message to be sent.
+     * @param disableLocalEvents - A boolean indicating whether to disable local events or not. Default value is false.
+     */
+    static sendFormMessage(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,
+                });
+            }
+        });
+    }
+    static sendCardMessage(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,
+                });
+            }
+        });
+    }
+    static sendCustomInteractiveMessage(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,
+                });
+            }
+        });
+    }
     // Helper methods to send messages
     // [sendCustomMessage] used to send a custom message
     static sendCustomMessage(message) {
         return new Promise((resolve, reject) => {
-            CometChatMessageEvents.ccMessageSent.next({ message: message, status: MessageStatus.inprogress });
+            CometChatMessageEvents.ccMessageSent.next({
+                message: message,
+                status: MessageStatus.inprogress,
+            });
             CometChat.sendCustomMessage(message)
                 .then((message) => {
-                CometChatMessageEvents.ccMessageSent.next({ message: message, status: MessageStatus.success });
+                CometChatMessageEvents.ccMessageSent.next({
+                    message: message,
+                    status: MessageStatus.success,
+                });
                 resolve(message);
             })
                 .catch((error) => {
                 message.setMetadata({ error: true });
-                CometChatMessageEvents.ccMessageSent.next({ message: message, status: MessageStatus.error });
+                CometChatMessageEvents.ccMessageSent.next({
+                    message: message,
+                    status: MessageStatus.error,
+                });
                 reject(error);
             });
         });
@@ -1486,15 +1761,24 @@ class CometChatUIKit {
     // [sendTextMessage] used to send a custom message
     static sendTextMessage(message) {
         return new Promise((resolve, reject) => {
-            CometChatMessageEvents.ccMessageSent.next({ message: message, status: MessageStatus.inprogress });
+            CometChatMessageEvents.ccMessageSent.next({
+                message: message,
+                status: MessageStatus.inprogress,
+            });
             CometChat.sendMessage(message)
                 .then((message) => {
-                CometChatMessageEvents.ccMessageSent.next({ message: message, status: MessageStatus.success });
+                CometChatMessageEvents.ccMessageSent.next({
+                    message: message,
+                    status: MessageStatus.success,
+                });
                 resolve(message);
             })
                 .catch((error) => {
                 message.setMetadata({ error: true });
-                CometChatMessageEvents.ccMessageSent.next({ message: message, status: MessageStatus.error });
+                CometChatMessageEvents.ccMessageSent.next({
+                    message: message,
+                    status: MessageStatus.error,
+                });
                 reject(error);
             });
         });
@@ -1503,15 +1787,24 @@ class CometChatUIKit {
     // [sendMediaMessage] used to send a custom message
     static sendMediaMessage(message) {
         return new Promise((resolve, reject) => {
-            CometChatMessageEvents.ccMessageSent.next({ message: message, status: MessageStatus.inprogress });
+            CometChatMessageEvents.ccMessageSent.next({
+                message: message,
+                status: MessageStatus.inprogress,
+            });
             CometChat.sendMediaMessage(message)
                 .then((message) => {
-                CometChatMessageEvents.ccMessageSent.next({ message: message, status: MessageStatus.success });
+                CometChatMessageEvents.ccMessageSent.next({
+                    message: message,
+                    status: MessageStatus.success,
+                });
                 resolve(message);
             })
                 .catch((error) => {
                 message.setMetadata({ error: true });
-                CometChatMessageEvents.ccMessageSent.next({ message: message, status: MessageStatus.error });
+                CometChatMessageEvents.ccMessageSent.next({
+                    message: message,
+                    status: MessageStatus.error,
+                });
                 reject(error);
             });
         });
@@ -3866,7 +4159,6 @@ class CometChatMessageHeaderComponent {
             console.log(error);
         };
         this.onBack = () => { };
-        this.msgListenerId = "message_" + new Date().getTime();
         this.groupsListenerId = "groupsList_" + new Date().getTime();
         this.userListenerId = "userlist_" + new Date().getTime();
         this.subtitleText = "";
@@ -4128,16 +4420,14 @@ class CometChatMessageHeaderComponent {
                 }));
             }
             if (!this.disableTyping) {
-                CometChat.addMessageListener(this.msgListenerId, new CometChat.MessageListener({
-                    onTypingStarted: (typingIndicator) => {
-                        this.isTyping = true;
-                        this.setTypingIndicatorText(typingIndicator);
-                    },
-                    onTypingEnded: (typingIndicator) => {
-                        this.isTyping = false;
-                        this.updateSubtitle();
-                    },
-                }));
+                this.onTypingStarted = CometChatMessageEvents.onTypingStarted.subscribe((typingIndicator) => {
+                    this.isTyping = true;
+                    this.setTypingIndicatorText(typingIndicator);
+                });
+                this.onTypingEnded = CometChatMessageEvents.onTypingEnded.subscribe((typingIndicator) => {
+                    this.isTyping = false;
+                    this.updateSubtitle();
+                });
             }
             CometChat.addGroupListener(this.groupsListenerId, new CometChat.GroupListener({
                 onGroupMemberScopeChanged: (message, changedUser, newScope, oldScope, changedGroup) => {
@@ -4194,8 +4484,10 @@ class CometChatMessageHeaderComponent {
         }
     }
     removeListener() {
-        CometChat.removeMessageListener(this.msgListenerId);
+        var _a, _b;
         CometChat.removeUserListener(this.userListenerId);
+        (_a = this.onTypingStarted) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        (_b = this.onTypingEnded) === null || _b === void 0 ? void 0 : _b.unsubscribe();
     }
     ngOnDestroy() {
         this.removeListener();
@@ -4973,7 +5265,6 @@ class CometChatConversationsComponent {
         this.checkItemChange = false;
         this.showConfirmDialog = false;
         this.conversationToBeDeleted = null;
-        this.conversationListenerId = "chatlist_" + new Date().getTime();
         this.userListenerId = "chatlist_user_" + new Date().getTime();
         this.groupListenerId = "chatlist_group_" + new Date().getTime();
         this.groupToUpdate = {};
@@ -5157,6 +5448,7 @@ class CometChatConversationsComponent {
                     case CometChatUIKitConstants.messages.TEXT_MESSAGE_RECEIVED:
                     case CometChatUIKitConstants.messages.MEDIA_MESSAGE_RECEIVED:
                     case CometChatUIKitConstants.messages.CUSTOM_MESSAGE_RECEIVED:
+                    case CometChatUIKitConstants.messages.INTERACTIVE_MESSAGE_RECEIVED:
                         if (!this.disableReceipt) {
                             this.markMessageAsDelivered(message);
                         }
@@ -5732,43 +6024,6 @@ class CometChatConversationsComponent {
                     this.updateConversation(message);
                 },
             }));
-            CometChat.addMessageListener(this.conversationListenerId, new CometChat.MessageListener({
-                onTextMessageReceived: (textMessage) => {
-                    callback(CometChatUIKitConstants.messages.TEXT_MESSAGE_RECEIVED, null, textMessage);
-                },
-                onMediaMessageReceived: (mediaMessage) => {
-                    callback(CometChatUIKitConstants.messages.MEDIA_MESSAGE_RECEIVED, null, mediaMessage);
-                },
-                onCustomMessageReceived: (customMessage) => {
-                    callback(CometChatUIKitConstants.messages.CUSTOM_MESSAGE_RECEIVED, null, customMessage);
-                },
-                onMessagesRead: (messageReceipt) => {
-                    if (!this.disableReceipt) {
-                        this.markAsRead(messageReceipt);
-                    }
-                },
-                onMessageDeleted: (deletedMessage) => {
-                    callback(CometChatUIKitConstants.messages.MESSAGE_DELETED, null, deletedMessage);
-                },
-                onMessageEdited: (editedMessage) => {
-                    callback(CometChatUIKitConstants.messages.MESSAGE_EDITED, null, editedMessage);
-                },
-                onMessagesDelivered: (messageReceipt) => {
-                    if (!this.disableReceipt) {
-                        this.updateDeliveredMessage(messageReceipt);
-                    }
-                },
-                onTypingStarted: (typingIndicator) => {
-                    if (!this.disableTyping) {
-                        this.typingIndicator = typingIndicator;
-                        this.ref.detectChanges();
-                    }
-                },
-                onTypingEnded: (typingIndicator) => {
-                    this.typingIndicator = null;
-                    this.ref.detectChanges();
-                }
-            }));
             CometChat.addCallListener(this.callListenerId, new CometChat.CallListener({
                 onIncomingCallReceived: (call) => {
                     this.updateConversation(call);
@@ -5786,6 +6041,58 @@ class CometChatConversationsComponent {
                     this.updateConversation(call);
                 }
             }));
+            // SDK listeners 
+            this.onTextMessageReceived =
+                CometChatMessageEvents.onTextMessageReceived.subscribe((textMessage) => {
+                    callback(CometChatUIKitConstants.messages.TEXT_MESSAGE_RECEIVED, null, textMessage);
+                });
+            this.onMediaMessageReceived =
+                CometChatMessageEvents.onMediaMessageReceived.subscribe((mediaMessage) => {
+                    callback(CometChatUIKitConstants.messages.MEDIA_MESSAGE_RECEIVED, null, mediaMessage);
+                });
+            this.onCustomMessageReceived =
+                CometChatMessageEvents.onCustomMessageReceived.subscribe((customMessage) => {
+                    callback(CometChatUIKitConstants.messages.CUSTOM_MESSAGE_RECEIVED, null, customMessage);
+                });
+            this.onFormMessageReceived =
+                CometChatMessageEvents.onFormMessageReceived.subscribe((formMessage) => {
+                    callback(CometChatUIKitConstants.messages.INTERACTIVE_MESSAGE_RECEIVED, null, formMessage);
+                });
+            this.onCardMessageReceived =
+                CometChatMessageEvents.onCardMessageReceived.subscribe((cardMessage) => {
+                    callback(CometChatUIKitConstants.messages.INTERACTIVE_MESSAGE_RECEIVED, null, cardMessage);
+                });
+            this.onCustomInteractiveMessageReceived =
+                CometChatMessageEvents.onCustomInteractiveMessageReceived.subscribe((customMessage) => {
+                    callback(CometChatUIKitConstants.messages.INTERACTIVE_MESSAGE_RECEIVED, null, customMessage);
+                });
+            this.onMessagesRead = CometChatMessageEvents.onMessagesRead.subscribe((messageReceipt) => {
+                if (!this.disableReceipt) {
+                    this.markAsRead(messageReceipt);
+                }
+            });
+            this.onMessageDeleted = CometChatMessageEvents.onMessageDeleted.subscribe((deletedMessage) => {
+                callback(CometChatUIKitConstants.messages.MESSAGE_DELETED, null, deletedMessage);
+            });
+            this.onMessageEdited = CometChatMessageEvents.onMessageEdited.subscribe((editedMessage) => {
+                callback(CometChatUIKitConstants.messages.MESSAGE_EDITED, null, editedMessage);
+            });
+            this.onMessagesDelivered =
+                CometChatMessageEvents.onMessagesDelivered.subscribe((messageReceipt) => {
+                    if (!this.disableReceipt) {
+                        this.updateDeliveredMessage(messageReceipt);
+                    }
+                });
+            this.onTypingStarted = CometChatMessageEvents.onTypingStarted.subscribe((typingIndicator) => {
+                if (!this.disableTyping) {
+                    this.typingIndicator = typingIndicator;
+                    this.ref.detectChanges();
+                }
+            });
+            this.onTypingEnded = CometChatMessageEvents.onTypingEnded.subscribe((typingIndicator) => {
+                this.typingIndicator = null;
+                this.ref.detectChanges();
+            });
         }
         catch (error) {
             if (this.onError) {
@@ -5802,11 +6109,23 @@ class CometChatConversationsComponent {
      * Removes all listeners
      */
     removeListeners() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         try {
-            CometChat.removeMessageListener(this.conversationListenerId);
             CometChat.removeUserListener(this.userListenerId);
             CometChat.removeGroupListener(this.groupListenerId);
             CometChat.removeConnectionListener(this.connectionListenerId);
+            (_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.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();
         }
         catch (error) {
             if (this.onError) {
@@ -6500,7 +6819,6 @@ class CometChatMessageInformationComponent {
         });
         this.isUserType = false;
         this.deliveredReceipt = Receipts.delivered;
-        this.msgListenerId = "message_" + new Date().getTime();
         this.readReceipt = Receipts.read;
         this.listStyle = {};
         this.messageText = localize("MESSAGE");
@@ -6617,26 +6935,25 @@ class CometChatMessageInformationComponent {
         this.messageInformationStyle = Object.assign(Object.assign({}, defaultStyle), this.messageInformationStyle);
     }
     ngOnDestroy() {
-        CometChat.removeMessageListener(this.msgListenerId);
+        this.onMessagesDelivered.unsubscribe();
+        this.onMessagesRead.unsubscribe();
     }
     addMessageEventListeners() {
         try {
-            CometChat.addMessageListener(this.msgListenerId, new CometChat.MessageListener({
-                onMessagesDelivered: (messageReceipt) => {
-                    var _a, _b;
-                    if (((_a = this.message) === null || _a === void 0 ? void 0 : _a.getId()) == Number(messageReceipt.getMessageId())) {
-                        (_b = this.message) === null || _b === void 0 ? void 0 : _b.setDeliveredAt(messageReceipt.getDeliveredAt());
-                        this.ref.detectChanges();
-                    }
-                },
-                onMessagesRead: (messageReceipt) => {
-                    var _a, _b;
-                    if (((_a = this.message) === null || _a === void 0 ? void 0 : _a.getId()) == Number(messageReceipt.getMessageId())) {
-                        (_b = this.message) === null || _b === void 0 ? void 0 : _b.setReadAt(messageReceipt.getReadAt());
-                        this.ref.detectChanges();
-                    }
+            this.onMessagesDelivered = CometChatMessageEvents.onMessagesDelivered.subscribe((messageReceipt) => {
+                var _a, _b;
+                if (((_a = this.message) === null || _a === void 0 ? void 0 : _a.getId()) == Number(messageReceipt.getMessageId())) {
+                    (_b = this.message) === null || _b === void 0 ? void 0 : _b.setDeliveredAt(messageReceipt.getDeliveredAt());
+                    this.ref.detectChanges();
                 }
-            }));
+            });
+            this.onMessagesRead = CometChatMessageEvents.onMessagesRead.subscribe((messageReceipt) => {
+                var _a, _b;
+                if (((_a = this.message) === null || _a === void 0 ? void 0 : _a.getId()) == Number(messageReceipt.getMessageId())) {
+                    (_b = this.message) === null || _b === void 0 ? void 0 : _b.setReadAt(messageReceipt.getReadAt());
+                    this.ref.detectChanges();
+                }
+            });
         }
         catch (error) {
             if (this.onError) {
@@ -6829,6 +7146,9 @@ class CometChatMessageListComponent {
         this.imageModerationStyle = {};
         this.timestampEnum = TimestampAlignment;
         this.chatChanged = true;
+        this.starterErrorStateText = localize("SOMETHING_WRONG");
+        this.starterEmptyStateText = localize("NO_MESSAGES_FOUND");
+        this.starterLoadingStateText = localize("GENERATING_ICEBREAKERS");
         this.timeStampColor = "";
         this.timeStampFont = "";
         this.smartReplyStyle = {
@@ -6836,7 +7156,12 @@ class CometChatMessageListComponent {
             height: "100%",
             border: "none",
         };
+        this.conversationStarterStyle = {};
         this.showSmartReply = false;
+        this.enableConversationStarter = false;
+        this.showConversationStarter = false;
+        this.conversationStarterState = States.loading;
+        this.conversationStarterReplies = [];
         this.smartReplyMessage = null;
         this.enableSmartReply = false;
         this.timeStampBackground = "";
@@ -6889,7 +7214,6 @@ class CometChatMessageListComponent {
         this.typesMap = {};
         this.messageTypesMap = {};
         this.theme = new CometChatTheme({});
-        this.msgListenerId = "message_" + new Date().getTime();
         this.groupListenerId = "group_" + new Date().getTime();
         this.callListenerId = "call_" + new Date().getTime();
         this.states = States;
@@ -7229,14 +7553,29 @@ class CometChatMessageListComponent {
             }
             this.requestBuilder.fetchPrevious().then((messageList) => {
                 var _a, _b;
+                if (messageList && messageList.length > 0) {
+                    messageList = messageList.map((message, i) => {
+                        if (message.getCategory() === CometChatUIKitConstants.MessageCategory.interactive) {
+                            return InteractiveMessageUtils.convertInteractiveMessage(message);
+                        }
+                        else {
+                            return message;
+                        }
+                    });
+                }
                 this.state = States.loading;
                 // No Messages Found
                 if (messageList.length === 0 && this.messagesList.length === 0) {
                     this.state = States.empty;
+                    if (!this.parentMessageId && this.enableConversationStarter) {
+                        this.fetchConversationStarter();
+                    }
                     this.ref.detectChanges();
                     return;
                 }
                 if (messageList && messageList.length > 0) {
+                    this.showConversationStarter = false;
+                    this.conversationStarterReplies = [];
                     if (this.firstReload) {
                         this.lastMessageId = Number(messageList[messageList.length - 1].getId());
                     }
@@ -7345,10 +7684,20 @@ class CometChatMessageListComponent {
                 }
                 this.requestBuilder.fetchNext().then((messageList) => {
                     var _a, _b, _c;
-                    this.state = States.loading;
-                    // No Messages Found
-                    if (messageList.length === 0 && this.messagesList.length === 0) {
-                        this.state = States.empty;
+                    if (messageList && messageList.length > 0) {
+                        messageList = messageList.map((message, i) => {
+                            if (message.getCategory() === CometChatUIKitConstants.MessageCategory.interactive) {
+                                return InteractiveMessageUtils.convertInteractiveMessage(message);
+                            }
+                            else {
+                                return message;
+                            }
+                        });
+                    }
+                    this.state = States.loading;
+                    // No Messages Found
+                    if (messageList.length === 0 && this.messagesList.length === 0) {
+                        this.state = States.empty;
                         this.ref.detectChanges();
                         return;
                     }
@@ -7528,13 +7877,24 @@ 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.removeMessageListener(this.msgListenerId);
             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();
         };
         /**
@@ -7572,6 +7932,19 @@ class CometChatMessageListComponent {
                 }
             }
         };
+        this.updateInteractiveMessage = (receipt) => {
+            if ((this.loggedInUser.getUid() === receipt.getSender().getUid())) {
+                const message = this.getMessageById(receipt.getMessageId());
+                if (message) {
+                    if (String(message === null || message === void 0 ? void 0 : message.getId()) ==
+                        String(receipt.getMessageId())) {
+                        const interaction = receipt.getInteractions();
+                        message.setInteractions(interaction);
+                        this.updateEditedMessage(InteractiveMessageUtils.convertInteractiveMessage(message));
+                    }
+                }
+            }
+        };
         /**
          * Emits an Action Indicating that a message was deleted by the user/person you are chatting with
          * @param {CometChat.BaseMessage} message
@@ -7746,6 +8119,14 @@ class CometChatMessageListComponent {
                 this.closeSmartReply();
             }
         };
+        this.sendConversationStarter = (event) => {
+            var _a;
+            let reply = (_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.reply;
+            CometChatUIEvents.ccComposeMessage.next(reply);
+            this.showConversationStarter = false;
+            this.conversationStarterReplies = [];
+            this.ref.detectChanges();
+        };
         /**
       * styling part
       */
@@ -7766,6 +8147,12 @@ class CometChatMessageListComponent {
                 textColor: this.messageListStyle.errorStateTextColor,
             };
         };
+        this.conversationStarterStateStyle = () => {
+            return {
+                textFont: fontHelper(this.theme.typography.title2),
+                textColor: this.theme.palette.getAccent600(),
+            };
+        };
         this.emptyStyle = () => {
             return {
                 textFont: this.messageListStyle.emptyStateTextFont,
@@ -7777,6 +8164,11 @@ class CometChatMessageListComponent {
                 iconTint: this.messageListStyle.loadingIconTint,
             };
         };
+        this.conversationStarterLoader = () => {
+            return {
+                iconTint: this.theme.palette.getAccent600(),
+            };
+        };
         this.wrapperStyle = () => {
             return {
                 height: this.messageListStyle.height,
@@ -7828,8 +8220,11 @@ class CometChatMessageListComponent {
         }
     }
     ngOnChanges(changes) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         try {
             if (changes[CometChatUIKitConstants.MessageReceiverType.user] || changes[CometChatUIKitConstants.MessageReceiverType.group]) {
+                this.showConversationStarter = false;
+                this.conversationStarterReplies = [];
                 this.state = States.loading;
                 this.messagesList = [];
                 this.ref.detectChanges();
@@ -7877,10 +8272,19 @@ class CometChatMessageListComponent {
                     }
                 }
                 //Removing Previous Conversation Listeners
-                CometChat.removeMessageListener(this.msgListenerId);
+                (_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.msgListenerId = "message_" + new Date().getTime();
                 this.groupListenerId = "group_" + new Date().getTime();
                 this.callListenerId = "call_" + new Date().getTime();
                 // Attach MessageListeners for the new conversation
@@ -8034,18 +8438,31 @@ class CometChatMessageListComponent {
         }
     }
     ngOnDestroy() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        this.showConversationStarter = false;
         this.unsubscribeToEvents();
         try {
             //Removing Message Listeners
-            CometChat.removeMessageListener(this.msgListenerId);
             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();
         }
         catch (error) {
             if (this.onError) {
                 this.onError(CometChatException(error));
             }
         }
+        this.ref.detectChanges();
     }
     reactionsStyle(message) {
         var _a;
@@ -8103,7 +8520,7 @@ class CometChatMessageListComponent {
         CometChatUIEvents.ccOpenChat.next({ user: messageObject.getSender() });
     }
     getMessageById(id) {
-        let messageKey = this.messagesList.findIndex((m) => m.getId() === id);
+        let messageKey = this.messagesList.findIndex((m) => m.getId() == id);
         if (messageKey > -1) {
             return this.messagesList[messageKey];
         }
@@ -8239,6 +8656,12 @@ class CometChatMessageListComponent {
                 border: `1px solid ${this.themeService.theme.palette.getAccent100()}`
             };
         }
+        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(),
+                width: "300px"
+            };
+        }
         else {
             if ((msg === null || msg === void 0 ? void 0 : msg.getSender()) && (msg === null || msg === void 0 ? void 0 : msg.getSender().getUid()) != this.loggedInUser.getUid()) {
                 style = {
@@ -8331,6 +8754,154 @@ class CometChatMessageListComponent {
             return null;
         }
     }
+    getFormMessageBubbleStyle() {
+        const textStyle = new InputStyle({
+            width: "100%",
+            height: "30px",
+            border: `1px solid ${this.themeService.theme.palette.getAccent100()}`,
+            borderRadius: "3px",
+            padding: "0px 0px 0px 5px",
+            placeholderTextColor: this.themeService.theme.palette.getAccent400(),
+            placeholderTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
+            textFont: fontHelper(this.themeService.theme.typography.subtitle2),
+            textColor: this.themeService.theme.palette.getAccent(),
+            background: this.themeService.theme.palette.getBackground()
+        });
+        const labelStyle = new LabelStyle({
+            textFont: fontHelper(this.themeService.theme.typography.subtitle1),
+            textColor: this.themeService.theme.palette.getAccent(),
+            background: "transparent"
+        });
+        const radioButtonStyle = new RadioButtonStyle({
+            height: "16px",
+            width: "16px",
+            border: "none",
+            labelTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
+            labelTextColor: this.themeService.theme.palette.getAccent600(),
+            borderRadius: "4px",
+            background: "",
+        });
+        const checkboxStyle = new CheckboxStyle({
+            height: "16px",
+            width: "16px",
+            border: "none",
+            borderRadius: "4px",
+            background: "",
+            labelTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
+            labelTextColor: this.themeService.theme.palette.getAccent600(),
+        });
+        const dropdownStyle = new DropdownStyle({
+            height: "35px",
+            width: "100%",
+            background: this.themeService.theme.palette.getBackground(),
+            border: `1px solid ${this.themeService.theme.palette.getAccent100()}`,
+            borderRadius: "12px",
+            activeTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
+            activeTextColor: this.themeService.theme.palette.getAccent(),
+            arrowIconTint: this.themeService.theme.palette.getAccent700(),
+            textFont: fontHelper(this.themeService.theme.typography.subtitle2),
+            textColor: this.themeService.theme.palette.getAccent(),
+            optionBackground: this.themeService.theme.palette.getBackground(),
+            optionBorder: `1px solid ${this.themeService.theme.palette.getAccent100()}`,
+            optionHoverBorder: `1px solid ${this.themeService.theme.palette.getAccent100()}`,
+            hoverTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
+            hoverTextColor: this.themeService.theme.palette.getAccent(),
+            hoverTextBackground: this.themeService.theme.palette.getAccent100(),
+        });
+        const buttonGroupStyle = {
+            height: "40px",
+            width: "100%",
+            background: this.themeService.theme.palette.getPrimary(),
+            border: `none`,
+            borderRadius: "12px",
+            buttonTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
+            buttonTextColor: this.themeService.theme.palette.getBackground(),
+            justifyContent: "center",
+        };
+        const singleSelectStyle = new SingleSelectStyle({
+            height: "100%",
+            width: "100%",
+            background: this.themeService.theme.palette.getBackground(),
+            border: "none",
+            borderRadius: "12px",
+            activeTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
+            activeTextColor: this.themeService.theme.palette.getAccent(),
+            activeTextBackground: this.themeService.theme.palette.getAccent100(),
+            textFont: fontHelper(this.themeService.theme.typography.subtitle2),
+            textColor: this.themeService.theme.palette.getAccent(),
+            optionBackground: this.themeService.theme.palette.getBackground(),
+            optionBorder: `1px solid ${this.themeService.theme.palette.getAccent100()}`,
+            optionBorderRadius: "2px",
+            hoverTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
+            hoverTextColor: this.themeService.theme.palette.getAccent(),
+            hoverTextBackground: this.themeService.theme.palette.getAccent100(),
+        });
+        const quickViewStyle = new QuickViewStyle({
+            background: "transparent",
+            height: "fit-content",
+            width: "100%",
+            titleFont: fontHelper(this.themeService.theme.typography.subtitle2),
+            titleColor: this.themeService.theme.palette.getPrimary(),
+            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 FormBubbleStyle({
+            width: "300px",
+            height: "fit-content",
+            border: "none",
+            background: "transparent",
+            wrapperBackground: this.themeService.theme.palette.getBackground(),
+            borderRadius: "8px",
+            wrapperBorderRadius: "8px",
+            textInputStyle: textStyle,
+            labelStyle: labelStyle,
+            radioButtonStyle: radioButtonStyle,
+            checkboxStyle: checkboxStyle,
+            dropdownStyle: dropdownStyle,
+            buttonStyle: buttonGroupStyle,
+            singleSelectStyle: singleSelectStyle,
+            quickViewStyle: quickViewStyle,
+            titleColor: this.themeService.theme.palette.getAccent(),
+            titleFont: fontHelper(this.themeService.theme.typography.title1),
+            goalCompletionTextColor: this.themeService.theme.palette.getAccent(),
+            goalCompletionTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
+            wrapperPadding: "2px",
+        });
+    }
+    ;
+    getCardMessageBubbleStyle() {
+        const buttonStyle = {
+            height: "40px",
+            width: "100%",
+            background: "transparent",
+            border: `none`,
+            borderRadius: "0px",
+            buttonTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
+            buttonTextColor: `${this.themeService.theme.palette.getPrimary()}`,
+            justifyContent: "center",
+        };
+        return new CardBubbleStyle({
+            background: "transparent",
+            borderRadius: "8px",
+            height: "fit-content",
+            width: "300px",
+            imageHeight: "auto",
+            imageWidth: "100%",
+            imageRadius: "8px",
+            imageBackgroundColor: "transparent",
+            descriptionFontColor: this.themeService.theme.palette.getAccent(),
+            descriptionFont: fontHelper(this.themeService.theme.typography.subtitle2),
+            buttonStyle: buttonStyle,
+            dividerTintColor: this.themeService.theme.palette.getAccent100(),
+            wrapperBackground: this.themeService.theme.palette.getBackground(),
+            wrapperBorderRadius: "8px",
+            wrapperPadding: "2px",
+            disabledButtonColor: this.themeService.theme.palette.getAccent600()
+        });
+    }
     getCallBubbleStyle(message) {
         var isLeftAligned = this.alignment == MessageListAlignment.left;
         var isUserSentMessage = !(message === null || message === void 0 ? void 0 : message.getSender()) || this.loggedInUser.getUid() === (message === null || message === void 0 ? void 0 : message.getSender().getUid());
@@ -8424,7 +8995,9 @@ class CometChatMessageListComponent {
             extension_whiteboard: this.whiteboardBubble,
             extension_document: this.documentBubble,
             extension_poll: this.pollBubble,
-            meeting: this.directCalling
+            meeting: this.directCalling,
+            form: this.formBubble,
+            card: this.cardBubble,
         };
         this.setBubbleView();
     }
@@ -8473,6 +9046,9 @@ class CometChatMessageListComponent {
         if (ChatConfigurator.names.includes('calling')) {
             this.enableCalling = true;
         }
+        if (ChatConfigurator.names.includes('aiconversationstarter')) {
+            this.enableConversationStarter = true;
+        }
     }
     openImageInFullScreen(message) {
         var _a, _b;
@@ -8633,6 +9209,7 @@ class CometChatMessageListComponent {
             buttonTextFont: fontHelper(this.themeService.theme.typography.text3)
         };
         this.smartReplyStyle = Object.assign({ replyTextFont: fontHelper(this.themeService.theme.typography.caption1), replyTextColor: this.themeService.theme.palette.getAccent(), replyBackground: this.themeService.theme.palette.getBackground(), boxShadow: `0px 0px 1px ${this.themeService.theme.palette.getAccent600()}`, closeIconTint: this.themeService.theme.palette.getAccent600(), background: this.themeService.theme.palette.getBackground() }, this.smartReplyStyle);
+        this.conversationStarterStyle = Object.assign({ replyTextFont: fontHelper(this.themeService.theme.typography.caption1), replyTextColor: this.themeService.theme.palette.getAccent(), replyBackground: this.themeService.theme.palette.getBackground(), boxShadow: `0px 0px 1px ${this.themeService.theme.palette.getAccent600()}`, closeIconTint: this.themeService.theme.palette.getAccent600(), background: this.themeService.theme.palette.getBackground() }, this.conversationStarterStyle);
         this.fullScreenViewerStyle.closeIconTint = this.themeService.theme.palette.getPrimary();
         let defaultStyle = new MessageListStyle({
             background: this.themeService.theme.palette.getBackground(),
@@ -8827,42 +9404,6 @@ class CometChatMessageListComponent {
     }
     addMessageEventListeners() {
         try {
-            CometChat.addMessageListener(this.msgListenerId, new CometChat.MessageListener({
-                onTextMessageReceived: (textMessage) => {
-                    this.messageUpdate(CometChatUIKitConstants.messages.TEXT_MESSAGE_RECEIVED, textMessage);
-                },
-                onCustomMessageReceived: (customMessage) => {
-                    this.messageUpdate(CometChatUIKitConstants.messages.CUSTOM_MESSAGE_RECEIVED, customMessage);
-                },
-                onMediaMessageReceived: (mediaMessage) => {
-                    this.messageUpdate(CometChatUIKitConstants.messages.MEDIA_MESSAGE_RECEIVED, mediaMessage);
-                },
-                onMessagesDelivered: (messageReceipt) => {
-                    this.messageUpdate(CometChatUIKitConstants.messages.MESSAGE_DELIVERED, messageReceipt);
-                },
-                onMessagesRead: (messageReceipt) => {
-                    this.messageUpdate(CometChatUIKitConstants.messages.MESSAGE_READ, messageReceipt);
-                },
-                onMessageDeleted: (deletedMessage) => {
-                    this.messageUpdate(CometChatUIKitConstants.messages.MESSAGE_DELETED, deletedMessage);
-                },
-                onMessageEdited: (editedMessage) => {
-                    this.messageUpdate(CometChatUIKitConstants.messages.MESSAGE_EDITED, editedMessage);
-                },
-                onTransientMessageReceived: (transientMessage) => {
-                    var _a, _b;
-                    let liveReaction = transientMessage.getData();
-                    console.log(liveReaction);
-                    if (transientMessage.getReceiverType() == CometChatUIKitConstants.MessageReceiverType.user && this.user && (transientMessage === null || transientMessage === void 0 ? void 0 : transientMessage.getSender().getUid()) == this.user.getUid() && transientMessage.getReceiverId() == ((_a = this.loggedInUser) === null || _a === void 0 ? void 0 : _a.getUid())) {
-                        CometChatMessageEvents.ccLiveReaction.next(liveReaction["reaction"]);
-                        return;
-                    }
-                    else if (transientMessage.getReceiverType() == CometChatUIKitConstants.MessageReceiverType.group && this.group && transientMessage.getReceiverId() == this.group.getGuid() && (transientMessage === null || transientMessage === void 0 ? void 0 : transientMessage.getSender().getUid()) != ((_b = this.loggedInUser) === null || _b === void 0 ? void 0 : _b.getUid())) {
-                        CometChatMessageEvents.ccLiveReaction.next(liveReaction["reaction"]);
-                        return;
-                    }
-                },
-            }));
             CometChat.addGroupListener(this.groupListenerId, new CometChat.GroupListener({
                 onGroupMemberScopeChanged: (message, changedUser, newScope, oldScope, changedGroup) => {
                     this.messageUpdate(CometChatUIKitConstants.groupMemberAction.SCOPE_CHANGE, message, changedGroup, { user: changedUser, scope: newScope });
@@ -8917,6 +9458,51 @@ class CometChatMessageListComponent {
                     }
                 }));
             }
+            this.onTextMessageReceived = CometChatMessageEvents.onTextMessageReceived.subscribe((message) => {
+                this.messageUpdate(CometChatUIKitConstants.messages.TEXT_MESSAGE_RECEIVED, message);
+            });
+            this.onMediaMessageReceived = CometChatMessageEvents.onMediaMessageReceived.subscribe((message) => {
+                this.messageUpdate(CometChatUIKitConstants.messages.MEDIA_MESSAGE_RECEIVED, message);
+            });
+            this.onCustomMessageReceived = CometChatMessageEvents.onCustomMessageReceived.subscribe((message) => {
+                this.messageUpdate(CometChatUIKitConstants.messages.CUSTOM_MESSAGE_RECEIVED, message);
+            });
+            this.onFormMessageReceived = CometChatMessageEvents.onFormMessageReceived.subscribe((message) => {
+                this.messageUpdate(CometChatUIKitConstants.messages.INTERACTIVE_MESSAGE_RECEIVED, message);
+            });
+            this.onCardMessageReceived = CometChatMessageEvents.onCardMessageReceived.subscribe((message) => {
+                this.messageUpdate(CometChatUIKitConstants.messages.INTERACTIVE_MESSAGE_RECEIVED, message);
+            });
+            this.onCustomInteractiveMessageReceived = CometChatMessageEvents.onCustomInteractiveMessageReceived.subscribe((message) => {
+                this.messageUpdate(CometChatUIKitConstants.messages.INTERACTIVE_MESSAGE_RECEIVED, message);
+            });
+            this.onMessagesDelivered = CometChatMessageEvents.onMessagesDelivered.subscribe((messageReceipt) => {
+                this.messageUpdate(CometChatUIKitConstants.messages.MESSAGE_DELIVERED, messageReceipt);
+            });
+            this.onMessagesRead = CometChatMessageEvents.onMessagesRead.subscribe((messageReceipt) => {
+                this.messageUpdate(CometChatUIKitConstants.messages.MESSAGE_READ, messageReceipt);
+            });
+            this.onMessageDeleted = CometChatMessageEvents.onMessageDeleted.subscribe((deletedMessage) => {
+                this.messageUpdate(CometChatUIKitConstants.messages.MESSAGE_DELETED, deletedMessage);
+            });
+            this.onMessageEdited = CometChatMessageEvents.onMessageEdited.subscribe((editedMessage) => {
+                this.messageUpdate(CometChatUIKitConstants.messages.MESSAGE_EDITED, editedMessage);
+            });
+            this.onTransientMessageReceived = CometChatMessageEvents.onTransientMessageReceived.subscribe((transientMessage) => {
+                var _a, _b;
+                let liveReaction = transientMessage.getData();
+                if (transientMessage.getReceiverType() == CometChatUIKitConstants.MessageReceiverType.user && this.user && (transientMessage === null || transientMessage === void 0 ? void 0 : transientMessage.getSender().getUid()) == this.user.getUid() && transientMessage.getReceiverId() == ((_a = this.loggedInUser) === null || _a === void 0 ? void 0 : _a.getUid())) {
+                    CometChatMessageEvents.ccLiveReaction.next(liveReaction["reaction"]);
+                    return;
+                }
+                else if (transientMessage.getReceiverType() == CometChatUIKitConstants.MessageReceiverType.group && this.group && transientMessage.getReceiverId() == this.group.getGuid() && (transientMessage === null || transientMessage === void 0 ? void 0 : transientMessage.getSender().getUid()) != ((_b = this.loggedInUser) === null || _b === void 0 ? void 0 : _b.getUid())) {
+                    CometChatMessageEvents.ccLiveReaction.next(liveReaction["reaction"]);
+                    return;
+                }
+            });
+            this.onInteractionGoalCompleted = CometChatMessageEvents.onInteractionGoalCompleted.subscribe((receipt) => {
+                this.messageUpdate(CometChatUIKitConstants.messages.INTERACTION_GOAL_COMPLETED, receipt);
+            });
         }
         catch (error) {
             if (this.onError) {
@@ -8937,6 +9523,9 @@ class CometChatMessageListComponent {
      */
     messageUpdate(key = null, message = null, group = null, options = null) {
         try {
+            this.showConversationStarter = false;
+            this.conversationStarterReplies = [];
+            this.ref.detectChanges();
             switch (key) {
                 case CometChatUIKitConstants.messages.TEXT_MESSAGE_RECEIVED:
                 case CometChatUIKitConstants.messages.MEDIA_MESSAGE_RECEIVED:
@@ -8962,8 +9551,12 @@ class CometChatMessageListComponent {
                     break;
                 }
                 case CometChatUIKitConstants.messages.CUSTOM_MESSAGE_RECEIVED:
+                case CometChatUIKitConstants.messages.INTERACTIVE_MESSAGE_RECEIVED:
                     this.customMessageReceived(message);
                     break;
+                case CometChatUIKitConstants.messages.INTERACTION_GOAL_COMPLETED:
+                    this.updateInteractiveMessage(message);
+                    break;
                 default:
                     return;
             }
@@ -9047,7 +9640,6 @@ class CometChatMessageListComponent {
     }
     reInitializeMessageList() {
         this.reinitialized = true;
-        this.msgListenerId = "message_" + new Date().getTime();
         this.groupListenerId = "group_" + new Date().getTime();
         this.callListenerId = "call_" + new Date().getTime();
         this.addMessageEventListeners();
@@ -9385,6 +9977,9 @@ class CometChatMessageListComponent {
                         break;
                     }
                     case MessageStatus.success: {
+                        this.showConversationStarter = false;
+                        this.conversationStarterReplies = [];
+                        this.ref.detectChanges();
                         if (message.getParentMessageId() || this.parentMessageId) {
                             this.updateReplyCount(message);
                         }
@@ -9419,6 +10014,41 @@ class CometChatMessageListComponent {
             this.addMessage(call);
         });
     }
+    fetchConversationStarter() {
+        this.showConversationStarter = true;
+        this.conversationStarterState = States.loading;
+        let receiverType = this.user ? CometChatUIKitConstants.MessageReceiverType.user : CometChatUIKitConstants.MessageReceiverType.group;
+        let receiverId = this.user ? this.user.getUid() : this.group.getGuid();
+        CometChat.getConversationStarter(receiverId, receiverType).then((response) => {
+            var _a;
+            if (response) {
+                Object.keys(response).forEach((reply) => {
+                    if (response[reply] && response[reply] != "") {
+                        this.conversationStarterReplies.push(response[reply]);
+                    }
+                });
+                if (this.conversationStarterReplies && this.conversationStarterReplies.length > 0 && ((_a = this.messagesList) === null || _a === void 0 ? void 0 : _a.length) <= 0) {
+                    this.conversationStarterState = States.loaded;
+                    this.ref.detectChanges();
+                }
+                else {
+                    this.conversationStarterState = States.empty;
+                    this.ref.detectChanges();
+                }
+            }
+            else {
+                this.conversationStarterState = States.empty;
+                this.ref.detectChanges();
+            }
+        })
+            .catch((err) => {
+            if (this.onError) {
+                this.onError(err);
+            }
+            this.conversationStarterState = States.error;
+            this.ref.detectChanges();
+        });
+    }
     getReplies() {
         var _a, _b, _c;
         let smartReply = this.smartReplyMessage;
@@ -9445,10 +10075,10 @@ class CometChatMessageListComponent {
     }
 }
 CometChatMessageListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageListComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
-CometChatMessageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatMessageListComponent, selector: "cometchat-message-list", inputs: { hideError: "hideError", errorStateView: "errorStateView", loadingStateView: "loadingStateView", emptyStateView: "emptyStateView", errorStateText: "errorStateText", emptyStateText: "emptyStateText", loadingIconURL: "loadingIconURL", user: "user", group: "group", disableReceipt: "disableReceipt", disableSoundForMessages: "disableSoundForMessages", customSoundForMessages: "customSoundForMessages", readIcon: "readIcon", deliveredIcon: "deliveredIcon", sentIcon: "sentIcon", waitIcon: "waitIcon", errorIcon: "errorIcon", alignment: "alignment", showAvatar: "showAvatar", datePattern: "datePattern", timestampAlignment: "timestampAlignment", DateSeparatorPattern: "DateSeparatorPattern", templates: "templates", messagesRequestBuilder: "messagesRequestBuilder", newMessageIndicatorText: "newMessageIndicatorText", scrollToBottomOnNewMessages: "scrollToBottomOnNewMessages", thresholdValue: "thresholdValue", onThreadRepliesClick: "onThreadRepliesClick", headerView: "headerView", footerView: "footerView", parentMessageId: "parentMessageId", avatarStyle: "avatarStyle", backdropStyle: "backdropStyle", dateSeparatorStyle: "dateSeparatorStyle", messageListStyle: "messageListStyle", onError: "onError", messageInformationConfiguration: "messageInformationConfiguration" }, viewQueries: [{ propertyName: "listScroll", first: true, predicate: ["listScroll"], descendants: true }, { propertyName: "bottom", first: true, predicate: ["bottom"], descendants: true }, { propertyName: "top", first: true, predicate: ["top"], descendants: true }, { propertyName: "textBubble", first: true, predicate: ["textBubble"], descendants: true }, { propertyName: "threadMessageBubble", first: true, predicate: ["threadMessageBubble"], descendants: true }, { propertyName: "fileBubble", first: true, predicate: ["fileBubble"], descendants: true }, { propertyName: "audioBubble", first: true, predicate: ["audioBubble"], descendants: true }, { propertyName: "videoBubble", first: true, predicate: ["videoBubble"], descendants: true }, { propertyName: "imageBubble", first: true, predicate: ["imageBubble"], descendants: true }, { propertyName: "stickerBubble", first: true, predicate: ["stickerBubble"], descendants: true }, { propertyName: "documentBubble", first: true, predicate: ["documentBubble"], descendants: true }, { propertyName: "whiteboardBubble", first: true, predicate: ["whiteboardBubble"], descendants: true }, { propertyName: "popoverRef", first: true, predicate: ["popoverRef"], descendants: true }, { propertyName: "directCalling", first: true, predicate: ["directCalling"], descendants: true }, { propertyName: "pollBubble", first: true, predicate: ["pollBubble"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-message-list__wrapper\" [ngStyle]=\"wrapperStyle()\" *ngIf=\"!openContactsView\">\n  <div class=\"cc-message-list__header-view\">\n<div *ngIf=\"headerView\">\n  <ng-container *ngTemplateOutlet=\"headerView\">\n  </ng-container>\n</div>\n        </div>\n  <div class=\"cc-message-list\" #listScroll [ngStyle]=\"{height: showSmartReply ? '92%' : '100%'}\">\n    <div class=\"cc-message-list__top\" #top>\n    </div>\n    <div class=\"cc-message-list__decorator-message\" *ngIf=\"state == states.loading || state == states.error  || state == states.empty \"\n      [ngStyle]=\"messageContainerStyle()\">\n      <div class=\"cc-message-list__loading-view\" *ngIf=\"state == states.loading \">\n        <cometchat-loader [iconURL]=\"loadingIconURL\" [loaderStyle]=\"loadingStyle()\">\n        </cometchat-loader>\n        <span class=\"cc-message-list__customview--loading\" *ngIf=\"state == states.loading  && loadingStateView\">\n          <ng-container *ngTemplateOutlet=\"loadingStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"cc-message-list__error-view\" *ngIf=\"state == states.error  && !hideError \">\n        <cometchat-label [labelStyle]=\"errorStyle()\" *ngIf=\"state == states.error  && !hideError && !errorStateView\" [text]=\"errorStateText\"\n          >\n        </cometchat-label>\n        <span class=\"cc-message-list__custom-view--error\" *ngIf=\"state == states.error  && !hideError && errorStateView\">\n          <ng-container *ngTemplateOutlet=\"errorStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"cc-message-list__empty-view\" *ngIf=\"state == states.empty\">\n        <cometchat-label [labelStyle]=\"emptyStyle()\" *ngIf=\"state == states.empty && !emptyStateView\" [text]=\"emptyStateText\"\n          >\n        </cometchat-label>\n        <span class=\"cc-message-list__custom-view--empty\" *ngIf=\"state == states.empty && emptyStateView\">\n          <ng-container *ngTemplateOutlet=\"emptyStateView\">\n          </ng-container>\n        </span>\n      </div>\n    </div>\n    <div class=\"cc-message-list__bubble\" *ngFor=\"let message of messagesList; let i = index\">\n      <div class=\"cc-message-list__date-container\" *ngIf=\"(i === 0) && message?.getSentAt()\">\n        <span class=\"cc-message-list__date\" >\n          <cometchat-date [timestamp]=\"message!.getSentAt()\"  [pattern]=\"DateSeparatorPattern\" [dateStyle]=\"dateSeparatorStyle\"\n           >\n          </cometchat-date>\n        </span>\n      </div>\n      <div class=\"cc-message-list__date-container\" *ngIf=\"(i > 0 && isDateDifferent(messagesList[i - 1]?.getSentAt(), messagesList[i]?.getSentAt())) && message?.getSentAt()\">\n        <span class=\"cc-message-list__date\"  >\n          <cometchat-date [timestamp]=\"message?.getSentAt()\" [pattern]=\"DateSeparatorPattern\"   [dateStyle]=\"dateSeparatorStyle\"\n           >\n          </cometchat-date>\n        </span>\n      </div>\n        <div *ngIf=\"getBubbleWrapper(message) \">\n          <ng-container *ngTemplateOutlet=\"getBubbleWrapper(message)\">\n          </ng-container>\n        </div>\n       <div>\n        <cometchat-message-bubble  *ngIf=\"!getBubbleWrapper(message)\" [leadingView]=\" showAvatar ? leadingView : null\" [bottomView]=\"enableReactions ? reactionView : null\"\n        [headerView]=\"getHeaderView(message) || message?.getCategory() != MessageCategory.action && showHeaderTitle(message) ? bubbleHeader : null\" [footerView]=\"footerView\"  [contentView]=\"contentView\" [threadView]=\"threadView\"\n         [id]=\"message?.getId() || message?.getMuid()\" [options]=\"setMessageOptions(message)\"\n          [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"  [alignment]=\"setBubbleAlignment(message)\">\n        <ng-template #contentView>\n          <ng-container *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\" >\n          </ng-container>\n        </ng-template>\n        <ng-template #reactionView>\n          <reactions-view *ngIf=\"hasReaction(message)\" [messageObject]=\"message\" [alignment]=\"setBubbleAlignment(message)\"  [addReactionIconURL]=\"addReactionIconURL\"\n          [loggedInUser]=\"loggedInUser\" [reactionsStyle]=\"reactionsStyle(message)\"></reactions-view>\n          </ng-template>\n         <ng-template #footerView>\n          <div  class=\"cc-message-list__bubble-footer\">\n            <div *ngIf=\"getFooterView(message);else bubbleFooter\">\n              <ng-container *ngTemplateOutlet=\"getFooterView(message);context:{ $implicit: message }\" >\n              </ng-container>\n            </div>\n            <ng-template #bubbleFooter>\n              <div class=\"cc-message-list__bubble-date\" *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && !message.getDeletedAt() && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n                <cometchat-date [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" [pattern]=\"datePattern\">\n                </cometchat-date>\n               </div>\n                 <div *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() ||this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\" class=\"cc-message-list__receipt\">\n                    <cometchat-receipt [receipt]=\"getMessageReceipt(message)\" [receiptStyle]=\"receiptStyle\" [waitIcon]=\"waitIcon\" [sentIcon]=\"sentIcon\" [deliveredIcon]=\"deliveredIcon\" [readIcon]=\"readIcon\" [errorIcon]=\"errorIcon\"></cometchat-receipt>\n                 </div>\n            </ng-template>\n          </div>\n         </ng-template>\n<ng-template #leadingView>\n  <div  *ngIf=\" message?.getCategory() != MessageCategory.action  && showHeaderTitle(message)\" >\n    <cometchat-avatar [name]=\"message?.getSender()?.getName()\" [avatarStyle]=\"avatarStyle\" [image]=\"message?.getSender()?.getAvatar()\">\n    </cometchat-avatar>\n  </div>\n</ng-template>\n<ng-template #bubbleHeader>\n  <div *ngIf=\"getHeaderView(message);else defaultHeader\">\n    <ng-container *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\" >\n    </ng-container>\n  </div>\n<ng-template #defaultHeader>\n  <div  class=\"cc-message-list__bubble-header\" *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n    <cometchat-label [text]=\"message?.getSender()?.getName()\" [labelStyle]=\"labelStyle\"></cometchat-label>\n    <cometchat-date [pattern]=\"datePattern\" [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n   </div>\n</ng-template>\n</ng-template>\n<ng-template #threadView>\n  <div class=\"cc-message-list__threadreplies\" *ngIf=\"message?.getReplyCount() && !message.getDeletedAt()\" >\n    <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n    <cometchat-button [text]=\"getThreadCount(message)\" [buttonStyle]=\"getThreadViewStyle(message)\" [iconURL]=\"threadOpenIcon\" (cc-button-clicked)=\"openThreadView(message)\">\n    </cometchat-button>\n  </div>\n</ng-template>\n      </cometchat-message-bubble>\n       </div>\n    </div>\n    <div class=\"cc-message-list__bottom\" #bottom>\n    </div>\n\n  </div>\n  <div class=\"cc-message-list__message-indicator\" *ngIf=\"UnreadCount && UnreadCount.length > 0 && !isOnBottom\" [ngStyle]=\"{bottom: showSmartReply || footerView ? '20%' : '13%'}\">\n    <cometchat-button [text]=\"newMessageCount\" [buttonStyle]=\"unreadMessagesStyle\" (cc-button-clicked)=\"scrollToBottom()\"></cometchat-button>\n  </div>\n  <div class=\"cc-message-list__footer-view\" [ngStyle]=\"{height: showSmartReply  ? '8%' : 'auto'}\">\n\n    <div *ngIf=\"footerView;else footer\">\n      <ng-container *ngTemplateOutlet=\"footerView\">\n      </ng-container>\n    </div>\n    <ng-template #footer>\n      <div class=\"cc-message-list__smart-replies\" *ngIf=\"showSmartReply && getReplies()\">\n        <smart-replies [smartReplyStyle]=\"smartReplyStyle\" [replies]=\"getReplies()\" (cc-reply-clicked)=\"sendReply($event)\" (cc-close-clicked)=\"closeSmartReply()\">\n        </smart-replies>\n      </div>\n    </ng-template>\n        </div>\n\n</div>\n<!-- default bubbles -->\n<ng-template #textBubble let-message>\n  <cometchat-text-bubble *ngIf=\"message?.type == MessageTypesConstant.groupMember\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"message?.message\"></cometchat-text-bubble>\n  <cometchat-text-bubble *ngIf=\"message?.getDeletedAt()\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"localize('MESSAGE_IS_DELETED')\"></cometchat-text-bubble>\n<cometchat-text-bubble *ngIf=\"!isTranslated(message) && !getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"getTextMessage(message)\"></cometchat-text-bubble>\n<link-preview [linkPreviewStyle]=\"linkPreviewStyle\" (cc-link-clicked)=\"openLinkURL($event)\" *ngIf=\"!message?.getDeletedAt() && getLinkPreview(message) && enableLinkPreview\" [title]=\"getLinkPreviewDetails('title',message)\" [description]=\"getLinkPreviewDetails('description',message)\" [URL]=\"getLinkPreviewDetails('url',message)\" [image]=\"getLinkPreviewDetails('image',message)\" [favIconURL]=\"getLinkPreviewDetails('favicon',message)\">\n  <cometchat-text-bubble\n  *ngIf=\"!isTranslated(message) && getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n  [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"getTextMessage(message)\"></cometchat-text-bubble>\n</link-preview>\n<message-translation-bubble [alignment]=\"getBubbleAlignment(message)\" *ngIf=\"isTranslated(message)\"  [messageTranslationStyle]=\"setTranslationStyle(message)\" [translatedText]=\"isTranslated(message)\">\n  <cometchat-text-bubble *ngIf=\" !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"message?.text\"></cometchat-text-bubble>\n\n</message-translation-bubble>\n</ng-template>\n<ng-template #fileBubble let-message>\n\n  <cometchat-file-bubble [fileStyle]=\"setFileBubbleStyle(message)\" [downloadIconURL]=\"downloadIconURL\" [subtitle]=\"localize('SHARED_FILE')\" [title]=\"message?.data?.attachments ? message?.data?.attachments[0]?.name: ''\" [fileURL]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\"></cometchat-file-bubble>\n</ng-template>\n<ng-template #audioBubble let-message>\n  <cometchat-icon-button [disabled]=\"true\" *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.audio\" [iconURL]=\"getCallTypeIcon(message)\" [buttonStyle]=\"callStatusStyle(message)\" [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n  <cometchat-audio-bubble *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\"  [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\" > </cometchat-audio-bubble>\n</ng-template>\n<ng-template #videoBubble let-message>\n  <cometchat-icon-button [disabled]=\"true\" *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.video\" [iconURL]=\"getCallTypeIcon(message)\" [buttonStyle]=\"callStatusStyle(message)\" [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n\n  <cometchat-video-bubble *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\" [videoStyle]=\"videoBubbleStyle\" [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\" [poster]=\" getImageThumbnail(message)\"></cometchat-video-bubble>\n</ng-template>\n<ng-template #imageBubble let-message>\n <image-moderation  (cc-show-dialog)=\"openWarningDialog($event)\" *ngIf=\"!message.getDeletedAt() && enableImageModeration\" [message]=\"message\" [imageModerationStyle]=\"imageModerationStyle\">\n  <cometchat-image-bubble (cc-image-clicked)=\"openImageInFullScreen(message)\" [imageStyle]=\"imageBubbleStyle\"   [src]=\" getImageThumbnail(message)\" [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n </image-moderation>\n  <cometchat-image-bubble [imageStyle]=\"imageBubbleStyle\" (cc-image-clicked)=\"openImageInFullScreen(message)\" *ngIf=\"!message.getDeletedAt() && !enableImageModeration\"  [src]=\" getImageThumbnail(message)\" [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n</ng-template>\n<ng-template #customTextBubble>\n</ng-template>\n<ng-template #stickerBubble  let-message>\n  <cometchat-image-bubble [src]=\"getSticker(message)\" [imageStyle]=\"imageBubbleStyle\" ></cometchat-image-bubble>\n\n</ng-template>\n<ng-template #whiteboardBubble  let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\" [iconAlignment]=\"documentBubbleAlignment\" [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\" [ccClicked]=\"launchCollaborativeWhiteboardDocument\" [iconURL]=\"whiteboardIconURL\" [title]=\"whiteboardTitle\" [buttonText]=\"whiteboardButtonText\" [subtitle]=\"whiteboardSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #documentBubble  let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\" [iconAlignment]=\"documentBubbleAlignment\" [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\" [ccClicked]=\"launchCollaborativeWhiteboardDocument\" [iconURL]=\"documentIconURL\" [title]=\"documentTitle\" [buttonText]=\"documentButtonText\" [subtitle]=\"documentSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #directCalling  let-message>\n  <cometchat-document-bubble  [hideSeparator]=\"true\" [iconAlignment]=\"callBubbleAlignment\" [documentStyle]=\"getCallBubbleStyle(message)\" [URL]=\"getSessionId(message)\" [ccClicked]=\"startDirectCall\" [iconURL]=\"directCallIconURL\" [title]=\"getCallBubbleTitle(message)\" [buttonText]=\"joinCallButtonText\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #pollBubble  let-message>\n  <polls-bubble [pollStyle]=\"pollBubbleStyle\"  [pollQuestion]=\"getPollBubbleData(message,'question')\" [pollId]=\"getPollBubbleData(message,'id')\"\n   [loggedInUser]=\"loggedInUser\" [senderUid]=\"getPollBubbleData(message)\" [metadata]=\"message?.metadata\"></polls-bubble>\n\n</ng-template>\n\n<!-- thread bubble view -->\n<ng-template #threadMessageBubble let-message>\n  <div *ngIf=\"getBubbleWrapper(message)\">\n    <ng-container *ngTemplateOutlet=\"getBubbleWrapper(message)\">\n    </ng-container>\n  </div>\n  <cometchat-message-bubble  *ngIf=\"!getBubbleWrapper(message)\" [bottomView]=\"enableReactions ? reactionView : null\" [leadingView]=\" showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\" [footerView]=\"footerView\"\n  [contentView]=\"contentView\"  [id]=\"message?.getId() || message?.getMuid()\"  [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"  [alignment]=\"threadedAlignment\">\n    <ng-template #contentView>\n      <ng-container *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\" >\n      </ng-container>\n    </ng-template>\n    <ng-template #reactionView>\n      <reactions-view *ngIf=\"hasReaction(message)\" [messageObject]=\"message\" [alignment]=\"setBubbleAlignment(message)\"\n      \n      [loggedInUser]=\"loggedInUser\" [reactionsStyle]=\"reactionsStyle(message)\" [addReactionIconURL]=\"addReactionIconURL\"></reactions-view>\n      </ng-template>\n     <ng-template #footerView>\n      <div  class=\"cc-message-list__bubble-footer\">\n        <div *ngIf=\"getFooterView(message);else bubbleFooter\">\n          <ng-container *ngTemplateOutlet=\"getFooterView(message);context:{ $implicit: message }\" >\n          </ng-container>\n        </div>\n        <ng-template #bubbleFooter>\n          <div class=\"cc-message-list__bubble-date\" *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n            <cometchat-date [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" [pattern]=\"datePattern\">\n            </cometchat-date>\n           </div>\n             <div *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() ||this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\" class=\"cc-message-list__receipt\">\n                <cometchat-receipt [receipt]=\"getMessageReceipt(message)\" [receiptStyle]=\"receiptStyle\" [waitIcon]=\"waitIcon\" [sentIcon]=\"sentIcon\" [deliveredIcon]=\"\" [readIcon]=\"deliveredIcon\" [errorIcon]=\"errorIcon\"></cometchat-receipt>\n             </div>\n        </ng-template>\n      </div>\n     </ng-template>\n<ng-template #leadingView>\n<div  *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\" >\n<cometchat-avatar [name]=\"message?.getSender()?.getName()\" [avatarStyle]=\"avatarStyle\" [image]=\"message?.getSender()?.getAvatar()\">\n</cometchat-avatar>\n</div>\n</ng-template>\n<ng-template #bubbleHeader>\n<div *ngIf=\"getHeaderView(message);else defaultHeader\">\n<ng-container *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\" >\n</ng-container>\n</div>\n<ng-template #defaultHeader>\n<div  class=\"cc-message-list__bubble-header\" *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n<cometchat-label [text]=\"message?.getSender()?.getName()\" [labelStyle]=\"labelStyle\"></cometchat-label>\n<cometchat-date [pattern]=\"datePattern\" [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n</div>\n</ng-template>\n</ng-template>\n  </cometchat-message-bubble>\n\n</ng-template>\n\n\n<!--  -->\n<ng-template #bubbleView></ng-template>\n<cometchat-popover [popoverStyle]=\"popoverStyle\"  #popoverRef [placement]=\"keyboardAlignment\">\n<cometchat-emoji-keyboard (cc-emoji-clicked)=\"addReaction($event)\"  slot=\"content\"></cometchat-emoji-keyboard>\n</cometchat-popover>\n<cometchat-backdrop *ngIf=\"openConfirmDialog\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-confirm-dialog [title]=\"''\" [messageText]=\"warningText\" (cc-confirm-clicked)=\"onConfirmClick()\" [cancelButtonText]=\"cancelText\" [confirmButtonText]=\"confirmText\" (cc-cancel-clicked)=\"onCancelClick()\" [confirmDialogStyle]=\"confirmDialogStyle\">\n\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-full-screen-viewer (cc-close-clicked)=\"closeImageInFullScreen()\" *ngIf=\"openFullscreenView\" [URL]=\"imageurlToOpen\" [closeIconURL]=\"closeIconURL\" [fullScreenViewerStyle]=\"fullScreenViewerStyle\">\n\n</cometchat-full-screen-viewer>\n\n<!-- ongoing callscreen for direct call -->\n<cometchat-ongoing-call *ngIf=\"showOngoingCall\" [callSettingsBuilder]=\"getCallBuilder()\" [ongoingCallStyle]=\"ongoingCallStyle\" [sessionID]=\"sessionId\"></cometchat-ongoing-call>\n<!-- message information view -->\n<!-- thread bubble view -->\n<ng-template #messageinfoBubble let-message>\n  <div *ngIf=\"getBubbleWrapper(message)\">\n    <ng-container *ngTemplateOutlet=\"getBubbleWrapper(message)\">\n    </ng-container>\n  </div>\n  <cometchat-message-bubble  *ngIf=\"!getBubbleWrapper(message)\" [bottomView]=\"enableReactions && hasReaction(message) ? reactionView : null\" [leadingView]=\" showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\"\n  [contentView]=\"contentView\"  [id]=\"message?.getId() || message?.getMuid()\"  [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"  [alignment]=\"messageInfoAlignment\">\n    <ng-template #contentView>\n      <ng-container *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\" >\n      </ng-container>\n    </ng-template>\n    <ng-template #reactionView>\n      <reactions-view *ngIf=\"hasReaction(message)\" [messageObject]=\"message\" [alignment]=\"setBubbleAlignment(message)\"  [addReactionIconURL]=\"addReactionIconURL\"\n      [loggedInUser]=\"loggedInUser\" [reactionsStyle]=\"reactionsStyle(message)\"></reactions-view>\n      </ng-template>\n<ng-template #leadingView>\n<div  *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\" >\n<cometchat-avatar [name]=\"message?.getSender()?.getName()\" [avatarStyle]=\"avatarStyle\" [image]=\"message?.getSender()?.getAvatar()\">\n</cometchat-avatar>\n</div>\n</ng-template>\n<ng-template #bubbleHeader>\n<div *ngIf=\"getHeaderView(message);else defaultHeader\">\n<ng-container *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\" >\n</ng-container>\n</div>\n<ng-template #defaultHeader>\n<div  class=\"cc-message-list__bubble-header\" *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n<cometchat-label [text]=\"message?.getSender()?.getName()\" [labelStyle]=\"labelStyle\"></cometchat-label>\n<cometchat-date [pattern]=\"datePattern\" [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n</div>\n</ng-template>\n</ng-template>\n  </cometchat-message-bubble>\n\n</ng-template>\n<cometchat-backdrop *ngIf=\"openMessageInfoPage\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-message-information [closeIconURL]=\"messageInformationConfiguration.closeIconURL\"  [loadingStateView]=\"messageInformationConfiguration.loadingStateView\" [errorStateView]=\"messageInformationConfiguration.errorStateView\" [listItemStyle]=\"messageInformationConfiguration.listItemStyle\" [emptyStateView]=\"messageInformationConfiguration.emptyStateView\" [loadingIconURL]=\"messageInformationConfiguration.loadingIconURL\" [readIcon]=\"messageInformationConfiguration.readIcon\" [deliveredIcon]=\"messageInformationConfiguration.deliveredIcon\" [onError]=\"messageInformationConfiguration.onError\" [SubtitleView]=\"messageInformationConfiguration.subtitleView\" [receiptDatePattern]=\"messageInformationConfiguration.receiptDatePattern\" [listItemView]=\"messageInformationConfiguration.listItemView \" [messageInformationStyle]=\"messageInformationConfiguration.messageInformationStyle\" [onClose]=\"messageInformationConfiguration.onClose ??  closeMessageInfoPage\" [bubbleView]=\"messageInformationConfiguration.bubbleView ?? messageinfoBubble\" [message]=\"messageInfoObject\">\n\n  </cometchat-message-information>\n</cometchat-backdrop>\n", styles: [".cc-message-list{height:100%;width:100%;overflow-y:auto;overflow-x:hidden;position:relative}.cc-message-list__wrapper{height:100%;width:100%;overflow-y:hidden}.cc-message-list__bubble-footer{display:flex;justify-content:center;align-items:center}.cc-message-list__date-container{text-align:center;margin:5px 0}.cc-message-list__smart-replies{height:-moz-fit-content;height:fit-content;width:100%;position:absolute;bottom:0;z-index:1}.cc-message-list__date{border-radius:10px;display:flex;justify-content:center}.cc-message-list__threadreplies{min-width:130px;width:100%}.cc-message-list__message-indicator{height:25px;display:flex;align-items:center;justify-content:center;width:100%;bottom:10%;position:absolute}.cc-message-list__footer-view{z-index:1;position:relative;width:100%}.cc-message-list__decorator-message{margin:0;line-height:30px;word-wrap:break-word;padding:0 8px;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;height:100%}.cc-message-list::-webkit-scrollbar{background:transparent;width:8px}.cc-message-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}\n"], components: [{ type: CometChatMessageBubbleComponent, selector: "cometchat-message-bubble", inputs: ["messageBubbleStyle", "alignment", "options", "id", "leadingView", "headerView", "replyView", "contentView", "threadView", "footerView", "bottomView", "moreIconURL", "topMenuSize"] }, { type: CometChatOngoingCallComponent, selector: "cometchat-ongoing-call", inputs: ["ongoingCallStyle", "resizeIconHoverText", "sessionID", "minimizeIconURL", "maximizeIconURL", "callSettingsBuilder", "callWorkflow", "onError"] }, { type: CometChatMessageInformationComponent, selector: "cometchat-message-information", inputs: ["closeIconURL", "message", "title", "template", "bubbleView", "subtitleView", "listItemView", "receiptDatePattern", "onError", "messageInformationStyle", "readIcon", "deliveredIcon", "onClose", "listItemStyle", "emptyStateText", "errorStateText", "emptyStateView", "loadingIconURL", "loadingStateView", "errorStateView"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CometChatMessageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatMessageListComponent, selector: "cometchat-message-list", inputs: { hideError: "hideError", errorStateView: "errorStateView", loadingStateView: "loadingStateView", emptyStateView: "emptyStateView", errorStateText: "errorStateText", emptyStateText: "emptyStateText", loadingIconURL: "loadingIconURL", user: "user", group: "group", disableReceipt: "disableReceipt", disableSoundForMessages: "disableSoundForMessages", customSoundForMessages: "customSoundForMessages", readIcon: "readIcon", deliveredIcon: "deliveredIcon", sentIcon: "sentIcon", waitIcon: "waitIcon", errorIcon: "errorIcon", alignment: "alignment", showAvatar: "showAvatar", datePattern: "datePattern", timestampAlignment: "timestampAlignment", DateSeparatorPattern: "DateSeparatorPattern", templates: "templates", messagesRequestBuilder: "messagesRequestBuilder", newMessageIndicatorText: "newMessageIndicatorText", scrollToBottomOnNewMessages: "scrollToBottomOnNewMessages", thresholdValue: "thresholdValue", onThreadRepliesClick: "onThreadRepliesClick", headerView: "headerView", footerView: "footerView", parentMessageId: "parentMessageId", avatarStyle: "avatarStyle", backdropStyle: "backdropStyle", dateSeparatorStyle: "dateSeparatorStyle", messageListStyle: "messageListStyle", onError: "onError", messageInformationConfiguration: "messageInformationConfiguration" }, viewQueries: [{ propertyName: "listScroll", first: true, predicate: ["listScroll"], descendants: true }, { propertyName: "bottom", first: true, predicate: ["bottom"], descendants: true }, { propertyName: "top", first: true, predicate: ["top"], descendants: true }, { propertyName: "textBubble", first: true, predicate: ["textBubble"], descendants: true }, { propertyName: "threadMessageBubble", first: true, predicate: ["threadMessageBubble"], descendants: true }, { propertyName: "fileBubble", first: true, predicate: ["fileBubble"], descendants: true }, { propertyName: "audioBubble", first: true, predicate: ["audioBubble"], descendants: true }, { propertyName: "videoBubble", first: true, predicate: ["videoBubble"], descendants: true }, { propertyName: "imageBubble", first: true, predicate: ["imageBubble"], descendants: true }, { propertyName: "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  <div class=\"cc-message-list__header-view\">\n<div *ngIf=\"headerView\">\n  <ng-container *ngTemplateOutlet=\"headerView\">\n  </ng-container>\n</div>\n        </div>\n  <div class=\"cc-message-list\" #listScroll [ngStyle]=\"{height: showSmartReply || showConversationStarter ? '92%' : '100%'}\">\n    <div class=\"cc-message-list__top\" #top>\n    </div>\n    <div class=\"cc-message-list__decorator-message\" *ngIf=\"state == states.loading || state == states.error  || state == states.empty \"\n      [ngStyle]=\"messageContainerStyle()\">\n      <div class=\"cc-message-list__loading-view\" *ngIf=\"state == states.loading \">\n        <cometchat-loader [iconURL]=\"loadingIconURL\" [loaderStyle]=\"loadingStyle()\">\n        </cometchat-loader>\n        <span class=\"cc-message-list__customview--loading\" *ngIf=\"state == states.loading  && loadingStateView\">\n          <ng-container *ngTemplateOutlet=\"loadingStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"cc-message-list__error-view\" *ngIf=\"state == states.error  && !hideError \">\n        <cometchat-label [labelStyle]=\"errorStyle()\" *ngIf=\"state == states.error  && !hideError && !errorStateView\" [text]=\"errorStateText\"\n          >\n        </cometchat-label>\n        <span class=\"cc-message-list__custom-view--error\" *ngIf=\"state == states.error  && !hideError && errorStateView\">\n          <ng-container *ngTemplateOutlet=\"errorStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"cc-message-list__empty-view\" *ngIf=\"state == states.empty\">\n        <!-- <cometchat-label [labelStyle]=\"emptyStyle()\" *ngIf=\"state == states.empty && !emptyStateView\" [text]=\"emptyStateText\"\n          >\n        </cometchat-label> -->\n        <span class=\"cc-message-list__custom-view--empty\" *ngIf=\"state == states.empty && emptyStateView\">\n          <ng-container *ngTemplateOutlet=\"emptyStateView\">\n          </ng-container>\n        </span>\n      </div>\n    </div>\n    <div class=\"cc-message-list__bubble\" *ngFor=\"let message of messagesList; let i = index\">\n      <div class=\"cc-message-list__date-container\" *ngIf=\"(i === 0) && message?.getSentAt()\">\n        <span class=\"cc-message-list__date\" >\n          <cometchat-date [timestamp]=\"message!.getSentAt()\"  [pattern]=\"DateSeparatorPattern\" [dateStyle]=\"dateSeparatorStyle\"\n           >\n          </cometchat-date>\n        </span>\n      </div>\n      <div class=\"cc-message-list__date-container\" *ngIf=\"(i > 0 && isDateDifferent(messagesList[i - 1]?.getSentAt(), messagesList[i]?.getSentAt())) && message?.getSentAt()\">\n        <span class=\"cc-message-list__date\"  >\n          <cometchat-date [timestamp]=\"message?.getSentAt()\" [pattern]=\"DateSeparatorPattern\"   [dateStyle]=\"dateSeparatorStyle\"\n           >\n          </cometchat-date>\n        </span>\n      </div>\n        <div *ngIf=\"getBubbleWrapper(message) \">\n          <ng-container *ngTemplateOutlet=\"getBubbleWrapper(message)\">\n          </ng-container>\n        </div>\n       <div>\n        <cometchat-message-bubble  *ngIf=\"!getBubbleWrapper(message)\" [leadingView]=\" showAvatar ? leadingView : null\" [bottomView]=\"enableReactions ? reactionView : null\"\n        [headerView]=\"getHeaderView(message) || message?.getCategory() != MessageCategory.action && showHeaderTitle(message) ? bubbleHeader : null\" [footerView]=\"footerView\"  [contentView]=\"contentView\" [threadView]=\"threadView\"\n         [id]=\"message?.getId() || message?.getMuid()\" [options]=\"setMessageOptions(message)\"\n          [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"  [alignment]=\"setBubbleAlignment(message)\">\n        <ng-template #contentView>\n          <ng-container *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\" >\n          </ng-container>\n        </ng-template>\n        <ng-template #reactionView>\n          <reactions-view *ngIf=\"hasReaction(message)\" [messageObject]=\"message\" [alignment]=\"setBubbleAlignment(message)\"  [addReactionIconURL]=\"addReactionIconURL\"\n          [loggedInUser]=\"loggedInUser\" [reactionsStyle]=\"reactionsStyle(message)\"></reactions-view>\n          </ng-template>\n         <ng-template #footerView>\n          <div  class=\"cc-message-list__bubble-footer\">\n            <div *ngIf=\"getFooterView(message);else bubbleFooter\">\n              <ng-container *ngTemplateOutlet=\"getFooterView(message);context:{ $implicit: message }\" >\n              </ng-container>\n            </div>\n            <ng-template #bubbleFooter>\n              <div class=\"cc-message-list__bubble-date\" *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && !message.getDeletedAt() && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n                <cometchat-date [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" [pattern]=\"datePattern\">\n                </cometchat-date>\n               </div>\n                 <div *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() ||this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\" class=\"cc-message-list__receipt\">\n                    <cometchat-receipt [receipt]=\"getMessageReceipt(message)\" [receiptStyle]=\"receiptStyle\" [waitIcon]=\"waitIcon\" [sentIcon]=\"sentIcon\" [deliveredIcon]=\"deliveredIcon\" [readIcon]=\"readIcon\" [errorIcon]=\"errorIcon\"></cometchat-receipt>\n                 </div>\n            </ng-template>\n          </div>\n         </ng-template>\n<ng-template #leadingView>\n  <div  *ngIf=\" message?.getCategory() != MessageCategory.action  && showHeaderTitle(message)\" >\n    <cometchat-avatar [name]=\"message?.getSender()?.getName()\" [avatarStyle]=\"avatarStyle\" [image]=\"message?.getSender()?.getAvatar()\">\n    </cometchat-avatar>\n  </div>\n</ng-template>\n<ng-template #bubbleHeader>\n  <div *ngIf=\"getHeaderView(message);else defaultHeader\">\n    <ng-container *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\" >\n    </ng-container>\n  </div>\n<ng-template #defaultHeader>\n  <div  class=\"cc-message-list__bubble-header\" *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n    <cometchat-label [text]=\"message?.getSender()?.getName()\" [labelStyle]=\"labelStyle\"></cometchat-label>\n    <cometchat-date [pattern]=\"datePattern\" [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n   </div>\n</ng-template>\n</ng-template>\n<ng-template #threadView>\n  <div class=\"cc-message-list__threadreplies\" *ngIf=\"message?.getReplyCount() && !message.getDeletedAt()\" >\n    <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n    <cometchat-button [text]=\"getThreadCount(message)\" [buttonStyle]=\"getThreadViewStyle(message)\" [iconURL]=\"threadOpenIcon\" (cc-button-clicked)=\"openThreadView(message)\">\n    </cometchat-button>\n  </div>\n</ng-template>\n      </cometchat-message-bubble>\n       </div>\n    </div>\n    <div class=\"cc-message-list__bottom\" #bottom>\n    </div>\n\n  </div>\n  <div class=\"cc-message-list__message-indicator\" *ngIf=\"UnreadCount && UnreadCount.length > 0 && !isOnBottom\" [ngStyle]=\"{bottom: showSmartReply || footerView || showConversationStarter  ? '20%' : '13%'}\">\n    <cometchat-button [text]=\"newMessageCount\" [buttonStyle]=\"unreadMessagesStyle\" (cc-button-clicked)=\"scrollToBottom()\"></cometchat-button>\n  </div>\n  <div class=\"cc-message-list__footer-view\" [ngStyle]=\"{height: showSmartReply || showConversationStarter ? '8%' : 'auto'}\">\n\n    <div *ngIf=\"footerView;else footer\">\n      <ng-container *ngTemplateOutlet=\"footerView\">\n      </ng-container>\n    </div>\n    <ng-template #footer>\n      <div class=\"cc-message-list__smart-replies\" *ngIf=\"!showConversationStarter && showSmartReply && getReplies()\">\n        <smart-replies [smartReplyStyle]=\"smartReplyStyle\" [replies]=\"getReplies()\" (cc-reply-clicked)=\"sendReply($event)\" (cc-close-clicked)=\"closeSmartReply()\">\n        </smart-replies>\n      </div>\n      <div class=\"cc-message-list__conversation-starters\" *ngIf=\"enableConversationStarter && showConversationStarter\">\n        <div class=\"cc-message-list__footer__decorator-message\" *ngIf=\"conversationStarterState == states.loading || conversationStarterState == states.error  || conversationStarterState == states.empty \"\n        >\n        <div class=\"cc-message-list__footer-view-decorator\" *ngIf=\"conversationStarterState == states.loading\">\n          <cometchat-loader iconURL=\"assets/Spinner.svg\" [loaderStyle]=\"conversationStarterLoader()\">\n          </cometchat-loader>\n          <cometchat-label [labelStyle]=\"conversationStarterStateStyle()\"  [text]=\"starterLoadingStateText\"\n          >\n        </cometchat-label>\n        \n        </div>\n        <div class=\"cc-message-list__footer-view-decorator\" *ngIf=\"conversationStarterState == states.error  && !hideError \">\n          <cometchat-loader iconURL=\"assets/ai-error.svg\" [loaderStyle]=\"conversationStarterLoader()\">\n          </cometchat-loader>\n          <cometchat-label [labelStyle]=\"conversationStarterStateStyle()\"  [text]=\"starterErrorStateText\"\n            >\n          </cometchat-label>\n        \n        </div>\n        <div class=\"cc-message-list__footer-view-decorator\" *ngIf=\"conversationStarterState == states.empty\">\n          <cometchat-loader iconURL=\"assets/ai-empty.svg\" [loaderStyle]=\"conversationStarterLoader()\">\n          </cometchat-loader>\n          <cometchat-label [labelStyle]=\"conversationStarterStateStyle()\"  [text]=\"starterEmptyStateText\"\n            >\n          </cometchat-label>\n  \n        </div>\n      </div>\n        <smart-replies *ngIf=\"conversationStarterState == states.loaded && !parentMessageId\" [smartReplyStyle]=\"conversationStarterStyle\" [replies]=\"conversationStarterReplies\"  (cc-reply-clicked)=\"sendConversationStarter($event)\"  [closeIconURL]=\"''\">\n        </smart-replies>\n      </div>\n    </ng-template>\n        </div>\n\n</div>\n<!-- default bubbles -->\n<ng-template #textBubble let-message>\n  <cometchat-text-bubble *ngIf=\"message?.type == MessageTypesConstant.groupMember\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"message?.message\"></cometchat-text-bubble>\n  <cometchat-text-bubble *ngIf=\"message?.getDeletedAt()\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"localize('MESSAGE_IS_DELETED')\"></cometchat-text-bubble>\n<cometchat-text-bubble *ngIf=\"!isTranslated(message) && !getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"getTextMessage(message)\"></cometchat-text-bubble>\n<link-preview [linkPreviewStyle]=\"linkPreviewStyle\" (cc-link-clicked)=\"openLinkURL($event)\" *ngIf=\"!message?.getDeletedAt() && getLinkPreview(message) && enableLinkPreview\" [title]=\"getLinkPreviewDetails('title',message)\" [description]=\"getLinkPreviewDetails('description',message)\" [URL]=\"getLinkPreviewDetails('url',message)\" [image]=\"getLinkPreviewDetails('image',message)\" [favIconURL]=\"getLinkPreviewDetails('favicon',message)\">\n  <cometchat-text-bubble\n  *ngIf=\"!isTranslated(message) && getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n  [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"getTextMessage(message)\"></cometchat-text-bubble>\n</link-preview>\n<message-translation-bubble [alignment]=\"getBubbleAlignment(message)\" *ngIf=\"isTranslated(message)\"  [messageTranslationStyle]=\"setTranslationStyle(message)\" [translatedText]=\"isTranslated(message)\">\n  <cometchat-text-bubble *ngIf=\" !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"message?.text\"></cometchat-text-bubble>\n\n</message-translation-bubble>\n</ng-template>\n<ng-template #fileBubble let-message>\n\n  <cometchat-file-bubble [fileStyle]=\"setFileBubbleStyle(message)\" [downloadIconURL]=\"downloadIconURL\" [subtitle]=\"localize('SHARED_FILE')\" [title]=\"message?.data?.attachments ? message?.data?.attachments[0]?.name: ''\" [fileURL]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\"></cometchat-file-bubble>\n</ng-template>\n<ng-template #audioBubble let-message>\n  <cometchat-icon-button [disabled]=\"true\" *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.audio\" [iconURL]=\"getCallTypeIcon(message)\" [buttonStyle]=\"callStatusStyle(message)\" [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n  <cometchat-audio-bubble *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\"  [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\" > </cometchat-audio-bubble>\n</ng-template>\n<ng-template #videoBubble let-message>\n  <cometchat-icon-button [disabled]=\"true\" *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.video\" [iconURL]=\"getCallTypeIcon(message)\" [buttonStyle]=\"callStatusStyle(message)\" [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n\n  <cometchat-video-bubble *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\" [videoStyle]=\"videoBubbleStyle\" [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\" [poster]=\" getImageThumbnail(message)\"></cometchat-video-bubble>\n</ng-template>\n<ng-template #imageBubble let-message>\n <image-moderation  (cc-show-dialog)=\"openWarningDialog($event)\" *ngIf=\"!message.getDeletedAt() && enableImageModeration\" [message]=\"message\" [imageModerationStyle]=\"imageModerationStyle\">\n  <cometchat-image-bubble (cc-image-clicked)=\"openImageInFullScreen(message)\" [imageStyle]=\"imageBubbleStyle\"   [src]=\" getImageThumbnail(message)\" [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n </image-moderation>\n  <cometchat-image-bubble [imageStyle]=\"imageBubbleStyle\" (cc-image-clicked)=\"openImageInFullScreen(message)\" *ngIf=\"!message.getDeletedAt() && !enableImageModeration\"  [src]=\" getImageThumbnail(message)\" [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n</ng-template>\n<ng-template #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\" [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\" [ccClicked]=\"launchCollaborativeWhiteboardDocument\" [iconURL]=\"whiteboardIconURL\" [title]=\"whiteboardTitle\" [buttonText]=\"whiteboardButtonText\" [subtitle]=\"whiteboardSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #documentBubble  let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\" [iconAlignment]=\"documentBubbleAlignment\" [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\" [ccClicked]=\"launchCollaborativeWhiteboardDocument\" [iconURL]=\"documentIconURL\" [title]=\"documentTitle\" [buttonText]=\"documentButtonText\" [subtitle]=\"documentSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #directCalling  let-message>\n  <cometchat-document-bubble  [hideSeparator]=\"true\" [iconAlignment]=\"callBubbleAlignment\" [documentStyle]=\"getCallBubbleStyle(message)\" [URL]=\"getSessionId(message)\" [ccClicked]=\"startDirectCall\" [iconURL]=\"directCallIconURL\" [title]=\"getCallBubbleTitle(message)\" [buttonText]=\"joinCallButtonText\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #pollBubble  let-message>\n  <polls-bubble [pollStyle]=\"pollBubbleStyle\"  [pollQuestion]=\"getPollBubbleData(message,'question')\" [pollId]=\"getPollBubbleData(message,'id')\"\n   [loggedInUser]=\"loggedInUser\" [senderUid]=\"getPollBubbleData(message)\" [metadata]=\"message?.metadata\"></polls-bubble>\n\n</ng-template>\n\n<!-- thread bubble view -->\n<ng-template #threadMessageBubble let-message>\n  <div *ngIf=\"getBubbleWrapper(message)\">\n    <ng-container *ngTemplateOutlet=\"getBubbleWrapper(message)\">\n    </ng-container>\n  </div>\n  <cometchat-message-bubble  *ngIf=\"!getBubbleWrapper(message)\" [bottomView]=\"enableReactions ? reactionView : null\" [leadingView]=\" showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\" [footerView]=\"footerView\"\n  [contentView]=\"contentView\"  [id]=\"message?.getId() || message?.getMuid()\"  [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"  [alignment]=\"threadedAlignment\">\n    <ng-template #contentView>\n      <ng-container *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\" >\n      </ng-container>\n    </ng-template>\n    <ng-template #reactionView>\n      <reactions-view *ngIf=\"hasReaction(message)\" [messageObject]=\"message\" [alignment]=\"setBubbleAlignment(message)\"\n      \n      [loggedInUser]=\"loggedInUser\" [reactionsStyle]=\"reactionsStyle(message)\" [addReactionIconURL]=\"addReactionIconURL\"></reactions-view>\n      </ng-template>\n     <ng-template #footerView>\n      <div  class=\"cc-message-list__bubble-footer\">\n        <div *ngIf=\"getFooterView(message);else bubbleFooter\">\n          <ng-container *ngTemplateOutlet=\"getFooterView(message);context:{ $implicit: message }\" >\n          </ng-container>\n        </div>\n        <ng-template #bubbleFooter>\n          <div class=\"cc-message-list__bubble-date\" *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n            <cometchat-date [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" [pattern]=\"datePattern\">\n            </cometchat-date>\n           </div>\n             <div *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() ||this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\" class=\"cc-message-list__receipt\">\n                <cometchat-receipt [receipt]=\"getMessageReceipt(message)\" [receiptStyle]=\"receiptStyle\" [waitIcon]=\"waitIcon\" [sentIcon]=\"sentIcon\" [deliveredIcon]=\"\" [readIcon]=\"deliveredIcon\" [errorIcon]=\"errorIcon\"></cometchat-receipt>\n             </div>\n        </ng-template>\n      </div>\n     </ng-template>\n<ng-template #leadingView>\n<div  *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\" >\n<cometchat-avatar [name]=\"message?.getSender()?.getName()\" [avatarStyle]=\"avatarStyle\" [image]=\"message?.getSender()?.getAvatar()\">\n</cometchat-avatar>\n</div>\n</ng-template>\n<ng-template #bubbleHeader>\n<div *ngIf=\"getHeaderView(message);else defaultHeader\">\n<ng-container *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\" >\n</ng-container>\n</div>\n<ng-template #defaultHeader>\n<div  class=\"cc-message-list__bubble-header\" *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n<cometchat-label [text]=\"message?.getSender()?.getName()\" [labelStyle]=\"labelStyle\"></cometchat-label>\n<cometchat-date [pattern]=\"datePattern\" [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n</div>\n</ng-template>\n</ng-template>\n  </cometchat-message-bubble>\n\n</ng-template>\n\n\n<!--  -->\n<ng-template #bubbleView></ng-template>\n<cometchat-popover [popoverStyle]=\"popoverStyle\"  #popoverRef [placement]=\"keyboardAlignment\">\n<cometchat-emoji-keyboard (cc-emoji-clicked)=\"addReaction($event)\"  slot=\"content\"></cometchat-emoji-keyboard>\n</cometchat-popover>\n<cometchat-backdrop *ngIf=\"openConfirmDialog\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-confirm-dialog [title]=\"''\" [messageText]=\"warningText\" (cc-confirm-clicked)=\"onConfirmClick()\" [cancelButtonText]=\"cancelText\" [confirmButtonText]=\"confirmText\" (cc-cancel-clicked)=\"onCancelClick()\" [confirmDialogStyle]=\"confirmDialogStyle\">\n\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-full-screen-viewer (cc-close-clicked)=\"closeImageInFullScreen()\" *ngIf=\"openFullscreenView\" [URL]=\"imageurlToOpen\" [closeIconURL]=\"closeIconURL\" [fullScreenViewerStyle]=\"fullScreenViewerStyle\">\n\n</cometchat-full-screen-viewer>\n\n<!-- ongoing callscreen for direct call -->\n<cometchat-ongoing-call *ngIf=\"showOngoingCall\" [callSettingsBuilder]=\"getCallBuilder()\" [ongoingCallStyle]=\"ongoingCallStyle\" [sessionID]=\"sessionId\"></cometchat-ongoing-call>\n<!-- message information view -->\n<!-- thread bubble view -->\n<ng-template #messageinfoBubble let-message>\n  <div *ngIf=\"getBubbleWrapper(message)\">\n    <ng-container *ngTemplateOutlet=\"getBubbleWrapper(message)\">\n    </ng-container>\n  </div>\n  <cometchat-message-bubble  *ngIf=\"!getBubbleWrapper(message)\" [bottomView]=\"enableReactions && hasReaction(message) ? reactionView : null\" [leadingView]=\" showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\"\n  [contentView]=\"contentView\"  [id]=\"message?.getId() || message?.getMuid()\"  [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"  [alignment]=\"messageInfoAlignment\">\n    <ng-template #contentView>\n      <ng-container *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\" >\n      </ng-container>\n    </ng-template>\n    <ng-template #reactionView>\n      <reactions-view *ngIf=\"hasReaction(message)\" [messageObject]=\"message\" [alignment]=\"setBubbleAlignment(message)\"  [addReactionIconURL]=\"addReactionIconURL\"\n      [loggedInUser]=\"loggedInUser\" [reactionsStyle]=\"reactionsStyle(message)\"></reactions-view>\n      </ng-template>\n<ng-template #leadingView>\n<div  *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\" >\n<cometchat-avatar [name]=\"message?.getSender()?.getName()\" [avatarStyle]=\"avatarStyle\" [image]=\"message?.getSender()?.getAvatar()\">\n</cometchat-avatar>\n</div>\n</ng-template>\n<ng-template #bubbleHeader>\n<div *ngIf=\"getHeaderView(message);else defaultHeader\">\n<ng-container *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\" >\n</ng-container>\n</div>\n<ng-template #defaultHeader>\n<div  class=\"cc-message-list__bubble-header\" *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n<cometchat-label [text]=\"message?.getSender()?.getName()\" [labelStyle]=\"labelStyle\"></cometchat-label>\n<cometchat-date [pattern]=\"datePattern\" [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n</div>\n</ng-template>\n</ng-template>\n  </cometchat-message-bubble>\n\n</ng-template>\n<cometchat-backdrop *ngIf=\"openMessageInfoPage\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-message-information [closeIconURL]=\"messageInformationConfiguration.closeIconURL\"  [loadingStateView]=\"messageInformationConfiguration.loadingStateView\" [errorStateView]=\"messageInformationConfiguration.errorStateView\" [listItemStyle]=\"messageInformationConfiguration.listItemStyle\" [emptyStateView]=\"messageInformationConfiguration.emptyStateView\" [loadingIconURL]=\"messageInformationConfiguration.loadingIconURL\" [readIcon]=\"messageInformationConfiguration.readIcon\" [deliveredIcon]=\"messageInformationConfiguration.deliveredIcon\" [onError]=\"messageInformationConfiguration.onError\" [SubtitleView]=\"messageInformationConfiguration.subtitleView\" [receiptDatePattern]=\"messageInformationConfiguration.receiptDatePattern\" [listItemView]=\"messageInformationConfiguration.listItemView \" [messageInformationStyle]=\"messageInformationConfiguration.messageInformationStyle\" [onClose]=\"messageInformationConfiguration.onClose ??  closeMessageInfoPage\" [bubbleView]=\"messageInformationConfiguration.bubbleView ?? messageinfoBubble\" [message]=\"messageInfoObject\">\n\n  </cometchat-message-information>\n</cometchat-backdrop>\n", styles: [".cc-message-list{height:100%;width:100%;overflow-y:auto;overflow-x:hidden;position:relative}.cc-message-list__wrapper{height:100%;width:100%;overflow-y:hidden}.cc-message-list__bubble-footer{display:flex;justify-content:center;align-items:center}.cc-message-list__date-container{text-align:center;margin:5px 0}.cc-message-list__smart-replies,.cc-message-list__conversation-starters{height:-moz-fit-content;height:fit-content;width:100%;position:absolute;bottom:0;z-index:1}.cc-message-list__date{border-radius:10px;display:flex;justify-content:center}.cc-message-list__threadreplies{min-width:130px;width:100%}.cc-message-list__message-indicator{height:25px;display:flex;align-items:center;justify-content:center;width:100%;bottom:10%;position:absolute}.cc-message-list__footer-view{z-index:1;position:relative;width:100%}.cc-message-list__decorator-message{margin:0;line-height:30px;word-wrap:break-word;padding:0 8px;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;height:100%}.cc-message-list__footer__decorator-message{margin:0;line-height:30px;word-wrap:break-word;padding:0 8px 0 16px;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:flex-start;height:100%}.cc-message-list::-webkit-scrollbar{background:transparent;width:8px}.cc-message-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.cc-message-list__footer-view-decorator{display:flex;flex-direction:row;column-gap:8px}\n"], components: [{ type: CometChatMessageBubbleComponent, selector: "cometchat-message-bubble", inputs: ["messageBubbleStyle", "alignment", "options", "id", "leadingView", "headerView", "replyView", "contentView", "threadView", "footerView", "bottomView", "moreIconURL", "topMenuSize"] }, { type: CometChatOngoingCallComponent, selector: "cometchat-ongoing-call", inputs: ["ongoingCallStyle", "resizeIconHoverText", "sessionID", "minimizeIconURL", "maximizeIconURL", "callSettingsBuilder", "callWorkflow", "onError"] }, { type: CometChatMessageInformationComponent, selector: "cometchat-message-information", inputs: ["closeIconURL", "message", "title", "template", "bubbleView", "subtitleView", "listItemView", "receiptDatePattern", "onError", "messageInformationStyle", "readIcon", "deliveredIcon", "onClose", "listItemStyle", "emptyStateText", "errorStateText", "emptyStateView", "loadingIconURL", "loadingStateView", "errorStateView"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageListComponent, decorators: [{
             type: Component,
-            args: [{ selector: "cometchat-message-list", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-message-list__wrapper\" [ngStyle]=\"wrapperStyle()\" *ngIf=\"!openContactsView\">\n  <div class=\"cc-message-list__header-view\">\n<div *ngIf=\"headerView\">\n  <ng-container *ngTemplateOutlet=\"headerView\">\n  </ng-container>\n</div>\n        </div>\n  <div class=\"cc-message-list\" #listScroll [ngStyle]=\"{height: showSmartReply ? '92%' : '100%'}\">\n    <div class=\"cc-message-list__top\" #top>\n    </div>\n    <div class=\"cc-message-list__decorator-message\" *ngIf=\"state == states.loading || state == states.error  || state == states.empty \"\n      [ngStyle]=\"messageContainerStyle()\">\n      <div class=\"cc-message-list__loading-view\" *ngIf=\"state == states.loading \">\n        <cometchat-loader [iconURL]=\"loadingIconURL\" [loaderStyle]=\"loadingStyle()\">\n        </cometchat-loader>\n        <span class=\"cc-message-list__customview--loading\" *ngIf=\"state == states.loading  && loadingStateView\">\n          <ng-container *ngTemplateOutlet=\"loadingStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"cc-message-list__error-view\" *ngIf=\"state == states.error  && !hideError \">\n        <cometchat-label [labelStyle]=\"errorStyle()\" *ngIf=\"state == states.error  && !hideError && !errorStateView\" [text]=\"errorStateText\"\n          >\n        </cometchat-label>\n        <span class=\"cc-message-list__custom-view--error\" *ngIf=\"state == states.error  && !hideError && errorStateView\">\n          <ng-container *ngTemplateOutlet=\"errorStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"cc-message-list__empty-view\" *ngIf=\"state == states.empty\">\n        <cometchat-label [labelStyle]=\"emptyStyle()\" *ngIf=\"state == states.empty && !emptyStateView\" [text]=\"emptyStateText\"\n          >\n        </cometchat-label>\n        <span class=\"cc-message-list__custom-view--empty\" *ngIf=\"state == states.empty && emptyStateView\">\n          <ng-container *ngTemplateOutlet=\"emptyStateView\">\n          </ng-container>\n        </span>\n      </div>\n    </div>\n    <div class=\"cc-message-list__bubble\" *ngFor=\"let message of messagesList; let i = index\">\n      <div class=\"cc-message-list__date-container\" *ngIf=\"(i === 0) && message?.getSentAt()\">\n        <span class=\"cc-message-list__date\" >\n          <cometchat-date [timestamp]=\"message!.getSentAt()\"  [pattern]=\"DateSeparatorPattern\" [dateStyle]=\"dateSeparatorStyle\"\n           >\n          </cometchat-date>\n        </span>\n      </div>\n      <div class=\"cc-message-list__date-container\" *ngIf=\"(i > 0 && isDateDifferent(messagesList[i - 1]?.getSentAt(), messagesList[i]?.getSentAt())) && message?.getSentAt()\">\n        <span class=\"cc-message-list__date\"  >\n          <cometchat-date [timestamp]=\"message?.getSentAt()\" [pattern]=\"DateSeparatorPattern\"   [dateStyle]=\"dateSeparatorStyle\"\n           >\n          </cometchat-date>\n        </span>\n      </div>\n        <div *ngIf=\"getBubbleWrapper(message) \">\n          <ng-container *ngTemplateOutlet=\"getBubbleWrapper(message)\">\n          </ng-container>\n        </div>\n       <div>\n        <cometchat-message-bubble  *ngIf=\"!getBubbleWrapper(message)\" [leadingView]=\" showAvatar ? leadingView : null\" [bottomView]=\"enableReactions ? reactionView : null\"\n        [headerView]=\"getHeaderView(message) || message?.getCategory() != MessageCategory.action && showHeaderTitle(message) ? bubbleHeader : null\" [footerView]=\"footerView\"  [contentView]=\"contentView\" [threadView]=\"threadView\"\n         [id]=\"message?.getId() || message?.getMuid()\" [options]=\"setMessageOptions(message)\"\n          [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"  [alignment]=\"setBubbleAlignment(message)\">\n        <ng-template #contentView>\n          <ng-container *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\" >\n          </ng-container>\n        </ng-template>\n        <ng-template #reactionView>\n          <reactions-view *ngIf=\"hasReaction(message)\" [messageObject]=\"message\" [alignment]=\"setBubbleAlignment(message)\"  [addReactionIconURL]=\"addReactionIconURL\"\n          [loggedInUser]=\"loggedInUser\" [reactionsStyle]=\"reactionsStyle(message)\"></reactions-view>\n          </ng-template>\n         <ng-template #footerView>\n          <div  class=\"cc-message-list__bubble-footer\">\n            <div *ngIf=\"getFooterView(message);else bubbleFooter\">\n              <ng-container *ngTemplateOutlet=\"getFooterView(message);context:{ $implicit: message }\" >\n              </ng-container>\n            </div>\n            <ng-template #bubbleFooter>\n              <div class=\"cc-message-list__bubble-date\" *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && !message.getDeletedAt() && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n                <cometchat-date [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" [pattern]=\"datePattern\">\n                </cometchat-date>\n               </div>\n                 <div *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() ||this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\" class=\"cc-message-list__receipt\">\n                    <cometchat-receipt [receipt]=\"getMessageReceipt(message)\" [receiptStyle]=\"receiptStyle\" [waitIcon]=\"waitIcon\" [sentIcon]=\"sentIcon\" [deliveredIcon]=\"deliveredIcon\" [readIcon]=\"readIcon\" [errorIcon]=\"errorIcon\"></cometchat-receipt>\n                 </div>\n            </ng-template>\n          </div>\n         </ng-template>\n<ng-template #leadingView>\n  <div  *ngIf=\" message?.getCategory() != MessageCategory.action  && showHeaderTitle(message)\" >\n    <cometchat-avatar [name]=\"message?.getSender()?.getName()\" [avatarStyle]=\"avatarStyle\" [image]=\"message?.getSender()?.getAvatar()\">\n    </cometchat-avatar>\n  </div>\n</ng-template>\n<ng-template #bubbleHeader>\n  <div *ngIf=\"getHeaderView(message);else defaultHeader\">\n    <ng-container *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\" >\n    </ng-container>\n  </div>\n<ng-template #defaultHeader>\n  <div  class=\"cc-message-list__bubble-header\" *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n    <cometchat-label [text]=\"message?.getSender()?.getName()\" [labelStyle]=\"labelStyle\"></cometchat-label>\n    <cometchat-date [pattern]=\"datePattern\" [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n   </div>\n</ng-template>\n</ng-template>\n<ng-template #threadView>\n  <div class=\"cc-message-list__threadreplies\" *ngIf=\"message?.getReplyCount() && !message.getDeletedAt()\" >\n    <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n    <cometchat-button [text]=\"getThreadCount(message)\" [buttonStyle]=\"getThreadViewStyle(message)\" [iconURL]=\"threadOpenIcon\" (cc-button-clicked)=\"openThreadView(message)\">\n    </cometchat-button>\n  </div>\n</ng-template>\n      </cometchat-message-bubble>\n       </div>\n    </div>\n    <div class=\"cc-message-list__bottom\" #bottom>\n    </div>\n\n  </div>\n  <div class=\"cc-message-list__message-indicator\" *ngIf=\"UnreadCount && UnreadCount.length > 0 && !isOnBottom\" [ngStyle]=\"{bottom: showSmartReply || footerView ? '20%' : '13%'}\">\n    <cometchat-button [text]=\"newMessageCount\" [buttonStyle]=\"unreadMessagesStyle\" (cc-button-clicked)=\"scrollToBottom()\"></cometchat-button>\n  </div>\n  <div class=\"cc-message-list__footer-view\" [ngStyle]=\"{height: showSmartReply  ? '8%' : 'auto'}\">\n\n    <div *ngIf=\"footerView;else footer\">\n      <ng-container *ngTemplateOutlet=\"footerView\">\n      </ng-container>\n    </div>\n    <ng-template #footer>\n      <div class=\"cc-message-list__smart-replies\" *ngIf=\"showSmartReply && getReplies()\">\n        <smart-replies [smartReplyStyle]=\"smartReplyStyle\" [replies]=\"getReplies()\" (cc-reply-clicked)=\"sendReply($event)\" (cc-close-clicked)=\"closeSmartReply()\">\n        </smart-replies>\n      </div>\n    </ng-template>\n        </div>\n\n</div>\n<!-- default bubbles -->\n<ng-template #textBubble let-message>\n  <cometchat-text-bubble *ngIf=\"message?.type == MessageTypesConstant.groupMember\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"message?.message\"></cometchat-text-bubble>\n  <cometchat-text-bubble *ngIf=\"message?.getDeletedAt()\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"localize('MESSAGE_IS_DELETED')\"></cometchat-text-bubble>\n<cometchat-text-bubble *ngIf=\"!isTranslated(message) && !getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"getTextMessage(message)\"></cometchat-text-bubble>\n<link-preview [linkPreviewStyle]=\"linkPreviewStyle\" (cc-link-clicked)=\"openLinkURL($event)\" *ngIf=\"!message?.getDeletedAt() && getLinkPreview(message) && enableLinkPreview\" [title]=\"getLinkPreviewDetails('title',message)\" [description]=\"getLinkPreviewDetails('description',message)\" [URL]=\"getLinkPreviewDetails('url',message)\" [image]=\"getLinkPreviewDetails('image',message)\" [favIconURL]=\"getLinkPreviewDetails('favicon',message)\">\n  <cometchat-text-bubble\n  *ngIf=\"!isTranslated(message) && getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n  [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"getTextMessage(message)\"></cometchat-text-bubble>\n</link-preview>\n<message-translation-bubble [alignment]=\"getBubbleAlignment(message)\" *ngIf=\"isTranslated(message)\"  [messageTranslationStyle]=\"setTranslationStyle(message)\" [translatedText]=\"isTranslated(message)\">\n  <cometchat-text-bubble *ngIf=\" !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"message?.text\"></cometchat-text-bubble>\n\n</message-translation-bubble>\n</ng-template>\n<ng-template #fileBubble let-message>\n\n  <cometchat-file-bubble [fileStyle]=\"setFileBubbleStyle(message)\" [downloadIconURL]=\"downloadIconURL\" [subtitle]=\"localize('SHARED_FILE')\" [title]=\"message?.data?.attachments ? message?.data?.attachments[0]?.name: ''\" [fileURL]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\"></cometchat-file-bubble>\n</ng-template>\n<ng-template #audioBubble let-message>\n  <cometchat-icon-button [disabled]=\"true\" *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.audio\" [iconURL]=\"getCallTypeIcon(message)\" [buttonStyle]=\"callStatusStyle(message)\" [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n  <cometchat-audio-bubble *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\"  [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\" > </cometchat-audio-bubble>\n</ng-template>\n<ng-template #videoBubble let-message>\n  <cometchat-icon-button [disabled]=\"true\" *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.video\" [iconURL]=\"getCallTypeIcon(message)\" [buttonStyle]=\"callStatusStyle(message)\" [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n\n  <cometchat-video-bubble *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\" [videoStyle]=\"videoBubbleStyle\" [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\" [poster]=\" getImageThumbnail(message)\"></cometchat-video-bubble>\n</ng-template>\n<ng-template #imageBubble let-message>\n <image-moderation  (cc-show-dialog)=\"openWarningDialog($event)\" *ngIf=\"!message.getDeletedAt() && enableImageModeration\" [message]=\"message\" [imageModerationStyle]=\"imageModerationStyle\">\n  <cometchat-image-bubble (cc-image-clicked)=\"openImageInFullScreen(message)\" [imageStyle]=\"imageBubbleStyle\"   [src]=\" getImageThumbnail(message)\" [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n </image-moderation>\n  <cometchat-image-bubble [imageStyle]=\"imageBubbleStyle\" (cc-image-clicked)=\"openImageInFullScreen(message)\" *ngIf=\"!message.getDeletedAt() && !enableImageModeration\"  [src]=\" getImageThumbnail(message)\" [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n</ng-template>\n<ng-template #customTextBubble>\n</ng-template>\n<ng-template #stickerBubble  let-message>\n  <cometchat-image-bubble [src]=\"getSticker(message)\" [imageStyle]=\"imageBubbleStyle\" ></cometchat-image-bubble>\n\n</ng-template>\n<ng-template #whiteboardBubble  let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\" [iconAlignment]=\"documentBubbleAlignment\" [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\" [ccClicked]=\"launchCollaborativeWhiteboardDocument\" [iconURL]=\"whiteboardIconURL\" [title]=\"whiteboardTitle\" [buttonText]=\"whiteboardButtonText\" [subtitle]=\"whiteboardSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #documentBubble  let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\" [iconAlignment]=\"documentBubbleAlignment\" [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\" [ccClicked]=\"launchCollaborativeWhiteboardDocument\" [iconURL]=\"documentIconURL\" [title]=\"documentTitle\" [buttonText]=\"documentButtonText\" [subtitle]=\"documentSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #directCalling  let-message>\n  <cometchat-document-bubble  [hideSeparator]=\"true\" [iconAlignment]=\"callBubbleAlignment\" [documentStyle]=\"getCallBubbleStyle(message)\" [URL]=\"getSessionId(message)\" [ccClicked]=\"startDirectCall\" [iconURL]=\"directCallIconURL\" [title]=\"getCallBubbleTitle(message)\" [buttonText]=\"joinCallButtonText\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #pollBubble  let-message>\n  <polls-bubble [pollStyle]=\"pollBubbleStyle\"  [pollQuestion]=\"getPollBubbleData(message,'question')\" [pollId]=\"getPollBubbleData(message,'id')\"\n   [loggedInUser]=\"loggedInUser\" [senderUid]=\"getPollBubbleData(message)\" [metadata]=\"message?.metadata\"></polls-bubble>\n\n</ng-template>\n\n<!-- thread bubble view -->\n<ng-template #threadMessageBubble let-message>\n  <div *ngIf=\"getBubbleWrapper(message)\">\n    <ng-container *ngTemplateOutlet=\"getBubbleWrapper(message)\">\n    </ng-container>\n  </div>\n  <cometchat-message-bubble  *ngIf=\"!getBubbleWrapper(message)\" [bottomView]=\"enableReactions ? reactionView : null\" [leadingView]=\" showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\" [footerView]=\"footerView\"\n  [contentView]=\"contentView\"  [id]=\"message?.getId() || message?.getMuid()\"  [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"  [alignment]=\"threadedAlignment\">\n    <ng-template #contentView>\n      <ng-container *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\" >\n      </ng-container>\n    </ng-template>\n    <ng-template #reactionView>\n      <reactions-view *ngIf=\"hasReaction(message)\" [messageObject]=\"message\" [alignment]=\"setBubbleAlignment(message)\"\n      \n      [loggedInUser]=\"loggedInUser\" [reactionsStyle]=\"reactionsStyle(message)\" [addReactionIconURL]=\"addReactionIconURL\"></reactions-view>\n      </ng-template>\n     <ng-template #footerView>\n      <div  class=\"cc-message-list__bubble-footer\">\n        <div *ngIf=\"getFooterView(message);else bubbleFooter\">\n          <ng-container *ngTemplateOutlet=\"getFooterView(message);context:{ $implicit: message }\" >\n          </ng-container>\n        </div>\n        <ng-template #bubbleFooter>\n          <div class=\"cc-message-list__bubble-date\" *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n            <cometchat-date [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" [pattern]=\"datePattern\">\n            </cometchat-date>\n           </div>\n             <div *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() ||this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\" class=\"cc-message-list__receipt\">\n                <cometchat-receipt [receipt]=\"getMessageReceipt(message)\" [receiptStyle]=\"receiptStyle\" [waitIcon]=\"waitIcon\" [sentIcon]=\"sentIcon\" [deliveredIcon]=\"\" [readIcon]=\"deliveredIcon\" [errorIcon]=\"errorIcon\"></cometchat-receipt>\n             </div>\n        </ng-template>\n      </div>\n     </ng-template>\n<ng-template #leadingView>\n<div  *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\" >\n<cometchat-avatar [name]=\"message?.getSender()?.getName()\" [avatarStyle]=\"avatarStyle\" [image]=\"message?.getSender()?.getAvatar()\">\n</cometchat-avatar>\n</div>\n</ng-template>\n<ng-template #bubbleHeader>\n<div *ngIf=\"getHeaderView(message);else defaultHeader\">\n<ng-container *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\" >\n</ng-container>\n</div>\n<ng-template #defaultHeader>\n<div  class=\"cc-message-list__bubble-header\" *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n<cometchat-label [text]=\"message?.getSender()?.getName()\" [labelStyle]=\"labelStyle\"></cometchat-label>\n<cometchat-date [pattern]=\"datePattern\" [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n</div>\n</ng-template>\n</ng-template>\n  </cometchat-message-bubble>\n\n</ng-template>\n\n\n<!--  -->\n<ng-template #bubbleView></ng-template>\n<cometchat-popover [popoverStyle]=\"popoverStyle\"  #popoverRef [placement]=\"keyboardAlignment\">\n<cometchat-emoji-keyboard (cc-emoji-clicked)=\"addReaction($event)\"  slot=\"content\"></cometchat-emoji-keyboard>\n</cometchat-popover>\n<cometchat-backdrop *ngIf=\"openConfirmDialog\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-confirm-dialog [title]=\"''\" [messageText]=\"warningText\" (cc-confirm-clicked)=\"onConfirmClick()\" [cancelButtonText]=\"cancelText\" [confirmButtonText]=\"confirmText\" (cc-cancel-clicked)=\"onCancelClick()\" [confirmDialogStyle]=\"confirmDialogStyle\">\n\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-full-screen-viewer (cc-close-clicked)=\"closeImageInFullScreen()\" *ngIf=\"openFullscreenView\" [URL]=\"imageurlToOpen\" [closeIconURL]=\"closeIconURL\" [fullScreenViewerStyle]=\"fullScreenViewerStyle\">\n\n</cometchat-full-screen-viewer>\n\n<!-- ongoing callscreen for direct call -->\n<cometchat-ongoing-call *ngIf=\"showOngoingCall\" [callSettingsBuilder]=\"getCallBuilder()\" [ongoingCallStyle]=\"ongoingCallStyle\" [sessionID]=\"sessionId\"></cometchat-ongoing-call>\n<!-- message information view -->\n<!-- thread bubble view -->\n<ng-template #messageinfoBubble let-message>\n  <div *ngIf=\"getBubbleWrapper(message)\">\n    <ng-container *ngTemplateOutlet=\"getBubbleWrapper(message)\">\n    </ng-container>\n  </div>\n  <cometchat-message-bubble  *ngIf=\"!getBubbleWrapper(message)\" [bottomView]=\"enableReactions && hasReaction(message) ? reactionView : null\" [leadingView]=\" showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\"\n  [contentView]=\"contentView\"  [id]=\"message?.getId() || message?.getMuid()\"  [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"  [alignment]=\"messageInfoAlignment\">\n    <ng-template #contentView>\n      <ng-container *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\" >\n      </ng-container>\n    </ng-template>\n    <ng-template #reactionView>\n      <reactions-view *ngIf=\"hasReaction(message)\" [messageObject]=\"message\" [alignment]=\"setBubbleAlignment(message)\"  [addReactionIconURL]=\"addReactionIconURL\"\n      [loggedInUser]=\"loggedInUser\" [reactionsStyle]=\"reactionsStyle(message)\"></reactions-view>\n      </ng-template>\n<ng-template #leadingView>\n<div  *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\" >\n<cometchat-avatar [name]=\"message?.getSender()?.getName()\" [avatarStyle]=\"avatarStyle\" [image]=\"message?.getSender()?.getAvatar()\">\n</cometchat-avatar>\n</div>\n</ng-template>\n<ng-template #bubbleHeader>\n<div *ngIf=\"getHeaderView(message);else defaultHeader\">\n<ng-container *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\" >\n</ng-container>\n</div>\n<ng-template #defaultHeader>\n<div  class=\"cc-message-list__bubble-header\" *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n<cometchat-label [text]=\"message?.getSender()?.getName()\" [labelStyle]=\"labelStyle\"></cometchat-label>\n<cometchat-date [pattern]=\"datePattern\" [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n</div>\n</ng-template>\n</ng-template>\n  </cometchat-message-bubble>\n\n</ng-template>\n<cometchat-backdrop *ngIf=\"openMessageInfoPage\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-message-information [closeIconURL]=\"messageInformationConfiguration.closeIconURL\"  [loadingStateView]=\"messageInformationConfiguration.loadingStateView\" [errorStateView]=\"messageInformationConfiguration.errorStateView\" [listItemStyle]=\"messageInformationConfiguration.listItemStyle\" [emptyStateView]=\"messageInformationConfiguration.emptyStateView\" [loadingIconURL]=\"messageInformationConfiguration.loadingIconURL\" [readIcon]=\"messageInformationConfiguration.readIcon\" [deliveredIcon]=\"messageInformationConfiguration.deliveredIcon\" [onError]=\"messageInformationConfiguration.onError\" [SubtitleView]=\"messageInformationConfiguration.subtitleView\" [receiptDatePattern]=\"messageInformationConfiguration.receiptDatePattern\" [listItemView]=\"messageInformationConfiguration.listItemView \" [messageInformationStyle]=\"messageInformationConfiguration.messageInformationStyle\" [onClose]=\"messageInformationConfiguration.onClose ??  closeMessageInfoPage\" [bubbleView]=\"messageInformationConfiguration.bubbleView ?? messageinfoBubble\" [message]=\"messageInfoObject\">\n\n  </cometchat-message-information>\n</cometchat-backdrop>\n", styles: [".cc-message-list{height:100%;width:100%;overflow-y:auto;overflow-x:hidden;position:relative}.cc-message-list__wrapper{height:100%;width:100%;overflow-y:hidden}.cc-message-list__bubble-footer{display:flex;justify-content:center;align-items:center}.cc-message-list__date-container{text-align:center;margin:5px 0}.cc-message-list__smart-replies{height:-moz-fit-content;height:fit-content;width:100%;position:absolute;bottom:0;z-index:1}.cc-message-list__date{border-radius:10px;display:flex;justify-content:center}.cc-message-list__threadreplies{min-width:130px;width:100%}.cc-message-list__message-indicator{height:25px;display:flex;align-items:center;justify-content:center;width:100%;bottom:10%;position:absolute}.cc-message-list__footer-view{z-index:1;position:relative;width:100%}.cc-message-list__decorator-message{margin:0;line-height:30px;word-wrap:break-word;padding:0 8px;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;height:100%}.cc-message-list::-webkit-scrollbar{background:transparent;width:8px}.cc-message-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}\n"] }]
+            args: [{ selector: "cometchat-message-list", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-message-list__wrapper\" [ngStyle]=\"wrapperStyle()\" *ngIf=\"!openContactsView\">\n  <div class=\"cc-message-list__header-view\">\n<div *ngIf=\"headerView\">\n  <ng-container *ngTemplateOutlet=\"headerView\">\n  </ng-container>\n</div>\n        </div>\n  <div class=\"cc-message-list\" #listScroll [ngStyle]=\"{height: showSmartReply || showConversationStarter ? '92%' : '100%'}\">\n    <div class=\"cc-message-list__top\" #top>\n    </div>\n    <div class=\"cc-message-list__decorator-message\" *ngIf=\"state == states.loading || state == states.error  || state == states.empty \"\n      [ngStyle]=\"messageContainerStyle()\">\n      <div class=\"cc-message-list__loading-view\" *ngIf=\"state == states.loading \">\n        <cometchat-loader [iconURL]=\"loadingIconURL\" [loaderStyle]=\"loadingStyle()\">\n        </cometchat-loader>\n        <span class=\"cc-message-list__customview--loading\" *ngIf=\"state == states.loading  && loadingStateView\">\n          <ng-container *ngTemplateOutlet=\"loadingStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"cc-message-list__error-view\" *ngIf=\"state == states.error  && !hideError \">\n        <cometchat-label [labelStyle]=\"errorStyle()\" *ngIf=\"state == states.error  && !hideError && !errorStateView\" [text]=\"errorStateText\"\n          >\n        </cometchat-label>\n        <span class=\"cc-message-list__custom-view--error\" *ngIf=\"state == states.error  && !hideError && errorStateView\">\n          <ng-container *ngTemplateOutlet=\"errorStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"cc-message-list__empty-view\" *ngIf=\"state == states.empty\">\n        <!-- <cometchat-label [labelStyle]=\"emptyStyle()\" *ngIf=\"state == states.empty && !emptyStateView\" [text]=\"emptyStateText\"\n          >\n        </cometchat-label> -->\n        <span class=\"cc-message-list__custom-view--empty\" *ngIf=\"state == states.empty && emptyStateView\">\n          <ng-container *ngTemplateOutlet=\"emptyStateView\">\n          </ng-container>\n        </span>\n      </div>\n    </div>\n    <div class=\"cc-message-list__bubble\" *ngFor=\"let message of messagesList; let i = index\">\n      <div class=\"cc-message-list__date-container\" *ngIf=\"(i === 0) && message?.getSentAt()\">\n        <span class=\"cc-message-list__date\" >\n          <cometchat-date [timestamp]=\"message!.getSentAt()\"  [pattern]=\"DateSeparatorPattern\" [dateStyle]=\"dateSeparatorStyle\"\n           >\n          </cometchat-date>\n        </span>\n      </div>\n      <div class=\"cc-message-list__date-container\" *ngIf=\"(i > 0 && isDateDifferent(messagesList[i - 1]?.getSentAt(), messagesList[i]?.getSentAt())) && message?.getSentAt()\">\n        <span class=\"cc-message-list__date\"  >\n          <cometchat-date [timestamp]=\"message?.getSentAt()\" [pattern]=\"DateSeparatorPattern\"   [dateStyle]=\"dateSeparatorStyle\"\n           >\n          </cometchat-date>\n        </span>\n      </div>\n        <div *ngIf=\"getBubbleWrapper(message) \">\n          <ng-container *ngTemplateOutlet=\"getBubbleWrapper(message)\">\n          </ng-container>\n        </div>\n       <div>\n        <cometchat-message-bubble  *ngIf=\"!getBubbleWrapper(message)\" [leadingView]=\" showAvatar ? leadingView : null\" [bottomView]=\"enableReactions ? reactionView : null\"\n        [headerView]=\"getHeaderView(message) || message?.getCategory() != MessageCategory.action && showHeaderTitle(message) ? bubbleHeader : null\" [footerView]=\"footerView\"  [contentView]=\"contentView\" [threadView]=\"threadView\"\n         [id]=\"message?.getId() || message?.getMuid()\" [options]=\"setMessageOptions(message)\"\n          [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"  [alignment]=\"setBubbleAlignment(message)\">\n        <ng-template #contentView>\n          <ng-container *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\" >\n          </ng-container>\n        </ng-template>\n        <ng-template #reactionView>\n          <reactions-view *ngIf=\"hasReaction(message)\" [messageObject]=\"message\" [alignment]=\"setBubbleAlignment(message)\"  [addReactionIconURL]=\"addReactionIconURL\"\n          [loggedInUser]=\"loggedInUser\" [reactionsStyle]=\"reactionsStyle(message)\"></reactions-view>\n          </ng-template>\n         <ng-template #footerView>\n          <div  class=\"cc-message-list__bubble-footer\">\n            <div *ngIf=\"getFooterView(message);else bubbleFooter\">\n              <ng-container *ngTemplateOutlet=\"getFooterView(message);context:{ $implicit: message }\" >\n              </ng-container>\n            </div>\n            <ng-template #bubbleFooter>\n              <div class=\"cc-message-list__bubble-date\" *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && !message.getDeletedAt() && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n                <cometchat-date [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" [pattern]=\"datePattern\">\n                </cometchat-date>\n               </div>\n                 <div *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() ||this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\" class=\"cc-message-list__receipt\">\n                    <cometchat-receipt [receipt]=\"getMessageReceipt(message)\" [receiptStyle]=\"receiptStyle\" [waitIcon]=\"waitIcon\" [sentIcon]=\"sentIcon\" [deliveredIcon]=\"deliveredIcon\" [readIcon]=\"readIcon\" [errorIcon]=\"errorIcon\"></cometchat-receipt>\n                 </div>\n            </ng-template>\n          </div>\n         </ng-template>\n<ng-template #leadingView>\n  <div  *ngIf=\" message?.getCategory() != MessageCategory.action  && showHeaderTitle(message)\" >\n    <cometchat-avatar [name]=\"message?.getSender()?.getName()\" [avatarStyle]=\"avatarStyle\" [image]=\"message?.getSender()?.getAvatar()\">\n    </cometchat-avatar>\n  </div>\n</ng-template>\n<ng-template #bubbleHeader>\n  <div *ngIf=\"getHeaderView(message);else defaultHeader\">\n    <ng-container *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\" >\n    </ng-container>\n  </div>\n<ng-template #defaultHeader>\n  <div  class=\"cc-message-list__bubble-header\" *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n    <cometchat-label [text]=\"message?.getSender()?.getName()\" [labelStyle]=\"labelStyle\"></cometchat-label>\n    <cometchat-date [pattern]=\"datePattern\" [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n   </div>\n</ng-template>\n</ng-template>\n<ng-template #threadView>\n  <div class=\"cc-message-list__threadreplies\" *ngIf=\"message?.getReplyCount() && !message.getDeletedAt()\" >\n    <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n    <cometchat-button [text]=\"getThreadCount(message)\" [buttonStyle]=\"getThreadViewStyle(message)\" [iconURL]=\"threadOpenIcon\" (cc-button-clicked)=\"openThreadView(message)\">\n    </cometchat-button>\n  </div>\n</ng-template>\n      </cometchat-message-bubble>\n       </div>\n    </div>\n    <div class=\"cc-message-list__bottom\" #bottom>\n    </div>\n\n  </div>\n  <div class=\"cc-message-list__message-indicator\" *ngIf=\"UnreadCount && UnreadCount.length > 0 && !isOnBottom\" [ngStyle]=\"{bottom: showSmartReply || footerView || showConversationStarter  ? '20%' : '13%'}\">\n    <cometchat-button [text]=\"newMessageCount\" [buttonStyle]=\"unreadMessagesStyle\" (cc-button-clicked)=\"scrollToBottom()\"></cometchat-button>\n  </div>\n  <div class=\"cc-message-list__footer-view\" [ngStyle]=\"{height: showSmartReply || showConversationStarter ? '8%' : 'auto'}\">\n\n    <div *ngIf=\"footerView;else footer\">\n      <ng-container *ngTemplateOutlet=\"footerView\">\n      </ng-container>\n    </div>\n    <ng-template #footer>\n      <div class=\"cc-message-list__smart-replies\" *ngIf=\"!showConversationStarter && showSmartReply && getReplies()\">\n        <smart-replies [smartReplyStyle]=\"smartReplyStyle\" [replies]=\"getReplies()\" (cc-reply-clicked)=\"sendReply($event)\" (cc-close-clicked)=\"closeSmartReply()\">\n        </smart-replies>\n      </div>\n      <div class=\"cc-message-list__conversation-starters\" *ngIf=\"enableConversationStarter && showConversationStarter\">\n        <div class=\"cc-message-list__footer__decorator-message\" *ngIf=\"conversationStarterState == states.loading || conversationStarterState == states.error  || conversationStarterState == states.empty \"\n        >\n        <div class=\"cc-message-list__footer-view-decorator\" *ngIf=\"conversationStarterState == states.loading\">\n          <cometchat-loader iconURL=\"assets/Spinner.svg\" [loaderStyle]=\"conversationStarterLoader()\">\n          </cometchat-loader>\n          <cometchat-label [labelStyle]=\"conversationStarterStateStyle()\"  [text]=\"starterLoadingStateText\"\n          >\n        </cometchat-label>\n        \n        </div>\n        <div class=\"cc-message-list__footer-view-decorator\" *ngIf=\"conversationStarterState == states.error  && !hideError \">\n          <cometchat-loader iconURL=\"assets/ai-error.svg\" [loaderStyle]=\"conversationStarterLoader()\">\n          </cometchat-loader>\n          <cometchat-label [labelStyle]=\"conversationStarterStateStyle()\"  [text]=\"starterErrorStateText\"\n            >\n          </cometchat-label>\n        \n        </div>\n        <div class=\"cc-message-list__footer-view-decorator\" *ngIf=\"conversationStarterState == states.empty\">\n          <cometchat-loader iconURL=\"assets/ai-empty.svg\" [loaderStyle]=\"conversationStarterLoader()\">\n          </cometchat-loader>\n          <cometchat-label [labelStyle]=\"conversationStarterStateStyle()\"  [text]=\"starterEmptyStateText\"\n            >\n          </cometchat-label>\n  \n        </div>\n      </div>\n        <smart-replies *ngIf=\"conversationStarterState == states.loaded && !parentMessageId\" [smartReplyStyle]=\"conversationStarterStyle\" [replies]=\"conversationStarterReplies\"  (cc-reply-clicked)=\"sendConversationStarter($event)\"  [closeIconURL]=\"''\">\n        </smart-replies>\n      </div>\n    </ng-template>\n        </div>\n\n</div>\n<!-- default bubbles -->\n<ng-template #textBubble let-message>\n  <cometchat-text-bubble *ngIf=\"message?.type == MessageTypesConstant.groupMember\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"message?.message\"></cometchat-text-bubble>\n  <cometchat-text-bubble *ngIf=\"message?.getDeletedAt()\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"localize('MESSAGE_IS_DELETED')\"></cometchat-text-bubble>\n<cometchat-text-bubble *ngIf=\"!isTranslated(message) && !getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"getTextMessage(message)\"></cometchat-text-bubble>\n<link-preview [linkPreviewStyle]=\"linkPreviewStyle\" (cc-link-clicked)=\"openLinkURL($event)\" *ngIf=\"!message?.getDeletedAt() && getLinkPreview(message) && enableLinkPreview\" [title]=\"getLinkPreviewDetails('title',message)\" [description]=\"getLinkPreviewDetails('description',message)\" [URL]=\"getLinkPreviewDetails('url',message)\" [image]=\"getLinkPreviewDetails('image',message)\" [favIconURL]=\"getLinkPreviewDetails('favicon',message)\">\n  <cometchat-text-bubble\n  *ngIf=\"!isTranslated(message) && getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n  [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"getTextMessage(message)\"></cometchat-text-bubble>\n</link-preview>\n<message-translation-bubble [alignment]=\"getBubbleAlignment(message)\" *ngIf=\"isTranslated(message)\"  [messageTranslationStyle]=\"setTranslationStyle(message)\" [translatedText]=\"isTranslated(message)\">\n  <cometchat-text-bubble *ngIf=\" !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"message?.text\"></cometchat-text-bubble>\n\n</message-translation-bubble>\n</ng-template>\n<ng-template #fileBubble let-message>\n\n  <cometchat-file-bubble [fileStyle]=\"setFileBubbleStyle(message)\" [downloadIconURL]=\"downloadIconURL\" [subtitle]=\"localize('SHARED_FILE')\" [title]=\"message?.data?.attachments ? message?.data?.attachments[0]?.name: ''\" [fileURL]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\"></cometchat-file-bubble>\n</ng-template>\n<ng-template #audioBubble let-message>\n  <cometchat-icon-button [disabled]=\"true\" *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.audio\" [iconURL]=\"getCallTypeIcon(message)\" [buttonStyle]=\"callStatusStyle(message)\" [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n  <cometchat-audio-bubble *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\"  [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\" > </cometchat-audio-bubble>\n</ng-template>\n<ng-template #videoBubble let-message>\n  <cometchat-icon-button [disabled]=\"true\" *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.video\" [iconURL]=\"getCallTypeIcon(message)\" [buttonStyle]=\"callStatusStyle(message)\" [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n\n  <cometchat-video-bubble *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\" [videoStyle]=\"videoBubbleStyle\" [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\" [poster]=\" getImageThumbnail(message)\"></cometchat-video-bubble>\n</ng-template>\n<ng-template #imageBubble let-message>\n <image-moderation  (cc-show-dialog)=\"openWarningDialog($event)\" *ngIf=\"!message.getDeletedAt() && enableImageModeration\" [message]=\"message\" [imageModerationStyle]=\"imageModerationStyle\">\n  <cometchat-image-bubble (cc-image-clicked)=\"openImageInFullScreen(message)\" [imageStyle]=\"imageBubbleStyle\"   [src]=\" getImageThumbnail(message)\" [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n </image-moderation>\n  <cometchat-image-bubble [imageStyle]=\"imageBubbleStyle\" (cc-image-clicked)=\"openImageInFullScreen(message)\" *ngIf=\"!message.getDeletedAt() && !enableImageModeration\"  [src]=\" getImageThumbnail(message)\" [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n</ng-template>\n<ng-template #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\" [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\" [ccClicked]=\"launchCollaborativeWhiteboardDocument\" [iconURL]=\"whiteboardIconURL\" [title]=\"whiteboardTitle\" [buttonText]=\"whiteboardButtonText\" [subtitle]=\"whiteboardSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #documentBubble  let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\" [iconAlignment]=\"documentBubbleAlignment\" [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\" [ccClicked]=\"launchCollaborativeWhiteboardDocument\" [iconURL]=\"documentIconURL\" [title]=\"documentTitle\" [buttonText]=\"documentButtonText\" [subtitle]=\"documentSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #directCalling  let-message>\n  <cometchat-document-bubble  [hideSeparator]=\"true\" [iconAlignment]=\"callBubbleAlignment\" [documentStyle]=\"getCallBubbleStyle(message)\" [URL]=\"getSessionId(message)\" [ccClicked]=\"startDirectCall\" [iconURL]=\"directCallIconURL\" [title]=\"getCallBubbleTitle(message)\" [buttonText]=\"joinCallButtonText\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #pollBubble  let-message>\n  <polls-bubble [pollStyle]=\"pollBubbleStyle\"  [pollQuestion]=\"getPollBubbleData(message,'question')\" [pollId]=\"getPollBubbleData(message,'id')\"\n   [loggedInUser]=\"loggedInUser\" [senderUid]=\"getPollBubbleData(message)\" [metadata]=\"message?.metadata\"></polls-bubble>\n\n</ng-template>\n\n<!-- thread bubble view -->\n<ng-template #threadMessageBubble let-message>\n  <div *ngIf=\"getBubbleWrapper(message)\">\n    <ng-container *ngTemplateOutlet=\"getBubbleWrapper(message)\">\n    </ng-container>\n  </div>\n  <cometchat-message-bubble  *ngIf=\"!getBubbleWrapper(message)\" [bottomView]=\"enableReactions ? reactionView : null\" [leadingView]=\" showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\" [footerView]=\"footerView\"\n  [contentView]=\"contentView\"  [id]=\"message?.getId() || message?.getMuid()\"  [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"  [alignment]=\"threadedAlignment\">\n    <ng-template #contentView>\n      <ng-container *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\" >\n      </ng-container>\n    </ng-template>\n    <ng-template #reactionView>\n      <reactions-view *ngIf=\"hasReaction(message)\" [messageObject]=\"message\" [alignment]=\"setBubbleAlignment(message)\"\n      \n      [loggedInUser]=\"loggedInUser\" [reactionsStyle]=\"reactionsStyle(message)\" [addReactionIconURL]=\"addReactionIconURL\"></reactions-view>\n      </ng-template>\n     <ng-template #footerView>\n      <div  class=\"cc-message-list__bubble-footer\">\n        <div *ngIf=\"getFooterView(message);else bubbleFooter\">\n          <ng-container *ngTemplateOutlet=\"getFooterView(message);context:{ $implicit: message }\" >\n          </ng-container>\n        </div>\n        <ng-template #bubbleFooter>\n          <div class=\"cc-message-list__bubble-date\" *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n            <cometchat-date [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" [pattern]=\"datePattern\">\n            </cometchat-date>\n           </div>\n             <div *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() ||this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\" class=\"cc-message-list__receipt\">\n                <cometchat-receipt [receipt]=\"getMessageReceipt(message)\" [receiptStyle]=\"receiptStyle\" [waitIcon]=\"waitIcon\" [sentIcon]=\"sentIcon\" [deliveredIcon]=\"\" [readIcon]=\"deliveredIcon\" [errorIcon]=\"errorIcon\"></cometchat-receipt>\n             </div>\n        </ng-template>\n      </div>\n     </ng-template>\n<ng-template #leadingView>\n<div  *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\" >\n<cometchat-avatar [name]=\"message?.getSender()?.getName()\" [avatarStyle]=\"avatarStyle\" [image]=\"message?.getSender()?.getAvatar()\">\n</cometchat-avatar>\n</div>\n</ng-template>\n<ng-template #bubbleHeader>\n<div *ngIf=\"getHeaderView(message);else defaultHeader\">\n<ng-container *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\" >\n</ng-container>\n</div>\n<ng-template #defaultHeader>\n<div  class=\"cc-message-list__bubble-header\" *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n<cometchat-label [text]=\"message?.getSender()?.getName()\" [labelStyle]=\"labelStyle\"></cometchat-label>\n<cometchat-date [pattern]=\"datePattern\" [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n</div>\n</ng-template>\n</ng-template>\n  </cometchat-message-bubble>\n\n</ng-template>\n\n\n<!--  -->\n<ng-template #bubbleView></ng-template>\n<cometchat-popover [popoverStyle]=\"popoverStyle\"  #popoverRef [placement]=\"keyboardAlignment\">\n<cometchat-emoji-keyboard (cc-emoji-clicked)=\"addReaction($event)\"  slot=\"content\"></cometchat-emoji-keyboard>\n</cometchat-popover>\n<cometchat-backdrop *ngIf=\"openConfirmDialog\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-confirm-dialog [title]=\"''\" [messageText]=\"warningText\" (cc-confirm-clicked)=\"onConfirmClick()\" [cancelButtonText]=\"cancelText\" [confirmButtonText]=\"confirmText\" (cc-cancel-clicked)=\"onCancelClick()\" [confirmDialogStyle]=\"confirmDialogStyle\">\n\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-full-screen-viewer (cc-close-clicked)=\"closeImageInFullScreen()\" *ngIf=\"openFullscreenView\" [URL]=\"imageurlToOpen\" [closeIconURL]=\"closeIconURL\" [fullScreenViewerStyle]=\"fullScreenViewerStyle\">\n\n</cometchat-full-screen-viewer>\n\n<!-- ongoing callscreen for direct call -->\n<cometchat-ongoing-call *ngIf=\"showOngoingCall\" [callSettingsBuilder]=\"getCallBuilder()\" [ongoingCallStyle]=\"ongoingCallStyle\" [sessionID]=\"sessionId\"></cometchat-ongoing-call>\n<!-- message information view -->\n<!-- thread bubble view -->\n<ng-template #messageinfoBubble let-message>\n  <div *ngIf=\"getBubbleWrapper(message)\">\n    <ng-container *ngTemplateOutlet=\"getBubbleWrapper(message)\">\n    </ng-container>\n  </div>\n  <cometchat-message-bubble  *ngIf=\"!getBubbleWrapper(message)\" [bottomView]=\"enableReactions && hasReaction(message) ? reactionView : null\" [leadingView]=\" showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\"\n  [contentView]=\"contentView\"  [id]=\"message?.getId() || message?.getMuid()\"  [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"  [alignment]=\"messageInfoAlignment\">\n    <ng-template #contentView>\n      <ng-container *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\" >\n      </ng-container>\n    </ng-template>\n    <ng-template #reactionView>\n      <reactions-view *ngIf=\"hasReaction(message)\" [messageObject]=\"message\" [alignment]=\"setBubbleAlignment(message)\"  [addReactionIconURL]=\"addReactionIconURL\"\n      [loggedInUser]=\"loggedInUser\" [reactionsStyle]=\"reactionsStyle(message)\"></reactions-view>\n      </ng-template>\n<ng-template #leadingView>\n<div  *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\" >\n<cometchat-avatar [name]=\"message?.getSender()?.getName()\" [avatarStyle]=\"avatarStyle\" [image]=\"message?.getSender()?.getAvatar()\">\n</cometchat-avatar>\n</div>\n</ng-template>\n<ng-template #bubbleHeader>\n<div *ngIf=\"getHeaderView(message);else defaultHeader\">\n<ng-container *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\" >\n</ng-container>\n</div>\n<ng-template #defaultHeader>\n<div  class=\"cc-message-list__bubble-header\" *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n<cometchat-label [text]=\"message?.getSender()?.getName()\" [labelStyle]=\"labelStyle\"></cometchat-label>\n<cometchat-date [pattern]=\"datePattern\" [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n</div>\n</ng-template>\n</ng-template>\n  </cometchat-message-bubble>\n\n</ng-template>\n<cometchat-backdrop *ngIf=\"openMessageInfoPage\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-message-information [closeIconURL]=\"messageInformationConfiguration.closeIconURL\"  [loadingStateView]=\"messageInformationConfiguration.loadingStateView\" [errorStateView]=\"messageInformationConfiguration.errorStateView\" [listItemStyle]=\"messageInformationConfiguration.listItemStyle\" [emptyStateView]=\"messageInformationConfiguration.emptyStateView\" [loadingIconURL]=\"messageInformationConfiguration.loadingIconURL\" [readIcon]=\"messageInformationConfiguration.readIcon\" [deliveredIcon]=\"messageInformationConfiguration.deliveredIcon\" [onError]=\"messageInformationConfiguration.onError\" [SubtitleView]=\"messageInformationConfiguration.subtitleView\" [receiptDatePattern]=\"messageInformationConfiguration.receiptDatePattern\" [listItemView]=\"messageInformationConfiguration.listItemView \" [messageInformationStyle]=\"messageInformationConfiguration.messageInformationStyle\" [onClose]=\"messageInformationConfiguration.onClose ??  closeMessageInfoPage\" [bubbleView]=\"messageInformationConfiguration.bubbleView ?? messageinfoBubble\" [message]=\"messageInfoObject\">\n\n  </cometchat-message-information>\n</cometchat-backdrop>\n", styles: [".cc-message-list{height:100%;width:100%;overflow-y:auto;overflow-x:hidden;position:relative}.cc-message-list__wrapper{height:100%;width:100%;overflow-y:hidden}.cc-message-list__bubble-footer{display:flex;justify-content:center;align-items:center}.cc-message-list__date-container{text-align:center;margin:5px 0}.cc-message-list__smart-replies,.cc-message-list__conversation-starters{height:-moz-fit-content;height:fit-content;width:100%;position:absolute;bottom:0;z-index:1}.cc-message-list__date{border-radius:10px;display:flex;justify-content:center}.cc-message-list__threadreplies{min-width:130px;width:100%}.cc-message-list__message-indicator{height:25px;display:flex;align-items:center;justify-content:center;width:100%;bottom:10%;position:absolute}.cc-message-list__footer-view{z-index:1;position:relative;width:100%}.cc-message-list__decorator-message{margin:0;line-height:30px;word-wrap:break-word;padding:0 8px;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;height:100%}.cc-message-list__footer__decorator-message{margin:0;line-height:30px;word-wrap:break-word;padding:0 8px 0 16px;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:flex-start;height:100%}.cc-message-list::-webkit-scrollbar{background:transparent;width:8px}.cc-message-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.cc-message-list__footer-view-decorator{display:flex;flex-direction:row;column-gap:8px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { listScroll: [{
                 type: ViewChild,
                 args: ["listScroll", { static: false }]
@@ -9476,6 +10106,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], imageBubble: [{
                 type: ViewChild,
                 args: ["imageBubble", { static: false }]
+            }], formBubble: [{
+                type: ViewChild,
+                args: ["formBubble", { static: false }]
+            }], cardBubble: [{
+                type: ViewChild,
+                args: ["cardBubble", { static: false }]
             }], stickerBubble: [{
                 type: ViewChild,
                 args: ["stickerBubble", { static: false }]
@@ -9570,6 +10206,117 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }] } });
 
+class CometChatCardViewComponent {
+    constructor(themeService, ref) {
+        this.themeService = themeService;
+        this.ref = ref;
+        this.buttons = [];
+        this.closeCallback = null;
+        this.replies = [];
+        this.state = States.loading;
+        this.states = States;
+        this.errorStateText = localize("SOMETHING_WRONG");
+        this.emptyStateText = localize("NO_MESSAGES_FOUND");
+        this.loadingStateText = localize("GENERATING_REPLIES");
+        this.theme = new CometChatTheme({});
+        this.localize = localize;
+        this.handleGoBack = () => {
+            this.currentSection = undefined;
+            this.activeButtonText = "";
+            this.state = States.loading;
+            this.replies = [];
+            this.ref.detectChanges();
+        };
+        this.stateLoader = () => {
+            return {
+                iconTint: this.theme.palette.getAccent600(),
+            };
+        };
+        this.repliesStateStyle = () => {
+            return {
+                textFont: fontHelper(this.theme.typography.title2),
+                textColor: this.theme.palette.getAccent600(),
+            };
+        };
+        this.theme = themeService.theme;
+    }
+    fetchButtonContent(button) {
+        this.activeButtonText = button.title;
+        this.currentSection = button;
+        this.state = States.loading;
+        this.ref.detectChanges();
+        button.onClick().then((response) => {
+            if (response && (response === null || response === void 0 ? void 0 : response.length) > 0) {
+                this.replies = response;
+                this.state = States.loaded;
+                this.ref.detectChanges();
+            }
+            else {
+                this.state = States.empty;
+                this.ref.detectChanges();
+            }
+        })
+            .catch((err) => {
+            console.log(err);
+            this.state = States.error;
+            this.ref.detectChanges();
+        });
+    }
+    ngOnInit() {
+        if (this.closeCallback) {
+            this.closeCallback(this.handleGoBack);
+        }
+    }
+    buttonStyles() {
+        return {
+            height: "35px",
+            width: "100%",
+            padding: "0 8px",
+            background: this.theme.palette.getAccent100(),
+            border: "none",
+            borderRadius: "8px",
+            buttonTextColor: this.theme.palette.getAccent600(),
+            buttonTextFont: fontHelper(this.theme.typography.text2),
+            margin: "8px 0"
+        };
+    }
+    repliesViewStyle() {
+        return {
+            width: "100%",
+            padding: "8px",
+            background: this.theme.palette.getAccent100(),
+            border: "none",
+            borderRadius: "8px",
+            buttonTextColor: this.theme.palette.getAccent600(),
+            buttonTextFont: fontHelper(this.theme.typography.text3),
+            margin: "8px 0",
+        };
+    }
+    backButtonStyle() {
+        return {
+            height: "24px",
+            width: "24px",
+            background: "transparent",
+            border: "none",
+            buttonIconTint: this.theme.palette.getPrimary(),
+            position: "absolute",
+            top: "8px",
+            left: "8px",
+            zIndex: 2
+        };
+    }
+}
+CometChatCardViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCardViewComponent, deps: [{ token: CometChatThemeService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+CometChatCardViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatCardViewComponent, selector: "cometchat-card-view", inputs: { buttons: "buttons", closeCallback: "closeCallback" }, ngImport: i0, template: "<div class=\"buttons-container cc__scroll-view\"  *ngIf=\"buttons && buttons.length > 0\">\n        <cometchat-label\n          [text]=\"activeButtonText ? activeButtonText : localize('AI')\"\n        ></cometchat-label>\n  \n        <div  class=\"cc__content-view-container\">\n          <div *ngIf=\"!currentSection\" class=\"cc__content-view\">\n            <cometchat-button *ngFor=\"let button of buttons\" (click)=\"fetchButtonContent(button)\" [text]=\"button.title\" [buttonStyle]=\"buttonStyles()\">\n            </cometchat-button>\n          </div>\n  \n          <div *ngIf=\"currentSection\">\n            <div style=\"height: 100%; margin-top: 12px; overflow: hidden auto;\">\n              <cometchat-button (click)=\"handleGoBack()\" iconURL=\"assets/backbutton.svg\" [buttonStyle]=\"backButtonStyle()\">\n              \n              </cometchat-button>\n  \n              <div *ngIf=\"state == states.loaded; else stateView\">\n                <cometchat-button *ngFor=\"let reply of replies\"  [text]=\"reply\" [buttonStyle]=\"repliesViewStyle()\">\n                </cometchat-button>\n              </div>\n  \n              <ng-template #stateView>\n                <div class=\"cc-cardview___decorator-message\" *ngIf=\"state == states.loading || state == states.error  || state == states.empty\">\n        <div class=\"cc-cardview__view-decorator\" *ngIf=\"state == states.loading\">\n          <cometchat-loader iconURL=\"assets/Spinner.svg\" [loaderStyle]=\"stateLoader()\">\n          </cometchat-loader>\n          <cometchat-label [labelStyle]=\"repliesStateStyle()\"  [text]=\"loadingStateText\"\n          >\n        </cometchat-label>\n        \n        </div>\n        <div class=\"cc-cardview__view-decorator\" *ngIf=\"state == states.error \">\n          <cometchat-loader iconURL=\"assets/ai-error.svg\" [loaderStyle]=\"stateLoader()\">\n          </cometchat-loader>\n          <cometchat-label [labelStyle]=\"repliesStateStyle()\"  [text]=\"errorStateText\"\n            >\n          </cometchat-label>\n        \n        </div>\n        <div class=\"cc-cardview__view-decorator\" *ngIf=\"state == states.empty\">\n          <cometchat-loader iconURL=\"assets/ai-empty.svg\" [loaderStyle]=\"stateLoader()\">\n          </cometchat-loader>\n          <cometchat-label [labelStyle]=\"repliesStateStyle()\"  [text]=\"emptyStateText\"\n            >\n          </cometchat-label>\n  \n        </div>\n      </div>\n              </ng-template>\n            </div>\n          </div>\n        </div>\n    \n  </div>", styles: [".buttons-container{background-color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;overflow:hidden;padding:8px}.cc__content-view{height:100%;width:100%;overflow:hidden auto}.cc__content-view-container{height:100%;width:100%;margin-top:8px;overflow:hidden}.cc__content-view::-webkit-scrollbar{background:transparent;width:8px}.cc__content-view::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.cc-cardview___decorator-message{margin:0;line-height:30px;word-wrap:break-word;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;height:100%;position:absolute;bottom:0}\n"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCardViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cometchat-card-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"buttons-container cc__scroll-view\"  *ngIf=\"buttons && buttons.length > 0\">\n        <cometchat-label\n          [text]=\"activeButtonText ? activeButtonText : localize('AI')\"\n        ></cometchat-label>\n  \n        <div  class=\"cc__content-view-container\">\n          <div *ngIf=\"!currentSection\" class=\"cc__content-view\">\n            <cometchat-button *ngFor=\"let button of buttons\" (click)=\"fetchButtonContent(button)\" [text]=\"button.title\" [buttonStyle]=\"buttonStyles()\">\n            </cometchat-button>\n          </div>\n  \n          <div *ngIf=\"currentSection\">\n            <div style=\"height: 100%; margin-top: 12px; overflow: hidden auto;\">\n              <cometchat-button (click)=\"handleGoBack()\" iconURL=\"assets/backbutton.svg\" [buttonStyle]=\"backButtonStyle()\">\n              \n              </cometchat-button>\n  \n              <div *ngIf=\"state == states.loaded; else stateView\">\n                <cometchat-button *ngFor=\"let reply of replies\"  [text]=\"reply\" [buttonStyle]=\"repliesViewStyle()\">\n                </cometchat-button>\n              </div>\n  \n              <ng-template #stateView>\n                <div class=\"cc-cardview___decorator-message\" *ngIf=\"state == states.loading || state == states.error  || state == states.empty\">\n        <div class=\"cc-cardview__view-decorator\" *ngIf=\"state == states.loading\">\n          <cometchat-loader iconURL=\"assets/Spinner.svg\" [loaderStyle]=\"stateLoader()\">\n          </cometchat-loader>\n          <cometchat-label [labelStyle]=\"repliesStateStyle()\"  [text]=\"loadingStateText\"\n          >\n        </cometchat-label>\n        \n        </div>\n        <div class=\"cc-cardview__view-decorator\" *ngIf=\"state == states.error \">\n          <cometchat-loader iconURL=\"assets/ai-error.svg\" [loaderStyle]=\"stateLoader()\">\n          </cometchat-loader>\n          <cometchat-label [labelStyle]=\"repliesStateStyle()\"  [text]=\"errorStateText\"\n            >\n          </cometchat-label>\n        \n        </div>\n        <div class=\"cc-cardview__view-decorator\" *ngIf=\"state == states.empty\">\n          <cometchat-loader iconURL=\"assets/ai-empty.svg\" [loaderStyle]=\"stateLoader()\">\n          </cometchat-loader>\n          <cometchat-label [labelStyle]=\"repliesStateStyle()\"  [text]=\"emptyStateText\"\n            >\n          </cometchat-label>\n  \n        </div>\n      </div>\n              </ng-template>\n            </div>\n          </div>\n        </div>\n    \n  </div>", styles: [".buttons-container{background-color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;overflow:hidden;padding:8px}.cc__content-view{height:100%;width:100%;overflow:hidden auto}.cc__content-view-container{height:100%;width:100%;margin-top:8px;overflow:hidden}.cc__content-view::-webkit-scrollbar{background:transparent;width:8px}.cc__content-view::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.cc-cardview___decorator-message{margin:0;line-height:30px;word-wrap:break-word;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;height:100%;position:absolute;bottom:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: CometChatThemeService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { buttons: [{
+                type: Input
+            }], closeCallback: [{
+                type: Input
+            }] } });
+
 /**
 *
 * CometChatMessageComposer is used to send message to user or group.
@@ -9608,6 +10355,12 @@ class CometChatMessageComposerComponent {
             background: "rgba(0, 0, 0, 0.5)",
             position: "fixed"
         };
+        this.actionSheetStyle = {
+            borderRadius: "inherit",
+            border: "none",
+            width: "100%",
+            height: "100%",
+        };
         this.hideVoiceRecording = false;
         this.mediaRecorderStyle = {};
         this.voiceRecordingIconURL = "assets/mic.svg";
@@ -9619,7 +10372,9 @@ class CometChatMessageComposerComponent {
         this.showCreatePolls = false;
         this.showStickerKeyboard = false;
         this.showActionSheetItem = false;
+        this.showAiFeatures = false;
         this.showPreview = false;
+        this.aiFeaturesCloseCallback = null;
         this.acceptHandlers = {
             "image/*": this.onImageChange.bind(this),
             "video/*": this.onVideoChange.bind(this),
@@ -9630,6 +10385,7 @@ class CometChatMessageComposerComponent {
         this.toggleMediaRecorded = false;
         this.stickerConfiguration = {};
         this.closeButtonIconURL = "assets/plus-rotated.svg";
+        this.buttons = [];
         this.sendButtonStyle = {
             height: "24px",
             width: "24px",
@@ -9706,6 +10462,14 @@ class CometChatMessageComposerComponent {
             borderRadius: "8px",
             boxShadow: "0px 0px 8px rgba(20, 20, 20, 0.2)",
         };
+        this.aiPopover = {
+            width: "280px",
+            height: "220px",
+            border: "none",
+            background: "transparent",
+            borderRadius: "8px",
+            boxShadow: "0px 0px 8px rgba(20, 20, 20, 0.2)",
+        };
         this.mediaRecordedPopover = {
             width: "250px",
             height: "100px",
@@ -9723,18 +10487,6 @@ class CometChatMessageComposerComponent {
         this.sendButtonIconURL = "assets/Send.svg";
         this.emojiButtonIconURL = "assets/Stipop.svg";
         this.stickerButtonIconURL = "assets/Stickers.svg";
-        this.actionsheetStyle = {
-            layoutModeIconTint: "rgba(20, 20, 20, 0.04)",
-            borderRadius: "inherit",
-            background: "rgb(255,255,255)",
-            border: "none",
-            width: "100%",
-            height: "100%",
-            titleFont: "500 15px Inter, sans-serif",
-            titleColor: "#141414",
-            listItemBackground: "",
-            ActionSheetSeparatorTint: "1px solid RGBA(20, 20, 20, 0.08)"
-        };
         this.messageText = "";
         this.attachmentButtonStyle = {
             height: "24px",
@@ -9748,6 +10500,8 @@ class CometChatMessageComposerComponent {
         this.messageSending = false;
         this.showSendButton = false;
         this.showEmojiKeyboard = false;
+        this.isAiEnabled = false;
+        this.smartReplies = [];
         this.sendMessageOnEnter = (event) => {
             var _a, _b;
             this.showSendButton = false;
@@ -9889,6 +10643,44 @@ class CometChatMessageComposerComponent {
                 this.showStickerKeyboard = !this.showStickerKeyboard;
                 this.ref.detectChanges();
             }
+            if (this.showAiFeatures) {
+                this.aiButtonRef.nativeElement.click();
+                this.showAiFeatures = !this.showAiFeatures;
+                this.ref.detectChanges();
+            }
+            else {
+                return;
+            }
+        };
+        this.handleAiFeaturesClose = (callback) => {
+            this.aiFeaturesCloseCallback = callback;
+        };
+        this.openAiFeatures = (event) => {
+            var _a;
+            if (this.aiFeaturesCloseCallback) {
+                this.aiFeaturesCloseCallback();
+            }
+            if ((_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.hasOwnProperty("isOpen")) {
+                this.showAiFeatures = false;
+                this.ref.detectChanges();
+                return;
+            }
+            this.showAiFeatures = !this.showAiFeatures;
+            this.closeMediaRecorder();
+            if (this.showEmojiKeyboard) {
+                this.emojiButtonRef.nativeElement.click();
+                this.showEmojiKeyboard = !this.showEmojiKeyboard;
+            }
+            if (this.showStickerKeyboard) {
+                this.stickerButtonRef.nativeElement.click();
+                this.showStickerKeyboard = !this.showStickerKeyboard;
+                this.ref.detectChanges();
+            }
+            if (this.showActionSheetItem) {
+                this.actionSheetRef.nativeElement.click();
+                this.showActionSheetItem = !this.showActionSheetItem;
+                this.ref.detectChanges();
+            }
             else {
                 return;
             }
@@ -9912,6 +10704,11 @@ class CometChatMessageComposerComponent {
                 this.showStickerKeyboard = !this.showStickerKeyboard;
                 this.ref.detectChanges();
             }
+            if (this.showAiFeatures) {
+                this.aiButtonRef.nativeElement.click();
+                this.showAiFeatures = !this.showAiFeatures;
+                this.ref.detectChanges();
+            }
             else {
                 return;
             }
@@ -9940,6 +10737,11 @@ class CometChatMessageComposerComponent {
                 this.showStickerKeyboard = !this.showStickerKeyboard;
                 this.ref.detectChanges();
             }
+            if (this.showAiFeatures) {
+                this.aiButtonRef.nativeElement.click();
+                this.showAiFeatures = !this.showAiFeatures;
+                this.ref.detectChanges();
+            }
             else {
                 return;
             }
@@ -9968,6 +10770,25 @@ class CometChatMessageComposerComponent {
                 return;
             }
         };
+        this.getSmartReplies = () => {
+            return new Promise((resolve, reject) => {
+                var _a, _b;
+                let receiverId = this.user ? (_a = this.user) === null || _a === void 0 ? void 0 : _a.getUid() : (_b = this.group) === null || _b === void 0 ? void 0 : _b.getGuid();
+                let receiverType = this.user ? CometChatUIKitConstants.MessageReceiverType.user : CometChatUIKitConstants.MessageReceiverType.group;
+                CometChat.getSmartReplies(receiverId, receiverType).then((response) => {
+                    let repliesArray = [];
+                    Object.keys(response).forEach((reply) => {
+                        if (response[reply] && response[reply] != "") {
+                            repliesArray.push(response[reply]);
+                        }
+                    });
+                    resolve(repliesArray);
+                })
+                    .catch((err) => {
+                    return reject(err);
+                });
+            });
+        };
     }
     sendReaction() {
         var _a, _b;
@@ -10028,6 +10849,10 @@ class CometChatMessageComposerComponent {
                 this.openEditPreview();
             }
         });
+        this.ccComposeMessage = CometChatUIEvents.ccComposeMessage.subscribe((text) => {
+            this.text = text;
+            this.ref.detectChanges();
+        });
     }
     openEditPreview() {
         this.showPreview = true;
@@ -10038,15 +10863,43 @@ class CometChatMessageComposerComponent {
         var _a;
         (_a = this.ccMessageEdit) === null || _a === void 0 ? void 0 : _a.unsubscribe();
     }
+    closeModals() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        if (this.showActionSheetItem) {
+            (_b = (_a = this.actionSheetRef) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.click();
+            this.showActionSheetItem = false;
+        }
+        if (this.showEmojiKeyboard) {
+            (_d = (_c = this.emojiButtonRef) === null || _c === void 0 ? void 0 : _c.nativeElement) === null || _d === void 0 ? void 0 : _d.click();
+            this.showEmojiKeyboard = false;
+        }
+        if (this.showStickerKeyboard) {
+            (_f = (_e = this.stickerButtonRef) === null || _e === void 0 ? void 0 : _e.nativeElement) === null || _f === void 0 ? void 0 : _f.click();
+            this.showStickerKeyboard = false;
+        }
+        if (this.toggleMediaRecorded) {
+            (_h = (_g = this.mediaRecordedRef) === null || _g === void 0 ? void 0 : _g.nativeElement) === null || _h === void 0 ? void 0 : _h.click();
+            this.toggleMediaRecorded = false;
+        }
+        if (this.showAiFeatures) {
+            (_k = (_j = this.aiButtonRef) === null || _j === void 0 ? void 0 : _j.nativeElement) === null || _k === void 0 ? void 0 : _k.click();
+            this.showAiFeatures = false;
+        }
+    }
     ngOnChanges(changes) {
-        var _a;
+        var _a, _b, _c;
         if (changes["user"] || changes["group"]) {
+            this.closeModals();
+            this.messageText = "";
+            (_b = (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.emptyInputField();
+            this.showSendButton = false;
+            this.text = "";
             this.composerId = this.getComposerId();
             if (this.attachmentOptions) {
                 this.composerActions = this.attachmentOptions(this.user || this.group, this.composerId);
             }
             else {
-                this.composerActions = (_a = ChatConfigurator.getDataSource()) === null || _a === void 0 ? void 0 : _a.getAttachmentOptions(this.themeService.theme, this.user, this.group, this.composerId);
+                this.composerActions = (_c = ChatConfigurator.getDataSource()) === null || _c === void 0 ? void 0 : _c.getAttachmentOptions(this.themeService.theme, this.user, this.group, this.composerId);
                 this.addAttachmentCallback();
             }
         }
@@ -10430,6 +11283,20 @@ class CometChatMessageComposerComponent {
         else {
             this.enableStickerKeyboard = false;
         }
+        this.enableAiFeatures();
+    }
+    enableAiFeatures() {
+        if (ChatConfigurator.names.includes('aienabler') && !this.parentMessageId) {
+            this.isAiEnabled = true;
+            if (ChatConfigurator.names.includes('aismartreply')) {
+                this.buttons.push({
+                    title: localize("SUGGEST_A_REPLY"),
+                    id: "aismartreply",
+                    onClick: this.getSmartReplies
+                });
+                this.ref.detectChanges();
+            }
+        }
     }
     composerWrapperStyle() {
         return {
@@ -10440,17 +11307,19 @@ class CometChatMessageComposerComponent {
         this.emojiPopover.boxShadow = `0px 0px 32px ${this.themeService.theme.palette.getAccent50()}`;
         this.stickerPopover.boxShadow = `0px 0px 32px ${this.themeService.theme.palette.getAccent50()}`;
         this.mediaRecordedPopover.boxShadow = `0px 0px 32px ${this.themeService.theme.palette.getAccent50()}`;
+        this.aiPopover.background = this.themeService.theme.palette.getBackground();
+        this.aiPopover.boxShadow = `0px 0px 32px ${this.themeService.theme.palette.getAccent50()}`;
         this.setComposerStyle();
-        this.actionsheetStyle = {
-            layoutModeIconTint: this.messageComposerStyle.ActionSheetLayoutModeIconTint || this.themeService.theme.palette.getAccent(),
+        this.actionSheetStyle = {
+            layoutModeIconTint: this.actionSheetStyle.layoutModeIconTint || this.themeService.theme.palette.getAccent(),
             borderRadius: "inherit",
             background: this.themeService.theme.palette.getBackground(),
             border: "none",
             width: "100%",
             height: "100%",
-            titleFont: this.messageComposerStyle.ActionSheetTitleFont || fontHelper(this.themeService.theme.typography.title2),
-            titleColor: this.messageComposerStyle.ActionSheetTitleColor || this.themeService.theme.palette.getAccent(),
-            ActionSheetSeparatorTint: this.messageComposerStyle.ActionSheetSeparatorTint || `1px solid ${this.themeService.theme.palette.getAccent400()}`
+            titleFont: this.actionSheetStyle.titleFont || fontHelper(this.themeService.theme.typography.title2),
+            titleColor: this.actionSheetStyle.titleColor || this.themeService.theme.palette.getAccent(),
+            ActionSheetSeparatorTint: this.actionSheetStyle.ActionSheetSeparatorTint || this.themeService.theme.palette.getAccent400()
         };
         this.messageInputStyle = {
             height: "100%",
@@ -10589,10 +11458,6 @@ class CometChatMessageComposerComponent {
             dividerTint: this.themeService.theme.palette.getAccent200(),
             textFont: fontHelper(this.themeService.theme.typography.subtitle1),
             textColor: this.themeService.theme.palette.getAccent(),
-            ActionSheetSeparatorTint: this.themeService.theme.palette.getAccent200(),
-            ActionSheetTitleColor: this.themeService.theme.palette.getAccent(),
-            ActionSheetTitleFont: fontHelper(this.themeService.theme.typography.title1),
-            ActionSheetLayoutModeIconTint: this.themeService.theme.palette.getPrimary(),
             emojiKeyboardTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
             emojiKeyboardTextColor: this.themeService.theme.palette.getAccent400(),
             previewTitleFont: fontHelper(this.themeService.theme.typography.subtitle1),
@@ -10611,10 +11476,10 @@ class CometChatMessageComposerComponent {
     }
 }
 CometChatMessageComposerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageComposerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
-CometChatMessageComposerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatMessageComposerComponent, selector: "cometchat-message-composer", inputs: { user: "user", group: "group", disableSoundForMessages: "disableSoundForMessages", customSoundForMessage: "customSoundForMessage", disableTypingEvents: "disableTypingEvents", text: "text", placeholderText: "placeholderText", headerView: "headerView", onTextChange: "onTextChange", attachmentIconURL: "attachmentIconURL", attachmentOptions: "attachmentOptions", secondaryButtonView: "secondaryButtonView", auxilaryButtonView: "auxilaryButtonView", auxiliaryButtonsAlignment: "auxiliaryButtonsAlignment", sendButtonView: "sendButtonView", parentMessageId: "parentMessageId", hideLiveReaction: "hideLiveReaction", LiveReactionIconURL: "LiveReactionIconURL", messageComposerStyle: "messageComposerStyle", onSendButtonClick: "onSendButtonClick", onError: "onError", backdropStyle: "backdropStyle", hideVoiceRecording: "hideVoiceRecording", mediaRecorderStyle: "mediaRecorderStyle", voiceRecordingIconURL: "voiceRecordingIconURL", voiceRecordingCloseIconURL: "voiceRecordingCloseIconURL", voiceRecordingStartIconURL: "voiceRecordingStartIconURL", voiceRecordingStopIconURL: "voiceRecordingStopIconURL", voiceRecordingSubmitIconURL: "voiceRecordingSubmitIconURL" }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "emojiButtonRef", first: true, predicate: ["emojiButtonRef"], descendants: true }, { propertyName: "actionSheetRef", first: true, predicate: ["actionSheetRef"], descendants: true }, { propertyName: "stickerButtonRef", first: true, predicate: ["stickerButtonRef"], descendants: true }, { propertyName: "mediaRecordedRef", first: true, predicate: ["mediaRecordedRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-message-composer__wrapper\" [ngStyle]=\"composerWrapperStyle()\">\n  <div class=\"cc-message-composer__header-view\" *ngIf=\"headerView; else messagePreview\">\n    <ng-container *ngTemplateOutlet=\"headerView;context:{ $implicit: user ?? group, composerId:composerId }\">\n    </ng-container>\n  </div>\n  <ng-template #messagePreview>\n    <div class=\"cc-message-composer__header-view\" *ngIf=\"showPreview\">\n      <cometchat-preview [previewStyle]=\"previewStyle\" [previewSubtitle]=\"messageToBeEdited.getText()\" (cc-preview-close-clicked)=\"closePreview()\"> </cometchat-preview>\n    </div>\n  </ng-template>\n<div class=\"cc-message-composer__input\">\n  <cometchat-message-input (cc-message-input-entered)=\"sendMessageOnEnter($event)\" #inputRef [text]=\"text\" (cc-message-input-changed)=\"messageInputChanged($event)\" [messageInputStyle]=\"messageInputStyle\" [placeholderText]=\"placeholderText\" [auxiliaryButtonAlignment]=\"auxiliaryButtonsAlignment\">\n    <div slot=\"secondaryView\">\n      <div *ngIf=\"secondaryButtonView;else secondaryButton\">\n        <ng-container *ngTemplateOutlet=\"secondaryButtonView;context:{ $implicit: user ?? group, composerId:composerId }\">\n        </ng-container>\n      </div>\n      <ng-template #secondaryButton>\n    <div class=\"cc-message-composer__attachbutton\">\n        <cometchat-popover (cc-popover-outside-click)=\"openActionSheet($event)\" [placement]=\"auxilaryPlacement\" [popoverStyle]=\"popoverStyle\" >\n          <cometchat-action-sheet slot=\"content\" [actions]=\"composerActions\" [actionSheetStyle]=\"actionsheetStyle\" (cc-actionsheet-clicked)=\"handleActions($event)\">\n          </cometchat-action-sheet>\n            <cometchat-button #actionSheetRef slot=\"children\" (cc-button-clicked)=\"openActionSheet($event)\" [iconURL]=\"!showActionSheetItem || (showEmojiKeyboard && !showActionSheetItem)  ? attachmentIconURL  : closeButtonIconURL\" [buttonStyle]=\"attachmentButtonStyle\"></cometchat-button>\n        </cometchat-popover>\n    </div>\n      </ng-template>\n    </div>\n\n      <div class=\"cc-message-composer__auxiliary\" slot=\"auxilaryView\">\n        <div class=\"cc-message-composer__custom-auxiliary-view\" *ngIf=\"auxilaryButtonView\">\n          <ng-container *ngTemplateOutlet=\"auxilaryButtonView;context:{ $implicit: user ?? group, composerId:composerId }\">\n          </ng-container>\n        </div>\n   \n        <div class=\"cc-message-composer__stickerkeyboard\" *ngIf=\"enableStickerKeyboard\">\n          <cometchat-popover (cc-popover-outside-click)=\"openStickerKeyboard($event)\" [popoverStyle]=\"stickerPopover\" [placement]=\"auxilaryPlacement\" >\n            <stickers-keyboard  slot=\"content\"  [stickerStyle]=\"stickerKeyboardStyle\" (cc-sticker-clicked)=\"sendSticker($event)\">\n            </stickers-keyboard>\n            <cometchat-button [hoverText]=\"localize('STICKER')\" slot=\"children\" #stickerButtonRef  (cc-button-clicked)=\"openStickerKeyboard($event)\" [iconURL]=\" !showStickerKeyboard ? stickerButtonIconURL : closeButtonIconURL\" [buttonStyle]=\"stickerButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n        <div class=\"cc-message-composer__emojikeyboard\">\n          <cometchat-popover (cc-popover-outside-click)=\"openEmojiKeyboard($event)\" [placement]=\"auxilaryPlacement\" [popoverStyle]=\"emojiPopover\" >\n            <cometchat-emoji-keyboard slot=\"content\" [emojiKeyboardStyle]=\"emojiKeyboardStyle\" (cc-emoji-clicked)=\"appendEmoji($event)\">\n            </cometchat-emoji-keyboard>\n            <cometchat-button #emojiButtonRef [hoverText]=\"localize('EMOJI')\" slot=\"children\" (cc-button-clicked)=\"openEmojiKeyboard($event)\" [iconURL]=\" !showEmojiKeyboard  || (!showEmojiKeyboard && showActionSheetItem) ? emojiButtonIconURL : closeButtonIconURL\" [buttonStyle]=\"emojiButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n        <div class=\"cc-message-composer__mediarecorder\" *ngIf=\"!hideVoiceRecording\">\n          <cometchat-popover [closeOnOutsideClick]=\"false\"  [popoverStyle]=\"mediaRecordedPopover\" [placement]=\"auxilaryPlacement\" >\n            \n            <cometchat-media-recorder *ngIf=\"toggleMediaRecorded\" [autoRecording]=\"true\"  startIconText=\"\" stopIconText=\"\" submitButtonIconText=\"\" [submitButtonIconURL]=\"voiceRecordingSubmitIconURL\" [startIconURL]=\"voiceRecordingStartIconURL\" [stopIconURL]=\"voiceRecordingStopIconURL\"  [closeIconURL]=\"voiceRecordingCloseIconURL\" (cc-media-recorder-submitted)=\"sendRecordedMedia($event)\" (cc-media-recorder-closed)=\"closeMediaRecorder($event)\" slot=\"content\" [mediaPlayerStyle]=\"mediaRecorderStyle\"></cometchat-media-recorder>\n            <cometchat-icon-button [hoverText]=\"localize('VOICE_RECORDING')\" slot=\"children\" #mediaRecordedRef  (cc-button-clicked)=\"openMediaRecorded($event)\" [iconURL]=\" !toggleMediaRecorded ? voiceRecordingIconURL : closeButtonIconURL\" [buttonStyle]=\"mediaRecorderButtonStyle\"></cometchat-icon-button>\n          </cometchat-popover>\n        </div>\n      </div>\n    <div slot=\"primaryView\">\n      <div *ngIf=\"sendButtonView;else sendButton\">\n      </div>\n      <ng-template #sendButton>\n        <div class=\"cc-message-composer__sendbutton\" *ngIf=\"showSendButton || hideLiveReaction\">\n  <cometchat-button [iconURL]=\"sendButtonIconURL\" [buttonStyle]=\"sendButtonStyle\" [hoverText]=\"localize('SEND_MESSAGE')\" (cc-button-clicked)=\"customSendMethod(messageText)\"></cometchat-button>\n        </div>\n        <div class=\"cc-message-composer__livereaction\" *ngIf=\"!hideLiveReaction && !showSendButton\">\n          <cometchat-button [iconURL]=\"LiveReactionIconURL\" [hoverText]=\"localize('LIVE_REACTION')\" [buttonStyle]=\"liveReactionStyle\" (cc-button-clicked)=\"sendReaction()\"></cometchat-button>\n          </div>\n      </ng-template>\n    </div>\n  </cometchat-message-input>\n</div>\n</div>\n\n<input class=\"cc-message-composer__mediainput\" #inputElement (change)=\"inputChangeHandler($event)\" />\n<cometchat-backdrop *ngIf=\"showCreatePolls\" [backdropStyle]=\"backdropStyle\">\n  <create-poll [user]=\"user\" [group]=\"group\" (cc-close-clicked)=\"closeCreatePolls()\" [createPollStyle]=\"createPollStyle\"></create-poll>\n</cometchat-backdrop>", styles: [".cc-message-composer__sendbutton,.cc-message-composer__livereaction{margin:0 5px}.cc-message-composer__wrapper{height:100%;width:100%;position:relative;padding:14px 16px}.cc-message-composer__header-view{height:-moz-fit-content;height:fit-content;width:100%;bottom:120%}.cc-message-composer__mediainput{display:none}.cc-message-composer__auxiliary{display:flex;gap:8px}*{box-sizing:border-box}\n"], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CometChatMessageComposerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatMessageComposerComponent, selector: "cometchat-message-composer", inputs: { user: "user", group: "group", disableSoundForMessages: "disableSoundForMessages", customSoundForMessage: "customSoundForMessage", disableTypingEvents: "disableTypingEvents", text: "text", placeholderText: "placeholderText", headerView: "headerView", onTextChange: "onTextChange", attachmentIconURL: "attachmentIconURL", attachmentOptions: "attachmentOptions", secondaryButtonView: "secondaryButtonView", auxilaryButtonView: "auxilaryButtonView", auxiliaryButtonsAlignment: "auxiliaryButtonsAlignment", sendButtonView: "sendButtonView", parentMessageId: "parentMessageId", hideLiveReaction: "hideLiveReaction", LiveReactionIconURL: "LiveReactionIconURL", messageComposerStyle: "messageComposerStyle", onSendButtonClick: "onSendButtonClick", onError: "onError", backdropStyle: "backdropStyle", actionSheetStyle: "actionSheetStyle", hideVoiceRecording: "hideVoiceRecording", mediaRecorderStyle: "mediaRecorderStyle", voiceRecordingIconURL: "voiceRecordingIconURL", voiceRecordingCloseIconURL: "voiceRecordingCloseIconURL", voiceRecordingStartIconURL: "voiceRecordingStartIconURL", voiceRecordingStopIconURL: "voiceRecordingStopIconURL", voiceRecordingSubmitIconURL: "voiceRecordingSubmitIconURL" }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "emojiButtonRef", first: true, predicate: ["emojiButtonRef"], descendants: true }, { propertyName: "actionSheetRef", first: true, predicate: ["actionSheetRef"], descendants: true }, { propertyName: "stickerButtonRef", first: true, predicate: ["stickerButtonRef"], descendants: true }, { propertyName: "mediaRecordedRef", first: true, predicate: ["mediaRecordedRef"], descendants: true }, { propertyName: "aiButtonRef", first: true, predicate: ["aiButtonRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-message-composer__wrapper\" [ngStyle]=\"composerWrapperStyle()\">\n  <div class=\"cc-message-composer__header-view\"\n    *ngIf=\"headerView; else messagePreview\">\n    <ng-container\n      *ngTemplateOutlet=\"headerView;context:{ $implicit: user ?? group, composerId:composerId }\">\n    </ng-container>\n  </div>\n  <ng-template #messagePreview>\n    <div class=\"cc-message-composer__header-view\" *ngIf=\"showPreview\">\n      <cometchat-preview [previewStyle]=\"previewStyle\"\n        [previewSubtitle]=\"messageToBeEdited.getText()\"\n        (cc-preview-close-clicked)=\"closePreview()\"> </cometchat-preview>\n    </div>\n  </ng-template>\n  <div class=\"cc-message-composer__input\">\n    <cometchat-message-input\n      (cc-message-input-entered)=\"sendMessageOnEnter($event)\" #inputRef\n      [text]=\"text\" (cc-message-input-changed)=\"messageInputChanged($event)\"\n      [messageInputStyle]=\"messageInputStyle\"\n      [placeholderText]=\"placeholderText\"\n      [auxiliaryButtonAlignment]=\"auxiliaryButtonsAlignment\">\n      <div slot=\"secondaryView\">\n        <div *ngIf=\"secondaryButtonView;else secondaryButton\">\n          <ng-container\n            *ngTemplateOutlet=\"secondaryButtonView;context:{ $implicit: user ?? group, composerId:composerId }\">\n          </ng-container>\n        </div>\n        <ng-template #secondaryButton>\n          <div class=\"cc-message-composer__attachbutton\">\n            <cometchat-popover\n              (cc-popover-outside-click)=\"openActionSheet($event)\"\n              [placement]=\"auxilaryPlacement\" [popoverStyle]=\"popoverStyle\">\n              <cometchat-action-sheet slot=\"content\" [actions]=\"composerActions\"\n                [actionSheetStyle]=\"actionSheetStyle\"\n                (cc-actionsheet-clicked)=\"handleActions($event)\">\n              </cometchat-action-sheet>\n              <cometchat-button #actionSheetRef slot=\"children\"\n                (cc-button-clicked)=\"openActionSheet($event)\"\n                [iconURL]=\"!showActionSheetItem || (showEmojiKeyboard && !showActionSheetItem)  ? attachmentIconURL  : closeButtonIconURL\"\n                [buttonStyle]=\"attachmentButtonStyle\"></cometchat-button>\n            </cometchat-popover>\n          </div>\n        </ng-template>\n      </div>\n\n      <div class=\"cc-message-composer__auxiliary\" slot=\"auxilaryView\">\n        <div class=\"cc-message-composer__custom-auxiliary-view\"\n          *ngIf=\"auxilaryButtonView\">\n          <ng-container\n            *ngTemplateOutlet=\"auxilaryButtonView;context:{ $implicit: user ?? group, composerId:composerId }\">\n          </ng-container>\n        </div>\n        <div class=\"cc-message-composer__stickerkeyboard\" *ngIf=\"isAiEnabled\">\n          <cometchat-popover\n            (cc-popover-outside-click)=\"openStickerKeyboard($event)\"\n            [popoverStyle]=\"aiPopover\" [placement]=\"auxilaryPlacement\">\n            <cometchat-card-view [closeCallback]=\"handleAiFeaturesClose\"\n              slot=\"content\" [buttons]=\"buttons\">\n            </cometchat-card-view>\n            <cometchat-button [hoverText]=\"localize('AI')\" slot=\"children\"\n              #aiButtonRef (cc-button-clicked)=\"openAiFeatures($event)\"\n              [iconURL]=\" !showAiFeatures ? 'assets/ai-bot.svg' : closeButtonIconURL\"\n              [buttonStyle]=\"stickerButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n\n        <div class=\"cc-message-composer__stickerkeyboard\"\n          *ngIf=\"enableStickerKeyboard\">\n          <cometchat-popover\n            (cc-popover-outside-click)=\"openStickerKeyboard($event)\"\n            [popoverStyle]=\"stickerPopover\" [placement]=\"auxilaryPlacement\">\n            <stickers-keyboard slot=\"content\"\n              [stickerStyle]=\"stickerKeyboardStyle\"\n              (cc-sticker-clicked)=\"sendSticker($event)\">\n            </stickers-keyboard>\n            <cometchat-button [hoverText]=\"localize('STICKER')\" slot=\"children\"\n              #stickerButtonRef\n              (cc-button-clicked)=\"openStickerKeyboard($event)\"\n              [iconURL]=\" !showStickerKeyboard ? stickerButtonIconURL : closeButtonIconURL\"\n              [buttonStyle]=\"stickerButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n        <div class=\"cc-message-composer__emojikeyboard\">\n          <cometchat-popover\n            (cc-popover-outside-click)=\"openEmojiKeyboard($event)\"\n            [placement]=\"auxilaryPlacement\" [popoverStyle]=\"emojiPopover\">\n            <cometchat-emoji-keyboard slot=\"content\"\n              [emojiKeyboardStyle]=\"emojiKeyboardStyle\"\n              (cc-emoji-clicked)=\"appendEmoji($event)\">\n            </cometchat-emoji-keyboard>\n            <cometchat-button #emojiButtonRef [hoverText]=\"localize('EMOJI')\"\n              slot=\"children\" (cc-button-clicked)=\"openEmojiKeyboard($event)\"\n              [iconURL]=\" !showEmojiKeyboard  || (!showEmojiKeyboard && showActionSheetItem) ? emojiButtonIconURL : closeButtonIconURL\"\n              [buttonStyle]=\"emojiButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n        <div class=\"cc-message-composer__mediarecorder\"\n          *ngIf=\"!hideVoiceRecording\">\n          <cometchat-popover [closeOnOutsideClick]=\"false\"\n            [popoverStyle]=\"mediaRecordedPopover\"\n            [placement]=\"auxilaryPlacement\">\n\n            <cometchat-media-recorder *ngIf=\"toggleMediaRecorded\"\n              [autoRecording]=\"true\" startIconText=\"\" stopIconText=\"\"\n              submitButtonIconText=\"\"\n              [submitButtonIconURL]=\"voiceRecordingSubmitIconURL\"\n              [startIconURL]=\"voiceRecordingStartIconURL\"\n              [stopIconURL]=\"voiceRecordingStopIconURL\"\n              [closeIconURL]=\"voiceRecordingCloseIconURL\"\n              (cc-media-recorder-submitted)=\"sendRecordedMedia($event)\"\n              (cc-media-recorder-closed)=\"closeMediaRecorder($event)\"\n              slot=\"content\"\n              [mediaPlayerStyle]=\"mediaRecorderStyle\"></cometchat-media-recorder>\n            <cometchat-icon-button [hoverText]=\"localize('VOICE_RECORDING')\"\n              slot=\"children\" #mediaRecordedRef\n              (cc-button-clicked)=\"openMediaRecorded($event)\"\n              [iconURL]=\" !toggleMediaRecorded ? voiceRecordingIconURL : closeButtonIconURL\"\n              [buttonStyle]=\"mediaRecorderButtonStyle\"></cometchat-icon-button>\n          </cometchat-popover>\n        </div>\n      </div>\n      <div slot=\"primaryView\">\n        <div *ngIf=\"sendButtonView;else sendButton\">\n        </div>\n        <ng-template #sendButton>\n          <div class=\"cc-message-composer__sendbutton\"\n            *ngIf=\"showSendButton || hideLiveReaction\">\n            <cometchat-button [iconURL]=\"sendButtonIconURL\"\n              [buttonStyle]=\"sendButtonStyle\"\n              [hoverText]=\"localize('SEND_MESSAGE')\"\n              (cc-button-clicked)=\"customSendMethod(messageText)\"></cometchat-button>\n          </div>\n          <div class=\"cc-message-composer__livereaction\"\n            *ngIf=\"!hideLiveReaction && !showSendButton\">\n            <cometchat-button [iconURL]=\"LiveReactionIconURL\"\n              [hoverText]=\"localize('LIVE_REACTION')\"\n              [buttonStyle]=\"liveReactionStyle\"\n              (cc-button-clicked)=\"sendReaction()\"></cometchat-button>\n          </div>\n        </ng-template>\n      </div>\n    </cometchat-message-input>\n  </div>\n</div>\n\n<input class=\"cc-message-composer__mediainput\" #inputElement\n  (change)=\"inputChangeHandler($event)\" />\n<cometchat-backdrop *ngIf=\"showCreatePolls\" [backdropStyle]=\"backdropStyle\">\n  <create-poll [user]=\"user\" [group]=\"group\"\n    (cc-close-clicked)=\"closeCreatePolls()\"\n    [createPollStyle]=\"createPollStyle\"></create-poll>\n</cometchat-backdrop>\n", styles: [".cc-message-composer__sendbutton,.cc-message-composer__livereaction{margin:0 5px}.cc-message-composer__wrapper{height:100%;width:100%;position:relative;padding:14px 16px}.cc-message-composer__header-view{height:-moz-fit-content;height:fit-content;width:100%;bottom:120%}.cc-message-composer__mediainput{display:none}.cc-message-composer__auxiliary{display:flex;gap:8px}*{box-sizing:border-box}cometchat-card-view{height:100%;width:100%;overflow:hidden;display:flex;border-radius:8px}\n"], components: [{ type: CometChatCardViewComponent, selector: "cometchat-card-view", inputs: ["buttons", "closeCallback"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageComposerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cometchat-message-composer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-message-composer__wrapper\" [ngStyle]=\"composerWrapperStyle()\">\n  <div class=\"cc-message-composer__header-view\" *ngIf=\"headerView; else messagePreview\">\n    <ng-container *ngTemplateOutlet=\"headerView;context:{ $implicit: user ?? group, composerId:composerId }\">\n    </ng-container>\n  </div>\n  <ng-template #messagePreview>\n    <div class=\"cc-message-composer__header-view\" *ngIf=\"showPreview\">\n      <cometchat-preview [previewStyle]=\"previewStyle\" [previewSubtitle]=\"messageToBeEdited.getText()\" (cc-preview-close-clicked)=\"closePreview()\"> </cometchat-preview>\n    </div>\n  </ng-template>\n<div class=\"cc-message-composer__input\">\n  <cometchat-message-input (cc-message-input-entered)=\"sendMessageOnEnter($event)\" #inputRef [text]=\"text\" (cc-message-input-changed)=\"messageInputChanged($event)\" [messageInputStyle]=\"messageInputStyle\" [placeholderText]=\"placeholderText\" [auxiliaryButtonAlignment]=\"auxiliaryButtonsAlignment\">\n    <div slot=\"secondaryView\">\n      <div *ngIf=\"secondaryButtonView;else secondaryButton\">\n        <ng-container *ngTemplateOutlet=\"secondaryButtonView;context:{ $implicit: user ?? group, composerId:composerId }\">\n        </ng-container>\n      </div>\n      <ng-template #secondaryButton>\n    <div class=\"cc-message-composer__attachbutton\">\n        <cometchat-popover (cc-popover-outside-click)=\"openActionSheet($event)\" [placement]=\"auxilaryPlacement\" [popoverStyle]=\"popoverStyle\" >\n          <cometchat-action-sheet slot=\"content\" [actions]=\"composerActions\" [actionSheetStyle]=\"actionsheetStyle\" (cc-actionsheet-clicked)=\"handleActions($event)\">\n          </cometchat-action-sheet>\n            <cometchat-button #actionSheetRef slot=\"children\" (cc-button-clicked)=\"openActionSheet($event)\" [iconURL]=\"!showActionSheetItem || (showEmojiKeyboard && !showActionSheetItem)  ? attachmentIconURL  : closeButtonIconURL\" [buttonStyle]=\"attachmentButtonStyle\"></cometchat-button>\n        </cometchat-popover>\n    </div>\n      </ng-template>\n    </div>\n\n      <div class=\"cc-message-composer__auxiliary\" slot=\"auxilaryView\">\n        <div class=\"cc-message-composer__custom-auxiliary-view\" *ngIf=\"auxilaryButtonView\">\n          <ng-container *ngTemplateOutlet=\"auxilaryButtonView;context:{ $implicit: user ?? group, composerId:composerId }\">\n          </ng-container>\n        </div>\n   \n        <div class=\"cc-message-composer__stickerkeyboard\" *ngIf=\"enableStickerKeyboard\">\n          <cometchat-popover (cc-popover-outside-click)=\"openStickerKeyboard($event)\" [popoverStyle]=\"stickerPopover\" [placement]=\"auxilaryPlacement\" >\n            <stickers-keyboard  slot=\"content\"  [stickerStyle]=\"stickerKeyboardStyle\" (cc-sticker-clicked)=\"sendSticker($event)\">\n            </stickers-keyboard>\n            <cometchat-button [hoverText]=\"localize('STICKER')\" slot=\"children\" #stickerButtonRef  (cc-button-clicked)=\"openStickerKeyboard($event)\" [iconURL]=\" !showStickerKeyboard ? stickerButtonIconURL : closeButtonIconURL\" [buttonStyle]=\"stickerButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n        <div class=\"cc-message-composer__emojikeyboard\">\n          <cometchat-popover (cc-popover-outside-click)=\"openEmojiKeyboard($event)\" [placement]=\"auxilaryPlacement\" [popoverStyle]=\"emojiPopover\" >\n            <cometchat-emoji-keyboard slot=\"content\" [emojiKeyboardStyle]=\"emojiKeyboardStyle\" (cc-emoji-clicked)=\"appendEmoji($event)\">\n            </cometchat-emoji-keyboard>\n            <cometchat-button #emojiButtonRef [hoverText]=\"localize('EMOJI')\" slot=\"children\" (cc-button-clicked)=\"openEmojiKeyboard($event)\" [iconURL]=\" !showEmojiKeyboard  || (!showEmojiKeyboard && showActionSheetItem) ? emojiButtonIconURL : closeButtonIconURL\" [buttonStyle]=\"emojiButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n        <div class=\"cc-message-composer__mediarecorder\" *ngIf=\"!hideVoiceRecording\">\n          <cometchat-popover [closeOnOutsideClick]=\"false\"  [popoverStyle]=\"mediaRecordedPopover\" [placement]=\"auxilaryPlacement\" >\n            \n            <cometchat-media-recorder *ngIf=\"toggleMediaRecorded\" [autoRecording]=\"true\"  startIconText=\"\" stopIconText=\"\" submitButtonIconText=\"\" [submitButtonIconURL]=\"voiceRecordingSubmitIconURL\" [startIconURL]=\"voiceRecordingStartIconURL\" [stopIconURL]=\"voiceRecordingStopIconURL\"  [closeIconURL]=\"voiceRecordingCloseIconURL\" (cc-media-recorder-submitted)=\"sendRecordedMedia($event)\" (cc-media-recorder-closed)=\"closeMediaRecorder($event)\" slot=\"content\" [mediaPlayerStyle]=\"mediaRecorderStyle\"></cometchat-media-recorder>\n            <cometchat-icon-button [hoverText]=\"localize('VOICE_RECORDING')\" slot=\"children\" #mediaRecordedRef  (cc-button-clicked)=\"openMediaRecorded($event)\" [iconURL]=\" !toggleMediaRecorded ? voiceRecordingIconURL : closeButtonIconURL\" [buttonStyle]=\"mediaRecorderButtonStyle\"></cometchat-icon-button>\n          </cometchat-popover>\n        </div>\n      </div>\n    <div slot=\"primaryView\">\n      <div *ngIf=\"sendButtonView;else sendButton\">\n      </div>\n      <ng-template #sendButton>\n        <div class=\"cc-message-composer__sendbutton\" *ngIf=\"showSendButton || hideLiveReaction\">\n  <cometchat-button [iconURL]=\"sendButtonIconURL\" [buttonStyle]=\"sendButtonStyle\" [hoverText]=\"localize('SEND_MESSAGE')\" (cc-button-clicked)=\"customSendMethod(messageText)\"></cometchat-button>\n        </div>\n        <div class=\"cc-message-composer__livereaction\" *ngIf=\"!hideLiveReaction && !showSendButton\">\n          <cometchat-button [iconURL]=\"LiveReactionIconURL\" [hoverText]=\"localize('LIVE_REACTION')\" [buttonStyle]=\"liveReactionStyle\" (cc-button-clicked)=\"sendReaction()\"></cometchat-button>\n          </div>\n      </ng-template>\n    </div>\n  </cometchat-message-input>\n</div>\n</div>\n\n<input class=\"cc-message-composer__mediainput\" #inputElement (change)=\"inputChangeHandler($event)\" />\n<cometchat-backdrop *ngIf=\"showCreatePolls\" [backdropStyle]=\"backdropStyle\">\n  <create-poll [user]=\"user\" [group]=\"group\" (cc-close-clicked)=\"closeCreatePolls()\" [createPollStyle]=\"createPollStyle\"></create-poll>\n</cometchat-backdrop>", styles: [".cc-message-composer__sendbutton,.cc-message-composer__livereaction{margin:0 5px}.cc-message-composer__wrapper{height:100%;width:100%;position:relative;padding:14px 16px}.cc-message-composer__header-view{height:-moz-fit-content;height:fit-content;width:100%;bottom:120%}.cc-message-composer__mediainput{display:none}.cc-message-composer__auxiliary{display:flex;gap:8px}*{box-sizing:border-box}\n"] }]
+            args: [{ selector: 'cometchat-message-composer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-message-composer__wrapper\" [ngStyle]=\"composerWrapperStyle()\">\n  <div class=\"cc-message-composer__header-view\"\n    *ngIf=\"headerView; else messagePreview\">\n    <ng-container\n      *ngTemplateOutlet=\"headerView;context:{ $implicit: user ?? group, composerId:composerId }\">\n    </ng-container>\n  </div>\n  <ng-template #messagePreview>\n    <div class=\"cc-message-composer__header-view\" *ngIf=\"showPreview\">\n      <cometchat-preview [previewStyle]=\"previewStyle\"\n        [previewSubtitle]=\"messageToBeEdited.getText()\"\n        (cc-preview-close-clicked)=\"closePreview()\"> </cometchat-preview>\n    </div>\n  </ng-template>\n  <div class=\"cc-message-composer__input\">\n    <cometchat-message-input\n      (cc-message-input-entered)=\"sendMessageOnEnter($event)\" #inputRef\n      [text]=\"text\" (cc-message-input-changed)=\"messageInputChanged($event)\"\n      [messageInputStyle]=\"messageInputStyle\"\n      [placeholderText]=\"placeholderText\"\n      [auxiliaryButtonAlignment]=\"auxiliaryButtonsAlignment\">\n      <div slot=\"secondaryView\">\n        <div *ngIf=\"secondaryButtonView;else secondaryButton\">\n          <ng-container\n            *ngTemplateOutlet=\"secondaryButtonView;context:{ $implicit: user ?? group, composerId:composerId }\">\n          </ng-container>\n        </div>\n        <ng-template #secondaryButton>\n          <div class=\"cc-message-composer__attachbutton\">\n            <cometchat-popover\n              (cc-popover-outside-click)=\"openActionSheet($event)\"\n              [placement]=\"auxilaryPlacement\" [popoverStyle]=\"popoverStyle\">\n              <cometchat-action-sheet slot=\"content\" [actions]=\"composerActions\"\n                [actionSheetStyle]=\"actionSheetStyle\"\n                (cc-actionsheet-clicked)=\"handleActions($event)\">\n              </cometchat-action-sheet>\n              <cometchat-button #actionSheetRef slot=\"children\"\n                (cc-button-clicked)=\"openActionSheet($event)\"\n                [iconURL]=\"!showActionSheetItem || (showEmojiKeyboard && !showActionSheetItem)  ? attachmentIconURL  : closeButtonIconURL\"\n                [buttonStyle]=\"attachmentButtonStyle\"></cometchat-button>\n            </cometchat-popover>\n          </div>\n        </ng-template>\n      </div>\n\n      <div class=\"cc-message-composer__auxiliary\" slot=\"auxilaryView\">\n        <div class=\"cc-message-composer__custom-auxiliary-view\"\n          *ngIf=\"auxilaryButtonView\">\n          <ng-container\n            *ngTemplateOutlet=\"auxilaryButtonView;context:{ $implicit: user ?? group, composerId:composerId }\">\n          </ng-container>\n        </div>\n        <div class=\"cc-message-composer__stickerkeyboard\" *ngIf=\"isAiEnabled\">\n          <cometchat-popover\n            (cc-popover-outside-click)=\"openStickerKeyboard($event)\"\n            [popoverStyle]=\"aiPopover\" [placement]=\"auxilaryPlacement\">\n            <cometchat-card-view [closeCallback]=\"handleAiFeaturesClose\"\n              slot=\"content\" [buttons]=\"buttons\">\n            </cometchat-card-view>\n            <cometchat-button [hoverText]=\"localize('AI')\" slot=\"children\"\n              #aiButtonRef (cc-button-clicked)=\"openAiFeatures($event)\"\n              [iconURL]=\" !showAiFeatures ? 'assets/ai-bot.svg' : closeButtonIconURL\"\n              [buttonStyle]=\"stickerButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n\n        <div class=\"cc-message-composer__stickerkeyboard\"\n          *ngIf=\"enableStickerKeyboard\">\n          <cometchat-popover\n            (cc-popover-outside-click)=\"openStickerKeyboard($event)\"\n            [popoverStyle]=\"stickerPopover\" [placement]=\"auxilaryPlacement\">\n            <stickers-keyboard slot=\"content\"\n              [stickerStyle]=\"stickerKeyboardStyle\"\n              (cc-sticker-clicked)=\"sendSticker($event)\">\n            </stickers-keyboard>\n            <cometchat-button [hoverText]=\"localize('STICKER')\" slot=\"children\"\n              #stickerButtonRef\n              (cc-button-clicked)=\"openStickerKeyboard($event)\"\n              [iconURL]=\" !showStickerKeyboard ? stickerButtonIconURL : closeButtonIconURL\"\n              [buttonStyle]=\"stickerButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n        <div class=\"cc-message-composer__emojikeyboard\">\n          <cometchat-popover\n            (cc-popover-outside-click)=\"openEmojiKeyboard($event)\"\n            [placement]=\"auxilaryPlacement\" [popoverStyle]=\"emojiPopover\">\n            <cometchat-emoji-keyboard slot=\"content\"\n              [emojiKeyboardStyle]=\"emojiKeyboardStyle\"\n              (cc-emoji-clicked)=\"appendEmoji($event)\">\n            </cometchat-emoji-keyboard>\n            <cometchat-button #emojiButtonRef [hoverText]=\"localize('EMOJI')\"\n              slot=\"children\" (cc-button-clicked)=\"openEmojiKeyboard($event)\"\n              [iconURL]=\" !showEmojiKeyboard  || (!showEmojiKeyboard && showActionSheetItem) ? emojiButtonIconURL : closeButtonIconURL\"\n              [buttonStyle]=\"emojiButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n        <div class=\"cc-message-composer__mediarecorder\"\n          *ngIf=\"!hideVoiceRecording\">\n          <cometchat-popover [closeOnOutsideClick]=\"false\"\n            [popoverStyle]=\"mediaRecordedPopover\"\n            [placement]=\"auxilaryPlacement\">\n\n            <cometchat-media-recorder *ngIf=\"toggleMediaRecorded\"\n              [autoRecording]=\"true\" startIconText=\"\" stopIconText=\"\"\n              submitButtonIconText=\"\"\n              [submitButtonIconURL]=\"voiceRecordingSubmitIconURL\"\n              [startIconURL]=\"voiceRecordingStartIconURL\"\n              [stopIconURL]=\"voiceRecordingStopIconURL\"\n              [closeIconURL]=\"voiceRecordingCloseIconURL\"\n              (cc-media-recorder-submitted)=\"sendRecordedMedia($event)\"\n              (cc-media-recorder-closed)=\"closeMediaRecorder($event)\"\n              slot=\"content\"\n              [mediaPlayerStyle]=\"mediaRecorderStyle\"></cometchat-media-recorder>\n            <cometchat-icon-button [hoverText]=\"localize('VOICE_RECORDING')\"\n              slot=\"children\" #mediaRecordedRef\n              (cc-button-clicked)=\"openMediaRecorded($event)\"\n              [iconURL]=\" !toggleMediaRecorded ? voiceRecordingIconURL : closeButtonIconURL\"\n              [buttonStyle]=\"mediaRecorderButtonStyle\"></cometchat-icon-button>\n          </cometchat-popover>\n        </div>\n      </div>\n      <div slot=\"primaryView\">\n        <div *ngIf=\"sendButtonView;else sendButton\">\n        </div>\n        <ng-template #sendButton>\n          <div class=\"cc-message-composer__sendbutton\"\n            *ngIf=\"showSendButton || hideLiveReaction\">\n            <cometchat-button [iconURL]=\"sendButtonIconURL\"\n              [buttonStyle]=\"sendButtonStyle\"\n              [hoverText]=\"localize('SEND_MESSAGE')\"\n              (cc-button-clicked)=\"customSendMethod(messageText)\"></cometchat-button>\n          </div>\n          <div class=\"cc-message-composer__livereaction\"\n            *ngIf=\"!hideLiveReaction && !showSendButton\">\n            <cometchat-button [iconURL]=\"LiveReactionIconURL\"\n              [hoverText]=\"localize('LIVE_REACTION')\"\n              [buttonStyle]=\"liveReactionStyle\"\n              (cc-button-clicked)=\"sendReaction()\"></cometchat-button>\n          </div>\n        </ng-template>\n      </div>\n    </cometchat-message-input>\n  </div>\n</div>\n\n<input class=\"cc-message-composer__mediainput\" #inputElement\n  (change)=\"inputChangeHandler($event)\" />\n<cometchat-backdrop *ngIf=\"showCreatePolls\" [backdropStyle]=\"backdropStyle\">\n  <create-poll [user]=\"user\" [group]=\"group\"\n    (cc-close-clicked)=\"closeCreatePolls()\"\n    [createPollStyle]=\"createPollStyle\"></create-poll>\n</cometchat-backdrop>\n", styles: [".cc-message-composer__sendbutton,.cc-message-composer__livereaction{margin:0 5px}.cc-message-composer__wrapper{height:100%;width:100%;position:relative;padding:14px 16px}.cc-message-composer__header-view{height:-moz-fit-content;height:fit-content;width:100%;bottom:120%}.cc-message-composer__mediainput{display:none}.cc-message-composer__auxiliary{display:flex;gap:8px}*{box-sizing:border-box}cometchat-card-view{height:100%;width:100%;overflow:hidden;display:flex;border-radius:8px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { inputElementRef: [{
                 type: ViewChild,
                 args: ["inputElement", { static: false }]
@@ -10633,6 +11498,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], mediaRecordedRef: [{
                 type: ViewChild,
                 args: ["mediaRecordedRef", { static: false }]
+            }], aiButtonRef: [{
+                type: ViewChild,
+                args: ["aiButtonRef", { static: false }]
             }], user: [{
                 type: Input
             }], group: [{
@@ -10677,6 +11545,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], backdropStyle: [{
                 type: Input
+            }], actionSheetStyle: [{
+                type: Input
             }], hideVoiceRecording: [{
                 type: Input
             }], mediaRecorderStyle: [{
@@ -10785,7 +11655,6 @@ class CometChatThreadedMessagesComponent {
             textColor: "black",
             background: "transparent",
         };
-        this.msgListenerId = "message_" + new Date().getTime();
     }
     ngOnInit() {
         this.requestBuilder = new CometChat.MessagesRequestBuilder()
@@ -10826,10 +11695,14 @@ class CometChatThreadedMessagesComponent {
     ngOnChanges(change) {
     }
     ngOnDestroy() {
+        var _a, _b, _c, _d;
         this.unsubscribeToEvents();
         try {
             //Removing Message Listeners
-            CometChat.removeMessageListener(this.msgListenerId);
+            (_a = this.onMessagesDelivered) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+            (_b = this.onMessagesRead) === null || _b === void 0 ? void 0 : _b.unsubscribe();
+            (_c = this.onMessageDeleted) === null || _c === void 0 ? void 0 : _c.unsubscribe();
+            (_d = this.onMessageEdited) === null || _d === void 0 ? void 0 : _d.unsubscribe();
         }
         catch (error) {
             if (this.onError) {
@@ -10858,20 +11731,18 @@ class CometChatThreadedMessagesComponent {
     }
     addMessageEventListeners() {
         try {
-            CometChat.addMessageListener(this.msgListenerId, new CometChat.MessageListener({
-                onMessagesDelivered: (messageReceipt) => {
-                    this.updateReceipt(messageReceipt);
-                },
-                onMessagesRead: (messageReceipt) => {
-                    this.updateReceipt(messageReceipt);
-                },
-                onMessageDeleted: (deletedMessage) => {
-                    this.updateMessage(deletedMessage);
-                },
-                onMessageEdited: (editedMessage) => {
-                    this.updateMessage(editedMessage);
-                },
-            }));
+            this.onMessagesDelivered = CometChatMessageEvents.onMessagesDelivered.subscribe((messageReceipt) => {
+                this.updateReceipt(messageReceipt);
+            });
+            this.onMessagesRead = CometChatMessageEvents.onMessagesRead.subscribe((messageReceipt) => {
+                this.updateReceipt(messageReceipt);
+            });
+            this.onMessageDeleted = CometChatMessageEvents.onMessageDeleted.subscribe((deletedMessage) => {
+                this.updateMessage(deletedMessage);
+            });
+            this.onMessageEdited = CometChatMessageEvents.onMessageEdited.subscribe((editedMessage) => {
+                this.updateMessage(editedMessage);
+            });
         }
         catch (error) {
             if (this.onError) {
@@ -10960,17 +11831,11 @@ class CometChatThreadedMessagesComponent {
     }
 }
 CometChatThreadedMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatThreadedMessagesComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
-CometChatThreadedMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatThreadedMessagesComponent, selector: "cometchat-threaded-messages", inputs: { onClose: "onClose", onError: "onError", parentMessage: "parentMessage", title: "title", closeIconURL: "closeIconURL", bubbleView: "bubbleView", messageActionView: "messageActionView", messageListConfiguration: "messageListConfiguration", messageComposerConfiguration: "messageComposerConfiguration", threadedMessagesStyle: "threadedMessagesStyle" }, viewQueries: [{ propertyName: "messageComposerRef", first: true, predicate: ["messageComposerRef"], descendants: true }, { propertyName: "messageListRef", first: true, predicate: ["messageListRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-threaded-messages__wrapper\" [ngStyle]=\"wrapperStyle()\">\n<div class=\"cc-threaded-messages__header\">\n<div class=\"cc-threaded-messages__title\">\n<cometchat-label [text]=\"title\" [labelStyle]=\"titleStyle\"></cometchat-label>\n</div>\n<div  class=\"cc-threaded-messages__close\">\n<cometchat-button [iconURL]=\"closeIconURL\" [buttonStyle]=\"buttonStyle\" (cc-button-clicked)=\"closeView()\"></cometchat-button>\n</div>\n</div>\n<div class=\"cc-threaded-messages__bubble-view\">\n  <ng-container *ngTemplateOutlet=\"bubbleView; context:{ $implicit: parentMessage }\">\n  </ng-container>\n</div>\n<div class=\"cc-threaded-messages__action-view\">\n  <ng-container *ngTemplateOutlet=\"messageActionView; context:{ $implicit: parentMessage }\">\n  </ng-container>\n <cometchat-button *ngIf=\"!messageActionView\" [text]=\"getThreadCount()\" [buttonStyle]=\"actionButtonStyle\"></cometchat-button>\n</div>\n<div class=\"cc-threaded-messages__list\">\n  <cometchat-message-list #messageListRef [parentMessageId]=\"parentMessage!.getId()\" [emptyStateView]=\"messageListConfiguration.emptyStateView\" [loadingStateView]=\"messageListConfiguration.loadingStateView\"  [user]=\"user\" [group]=\"group\"\n  [errorStateView]=\"messageListConfiguration.errorStateView\" [disableReceipt]=\"messageListConfiguration.disableReceipt\" [readIcon]=\"messageListConfiguration.readIcon\" [deliveredIcon]=\"messageListConfiguration.deliveredIcon\" [sentIcon]=\"messageListConfiguration.sentIcon\" [waitIcon]=\"messageListConfiguration.waitIcon\"\n  [errorIcon]=\"messageListConfiguration.errorIcon\" [alignment]=\"messageListConfiguration.alignment\" [showAvatar]=\"messageListConfiguration.showAvatar\" [datePattern]=\"messageListConfiguration.datePattern\" [timestampAlignment]=\"messageListConfiguration.timestampAlignment\" [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n  [messageTypes]=\"messageListConfiguration.templates\" [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder || requestBuilder\" [thresholdValue]=\"messageListConfiguration.thresholdValue\" [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick\" [headerView]=\"messageListConfiguration.headerView\" [footerView]=\"messageListConfiguration.footerView\"\n   [avatarStyle]=\"messageListConfiguration.avatarStyle\" [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\" [messageListStyle]=\"messageListConfiguration.messageListStyle\"  [onError]=\"messageListConfiguration.onError\"\n  >\n  </cometchat-message-list>\n</div>\n<div class=\"cc-threaded-messages__composer\">\n    <cometchat-message-composer #messageComposerRef [parentMessageId]=\"parentMessage!.getId()\"\n    [user]=\"user\" [group]=\"group\" [text]=\"messageComposerConfiguration.text\" [headerView]=\"messageComposerConfiguration.headerView\" [onTextChange]=\"messageComposerConfiguration.onTextChange\" [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n    [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\" [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\" [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\" [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n    [sendButtonView]=\"messageComposerConfiguration.sendButtonView\" [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\" [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\" [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\" [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n    [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\" [onError]=\"messageComposerConfiguration.onError\"\n    >\n    </cometchat-message-composer>\n</div>\n </div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-threaded-messages__wrapper{display:flex;flex-direction:column;height:100%;overflow-y:auto}.cc-threaded-messages__header{height:8%;width:100%;display:flex;padding:16px;align-items:flex-start}.cc-threaded-messages__close{display:flex;align-items:center}.cc-threaded-messages__title{display:flex;align-items:center;justify-content:center;width:100%}.cc-threaded-messages__bubble-view{width:-moz-fit-content;width:fit-content}.cc-threaded-messages__header{flex:0 0 auto}.cc-threaded-messages__list{flex:1 1 auto;min-height:65%}.cc-threaded-messages__composer{flex:0 0 auto;min-height:80px}\n"], components: [{ type: CometChatMessageListComponent, selector: "cometchat-message-list", inputs: ["hideError", "errorStateView", "loadingStateView", "emptyStateView", "errorStateText", "emptyStateText", "loadingIconURL", "user", "group", "disableReceipt", "disableSoundForMessages", "customSoundForMessages", "readIcon", "deliveredIcon", "sentIcon", "waitIcon", "errorIcon", "alignment", "showAvatar", "datePattern", "timestampAlignment", "DateSeparatorPattern", "templates", "messagesRequestBuilder", "newMessageIndicatorText", "scrollToBottomOnNewMessages", "thresholdValue", "onThreadRepliesClick", "headerView", "footerView", "parentMessageId", "avatarStyle", "backdropStyle", "dateSeparatorStyle", "messageListStyle", "onError", "messageInformationConfiguration"] }, { type: CometChatMessageComposerComponent, selector: "cometchat-message-composer", inputs: ["user", "group", "disableSoundForMessages", "customSoundForMessage", "disableTypingEvents", "text", "placeholderText", "headerView", "onTextChange", "attachmentIconURL", "attachmentOptions", "secondaryButtonView", "auxilaryButtonView", "auxiliaryButtonsAlignment", "sendButtonView", "parentMessageId", "hideLiveReaction", "LiveReactionIconURL", "messageComposerStyle", "onSendButtonClick", "onError", "backdropStyle", "hideVoiceRecording", "mediaRecorderStyle", "voiceRecordingIconURL", "voiceRecordingCloseIconURL", "voiceRecordingStartIconURL", "voiceRecordingStopIconURL", "voiceRecordingSubmitIconURL"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CometChatThreadedMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatThreadedMessagesComponent, selector: "cometchat-threaded-messages", inputs: { onClose: "onClose", onError: "onError", parentMessage: "parentMessage", title: "title", closeIconURL: "closeIconURL", bubbleView: "bubbleView", messageActionView: "messageActionView", messageListConfiguration: "messageListConfiguration", messageComposerConfiguration: "messageComposerConfiguration", threadedMessagesStyle: "threadedMessagesStyle" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-threaded-messages__wrapper\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-threaded-messages__header\">\n    <div class=\"cc-threaded-messages__title\">\n      <cometchat-label [text]=\"title\"\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", "alignment", "showAvatar", "datePattern", "timestampAlignment", "DateSeparatorPattern", "templates", "messagesRequestBuilder", "newMessageIndicatorText", "scrollToBottomOnNewMessages", "thresholdValue", "onThreadRepliesClick", "headerView", "footerView", "parentMessageId", "avatarStyle", "backdropStyle", "dateSeparatorStyle", "messageListStyle", "onError", "messageInformationConfiguration"] }, { type: CometChatMessageComposerComponent, selector: "cometchat-message-composer", inputs: ["user", "group", "disableSoundForMessages", "customSoundForMessage", "disableTypingEvents", "text", "placeholderText", "headerView", "onTextChange", "attachmentIconURL", "attachmentOptions", "secondaryButtonView", "auxilaryButtonView", "auxiliaryButtonsAlignment", "sendButtonView", "parentMessageId", "hideLiveReaction", "LiveReactionIconURL", "messageComposerStyle", "onSendButtonClick", "onError", "backdropStyle", "actionSheetStyle", "hideVoiceRecording", "mediaRecorderStyle", "voiceRecordingIconURL", "voiceRecordingCloseIconURL", "voiceRecordingStartIconURL", "voiceRecordingStopIconURL", "voiceRecordingSubmitIconURL"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatThreadedMessagesComponent, decorators: [{
             type: Component,
-            args: [{ selector: "cometchat-threaded-messages", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-threaded-messages__wrapper\" [ngStyle]=\"wrapperStyle()\">\n<div class=\"cc-threaded-messages__header\">\n<div class=\"cc-threaded-messages__title\">\n<cometchat-label [text]=\"title\" [labelStyle]=\"titleStyle\"></cometchat-label>\n</div>\n<div  class=\"cc-threaded-messages__close\">\n<cometchat-button [iconURL]=\"closeIconURL\" [buttonStyle]=\"buttonStyle\" (cc-button-clicked)=\"closeView()\"></cometchat-button>\n</div>\n</div>\n<div class=\"cc-threaded-messages__bubble-view\">\n  <ng-container *ngTemplateOutlet=\"bubbleView; context:{ $implicit: parentMessage }\">\n  </ng-container>\n</div>\n<div class=\"cc-threaded-messages__action-view\">\n  <ng-container *ngTemplateOutlet=\"messageActionView; context:{ $implicit: parentMessage }\">\n  </ng-container>\n <cometchat-button *ngIf=\"!messageActionView\" [text]=\"getThreadCount()\" [buttonStyle]=\"actionButtonStyle\"></cometchat-button>\n</div>\n<div class=\"cc-threaded-messages__list\">\n  <cometchat-message-list #messageListRef [parentMessageId]=\"parentMessage!.getId()\" [emptyStateView]=\"messageListConfiguration.emptyStateView\" [loadingStateView]=\"messageListConfiguration.loadingStateView\"  [user]=\"user\" [group]=\"group\"\n  [errorStateView]=\"messageListConfiguration.errorStateView\" [disableReceipt]=\"messageListConfiguration.disableReceipt\" [readIcon]=\"messageListConfiguration.readIcon\" [deliveredIcon]=\"messageListConfiguration.deliveredIcon\" [sentIcon]=\"messageListConfiguration.sentIcon\" [waitIcon]=\"messageListConfiguration.waitIcon\"\n  [errorIcon]=\"messageListConfiguration.errorIcon\" [alignment]=\"messageListConfiguration.alignment\" [showAvatar]=\"messageListConfiguration.showAvatar\" [datePattern]=\"messageListConfiguration.datePattern\" [timestampAlignment]=\"messageListConfiguration.timestampAlignment\" [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n  [messageTypes]=\"messageListConfiguration.templates\" [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder || requestBuilder\" [thresholdValue]=\"messageListConfiguration.thresholdValue\" [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick\" [headerView]=\"messageListConfiguration.headerView\" [footerView]=\"messageListConfiguration.footerView\"\n   [avatarStyle]=\"messageListConfiguration.avatarStyle\" [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\" [messageListStyle]=\"messageListConfiguration.messageListStyle\"  [onError]=\"messageListConfiguration.onError\"\n  >\n  </cometchat-message-list>\n</div>\n<div class=\"cc-threaded-messages__composer\">\n    <cometchat-message-composer #messageComposerRef [parentMessageId]=\"parentMessage!.getId()\"\n    [user]=\"user\" [group]=\"group\" [text]=\"messageComposerConfiguration.text\" [headerView]=\"messageComposerConfiguration.headerView\" [onTextChange]=\"messageComposerConfiguration.onTextChange\" [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n    [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\" [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\" [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\" [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n    [sendButtonView]=\"messageComposerConfiguration.sendButtonView\" [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\" [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\" [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\" [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n    [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\" [onError]=\"messageComposerConfiguration.onError\"\n    >\n    </cometchat-message-composer>\n</div>\n </div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-threaded-messages__wrapper{display:flex;flex-direction:column;height:100%;overflow-y:auto}.cc-threaded-messages__header{height:8%;width:100%;display:flex;padding:16px;align-items:flex-start}.cc-threaded-messages__close{display:flex;align-items:center}.cc-threaded-messages__title{display:flex;align-items:center;justify-content:center;width:100%}.cc-threaded-messages__bubble-view{width:-moz-fit-content;width:fit-content}.cc-threaded-messages__header{flex:0 0 auto}.cc-threaded-messages__list{flex:1 1 auto;min-height:65%}.cc-threaded-messages__composer{flex:0 0 auto;min-height:80px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { messageComposerRef: [{
-                type: ViewChild,
-                args: ["messageComposerRef", { static: false }]
-            }], messageListRef: [{
-                type: ViewChild,
-                args: ["messageListRef", { static: false }]
-            }], onClose: [{
+            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"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { onClose: [{
                 type: Input
             }], onError: [{
                 type: Input
@@ -13096,10 +13961,10 @@ class CometChatMessagesComponent {
     }
 }
 CometChatMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessagesComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-CometChatMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatMessagesComponent, selector: "cometchat-messages", inputs: { user: "user", group: "group", hideMessageComposer: "hideMessageComposer", disableTyping: "disableTyping", messageHeaderConfiguration: "messageHeaderConfiguration", messageListConfiguration: "messageListConfiguration", messageComposerConfiguration: "messageComposerConfiguration", threadedMessageConfiguration: "threadedMessageConfiguration", detailsConfiguration: "detailsConfiguration", customSoundForIncomingMessages: "customSoundForIncomingMessages", customSoundForOutgoingMessages: "customSoundForOutgoingMessages", disableSoundForMessages: "disableSoundForMessages", messagesStyle: "messagesStyle", messageHeaderView: "messageHeaderView", messageComposerView: "messageComposerView", messageListView: "messageListView", hideMessageHeader: "hideMessageHeader", hideDetails: "hideDetails", auxiliaryMenu: "auxiliaryMenu" }, viewQueries: [{ propertyName: "messageComposerRef", first: true, predicate: ["messageComposerRef"], descendants: true }, { propertyName: "messageListRef", first: true, predicate: ["messageListRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-messages__wrapper\">\n<div class=\"cc-messages\" [ngStyle]=\"chatListStyle()\" *ngIf=\"user || group\">\n<div class=\"cc-messages__header\" *ngIf=\"!hideMessageHeader\">\n  <div *ngIf=\"messageHeaderView; else customHeaderView\" class=\"cc-messages__header-customview\">\n    <ng-container *ngTemplateOutlet=\"messageHeaderView\">\n    </ng-container>\n  </div>\n  <ng-template #customHeaderView>\n    <cometchat-message-header [user]=\"user\" [group]=\"group\" [subtitleView]=\"messageHeaderConfiguration.subtitleView\"\n    [disableUsersPresence]=\"messageHeaderConfiguration.disableUsersPresence\" [protectedGroupIcon]=\"messageHeaderConfiguration.protectedGroupIcon\" [privateGroupIcon]=\"messageHeaderConfiguration.privateGroupIcon\" [menu]=\"headerMenu\" [messageHeaderStyle]=\"messageHeaderConfiguration.messageHeaderStyle\"\n    [backButtonIconURL]=\"messageHeaderConfiguration.backButtonIconURL\" [hideBackButton]=\"messageHeaderConfiguration.hideBackButton\" [onError]=\"messageHeaderConfiguration.onError\" [onBack]=\"messageHeaderConfiguration.onBack\" [listItemStyle]=\"messageHeaderConfiguration.listItemStyle\" [statusIndicatorStyle]=\"messageHeaderConfiguration.statusIndicatorStyle\"\n    [avatarStyle]=\"messageHeaderConfiguration.avatarStyle\"\n    >\n    </cometchat-message-header>\n  </ng-template>\n</div>\n<div class=\"cc-messages__list\">\n  <cometchat-message-list #messageListRef [messageInformationConfiguration]=\"messageListConfiguration.messageInformationConfiguration\" [disableSoundForMessages]=\"disableSoundForMessages\" [customSoundForMessages]=\"customSoundForIncomingMessages\" [emptyStateView]=\"messageListConfiguration.emptyStateView\" [loadingIconURL]=\"messageListConfiguration?.loadingIconURL!\" [loadingStateView]=\"messageListConfiguration.loadingStateView\"  [user]=\"user\" [group]=\"group\"\n  [errorStateView]=\"messageListConfiguration.errorStateView\" [disableReceipt]=\"messageListConfiguration.disableReceipt\" [readIcon]=\"messageListConfiguration.readIcon\" [deliveredIcon]=\"messageListConfiguration.deliveredIcon\" [sentIcon]=\"messageListConfiguration.sentIcon\" [waitIcon]=\"messageListConfiguration.waitIcon\"\n  [errorIcon]=\"messageListConfiguration.errorIcon\" [alignment]=\"messageListConfiguration.alignment\" [showAvatar]=\"messageListConfiguration.showAvatar\" [datePattern]=\"messageListConfiguration.datePattern\" [timestampAlignment]=\"messageListConfiguration.timestampAlignment\" [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n  [templates]=\"messageListConfiguration.templates\" [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder\" [thresholdValue]=\"messageListConfiguration.thresholdValue\" [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick || openThreadView\" [headerView]=\"messageListConfiguration.headerView\" [footerView]=\"messageListConfiguration.footerView\"\n   [avatarStyle]=\"messageListConfiguration.avatarStyle\" [backdropStyle]=\"messageListConfiguration.backdropStyle\" [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\" [messageListStyle]=\"messageListConfiguration.messageListStyle\"  [onError]=\"messageListConfiguration.onError\"\n  >\n  </cometchat-message-list>\n</div>\n<div class=\"cc-messages__composer\" *ngIf=\"!hideMessageComposer\">\n  <div *ngIf=\"messageComposerView; else customComposerView\" class=\"cc-messages__composer--customview\">\n    <ng-container *ngTemplateOutlet=\"messageComposerView\">\n    </ng-container>\n  </div>\n  <ng-template #customComposerView>\n    <cometchat-message-composer #messageComposerRef [disableSoundForMessages]=\"disableSoundForMessages\"\n    [voiceRecordingStopIconURL]=\"messageComposerConfiguration.voiceRecordingStopIconURL\"\n    [voiceRecordingStartIconURL]=\"messageComposerConfiguration.voiceRecordingStartIconURL\"\n    [voiceRecordingCloseIconURL]=\"messageComposerConfiguration.voiceRecordingCloseIconURL\"\n    [voiceRecordingSubmitIconURL]=\"messageComposerConfiguration.voiceRecordingSubmitIconURL\"\n    [mediaRecorderStyle]=\"messageComposerConfiguration.mediaRecorderStyle\"\n    [customSoundForMessages]=\"customSoundForOutgoingMessages\"\n    [user]=\"user\" [group]=\"group\" [text]=\"messageComposerConfiguration.text\" [headerView]=\"messageComposerConfiguration.headerView\" [onTextChange]=\"messageComposerConfiguration.onTextChange\" [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n    [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\" [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\" [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\" [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n    [sendButtonView]=\"messageComposerConfiguration.sendButtonView\" [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\" [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\" [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\" [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n    [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\" [onError]=\"messageComposerConfiguration.onError\"\n    >\n    </cometchat-message-composer>\n  </ng-template>\n</div>\n </div>\n <div class=\"cc-messages__livereaction\">\n  <cometchat-live-reaction *ngIf=\"liveReaction\" [reactionIconURL]=\"reactionName\"></cometchat-live-reaction>\n</div>\n<div *ngIf=\"openThreadedMessages\" class=\"cc-messages__threadedmessages\">\n<cometchat-threaded-messages [onClose]=\"closeThreadView\" [threadedMessagesStyle]=\"threadedMessageConfiguration.threadedMessagesStyle\" [messageActionView]=\"threadedMessageConfiguration.messageActionView\" [closeIconURL]=\"threadedMessageConfiguration.closeIconURL\" [onError]=\"threadedMessageConfiguration.onError\" [bubbleView]=\"threadedMessageConfiguration.bubbleView || parentBubbleView\" [parentMessage]=\"threadMessageObject\" [user]=\"user\" [group]=\"group\"></cometchat-threaded-messages>\n</div>\n<div *ngIf=\"openDetails\" class=\"cc-messages__details\">\n  <cometchat-details [backdropStyle]=\"detailsConfiguration.backdropStyle\"  [transferOwnershipConfiguration]=\"detailsConfiguration.transferOwnershipConfiguration\" [groupMembersConfiguration]=\"detailsConfiguration.groupMembersConfiguration\" [bannedMembersConfiguration]=\"detailsConfiguration.bannedMembersConfiguration\" [addMembersConfiguration]=\"detailsConfiguration.addMembersConfiguration\"  [onClose]=\"detailsConfiguration.onClose || closeDetailsPage\" [listItemStyle]=\"detailsConfiguration.listItemStyle\" [detailsStyle]=\"detailsConfiguration.detailsStyle\" [avatarStyle]=\"detailsConfiguration.avatarStyle\" [statusIndicatorStyle]=\"detailsConfiguration.statusIndicatorStyle\" [leaveDialogStyle]=\"detailsConfiguration.leaveDialogStyle\" [data]=\"detailsConfiguration.data\" [customProfileView]=\"detailsConfiguration.customProfileView\" [subtitleView]=\"detailsConfiguration.subtitleView\" [hideProfile]=\"detailsConfiguration.hideProfile\" [onError]=\"detailsConfiguration.onError\" [closeButtonIconURL]=\"detailsConfiguration.closeButtonIconURL\"  [user]=\"user\" [group]=\"group\"></cometchat-details>\n  </div>\n</div>\n<ng-template #headerMenu>\n  <div class=\"cc-messages__headermenu\">\n<div class=\"cc-messages__auxiliarymenu\" *ngIf=\"getAuxilaryView(); else elseBlock\">\n  <ng-container *ngTemplateOutlet=\"getAuxilaryView()\">\n  </ng-container>\n</div>\n    <ng-template #elseBlock>\n      <cometchat-call-buttons *ngIf=\"enableCalling\" voiceCallIconText=\"\" videoCallIconText=\"\" [user]=\"user\" [group]=\"group\" [callButtonsStyle]=\"callButtonsStyle\">\n      </cometchat-call-buttons>\n    </ng-template>\n    <cometchat-button *ngIf=\"!hideDetails\" [iconURL]=\"infoIconStyle\" [buttonStyle]=\"detailsButtonStyle\" (cc-button-clicked)=\"openDetailsPage()\"></cometchat-button>\n  </div>\n</ng-template>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-messages__wrapper{position:relative;height:100%;width:100%}.cc-messages{display:flex;flex-direction:column;position:relative;height:100%;width:100%;box-sizing:border-box;justify-content:space-between}.cc-messages__headermenu{display:flex;justify-content:center;align-items:center}.cc-messages__threadedmessages,.cc-messages__details{position:absolute;top:0;left:0;height:100%;width:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;max-width:100%;z-index:1}.cc-messages__header{width:100%}.cc-messages__list{overflow:hidden;width:100%;height:100%}cometchat-threaded-messages{height:100%;display:flex}.cc-messages__composer{width:100%;display:flex;flex-direction:column;justify-content:flex-end}\n"], components: [{ type: CometChatMessageHeaderComponent, selector: "cometchat-message-header", inputs: ["avatarStyle", "statusIndicatorStyle", "messageHeaderStyle", "listItemStyle", "subtitleView", "disableUsersPresence", "disableTyping", "protectedGroupIcon", "privateGroupIcon", "menu", "user", "group", "backButtonIconURL", "hideBackButton", "listItemView", "onError", "onBack"] }, { type: CometChatMessageListComponent, selector: "cometchat-message-list", inputs: ["hideError", "errorStateView", "loadingStateView", "emptyStateView", "errorStateText", "emptyStateText", "loadingIconURL", "user", "group", "disableReceipt", "disableSoundForMessages", "customSoundForMessages", "readIcon", "deliveredIcon", "sentIcon", "waitIcon", "errorIcon", "alignment", "showAvatar", "datePattern", "timestampAlignment", "DateSeparatorPattern", "templates", "messagesRequestBuilder", "newMessageIndicatorText", "scrollToBottomOnNewMessages", "thresholdValue", "onThreadRepliesClick", "headerView", "footerView", "parentMessageId", "avatarStyle", "backdropStyle", "dateSeparatorStyle", "messageListStyle", "onError", "messageInformationConfiguration"] }, { type: CometChatMessageComposerComponent, selector: "cometchat-message-composer", inputs: ["user", "group", "disableSoundForMessages", "customSoundForMessage", "disableTypingEvents", "text", "placeholderText", "headerView", "onTextChange", "attachmentIconURL", "attachmentOptions", "secondaryButtonView", "auxilaryButtonView", "auxiliaryButtonsAlignment", "sendButtonView", "parentMessageId", "hideLiveReaction", "LiveReactionIconURL", "messageComposerStyle", "onSendButtonClick", "onError", "backdropStyle", "hideVoiceRecording", "mediaRecorderStyle", "voiceRecordingIconURL", "voiceRecordingCloseIconURL", "voiceRecordingStartIconURL", "voiceRecordingStopIconURL", "voiceRecordingSubmitIconURL"] }, { type: CometChatThreadedMessagesComponent, selector: "cometchat-threaded-messages", inputs: ["onClose", "onError", "parentMessage", "title", "closeIconURL", "bubbleView", "messageActionView", "messageListConfiguration", "messageComposerConfiguration", "threadedMessagesStyle"] }, { type: CometChatDetailsComponent, selector: "cometchat-details", inputs: ["group", "user", "title", "closeButtonIconURL", "hideProfile", "subtitleView", "customProfileView", "data", "disableUsersPresence", "privateGroupIcon", "protectedGroupIcon", "onError", "onClose", "leaveGroupConfirmButtonText", "leaveGroupCancelButtonText", "leaveGroupDialogMessage", "leaveGroupDialogStyle", "deleteGroupConfirmButtonText", "deleteGroupDialogMessage", "deleteGroupCancelButtonText", "deleteGroupDialogStyle", "transferOwnershipConfirmButtonText", "transferOwnershipDialogMessage", "transferOwnershipCancelButtonText", "transferOwnershipDialogStyle", "addMembersConfiguration", "bannedMembersConfiguration", "groupMembersConfiguration", "transferOwnershipConfiguration", "statusIndicatorStyle", "backdropStyle", "avatarStyle", "detailsStyle", "listItemStyle"] }, { type: CometChatCallButtonsComponent, selector: "cometchat-call-buttons", inputs: ["user", "group", "voiceCallIconURL", "voiceCallIconText", "voiceCallIconHoverText", "videoCallIconURL", "videoCallIconText", "videoCallIconHoverText", "onVoiceCallClick", "onVideoCallClick", "onError", "callButtonsStyle", "outgoingCallConfiguration", "ongoingCallConfiguration"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CometChatMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatMessagesComponent, selector: "cometchat-messages", inputs: { user: "user", group: "group", hideMessageComposer: "hideMessageComposer", disableTyping: "disableTyping", messageHeaderConfiguration: "messageHeaderConfiguration", messageListConfiguration: "messageListConfiguration", messageComposerConfiguration: "messageComposerConfiguration", threadedMessageConfiguration: "threadedMessageConfiguration", detailsConfiguration: "detailsConfiguration", customSoundForIncomingMessages: "customSoundForIncomingMessages", customSoundForOutgoingMessages: "customSoundForOutgoingMessages", disableSoundForMessages: "disableSoundForMessages", messagesStyle: "messagesStyle", messageHeaderView: "messageHeaderView", messageComposerView: "messageComposerView", messageListView: "messageListView", hideMessageHeader: "hideMessageHeader", hideDetails: "hideDetails", auxiliaryMenu: "auxiliaryMenu" }, viewQueries: [{ propertyName: "messageComposerRef", first: true, predicate: ["messageComposerRef"], descendants: true }, { propertyName: "messageListRef", first: true, predicate: ["messageListRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-messages__wrapper\">\n  <div class=\"cc-messages\" [ngStyle]=\"chatListStyle()\" *ngIf=\"user || group\">\n    <div class=\"cc-messages__header\" *ngIf=\"!hideMessageHeader\">\n      <div *ngIf=\"messageHeaderView; else customHeaderView\"\n        class=\"cc-messages__header-customview\">\n        <ng-container *ngTemplateOutlet=\"messageHeaderView\">\n        </ng-container>\n      </div>\n      <ng-template #customHeaderView>\n        <cometchat-message-header [user]=\"user\" [group]=\"group\"\n          [subtitleView]=\"messageHeaderConfiguration.subtitleView\"\n          [disableUsersPresence]=\"messageHeaderConfiguration.disableUsersPresence\"\n          [protectedGroupIcon]=\"messageHeaderConfiguration.protectedGroupIcon\"\n          [privateGroupIcon]=\"messageHeaderConfiguration.privateGroupIcon\"\n          [menu]=\"headerMenu\"\n          [messageHeaderStyle]=\"messageHeaderConfiguration.messageHeaderStyle\"\n          [backButtonIconURL]=\"messageHeaderConfiguration.backButtonIconURL\"\n          [hideBackButton]=\"messageHeaderConfiguration.hideBackButton\"\n          [onError]=\"messageHeaderConfiguration.onError\"\n          [onBack]=\"messageHeaderConfiguration.onBack\"\n          [listItemStyle]=\"messageHeaderConfiguration.listItemStyle\"\n          [statusIndicatorStyle]=\"messageHeaderConfiguration.statusIndicatorStyle\"\n          [avatarStyle]=\"messageHeaderConfiguration.avatarStyle\">\n        </cometchat-message-header>\n      </ng-template>\n    </div>\n    <div class=\"cc-messages__list\">\n      <cometchat-message-list #messageListRef\n        [messageInformationConfiguration]=\"messageListConfiguration.messageInformationConfiguration\"\n        [disableSoundForMessages]=\"disableSoundForMessages\"\n        [customSoundForMessages]=\"customSoundForIncomingMessages\"\n        [emptyStateView]=\"messageListConfiguration.emptyStateView\"\n        [loadingIconURL]=\"messageListConfiguration?.loadingIconURL!\"\n        [loadingStateView]=\"messageListConfiguration.loadingStateView\"\n        [user]=\"user\" [group]=\"group\"\n        [errorStateView]=\"messageListConfiguration.errorStateView\"\n        [disableReceipt]=\"messageListConfiguration.disableReceipt\"\n        [readIcon]=\"messageListConfiguration.readIcon\"\n        [deliveredIcon]=\"messageListConfiguration.deliveredIcon\"\n        [sentIcon]=\"messageListConfiguration.sentIcon\"\n        [waitIcon]=\"messageListConfiguration.waitIcon\"\n        [errorIcon]=\"messageListConfiguration.errorIcon\"\n        [alignment]=\"messageListConfiguration.alignment\"\n        [showAvatar]=\"messageListConfiguration.showAvatar\"\n        [datePattern]=\"messageListConfiguration.datePattern\"\n        [timestampAlignment]=\"messageListConfiguration.timestampAlignment\"\n        [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n        [templates]=\"messageListConfiguration.templates\"\n        [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder\"\n        [thresholdValue]=\"messageListConfiguration.thresholdValue\"\n        [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick || openThreadView\"\n        [headerView]=\"messageListConfiguration.headerView\"\n        [footerView]=\"messageListConfiguration.footerView\"\n        [avatarStyle]=\"messageListConfiguration.avatarStyle\"\n        [scrollToBottomOnNewMessages]=\"messageListConfiguration.scrollToBottomOnNewMessages\"\n        [backdropStyle]=\"messageListConfiguration.backdropStyle\"\n        [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\"\n        [messageListStyle]=\"messageListConfiguration.messageListStyle\"\n        [onError]=\"messageListConfiguration.onError\">\n      </cometchat-message-list>\n    </div>\n    <div class=\"cc-messages__composer\" *ngIf=\"!hideMessageComposer\">\n      <div *ngIf=\"messageComposerView; else customComposerView\"\n        class=\"cc-messages__composer--customview\">\n        <ng-container *ngTemplateOutlet=\"messageComposerView\">\n        </ng-container>\n      </div>\n      <ng-template #customComposerView>\n        <cometchat-message-composer #messageComposerRef\n          [disableSoundForMessages]=\"disableSoundForMessages\"\n          [voiceRecordingStopIconURL]=\"messageComposerConfiguration.voiceRecordingStopIconURL\"\n          [voiceRecordingStartIconURL]=\"messageComposerConfiguration.voiceRecordingStartIconURL\"\n          [voiceRecordingCloseIconURL]=\"messageComposerConfiguration.voiceRecordingCloseIconURL\"\n          [voiceRecordingSubmitIconURL]=\"messageComposerConfiguration.voiceRecordingSubmitIconURL\"\n          [mediaRecorderStyle]=\"messageComposerConfiguration.mediaRecorderStyle\"\n          [customSoundForMessages]=\"customSoundForOutgoingMessages\"\n          [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      </ng-template>\n    </div>\n  </div>\n  <div class=\"cc-messages__livereaction\">\n    <cometchat-live-reaction *ngIf=\"liveReaction\"\n      [reactionIconURL]=\"reactionName\"></cometchat-live-reaction>\n  </div>\n  <div *ngIf=\"openThreadedMessages\" class=\"cc-messages__threadedmessages\">\n    <cometchat-threaded-messages [onClose]=\"closeThreadView\"\n      [threadedMessagesStyle]=\"threadedMessageConfiguration.threadedMessagesStyle\"\n      [messageActionView]=\"threadedMessageConfiguration.messageActionView\"\n      [closeIconURL]=\"threadedMessageConfiguration.closeIconURL\"\n      [onError]=\"threadedMessageConfiguration.onError\"\n      [bubbleView]=\"threadedMessageConfiguration.bubbleView || parentBubbleView\"\n      [parentMessage]=\"threadMessageObject\" [user]=\"user\"\n      [group]=\"group\"></cometchat-threaded-messages>\n  </div>\n  <div *ngIf=\"openDetails\" class=\"cc-messages__details\">\n    <cometchat-details [backdropStyle]=\"detailsConfiguration.backdropStyle\"\n      [transferOwnershipConfiguration]=\"detailsConfiguration.transferOwnershipConfiguration\"\n      [groupMembersConfiguration]=\"detailsConfiguration.groupMembersConfiguration\"\n      [bannedMembersConfiguration]=\"detailsConfiguration.bannedMembersConfiguration\"\n      [addMembersConfiguration]=\"detailsConfiguration.addMembersConfiguration\"\n      [onClose]=\"detailsConfiguration.onClose || closeDetailsPage\"\n      [listItemStyle]=\"detailsConfiguration.listItemStyle\"\n      [detailsStyle]=\"detailsConfiguration.detailsStyle\"\n      [avatarStyle]=\"detailsConfiguration.avatarStyle\"\n      [statusIndicatorStyle]=\"detailsConfiguration.statusIndicatorStyle\"\n      [leaveDialogStyle]=\"detailsConfiguration.leaveDialogStyle\"\n      [data]=\"detailsConfiguration.data\"\n      [customProfileView]=\"detailsConfiguration.customProfileView\"\n      [subtitleView]=\"detailsConfiguration.subtitleView\"\n      [hideProfile]=\"detailsConfiguration.hideProfile\"\n      [onError]=\"detailsConfiguration.onError\"\n      [closeButtonIconURL]=\"detailsConfiguration.closeButtonIconURL\"\n      [user]=\"user\" [group]=\"group\"></cometchat-details>\n  </div>\n</div>\n<ng-template #headerMenu>\n  <div class=\"cc-messages__headermenu\">\n    <div class=\"cc-messages__auxiliarymenu\"\n      *ngIf=\"getAuxilaryView(); else elseBlock\">\n      <ng-container *ngTemplateOutlet=\"getAuxilaryView()\">\n      </ng-container>\n    </div>\n    <ng-template #elseBlock>\n      <cometchat-call-buttons *ngIf=\"enableCalling\" voiceCallIconText=\"\"\n        videoCallIconText=\"\" [user]=\"user\" [group]=\"group\"\n        [callButtonsStyle]=\"callButtonsStyle\">\n      </cometchat-call-buttons>\n    </ng-template>\n    <cometchat-button *ngIf=\"!hideDetails\" [iconURL]=\"infoIconStyle\"\n      [buttonStyle]=\"detailsButtonStyle\"\n      (cc-button-clicked)=\"openDetailsPage()\"></cometchat-button>\n  </div>\n</ng-template>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-messages__wrapper{position:relative;height:100%;width:100%}.cc-messages{display:flex;flex-direction:column;position:relative;height:100%;width:100%;box-sizing:border-box;justify-content:space-between}.cc-messages__headermenu{display:flex;justify-content:center;align-items:center}.cc-messages__threadedmessages,.cc-messages__details{position:absolute;top:0;left:0;height:100%;width:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;max-width:100%;z-index:1}.cc-messages__header{width:100%}.cc-messages__list{overflow:hidden;width:100%;height:100%}cometchat-threaded-messages{height:100%;display:flex}.cc-messages__composer{width:100%;display:flex;flex-direction:column;justify-content:flex-end}\n"], components: [{ type: CometChatMessageHeaderComponent, selector: "cometchat-message-header", inputs: ["avatarStyle", "statusIndicatorStyle", "messageHeaderStyle", "listItemStyle", "subtitleView", "disableUsersPresence", "disableTyping", "protectedGroupIcon", "privateGroupIcon", "menu", "user", "group", "backButtonIconURL", "hideBackButton", "listItemView", "onError", "onBack"] }, { type: CometChatMessageListComponent, selector: "cometchat-message-list", inputs: ["hideError", "errorStateView", "loadingStateView", "emptyStateView", "errorStateText", "emptyStateText", "loadingIconURL", "user", "group", "disableReceipt", "disableSoundForMessages", "customSoundForMessages", "readIcon", "deliveredIcon", "sentIcon", "waitIcon", "errorIcon", "alignment", "showAvatar", "datePattern", "timestampAlignment", "DateSeparatorPattern", "templates", "messagesRequestBuilder", "newMessageIndicatorText", "scrollToBottomOnNewMessages", "thresholdValue", "onThreadRepliesClick", "headerView", "footerView", "parentMessageId", "avatarStyle", "backdropStyle", "dateSeparatorStyle", "messageListStyle", "onError", "messageInformationConfiguration"] }, { type: CometChatMessageComposerComponent, selector: "cometchat-message-composer", inputs: ["user", "group", "disableSoundForMessages", "customSoundForMessage", "disableTypingEvents", "text", "placeholderText", "headerView", "onTextChange", "attachmentIconURL", "attachmentOptions", "secondaryButtonView", "auxilaryButtonView", "auxiliaryButtonsAlignment", "sendButtonView", "parentMessageId", "hideLiveReaction", "LiveReactionIconURL", "messageComposerStyle", "onSendButtonClick", "onError", "backdropStyle", "actionSheetStyle", "hideVoiceRecording", "mediaRecorderStyle", "voiceRecordingIconURL", "voiceRecordingCloseIconURL", "voiceRecordingStartIconURL", "voiceRecordingStopIconURL", "voiceRecordingSubmitIconURL"] }, { type: CometChatThreadedMessagesComponent, selector: "cometchat-threaded-messages", inputs: ["onClose", "onError", "parentMessage", "title", "closeIconURL", "bubbleView", "messageActionView", "messageListConfiguration", "messageComposerConfiguration", "threadedMessagesStyle"] }, { type: CometChatDetailsComponent, selector: "cometchat-details", inputs: ["group", "user", "title", "closeButtonIconURL", "hideProfile", "subtitleView", "customProfileView", "data", "disableUsersPresence", "privateGroupIcon", "protectedGroupIcon", "onError", "onClose", "leaveGroupConfirmButtonText", "leaveGroupCancelButtonText", "leaveGroupDialogMessage", "leaveGroupDialogStyle", "deleteGroupConfirmButtonText", "deleteGroupDialogMessage", "deleteGroupCancelButtonText", "deleteGroupDialogStyle", "transferOwnershipConfirmButtonText", "transferOwnershipDialogMessage", "transferOwnershipCancelButtonText", "transferOwnershipDialogStyle", "addMembersConfiguration", "bannedMembersConfiguration", "groupMembersConfiguration", "transferOwnershipConfiguration", "statusIndicatorStyle", "backdropStyle", "avatarStyle", "detailsStyle", "listItemStyle"] }, { type: CometChatCallButtonsComponent, selector: "cometchat-call-buttons", inputs: ["user", "group", "voiceCallIconURL", "voiceCallIconText", "voiceCallIconHoverText", "videoCallIconURL", "videoCallIconText", "videoCallIconHoverText", "onVoiceCallClick", "onVideoCallClick", "onError", "callButtonsStyle", "outgoingCallConfiguration", "ongoingCallConfiguration"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessagesComponent, decorators: [{
             type: Component,
-            args: [{ selector: "cometchat-messages", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-messages__wrapper\">\n<div class=\"cc-messages\" [ngStyle]=\"chatListStyle()\" *ngIf=\"user || group\">\n<div class=\"cc-messages__header\" *ngIf=\"!hideMessageHeader\">\n  <div *ngIf=\"messageHeaderView; else customHeaderView\" class=\"cc-messages__header-customview\">\n    <ng-container *ngTemplateOutlet=\"messageHeaderView\">\n    </ng-container>\n  </div>\n  <ng-template #customHeaderView>\n    <cometchat-message-header [user]=\"user\" [group]=\"group\" [subtitleView]=\"messageHeaderConfiguration.subtitleView\"\n    [disableUsersPresence]=\"messageHeaderConfiguration.disableUsersPresence\" [protectedGroupIcon]=\"messageHeaderConfiguration.protectedGroupIcon\" [privateGroupIcon]=\"messageHeaderConfiguration.privateGroupIcon\" [menu]=\"headerMenu\" [messageHeaderStyle]=\"messageHeaderConfiguration.messageHeaderStyle\"\n    [backButtonIconURL]=\"messageHeaderConfiguration.backButtonIconURL\" [hideBackButton]=\"messageHeaderConfiguration.hideBackButton\" [onError]=\"messageHeaderConfiguration.onError\" [onBack]=\"messageHeaderConfiguration.onBack\" [listItemStyle]=\"messageHeaderConfiguration.listItemStyle\" [statusIndicatorStyle]=\"messageHeaderConfiguration.statusIndicatorStyle\"\n    [avatarStyle]=\"messageHeaderConfiguration.avatarStyle\"\n    >\n    </cometchat-message-header>\n  </ng-template>\n</div>\n<div class=\"cc-messages__list\">\n  <cometchat-message-list #messageListRef [messageInformationConfiguration]=\"messageListConfiguration.messageInformationConfiguration\" [disableSoundForMessages]=\"disableSoundForMessages\" [customSoundForMessages]=\"customSoundForIncomingMessages\" [emptyStateView]=\"messageListConfiguration.emptyStateView\" [loadingIconURL]=\"messageListConfiguration?.loadingIconURL!\" [loadingStateView]=\"messageListConfiguration.loadingStateView\"  [user]=\"user\" [group]=\"group\"\n  [errorStateView]=\"messageListConfiguration.errorStateView\" [disableReceipt]=\"messageListConfiguration.disableReceipt\" [readIcon]=\"messageListConfiguration.readIcon\" [deliveredIcon]=\"messageListConfiguration.deliveredIcon\" [sentIcon]=\"messageListConfiguration.sentIcon\" [waitIcon]=\"messageListConfiguration.waitIcon\"\n  [errorIcon]=\"messageListConfiguration.errorIcon\" [alignment]=\"messageListConfiguration.alignment\" [showAvatar]=\"messageListConfiguration.showAvatar\" [datePattern]=\"messageListConfiguration.datePattern\" [timestampAlignment]=\"messageListConfiguration.timestampAlignment\" [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n  [templates]=\"messageListConfiguration.templates\" [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder\" [thresholdValue]=\"messageListConfiguration.thresholdValue\" [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick || openThreadView\" [headerView]=\"messageListConfiguration.headerView\" [footerView]=\"messageListConfiguration.footerView\"\n   [avatarStyle]=\"messageListConfiguration.avatarStyle\" [backdropStyle]=\"messageListConfiguration.backdropStyle\" [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\" [messageListStyle]=\"messageListConfiguration.messageListStyle\"  [onError]=\"messageListConfiguration.onError\"\n  >\n  </cometchat-message-list>\n</div>\n<div class=\"cc-messages__composer\" *ngIf=\"!hideMessageComposer\">\n  <div *ngIf=\"messageComposerView; else customComposerView\" class=\"cc-messages__composer--customview\">\n    <ng-container *ngTemplateOutlet=\"messageComposerView\">\n    </ng-container>\n  </div>\n  <ng-template #customComposerView>\n    <cometchat-message-composer #messageComposerRef [disableSoundForMessages]=\"disableSoundForMessages\"\n    [voiceRecordingStopIconURL]=\"messageComposerConfiguration.voiceRecordingStopIconURL\"\n    [voiceRecordingStartIconURL]=\"messageComposerConfiguration.voiceRecordingStartIconURL\"\n    [voiceRecordingCloseIconURL]=\"messageComposerConfiguration.voiceRecordingCloseIconURL\"\n    [voiceRecordingSubmitIconURL]=\"messageComposerConfiguration.voiceRecordingSubmitIconURL\"\n    [mediaRecorderStyle]=\"messageComposerConfiguration.mediaRecorderStyle\"\n    [customSoundForMessages]=\"customSoundForOutgoingMessages\"\n    [user]=\"user\" [group]=\"group\" [text]=\"messageComposerConfiguration.text\" [headerView]=\"messageComposerConfiguration.headerView\" [onTextChange]=\"messageComposerConfiguration.onTextChange\" [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n    [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\" [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\" [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\" [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n    [sendButtonView]=\"messageComposerConfiguration.sendButtonView\" [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\" [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\" [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\" [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n    [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\" [onError]=\"messageComposerConfiguration.onError\"\n    >\n    </cometchat-message-composer>\n  </ng-template>\n</div>\n </div>\n <div class=\"cc-messages__livereaction\">\n  <cometchat-live-reaction *ngIf=\"liveReaction\" [reactionIconURL]=\"reactionName\"></cometchat-live-reaction>\n</div>\n<div *ngIf=\"openThreadedMessages\" class=\"cc-messages__threadedmessages\">\n<cometchat-threaded-messages [onClose]=\"closeThreadView\" [threadedMessagesStyle]=\"threadedMessageConfiguration.threadedMessagesStyle\" [messageActionView]=\"threadedMessageConfiguration.messageActionView\" [closeIconURL]=\"threadedMessageConfiguration.closeIconURL\" [onError]=\"threadedMessageConfiguration.onError\" [bubbleView]=\"threadedMessageConfiguration.bubbleView || parentBubbleView\" [parentMessage]=\"threadMessageObject\" [user]=\"user\" [group]=\"group\"></cometchat-threaded-messages>\n</div>\n<div *ngIf=\"openDetails\" class=\"cc-messages__details\">\n  <cometchat-details [backdropStyle]=\"detailsConfiguration.backdropStyle\"  [transferOwnershipConfiguration]=\"detailsConfiguration.transferOwnershipConfiguration\" [groupMembersConfiguration]=\"detailsConfiguration.groupMembersConfiguration\" [bannedMembersConfiguration]=\"detailsConfiguration.bannedMembersConfiguration\" [addMembersConfiguration]=\"detailsConfiguration.addMembersConfiguration\"  [onClose]=\"detailsConfiguration.onClose || closeDetailsPage\" [listItemStyle]=\"detailsConfiguration.listItemStyle\" [detailsStyle]=\"detailsConfiguration.detailsStyle\" [avatarStyle]=\"detailsConfiguration.avatarStyle\" [statusIndicatorStyle]=\"detailsConfiguration.statusIndicatorStyle\" [leaveDialogStyle]=\"detailsConfiguration.leaveDialogStyle\" [data]=\"detailsConfiguration.data\" [customProfileView]=\"detailsConfiguration.customProfileView\" [subtitleView]=\"detailsConfiguration.subtitleView\" [hideProfile]=\"detailsConfiguration.hideProfile\" [onError]=\"detailsConfiguration.onError\" [closeButtonIconURL]=\"detailsConfiguration.closeButtonIconURL\"  [user]=\"user\" [group]=\"group\"></cometchat-details>\n  </div>\n</div>\n<ng-template #headerMenu>\n  <div class=\"cc-messages__headermenu\">\n<div class=\"cc-messages__auxiliarymenu\" *ngIf=\"getAuxilaryView(); else elseBlock\">\n  <ng-container *ngTemplateOutlet=\"getAuxilaryView()\">\n  </ng-container>\n</div>\n    <ng-template #elseBlock>\n      <cometchat-call-buttons *ngIf=\"enableCalling\" voiceCallIconText=\"\" videoCallIconText=\"\" [user]=\"user\" [group]=\"group\" [callButtonsStyle]=\"callButtonsStyle\">\n      </cometchat-call-buttons>\n    </ng-template>\n    <cometchat-button *ngIf=\"!hideDetails\" [iconURL]=\"infoIconStyle\" [buttonStyle]=\"detailsButtonStyle\" (cc-button-clicked)=\"openDetailsPage()\"></cometchat-button>\n  </div>\n</ng-template>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-messages__wrapper{position:relative;height:100%;width:100%}.cc-messages{display:flex;flex-direction:column;position:relative;height:100%;width:100%;box-sizing:border-box;justify-content:space-between}.cc-messages__headermenu{display:flex;justify-content:center;align-items:center}.cc-messages__threadedmessages,.cc-messages__details{position:absolute;top:0;left:0;height:100%;width:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;max-width:100%;z-index:1}.cc-messages__header{width:100%}.cc-messages__list{overflow:hidden;width:100%;height:100%}cometchat-threaded-messages{height:100%;display:flex}.cc-messages__composer{width:100%;display:flex;flex-direction:column;justify-content:flex-end}\n"] }]
+            args: [{ selector: "cometchat-messages", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-messages__wrapper\">\n  <div class=\"cc-messages\" [ngStyle]=\"chatListStyle()\" *ngIf=\"user || group\">\n    <div class=\"cc-messages__header\" *ngIf=\"!hideMessageHeader\">\n      <div *ngIf=\"messageHeaderView; else customHeaderView\"\n        class=\"cc-messages__header-customview\">\n        <ng-container *ngTemplateOutlet=\"messageHeaderView\">\n        </ng-container>\n      </div>\n      <ng-template #customHeaderView>\n        <cometchat-message-header [user]=\"user\" [group]=\"group\"\n          [subtitleView]=\"messageHeaderConfiguration.subtitleView\"\n          [disableUsersPresence]=\"messageHeaderConfiguration.disableUsersPresence\"\n          [protectedGroupIcon]=\"messageHeaderConfiguration.protectedGroupIcon\"\n          [privateGroupIcon]=\"messageHeaderConfiguration.privateGroupIcon\"\n          [menu]=\"headerMenu\"\n          [messageHeaderStyle]=\"messageHeaderConfiguration.messageHeaderStyle\"\n          [backButtonIconURL]=\"messageHeaderConfiguration.backButtonIconURL\"\n          [hideBackButton]=\"messageHeaderConfiguration.hideBackButton\"\n          [onError]=\"messageHeaderConfiguration.onError\"\n          [onBack]=\"messageHeaderConfiguration.onBack\"\n          [listItemStyle]=\"messageHeaderConfiguration.listItemStyle\"\n          [statusIndicatorStyle]=\"messageHeaderConfiguration.statusIndicatorStyle\"\n          [avatarStyle]=\"messageHeaderConfiguration.avatarStyle\">\n        </cometchat-message-header>\n      </ng-template>\n    </div>\n    <div class=\"cc-messages__list\">\n      <cometchat-message-list #messageListRef\n        [messageInformationConfiguration]=\"messageListConfiguration.messageInformationConfiguration\"\n        [disableSoundForMessages]=\"disableSoundForMessages\"\n        [customSoundForMessages]=\"customSoundForIncomingMessages\"\n        [emptyStateView]=\"messageListConfiguration.emptyStateView\"\n        [loadingIconURL]=\"messageListConfiguration?.loadingIconURL!\"\n        [loadingStateView]=\"messageListConfiguration.loadingStateView\"\n        [user]=\"user\" [group]=\"group\"\n        [errorStateView]=\"messageListConfiguration.errorStateView\"\n        [disableReceipt]=\"messageListConfiguration.disableReceipt\"\n        [readIcon]=\"messageListConfiguration.readIcon\"\n        [deliveredIcon]=\"messageListConfiguration.deliveredIcon\"\n        [sentIcon]=\"messageListConfiguration.sentIcon\"\n        [waitIcon]=\"messageListConfiguration.waitIcon\"\n        [errorIcon]=\"messageListConfiguration.errorIcon\"\n        [alignment]=\"messageListConfiguration.alignment\"\n        [showAvatar]=\"messageListConfiguration.showAvatar\"\n        [datePattern]=\"messageListConfiguration.datePattern\"\n        [timestampAlignment]=\"messageListConfiguration.timestampAlignment\"\n        [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n        [templates]=\"messageListConfiguration.templates\"\n        [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder\"\n        [thresholdValue]=\"messageListConfiguration.thresholdValue\"\n        [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick || openThreadView\"\n        [headerView]=\"messageListConfiguration.headerView\"\n        [footerView]=\"messageListConfiguration.footerView\"\n        [avatarStyle]=\"messageListConfiguration.avatarStyle\"\n        [scrollToBottomOnNewMessages]=\"messageListConfiguration.scrollToBottomOnNewMessages\"\n        [backdropStyle]=\"messageListConfiguration.backdropStyle\"\n        [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\"\n        [messageListStyle]=\"messageListConfiguration.messageListStyle\"\n        [onError]=\"messageListConfiguration.onError\">\n      </cometchat-message-list>\n    </div>\n    <div class=\"cc-messages__composer\" *ngIf=\"!hideMessageComposer\">\n      <div *ngIf=\"messageComposerView; else customComposerView\"\n        class=\"cc-messages__composer--customview\">\n        <ng-container *ngTemplateOutlet=\"messageComposerView\">\n        </ng-container>\n      </div>\n      <ng-template #customComposerView>\n        <cometchat-message-composer #messageComposerRef\n          [disableSoundForMessages]=\"disableSoundForMessages\"\n          [voiceRecordingStopIconURL]=\"messageComposerConfiguration.voiceRecordingStopIconURL\"\n          [voiceRecordingStartIconURL]=\"messageComposerConfiguration.voiceRecordingStartIconURL\"\n          [voiceRecordingCloseIconURL]=\"messageComposerConfiguration.voiceRecordingCloseIconURL\"\n          [voiceRecordingSubmitIconURL]=\"messageComposerConfiguration.voiceRecordingSubmitIconURL\"\n          [mediaRecorderStyle]=\"messageComposerConfiguration.mediaRecorderStyle\"\n          [customSoundForMessages]=\"customSoundForOutgoingMessages\"\n          [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      </ng-template>\n    </div>\n  </div>\n  <div class=\"cc-messages__livereaction\">\n    <cometchat-live-reaction *ngIf=\"liveReaction\"\n      [reactionIconURL]=\"reactionName\"></cometchat-live-reaction>\n  </div>\n  <div *ngIf=\"openThreadedMessages\" class=\"cc-messages__threadedmessages\">\n    <cometchat-threaded-messages [onClose]=\"closeThreadView\"\n      [threadedMessagesStyle]=\"threadedMessageConfiguration.threadedMessagesStyle\"\n      [messageActionView]=\"threadedMessageConfiguration.messageActionView\"\n      [closeIconURL]=\"threadedMessageConfiguration.closeIconURL\"\n      [onError]=\"threadedMessageConfiguration.onError\"\n      [bubbleView]=\"threadedMessageConfiguration.bubbleView || parentBubbleView\"\n      [parentMessage]=\"threadMessageObject\" [user]=\"user\"\n      [group]=\"group\"></cometchat-threaded-messages>\n  </div>\n  <div *ngIf=\"openDetails\" class=\"cc-messages__details\">\n    <cometchat-details [backdropStyle]=\"detailsConfiguration.backdropStyle\"\n      [transferOwnershipConfiguration]=\"detailsConfiguration.transferOwnershipConfiguration\"\n      [groupMembersConfiguration]=\"detailsConfiguration.groupMembersConfiguration\"\n      [bannedMembersConfiguration]=\"detailsConfiguration.bannedMembersConfiguration\"\n      [addMembersConfiguration]=\"detailsConfiguration.addMembersConfiguration\"\n      [onClose]=\"detailsConfiguration.onClose || closeDetailsPage\"\n      [listItemStyle]=\"detailsConfiguration.listItemStyle\"\n      [detailsStyle]=\"detailsConfiguration.detailsStyle\"\n      [avatarStyle]=\"detailsConfiguration.avatarStyle\"\n      [statusIndicatorStyle]=\"detailsConfiguration.statusIndicatorStyle\"\n      [leaveDialogStyle]=\"detailsConfiguration.leaveDialogStyle\"\n      [data]=\"detailsConfiguration.data\"\n      [customProfileView]=\"detailsConfiguration.customProfileView\"\n      [subtitleView]=\"detailsConfiguration.subtitleView\"\n      [hideProfile]=\"detailsConfiguration.hideProfile\"\n      [onError]=\"detailsConfiguration.onError\"\n      [closeButtonIconURL]=\"detailsConfiguration.closeButtonIconURL\"\n      [user]=\"user\" [group]=\"group\"></cometchat-details>\n  </div>\n</div>\n<ng-template #headerMenu>\n  <div class=\"cc-messages__headermenu\">\n    <div class=\"cc-messages__auxiliarymenu\"\n      *ngIf=\"getAuxilaryView(); else elseBlock\">\n      <ng-container *ngTemplateOutlet=\"getAuxilaryView()\">\n      </ng-container>\n    </div>\n    <ng-template #elseBlock>\n      <cometchat-call-buttons *ngIf=\"enableCalling\" voiceCallIconText=\"\"\n        videoCallIconText=\"\" [user]=\"user\" [group]=\"group\"\n        [callButtonsStyle]=\"callButtonsStyle\">\n      </cometchat-call-buttons>\n    </ng-template>\n    <cometchat-button *ngIf=\"!hideDetails\" [iconURL]=\"infoIconStyle\"\n      [buttonStyle]=\"detailsButtonStyle\"\n      (cc-button-clicked)=\"openDetailsPage()\"></cometchat-button>\n  </div>\n</ng-template>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-messages__wrapper{position:relative;height:100%;width:100%}.cc-messages{display:flex;flex-direction:column;position:relative;height:100%;width:100%;box-sizing:border-box;justify-content:space-between}.cc-messages__headermenu{display:flex;justify-content:center;align-items:center}.cc-messages__threadedmessages,.cc-messages__details{position:absolute;top:0;left:0;height:100%;width:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;max-width:100%;z-index:1}.cc-messages__header{width:100%}.cc-messages__list{overflow:hidden;width:100%;height:100%}cometchat-threaded-messages{height:100%;display:flex}.cc-messages__composer{width:100%;display:flex;flex-direction:column;justify-content:flex-end}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }, { type: i0.ElementRef }]; }, propDecorators: { messageComposerRef: [{
                 type: ViewChild,
                 args: ["messageComposerRef", { static: false }]
@@ -14422,17 +15287,11 @@ class CometChatConversationsWithMessagesComponent {
     }
 }
 CometChatConversationsWithMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatConversationsWithMessagesComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
-CometChatConversationsWithMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatConversationsWithMessagesComponent, selector: "cometchat-conversations-with-messages", inputs: { user: "user", group: "group", isMobileView: "isMobileView", messageText: "messageText", conversationsWithMessagesStyle: "conversationsWithMessagesStyle", messagesConfiguration: "messagesConfiguration", conversationConfiguration: "conversationConfiguration", onError: "onError", startNewConversationIconURL: "startNewConversationIconURL", hideStartNewConversation: "hideStartNewConversation", StartConversationConfiguration: "StartConversationConfiguration" }, viewQueries: [{ propertyName: "conversationRef", first: true, predicate: ["conversationRef"], descendants: true }, { propertyName: "messageListRef", first: true, predicate: ["messagesRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-with-messages__wrapper\" [ngStyle]=\"chatsWrapperStyles()\" >\n  <div class=\"cc-with-messages__sidebar\" [ngClass]=\"{mobile : isMobileView}\" [ngStyle]=\"sideBarStyle\">\n    <cometchat-conversations\n    #conversationRef\n    [activeConversation]=\"activeConversation\"\n    [onItemClick]=\"conversationConfiguration.onItemClick || onItemClick\"\n    [conversationsStyle]=\"conversationConfiguration.conversationsStyle\"\n    [subtitleView]=\"conversationConfiguration.subtitleView\"\n    [options]=\"conversationConfiguration.options\"\n    [disableUsersPresence]=\"conversationConfiguration.disableUsersPresence\"\n    [disableReceipt]=\"conversationConfiguration.disableReceipt\"\n    [disableTyping]=\"conversationConfiguration.disableTyping\"\n    [deliveredIcon]=\"conversationConfiguration.deliveredIcon\"\n    [readIcon]=\"conversationConfiguration.readIcon\"\n    [waitIcon]=\"conversationConfiguration.waitIcon\"\n    [errorIcon]=\"conversationConfiguration.errorIcon\"\n    [datePattern]=\"conversationConfiguration.datePattern\"\n    [receiptStyle]=\"conversationConfiguration.receiptStyle\"\n    [sentIcon]=\"conversationConfiguration.sentIcon\"\n    [privateGroupIcon]=\"conversationConfiguration.privateGroupIcon\"\n    [protectedGroupIcon]=\"conversationConfiguration.protectedGroupIcon\"\n    [customSoundForMessages]=\"conversationConfiguration.customSoundForMessages\"\n    [conversationsRequestBuilder]=\"conversationConfiguration.conversationsRequestBuilder\"\n    [emptyStateView]=\"conversationConfiguration.emptyStateView\"\n    [onSelect]=\"conversationConfiguration.onSelect\"\n    [loadingIconURL]=\"conversationConfiguration.loadingIconURL\"\n    [errorStateView]=\"conversationConfiguration.errorStateView\"\n    [loadingStateView]=\"conversationConfiguration.loadingStateView\"\n    [titleAlignment]=\"conversationConfiguration.titleAlignment\"\n    [listItemView]=\"conversationConfiguration.listItemView\"\n    [menu]=\"conversationConfiguration.menu || startConversationButton\"\n    [hideSeparator]=\"conversationConfiguration.hideSeparator\"\n    [hideError]=\"conversationConfiguration.hideError\"\n    [selectionMode]=\"conversationConfiguration.selectionMode\"\n    [disableSoundForMessages]=\"conversationConfiguration.disableSoundForMessages\"\n    [deleteConversationDialogStyle]=\"conversationConfiguration.deleteConversationDialogStyle\"\n    [badgeStyle]=\"conversationConfiguration.badgeStyle\"\n    [dateStyle]=\"conversationConfiguration.dateStyle\"\n    [listItemStyle]=\"conversationConfiguration.listItemStyle\"\n    [backdropStyle]=\"conversationConfiguration.backdropStyle\"\n\n    ></cometchat-conversations>\n  </div>\n  <div class=\"cc-with-messages__main\" [ngClass]=\"{mobile : isMobileView}\" *ngIf=\"!showStartConversation && (user || group)\">\n    <!--Message List Screen-->\n    <cometchat-messages\n    #messagesRef\n    [user]=\"user!\"\n    [group]=\"group!\"\n    [messageHeaderConfiguration]=\"messagesConfiguration.messageHeaderConfiguration\"\n    [messageListConfiguration]=\"messagesConfiguration.messageListConfiguration\"\n    [messageComposerConfiguration]=\"messagesConfiguration.messageComposerConfiguration\"\n    [messagesStyle]=\"messagesConfiguration.messagesStyle\"\n    [customSoundForIncomingMessages]=\"messagesConfiguration.customSoundForIncomingMessages\"\n    [customSoundForOutgoingMessages]=\"messagesConfiguration.customSoundForOutgoingMessages\"\n    [detailsConfiguration]=\"messagesConfiguration.detailsConfiguration\"\n    [disableSoundForMessages]=\"messagesConfiguration.disableSoundForMessages\"\n    [disableTyping]=\"messagesConfiguration.disableTyping\"\n    [hideMessageComposer]=\"messagesConfiguration.hideMessageComposer\"\n    [hideMessageHeader]=\"messagesConfiguration.hideMessageHeader\"\n    [messageComposerView]=\"messagesConfiguration.messageComposerView\"\n    [messageHeaderView]=\"messagesConfiguration.messageHeaderView\"\n    [messageListView]=\"messagesConfiguration.messageListView\"\n    >\n    </cometchat-messages>\n    <!--Message List Screen ENDS-->\n  </div>\n  <div class=\"cc-with-messages__start-conversation\" [ngClass]=\"{mobile : isMobileView}\" *ngIf=\"showStartConversation\">\n\n  <cometchat-contacts [usersConfiguration]=\"StartConversationConfiguration.usersConfiguration\"\n  [groupsConfiguration]=\"StartConversationConfiguration.groupsConfiguration\"\n  [closeIconURL]=\"StartConversationConfiguration.closeIconURL\"\n  [contactsStyle]=\"StartConversationConfiguration.contactsStyle\"\n  [selectionMode]=\"StartConversationConfiguration.selectionMode\"\n  [onClose]=\"StartConversationConfiguration.onClose\"\n  [tabVisibility]=\"StartConversationConfiguration.tabVisibility\"\n  [selectionLimit]=\"StartConversationConfiguration.selectionLimit\"\n  [tabs]=\"StartConversationConfiguration.tabs\"\n  [hideSubmitButton]=\"StartConversationConfiguration.hideSubmitButton\"\n  [onSubmitButtonClick]=\"onContactSelected\"></cometchat-contacts>\n  </div>\n  <div class=\"cc-decorator__message--empty\" *ngIf=\"!user && !group && !showStartConversation\" [ngStyle]=\"emptyMessageStyle()\">\n    <cometchat-label [text]=\"messageText\" [labelStyle]=\"labelStyle\"></cometchat-label>\n   </div>\n   <ng-template #startConversationButton>\n    <cometchat-button *ngIf=\"!hideStartNewConversation\" [iconURL]=\"startNewConversationIconURL\" [buttonStyle]=\"startConversationButtonStyle\" (cc-button-clicked)=\"triggerStartConversation()\"></cometchat-button>\n\n  </ng-template>", styles: [".cc-with-messages__wrapper{display:flex;height:100%;width:100%;box-sizing:border-box;overflow:hidden}.cc-with-messages__sidebar{width:280px;height:100%;position:relative}.cc-with-messages__main,.cc-with-messages__start-conversation{width:calc(100% - 280px);height:100%}.mobile{width:100%!important;height:100%;position:absolute}.cc-decorator__message--empty{display:flex;justify-content:center;align-items:center}\n"], components: [{ type: CometChatConversationsComponent, selector: "cometchat-conversations", inputs: ["subtitleView", "title", "options", "searchPlaceHolder", "disableUsersPresence", "disableReceipt", "disableTyping", "deliveredIcon", "readIcon", "errorIcon", "datePattern", "onError", "sentIcon", "privateGroupIcon", "protectedGroupIcon", "customSoundForMessages", "activeConversation", "searchIconURL", "hideSearch", "conversationsRequestBuilder", "emptyStateView", "onSelect", "loadingIconURL", "errorStateView", "loadingStateView", "emptyStateText", "errorStateText", "titleAlignment", "listItemView", "menu", "hideSeparator", "searchPlaceholder", "hideError", "selectionMode", "disableSoundForMessages", "confirmDialogTitle", "confirmButtonText", "cancelButtonText", "confirmDialogMessage", "onItemClick", "deleteConversationDialogStyle", "backdropStyle", "badgeStyle", "dateStyle", "conversationsStyle", "listItemStyle", "statusIndicatorStyle", "typingIndicatorText", "threadIndicatorText", "avatarStyle", "receiptStyle", "loggedInUser"] }, { type: CometChatMessagesComponent, selector: "cometchat-messages", inputs: ["user", "group", "hideMessageComposer", "disableTyping", "messageHeaderConfiguration", "messageListConfiguration", "messageComposerConfiguration", "threadedMessageConfiguration", "detailsConfiguration", "customSoundForIncomingMessages", "customSoundForOutgoingMessages", "disableSoundForMessages", "messagesStyle", "messageHeaderView", "messageComposerView", "messageListView", "hideMessageHeader", "hideDetails", "auxiliaryMenu"] }, { type: CometChatContactsComponent, selector: "cometchat-contacts", inputs: ["title", "usersTabTitle", "groupsTabTitle", "usersConfiguration", "groupsConfiguration", "onSubmitButtonClick", "closeIconURL", "contactsStyle", "selectionMode", "onClose", "onItemClick", "tabVisibility", "selectionLimit", "tabs", "hideSubmitButton", "submitButtonText"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CometChatConversationsWithMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatConversationsWithMessagesComponent, selector: "cometchat-conversations-with-messages", inputs: { user: "user", group: "group", isMobileView: "isMobileView", messageText: "messageText", conversationsWithMessagesStyle: "conversationsWithMessagesStyle", messagesConfiguration: "messagesConfiguration", conversationConfiguration: "conversationConfiguration", onError: "onError", startNewConversationIconURL: "startNewConversationIconURL", hideStartNewConversation: "hideStartNewConversation", StartConversationConfiguration: "StartConversationConfiguration" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-with-messages__wrapper\" [ngStyle]=\"chatsWrapperStyles()\" >\n  <div class=\"cc-with-messages__sidebar\" [ngClass]=\"{mobile : isMobileView}\" [ngStyle]=\"sideBarStyle\">\n    <cometchat-conversations\n    #conversationRef\n    [activeConversation]=\"activeConversation\"\n    [onItemClick]=\"conversationConfiguration.onItemClick || onItemClick\"\n    [conversationsStyle]=\"conversationConfiguration.conversationsStyle\"\n    [subtitleView]=\"conversationConfiguration.subtitleView\"\n    [options]=\"conversationConfiguration.options\"\n    [disableUsersPresence]=\"conversationConfiguration.disableUsersPresence\"\n    [disableReceipt]=\"conversationConfiguration.disableReceipt\"\n    [disableTyping]=\"conversationConfiguration.disableTyping\"\n    [deliveredIcon]=\"conversationConfiguration.deliveredIcon\"\n    [readIcon]=\"conversationConfiguration.readIcon\"\n    [waitIcon]=\"conversationConfiguration.waitIcon\"\n    [errorIcon]=\"conversationConfiguration.errorIcon\"\n    [datePattern]=\"conversationConfiguration.datePattern\"\n    [receiptStyle]=\"conversationConfiguration.receiptStyle\"\n    [sentIcon]=\"conversationConfiguration.sentIcon\"\n    [privateGroupIcon]=\"conversationConfiguration.privateGroupIcon\"\n    [protectedGroupIcon]=\"conversationConfiguration.protectedGroupIcon\"\n    [customSoundForMessages]=\"conversationConfiguration.customSoundForMessages\"\n    [conversationsRequestBuilder]=\"conversationConfiguration.conversationsRequestBuilder\"\n    [emptyStateView]=\"conversationConfiguration.emptyStateView\"\n    [onSelect]=\"conversationConfiguration.onSelect\"\n    [loadingIconURL]=\"conversationConfiguration.loadingIconURL\"\n    [errorStateView]=\"conversationConfiguration.errorStateView\"\n    [loadingStateView]=\"conversationConfiguration.loadingStateView\"\n    [titleAlignment]=\"conversationConfiguration.titleAlignment\"\n    [listItemView]=\"conversationConfiguration.listItemView\"\n    [menu]=\"conversationConfiguration.menu || startConversationButton\"\n    [hideSeparator]=\"conversationConfiguration.hideSeparator\"\n    [hideError]=\"conversationConfiguration.hideError\"\n    [selectionMode]=\"conversationConfiguration.selectionMode\"\n    [disableSoundForMessages]=\"conversationConfiguration.disableSoundForMessages\"\n    [deleteConversationDialogStyle]=\"conversationConfiguration.deleteConversationDialogStyle\"\n    [badgeStyle]=\"conversationConfiguration.badgeStyle\"\n    [dateStyle]=\"conversationConfiguration.dateStyle\"\n    [listItemStyle]=\"conversationConfiguration.listItemStyle\"\n    [backdropStyle]=\"conversationConfiguration.backdropStyle\"\n\n    ></cometchat-conversations>\n  </div>\n  <div class=\"cc-with-messages__main\" [ngClass]=\"{mobile : isMobileView}\" *ngIf=\"!showStartConversation && (user || group)\">\n    <!--Message List Screen-->\n    <cometchat-messages\n    #messagesRef\n    [user]=\"user!\"\n    [group]=\"group!\"\n    [messageHeaderConfiguration]=\"messagesConfiguration.messageHeaderConfiguration\"\n    [messageListConfiguration]=\"messagesConfiguration.messageListConfiguration\"\n    [messageComposerConfiguration]=\"messagesConfiguration.messageComposerConfiguration\"\n    [messagesStyle]=\"messagesConfiguration.messagesStyle\"\n    [customSoundForIncomingMessages]=\"messagesConfiguration.customSoundForIncomingMessages\"\n    [customSoundForOutgoingMessages]=\"messagesConfiguration.customSoundForOutgoingMessages\"\n    [detailsConfiguration]=\"messagesConfiguration.detailsConfiguration\"\n    [disableSoundForMessages]=\"messagesConfiguration.disableSoundForMessages\"\n    [disableTyping]=\"messagesConfiguration.disableTyping\"\n    [hideMessageComposer]=\"messagesConfiguration.hideMessageComposer\"\n    [hideMessageHeader]=\"messagesConfiguration.hideMessageHeader\"\n    [messageComposerView]=\"messagesConfiguration.messageComposerView\"\n    [messageHeaderView]=\"messagesConfiguration.messageHeaderView\"\n    [messageListView]=\"messagesConfiguration.messageListView\"\n    >\n    </cometchat-messages>\n    <!--Message List Screen ENDS-->\n  </div>\n  <div class=\"cc-with-messages__start-conversation\" [ngClass]=\"{mobile : isMobileView}\" *ngIf=\"showStartConversation\">\n\n  <cometchat-contacts [usersConfiguration]=\"StartConversationConfiguration.usersConfiguration\"\n  [groupsConfiguration]=\"StartConversationConfiguration.groupsConfiguration\"\n  [closeIconURL]=\"StartConversationConfiguration.closeIconURL\"\n  [contactsStyle]=\"StartConversationConfiguration.contactsStyle\"\n  [selectionMode]=\"StartConversationConfiguration.selectionMode\"\n  [onClose]=\"StartConversationConfiguration.onClose\"\n  [tabVisibility]=\"StartConversationConfiguration.tabVisibility\"\n  [selectionLimit]=\"StartConversationConfiguration.selectionLimit\"\n  [tabs]=\"StartConversationConfiguration.tabs\"\n  [hideSubmitButton]=\"StartConversationConfiguration.hideSubmitButton\"\n  [onSubmitButtonClick]=\"onContactSelected\"></cometchat-contacts>\n  </div>\n  <div class=\"cc-decorator__message--empty\" *ngIf=\"!user && !group && !showStartConversation\" [ngStyle]=\"emptyMessageStyle()\">\n    <cometchat-label [text]=\"messageText\" [labelStyle]=\"labelStyle\"></cometchat-label>\n   </div>\n   <ng-template #startConversationButton>\n    <cometchat-button *ngIf=\"!hideStartNewConversation\" [iconURL]=\"startNewConversationIconURL\" [buttonStyle]=\"startConversationButtonStyle\" (cc-button-clicked)=\"triggerStartConversation()\"></cometchat-button>\n\n  </ng-template>", styles: [".cc-with-messages__wrapper{display:flex;height:100%;width:100%;box-sizing:border-box;overflow:hidden}.cc-with-messages__sidebar{width:280px;height:100%;position:relative}.cc-with-messages__main,.cc-with-messages__start-conversation{width:calc(100% - 280px);height:100%}.mobile{width:100%!important;height:100%;position:absolute}.cc-decorator__message--empty{display:flex;justify-content:center;align-items:center}\n"], components: [{ type: CometChatConversationsComponent, selector: "cometchat-conversations", inputs: ["subtitleView", "title", "options", "searchPlaceHolder", "disableUsersPresence", "disableReceipt", "disableTyping", "deliveredIcon", "readIcon", "errorIcon", "datePattern", "onError", "sentIcon", "privateGroupIcon", "protectedGroupIcon", "customSoundForMessages", "activeConversation", "searchIconURL", "hideSearch", "conversationsRequestBuilder", "emptyStateView", "onSelect", "loadingIconURL", "errorStateView", "loadingStateView", "emptyStateText", "errorStateText", "titleAlignment", "listItemView", "menu", "hideSeparator", "searchPlaceholder", "hideError", "selectionMode", "disableSoundForMessages", "confirmDialogTitle", "confirmButtonText", "cancelButtonText", "confirmDialogMessage", "onItemClick", "deleteConversationDialogStyle", "backdropStyle", "badgeStyle", "dateStyle", "conversationsStyle", "listItemStyle", "statusIndicatorStyle", "typingIndicatorText", "threadIndicatorText", "avatarStyle", "receiptStyle", "loggedInUser"] }, { type: CometChatMessagesComponent, selector: "cometchat-messages", inputs: ["user", "group", "hideMessageComposer", "disableTyping", "messageHeaderConfiguration", "messageListConfiguration", "messageComposerConfiguration", "threadedMessageConfiguration", "detailsConfiguration", "customSoundForIncomingMessages", "customSoundForOutgoingMessages", "disableSoundForMessages", "messagesStyle", "messageHeaderView", "messageComposerView", "messageListView", "hideMessageHeader", "hideDetails", "auxiliaryMenu"] }, { type: CometChatContactsComponent, selector: "cometchat-contacts", inputs: ["title", "usersTabTitle", "groupsTabTitle", "usersConfiguration", "groupsConfiguration", "onSubmitButtonClick", "closeIconURL", "contactsStyle", "selectionMode", "onClose", "onItemClick", "tabVisibility", "selectionLimit", "tabs", "hideSubmitButton", "submitButtonText"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatConversationsWithMessagesComponent, decorators: [{
             type: Component,
             args: [{ selector: "cometchat-conversations-with-messages", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-with-messages__wrapper\" [ngStyle]=\"chatsWrapperStyles()\" >\n  <div class=\"cc-with-messages__sidebar\" [ngClass]=\"{mobile : isMobileView}\" [ngStyle]=\"sideBarStyle\">\n    <cometchat-conversations\n    #conversationRef\n    [activeConversation]=\"activeConversation\"\n    [onItemClick]=\"conversationConfiguration.onItemClick || onItemClick\"\n    [conversationsStyle]=\"conversationConfiguration.conversationsStyle\"\n    [subtitleView]=\"conversationConfiguration.subtitleView\"\n    [options]=\"conversationConfiguration.options\"\n    [disableUsersPresence]=\"conversationConfiguration.disableUsersPresence\"\n    [disableReceipt]=\"conversationConfiguration.disableReceipt\"\n    [disableTyping]=\"conversationConfiguration.disableTyping\"\n    [deliveredIcon]=\"conversationConfiguration.deliveredIcon\"\n    [readIcon]=\"conversationConfiguration.readIcon\"\n    [waitIcon]=\"conversationConfiguration.waitIcon\"\n    [errorIcon]=\"conversationConfiguration.errorIcon\"\n    [datePattern]=\"conversationConfiguration.datePattern\"\n    [receiptStyle]=\"conversationConfiguration.receiptStyle\"\n    [sentIcon]=\"conversationConfiguration.sentIcon\"\n    [privateGroupIcon]=\"conversationConfiguration.privateGroupIcon\"\n    [protectedGroupIcon]=\"conversationConfiguration.protectedGroupIcon\"\n    [customSoundForMessages]=\"conversationConfiguration.customSoundForMessages\"\n    [conversationsRequestBuilder]=\"conversationConfiguration.conversationsRequestBuilder\"\n    [emptyStateView]=\"conversationConfiguration.emptyStateView\"\n    [onSelect]=\"conversationConfiguration.onSelect\"\n    [loadingIconURL]=\"conversationConfiguration.loadingIconURL\"\n    [errorStateView]=\"conversationConfiguration.errorStateView\"\n    [loadingStateView]=\"conversationConfiguration.loadingStateView\"\n    [titleAlignment]=\"conversationConfiguration.titleAlignment\"\n    [listItemView]=\"conversationConfiguration.listItemView\"\n    [menu]=\"conversationConfiguration.menu || startConversationButton\"\n    [hideSeparator]=\"conversationConfiguration.hideSeparator\"\n    [hideError]=\"conversationConfiguration.hideError\"\n    [selectionMode]=\"conversationConfiguration.selectionMode\"\n    [disableSoundForMessages]=\"conversationConfiguration.disableSoundForMessages\"\n    [deleteConversationDialogStyle]=\"conversationConfiguration.deleteConversationDialogStyle\"\n    [badgeStyle]=\"conversationConfiguration.badgeStyle\"\n    [dateStyle]=\"conversationConfiguration.dateStyle\"\n    [listItemStyle]=\"conversationConfiguration.listItemStyle\"\n    [backdropStyle]=\"conversationConfiguration.backdropStyle\"\n\n    ></cometchat-conversations>\n  </div>\n  <div class=\"cc-with-messages__main\" [ngClass]=\"{mobile : isMobileView}\" *ngIf=\"!showStartConversation && (user || group)\">\n    <!--Message List Screen-->\n    <cometchat-messages\n    #messagesRef\n    [user]=\"user!\"\n    [group]=\"group!\"\n    [messageHeaderConfiguration]=\"messagesConfiguration.messageHeaderConfiguration\"\n    [messageListConfiguration]=\"messagesConfiguration.messageListConfiguration\"\n    [messageComposerConfiguration]=\"messagesConfiguration.messageComposerConfiguration\"\n    [messagesStyle]=\"messagesConfiguration.messagesStyle\"\n    [customSoundForIncomingMessages]=\"messagesConfiguration.customSoundForIncomingMessages\"\n    [customSoundForOutgoingMessages]=\"messagesConfiguration.customSoundForOutgoingMessages\"\n    [detailsConfiguration]=\"messagesConfiguration.detailsConfiguration\"\n    [disableSoundForMessages]=\"messagesConfiguration.disableSoundForMessages\"\n    [disableTyping]=\"messagesConfiguration.disableTyping\"\n    [hideMessageComposer]=\"messagesConfiguration.hideMessageComposer\"\n    [hideMessageHeader]=\"messagesConfiguration.hideMessageHeader\"\n    [messageComposerView]=\"messagesConfiguration.messageComposerView\"\n    [messageHeaderView]=\"messagesConfiguration.messageHeaderView\"\n    [messageListView]=\"messagesConfiguration.messageListView\"\n    >\n    </cometchat-messages>\n    <!--Message List Screen ENDS-->\n  </div>\n  <div class=\"cc-with-messages__start-conversation\" [ngClass]=\"{mobile : isMobileView}\" *ngIf=\"showStartConversation\">\n\n  <cometchat-contacts [usersConfiguration]=\"StartConversationConfiguration.usersConfiguration\"\n  [groupsConfiguration]=\"StartConversationConfiguration.groupsConfiguration\"\n  [closeIconURL]=\"StartConversationConfiguration.closeIconURL\"\n  [contactsStyle]=\"StartConversationConfiguration.contactsStyle\"\n  [selectionMode]=\"StartConversationConfiguration.selectionMode\"\n  [onClose]=\"StartConversationConfiguration.onClose\"\n  [tabVisibility]=\"StartConversationConfiguration.tabVisibility\"\n  [selectionLimit]=\"StartConversationConfiguration.selectionLimit\"\n  [tabs]=\"StartConversationConfiguration.tabs\"\n  [hideSubmitButton]=\"StartConversationConfiguration.hideSubmitButton\"\n  [onSubmitButtonClick]=\"onContactSelected\"></cometchat-contacts>\n  </div>\n  <div class=\"cc-decorator__message--empty\" *ngIf=\"!user && !group && !showStartConversation\" [ngStyle]=\"emptyMessageStyle()\">\n    <cometchat-label [text]=\"messageText\" [labelStyle]=\"labelStyle\"></cometchat-label>\n   </div>\n   <ng-template #startConversationButton>\n    <cometchat-button *ngIf=\"!hideStartNewConversation\" [iconURL]=\"startNewConversationIconURL\" [buttonStyle]=\"startConversationButtonStyle\" (cc-button-clicked)=\"triggerStartConversation()\"></cometchat-button>\n\n  </ng-template>", styles: [".cc-with-messages__wrapper{display:flex;height:100%;width:100%;box-sizing:border-box;overflow:hidden}.cc-with-messages__sidebar{width:280px;height:100%;position:relative}.cc-with-messages__main,.cc-with-messages__start-conversation{width:calc(100% - 280px);height:100%}.mobile{width:100%!important;height:100%;position:absolute}.cc-decorator__message--empty{display:flex;justify-content:center;align-items:center}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { conversationRef: [{
-                type: ViewChild,
-                args: ["conversationRef", { static: false }]
-            }], messageListRef: [{
-                type: ViewChild,
-                args: ["messagesRef", { static: false }]
-            }], user: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { user: [{
                 type: Input
             }], group: [{
                 type: Input
@@ -14585,12 +15444,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 }]
         }] });
 
+class CometChatCardView {
+}
+CometChatCardView.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCardView, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CometChatCardView.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCardView, declarations: [CometChatCardViewComponent], imports: [CommonModule], exports: [CometChatCardViewComponent] });
+CometChatCardView.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCardView, imports: [[
+            CommonModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCardView, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [CometChatCardViewComponent],
+                    imports: [
+                        CommonModule,
+                    ],
+                    exports: [CometChatCardViewComponent],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+                }]
+        }] });
+
 class CometChatMessageComposer {
 }
 CometChatMessageComposer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageComposer, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CometChatMessageComposer.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageComposer, declarations: [CometChatMessageComposerComponent], imports: [CommonModule], exports: [CometChatMessageComposerComponent] });
+CometChatMessageComposer.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageComposer, declarations: [CometChatMessageComposerComponent], imports: [CommonModule,
+        CometChatCardView], exports: [CometChatMessageComposerComponent] });
 CometChatMessageComposer.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageComposer, imports: [[
             CommonModule,
+            CometChatCardView
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageComposer, decorators: [{
             type: NgModule,
@@ -14598,6 +15478,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     declarations: [CometChatMessageComposerComponent],
                     imports: [
                         CommonModule,
+                        CometChatCardView
                     ],
                     exports: [CometChatMessageComposerComponent],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA]
@@ -15456,5 +16337,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CallingExtension, CallingExtensionDecorator, ChatConfigurator, CollaborativeDocumentExtension, CollaborativeDocumentExtensionDecorator, CollaborativeWhiteBoardExtension, CollaborativeWhiteBoardExtensionDecorator, CometChatAddMembers, CometChatAddMembersComponent, CometChatBannedMembers, CometChatBannedMembersComponent, CometChatCallButtons, CometChatCallButtonsComponent, CometChatContacts, CometChatContactsComponent, CometChatConversations, CometChatConversationsComponent, CometChatConversationsWithMessages, CometChatConversationsWithMessagesComponent, CometChatDetails, CometChatDetailsComponent, CometChatGroupMembers, CometChatGroupMembersComponent, CometChatGroups, CometChatGroupsComponent, CometChatGroupsWithMessages, CometChatGroupsWithMessagesComponent, CometChatIncomingCall, CometChatIncomingCallComponent, CometChatList, CometChatMessageBubble, CometChatMessageBubbleComponent, CometChatMessageComposer, CometChatMessageComposerComponent, CometChatMessageHeader, CometChatMessageHeaderComponent, CometChatMessageInformation, CometChatMessageInformationComponent, CometChatMessageList, CometChatMessageListComponent, CometChatMessages, CometChatMessagesComponent, CometChatOngoingCall, CometChatOngoingCallComponent, CometChatOutgoingCall, CometChatOutgoingCallComponent, CometChatTabs, CometChatTabsComponent, CometChatThemeService, CometChatThreadedMessages, CometChatThreadedMessagesComponent, CometChatTransferOwnership, CometChatTransferOwnershipComponent, CometChatUIKit, CometChatUsers, CometChatUsersComponent, CometChatUsersWithMessages, CometChatUsersWithMessagesComponent, CometchatListComponent, DataSource, DataSourceDecorator, ExtensionsDataSource, ImageModerationExtension, ImageModerationExtensionDecorator, LinkPreviewExtension, LinkPreviewExtensionDecorator, MessageTranslationExtension, MessageTranslationExtensionDecorator, MessageUtils, PollsExtension, PollsExtensionDecorator, ReactionExtension, ReactionExtensionDecorator, SmartReplyExtension, SmartReplyExtensionDecorator, StickersExtension, StickersExtensionDecorator, TextModeratorExtension, TextModeratorExtensionDecorator, ThumbnailGenerationExtension, ThumbnailGenerationExtensionDecorator };
+export { AIConversationStarterDecorator, AIConversationStarterExtension, AIEnabler, AIEnablerDecorator, AISmartRepliesExtension, AISmartRepliesExtensionDecorator, CallingExtension, CallingExtensionDecorator, ChatConfigurator, CollaborativeDocumentExtension, CollaborativeDocumentExtensionDecorator, CollaborativeWhiteBoardExtension, CollaborativeWhiteBoardExtensionDecorator, CometChatAddMembers, CometChatAddMembersComponent, CometChatBannedMembers, CometChatBannedMembersComponent, CometChatCallButtons, CometChatCallButtonsComponent, CometChatContacts, CometChatContactsComponent, CometChatConversations, CometChatConversationsComponent, CometChatConversationsWithMessages, CometChatConversationsWithMessagesComponent, CometChatDetails, CometChatDetailsComponent, CometChatGroupMembers, CometChatGroupMembersComponent, CometChatGroups, CometChatGroupsComponent, CometChatGroupsWithMessages, CometChatGroupsWithMessagesComponent, CometChatIncomingCall, CometChatIncomingCallComponent, CometChatList, CometChatMessageBubble, CometChatMessageBubbleComponent, CometChatMessageComposer, CometChatMessageComposerComponent, CometChatMessageHeader, CometChatMessageHeaderComponent, CometChatMessageInformation, CometChatMessageInformationComponent, CometChatMessageList, CometChatMessageListComponent, CometChatMessages, CometChatMessagesComponent, CometChatOngoingCall, CometChatOngoingCallComponent, CometChatOutgoingCall, CometChatOutgoingCallComponent, CometChatTabs, CometChatTabsComponent, CometChatThemeService, CometChatThreadedMessages, CometChatThreadedMessagesComponent, CometChatTransferOwnership, CometChatTransferOwnershipComponent, CometChatUIKit, CometChatUsers, CometChatUsersComponent, CometChatUsersWithMessages, CometChatUsersWithMessagesComponent, CometchatListComponent, DataSource, DataSourceDecorator, ExtensionsDataSource, ImageModerationExtension, ImageModerationExtensionDecorator, LinkPreviewExtension, LinkPreviewExtensionDecorator, MessageTranslationExtension, MessageTranslationExtensionDecorator, MessageUtils, PollsExtension, PollsExtensionDecorator, ReactionExtension, ReactionExtensionDecorator, SmartReplyExtension, SmartReplyExtensionDecorator, StickersExtension, StickersExtensionDecorator, TextModeratorExtension, TextModeratorExtensionDecorator, ThumbnailGenerationExtension, ThumbnailGenerationExtensionDecorator };
 //# sourceMappingURL=cometchat-chat-uikit-angular.mjs.map