@cometchat/chat-uikit-angular 4.0.1 → 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, AIExtensionDataSource, CometChatUIKitCalls, OutgoingCallStyle, OutgoingCallConfiguration, CallScreenConfiguration, CallButtonsStyle, StorageUtils, IncomingCallStyle, UsersStyle, AddMembersStyle, MessageHeaderStyle, ListStyle, BannedMembersStyle, MessageReceiptUtils, ConversationsStyle, MessageInformationStyle, MessageInformationConfiguration, MessageTranslationConstants, MessageTranslationStyle, ReactionsConstants, LinkPreviewConstants, ThumbnailGenerationConstants, MessageListStyle, LinkPreviewStyle, SmartRepliesConstants, MessageComposerStyle, MessageListConfiguration, MessageComposerConfiguration, ThreadedMessagesStyle, GroupMemberUtils, GroupMembersStyle, TransferOwnershipStyle, AddMembersConfiguration, BannedMembersConfiguration, GroupMembersConfiguration, TransferOwnershipConfiguration, DetailsUtils, DetailsStyle, MessageHeaderConfiguration, ThreadedMessagesConfiguration, DetailsConfiguration, MessagesStyle, GroupsStyle, UsersConfiguration, GroupsConfiguration, ContactsStyle, TabItemStyle, MessagesConfiguration, ConversationsConfiguration, ContactsConfiguration, WithMessagesStyle, CreateGroupConfiguration, JoinGroupConfiguration } from '@cometchat/uikit-shared';
+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);
@@ -1310,128 +1469,6 @@ class ThumbnailGenerationExtension extends ExtensionsDataSource$1 {
     }
 }
 
-class AIEnablerDecorator extends DataSourceDecorator {
-    constructor(dataSource, features) {
-        super(dataSource);
-    }
-    getId() {
-        return "aienabler";
-    }
-}
-
-class AISmartRepliesExtensionDecorator extends DataSourceDecorator {
-    constructor(dataSource) {
-        super(dataSource);
-    }
-    getId() {
-        return "aismartreply";
-    }
-}
-
-class AISmartRepliesExtension extends AIExtensionDataSource {
-    constructor() {
-        super();
-    }
-    addExtension() {
-        ChatConfigurator.enable((dataSource) => new AISmartRepliesExtensionDecorator(dataSource));
-    }
-    getExtensionId() {
-        return "smart-replies";
-    }
-    enable() {
-        this.addExtension();
-    }
-}
-
-class AIConversationStarterDecorator extends DataSourceDecorator {
-    constructor(dataSource) {
-        super(dataSource);
-    }
-    getId() {
-        return "aiconversationstarter";
-    }
-}
-
-class AIConversationStarterExtension extends AIExtensionDataSource {
-    constructor() {
-        super();
-    }
-    addExtension() {
-        ChatConfigurator.enable((dataSource) => new AIConversationStarterDecorator(dataSource));
-    }
-    getExtensionId() {
-        return "conversation-starter";
-    }
-    enable() {
-        this.addExtension();
-    }
-}
-
-class AIEnabler extends AIExtensionDataSource {
-    constructor(defaultFeatures) {
-        super();
-        this.defaultAIFeatures = defaultFeatures;
-    }
-    addExtension() {
-    }
-    getExtensionId() {
-        return "ai-enabler";
-    }
-    enable() {
-        var _a;
-        let features = {};
-        const processFeatures = (feature) => {
-            return CometChat.isAIFeatureEnabled(feature.getExtensionId())
-                .then((response) => {
-                if (response) {
-                    feature === null || feature === void 0 ? void 0 : feature.enable();
-                    if (feature.getExtensionId() !== "conversation-starter") {
-                        features[feature.getExtensionId()] = {
-                            enabled: true,
-                            configuration: feature.getConfiguration(),
-                            enabler: feature,
-                        };
-                    }
-                }
-            })
-                .catch((err) => {
-                console.error(err);
-            });
-        };
-        if (this.defaultAIFeatures && this.defaultAIFeatures.length >= 1) {
-            const promises = this.defaultAIFeatures.map((feature) => processFeatures(feature));
-            Promise.all(promises)
-                .then(() => {
-                if (Object.keys(features).length > 0) {
-                    ChatConfigurator.enable((dataSource) => new AIEnablerDecorator(dataSource, features));
-                }
-            })
-                .catch((err) => {
-                console.error(err);
-            });
-        }
-        else if (((_a = this.defaultAIFeatures) === null || _a === void 0 ? void 0 : _a.length) === 0) {
-            return;
-        }
-        else {
-            const defaultFeatures = [
-                new AISmartRepliesExtension(),
-                new AIConversationStarterExtension(),
-            ];
-            const promises = defaultFeatures.map((feature) => processFeatures(feature));
-            Promise.all(promises)
-                .then(() => {
-                if (Object.keys(features).length > 0) {
-                    ChatConfigurator.enable((dataSource) => new AIEnablerDecorator(dataSource, features));
-                }
-            })
-                .catch((err) => {
-                console.error(err);
-            });
-        }
-    }
-}
-
 class CometChatUIKit {
     static getDataSource() {
         return ChatConfigurator.getDataSource();
@@ -1457,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) => {
@@ -1477,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) => {
@@ -1495,10 +1535,10 @@ 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);
             });
         }
     }
@@ -1507,6 +1547,7 @@ class CometChatUIKit {
         if (CometChatUIKit.uiKitSettings != null) {
             this.enableCalling();
             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();
@@ -1533,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);
                         });
                     }
@@ -1553,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);
                 });
             });
@@ -1566,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);
                 });
             });
@@ -1579,37 +1628,131 @@ 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);
                 });
-            });
+            });
+        });
+    }
+    // Error handling to give better logs
+    static checkAuthSettings() {
+        if (CometChatUIKit.uiKitSettings == null) {
+            return false;
+        }
+        if (CometChatUIKit.uiKitSettings.appId == null) {
+            return false;
+        }
+        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,
+                });
+            }
         });
     }
-    // Error handling to give better logs
-    static checkAuthSettings() {
-        if (CometChatUIKit.uiKitSettings == null) {
-            return false;
-        }
-        if (CometChatUIKit.uiKitSettings.appId == null) {
-            return false;
-        }
-        return true;
-    }
     // 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);
             });
         });
@@ -1618,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);
             });
         });
@@ -1635,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);
             });
         });
@@ -3998,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 = "";
@@ -4260,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) => {
@@ -4326,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();
@@ -5105,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 = {};
@@ -5289,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);
                         }
@@ -5864,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);
@@ -5918,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) {
@@ -5934,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) {
@@ -6632,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");
@@ -6749,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) {
@@ -7029,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;
@@ -7369,6 +7553,16 @@ 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) {
@@ -7490,6 +7684,16 @@ class CometChatMessageListComponent {
                 }
                 this.requestBuilder.fetchNext().then((messageList) => {
                     var _a, _b, _c;
+                    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) {
@@ -7673,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();
         };
         /**
@@ -7717,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
@@ -7992,6 +8220,7 @@ 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;
@@ -8043,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
@@ -8200,13 +8438,24 @@ 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) {
@@ -8271,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];
         }
@@ -8407,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 = {
@@ -8499,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());
@@ -8592,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();
     }
@@ -8999,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 });
@@ -9089,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) {
@@ -9137,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;
             }
@@ -9222,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();
@@ -9658,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 || showConversationStarter ? '92%' : '100%'}\">\n    <div class=\"cc-message-list__top\" #top>\n    </div>\n    <div class=\"cc-message-list__decorator-message\" *ngIf=\"state == states.loading || state == states.error  || state == states.empty \"\n      [ngStyle]=\"messageContainerStyle()\">\n      <div class=\"cc-message-list__loading-view\" *ngIf=\"state == states.loading \">\n        <cometchat-loader [iconURL]=\"loadingIconURL\" [loaderStyle]=\"loadingStyle()\">\n        </cometchat-loader>\n        <span class=\"cc-message-list__customview--loading\" *ngIf=\"state == states.loading  && loadingStateView\">\n          <ng-container *ngTemplateOutlet=\"loadingStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"cc-message-list__error-view\" *ngIf=\"state == states.error  && !hideError \">\n        <cometchat-label [labelStyle]=\"errorStyle()\" *ngIf=\"state == states.error  && !hideError && !errorStateView\" [text]=\"errorStateText\"\n          >\n        </cometchat-label>\n        <span class=\"cc-message-list__custom-view--error\" *ngIf=\"state == states.error  && !hideError && errorStateView\">\n          <ng-container *ngTemplateOutlet=\"errorStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"cc-message-list__empty-view\" *ngIf=\"state == states.empty\">\n        <!-- <cometchat-label [labelStyle]=\"emptyStyle()\" *ngIf=\"state == states.empty && !emptyStateView\" [text]=\"emptyStateText\"\n          >\n        </cometchat-label> -->\n        <span class=\"cc-message-list__custom-view--empty\" *ngIf=\"state == states.empty && emptyStateView\">\n          <ng-container *ngTemplateOutlet=\"emptyStateView\">\n          </ng-container>\n        </span>\n      </div>\n    </div>\n    <div class=\"cc-message-list__bubble\" *ngFor=\"let message of messagesList; let i = index\">\n      <div class=\"cc-message-list__date-container\" *ngIf=\"(i === 0) && message?.getSentAt()\">\n        <span class=\"cc-message-list__date\" >\n          <cometchat-date [timestamp]=\"message!.getSentAt()\"  [pattern]=\"DateSeparatorPattern\" [dateStyle]=\"dateSeparatorStyle\"\n           >\n          </cometchat-date>\n        </span>\n      </div>\n      <div class=\"cc-message-list__date-container\" *ngIf=\"(i > 0 && isDateDifferent(messagesList[i - 1]?.getSentAt(), messagesList[i]?.getSentAt())) && message?.getSentAt()\">\n        <span class=\"cc-message-list__date\"  >\n          <cometchat-date [timestamp]=\"message?.getSentAt()\" [pattern]=\"DateSeparatorPattern\"   [dateStyle]=\"dateSeparatorStyle\"\n           >\n          </cometchat-date>\n        </span>\n      </div>\n        <div *ngIf=\"getBubbleWrapper(message) \">\n          <ng-container *ngTemplateOutlet=\"getBubbleWrapper(message)\">\n          </ng-container>\n        </div>\n       <div>\n        <cometchat-message-bubble  *ngIf=\"!getBubbleWrapper(message)\" [leadingView]=\" showAvatar ? leadingView : null\" [bottomView]=\"enableReactions ? reactionView : null\"\n        [headerView]=\"getHeaderView(message) || message?.getCategory() != MessageCategory.action && showHeaderTitle(message) ? bubbleHeader : null\" [footerView]=\"footerView\"  [contentView]=\"contentView\" [threadView]=\"threadView\"\n         [id]=\"message?.getId() || message?.getMuid()\" [options]=\"setMessageOptions(message)\"\n          [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"  [alignment]=\"setBubbleAlignment(message)\">\n        <ng-template #contentView>\n          <ng-container *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\" >\n          </ng-container>\n        </ng-template>\n        <ng-template #reactionView>\n          <reactions-view *ngIf=\"hasReaction(message)\" [messageObject]=\"message\" [alignment]=\"setBubbleAlignment(message)\"  [addReactionIconURL]=\"addReactionIconURL\"\n          [loggedInUser]=\"loggedInUser\" [reactionsStyle]=\"reactionsStyle(message)\"></reactions-view>\n          </ng-template>\n         <ng-template #footerView>\n          <div  class=\"cc-message-list__bubble-footer\">\n            <div *ngIf=\"getFooterView(message);else bubbleFooter\">\n              <ng-container *ngTemplateOutlet=\"getFooterView(message);context:{ $implicit: message }\" >\n              </ng-container>\n            </div>\n            <ng-template #bubbleFooter>\n              <div class=\"cc-message-list__bubble-date\" *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && !message.getDeletedAt() && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n                <cometchat-date [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" [pattern]=\"datePattern\">\n                </cometchat-date>\n               </div>\n                 <div *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() ||this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\" class=\"cc-message-list__receipt\">\n                    <cometchat-receipt [receipt]=\"getMessageReceipt(message)\" [receiptStyle]=\"receiptStyle\" [waitIcon]=\"waitIcon\" [sentIcon]=\"sentIcon\" [deliveredIcon]=\"deliveredIcon\" [readIcon]=\"readIcon\" [errorIcon]=\"errorIcon\"></cometchat-receipt>\n                 </div>\n            </ng-template>\n          </div>\n         </ng-template>\n<ng-template #leadingView>\n  <div  *ngIf=\" message?.getCategory() != MessageCategory.action  && showHeaderTitle(message)\" >\n    <cometchat-avatar [name]=\"message?.getSender()?.getName()\" [avatarStyle]=\"avatarStyle\" [image]=\"message?.getSender()?.getAvatar()\">\n    </cometchat-avatar>\n  </div>\n</ng-template>\n<ng-template #bubbleHeader>\n  <div *ngIf=\"getHeaderView(message);else defaultHeader\">\n    <ng-container *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\" >\n    </ng-container>\n  </div>\n<ng-template #defaultHeader>\n  <div  class=\"cc-message-list__bubble-header\" *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n    <cometchat-label [text]=\"message?.getSender()?.getName()\" [labelStyle]=\"labelStyle\"></cometchat-label>\n    <cometchat-date [pattern]=\"datePattern\" [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n   </div>\n</ng-template>\n</ng-template>\n<ng-template #threadView>\n  <div class=\"cc-message-list__threadreplies\" *ngIf=\"message?.getReplyCount() && !message.getDeletedAt()\" >\n    <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n    <cometchat-button [text]=\"getThreadCount(message)\" [buttonStyle]=\"getThreadViewStyle(message)\" [iconURL]=\"threadOpenIcon\" (cc-button-clicked)=\"openThreadView(message)\">\n    </cometchat-button>\n  </div>\n</ng-template>\n      </cometchat-message-bubble>\n       </div>\n    </div>\n    <div class=\"cc-message-list__bottom\" #bottom>\n    </div>\n\n  </div>\n  <div class=\"cc-message-list__message-indicator\" *ngIf=\"UnreadCount && UnreadCount.length > 0 && !isOnBottom\" [ngStyle]=\"{bottom: showSmartReply || footerView || showConversationStarter  ? '20%' : '13%'}\">\n    <cometchat-button [text]=\"newMessageCount\" [buttonStyle]=\"unreadMessagesStyle\" (cc-button-clicked)=\"scrollToBottom()\"></cometchat-button>\n  </div>\n  <div class=\"cc-message-list__footer-view\" [ngStyle]=\"{height: showSmartReply || showConversationStarter ? '8%' : 'auto'}\">\n\n    <div *ngIf=\"footerView;else footer\">\n      <ng-container *ngTemplateOutlet=\"footerView\">\n      </ng-container>\n    </div>\n    <ng-template #footer>\n      <div class=\"cc-message-list__smart-replies\" *ngIf=\"!showConversationStarter && showSmartReply && getReplies()\">\n        <smart-replies [smartReplyStyle]=\"smartReplyStyle\" [replies]=\"getReplies()\" (cc-reply-clicked)=\"sendReply($event)\" (cc-close-clicked)=\"closeSmartReply()\">\n        </smart-replies>\n      </div>\n      <div class=\"cc-message-list__conversation-starters\" *ngIf=\"enableConversationStarter && showConversationStarter\">\n        <div class=\"cc-message-list__footer__decorator-message\" *ngIf=\"conversationStarterState == states.loading || conversationStarterState == states.error  || conversationStarterState == states.empty \"\n        >\n        <div class=\"cc-message-list__footer-view-decorator\" *ngIf=\"conversationStarterState == states.loading\">\n          <cometchat-loader iconURL=\"assets/Spinner.svg\" [loaderStyle]=\"conversationStarterLoader()\">\n          </cometchat-loader>\n          <cometchat-label [labelStyle]=\"conversationStarterStateStyle()\"  [text]=\"starterLoadingStateText\"\n          >\n        </cometchat-label>\n        \n        </div>\n        <div class=\"cc-message-list__footer-view-decorator\" *ngIf=\"conversationStarterState == states.error  && !hideError \">\n          <cometchat-loader iconURL=\"assets/ai-error.svg\" [loaderStyle]=\"conversationStarterLoader()\">\n          </cometchat-loader>\n          <cometchat-label [labelStyle]=\"conversationStarterStateStyle()\"  [text]=\"starterErrorStateText\"\n            >\n          </cometchat-label>\n        \n        </div>\n        <div class=\"cc-message-list__footer-view-decorator\" *ngIf=\"conversationStarterState == states.empty\">\n          <cometchat-loader iconURL=\"assets/ai-empty.svg\" [loaderStyle]=\"conversationStarterLoader()\">\n          </cometchat-loader>\n          <cometchat-label [labelStyle]=\"conversationStarterStateStyle()\"  [text]=\"starterEmptyStateText\"\n            >\n          </cometchat-label>\n  \n        </div>\n      </div>\n        <smart-replies *ngIf=\"conversationStarterState == states.loaded && !parentMessageId\" [smartReplyStyle]=\"conversationStarterStyle\" [replies]=\"conversationStarterReplies\"  (cc-reply-clicked)=\"sendConversationStarter($event)\"  [closeIconURL]=\"''\">\n        </smart-replies>\n      </div>\n    </ng-template>\n        </div>\n\n</div>\n<!-- default bubbles -->\n<ng-template #textBubble let-message>\n  <cometchat-text-bubble *ngIf=\"message?.type == MessageTypesConstant.groupMember\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"message?.message\"></cometchat-text-bubble>\n  <cometchat-text-bubble *ngIf=\"message?.getDeletedAt()\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"localize('MESSAGE_IS_DELETED')\"></cometchat-text-bubble>\n<cometchat-text-bubble *ngIf=\"!isTranslated(message) && !getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"getTextMessage(message)\"></cometchat-text-bubble>\n<link-preview [linkPreviewStyle]=\"linkPreviewStyle\" (cc-link-clicked)=\"openLinkURL($event)\" *ngIf=\"!message?.getDeletedAt() && getLinkPreview(message) && enableLinkPreview\" [title]=\"getLinkPreviewDetails('title',message)\" [description]=\"getLinkPreviewDetails('description',message)\" [URL]=\"getLinkPreviewDetails('url',message)\" [image]=\"getLinkPreviewDetails('image',message)\" [favIconURL]=\"getLinkPreviewDetails('favicon',message)\">\n  <cometchat-text-bubble\n  *ngIf=\"!isTranslated(message) && getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n  [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"getTextMessage(message)\"></cometchat-text-bubble>\n</link-preview>\n<message-translation-bubble [alignment]=\"getBubbleAlignment(message)\" *ngIf=\"isTranslated(message)\"  [messageTranslationStyle]=\"setTranslationStyle(message)\" [translatedText]=\"isTranslated(message)\">\n  <cometchat-text-bubble *ngIf=\" !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"message?.text\"></cometchat-text-bubble>\n\n</message-translation-bubble>\n</ng-template>\n<ng-template #fileBubble let-message>\n\n  <cometchat-file-bubble [fileStyle]=\"setFileBubbleStyle(message)\" [downloadIconURL]=\"downloadIconURL\" [subtitle]=\"localize('SHARED_FILE')\" [title]=\"message?.data?.attachments ? message?.data?.attachments[0]?.name: ''\" [fileURL]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\"></cometchat-file-bubble>\n</ng-template>\n<ng-template #audioBubble let-message>\n  <cometchat-icon-button [disabled]=\"true\" *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.audio\" [iconURL]=\"getCallTypeIcon(message)\" [buttonStyle]=\"callStatusStyle(message)\" [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n  <cometchat-audio-bubble *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\"  [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\" > </cometchat-audio-bubble>\n</ng-template>\n<ng-template #videoBubble let-message>\n  <cometchat-icon-button [disabled]=\"true\" *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.video\" [iconURL]=\"getCallTypeIcon(message)\" [buttonStyle]=\"callStatusStyle(message)\" [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n\n  <cometchat-video-bubble *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\" [videoStyle]=\"videoBubbleStyle\" [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\" [poster]=\" getImageThumbnail(message)\"></cometchat-video-bubble>\n</ng-template>\n<ng-template #imageBubble let-message>\n <image-moderation  (cc-show-dialog)=\"openWarningDialog($event)\" *ngIf=\"!message.getDeletedAt() && enableImageModeration\" [message]=\"message\" [imageModerationStyle]=\"imageModerationStyle\">\n  <cometchat-image-bubble (cc-image-clicked)=\"openImageInFullScreen(message)\" [imageStyle]=\"imageBubbleStyle\"   [src]=\" getImageThumbnail(message)\" [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n </image-moderation>\n  <cometchat-image-bubble [imageStyle]=\"imageBubbleStyle\" (cc-image-clicked)=\"openImageInFullScreen(message)\" *ngIf=\"!message.getDeletedAt() && !enableImageModeration\"  [src]=\" getImageThumbnail(message)\" [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n</ng-template>\n<ng-template #customTextBubble>\n</ng-template>\n<ng-template #stickerBubble  let-message>\n  <cometchat-image-bubble [src]=\"getSticker(message)\" [imageStyle]=\"imageBubbleStyle\" ></cometchat-image-bubble>\n\n</ng-template>\n<ng-template #whiteboardBubble  let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\" [iconAlignment]=\"documentBubbleAlignment\" [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\" [ccClicked]=\"launchCollaborativeWhiteboardDocument\" [iconURL]=\"whiteboardIconURL\" [title]=\"whiteboardTitle\" [buttonText]=\"whiteboardButtonText\" [subtitle]=\"whiteboardSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #documentBubble  let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\" [iconAlignment]=\"documentBubbleAlignment\" [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\" [ccClicked]=\"launchCollaborativeWhiteboardDocument\" [iconURL]=\"documentIconURL\" [title]=\"documentTitle\" [buttonText]=\"documentButtonText\" [subtitle]=\"documentSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #directCalling  let-message>\n  <cometchat-document-bubble  [hideSeparator]=\"true\" [iconAlignment]=\"callBubbleAlignment\" [documentStyle]=\"getCallBubbleStyle(message)\" [URL]=\"getSessionId(message)\" [ccClicked]=\"startDirectCall\" [iconURL]=\"directCallIconURL\" [title]=\"getCallBubbleTitle(message)\" [buttonText]=\"joinCallButtonText\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #pollBubble  let-message>\n  <polls-bubble [pollStyle]=\"pollBubbleStyle\"  [pollQuestion]=\"getPollBubbleData(message,'question')\" [pollId]=\"getPollBubbleData(message,'id')\"\n   [loggedInUser]=\"loggedInUser\" [senderUid]=\"getPollBubbleData(message)\" [metadata]=\"message?.metadata\"></polls-bubble>\n\n</ng-template>\n\n<!-- thread bubble view -->\n<ng-template #threadMessageBubble let-message>\n  <div *ngIf=\"getBubbleWrapper(message)\">\n    <ng-container *ngTemplateOutlet=\"getBubbleWrapper(message)\">\n    </ng-container>\n  </div>\n  <cometchat-message-bubble  *ngIf=\"!getBubbleWrapper(message)\" [bottomView]=\"enableReactions ? reactionView : null\" [leadingView]=\" showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\" [footerView]=\"footerView\"\n  [contentView]=\"contentView\"  [id]=\"message?.getId() || message?.getMuid()\"  [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"  [alignment]=\"threadedAlignment\">\n    <ng-template #contentView>\n      <ng-container *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\" >\n      </ng-container>\n    </ng-template>\n    <ng-template #reactionView>\n      <reactions-view *ngIf=\"hasReaction(message)\" [messageObject]=\"message\" [alignment]=\"setBubbleAlignment(message)\"\n      \n      [loggedInUser]=\"loggedInUser\" [reactionsStyle]=\"reactionsStyle(message)\" [addReactionIconURL]=\"addReactionIconURL\"></reactions-view>\n      </ng-template>\n     <ng-template #footerView>\n      <div  class=\"cc-message-list__bubble-footer\">\n        <div *ngIf=\"getFooterView(message);else bubbleFooter\">\n          <ng-container *ngTemplateOutlet=\"getFooterView(message);context:{ $implicit: message }\" >\n          </ng-container>\n        </div>\n        <ng-template #bubbleFooter>\n          <div class=\"cc-message-list__bubble-date\" *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n            <cometchat-date [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" [pattern]=\"datePattern\">\n            </cometchat-date>\n           </div>\n             <div *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() ||this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\" class=\"cc-message-list__receipt\">\n                <cometchat-receipt [receipt]=\"getMessageReceipt(message)\" [receiptStyle]=\"receiptStyle\" [waitIcon]=\"waitIcon\" [sentIcon]=\"sentIcon\" [deliveredIcon]=\"\" [readIcon]=\"deliveredIcon\" [errorIcon]=\"errorIcon\"></cometchat-receipt>\n             </div>\n        </ng-template>\n      </div>\n     </ng-template>\n<ng-template #leadingView>\n<div  *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\" >\n<cometchat-avatar [name]=\"message?.getSender()?.getName()\" [avatarStyle]=\"avatarStyle\" [image]=\"message?.getSender()?.getAvatar()\">\n</cometchat-avatar>\n</div>\n</ng-template>\n<ng-template #bubbleHeader>\n<div *ngIf=\"getHeaderView(message);else defaultHeader\">\n<ng-container *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\" >\n</ng-container>\n</div>\n<ng-template #defaultHeader>\n<div  class=\"cc-message-list__bubble-header\" *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n<cometchat-label [text]=\"message?.getSender()?.getName()\" [labelStyle]=\"labelStyle\"></cometchat-label>\n<cometchat-date [pattern]=\"datePattern\" [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n</div>\n</ng-template>\n</ng-template>\n  </cometchat-message-bubble>\n\n</ng-template>\n\n\n<!--  -->\n<ng-template #bubbleView></ng-template>\n<cometchat-popover [popoverStyle]=\"popoverStyle\"  #popoverRef [placement]=\"keyboardAlignment\">\n<cometchat-emoji-keyboard (cc-emoji-clicked)=\"addReaction($event)\"  slot=\"content\"></cometchat-emoji-keyboard>\n</cometchat-popover>\n<cometchat-backdrop *ngIf=\"openConfirmDialog\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-confirm-dialog [title]=\"''\" [messageText]=\"warningText\" (cc-confirm-clicked)=\"onConfirmClick()\" [cancelButtonText]=\"cancelText\" [confirmButtonText]=\"confirmText\" (cc-cancel-clicked)=\"onCancelClick()\" [confirmDialogStyle]=\"confirmDialogStyle\">\n\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-full-screen-viewer (cc-close-clicked)=\"closeImageInFullScreen()\" *ngIf=\"openFullscreenView\" [URL]=\"imageurlToOpen\" [closeIconURL]=\"closeIconURL\" [fullScreenViewerStyle]=\"fullScreenViewerStyle\">\n\n</cometchat-full-screen-viewer>\n\n<!-- ongoing callscreen for direct call -->\n<cometchat-ongoing-call *ngIf=\"showOngoingCall\" [callSettingsBuilder]=\"getCallBuilder()\" [ongoingCallStyle]=\"ongoingCallStyle\" [sessionID]=\"sessionId\"></cometchat-ongoing-call>\n<!-- message information view -->\n<!-- thread bubble view -->\n<ng-template #messageinfoBubble let-message>\n  <div *ngIf=\"getBubbleWrapper(message)\">\n    <ng-container *ngTemplateOutlet=\"getBubbleWrapper(message)\">\n    </ng-container>\n  </div>\n  <cometchat-message-bubble  *ngIf=\"!getBubbleWrapper(message)\" [bottomView]=\"enableReactions && hasReaction(message) ? reactionView : null\" [leadingView]=\" showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\"\n  [contentView]=\"contentView\"  [id]=\"message?.getId() || message?.getMuid()\"  [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"  [alignment]=\"messageInfoAlignment\">\n    <ng-template #contentView>\n      <ng-container *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\" >\n      </ng-container>\n    </ng-template>\n    <ng-template #reactionView>\n      <reactions-view *ngIf=\"hasReaction(message)\" [messageObject]=\"message\" [alignment]=\"setBubbleAlignment(message)\"  [addReactionIconURL]=\"addReactionIconURL\"\n      [loggedInUser]=\"loggedInUser\" [reactionsStyle]=\"reactionsStyle(message)\"></reactions-view>\n      </ng-template>\n<ng-template #leadingView>\n<div  *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\" >\n<cometchat-avatar [name]=\"message?.getSender()?.getName()\" [avatarStyle]=\"avatarStyle\" [image]=\"message?.getSender()?.getAvatar()\">\n</cometchat-avatar>\n</div>\n</ng-template>\n<ng-template #bubbleHeader>\n<div *ngIf=\"getHeaderView(message);else defaultHeader\">\n<ng-container *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\" >\n</ng-container>\n</div>\n<ng-template #defaultHeader>\n<div  class=\"cc-message-list__bubble-header\" *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n<cometchat-label [text]=\"message?.getSender()?.getName()\" [labelStyle]=\"labelStyle\"></cometchat-label>\n<cometchat-date [pattern]=\"datePattern\" [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n</div>\n</ng-template>\n</ng-template>\n  </cometchat-message-bubble>\n\n</ng-template>\n<cometchat-backdrop *ngIf=\"openMessageInfoPage\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-message-information [closeIconURL]=\"messageInformationConfiguration.closeIconURL\"  [loadingStateView]=\"messageInformationConfiguration.loadingStateView\" [errorStateView]=\"messageInformationConfiguration.errorStateView\" [listItemStyle]=\"messageInformationConfiguration.listItemStyle\" [emptyStateView]=\"messageInformationConfiguration.emptyStateView\" [loadingIconURL]=\"messageInformationConfiguration.loadingIconURL\" [readIcon]=\"messageInformationConfiguration.readIcon\" [deliveredIcon]=\"messageInformationConfiguration.deliveredIcon\" [onError]=\"messageInformationConfiguration.onError\" [SubtitleView]=\"messageInformationConfiguration.subtitleView\" [receiptDatePattern]=\"messageInformationConfiguration.receiptDatePattern\" [listItemView]=\"messageInformationConfiguration.listItemView \" [messageInformationStyle]=\"messageInformationConfiguration.messageInformationStyle\" [onClose]=\"messageInformationConfiguration.onClose ??  closeMessageInfoPage\" [bubbleView]=\"messageInformationConfiguration.bubbleView ?? messageinfoBubble\" [message]=\"messageInfoObject\">\n\n  </cometchat-message-information>\n</cometchat-backdrop>\n", styles: [".cc-message-list{height:100%;width:100%;overflow-y:auto;overflow-x:hidden;position:relative}.cc-message-list__wrapper{height:100%;width:100%;overflow-y:hidden}.cc-message-list__bubble-footer{display:flex;justify-content:center;align-items:center}.cc-message-list__date-container{text-align:center;margin:5px 0}.cc-message-list__smart-replies,.cc-message-list__conversation-starters{height:-moz-fit-content;height:fit-content;width:100%;position:absolute;bottom:0;z-index:1}.cc-message-list__date{border-radius:10px;display:flex;justify-content:center}.cc-message-list__threadreplies{min-width:130px;width:100%}.cc-message-list__message-indicator{height:25px;display:flex;align-items:center;justify-content:center;width:100%;bottom:10%;position:absolute}.cc-message-list__footer-view{z-index:1;position:relative;width:100%}.cc-message-list__decorator-message{margin:0;line-height:30px;word-wrap:break-word;padding:0 8px;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;height:100%}.cc-message-list__footer__decorator-message{margin:0;line-height:30px;word-wrap:break-word;padding:0 8px 0 16px;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:flex-start;height:100%}.cc-message-list::-webkit-scrollbar{background:transparent;width:8px}.cc-message-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.cc-message-list__footer-view-decorator{display:flex;flex-direction:row;column-gap:8px}\n"], components: [{ type: CometChatMessageBubbleComponent, selector: "cometchat-message-bubble", inputs: ["messageBubbleStyle", "alignment", "options", "id", "leadingView", "headerView", "replyView", "contentView", "threadView", "footerView", "bottomView", "moreIconURL", "topMenuSize"] }, { type: CometChatOngoingCallComponent, selector: "cometchat-ongoing-call", inputs: ["ongoingCallStyle", "resizeIconHoverText", "sessionID", "minimizeIconURL", "maximizeIconURL", "callSettingsBuilder", "callWorkflow", "onError"] }, { type: CometChatMessageInformationComponent, selector: "cometchat-message-information", inputs: ["closeIconURL", "message", "title", "template", "bubbleView", "subtitleView", "listItemView", "receiptDatePattern", "onError", "messageInformationStyle", "readIcon", "deliveredIcon", "onClose", "listItemStyle", "emptyStateText", "errorStateText", "emptyStateView", "loadingIconURL", "loadingStateView", "errorStateView"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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 || showConversationStarter ? '92%' : '100%'}\">\n    <div class=\"cc-message-list__top\" #top>\n    </div>\n    <div class=\"cc-message-list__decorator-message\" *ngIf=\"state == states.loading || state == states.error  || state == states.empty \"\n      [ngStyle]=\"messageContainerStyle()\">\n      <div class=\"cc-message-list__loading-view\" *ngIf=\"state == states.loading \">\n        <cometchat-loader [iconURL]=\"loadingIconURL\" [loaderStyle]=\"loadingStyle()\">\n        </cometchat-loader>\n        <span class=\"cc-message-list__customview--loading\" *ngIf=\"state == states.loading  && loadingStateView\">\n          <ng-container *ngTemplateOutlet=\"loadingStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"cc-message-list__error-view\" *ngIf=\"state == states.error  && !hideError \">\n        <cometchat-label [labelStyle]=\"errorStyle()\" *ngIf=\"state == states.error  && !hideError && !errorStateView\" [text]=\"errorStateText\"\n          >\n        </cometchat-label>\n        <span class=\"cc-message-list__custom-view--error\" *ngIf=\"state == states.error  && !hideError && errorStateView\">\n          <ng-container *ngTemplateOutlet=\"errorStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"cc-message-list__empty-view\" *ngIf=\"state == states.empty\">\n        <!-- <cometchat-label [labelStyle]=\"emptyStyle()\" *ngIf=\"state == states.empty && !emptyStateView\" [text]=\"emptyStateText\"\n          >\n        </cometchat-label> -->\n        <span class=\"cc-message-list__custom-view--empty\" *ngIf=\"state == states.empty && emptyStateView\">\n          <ng-container *ngTemplateOutlet=\"emptyStateView\">\n          </ng-container>\n        </span>\n      </div>\n    </div>\n    <div class=\"cc-message-list__bubble\" *ngFor=\"let message of messagesList; let i = index\">\n      <div class=\"cc-message-list__date-container\" *ngIf=\"(i === 0) && message?.getSentAt()\">\n        <span class=\"cc-message-list__date\" >\n          <cometchat-date [timestamp]=\"message!.getSentAt()\"  [pattern]=\"DateSeparatorPattern\" [dateStyle]=\"dateSeparatorStyle\"\n           >\n          </cometchat-date>\n        </span>\n      </div>\n      <div class=\"cc-message-list__date-container\" *ngIf=\"(i > 0 && isDateDifferent(messagesList[i - 1]?.getSentAt(), messagesList[i]?.getSentAt())) && message?.getSentAt()\">\n        <span class=\"cc-message-list__date\"  >\n          <cometchat-date [timestamp]=\"message?.getSentAt()\" [pattern]=\"DateSeparatorPattern\"   [dateStyle]=\"dateSeparatorStyle\"\n           >\n          </cometchat-date>\n        </span>\n      </div>\n        <div *ngIf=\"getBubbleWrapper(message) \">\n          <ng-container *ngTemplateOutlet=\"getBubbleWrapper(message)\">\n          </ng-container>\n        </div>\n       <div>\n        <cometchat-message-bubble  *ngIf=\"!getBubbleWrapper(message)\" [leadingView]=\" showAvatar ? leadingView : null\" [bottomView]=\"enableReactions ? reactionView : null\"\n        [headerView]=\"getHeaderView(message) || message?.getCategory() != MessageCategory.action && showHeaderTitle(message) ? bubbleHeader : null\" [footerView]=\"footerView\"  [contentView]=\"contentView\" [threadView]=\"threadView\"\n         [id]=\"message?.getId() || message?.getMuid()\" [options]=\"setMessageOptions(message)\"\n          [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"  [alignment]=\"setBubbleAlignment(message)\">\n        <ng-template #contentView>\n          <ng-container *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\" >\n          </ng-container>\n        </ng-template>\n        <ng-template #reactionView>\n          <reactions-view *ngIf=\"hasReaction(message)\" [messageObject]=\"message\" [alignment]=\"setBubbleAlignment(message)\"  [addReactionIconURL]=\"addReactionIconURL\"\n          [loggedInUser]=\"loggedInUser\" [reactionsStyle]=\"reactionsStyle(message)\"></reactions-view>\n          </ng-template>\n         <ng-template #footerView>\n          <div  class=\"cc-message-list__bubble-footer\">\n            <div *ngIf=\"getFooterView(message);else bubbleFooter\">\n              <ng-container *ngTemplateOutlet=\"getFooterView(message);context:{ $implicit: message }\" >\n              </ng-container>\n            </div>\n            <ng-template #bubbleFooter>\n              <div class=\"cc-message-list__bubble-date\" *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && !message.getDeletedAt() && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n                <cometchat-date [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" [pattern]=\"datePattern\">\n                </cometchat-date>\n               </div>\n                 <div *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() ||this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\" class=\"cc-message-list__receipt\">\n                    <cometchat-receipt [receipt]=\"getMessageReceipt(message)\" [receiptStyle]=\"receiptStyle\" [waitIcon]=\"waitIcon\" [sentIcon]=\"sentIcon\" [deliveredIcon]=\"deliveredIcon\" [readIcon]=\"readIcon\" [errorIcon]=\"errorIcon\"></cometchat-receipt>\n                 </div>\n            </ng-template>\n          </div>\n         </ng-template>\n<ng-template #leadingView>\n  <div  *ngIf=\" message?.getCategory() != MessageCategory.action  && showHeaderTitle(message)\" >\n    <cometchat-avatar [name]=\"message?.getSender()?.getName()\" [avatarStyle]=\"avatarStyle\" [image]=\"message?.getSender()?.getAvatar()\">\n    </cometchat-avatar>\n  </div>\n</ng-template>\n<ng-template #bubbleHeader>\n  <div *ngIf=\"getHeaderView(message);else defaultHeader\">\n    <ng-container *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\" >\n    </ng-container>\n  </div>\n<ng-template #defaultHeader>\n  <div  class=\"cc-message-list__bubble-header\" *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n    <cometchat-label [text]=\"message?.getSender()?.getName()\" [labelStyle]=\"labelStyle\"></cometchat-label>\n    <cometchat-date [pattern]=\"datePattern\" [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n   </div>\n</ng-template>\n</ng-template>\n<ng-template #threadView>\n  <div class=\"cc-message-list__threadreplies\" *ngIf=\"message?.getReplyCount() && !message.getDeletedAt()\" >\n    <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n    <cometchat-button [text]=\"getThreadCount(message)\" [buttonStyle]=\"getThreadViewStyle(message)\" [iconURL]=\"threadOpenIcon\" (cc-button-clicked)=\"openThreadView(message)\">\n    </cometchat-button>\n  </div>\n</ng-template>\n      </cometchat-message-bubble>\n       </div>\n    </div>\n    <div class=\"cc-message-list__bottom\" #bottom>\n    </div>\n\n  </div>\n  <div class=\"cc-message-list__message-indicator\" *ngIf=\"UnreadCount && UnreadCount.length > 0 && !isOnBottom\" [ngStyle]=\"{bottom: showSmartReply || footerView || showConversationStarter  ? '20%' : '13%'}\">\n    <cometchat-button [text]=\"newMessageCount\" [buttonStyle]=\"unreadMessagesStyle\" (cc-button-clicked)=\"scrollToBottom()\"></cometchat-button>\n  </div>\n  <div class=\"cc-message-list__footer-view\" [ngStyle]=\"{height: showSmartReply || showConversationStarter ? '8%' : 'auto'}\">\n\n    <div *ngIf=\"footerView;else footer\">\n      <ng-container *ngTemplateOutlet=\"footerView\">\n      </ng-container>\n    </div>\n    <ng-template #footer>\n      <div class=\"cc-message-list__smart-replies\" *ngIf=\"!showConversationStarter && showSmartReply && getReplies()\">\n        <smart-replies [smartReplyStyle]=\"smartReplyStyle\" [replies]=\"getReplies()\" (cc-reply-clicked)=\"sendReply($event)\" (cc-close-clicked)=\"closeSmartReply()\">\n        </smart-replies>\n      </div>\n      <div class=\"cc-message-list__conversation-starters\" *ngIf=\"enableConversationStarter && showConversationStarter\">\n        <div class=\"cc-message-list__footer__decorator-message\" *ngIf=\"conversationStarterState == states.loading || conversationStarterState == states.error  || conversationStarterState == states.empty \"\n        >\n        <div class=\"cc-message-list__footer-view-decorator\" *ngIf=\"conversationStarterState == states.loading\">\n          <cometchat-loader iconURL=\"assets/Spinner.svg\" [loaderStyle]=\"conversationStarterLoader()\">\n          </cometchat-loader>\n          <cometchat-label [labelStyle]=\"conversationStarterStateStyle()\"  [text]=\"starterLoadingStateText\"\n          >\n        </cometchat-label>\n        \n        </div>\n        <div class=\"cc-message-list__footer-view-decorator\" *ngIf=\"conversationStarterState == states.error  && !hideError \">\n          <cometchat-loader iconURL=\"assets/ai-error.svg\" [loaderStyle]=\"conversationStarterLoader()\">\n          </cometchat-loader>\n          <cometchat-label [labelStyle]=\"conversationStarterStateStyle()\"  [text]=\"starterErrorStateText\"\n            >\n          </cometchat-label>\n        \n        </div>\n        <div class=\"cc-message-list__footer-view-decorator\" *ngIf=\"conversationStarterState == states.empty\">\n          <cometchat-loader iconURL=\"assets/ai-empty.svg\" [loaderStyle]=\"conversationStarterLoader()\">\n          </cometchat-loader>\n          <cometchat-label [labelStyle]=\"conversationStarterStateStyle()\"  [text]=\"starterEmptyStateText\"\n            >\n          </cometchat-label>\n  \n        </div>\n      </div>\n        <smart-replies *ngIf=\"conversationStarterState == states.loaded && !parentMessageId\" [smartReplyStyle]=\"conversationStarterStyle\" [replies]=\"conversationStarterReplies\"  (cc-reply-clicked)=\"sendConversationStarter($event)\"  [closeIconURL]=\"''\">\n        </smart-replies>\n      </div>\n    </ng-template>\n        </div>\n\n</div>\n<!-- default bubbles -->\n<ng-template #textBubble let-message>\n  <cometchat-text-bubble *ngIf=\"message?.type == MessageTypesConstant.groupMember\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"message?.message\"></cometchat-text-bubble>\n  <cometchat-text-bubble *ngIf=\"message?.getDeletedAt()\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"localize('MESSAGE_IS_DELETED')\"></cometchat-text-bubble>\n<cometchat-text-bubble *ngIf=\"!isTranslated(message) && !getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"getTextMessage(message)\"></cometchat-text-bubble>\n<link-preview [linkPreviewStyle]=\"linkPreviewStyle\" (cc-link-clicked)=\"openLinkURL($event)\" *ngIf=\"!message?.getDeletedAt() && getLinkPreview(message) && enableLinkPreview\" [title]=\"getLinkPreviewDetails('title',message)\" [description]=\"getLinkPreviewDetails('description',message)\" [URL]=\"getLinkPreviewDetails('url',message)\" [image]=\"getLinkPreviewDetails('image',message)\" [favIconURL]=\"getLinkPreviewDetails('favicon',message)\">\n  <cometchat-text-bubble\n  *ngIf=\"!isTranslated(message) && getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n  [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"getTextMessage(message)\"></cometchat-text-bubble>\n</link-preview>\n<message-translation-bubble [alignment]=\"getBubbleAlignment(message)\" *ngIf=\"isTranslated(message)\"  [messageTranslationStyle]=\"setTranslationStyle(message)\" [translatedText]=\"isTranslated(message)\">\n  <cometchat-text-bubble *ngIf=\" !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"message?.text\"></cometchat-text-bubble>\n\n</message-translation-bubble>\n</ng-template>\n<ng-template #fileBubble let-message>\n\n  <cometchat-file-bubble [fileStyle]=\"setFileBubbleStyle(message)\" [downloadIconURL]=\"downloadIconURL\" [subtitle]=\"localize('SHARED_FILE')\" [title]=\"message?.data?.attachments ? message?.data?.attachments[0]?.name: ''\" [fileURL]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\"></cometchat-file-bubble>\n</ng-template>\n<ng-template #audioBubble let-message>\n  <cometchat-icon-button [disabled]=\"true\" *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.audio\" [iconURL]=\"getCallTypeIcon(message)\" [buttonStyle]=\"callStatusStyle(message)\" [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n  <cometchat-audio-bubble *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\"  [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\" > </cometchat-audio-bubble>\n</ng-template>\n<ng-template #videoBubble let-message>\n  <cometchat-icon-button [disabled]=\"true\" *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.video\" [iconURL]=\"getCallTypeIcon(message)\" [buttonStyle]=\"callStatusStyle(message)\" [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n\n  <cometchat-video-bubble *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\" [videoStyle]=\"videoBubbleStyle\" [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\" [poster]=\" getImageThumbnail(message)\"></cometchat-video-bubble>\n</ng-template>\n<ng-template #imageBubble let-message>\n <image-moderation  (cc-show-dialog)=\"openWarningDialog($event)\" *ngIf=\"!message.getDeletedAt() && enableImageModeration\" [message]=\"message\" [imageModerationStyle]=\"imageModerationStyle\">\n  <cometchat-image-bubble (cc-image-clicked)=\"openImageInFullScreen(message)\" [imageStyle]=\"imageBubbleStyle\"   [src]=\" getImageThumbnail(message)\" [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n </image-moderation>\n  <cometchat-image-bubble [imageStyle]=\"imageBubbleStyle\" (cc-image-clicked)=\"openImageInFullScreen(message)\" *ngIf=\"!message.getDeletedAt() && !enableImageModeration\"  [src]=\" getImageThumbnail(message)\" [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n</ng-template>\n<ng-template #customTextBubble>\n</ng-template>\n<ng-template #stickerBubble  let-message>\n  <cometchat-image-bubble [src]=\"getSticker(message)\" [imageStyle]=\"imageBubbleStyle\" ></cometchat-image-bubble>\n\n</ng-template>\n<ng-template #whiteboardBubble  let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\" [iconAlignment]=\"documentBubbleAlignment\" [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\" [ccClicked]=\"launchCollaborativeWhiteboardDocument\" [iconURL]=\"whiteboardIconURL\" [title]=\"whiteboardTitle\" [buttonText]=\"whiteboardButtonText\" [subtitle]=\"whiteboardSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #documentBubble  let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\" [iconAlignment]=\"documentBubbleAlignment\" [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\" [ccClicked]=\"launchCollaborativeWhiteboardDocument\" [iconURL]=\"documentIconURL\" [title]=\"documentTitle\" [buttonText]=\"documentButtonText\" [subtitle]=\"documentSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #directCalling  let-message>\n  <cometchat-document-bubble  [hideSeparator]=\"true\" [iconAlignment]=\"callBubbleAlignment\" [documentStyle]=\"getCallBubbleStyle(message)\" [URL]=\"getSessionId(message)\" [ccClicked]=\"startDirectCall\" [iconURL]=\"directCallIconURL\" [title]=\"getCallBubbleTitle(message)\" [buttonText]=\"joinCallButtonText\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #pollBubble  let-message>\n  <polls-bubble [pollStyle]=\"pollBubbleStyle\"  [pollQuestion]=\"getPollBubbleData(message,'question')\" [pollId]=\"getPollBubbleData(message,'id')\"\n   [loggedInUser]=\"loggedInUser\" [senderUid]=\"getPollBubbleData(message)\" [metadata]=\"message?.metadata\"></polls-bubble>\n\n</ng-template>\n\n<!-- thread bubble view -->\n<ng-template #threadMessageBubble let-message>\n  <div *ngIf=\"getBubbleWrapper(message)\">\n    <ng-container *ngTemplateOutlet=\"getBubbleWrapper(message)\">\n    </ng-container>\n  </div>\n  <cometchat-message-bubble  *ngIf=\"!getBubbleWrapper(message)\" [bottomView]=\"enableReactions ? reactionView : null\" [leadingView]=\" showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\" [footerView]=\"footerView\"\n  [contentView]=\"contentView\"  [id]=\"message?.getId() || message?.getMuid()\"  [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"  [alignment]=\"threadedAlignment\">\n    <ng-template #contentView>\n      <ng-container *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\" >\n      </ng-container>\n    </ng-template>\n    <ng-template #reactionView>\n      <reactions-view *ngIf=\"hasReaction(message)\" [messageObject]=\"message\" [alignment]=\"setBubbleAlignment(message)\"\n      \n      [loggedInUser]=\"loggedInUser\" [reactionsStyle]=\"reactionsStyle(message)\" [addReactionIconURL]=\"addReactionIconURL\"></reactions-view>\n      </ng-template>\n     <ng-template #footerView>\n      <div  class=\"cc-message-list__bubble-footer\">\n        <div *ngIf=\"getFooterView(message);else bubbleFooter\">\n          <ng-container *ngTemplateOutlet=\"getFooterView(message);context:{ $implicit: message }\" >\n          </ng-container>\n        </div>\n        <ng-template #bubbleFooter>\n          <div class=\"cc-message-list__bubble-date\" *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n            <cometchat-date [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" [pattern]=\"datePattern\">\n            </cometchat-date>\n           </div>\n             <div *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() ||this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\" class=\"cc-message-list__receipt\">\n                <cometchat-receipt [receipt]=\"getMessageReceipt(message)\" [receiptStyle]=\"receiptStyle\" [waitIcon]=\"waitIcon\" [sentIcon]=\"sentIcon\" [deliveredIcon]=\"\" [readIcon]=\"deliveredIcon\" [errorIcon]=\"errorIcon\"></cometchat-receipt>\n             </div>\n        </ng-template>\n      </div>\n     </ng-template>\n<ng-template #leadingView>\n<div  *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\" >\n<cometchat-avatar [name]=\"message?.getSender()?.getName()\" [avatarStyle]=\"avatarStyle\" [image]=\"message?.getSender()?.getAvatar()\">\n</cometchat-avatar>\n</div>\n</ng-template>\n<ng-template #bubbleHeader>\n<div *ngIf=\"getHeaderView(message);else defaultHeader\">\n<ng-container *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\" >\n</ng-container>\n</div>\n<ng-template #defaultHeader>\n<div  class=\"cc-message-list__bubble-header\" *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n<cometchat-label [text]=\"message?.getSender()?.getName()\" [labelStyle]=\"labelStyle\"></cometchat-label>\n<cometchat-date [pattern]=\"datePattern\" [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n</div>\n</ng-template>\n</ng-template>\n  </cometchat-message-bubble>\n\n</ng-template>\n\n\n<!--  -->\n<ng-template #bubbleView></ng-template>\n<cometchat-popover [popoverStyle]=\"popoverStyle\"  #popoverRef [placement]=\"keyboardAlignment\">\n<cometchat-emoji-keyboard (cc-emoji-clicked)=\"addReaction($event)\"  slot=\"content\"></cometchat-emoji-keyboard>\n</cometchat-popover>\n<cometchat-backdrop *ngIf=\"openConfirmDialog\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-confirm-dialog [title]=\"''\" [messageText]=\"warningText\" (cc-confirm-clicked)=\"onConfirmClick()\" [cancelButtonText]=\"cancelText\" [confirmButtonText]=\"confirmText\" (cc-cancel-clicked)=\"onCancelClick()\" [confirmDialogStyle]=\"confirmDialogStyle\">\n\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-full-screen-viewer (cc-close-clicked)=\"closeImageInFullScreen()\" *ngIf=\"openFullscreenView\" [URL]=\"imageurlToOpen\" [closeIconURL]=\"closeIconURL\" [fullScreenViewerStyle]=\"fullScreenViewerStyle\">\n\n</cometchat-full-screen-viewer>\n\n<!-- ongoing callscreen for direct call -->\n<cometchat-ongoing-call *ngIf=\"showOngoingCall\" [callSettingsBuilder]=\"getCallBuilder()\" [ongoingCallStyle]=\"ongoingCallStyle\" [sessionID]=\"sessionId\"></cometchat-ongoing-call>\n<!-- message information view -->\n<!-- thread bubble view -->\n<ng-template #messageinfoBubble let-message>\n  <div *ngIf=\"getBubbleWrapper(message)\">\n    <ng-container *ngTemplateOutlet=\"getBubbleWrapper(message)\">\n    </ng-container>\n  </div>\n  <cometchat-message-bubble  *ngIf=\"!getBubbleWrapper(message)\" [bottomView]=\"enableReactions && hasReaction(message) ? reactionView : null\" [leadingView]=\" showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\"\n  [contentView]=\"contentView\"  [id]=\"message?.getId() || message?.getMuid()\"  [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"  [alignment]=\"messageInfoAlignment\">\n    <ng-template #contentView>\n      <ng-container *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\" >\n      </ng-container>\n    </ng-template>\n    <ng-template #reactionView>\n      <reactions-view *ngIf=\"hasReaction(message)\" [messageObject]=\"message\" [alignment]=\"setBubbleAlignment(message)\"  [addReactionIconURL]=\"addReactionIconURL\"\n      [loggedInUser]=\"loggedInUser\" [reactionsStyle]=\"reactionsStyle(message)\"></reactions-view>\n      </ng-template>\n<ng-template #leadingView>\n<div  *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\" >\n<cometchat-avatar [name]=\"message?.getSender()?.getName()\" [avatarStyle]=\"avatarStyle\" [image]=\"message?.getSender()?.getAvatar()\">\n</cometchat-avatar>\n</div>\n</ng-template>\n<ng-template #bubbleHeader>\n<div *ngIf=\"getHeaderView(message);else defaultHeader\">\n<ng-container *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\" >\n</ng-container>\n</div>\n<ng-template #defaultHeader>\n<div  class=\"cc-message-list__bubble-header\" *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n<cometchat-label [text]=\"message?.getSender()?.getName()\" [labelStyle]=\"labelStyle\"></cometchat-label>\n<cometchat-date [pattern]=\"datePattern\" [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n</div>\n</ng-template>\n</ng-template>\n  </cometchat-message-bubble>\n\n</ng-template>\n<cometchat-backdrop *ngIf=\"openMessageInfoPage\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-message-information [closeIconURL]=\"messageInformationConfiguration.closeIconURL\"  [loadingStateView]=\"messageInformationConfiguration.loadingStateView\" [errorStateView]=\"messageInformationConfiguration.errorStateView\" [listItemStyle]=\"messageInformationConfiguration.listItemStyle\" [emptyStateView]=\"messageInformationConfiguration.emptyStateView\" [loadingIconURL]=\"messageInformationConfiguration.loadingIconURL\" [readIcon]=\"messageInformationConfiguration.readIcon\" [deliveredIcon]=\"messageInformationConfiguration.deliveredIcon\" [onError]=\"messageInformationConfiguration.onError\" [SubtitleView]=\"messageInformationConfiguration.subtitleView\" [receiptDatePattern]=\"messageInformationConfiguration.receiptDatePattern\" [listItemView]=\"messageInformationConfiguration.listItemView \" [messageInformationStyle]=\"messageInformationConfiguration.messageInformationStyle\" [onClose]=\"messageInformationConfiguration.onClose ??  closeMessageInfoPage\" [bubbleView]=\"messageInformationConfiguration.bubbleView ?? messageinfoBubble\" [message]=\"messageInfoObject\">\n\n  </cometchat-message-information>\n</cometchat-backdrop>\n", styles: [".cc-message-list{height:100%;width:100%;overflow-y:auto;overflow-x:hidden;position:relative}.cc-message-list__wrapper{height:100%;width:100%;overflow-y:hidden}.cc-message-list__bubble-footer{display:flex;justify-content:center;align-items:center}.cc-message-list__date-container{text-align:center;margin:5px 0}.cc-message-list__smart-replies,.cc-message-list__conversation-starters{height:-moz-fit-content;height:fit-content;width:100%;position:absolute;bottom:0;z-index:1}.cc-message-list__date{border-radius:10px;display:flex;justify-content:center}.cc-message-list__threadreplies{min-width:130px;width:100%}.cc-message-list__message-indicator{height:25px;display:flex;align-items:center;justify-content:center;width:100%;bottom:10%;position:absolute}.cc-message-list__footer-view{z-index:1;position:relative;width:100%}.cc-message-list__decorator-message{margin:0;line-height:30px;word-wrap:break-word;padding:0 8px;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;height:100%}.cc-message-list__footer__decorator-message{margin:0;line-height:30px;word-wrap:break-word;padding:0 8px 0 16px;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:flex-start;height:100%}.cc-message-list::-webkit-scrollbar{background:transparent;width:8px}.cc-message-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.cc-message-list__footer-view-decorator{display:flex;flex-direction:row;column-gap:8px}\n"] }]
+            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 }]
@@ -9689,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 }]
@@ -9932,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";
@@ -10058,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",
@@ -10893,16 +11310,16 @@ class CometChatMessageComposerComponent {
         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%",
@@ -11041,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),
@@ -11063,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 }, { propertyName: "aiButtonRef", first: true, predicate: ["aiButtonRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-message-composer__wrapper\" [ngStyle]=\"composerWrapperStyle()\">\n  <div class=\"cc-message-composer__header-view\" *ngIf=\"headerView; else messagePreview\">\n    <ng-container *ngTemplateOutlet=\"headerView;context:{ $implicit: user ?? group, composerId:composerId }\">\n    </ng-container>\n  </div>\n  <ng-template #messagePreview>\n    <div class=\"cc-message-composer__header-view\" *ngIf=\"showPreview\">\n      <cometchat-preview [previewStyle]=\"previewStyle\" [previewSubtitle]=\"messageToBeEdited.getText()\" (cc-preview-close-clicked)=\"closePreview()\"> </cometchat-preview>\n    </div>\n  </ng-template>\n<div class=\"cc-message-composer__input\">\n  <cometchat-message-input (cc-message-input-entered)=\"sendMessageOnEnter($event)\" #inputRef [text]=\"text\" (cc-message-input-changed)=\"messageInputChanged($event)\" [messageInputStyle]=\"messageInputStyle\" [placeholderText]=\"placeholderText\" [auxiliaryButtonAlignment]=\"auxiliaryButtonsAlignment\">\n    <div slot=\"secondaryView\">\n      <div *ngIf=\"secondaryButtonView;else secondaryButton\">\n        <ng-container *ngTemplateOutlet=\"secondaryButtonView;context:{ $implicit: user ?? group, composerId:composerId }\">\n        </ng-container>\n      </div>\n      <ng-template #secondaryButton>\n    <div class=\"cc-message-composer__attachbutton\">\n        <cometchat-popover (cc-popover-outside-click)=\"openActionSheet($event)\" [placement]=\"auxilaryPlacement\" [popoverStyle]=\"popoverStyle\" >\n          <cometchat-action-sheet slot=\"content\" [actions]=\"composerActions\" [actionSheetStyle]=\"actionsheetStyle\" (cc-actionsheet-clicked)=\"handleActions($event)\">\n          </cometchat-action-sheet>\n            <cometchat-button #actionSheetRef slot=\"children\" (cc-button-clicked)=\"openActionSheet($event)\" [iconURL]=\"!showActionSheetItem || (showEmojiKeyboard && !showActionSheetItem)  ? attachmentIconURL  : closeButtonIconURL\" [buttonStyle]=\"attachmentButtonStyle\"></cometchat-button>\n        </cometchat-popover>\n    </div>\n      </ng-template>\n    </div>\n\n      <div class=\"cc-message-composer__auxiliary\" slot=\"auxilaryView\">\n        <div class=\"cc-message-composer__custom-auxiliary-view\" *ngIf=\"auxilaryButtonView\">\n          <ng-container *ngTemplateOutlet=\"auxilaryButtonView;context:{ $implicit: user ?? group, composerId:composerId }\">\n          </ng-container>\n        </div>\n        <div class=\"cc-message-composer__stickerkeyboard\" *ngIf=\"isAiEnabled\">\n          <cometchat-popover (cc-popover-outside-click)=\"openStickerKeyboard($event)\" [popoverStyle]=\"aiPopover\" [placement]=\"auxilaryPlacement\" >\n            <cometchat-card-view [closeCallback]=\"handleAiFeaturesClose\"  slot=\"content\" [buttons]=\"buttons\">\n            </cometchat-card-view>\n            <cometchat-button [hoverText]=\"localize('AI')\" slot=\"children\" #aiButtonRef (cc-button-clicked)=\"openAiFeatures($event)\" [iconURL]=\" !showAiFeatures ? 'assets/ai-bot.svg' : closeButtonIconURL\" [buttonStyle]=\"stickerButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n   \n        <div class=\"cc-message-composer__stickerkeyboard\" *ngIf=\"enableStickerKeyboard\">\n          <cometchat-popover (cc-popover-outside-click)=\"openStickerKeyboard($event)\" [popoverStyle]=\"stickerPopover\" [placement]=\"auxilaryPlacement\" >\n            <stickers-keyboard  slot=\"content\"  [stickerStyle]=\"stickerKeyboardStyle\" (cc-sticker-clicked)=\"sendSticker($event)\">\n            </stickers-keyboard>\n            <cometchat-button [hoverText]=\"localize('STICKER')\" slot=\"children\" #stickerButtonRef  (cc-button-clicked)=\"openStickerKeyboard($event)\" [iconURL]=\" !showStickerKeyboard ? stickerButtonIconURL : closeButtonIconURL\" [buttonStyle]=\"stickerButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n        <div class=\"cc-message-composer__emojikeyboard\">\n          <cometchat-popover (cc-popover-outside-click)=\"openEmojiKeyboard($event)\" [placement]=\"auxilaryPlacement\" [popoverStyle]=\"emojiPopover\" >\n            <cometchat-emoji-keyboard slot=\"content\" [emojiKeyboardStyle]=\"emojiKeyboardStyle\" (cc-emoji-clicked)=\"appendEmoji($event)\">\n            </cometchat-emoji-keyboard>\n            <cometchat-button #emojiButtonRef [hoverText]=\"localize('EMOJI')\" slot=\"children\" (cc-button-clicked)=\"openEmojiKeyboard($event)\" [iconURL]=\" !showEmojiKeyboard  || (!showEmojiKeyboard && showActionSheetItem) ? emojiButtonIconURL : closeButtonIconURL\" [buttonStyle]=\"emojiButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n        <div class=\"cc-message-composer__mediarecorder\" *ngIf=\"!hideVoiceRecording\">\n          <cometchat-popover [closeOnOutsideClick]=\"false\"  [popoverStyle]=\"mediaRecordedPopover\" [placement]=\"auxilaryPlacement\" >\n            \n            <cometchat-media-recorder *ngIf=\"toggleMediaRecorded\" [autoRecording]=\"true\"  startIconText=\"\" stopIconText=\"\" submitButtonIconText=\"\" [submitButtonIconURL]=\"voiceRecordingSubmitIconURL\" [startIconURL]=\"voiceRecordingStartIconURL\" [stopIconURL]=\"voiceRecordingStopIconURL\"  [closeIconURL]=\"voiceRecordingCloseIconURL\" (cc-media-recorder-submitted)=\"sendRecordedMedia($event)\" (cc-media-recorder-closed)=\"closeMediaRecorder($event)\" slot=\"content\" [mediaPlayerStyle]=\"mediaRecorderStyle\"></cometchat-media-recorder>\n            <cometchat-icon-button [hoverText]=\"localize('VOICE_RECORDING')\" slot=\"children\" #mediaRecordedRef  (cc-button-clicked)=\"openMediaRecorded($event)\" [iconURL]=\" !toggleMediaRecorded ? voiceRecordingIconURL : closeButtonIconURL\" [buttonStyle]=\"mediaRecorderButtonStyle\"></cometchat-icon-button>\n          </cometchat-popover>\n        </div>\n      </div>\n    <div slot=\"primaryView\">\n      <div *ngIf=\"sendButtonView;else sendButton\">\n      </div>\n      <ng-template #sendButton>\n        <div class=\"cc-message-composer__sendbutton\" *ngIf=\"showSendButton || hideLiveReaction\">\n  <cometchat-button [iconURL]=\"sendButtonIconURL\" [buttonStyle]=\"sendButtonStyle\" [hoverText]=\"localize('SEND_MESSAGE')\" (cc-button-clicked)=\"customSendMethod(messageText)\"></cometchat-button>\n        </div>\n        <div class=\"cc-message-composer__livereaction\" *ngIf=\"!hideLiveReaction && !showSendButton\">\n          <cometchat-button [iconURL]=\"LiveReactionIconURL\" [hoverText]=\"localize('LIVE_REACTION')\" [buttonStyle]=\"liveReactionStyle\" (cc-button-clicked)=\"sendReaction()\"></cometchat-button>\n          </div>\n      </ng-template>\n    </div>\n  </cometchat-message-input>\n</div>\n</div>\n\n<input class=\"cc-message-composer__mediainput\" #inputElement (change)=\"inputChangeHandler($event)\" />\n<cometchat-backdrop *ngIf=\"showCreatePolls\" [backdropStyle]=\"backdropStyle\">\n  <create-poll [user]=\"user\" [group]=\"group\" (cc-close-clicked)=\"closeCreatePolls()\" [createPollStyle]=\"createPollStyle\"></create-poll>\n</cometchat-backdrop>", styles: [".cc-message-composer__sendbutton,.cc-message-composer__livereaction{margin:0 5px}.cc-message-composer__wrapper{height:100%;width:100%;position:relative;padding:14px 16px}.cc-message-composer__header-view{height:-moz-fit-content;height:fit-content;width:100%;bottom:120%}.cc-message-composer__mediainput{display:none}.cc-message-composer__auxiliary{display:flex;gap:8px}*{box-sizing:border-box}cometchat-card-view{height:100%;width:100%;overflow:hidden;display:flex;border-radius:8px}\n"], components: [{ type: CometChatCardViewComponent, selector: "cometchat-card-view", inputs: ["buttons", "closeCallback"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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        <div class=\"cc-message-composer__stickerkeyboard\" *ngIf=\"isAiEnabled\">\n          <cometchat-popover (cc-popover-outside-click)=\"openStickerKeyboard($event)\" [popoverStyle]=\"aiPopover\" [placement]=\"auxilaryPlacement\" >\n            <cometchat-card-view [closeCallback]=\"handleAiFeaturesClose\"  slot=\"content\" [buttons]=\"buttons\">\n            </cometchat-card-view>\n            <cometchat-button [hoverText]=\"localize('AI')\" slot=\"children\" #aiButtonRef (cc-button-clicked)=\"openAiFeatures($event)\" [iconURL]=\" !showAiFeatures ? 'assets/ai-bot.svg' : closeButtonIconURL\" [buttonStyle]=\"stickerButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n   \n        <div class=\"cc-message-composer__stickerkeyboard\" *ngIf=\"enableStickerKeyboard\">\n          <cometchat-popover (cc-popover-outside-click)=\"openStickerKeyboard($event)\" [popoverStyle]=\"stickerPopover\" [placement]=\"auxilaryPlacement\" >\n            <stickers-keyboard  slot=\"content\"  [stickerStyle]=\"stickerKeyboardStyle\" (cc-sticker-clicked)=\"sendSticker($event)\">\n            </stickers-keyboard>\n            <cometchat-button [hoverText]=\"localize('STICKER')\" slot=\"children\" #stickerButtonRef  (cc-button-clicked)=\"openStickerKeyboard($event)\" [iconURL]=\" !showStickerKeyboard ? stickerButtonIconURL : closeButtonIconURL\" [buttonStyle]=\"stickerButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n        <div class=\"cc-message-composer__emojikeyboard\">\n          <cometchat-popover (cc-popover-outside-click)=\"openEmojiKeyboard($event)\" [placement]=\"auxilaryPlacement\" [popoverStyle]=\"emojiPopover\" >\n            <cometchat-emoji-keyboard slot=\"content\" [emojiKeyboardStyle]=\"emojiKeyboardStyle\" (cc-emoji-clicked)=\"appendEmoji($event)\">\n            </cometchat-emoji-keyboard>\n            <cometchat-button #emojiButtonRef [hoverText]=\"localize('EMOJI')\" slot=\"children\" (cc-button-clicked)=\"openEmojiKeyboard($event)\" [iconURL]=\" !showEmojiKeyboard  || (!showEmojiKeyboard && showActionSheetItem) ? emojiButtonIconURL : closeButtonIconURL\" [buttonStyle]=\"emojiButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n        <div class=\"cc-message-composer__mediarecorder\" *ngIf=\"!hideVoiceRecording\">\n          <cometchat-popover [closeOnOutsideClick]=\"false\"  [popoverStyle]=\"mediaRecordedPopover\" [placement]=\"auxilaryPlacement\" >\n            \n            <cometchat-media-recorder *ngIf=\"toggleMediaRecorded\" [autoRecording]=\"true\"  startIconText=\"\" stopIconText=\"\" submitButtonIconText=\"\" [submitButtonIconURL]=\"voiceRecordingSubmitIconURL\" [startIconURL]=\"voiceRecordingStartIconURL\" [stopIconURL]=\"voiceRecordingStopIconURL\"  [closeIconURL]=\"voiceRecordingCloseIconURL\" (cc-media-recorder-submitted)=\"sendRecordedMedia($event)\" (cc-media-recorder-closed)=\"closeMediaRecorder($event)\" slot=\"content\" [mediaPlayerStyle]=\"mediaRecorderStyle\"></cometchat-media-recorder>\n            <cometchat-icon-button [hoverText]=\"localize('VOICE_RECORDING')\" slot=\"children\" #mediaRecordedRef  (cc-button-clicked)=\"openMediaRecorded($event)\" [iconURL]=\" !toggleMediaRecorded ? voiceRecordingIconURL : closeButtonIconURL\" [buttonStyle]=\"mediaRecorderButtonStyle\"></cometchat-icon-button>\n          </cometchat-popover>\n        </div>\n      </div>\n    <div slot=\"primaryView\">\n      <div *ngIf=\"sendButtonView;else sendButton\">\n      </div>\n      <ng-template #sendButton>\n        <div class=\"cc-message-composer__sendbutton\" *ngIf=\"showSendButton || hideLiveReaction\">\n  <cometchat-button [iconURL]=\"sendButtonIconURL\" [buttonStyle]=\"sendButtonStyle\" [hoverText]=\"localize('SEND_MESSAGE')\" (cc-button-clicked)=\"customSendMethod(messageText)\"></cometchat-button>\n        </div>\n        <div class=\"cc-message-composer__livereaction\" *ngIf=\"!hideLiveReaction && !showSendButton\">\n          <cometchat-button [iconURL]=\"LiveReactionIconURL\" [hoverText]=\"localize('LIVE_REACTION')\" [buttonStyle]=\"liveReactionStyle\" (cc-button-clicked)=\"sendReaction()\"></cometchat-button>\n          </div>\n      </ng-template>\n    </div>\n  </cometchat-message-input>\n</div>\n</div>\n\n<input class=\"cc-message-composer__mediainput\" #inputElement (change)=\"inputChangeHandler($event)\" />\n<cometchat-backdrop *ngIf=\"showCreatePolls\" [backdropStyle]=\"backdropStyle\">\n  <create-poll [user]=\"user\" [group]=\"group\" (cc-close-clicked)=\"closeCreatePolls()\" [createPollStyle]=\"createPollStyle\"></create-poll>\n</cometchat-backdrop>", styles: [".cc-message-composer__sendbutton,.cc-message-composer__livereaction{margin:0 5px}.cc-message-composer__wrapper{height:100%;width:100%;position:relative;padding:14px 16px}.cc-message-composer__header-view{height:-moz-fit-content;height:fit-content;width:100%;bottom:120%}.cc-message-composer__mediainput{display:none}.cc-message-composer__auxiliary{display:flex;gap:8px}*{box-sizing:border-box}cometchat-card-view{height:100%;width:100%;overflow:hidden;display:flex;border-radius:8px}\n"] }]
+            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 }]
@@ -11132,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: [{
@@ -11240,7 +11655,6 @@ class CometChatThreadedMessagesComponent {
             textColor: "black",
             background: "transparent",
         };
-        this.msgListenerId = "message_" + new Date().getTime();
     }
     ngOnInit() {
         this.requestBuilder = new CometChat.MessagesRequestBuilder()
@@ -11281,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) {
@@ -11313,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) {
@@ -11415,10 +11831,10 @@ class CometChatThreadedMessagesComponent {
     }
 }
 CometChatThreadedMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatThreadedMessagesComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
-CometChatThreadedMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatThreadedMessagesComponent, selector: "cometchat-threaded-messages", inputs: { onClose: "onClose", onError: "onError", parentMessage: "parentMessage", title: "title", closeIconURL: "closeIconURL", bubbleView: "bubbleView", messageActionView: "messageActionView", messageListConfiguration: "messageListConfiguration", messageComposerConfiguration: "messageComposerConfiguration", threadedMessagesStyle: "threadedMessagesStyle" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-threaded-messages__wrapper\" [ngStyle]=\"wrapperStyle()\">\n<div class=\"cc-threaded-messages__header\">\n<div class=\"cc-threaded-messages__title\">\n<cometchat-label [text]=\"title\" [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"] }]
+            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: [{
@@ -13545,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\" [scrollToBottomOnNewMessages]=\"messageListConfiguration.scrollToBottomOnNewMessages\" [backdropStyle]=\"messageListConfiguration.backdropStyle\" [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\" [messageListStyle]=\"messageListConfiguration.messageListStyle\"  [onError]=\"messageListConfiguration.onError\"\n  >\n  </cometchat-message-list>\n</div>\n<div class=\"cc-messages__composer\" *ngIf=\"!hideMessageComposer\">\n  <div *ngIf=\"messageComposerView; else customComposerView\" class=\"cc-messages__composer--customview\">\n    <ng-container *ngTemplateOutlet=\"messageComposerView\">\n    </ng-container>\n  </div>\n  <ng-template #customComposerView>\n    <cometchat-message-composer #messageComposerRef [disableSoundForMessages]=\"disableSoundForMessages\"\n    [voiceRecordingStopIconURL]=\"messageComposerConfiguration.voiceRecordingStopIconURL\"\n    [voiceRecordingStartIconURL]=\"messageComposerConfiguration.voiceRecordingStartIconURL\"\n    [voiceRecordingCloseIconURL]=\"messageComposerConfiguration.voiceRecordingCloseIconURL\"\n    [voiceRecordingSubmitIconURL]=\"messageComposerConfiguration.voiceRecordingSubmitIconURL\"\n    [mediaRecorderStyle]=\"messageComposerConfiguration.mediaRecorderStyle\"\n    [customSoundForMessages]=\"customSoundForOutgoingMessages\"\n    [user]=\"user\" [group]=\"group\" [text]=\"messageComposerConfiguration.text\" [headerView]=\"messageComposerConfiguration.headerView\" [onTextChange]=\"messageComposerConfiguration.onTextChange\" [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n    [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\" [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\" [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\" [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n    [sendButtonView]=\"messageComposerConfiguration.sendButtonView\" [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\" [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\" [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\" [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n    [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\" [onError]=\"messageComposerConfiguration.onError\"\n    >\n    </cometchat-message-composer>\n  </ng-template>\n</div>\n </div>\n <div class=\"cc-messages__livereaction\">\n  <cometchat-live-reaction *ngIf=\"liveReaction\" [reactionIconURL]=\"reactionName\"></cometchat-live-reaction>\n</div>\n<div *ngIf=\"openThreadedMessages\" class=\"cc-messages__threadedmessages\">\n<cometchat-threaded-messages [onClose]=\"closeThreadView\" [threadedMessagesStyle]=\"threadedMessageConfiguration.threadedMessagesStyle\" [messageActionView]=\"threadedMessageConfiguration.messageActionView\" [closeIconURL]=\"threadedMessageConfiguration.closeIconURL\" [onError]=\"threadedMessageConfiguration.onError\" [bubbleView]=\"threadedMessageConfiguration.bubbleView || parentBubbleView\" [parentMessage]=\"threadMessageObject\" [user]=\"user\" [group]=\"group\"></cometchat-threaded-messages>\n</div>\n<div *ngIf=\"openDetails\" class=\"cc-messages__details\">\n  <cometchat-details [backdropStyle]=\"detailsConfiguration.backdropStyle\"  [transferOwnershipConfiguration]=\"detailsConfiguration.transferOwnershipConfiguration\" [groupMembersConfiguration]=\"detailsConfiguration.groupMembersConfiguration\" [bannedMembersConfiguration]=\"detailsConfiguration.bannedMembersConfiguration\" [addMembersConfiguration]=\"detailsConfiguration.addMembersConfiguration\"  [onClose]=\"detailsConfiguration.onClose || closeDetailsPage\" [listItemStyle]=\"detailsConfiguration.listItemStyle\" [detailsStyle]=\"detailsConfiguration.detailsStyle\" [avatarStyle]=\"detailsConfiguration.avatarStyle\" [statusIndicatorStyle]=\"detailsConfiguration.statusIndicatorStyle\" [leaveDialogStyle]=\"detailsConfiguration.leaveDialogStyle\" [data]=\"detailsConfiguration.data\" [customProfileView]=\"detailsConfiguration.customProfileView\" [subtitleView]=\"detailsConfiguration.subtitleView\" [hideProfile]=\"detailsConfiguration.hideProfile\" [onError]=\"detailsConfiguration.onError\" [closeButtonIconURL]=\"detailsConfiguration.closeButtonIconURL\"  [user]=\"user\" [group]=\"group\"></cometchat-details>\n  </div>\n</div>\n<ng-template #headerMenu>\n  <div class=\"cc-messages__headermenu\">\n<div class=\"cc-messages__auxiliarymenu\" *ngIf=\"getAuxilaryView(); else elseBlock\">\n  <ng-container *ngTemplateOutlet=\"getAuxilaryView()\">\n  </ng-container>\n</div>\n    <ng-template #elseBlock>\n      <cometchat-call-buttons *ngIf=\"enableCalling\" voiceCallIconText=\"\" videoCallIconText=\"\" [user]=\"user\" [group]=\"group\" [callButtonsStyle]=\"callButtonsStyle\">\n      </cometchat-call-buttons>\n    </ng-template>\n    <cometchat-button *ngIf=\"!hideDetails\" [iconURL]=\"infoIconStyle\" [buttonStyle]=\"detailsButtonStyle\" (cc-button-clicked)=\"openDetailsPage()\"></cometchat-button>\n  </div>\n</ng-template>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-messages__wrapper{position:relative;height:100%;width:100%}.cc-messages{display:flex;flex-direction:column;position:relative;height:100%;width:100%;box-sizing:border-box;justify-content:space-between}.cc-messages__headermenu{display:flex;justify-content:center;align-items:center}.cc-messages__threadedmessages,.cc-messages__details{position:absolute;top:0;left:0;height:100%;width:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;max-width:100%;z-index:1}.cc-messages__header{width:100%}.cc-messages__list{overflow:hidden;width:100%;height:100%}cometchat-threaded-messages{height:100%;display:flex}.cc-messages__composer{width:100%;display:flex;flex-direction:column;justify-content:flex-end}\n"], components: [{ type: CometChatMessageHeaderComponent, selector: "cometchat-message-header", inputs: ["avatarStyle", "statusIndicatorStyle", "messageHeaderStyle", "listItemStyle", "subtitleView", "disableUsersPresence", "disableTyping", "protectedGroupIcon", "privateGroupIcon", "menu", "user", "group", "backButtonIconURL", "hideBackButton", "listItemView", "onError", "onBack"] }, { type: CometChatMessageListComponent, selector: "cometchat-message-list", inputs: ["hideError", "errorStateView", "loadingStateView", "emptyStateView", "errorStateText", "emptyStateText", "loadingIconURL", "user", "group", "disableReceipt", "disableSoundForMessages", "customSoundForMessages", "readIcon", "deliveredIcon", "sentIcon", "waitIcon", "errorIcon", "alignment", "showAvatar", "datePattern", "timestampAlignment", "DateSeparatorPattern", "templates", "messagesRequestBuilder", "newMessageIndicatorText", "scrollToBottomOnNewMessages", "thresholdValue", "onThreadRepliesClick", "headerView", "footerView", "parentMessageId", "avatarStyle", "backdropStyle", "dateSeparatorStyle", "messageListStyle", "onError", "messageInformationConfiguration"] }, { type: CometChatMessageComposerComponent, selector: "cometchat-message-composer", inputs: ["user", "group", "disableSoundForMessages", "customSoundForMessage", "disableTypingEvents", "text", "placeholderText", "headerView", "onTextChange", "attachmentIconURL", "attachmentOptions", "secondaryButtonView", "auxilaryButtonView", "auxiliaryButtonsAlignment", "sendButtonView", "parentMessageId", "hideLiveReaction", "LiveReactionIconURL", "messageComposerStyle", "onSendButtonClick", "onError", "backdropStyle", "hideVoiceRecording", "mediaRecorderStyle", "voiceRecordingIconURL", "voiceRecordingCloseIconURL", "voiceRecordingStartIconURL", "voiceRecordingStopIconURL", "voiceRecordingSubmitIconURL"] }, { type: CometChatThreadedMessagesComponent, selector: "cometchat-threaded-messages", inputs: ["onClose", "onError", "parentMessage", "title", "closeIconURL", "bubbleView", "messageActionView", "messageListConfiguration", "messageComposerConfiguration", "threadedMessagesStyle"] }, { type: CometChatDetailsComponent, selector: "cometchat-details", inputs: ["group", "user", "title", "closeButtonIconURL", "hideProfile", "subtitleView", "customProfileView", "data", "disableUsersPresence", "privateGroupIcon", "protectedGroupIcon", "onError", "onClose", "leaveGroupConfirmButtonText", "leaveGroupCancelButtonText", "leaveGroupDialogMessage", "leaveGroupDialogStyle", "deleteGroupConfirmButtonText", "deleteGroupDialogMessage", "deleteGroupCancelButtonText", "deleteGroupDialogStyle", "transferOwnershipConfirmButtonText", "transferOwnershipDialogMessage", "transferOwnershipCancelButtonText", "transferOwnershipDialogStyle", "addMembersConfiguration", "bannedMembersConfiguration", "groupMembersConfiguration", "transferOwnershipConfiguration", "statusIndicatorStyle", "backdropStyle", "avatarStyle", "detailsStyle", "listItemStyle"] }, { type: CometChatCallButtonsComponent, selector: "cometchat-call-buttons", inputs: ["user", "group", "voiceCallIconURL", "voiceCallIconText", "voiceCallIconHoverText", "videoCallIconURL", "videoCallIconText", "videoCallIconHoverText", "onVoiceCallClick", "onVideoCallClick", "onError", "callButtonsStyle", "outgoingCallConfiguration", "ongoingCallConfiguration"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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\" [scrollToBottomOnNewMessages]=\"messageListConfiguration.scrollToBottomOnNewMessages\" [backdropStyle]=\"messageListConfiguration.backdropStyle\" [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\" [messageListStyle]=\"messageListConfiguration.messageListStyle\"  [onError]=\"messageListConfiguration.onError\"\n  >\n  </cometchat-message-list>\n</div>\n<div class=\"cc-messages__composer\" *ngIf=\"!hideMessageComposer\">\n  <div *ngIf=\"messageComposerView; else customComposerView\" class=\"cc-messages__composer--customview\">\n    <ng-container *ngTemplateOutlet=\"messageComposerView\">\n    </ng-container>\n  </div>\n  <ng-template #customComposerView>\n    <cometchat-message-composer #messageComposerRef [disableSoundForMessages]=\"disableSoundForMessages\"\n    [voiceRecordingStopIconURL]=\"messageComposerConfiguration.voiceRecordingStopIconURL\"\n    [voiceRecordingStartIconURL]=\"messageComposerConfiguration.voiceRecordingStartIconURL\"\n    [voiceRecordingCloseIconURL]=\"messageComposerConfiguration.voiceRecordingCloseIconURL\"\n    [voiceRecordingSubmitIconURL]=\"messageComposerConfiguration.voiceRecordingSubmitIconURL\"\n    [mediaRecorderStyle]=\"messageComposerConfiguration.mediaRecorderStyle\"\n    [customSoundForMessages]=\"customSoundForOutgoingMessages\"\n    [user]=\"user\" [group]=\"group\" [text]=\"messageComposerConfiguration.text\" [headerView]=\"messageComposerConfiguration.headerView\" [onTextChange]=\"messageComposerConfiguration.onTextChange\" [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n    [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\" [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\" [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\" [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n    [sendButtonView]=\"messageComposerConfiguration.sendButtonView\" [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\" [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\" [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\" [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n    [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\" [onError]=\"messageComposerConfiguration.onError\"\n    >\n    </cometchat-message-composer>\n  </ng-template>\n</div>\n </div>\n <div class=\"cc-messages__livereaction\">\n  <cometchat-live-reaction *ngIf=\"liveReaction\" [reactionIconURL]=\"reactionName\"></cometchat-live-reaction>\n</div>\n<div *ngIf=\"openThreadedMessages\" class=\"cc-messages__threadedmessages\">\n<cometchat-threaded-messages [onClose]=\"closeThreadView\" [threadedMessagesStyle]=\"threadedMessageConfiguration.threadedMessagesStyle\" [messageActionView]=\"threadedMessageConfiguration.messageActionView\" [closeIconURL]=\"threadedMessageConfiguration.closeIconURL\" [onError]=\"threadedMessageConfiguration.onError\" [bubbleView]=\"threadedMessageConfiguration.bubbleView || parentBubbleView\" [parentMessage]=\"threadMessageObject\" [user]=\"user\" [group]=\"group\"></cometchat-threaded-messages>\n</div>\n<div *ngIf=\"openDetails\" class=\"cc-messages__details\">\n  <cometchat-details [backdropStyle]=\"detailsConfiguration.backdropStyle\"  [transferOwnershipConfiguration]=\"detailsConfiguration.transferOwnershipConfiguration\" [groupMembersConfiguration]=\"detailsConfiguration.groupMembersConfiguration\" [bannedMembersConfiguration]=\"detailsConfiguration.bannedMembersConfiguration\" [addMembersConfiguration]=\"detailsConfiguration.addMembersConfiguration\"  [onClose]=\"detailsConfiguration.onClose || closeDetailsPage\" [listItemStyle]=\"detailsConfiguration.listItemStyle\" [detailsStyle]=\"detailsConfiguration.detailsStyle\" [avatarStyle]=\"detailsConfiguration.avatarStyle\" [statusIndicatorStyle]=\"detailsConfiguration.statusIndicatorStyle\" [leaveDialogStyle]=\"detailsConfiguration.leaveDialogStyle\" [data]=\"detailsConfiguration.data\" [customProfileView]=\"detailsConfiguration.customProfileView\" [subtitleView]=\"detailsConfiguration.subtitleView\" [hideProfile]=\"detailsConfiguration.hideProfile\" [onError]=\"detailsConfiguration.onError\" [closeButtonIconURL]=\"detailsConfiguration.closeButtonIconURL\"  [user]=\"user\" [group]=\"group\"></cometchat-details>\n  </div>\n</div>\n<ng-template #headerMenu>\n  <div class=\"cc-messages__headermenu\">\n<div class=\"cc-messages__auxiliarymenu\" *ngIf=\"getAuxilaryView(); else elseBlock\">\n  <ng-container *ngTemplateOutlet=\"getAuxilaryView()\">\n  </ng-container>\n</div>\n    <ng-template #elseBlock>\n      <cometchat-call-buttons *ngIf=\"enableCalling\" voiceCallIconText=\"\" videoCallIconText=\"\" [user]=\"user\" [group]=\"group\" [callButtonsStyle]=\"callButtonsStyle\">\n      </cometchat-call-buttons>\n    </ng-template>\n    <cometchat-button *ngIf=\"!hideDetails\" [iconURL]=\"infoIconStyle\" [buttonStyle]=\"detailsButtonStyle\" (cc-button-clicked)=\"openDetailsPage()\"></cometchat-button>\n  </div>\n</ng-template>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-messages__wrapper{position:relative;height:100%;width:100%}.cc-messages{display:flex;flex-direction:column;position:relative;height:100%;width:100%;box-sizing:border-box;justify-content:space-between}.cc-messages__headermenu{display:flex;justify-content:center;align-items:center}.cc-messages__threadedmessages,.cc-messages__details{position:absolute;top:0;left:0;height:100%;width:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;max-width:100%;z-index:1}.cc-messages__header{width:100%}.cc-messages__list{overflow:hidden;width:100%;height:100%}cometchat-threaded-messages{height:100%;display:flex}.cc-messages__composer{width:100%;display:flex;flex-direction:column;justify-content:flex-end}\n"] }]
+            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 }]