@cometchat/chat-uikit-angular 4.3.2 → 4.3.4

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

@@ -21,7 +21,7 @@ class MessageUtils {
     getEditOption(theme) {
         return new CometChatMessageOption({
             id: CometChatUIKitConstants.MessageOption.editMessage,
-            title: localize("EDIT_MESSAGE"),
+            title: localize("EDIT"),
             iconURL: "assets/editicon.svg",
             onClick: null,
             iconTint: theme.palette.getAccent600(),
@@ -38,7 +38,7 @@ class MessageUtils {
     getReactionOption(theme) {
         return new CometChatMessageOption({
             id: CometChatUIKitConstants.MessageOption.reactToMessage,
-            title: localize("REACT_TO_MESSAGE"),
+            title: localize("REACT"),
             iconURL: "assets/addreaction.svg",
             onClick: undefined,
             iconTint: theme.palette.getAccent600(),
@@ -55,7 +55,7 @@ class MessageUtils {
     getMessageInfoOption(theme) {
         return new CometChatMessageOption({
             id: CometChatUIKitConstants.MessageOption.messageInformation,
-            title: localize("MESSAGE_INFORMATION"),
+            title: localize("INFO"),
             iconURL: "assets/Info.svg",
             onClick: null,
             iconTint: theme.palette.getAccent600(),
@@ -72,7 +72,7 @@ class MessageUtils {
     getMessagePrivatelyOption(theme) {
         return new CometChatMessageOption({
             id: CometChatUIKitConstants.MessageOption.sendMessagePrivately,
-            title: localize("SEND_MESSAGE_IN_PRIVATE"),
+            title: localize("MESSAGE_PRIVATELY"),
             iconURL: "assets/message-privately.svg",
             onClick: null,
             iconTint: theme.palette.getAccent600(),
@@ -106,7 +106,7 @@ class MessageUtils {
     getReplyInThreadOption(theme) {
         return new CometChatMessageOption({
             id: CometChatUIKitConstants.MessageOption.replyInThread,
-            title: localize("REPLY_IN_THREAD"),
+            title: localize("REPLY"),
             iconURL: "assets/threadicon.svg",
             onClick: null,
             iconTint: theme.palette.getAccent600(),
@@ -123,7 +123,7 @@ class MessageUtils {
     getCopyOption(theme) {
         return new CometChatMessageOption({
             id: CometChatUIKitConstants.MessageOption.copyMessage,
-            title: localize("COPY_MESSAGE"),
+            title: localize("COPY"),
             iconURL: "assets/Copy.svg",
             onClick: null,
             iconTint: theme.palette.getAccent600(),
@@ -150,17 +150,28 @@ class MessageUtils {
    * @return {Array<CometChatMessageOption>} - Returns an array of message options.
    */
     getTextMessageOptions(loggedInUser, messageObject, theme, group) {
-        let _isSentByMe = this.isSentByMe(loggedInUser, messageObject);
-        let _isModerator = false;
-        if (group?.getScope() == CometChatUIKitConstants.groupMemberScope.moderator) {
-            _isModerator = true;
+        let isSentByMe = this.isSentByMe(loggedInUser, messageObject);
+        let isParticipant = false;
+        if (group?.getScope() == CometChatUIKitConstants.groupMemberScope.participant) {
+            isParticipant = true;
         }
         let messageOptionList = [];
-        messageOptionList = ChatConfigurator.getDataSource().getCommonOptions(loggedInUser, messageObject, theme, group);
-        if (_isSentByMe) {
-            messageOptionList.unshift(this.getEditOption(theme));
+        messageOptionList.push(this.getReactionOption(theme));
+        if (!messageObject.getParentMessageId()) {
+            messageOptionList.push(this.getReplyInThreadOption(theme));
+        }
+        messageOptionList.push(this.getCopyOption(theme));
+        if (isSentByMe || (!isParticipant && group)) {
+            messageOptionList.push(this.getEditOption(theme));
+        }
+        if (isSentByMe) {
+            messageOptionList.push(this.getMessageInfoOption(theme));
+        }
+        if (isSentByMe || (!isParticipant && group))
+            messageOptionList.push(this.getDeleteOption(theme));
+        if (group && !isSentByMe) {
+            messageOptionList.push(this.getMessagePrivatelyOption(theme));
         }
-        messageOptionList.unshift(this.getCopyOption(theme));
         return messageOptionList;
     }
     /**
@@ -334,10 +345,6 @@ class MessageUtils {
     }
     getMessageOptions(loggedInUser, messageObject, theme, group) {
         let _optionList = [];
-        let _isSentByMe = false;
-        if (loggedInUser.getUid() == messageObject.getSender()?.getUid()) {
-            _isSentByMe = true;
-        }
         if (messageObject.getCategory() ==
             CometChatUIKitConstants.MessageCategory.message) {
             switch (messageObject.getType()) {
@@ -370,23 +377,23 @@ class MessageUtils {
         return _optionList;
     }
     getCommonOptions(loggedInUser, messageObject, theme, group) {
-        let _isSentByMe = this.isSentByMe(loggedInUser, messageObject);
-        let _isModerator = false;
-        if (group?.getScope() == CometChatUIKitConstants.groupMemberScope.moderator)
-            _isModerator = true;
+        let isSentByMe = this.isSentByMe(loggedInUser, messageObject);
+        let isParticipant = false;
+        if (group?.getScope() == CometChatUIKitConstants.groupMemberScope.participant)
+            isParticipant = true;
         let messageOptionList = [];
         messageOptionList.push(this.getReactionOption(theme));
-        if (!messageObject.getParentMessageId()) {
+        if (!messageObject?.getParentMessageId()) {
             messageOptionList.push(this.getReplyInThreadOption(theme));
         }
-        if (_isSentByMe) {
+        if (isSentByMe) {
             messageOptionList.push(this.getMessageInfoOption(theme));
         }
-        if (group && !_isSentByMe) {
+        if (isSentByMe || (!isParticipant && group))
+            messageOptionList.push(this.getDeleteOption(theme));
+        if (group && !isSentByMe) {
             messageOptionList.push(this.getMessagePrivatelyOption(theme));
         }
-        if (_isSentByMe == true || _isModerator == true)
-            messageOptionList.push(this.getDeleteOption(theme));
         return messageOptionList;
     }
     getAllMessageTypes() {
@@ -1172,7 +1179,7 @@ class MessageTranslationExtensionDecorator extends DataSourceDecorator {
         if (!this.checkIfOptionExist(options, CometChatUIKitConstants.MessageOption.translateMessage)) {
             let newOption = new CometChatMessageOption({
                 id: CometChatUIKitConstants.MessageOption.translateMessage,
-                title: localize("TRANSLATE_MESSAGE"),
+                title: localize("TRANSLATE"),
                 iconURL: "assets/translation.svg",
                 onClick: null,
                 iconTint: theme.palette.getAccent600(),
@@ -1884,7 +1891,7 @@ class CometChatUIKit {
         if (window) {
             window.CometChatUiKit = {
                 name: "@cometchat/chat-uikit-angular",
-                version: "4.3.2",
+                version: "4.3.4",
             };
         }
         if (CometChatUIKitSharedSettings) {
@@ -3226,10 +3233,10 @@ class CometchatListComponent {
     ngOnChanges(changes) { }
 }
 CometchatListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometchatListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CometchatListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometchatListComponent, selector: "cometchat-list", inputs: { listItemView: "listItemView", onScrolledToBottom: "onScrolledToBottom", onScrolledToTop: "onScrolledToTop", list: "list", onSearch: "onSearch", getSectionHeader: "getSectionHeader", searchText: "searchText", searchIconURL: "searchIconURL", listStyle: "listStyle", searchPlaceholderText: "searchPlaceholderText", hideSearch: "hideSearch", hideError: "hideError", title: "title", titleAlignment: "titleAlignment", errorStateView: "errorStateView", loadingStateView: "loadingStateView", emptyStateView: "emptyStateView", state: "state", errorStateText: "errorStateText", emptyStateText: "emptyStateText", loadingIconURL: "loadingIconURL", showSectionHeader: "showSectionHeader", sectionHeaderField: "sectionHeaderField", DateSeparatorPattern: "DateSeparatorPattern", dateSeparatorStyle: "dateSeparatorStyle" }, 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 }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-list__wrapper\">\n  <div class=\"list__header\" [ngStyle]=\"headerStyle()\">\n    <div *ngIf=\"title\" class=\"list__title\" [ngStyle]=\"headerTitle()\"> {{title}}</div>\n    <div class=\"cc-list__search-input\">\n      <cometchat-search-input [searchInputStyle]=\"searchStyle\" [placeholderText]=\"searchPlaceholderText\"\n        *ngIf=\"!hideSearch\" [searchIconURL]=\"searchIconURL\"\n        (cc-search-changed)=\"searchEvent($event)\"></cometchat-search-input>\n    </div>\n  </div>\n  <div class=\"cc-list\" #listScroll [ngStyle]=\"listStyles()\">\n    <div class=\"list__top\" #top>\n    </div>\n    <div class=\"decorator__message\" *ngIf=\"state == states.loading || state == states.error  || state == states.empty \"\n      [ngStyle]=\"messageContainerStyle()\">\n      <div class=\"loading__view\" *ngIf=\"state == states.loading \">\n        <cometchat-loader [iconURL]=\"loadingIconURL\" [loaderStyle]=\"iconStyle\">\n        </cometchat-loader>\n        <span class=\"custom__view--loading\" *ngIf=\"state == states.loading  && loadingStateView\">\n          <ng-container *ngTemplateOutlet=\"loadingStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"error__view\" *ngIf=\"state == states.error  && !hideError \">\n        <cometchat-label [labelStyle]=\"errorStyle()\" *ngIf=\"state == states.error  && !hideError && !errorStateView\"\n          [text]=\"errorStateText\">\n        </cometchat-label>\n        <span class=\"custom__view--error\" *ngIf=\"state == states.error  && !hideError && errorStateView\">\n          <ng-container *ngTemplateOutlet=\"errorStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"empty__view\" *ngIf=\"state == states.empty\">\n        <cometchat-label [labelStyle]=\"emptyStyle()\" *ngIf=\"state == states.empty && !emptyStateView\"\n          [text]=\"emptyStateText\">\n        </cometchat-label>\n        <span class=\"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=\"listitem__view\" *ngFor=\"let item of list; let i = index\">\n      <div class=\"list__section\" *ngIf=\"showSectionHeader\">\n        <div *ngIf=\"!getSectionHeader\">\n          <div *ngIf=\"i > 0; else elseBlock\" class=\"section__separator\">\n            <div *ngIf=\"\n                list[i - 1][sectionHeaderField][0].toUpperCase() !==\n                list[i][sectionHeaderField][0].toUpperCase()\n              \" class=\"section__header\" [ngStyle]=\"sectionHeaderStyle()\">\n              {{ list[i][sectionHeaderField][0].toUpperCase() }}\n            </div>\n          </div>\n          <ng-template #elseBlock>\n            <div class=\"section__header\" [ngStyle]=\"sectionHeaderStyle()\">\n              {{\n              list[i][sectionHeaderField][0].toUpperCase()\n              }}\n            </div>\n          </ng-template>\n        </div>\n        <div *ngIf=\"getSectionHeader\" [ngStyle]=\"sectionHeaderStyle()\">\n          <cometchat-date [timestamp]=\"getSectionHeader(item,i)\" [pattern]=\"DateSeparatorPattern\"\n            [dateStyle]=\"dateSeparatorStyle\">\n          </cometchat-date>\n        </div>\n\n      </div>\n      <ng-container *ngTemplateOutlet=\"listItemView;context:{ $implicit: item }\">\n      </ng-container>\n    </div>\n    <div class=\"list__bottom\" #bottom>\n    </div>\n  </div>\n</div>", styles: [".cc-list{display:flex;flex-direction:column;width:100%;overflow-y:auto;overflow-x:hidden}.cc-list__wrapper{height:100%;width:100%;display:flex;flex-direction:column}.listitem__view{display:flex;flex-direction:column}.section__header{padding:4px}.list__title{width:90%;margin:4px 0;padding-left:8px}.user__section{padding:8px}.cc-list__search-input{height:-moz-fit-content;height:fit-content;margin:0 8px}.list__header{width:100%}.list__section{margin-left:8px}.decorator__message--loading{display:block;height:24px;width:24px;margin-right:30px}.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%}.list__title{margin-bottom:8px}.cc-list::-webkit-scrollbar{background:transparent;width:8px}.cc-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.error__view,.empty__view{text-align:center;width:100%;text-overflow:ellipsis;text-wrap:balance}\n"], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+CometchatListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometchatListComponent, selector: "cometchat-list", inputs: { listItemView: "listItemView", onScrolledToBottom: "onScrolledToBottom", onScrolledToTop: "onScrolledToTop", list: "list", onSearch: "onSearch", getSectionHeader: "getSectionHeader", searchText: "searchText", searchIconURL: "searchIconURL", listStyle: "listStyle", searchPlaceholderText: "searchPlaceholderText", hideSearch: "hideSearch", hideError: "hideError", title: "title", titleAlignment: "titleAlignment", errorStateView: "errorStateView", loadingStateView: "loadingStateView", emptyStateView: "emptyStateView", state: "state", errorStateText: "errorStateText", emptyStateText: "emptyStateText", loadingIconURL: "loadingIconURL", showSectionHeader: "showSectionHeader", sectionHeaderField: "sectionHeaderField", DateSeparatorPattern: "DateSeparatorPattern", dateSeparatorStyle: "dateSeparatorStyle" }, 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 }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-list__wrapper\">\n  <div class=\"list__header\" [ngStyle]=\"headerStyle()\">\n    <div *ngIf=\"title\" class=\"list__title\" [ngStyle]=\"headerTitle()\"> {{title}}\n    </div>\n    <div class=\"cc-list__search-input\">\n      <cometchat-search-input [searchInputStyle]=\"searchStyle\"\n        [placeholderText]=\"searchPlaceholderText\" *ngIf=\"!hideSearch\"\n        [searchIconURL]=\"searchIconURL\"\n        (cc-search-changed)=\"searchEvent($event)\"></cometchat-search-input>\n    </div>\n  </div>\n  <div class=\"cc-list\" #listScroll [ngStyle]=\"listStyles()\">\n    <div class=\"list__top\" #top>\n    </div>\n    <div class=\"decorator__message\"\n      *ngIf=\"state == states.loading || state == states.error  || state == states.empty \"\n      [ngStyle]=\"messageContainerStyle()\">\n      <div class=\"loading__view\" *ngIf=\"state == states.loading \">\n        <cometchat-loader [iconURL]=\"loadingIconURL\" [loaderStyle]=\"iconStyle\">\n        </cometchat-loader>\n        <span class=\"custom__view--loading\"\n          *ngIf=\"state == states.loading  && loadingStateView\">\n          <ng-container *ngTemplateOutlet=\"loadingStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"error__view\" *ngIf=\"state == states.error  && !hideError \">\n        <cometchat-label [labelStyle]=\"errorStyle()\"\n          *ngIf=\"state == states.error  && !hideError && !errorStateView\"\n          [text]=\"errorStateText\">\n        </cometchat-label>\n        <span class=\"custom__view--error\"\n          *ngIf=\"state == states.error  && !hideError && errorStateView\">\n          <ng-container *ngTemplateOutlet=\"errorStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"empty__view\" *ngIf=\"state == states.empty\">\n        <cometchat-label [labelStyle]=\"emptyStyle()\"\n          *ngIf=\"state == states.empty && !emptyStateView\"\n          [text]=\"emptyStateText\">\n        </cometchat-label>\n        <span class=\"custom__view--empty\"\n          *ngIf=\"state == states.empty && emptyStateView\">\n          <ng-container *ngTemplateOutlet=\"emptyStateView\">\n          </ng-container>\n        </span>\n      </div>\n    </div>\n    <div class=\"listitem__view\" *ngFor=\"let item of list; let i = index\">\n      <div class=\"list__section\" *ngIf=\"showSectionHeader\">\n        <div *ngIf=\"!getSectionHeader\">\n          <div *ngIf=\"i > 0; else elseBlock\" class=\"section__separator\">\n            <div *ngIf=\"\n                list[i - 1][sectionHeaderField][0].toUpperCase() !==\n                list[i][sectionHeaderField][0].toUpperCase()\n              \" class=\"section__header\" [ngStyle]=\"sectionHeaderStyle()\">\n              {{ list[i][sectionHeaderField][0].toUpperCase() }}\n            </div>\n          </div>\n          <ng-template #elseBlock>\n            <div class=\"section__header\" [ngStyle]=\"sectionHeaderStyle()\">\n              {{\n              list[i][sectionHeaderField][0].toUpperCase()\n              }}\n            </div>\n          </ng-template>\n        </div>\n        <div *ngIf=\"getSectionHeader && getSectionHeader(item,i)\"\n          [ngStyle]=\"sectionHeaderStyle()\">\n          <cometchat-date [timestamp]=\"getSectionHeader(item,i)\"\n            [pattern]=\"DateSeparatorPattern\" [dateStyle]=\"dateSeparatorStyle\">\n          </cometchat-date>\n        </div>\n\n      </div>\n      <ng-container\n        *ngTemplateOutlet=\"listItemView;context:{ $implicit: item }\">\n      </ng-container>\n    </div>\n    <div class=\"list__bottom\" #bottom>\n    </div>\n  </div>\n</div>\n", styles: [".cc-list{display:flex;flex-direction:column;width:100%;overflow-y:auto;overflow-x:hidden}.cc-list__wrapper{height:100%;width:100%;display:flex;flex-direction:column}.listitem__view{display:flex;flex-direction:column}.section__header{padding:4px}.list__title{width:90%;margin:4px 0;padding-left:8px}.user__section{padding:8px}.cc-list__search-input{height:-moz-fit-content;height:fit-content;margin:0 8px}.list__header{width:100%}.list__section{margin-left:8px}.decorator__message--loading{display:block;height:24px;width:24px;margin-right:30px}.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%}.list__title{margin-bottom:8px}.cc-list::-webkit-scrollbar{background:transparent;width:8px}.cc-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.error__view,.empty__view{text-align:center;width:100%;text-overflow:ellipsis;text-wrap:balance}\n"], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometchatListComponent, decorators: [{
             type: Component,
-            args: [{ selector: "cometchat-list", template: "<div class=\"cc-list__wrapper\">\n  <div class=\"list__header\" [ngStyle]=\"headerStyle()\">\n    <div *ngIf=\"title\" class=\"list__title\" [ngStyle]=\"headerTitle()\"> {{title}}</div>\n    <div class=\"cc-list__search-input\">\n      <cometchat-search-input [searchInputStyle]=\"searchStyle\" [placeholderText]=\"searchPlaceholderText\"\n        *ngIf=\"!hideSearch\" [searchIconURL]=\"searchIconURL\"\n        (cc-search-changed)=\"searchEvent($event)\"></cometchat-search-input>\n    </div>\n  </div>\n  <div class=\"cc-list\" #listScroll [ngStyle]=\"listStyles()\">\n    <div class=\"list__top\" #top>\n    </div>\n    <div class=\"decorator__message\" *ngIf=\"state == states.loading || state == states.error  || state == states.empty \"\n      [ngStyle]=\"messageContainerStyle()\">\n      <div class=\"loading__view\" *ngIf=\"state == states.loading \">\n        <cometchat-loader [iconURL]=\"loadingIconURL\" [loaderStyle]=\"iconStyle\">\n        </cometchat-loader>\n        <span class=\"custom__view--loading\" *ngIf=\"state == states.loading  && loadingStateView\">\n          <ng-container *ngTemplateOutlet=\"loadingStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"error__view\" *ngIf=\"state == states.error  && !hideError \">\n        <cometchat-label [labelStyle]=\"errorStyle()\" *ngIf=\"state == states.error  && !hideError && !errorStateView\"\n          [text]=\"errorStateText\">\n        </cometchat-label>\n        <span class=\"custom__view--error\" *ngIf=\"state == states.error  && !hideError && errorStateView\">\n          <ng-container *ngTemplateOutlet=\"errorStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"empty__view\" *ngIf=\"state == states.empty\">\n        <cometchat-label [labelStyle]=\"emptyStyle()\" *ngIf=\"state == states.empty && !emptyStateView\"\n          [text]=\"emptyStateText\">\n        </cometchat-label>\n        <span class=\"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=\"listitem__view\" *ngFor=\"let item of list; let i = index\">\n      <div class=\"list__section\" *ngIf=\"showSectionHeader\">\n        <div *ngIf=\"!getSectionHeader\">\n          <div *ngIf=\"i > 0; else elseBlock\" class=\"section__separator\">\n            <div *ngIf=\"\n                list[i - 1][sectionHeaderField][0].toUpperCase() !==\n                list[i][sectionHeaderField][0].toUpperCase()\n              \" class=\"section__header\" [ngStyle]=\"sectionHeaderStyle()\">\n              {{ list[i][sectionHeaderField][0].toUpperCase() }}\n            </div>\n          </div>\n          <ng-template #elseBlock>\n            <div class=\"section__header\" [ngStyle]=\"sectionHeaderStyle()\">\n              {{\n              list[i][sectionHeaderField][0].toUpperCase()\n              }}\n            </div>\n          </ng-template>\n        </div>\n        <div *ngIf=\"getSectionHeader\" [ngStyle]=\"sectionHeaderStyle()\">\n          <cometchat-date [timestamp]=\"getSectionHeader(item,i)\" [pattern]=\"DateSeparatorPattern\"\n            [dateStyle]=\"dateSeparatorStyle\">\n          </cometchat-date>\n        </div>\n\n      </div>\n      <ng-container *ngTemplateOutlet=\"listItemView;context:{ $implicit: item }\">\n      </ng-container>\n    </div>\n    <div class=\"list__bottom\" #bottom>\n    </div>\n  </div>\n</div>", styles: [".cc-list{display:flex;flex-direction:column;width:100%;overflow-y:auto;overflow-x:hidden}.cc-list__wrapper{height:100%;width:100%;display:flex;flex-direction:column}.listitem__view{display:flex;flex-direction:column}.section__header{padding:4px}.list__title{width:90%;margin:4px 0;padding-left:8px}.user__section{padding:8px}.cc-list__search-input{height:-moz-fit-content;height:fit-content;margin:0 8px}.list__header{width:100%}.list__section{margin-left:8px}.decorator__message--loading{display:block;height:24px;width:24px;margin-right:30px}.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%}.list__title{margin-bottom:8px}.cc-list::-webkit-scrollbar{background:transparent;width:8px}.cc-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.error__view,.empty__view{text-align:center;width:100%;text-overflow:ellipsis;text-wrap:balance}\n"] }]
+            args: [{ selector: "cometchat-list", template: "<div class=\"cc-list__wrapper\">\n  <div class=\"list__header\" [ngStyle]=\"headerStyle()\">\n    <div *ngIf=\"title\" class=\"list__title\" [ngStyle]=\"headerTitle()\"> {{title}}\n    </div>\n    <div class=\"cc-list__search-input\">\n      <cometchat-search-input [searchInputStyle]=\"searchStyle\"\n        [placeholderText]=\"searchPlaceholderText\" *ngIf=\"!hideSearch\"\n        [searchIconURL]=\"searchIconURL\"\n        (cc-search-changed)=\"searchEvent($event)\"></cometchat-search-input>\n    </div>\n  </div>\n  <div class=\"cc-list\" #listScroll [ngStyle]=\"listStyles()\">\n    <div class=\"list__top\" #top>\n    </div>\n    <div class=\"decorator__message\"\n      *ngIf=\"state == states.loading || state == states.error  || state == states.empty \"\n      [ngStyle]=\"messageContainerStyle()\">\n      <div class=\"loading__view\" *ngIf=\"state == states.loading \">\n        <cometchat-loader [iconURL]=\"loadingIconURL\" [loaderStyle]=\"iconStyle\">\n        </cometchat-loader>\n        <span class=\"custom__view--loading\"\n          *ngIf=\"state == states.loading  && loadingStateView\">\n          <ng-container *ngTemplateOutlet=\"loadingStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"error__view\" *ngIf=\"state == states.error  && !hideError \">\n        <cometchat-label [labelStyle]=\"errorStyle()\"\n          *ngIf=\"state == states.error  && !hideError && !errorStateView\"\n          [text]=\"errorStateText\">\n        </cometchat-label>\n        <span class=\"custom__view--error\"\n          *ngIf=\"state == states.error  && !hideError && errorStateView\">\n          <ng-container *ngTemplateOutlet=\"errorStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"empty__view\" *ngIf=\"state == states.empty\">\n        <cometchat-label [labelStyle]=\"emptyStyle()\"\n          *ngIf=\"state == states.empty && !emptyStateView\"\n          [text]=\"emptyStateText\">\n        </cometchat-label>\n        <span class=\"custom__view--empty\"\n          *ngIf=\"state == states.empty && emptyStateView\">\n          <ng-container *ngTemplateOutlet=\"emptyStateView\">\n          </ng-container>\n        </span>\n      </div>\n    </div>\n    <div class=\"listitem__view\" *ngFor=\"let item of list; let i = index\">\n      <div class=\"list__section\" *ngIf=\"showSectionHeader\">\n        <div *ngIf=\"!getSectionHeader\">\n          <div *ngIf=\"i > 0; else elseBlock\" class=\"section__separator\">\n            <div *ngIf=\"\n                list[i - 1][sectionHeaderField][0].toUpperCase() !==\n                list[i][sectionHeaderField][0].toUpperCase()\n              \" class=\"section__header\" [ngStyle]=\"sectionHeaderStyle()\">\n              {{ list[i][sectionHeaderField][0].toUpperCase() }}\n            </div>\n          </div>\n          <ng-template #elseBlock>\n            <div class=\"section__header\" [ngStyle]=\"sectionHeaderStyle()\">\n              {{\n              list[i][sectionHeaderField][0].toUpperCase()\n              }}\n            </div>\n          </ng-template>\n        </div>\n        <div *ngIf=\"getSectionHeader && getSectionHeader(item,i)\"\n          [ngStyle]=\"sectionHeaderStyle()\">\n          <cometchat-date [timestamp]=\"getSectionHeader(item,i)\"\n            [pattern]=\"DateSeparatorPattern\" [dateStyle]=\"dateSeparatorStyle\">\n          </cometchat-date>\n        </div>\n\n      </div>\n      <ng-container\n        *ngTemplateOutlet=\"listItemView;context:{ $implicit: item }\">\n      </ng-container>\n    </div>\n    <div class=\"list__bottom\" #bottom>\n    </div>\n  </div>\n</div>\n", styles: [".cc-list{display:flex;flex-direction:column;width:100%;overflow-y:auto;overflow-x:hidden}.cc-list__wrapper{height:100%;width:100%;display:flex;flex-direction:column}.listitem__view{display:flex;flex-direction:column}.section__header{padding:4px}.list__title{width:90%;margin:4px 0;padding-left:8px}.user__section{padding:8px}.cc-list__search-input{height:-moz-fit-content;height:fit-content;margin:0 8px}.list__header{width:100%}.list__section{margin-left:8px}.decorator__message--loading{display:block;height:24px;width:24px;margin-right:30px}.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%}.list__title{margin-bottom:8px}.cc-list::-webkit-scrollbar{background:transparent;width:8px}.cc-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.error__view,.empty__view{text-align:center;width:100%;text-overflow:ellipsis;text-wrap:balance}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { listScroll: [{
                 type: ViewChild,
                 args: ["listScroll", { static: false }]
@@ -3882,6 +3889,7 @@ class CometChatUsersComponent {
         this.firstReload = false;
         this.connectionListenerId = "connection_" + new Date().getTime();
         this.previousSearchKeyword = "";
+        this.isWebsocketReconnected = false;
         this.onScrolledToBottom = null;
         this.fetchUsersOnSearchKeyWordChange = () => {
             if (this.fetchingUsers) {
@@ -3988,7 +3996,13 @@ class CometChatUsersComponent {
                         }
                         else {
                             if (!this.disableLoadingState) {
-                                this.usersList = [...this.usersList, ...userList];
+                                if (this.isWebsocketReconnected) {
+                                    this.usersList = userList;
+                                    this.isWebsocketReconnected = false;
+                                }
+                                else {
+                                    this.usersList = [...this.usersList, ...userList];
+                                }
                             }
                             else {
                                 if (this.searchKeyword != this.previousSearchKeyword ||
@@ -4040,9 +4054,11 @@ class CometChatUsersComponent {
                     this.setRequestBuilder();
                     if (!this.disableLoadingState) {
                         this.usersList = [];
+                        this.ref.detectChanges();
+                    }
+                    if (!this.fetchingUsers) {
+                        this.fetchNextUsersList();
                     }
-                    this.ref.detectChanges();
-                    this.fetchNextUsersList();
                 }, 500);
             }
             catch (error) {
@@ -4065,6 +4081,7 @@ class CometChatUsersComponent {
     ngOnInit() {
         this.firstReload = true;
         this.state = States.loading;
+        this.isWebsocketReconnected = false;
         this.setThemeStyle();
         this.subscribeToEvents();
         CometChat.getLoggedinUser()
@@ -4133,6 +4150,7 @@ class CometChatUsersComponent {
     attachConnectionListeners() {
         CometChat.addConnectionListener(this.connectionListenerId, new CometChat.ConnectionListener({
             onConnected: () => {
+                this.isWebsocketReconnected = true;
                 console.log("ConnectionListener =>connected");
                 this.fetchNewUsers();
             },
@@ -4140,6 +4158,7 @@ class CometChatUsersComponent {
                 console.log("ConnectionListener => In connecting");
             },
             onDisconnected: () => {
+                this.isWebsocketReconnected = false;
                 console.log("ConnectionListener => On Disconnected");
             },
         }));
@@ -4162,6 +4181,7 @@ class CometChatUsersComponent {
     removeListener() {
         CometChat.removeUserListener(this.userListenerId);
         this.userListenerId = "";
+        CometChat.removeConnectionListener(this.connectionListenerId);
     }
     setRequestBuilder() {
         if (!this.searchKeyword) {
@@ -4564,8 +4584,9 @@ class CometChatAddMembersComponent {
         actionMessage.setSender(this.loggedInUser);
         actionMessage.setConversationId("group_" + this.group.getGuid());
         actionMessage.setMuid(CometChatUIKitUtility.ID());
-        actionMessage.setMessage(`${this.loggedInUser?.getName()} added ${actionOn.getUid()}`);
+        actionMessage.setMessage(`${this.loggedInUser?.getName()} added ${actionOn.getName()}`);
         actionMessage.setSentAt(CometChatUIKitUtility.getUnixTimestamp());
+        console.log(this.actionMessagesList);
         this.actionMessagesList.push(actionMessage);
     }
     setAddMembersStyle() {
@@ -6182,6 +6203,11 @@ class CometChatConversationsComponent {
             !this.disableUsersPresence) {
             return this.statusColor[user.getStatus()];
         }
+        else if (conversation.getConversationType() ==
+            CometChatUIKitConstants.MessageReceiverType.group) {
+            let group = conversation.getConversationWith();
+            return this.statusColor[group.getType()];
+        }
     }
     getExtensionData(messageObject) {
         let messageText;
@@ -6222,7 +6248,8 @@ class CometChatConversationsComponent {
         let image = "";
         if (conversation.getConversationType() ==
             CometChatUIKitConstants.MessageReceiverType.group) {
-            switch (conversation.getConversationType()) {
+            let group = conversation.getConversationWith();
+            switch (group.getType()) {
                 case CometChatUIKitConstants.GroupTypes.password:
                     image = this.protectedGroupIcon;
                     break;
@@ -7870,6 +7897,7 @@ class CometChatMessageInformationComponent {
             textColor: "black"
         };
         this.dateStyle = {};
+        this.loggedInUser = null;
         this.dividerStyle = {};
         this.states = States.loading;
         this.closeButtonStyle = () => {
@@ -7910,8 +7938,13 @@ class CometChatMessageInformationComponent {
     }
     ngOnInit() {
         this.setTheme();
-        this.getMessageReceipts();
-        this.addMessageEventListeners();
+        CometChatUIKit.getLoggedinUser().then((user) => {
+            if (user) {
+                this.loggedInUser = user;
+                this.getMessageReceipts();
+                this.addMessageEventListeners();
+            }
+        });
     }
     setTheme() {
         this.setMessageInfoStyle();
@@ -8023,7 +8056,7 @@ class CometChatMessageInformationComponent {
             this.states = States.loading;
             this.isUserType = false;
             CometChat.getMessageReceipts(this.message.getId()).then((receipts) => {
-                this.receipts = receipts;
+                this.receipts = receipts.filter((receipt) => receipt.getSender().getUid() !== this.loggedInUser?.getUid());
                 this.states = this.receipts.length > 0 ? States.loaded : States.empty;
                 this.ref.detectChanges();
             })
@@ -8775,25 +8808,17 @@ class CometChatMessageListComponent {
                             .build();
                 }
                 else {
+                    this.requestBuilder = new CometChat.MessagesRequestBuilder()
+                        .setLimit(this.limit)
+                        .setTypes(this.types)
+                        .setMessageId(this.messagesList[0].getId())
+                        .setCategories(this.categories)
+                        .hideReplies(true);
                     if (this.user) {
-                        this.requestBuilder = new CometChat.MessagesRequestBuilder()
-                            .setUID(this.user.getUid())
-                            .setLimit(this.limit)
-                            .setTypes(this.types)
-                            .setMessageId(this.messagesList[0].getId())
-                            .setCategories(this.categories)
-                            .hideReplies(true)
-                            .build();
+                        this.requestBuilder.setUID(this.user?.getUid()).build();
                     }
-                    else {
-                        this.requestBuilder = new CometChat.MessagesRequestBuilder()
-                            .setGUID(this.group.getGuid())
-                            .setLimit(this.limit)
-                            .setTypes(this.types)
-                            .setMessageId(this.messagesList[0].getId())
-                            .setCategories(this.categories)
-                            .hideReplies(true)
-                            .build();
+                    else if (this.group) {
+                        this.requestBuilder.setGUID(this.group?.getGuid()).build();
                     }
                 }
             }
@@ -8832,8 +8857,9 @@ class CometChatMessageListComponent {
                         this.lastMessageId = Number(messageList[messageList.length - 1].getId());
                     }
                     let lastMessage = messageList[messageList.length - 1];
-                    if (lastMessage?.getSender()?.getUid() !=
-                        this.loggedInUser?.getUid() &&
+                    let isSentByMe = lastMessage?.getSender()?.getUid() ==
+                        this.loggedInUser?.getUid();
+                    if (!isSentByMe &&
                         !lastMessage.getDeliveredAt()) {
                         //mark the message as delivered
                         if (!this.disableReceipt) {
@@ -8845,7 +8871,7 @@ class CometChatMessageListComponent {
                             });
                         }
                     }
-                    if (!lastMessage?.getReadAt()) {
+                    if (!lastMessage?.getReadAt() && !isSentByMe) {
                         if (!this.disableReceipt) {
                             CometChat.markAsRead(lastMessage)
                                 .then((receipt) => {
@@ -8926,25 +8952,17 @@ class CometChatMessageListComponent {
                             .build();
                 }
                 else {
+                    this.requestBuilder = new CometChat.MessagesRequestBuilder()
+                        .setLimit(this.limit)
+                        .setTypes(this.types)
+                        .setMessageId(messageId)
+                        .setCategories(this.categories)
+                        .hideReplies(true);
                     if (this.user) {
-                        this.requestBuilder = new CometChat.MessagesRequestBuilder()
-                            .setUID(this.user.getUid())
-                            .setLimit(this.limit)
-                            .setTypes(this.types)
-                            .setMessageId(messageId)
-                            .setCategories(this.categories)
-                            .hideReplies(true)
-                            .build();
+                        this.requestBuilder.setUID(this.user?.getUid()).build();
                     }
-                    else {
-                        this.requestBuilder = new CometChat.MessagesRequestBuilder()
-                            .setGUID(this.group.getGuid())
-                            .setLimit(this.limit)
-                            .setTypes(this.types)
-                            .setMessageId(messageId)
-                            .setCategories(this.categories)
-                            .hideReplies(true)
-                            .build();
+                    else if (this.group) {
+                        this.requestBuilder.setGUID(this.group?.getGuid()).build();
                     }
                 }
                 this.requestBuilder
@@ -9892,6 +9910,7 @@ class CometChatMessageListComponent {
                 //Removing Previous Conversation Listeners
                 CometChat.removeGroupListener(this.groupListenerId);
                 CometChat.removeCallListener(this.callListenerId);
+                CometChat.removeConnectionListener(this.connectionListenerId);
                 this.groupListenerId = "group_" + new Date().getTime();
                 this.callListenerId = "call_" + new Date().getTime();
                 // Attach MessageListeners for the new conversation
@@ -9949,6 +9968,7 @@ class CometChatMessageListComponent {
             //Removing Message Listeners
             CometChat.removeGroupListener(this.groupListenerId);
             CometChat.removeCallListener(this.callListenerId);
+            CometChat.removeConnectionListener(this.connectionListenerId);
             this.onTextMessageReceived?.unsubscribe();
             this.onMediaMessageReceived?.unsubscribe();
             this.onMessageReactionAdded?.unsubscribe();
@@ -11089,26 +11109,18 @@ class CometChatMessageListComponent {
         }
     }
     fetchActionMessages() {
-        let requestBuilder;
+        let requestBuilder = new CometChat.MessagesRequestBuilder()
+            .setType(CometChatUIKitConstants.MessageCategory.message)
+            .setCategory(CometChatUIKitConstants.MessageCategory.action)
+            .setMessageId(this.lastMessageId)
+            .setLimit(this.limit);
         if (this.user) {
-            requestBuilder = new CometChat.MessagesRequestBuilder()
-                .setUID(this.user.getUid())
-                .setType(CometChatUIKitConstants.MessageCategory.message)
-                .setCategory(CometChatUIKitConstants.MessageCategory.action)
-                .setMessageId(this.lastMessageId)
-                .setLimit(this.limit)
-                .build();
+            requestBuilder.setUID(this.user?.getUid());
         }
         else if (this.group) {
-            requestBuilder = new CometChat.MessagesRequestBuilder()
-                .setGUID(this.group.getGuid())
-                .setType(CometChatUIKitConstants.MessageCategory.message)
-                .setMessageId(this.lastMessageId)
-                .setLimit(this.limit)
-                .setCategory(CometChatUIKitConstants.MessageCategory.action)
-                .build();
+            requestBuilder.setGUID(this.group?.getGuid());
         }
-        requestBuilder
+        requestBuilder.build()
             .fetchNext()
             .then((messages) => {
             if (messages && messages.length > 0) {
@@ -11144,7 +11156,7 @@ class CometChatMessageListComponent {
                 console.log("ConnectionListener => connected");
             },
             onDisconnected: () => {
-                this.isWebsocketReconnected = true;
+                this.isWebsocketReconnected = false;
                 console.log("ConnectionListener => On Disconnected");
             },
         }));
@@ -12822,7 +12834,7 @@ class CometChatGroupMembersComponent {
         actionMessage.setSender(this.loggedInUser);
         actionMessage.setConversationId("group_" + this.group.getGuid());
         actionMessage.setMuid(CometChatUIKitUtility.ID());
-        actionMessage.setMessage(`${this.loggedInUser?.getName()} ${action} ${actionOn.getUid()}`);
+        actionMessage.setMessage(`${this.loggedInUser?.getName()} ${action} ${actionOn.getName()}`);
         actionMessage.setSentAt(CometChatUIKitUtility.getUnixTimestamp());
         actionMessage.setReceiverType(CometChatUIKitConstants.MessageReceiverType.group);
         actionMessage.data = {
@@ -14070,9 +14082,6 @@ class CometChatMessageComposerComponent {
             this.showAiFeatures = false;
             this.showAiBotList = false;
         }
-        else {
-            this.aiButtonRef?.nativeElement?.click();
-        }
     }
     callConversationSummaryMethod() {
         this.showAiFeatures = false;
@@ -14831,10 +14840,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", backButtonIconURL: "backButtonIconURL", mentionsWarningText: "mentionsWarningText", mentionsWarningStyle: "mentionsWarningStyle", messageComposerStyle: "messageComposerStyle", onSendButtonClick: "onSendButtonClick", onError: "onError", backdropStyle: "backdropStyle", actionSheetStyle: "actionSheetStyle", aiActionSheetStyle: "aiActionSheetStyle", hideVoiceRecording: "hideVoiceRecording", mediaRecorderStyle: "mediaRecorderStyle", aiOptionsStyle: "aiOptionsStyle", aiIconURL: "aiIconURL", voiceRecordingIconURL: "voiceRecordingIconURL", voiceRecordingCloseIconURL: "voiceRecordingCloseIconURL", voiceRecordingStartIconURL: "voiceRecordingStartIconURL", voiceRecordingStopIconURL: "voiceRecordingStopIconURL", voiceRecordingSubmitIconURL: "voiceRecordingSubmitIconURL", userMemberWrapperConfiguration: "userMemberWrapperConfiguration", disableMentions: "disableMentions", textFormatters: "textFormatters" }, outputs: { childEvent: "childEvent" }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "emojiButtonRef", first: true, predicate: ["emojiButtonRef"], descendants: true }, { propertyName: "actionSheetRef", first: true, predicate: ["actionSheetRef"], descendants: true }, { propertyName: "stickerButtonRef", first: true, predicate: ["stickerButtonRef"], descendants: true }, { propertyName: "mediaRecordedRef", first: true, predicate: ["mediaRecordedRef"], descendants: true }, { propertyName: "aiButtonRef", first: true, predicate: ["aiButtonRef"], descendants: true }, { propertyName: "userMemberWrapperRef", first: true, predicate: ["userMemberWrapperRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-message-composer__wrapper\" [ngStyle]=\"composerWrapperStyle()\">\n  <div class=\"cc-messagecomposer__mentions\" #userMemberWrapperRef>\n    <cometchat-user-member-wrapper *ngIf=\"showListForMentions\"\n      [userMemberListType]=\"userMemberListType\"\n      [onItemClick]=\"userMemberWrapperConfiguration.onItemClick || defaultMentionsItemClickHandler\"\n      [usersRequestBuilder]=\"usersRequestBuilder\"\n      [searchKeyword]=\"mentionsSearchTerm\"\n      [subtitleView]=\"userMemberWrapperConfiguration.subtitleView\"\n      [disableUsersPresence]=\"userMemberWrapperConfiguration.disableUsersPresence\"\n      [avatarStyle]=\"userMemberWrapperConfiguration.avatarStyle\"\n      [listItemView]=\"userMemberWrapperConfiguration.listItemView\"\n      [statusIndicatorStyle]=\"userMemberWrapperConfiguration.statusIndicatorStyle\"\n      [userPresencePlacement]=\"userMemberWrapperConfiguration.userPresencePlacement\"\n      [hideSeperator]=\"userMemberWrapperConfiguration.hideSeparator\"\n      [loadingStateView]=\"userMemberWrapperConfiguration.loadingStateView\"\n      [onEmpty]=\"defaultOnEmptyForMentions\"\n      [loadingIconUrl]=\"userMemberWrapperConfiguration.loadingIconURL\"\n      [group]=\"group\" [groupMemberRequestBuilder]=\"groupMembersRequestBuilder\"\n      [disableLoadingState]=\"true\"\n      [onError]=\"defaultOnEmptyForMentions\"></cometchat-user-member-wrapper>\n\n    <div *ngIf=\"showMentionsCountWarning\"\n      class=\"cc-messagecomposer__mentions-limit-exceeded\">\n      <cometchat-icon-button\n        [text]=\"mentionsWarningText || localize('MENTIONS_LIMIT_WARNING_MESSAGE')\"\n        [iconURL]=\"InfoSimpleIcon\"\n        [buttonStyle]=\"getMentionInfoIconStyle()\"></cometchat-icon-button>\n    </div>\n\n  </div>\n  <div class=\"cc-message-composer__header-view\"\n    *ngIf=\"headerView; else messagePreview\">\n    <ng-container\n      *ngTemplateOutlet=\"headerView;context:{ $implicit: user ?? group, composerId:composerId }\">\n    </ng-container>\n  </div>\n  <ng-template #messagePreview>\n    <div class=\"cc-message-composer__header-view\" *ngIf=\"showPreview\">\n      <cometchat-preview [previewStyle]=\"previewStyle\"\n        [previewSubtitle]=\"editPreviewText\"\n        (cc-preview-close-clicked)=\"closePreview()\"> </cometchat-preview>\n    </div>\n  </ng-template>\n  <div class=\"cc-message-composer__input\">\n\n    <cometchat-text-input (cc-text-input-entered)=\"sendMessageOnEnter($event)\"\n      #inputRef [text]=\"text\"\n      (cc-text-input-changed)=\"messageInputChanged($event)\"\n      [textInputStyle]=\"textInputStyle\" [placeholderText]=\"placeholderText\"\n      [auxiliaryButtonAlignment]=\"auxiliaryButtonsAlignment\"\n      [textFormatters]=\"textFormatters\">\n\n      <div data-slot=\"secondaryView\">\n        <div *ngIf=\"secondaryButtonView;else secondaryButton\">\n          <ng-container\n            *ngTemplateOutlet=\"secondaryButtonView;context:{ $implicit: user ?? group, composerId:composerId }\">\n          </ng-container>\n        </div>\n        <ng-template #secondaryButton>\n          <div class=\"cc-message-composer__attachbutton\">\n            <cometchat-popover\n              (cc-popover-outside-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\" data-slot=\"auxilaryView\">\n        <div class=\"cc-message-composer__custom-auxiliary-view\"\n          *ngIf=\"auxilaryButtonView\">\n          <ng-container\n            *ngTemplateOutlet=\"auxilaryButtonView;context:{ $implicit: user ?? group, composerId:composerId }\">\n          </ng-container>\n        </div>\n        <!-- AI Cards -->\n        <div class=\"cc-message-composer__stickerkeyboard\" *ngIf=\"isAiEnabled\">\n          <cometchat-popover (cc-popover-click)=\"openStickerKeyboard($event)\"\n            [popoverStyle]=\"aiPopover\" [placement]=\"auxilaryPlacement\">\n            <cometchat-ai-card [state]=\"smartReplyState\"\n              *ngIf=\"showSmartReply && !showActionSheetItemAI && !showAiBotList\"\n              slot=\"content\" [loadingStateText]=\"loadingStateText\"\n              [emptyStateText]=\"emptyStateText\"\n              [errorStateText]=\"errorStateText\">\n              <div slot=\"loadedView\" class=\"smart-replies-wrapper\">\n\n                <div class=\"cc-message-composer__smartreply-header\">\n                  <div class=\"cc-message-composer__back-button\">\n                    <cometchat-button\n                      *ngIf=\"repliesArray && repliesArray.length > 0 \"\n                      [iconURL]=\"backButtonIconURL\"\n                      (cc-button-clicked)=\"onAiBackButtonClick()\"\n                      [buttonStyle]=\"backButtonStyle()\">\n                    </cometchat-button>\n                  </div>\n                  <div class=\"cc-message-composer__smartreply-header-view\">\n                    <p>{{ localize(\"SUGGEST_A_REPLY\") }}</p>\n                  </div>\n                </div>\n\n                <div class=\"cc-message-composer__smartreply-content\">\n                  <smart-replies\n                    *ngIf=\"repliesArray && repliesArray.length > 0 \"\n                    [smartReplyStyle]=\"smartReplyStyle\" [replies]=\"repliesArray\"\n                    [closeIconURL]=\"''\" (cc-reply-clicked)=\"sendReply($event)\">\n                  </smart-replies>\n                </div>\n\n\n\n\n\n              </div>\n            </cometchat-ai-card>\n\n            <div *ngIf=\"showAiBotList  && !showActionSheetItemAI\"\n              slot=\"content\">\n              <div class=\"cc-message-composer__aibotlist\">\n                <cometchat-button *ngIf=\" aiBotList && aiBotList.length> 1 \"\n                  [iconURL]=\"backButtonIconURL\"\n                  (cc-button-clicked)=\"onAiBackButtonClick()\"\n                  [buttonStyle]=\"backButtonStyle()\">\n                </cometchat-button>\n                <p>{{ localize(\"COMETCHAT_ASK_AI_BOT\") }}</p>\n              </div>\n              <cometchat-action-sheet\n                *ngIf=\"showAiBotList  && !showActionSheetItemAI\" slot=\"content\"\n                [actions]=\"aiActionButtons\" [title]=\"'AI'\"\n                [actionSheetStyle]=\"aiActionSheetStyle\" [hideLayoutMode]=\"true\"\n                (cc-actionsheet-clicked)=\"handleActions($event)\">\n              </cometchat-action-sheet>\n            </div>\n\n            <cometchat-action-sheet *ngIf=\"showActionSheetItemAI\" slot=\"content\"\n              [actions]=\"buttons\" [title]=\"'AI'\"\n              [actionSheetStyle]=\"aiActionSheetStyle\" [hideLayoutMode]=\"true\"\n              (cc-actionsheet-clicked)=\"handleActions($event)\">\n            </cometchat-action-sheet>\n\n            <cometchat-button [hoverText]=\"localize('AI')\" slot=\"children\"\n              #aiButtonRef (cc-button-clicked)=\"openAiFeatures($event)\"\n              [iconURL]=\"!showAiFeatures ? aiIconURL : closeButtonIconURL\"\n              [buttonStyle]=\"stickerButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n\n        <div class=\"cc-message-composer__stickerkeyboard\"\n          *ngIf=\"enableStickerKeyboard\">\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 data-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)\">\n            </cometchat-button>\n          </div>\n          <div class=\"cc-message-composer__livereaction\"\n            *ngIf=\"!hideLiveReaction && !showSendButton\">\n            <cometchat-button [iconURL]=\"LiveReactionIconURL\"\n              [hoverText]=\"localize('LIVE_REACTION')\"\n              [buttonStyle]=\"liveReactionStyle\"\n              (cc-button-clicked)=\"sendReaction()\"></cometchat-button>\n          </div>\n        </ng-template>\n      </div>\n    </cometchat-text-input>\n  </div>\n</div>\n\n<input class=\"cc-message-composer__mediainput\" #inputElement\n  (change)=\"inputChangeHandler($event)\" />\n<cometchat-backdrop *ngIf=\"showCreatePolls\" [backdropStyle]=\"backdropStyle\">\n  <create-poll [user]=\"user\" [group]=\"group\"\n    (cc-close-clicked)=\"closeCreatePolls()\"\n    [createPollStyle]=\"createPollStyle\"></create-poll>\n</cometchat-backdrop>\n", styles: [".cc-message-composer__sendbutton,.cc-message-composer__livereaction{margin:0 5px}.cc-message-composer__wrapper{height:100%;width:100%;position:relative;padding:14px 16px}.cc-message-composer__header-view{height:-moz-fit-content;height:fit-content;width:100%;bottom:120%;padding:0 0 1px}.cc-message-composer__mediainput{display:none}.cc-message-composer__auxiliary{display:flex;gap:8px}.cc-message-composer__smartreply-header{width:100%;display:flex;align-items:center;position:absolute;padding:10px;top:0;z-index:1}.cc-message-composer__back-button{margin-left:2%}.cc-message-composer__smartreply-header-view{margin-left:14%}.cc-message-composer__smartreply-content{max-height:200px}.cc-message-composer__aibotlist{display:flex;padding:10px;align-items:center;gap:45px;font-size:medium}.cc-messagecomposer__mentions{max-height:196px;min-height:28px;overflow:hidden;position:absolute;width:100%;left:50%;transform:translate(-50%,-100%);z-index:2;display:flex;padding:0 16px 1px 14px;box-sizing:border-box}.cc-messagecomposer__mentions cometchat-user-member-wrapper{max-height:196px;min-height:28px;overflow:hidden;width:100%;box-sizing:border-box;min-height:45px}.cc-messagecomposer__mentions::-webkit-scrollbar{display:none}.cc-messagecomposer__mentions-limit-exceeded{margin-top:20px;left:2px;position:relative;padding-left:13px;background-color:#fff}*{box-sizing:border-box}cometchat-ai-card{height:100%;width:100%;display:flex;border-radius:8px;overflow-y:auto;justify-content:center;align-items:center}cometchat-popover{position:relative}\n"], components: [{ type: CometChatUserMemberWrapperComponent, selector: "cometchat-user-member-wrapper", inputs: ["userMemberListType", "onItemClick", "listItemView", "avatarStyle", "statusIndicatorStyle", "searchKeyword", "group", "subtitleView", "usersRequestBuilder", "disableUsersPresence", "userPresencePlacement", "hideSeperator", "loadingStateView", "onEmpty", "onError", "groupMemberRequestBuilder", "loadingIconUrl", "disableLoadingState"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CometChatMessageComposerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatMessageComposerComponent, selector: "cometchat-message-composer", inputs: { user: "user", group: "group", disableSoundForMessages: "disableSoundForMessages", customSoundForMessage: "customSoundForMessage", disableTypingEvents: "disableTypingEvents", text: "text", placeholderText: "placeholderText", headerView: "headerView", onTextChange: "onTextChange", attachmentIconURL: "attachmentIconURL", attachmentOptions: "attachmentOptions", secondaryButtonView: "secondaryButtonView", auxilaryButtonView: "auxilaryButtonView", auxiliaryButtonsAlignment: "auxiliaryButtonsAlignment", sendButtonView: "sendButtonView", parentMessageId: "parentMessageId", hideLiveReaction: "hideLiveReaction", LiveReactionIconURL: "LiveReactionIconURL", backButtonIconURL: "backButtonIconURL", mentionsWarningText: "mentionsWarningText", mentionsWarningStyle: "mentionsWarningStyle", messageComposerStyle: "messageComposerStyle", onSendButtonClick: "onSendButtonClick", onError: "onError", backdropStyle: "backdropStyle", actionSheetStyle: "actionSheetStyle", aiActionSheetStyle: "aiActionSheetStyle", hideVoiceRecording: "hideVoiceRecording", mediaRecorderStyle: "mediaRecorderStyle", aiOptionsStyle: "aiOptionsStyle", aiIconURL: "aiIconURL", voiceRecordingIconURL: "voiceRecordingIconURL", voiceRecordingCloseIconURL: "voiceRecordingCloseIconURL", voiceRecordingStartIconURL: "voiceRecordingStartIconURL", voiceRecordingStopIconURL: "voiceRecordingStopIconURL", voiceRecordingSubmitIconURL: "voiceRecordingSubmitIconURL", userMemberWrapperConfiguration: "userMemberWrapperConfiguration", disableMentions: "disableMentions", textFormatters: "textFormatters" }, outputs: { childEvent: "childEvent" }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "emojiButtonRef", first: true, predicate: ["emojiButtonRef"], descendants: true }, { propertyName: "actionSheetRef", first: true, predicate: ["actionSheetRef"], descendants: true }, { propertyName: "stickerButtonRef", first: true, predicate: ["stickerButtonRef"], descendants: true }, { propertyName: "mediaRecordedRef", first: true, predicate: ["mediaRecordedRef"], descendants: true }, { propertyName: "aiButtonRef", first: true, predicate: ["aiButtonRef"], descendants: true }, { propertyName: "userMemberWrapperRef", first: true, predicate: ["userMemberWrapperRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-message-composer__wrapper\" [ngStyle]=\"composerWrapperStyle()\">\n  <div class=\"cc-messagecomposer__mentions\" #userMemberWrapperRef>\n    <cometchat-user-member-wrapper *ngIf=\"showListForMentions\"\n      [userMemberListType]=\"userMemberListType\"\n      [onItemClick]=\"userMemberWrapperConfiguration.onItemClick || defaultMentionsItemClickHandler\"\n      [usersRequestBuilder]=\"usersRequestBuilder\"\n      [searchKeyword]=\"mentionsSearchTerm\"\n      [subtitleView]=\"userMemberWrapperConfiguration.subtitleView\"\n      [disableUsersPresence]=\"userMemberWrapperConfiguration.disableUsersPresence\"\n      [avatarStyle]=\"userMemberWrapperConfiguration.avatarStyle\"\n      [listItemView]=\"userMemberWrapperConfiguration.listItemView\"\n      [statusIndicatorStyle]=\"userMemberWrapperConfiguration.statusIndicatorStyle\"\n      [userPresencePlacement]=\"userMemberWrapperConfiguration.userPresencePlacement\"\n      [hideSeperator]=\"userMemberWrapperConfiguration.hideSeparator\"\n      [loadingStateView]=\"userMemberWrapperConfiguration.loadingStateView\"\n      [onEmpty]=\"defaultOnEmptyForMentions\"\n      [loadingIconUrl]=\"userMemberWrapperConfiguration.loadingIconURL\"\n      [group]=\"group\" [groupMemberRequestBuilder]=\"groupMembersRequestBuilder\"\n      [disableLoadingState]=\"true\"\n      [onError]=\"defaultOnEmptyForMentions\"></cometchat-user-member-wrapper>\n\n    <div *ngIf=\"showMentionsCountWarning\"\n      class=\"cc-messagecomposer__mentions-limit-exceeded\">\n      <cometchat-icon-button\n        [text]=\"mentionsWarningText || localize('MENTIONS_LIMIT_WARNING_MESSAGE')\"\n        [iconURL]=\"InfoSimpleIcon\"\n        [buttonStyle]=\"getMentionInfoIconStyle()\"></cometchat-icon-button>\n    </div>\n\n  </div>\n  <div class=\"cc-message-composer__header-view\"\n    *ngIf=\"headerView; else messagePreview\">\n    <ng-container\n      *ngTemplateOutlet=\"headerView;context:{ $implicit: user ?? group, composerId:composerId }\">\n    </ng-container>\n  </div>\n  <ng-template #messagePreview>\n    <div class=\"cc-message-composer__header-view\" *ngIf=\"showPreview\">\n      <cometchat-preview [previewStyle]=\"previewStyle\"\n        [previewSubtitle]=\"editPreviewText\"\n        (cc-preview-close-clicked)=\"closePreview()\"> </cometchat-preview>\n    </div>\n  </ng-template>\n  <div class=\"cc-message-composer__input\">\n\n    <cometchat-text-input (cc-text-input-entered)=\"sendMessageOnEnter($event)\"\n      #inputRef [text]=\"text\"\n      (cc-text-input-changed)=\"messageInputChanged($event)\"\n      [textInputStyle]=\"textInputStyle\" [placeholderText]=\"placeholderText\"\n      [auxiliaryButtonAlignment]=\"auxiliaryButtonsAlignment\"\n      [textFormatters]=\"textFormatters\">\n\n      <div data-slot=\"secondaryView\">\n        <div *ngIf=\"secondaryButtonView;else secondaryButton\">\n          <ng-container\n            *ngTemplateOutlet=\"secondaryButtonView;context:{ $implicit: user ?? group, composerId:composerId }\">\n          </ng-container>\n        </div>\n        <ng-template #secondaryButton>\n          <div class=\"cc-message-composer__attachbutton\">\n            <cometchat-popover\n              (cc-popover-outside-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\" data-slot=\"auxilaryView\">\n        <div class=\"cc-message-composer__custom-auxiliary-view\"\n          *ngIf=\"auxilaryButtonView\">\n          <ng-container\n            *ngTemplateOutlet=\"auxilaryButtonView;context:{ $implicit: user ?? group, composerId:composerId }\">\n          </ng-container>\n        </div>\n        <!-- AI Cards -->\n        <div class=\"cc-message-composer__stickerkeyboard\">\n          <cometchat-popover (cc-popover-click)=\"openStickerKeyboard($event)\"\n            [popoverStyle]=\"aiPopover\" [placement]=\"auxilaryPlacement\">\n            <cometchat-ai-card [state]=\"smartReplyState\"\n              *ngIf=\"showSmartReply && !showActionSheetItemAI && !showAiBotList\"\n              slot=\"content\" [loadingStateText]=\"loadingStateText\"\n              [emptyStateText]=\"emptyStateText\"\n              [errorStateText]=\"errorStateText\">\n              <div slot=\"loadedView\" class=\"smart-replies-wrapper\">\n\n                <div class=\"cc-message-composer__smartreply-header\">\n                  <div class=\"cc-message-composer__back-button\">\n                    <cometchat-button\n                      *ngIf=\"repliesArray && repliesArray.length > 0 \"\n                      [iconURL]=\"backButtonIconURL\"\n                      (cc-button-clicked)=\"onAiBackButtonClick()\"\n                      [buttonStyle]=\"backButtonStyle()\">\n                    </cometchat-button>\n                  </div>\n                  <div class=\"cc-message-composer__smartreply-header-view\">\n                    <p>{{ localize(\"SUGGEST_A_REPLY\") }}</p>\n                  </div>\n                </div>\n\n                <div class=\"cc-message-composer__smartreply-content\">\n                  <smart-replies\n                    *ngIf=\"repliesArray && repliesArray.length > 0 \"\n                    [smartReplyStyle]=\"smartReplyStyle\" [replies]=\"repliesArray\"\n                    [closeIconURL]=\"''\" (cc-reply-clicked)=\"sendReply($event)\">\n                  </smart-replies>\n                </div>\n\n\n\n\n\n              </div>\n            </cometchat-ai-card>\n\n            <div *ngIf=\"showAiBotList  && !showActionSheetItemAI\"\n              slot=\"content\">\n              <div class=\"cc-message-composer__aibotlist\">\n                <cometchat-button *ngIf=\" aiBotList && aiBotList.length> 1 \"\n                  [iconURL]=\"backButtonIconURL\"\n                  (cc-button-clicked)=\"onAiBackButtonClick()\"\n                  [buttonStyle]=\"backButtonStyle()\">\n                </cometchat-button>\n                <p>{{ localize(\"COMETCHAT_ASK_AI_BOT\") }}</p>\n              </div>\n              <cometchat-action-sheet\n                *ngIf=\"showAiBotList  && !showActionSheetItemAI\" slot=\"content\"\n                [actions]=\"aiActionButtons\" [title]=\"'AI'\"\n                [actionSheetStyle]=\"aiActionSheetStyle\" [hideLayoutMode]=\"true\"\n                (cc-actionsheet-clicked)=\"handleActions($event)\">\n              </cometchat-action-sheet>\n            </div>\n\n            <cometchat-action-sheet *ngIf=\"showActionSheetItemAI\" slot=\"content\"\n              [actions]=\"buttons\" [title]=\"'AI'\"\n              [actionSheetStyle]=\"aiActionSheetStyle\" [hideLayoutMode]=\"true\"\n              (cc-actionsheet-clicked)=\"handleActions($event)\">\n            </cometchat-action-sheet>\n\n            <cometchat-button *ngIf=\"isAiEnabled\" [hoverText]=\"localize('AI')\"\n              slot=\"children\" #aiButtonRef\n              (cc-button-clicked)=\"openAiFeatures($event)\"\n              [iconURL]=\"!showAiFeatures ? aiIconURL : closeButtonIconURL\"\n              [buttonStyle]=\"stickerButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n\n        <div class=\"cc-message-composer__stickerkeyboard\"\n          *ngIf=\"enableStickerKeyboard\">\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 data-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)\">\n            </cometchat-button>\n          </div>\n          <div class=\"cc-message-composer__livereaction\"\n            *ngIf=\"!hideLiveReaction && !showSendButton\">\n            <cometchat-button [iconURL]=\"LiveReactionIconURL\"\n              [hoverText]=\"localize('LIVE_REACTION')\"\n              [buttonStyle]=\"liveReactionStyle\"\n              (cc-button-clicked)=\"sendReaction()\"></cometchat-button>\n          </div>\n        </ng-template>\n      </div>\n    </cometchat-text-input>\n  </div>\n</div>\n\n<input class=\"cc-message-composer__mediainput\" #inputElement\n  (change)=\"inputChangeHandler($event)\" />\n<cometchat-backdrop *ngIf=\"showCreatePolls\" [backdropStyle]=\"backdropStyle\">\n  <create-poll [user]=\"user\" [group]=\"group\"\n    (cc-close-clicked)=\"closeCreatePolls()\"\n    [createPollStyle]=\"createPollStyle\"></create-poll>\n</cometchat-backdrop>\n", styles: [".cc-message-composer__sendbutton,.cc-message-composer__livereaction{margin:0 5px}.cc-message-composer__wrapper{height:100%;width:100%;position:relative;padding:14px 16px}.cc-message-composer__header-view{height:-moz-fit-content;height:fit-content;width:100%;bottom:120%;padding:0 0 1px}.cc-message-composer__mediainput{display:none}.cc-message-composer__auxiliary{display:flex;gap:8px}.cc-message-composer__smartreply-header{width:100%;display:flex;align-items:center;position:absolute;padding:10px;top:0;z-index:1}.cc-message-composer__back-button{margin-left:2%}.cc-message-composer__smartreply-header-view{margin-left:14%}.cc-message-composer__smartreply-content{max-height:200px}.cc-message-composer__aibotlist{display:flex;padding:10px;align-items:center;gap:45px;font-size:medium}.cc-messagecomposer__mentions{max-height:196px;min-height:28px;overflow:hidden;position:absolute;width:100%;left:50%;transform:translate(-50%,-100%);z-index:2;display:flex;padding:0 16px 1px 14px;box-sizing:border-box}.cc-messagecomposer__mentions cometchat-user-member-wrapper{max-height:196px;min-height:28px;overflow:hidden;width:100%;box-sizing:border-box;min-height:45px}.cc-messagecomposer__mentions::-webkit-scrollbar{display:none}.cc-messagecomposer__mentions-limit-exceeded{margin-top:20px;left:2px;position:relative;padding-left:13px;background-color:#fff}*{box-sizing:border-box}cometchat-ai-card{height:100%;width:100%;display:flex;border-radius:8px;overflow-y:auto;justify-content:center;align-items:center}cometchat-popover{position:relative}\n"], components: [{ type: CometChatUserMemberWrapperComponent, selector: "cometchat-user-member-wrapper", inputs: ["userMemberListType", "onItemClick", "listItemView", "avatarStyle", "statusIndicatorStyle", "searchKeyword", "group", "subtitleView", "usersRequestBuilder", "disableUsersPresence", "userPresencePlacement", "hideSeperator", "loadingStateView", "onEmpty", "onError", "groupMemberRequestBuilder", "loadingIconUrl", "disableLoadingState"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageComposerComponent, decorators: [{
             type: Component,
-            args: [{ selector: "cometchat-message-composer", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-message-composer__wrapper\" [ngStyle]=\"composerWrapperStyle()\">\n  <div class=\"cc-messagecomposer__mentions\" #userMemberWrapperRef>\n    <cometchat-user-member-wrapper *ngIf=\"showListForMentions\"\n      [userMemberListType]=\"userMemberListType\"\n      [onItemClick]=\"userMemberWrapperConfiguration.onItemClick || defaultMentionsItemClickHandler\"\n      [usersRequestBuilder]=\"usersRequestBuilder\"\n      [searchKeyword]=\"mentionsSearchTerm\"\n      [subtitleView]=\"userMemberWrapperConfiguration.subtitleView\"\n      [disableUsersPresence]=\"userMemberWrapperConfiguration.disableUsersPresence\"\n      [avatarStyle]=\"userMemberWrapperConfiguration.avatarStyle\"\n      [listItemView]=\"userMemberWrapperConfiguration.listItemView\"\n      [statusIndicatorStyle]=\"userMemberWrapperConfiguration.statusIndicatorStyle\"\n      [userPresencePlacement]=\"userMemberWrapperConfiguration.userPresencePlacement\"\n      [hideSeperator]=\"userMemberWrapperConfiguration.hideSeparator\"\n      [loadingStateView]=\"userMemberWrapperConfiguration.loadingStateView\"\n      [onEmpty]=\"defaultOnEmptyForMentions\"\n      [loadingIconUrl]=\"userMemberWrapperConfiguration.loadingIconURL\"\n      [group]=\"group\" [groupMemberRequestBuilder]=\"groupMembersRequestBuilder\"\n      [disableLoadingState]=\"true\"\n      [onError]=\"defaultOnEmptyForMentions\"></cometchat-user-member-wrapper>\n\n    <div *ngIf=\"showMentionsCountWarning\"\n      class=\"cc-messagecomposer__mentions-limit-exceeded\">\n      <cometchat-icon-button\n        [text]=\"mentionsWarningText || localize('MENTIONS_LIMIT_WARNING_MESSAGE')\"\n        [iconURL]=\"InfoSimpleIcon\"\n        [buttonStyle]=\"getMentionInfoIconStyle()\"></cometchat-icon-button>\n    </div>\n\n  </div>\n  <div class=\"cc-message-composer__header-view\"\n    *ngIf=\"headerView; else messagePreview\">\n    <ng-container\n      *ngTemplateOutlet=\"headerView;context:{ $implicit: user ?? group, composerId:composerId }\">\n    </ng-container>\n  </div>\n  <ng-template #messagePreview>\n    <div class=\"cc-message-composer__header-view\" *ngIf=\"showPreview\">\n      <cometchat-preview [previewStyle]=\"previewStyle\"\n        [previewSubtitle]=\"editPreviewText\"\n        (cc-preview-close-clicked)=\"closePreview()\"> </cometchat-preview>\n    </div>\n  </ng-template>\n  <div class=\"cc-message-composer__input\">\n\n    <cometchat-text-input (cc-text-input-entered)=\"sendMessageOnEnter($event)\"\n      #inputRef [text]=\"text\"\n      (cc-text-input-changed)=\"messageInputChanged($event)\"\n      [textInputStyle]=\"textInputStyle\" [placeholderText]=\"placeholderText\"\n      [auxiliaryButtonAlignment]=\"auxiliaryButtonsAlignment\"\n      [textFormatters]=\"textFormatters\">\n\n      <div data-slot=\"secondaryView\">\n        <div *ngIf=\"secondaryButtonView;else secondaryButton\">\n          <ng-container\n            *ngTemplateOutlet=\"secondaryButtonView;context:{ $implicit: user ?? group, composerId:composerId }\">\n          </ng-container>\n        </div>\n        <ng-template #secondaryButton>\n          <div class=\"cc-message-composer__attachbutton\">\n            <cometchat-popover\n              (cc-popover-outside-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\" data-slot=\"auxilaryView\">\n        <div class=\"cc-message-composer__custom-auxiliary-view\"\n          *ngIf=\"auxilaryButtonView\">\n          <ng-container\n            *ngTemplateOutlet=\"auxilaryButtonView;context:{ $implicit: user ?? group, composerId:composerId }\">\n          </ng-container>\n        </div>\n        <!-- AI Cards -->\n        <div class=\"cc-message-composer__stickerkeyboard\" *ngIf=\"isAiEnabled\">\n          <cometchat-popover (cc-popover-click)=\"openStickerKeyboard($event)\"\n            [popoverStyle]=\"aiPopover\" [placement]=\"auxilaryPlacement\">\n            <cometchat-ai-card [state]=\"smartReplyState\"\n              *ngIf=\"showSmartReply && !showActionSheetItemAI && !showAiBotList\"\n              slot=\"content\" [loadingStateText]=\"loadingStateText\"\n              [emptyStateText]=\"emptyStateText\"\n              [errorStateText]=\"errorStateText\">\n              <div slot=\"loadedView\" class=\"smart-replies-wrapper\">\n\n                <div class=\"cc-message-composer__smartreply-header\">\n                  <div class=\"cc-message-composer__back-button\">\n                    <cometchat-button\n                      *ngIf=\"repliesArray && repliesArray.length > 0 \"\n                      [iconURL]=\"backButtonIconURL\"\n                      (cc-button-clicked)=\"onAiBackButtonClick()\"\n                      [buttonStyle]=\"backButtonStyle()\">\n                    </cometchat-button>\n                  </div>\n                  <div class=\"cc-message-composer__smartreply-header-view\">\n                    <p>{{ localize(\"SUGGEST_A_REPLY\") }}</p>\n                  </div>\n                </div>\n\n                <div class=\"cc-message-composer__smartreply-content\">\n                  <smart-replies\n                    *ngIf=\"repliesArray && repliesArray.length > 0 \"\n                    [smartReplyStyle]=\"smartReplyStyle\" [replies]=\"repliesArray\"\n                    [closeIconURL]=\"''\" (cc-reply-clicked)=\"sendReply($event)\">\n                  </smart-replies>\n                </div>\n\n\n\n\n\n              </div>\n            </cometchat-ai-card>\n\n            <div *ngIf=\"showAiBotList  && !showActionSheetItemAI\"\n              slot=\"content\">\n              <div class=\"cc-message-composer__aibotlist\">\n                <cometchat-button *ngIf=\" aiBotList && aiBotList.length> 1 \"\n                  [iconURL]=\"backButtonIconURL\"\n                  (cc-button-clicked)=\"onAiBackButtonClick()\"\n                  [buttonStyle]=\"backButtonStyle()\">\n                </cometchat-button>\n                <p>{{ localize(\"COMETCHAT_ASK_AI_BOT\") }}</p>\n              </div>\n              <cometchat-action-sheet\n                *ngIf=\"showAiBotList  && !showActionSheetItemAI\" slot=\"content\"\n                [actions]=\"aiActionButtons\" [title]=\"'AI'\"\n                [actionSheetStyle]=\"aiActionSheetStyle\" [hideLayoutMode]=\"true\"\n                (cc-actionsheet-clicked)=\"handleActions($event)\">\n              </cometchat-action-sheet>\n            </div>\n\n            <cometchat-action-sheet *ngIf=\"showActionSheetItemAI\" slot=\"content\"\n              [actions]=\"buttons\" [title]=\"'AI'\"\n              [actionSheetStyle]=\"aiActionSheetStyle\" [hideLayoutMode]=\"true\"\n              (cc-actionsheet-clicked)=\"handleActions($event)\">\n            </cometchat-action-sheet>\n\n            <cometchat-button [hoverText]=\"localize('AI')\" slot=\"children\"\n              #aiButtonRef (cc-button-clicked)=\"openAiFeatures($event)\"\n              [iconURL]=\"!showAiFeatures ? aiIconURL : closeButtonIconURL\"\n              [buttonStyle]=\"stickerButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n\n        <div class=\"cc-message-composer__stickerkeyboard\"\n          *ngIf=\"enableStickerKeyboard\">\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 data-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)\">\n            </cometchat-button>\n          </div>\n          <div class=\"cc-message-composer__livereaction\"\n            *ngIf=\"!hideLiveReaction && !showSendButton\">\n            <cometchat-button [iconURL]=\"LiveReactionIconURL\"\n              [hoverText]=\"localize('LIVE_REACTION')\"\n              [buttonStyle]=\"liveReactionStyle\"\n              (cc-button-clicked)=\"sendReaction()\"></cometchat-button>\n          </div>\n        </ng-template>\n      </div>\n    </cometchat-text-input>\n  </div>\n</div>\n\n<input class=\"cc-message-composer__mediainput\" #inputElement\n  (change)=\"inputChangeHandler($event)\" />\n<cometchat-backdrop *ngIf=\"showCreatePolls\" [backdropStyle]=\"backdropStyle\">\n  <create-poll [user]=\"user\" [group]=\"group\"\n    (cc-close-clicked)=\"closeCreatePolls()\"\n    [createPollStyle]=\"createPollStyle\"></create-poll>\n</cometchat-backdrop>\n", styles: [".cc-message-composer__sendbutton,.cc-message-composer__livereaction{margin:0 5px}.cc-message-composer__wrapper{height:100%;width:100%;position:relative;padding:14px 16px}.cc-message-composer__header-view{height:-moz-fit-content;height:fit-content;width:100%;bottom:120%;padding:0 0 1px}.cc-message-composer__mediainput{display:none}.cc-message-composer__auxiliary{display:flex;gap:8px}.cc-message-composer__smartreply-header{width:100%;display:flex;align-items:center;position:absolute;padding:10px;top:0;z-index:1}.cc-message-composer__back-button{margin-left:2%}.cc-message-composer__smartreply-header-view{margin-left:14%}.cc-message-composer__smartreply-content{max-height:200px}.cc-message-composer__aibotlist{display:flex;padding:10px;align-items:center;gap:45px;font-size:medium}.cc-messagecomposer__mentions{max-height:196px;min-height:28px;overflow:hidden;position:absolute;width:100%;left:50%;transform:translate(-50%,-100%);z-index:2;display:flex;padding:0 16px 1px 14px;box-sizing:border-box}.cc-messagecomposer__mentions cometchat-user-member-wrapper{max-height:196px;min-height:28px;overflow:hidden;width:100%;box-sizing:border-box;min-height:45px}.cc-messagecomposer__mentions::-webkit-scrollbar{display:none}.cc-messagecomposer__mentions-limit-exceeded{margin-top:20px;left:2px;position:relative;padding-left:13px;background-color:#fff}*{box-sizing:border-box}cometchat-ai-card{height:100%;width:100%;display:flex;border-radius:8px;overflow-y:auto;justify-content:center;align-items:center}cometchat-popover{position:relative}\n"] }]
+            args: [{ selector: "cometchat-message-composer", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-message-composer__wrapper\" [ngStyle]=\"composerWrapperStyle()\">\n  <div class=\"cc-messagecomposer__mentions\" #userMemberWrapperRef>\n    <cometchat-user-member-wrapper *ngIf=\"showListForMentions\"\n      [userMemberListType]=\"userMemberListType\"\n      [onItemClick]=\"userMemberWrapperConfiguration.onItemClick || defaultMentionsItemClickHandler\"\n      [usersRequestBuilder]=\"usersRequestBuilder\"\n      [searchKeyword]=\"mentionsSearchTerm\"\n      [subtitleView]=\"userMemberWrapperConfiguration.subtitleView\"\n      [disableUsersPresence]=\"userMemberWrapperConfiguration.disableUsersPresence\"\n      [avatarStyle]=\"userMemberWrapperConfiguration.avatarStyle\"\n      [listItemView]=\"userMemberWrapperConfiguration.listItemView\"\n      [statusIndicatorStyle]=\"userMemberWrapperConfiguration.statusIndicatorStyle\"\n      [userPresencePlacement]=\"userMemberWrapperConfiguration.userPresencePlacement\"\n      [hideSeperator]=\"userMemberWrapperConfiguration.hideSeparator\"\n      [loadingStateView]=\"userMemberWrapperConfiguration.loadingStateView\"\n      [onEmpty]=\"defaultOnEmptyForMentions\"\n      [loadingIconUrl]=\"userMemberWrapperConfiguration.loadingIconURL\"\n      [group]=\"group\" [groupMemberRequestBuilder]=\"groupMembersRequestBuilder\"\n      [disableLoadingState]=\"true\"\n      [onError]=\"defaultOnEmptyForMentions\"></cometchat-user-member-wrapper>\n\n    <div *ngIf=\"showMentionsCountWarning\"\n      class=\"cc-messagecomposer__mentions-limit-exceeded\">\n      <cometchat-icon-button\n        [text]=\"mentionsWarningText || localize('MENTIONS_LIMIT_WARNING_MESSAGE')\"\n        [iconURL]=\"InfoSimpleIcon\"\n        [buttonStyle]=\"getMentionInfoIconStyle()\"></cometchat-icon-button>\n    </div>\n\n  </div>\n  <div class=\"cc-message-composer__header-view\"\n    *ngIf=\"headerView; else messagePreview\">\n    <ng-container\n      *ngTemplateOutlet=\"headerView;context:{ $implicit: user ?? group, composerId:composerId }\">\n    </ng-container>\n  </div>\n  <ng-template #messagePreview>\n    <div class=\"cc-message-composer__header-view\" *ngIf=\"showPreview\">\n      <cometchat-preview [previewStyle]=\"previewStyle\"\n        [previewSubtitle]=\"editPreviewText\"\n        (cc-preview-close-clicked)=\"closePreview()\"> </cometchat-preview>\n    </div>\n  </ng-template>\n  <div class=\"cc-message-composer__input\">\n\n    <cometchat-text-input (cc-text-input-entered)=\"sendMessageOnEnter($event)\"\n      #inputRef [text]=\"text\"\n      (cc-text-input-changed)=\"messageInputChanged($event)\"\n      [textInputStyle]=\"textInputStyle\" [placeholderText]=\"placeholderText\"\n      [auxiliaryButtonAlignment]=\"auxiliaryButtonsAlignment\"\n      [textFormatters]=\"textFormatters\">\n\n      <div data-slot=\"secondaryView\">\n        <div *ngIf=\"secondaryButtonView;else secondaryButton\">\n          <ng-container\n            *ngTemplateOutlet=\"secondaryButtonView;context:{ $implicit: user ?? group, composerId:composerId }\">\n          </ng-container>\n        </div>\n        <ng-template #secondaryButton>\n          <div class=\"cc-message-composer__attachbutton\">\n            <cometchat-popover\n              (cc-popover-outside-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\" data-slot=\"auxilaryView\">\n        <div class=\"cc-message-composer__custom-auxiliary-view\"\n          *ngIf=\"auxilaryButtonView\">\n          <ng-container\n            *ngTemplateOutlet=\"auxilaryButtonView;context:{ $implicit: user ?? group, composerId:composerId }\">\n          </ng-container>\n        </div>\n        <!-- AI Cards -->\n        <div class=\"cc-message-composer__stickerkeyboard\">\n          <cometchat-popover (cc-popover-click)=\"openStickerKeyboard($event)\"\n            [popoverStyle]=\"aiPopover\" [placement]=\"auxilaryPlacement\">\n            <cometchat-ai-card [state]=\"smartReplyState\"\n              *ngIf=\"showSmartReply && !showActionSheetItemAI && !showAiBotList\"\n              slot=\"content\" [loadingStateText]=\"loadingStateText\"\n              [emptyStateText]=\"emptyStateText\"\n              [errorStateText]=\"errorStateText\">\n              <div slot=\"loadedView\" class=\"smart-replies-wrapper\">\n\n                <div class=\"cc-message-composer__smartreply-header\">\n                  <div class=\"cc-message-composer__back-button\">\n                    <cometchat-button\n                      *ngIf=\"repliesArray && repliesArray.length > 0 \"\n                      [iconURL]=\"backButtonIconURL\"\n                      (cc-button-clicked)=\"onAiBackButtonClick()\"\n                      [buttonStyle]=\"backButtonStyle()\">\n                    </cometchat-button>\n                  </div>\n                  <div class=\"cc-message-composer__smartreply-header-view\">\n                    <p>{{ localize(\"SUGGEST_A_REPLY\") }}</p>\n                  </div>\n                </div>\n\n                <div class=\"cc-message-composer__smartreply-content\">\n                  <smart-replies\n                    *ngIf=\"repliesArray && repliesArray.length > 0 \"\n                    [smartReplyStyle]=\"smartReplyStyle\" [replies]=\"repliesArray\"\n                    [closeIconURL]=\"''\" (cc-reply-clicked)=\"sendReply($event)\">\n                  </smart-replies>\n                </div>\n\n\n\n\n\n              </div>\n            </cometchat-ai-card>\n\n            <div *ngIf=\"showAiBotList  && !showActionSheetItemAI\"\n              slot=\"content\">\n              <div class=\"cc-message-composer__aibotlist\">\n                <cometchat-button *ngIf=\" aiBotList && aiBotList.length> 1 \"\n                  [iconURL]=\"backButtonIconURL\"\n                  (cc-button-clicked)=\"onAiBackButtonClick()\"\n                  [buttonStyle]=\"backButtonStyle()\">\n                </cometchat-button>\n                <p>{{ localize(\"COMETCHAT_ASK_AI_BOT\") }}</p>\n              </div>\n              <cometchat-action-sheet\n                *ngIf=\"showAiBotList  && !showActionSheetItemAI\" slot=\"content\"\n                [actions]=\"aiActionButtons\" [title]=\"'AI'\"\n                [actionSheetStyle]=\"aiActionSheetStyle\" [hideLayoutMode]=\"true\"\n                (cc-actionsheet-clicked)=\"handleActions($event)\">\n              </cometchat-action-sheet>\n            </div>\n\n            <cometchat-action-sheet *ngIf=\"showActionSheetItemAI\" slot=\"content\"\n              [actions]=\"buttons\" [title]=\"'AI'\"\n              [actionSheetStyle]=\"aiActionSheetStyle\" [hideLayoutMode]=\"true\"\n              (cc-actionsheet-clicked)=\"handleActions($event)\">\n            </cometchat-action-sheet>\n\n            <cometchat-button *ngIf=\"isAiEnabled\" [hoverText]=\"localize('AI')\"\n              slot=\"children\" #aiButtonRef\n              (cc-button-clicked)=\"openAiFeatures($event)\"\n              [iconURL]=\"!showAiFeatures ? aiIconURL : closeButtonIconURL\"\n              [buttonStyle]=\"stickerButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n\n        <div class=\"cc-message-composer__stickerkeyboard\"\n          *ngIf=\"enableStickerKeyboard\">\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 data-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)\">\n            </cometchat-button>\n          </div>\n          <div class=\"cc-message-composer__livereaction\"\n            *ngIf=\"!hideLiveReaction && !showSendButton\">\n            <cometchat-button [iconURL]=\"LiveReactionIconURL\"\n              [hoverText]=\"localize('LIVE_REACTION')\"\n              [buttonStyle]=\"liveReactionStyle\"\n              (cc-button-clicked)=\"sendReaction()\"></cometchat-button>\n          </div>\n        </ng-template>\n      </div>\n    </cometchat-text-input>\n  </div>\n</div>\n\n<input class=\"cc-message-composer__mediainput\" #inputElement\n  (change)=\"inputChangeHandler($event)\" />\n<cometchat-backdrop *ngIf=\"showCreatePolls\" [backdropStyle]=\"backdropStyle\">\n  <create-poll [user]=\"user\" [group]=\"group\"\n    (cc-close-clicked)=\"closeCreatePolls()\"\n    [createPollStyle]=\"createPollStyle\"></create-poll>\n</cometchat-backdrop>\n", styles: [".cc-message-composer__sendbutton,.cc-message-composer__livereaction{margin:0 5px}.cc-message-composer__wrapper{height:100%;width:100%;position:relative;padding:14px 16px}.cc-message-composer__header-view{height:-moz-fit-content;height:fit-content;width:100%;bottom:120%;padding:0 0 1px}.cc-message-composer__mediainput{display:none}.cc-message-composer__auxiliary{display:flex;gap:8px}.cc-message-composer__smartreply-header{width:100%;display:flex;align-items:center;position:absolute;padding:10px;top:0;z-index:1}.cc-message-composer__back-button{margin-left:2%}.cc-message-composer__smartreply-header-view{margin-left:14%}.cc-message-composer__smartreply-content{max-height:200px}.cc-message-composer__aibotlist{display:flex;padding:10px;align-items:center;gap:45px;font-size:medium}.cc-messagecomposer__mentions{max-height:196px;min-height:28px;overflow:hidden;position:absolute;width:100%;left:50%;transform:translate(-50%,-100%);z-index:2;display:flex;padding:0 16px 1px 14px;box-sizing:border-box}.cc-messagecomposer__mentions cometchat-user-member-wrapper{max-height:196px;min-height:28px;overflow:hidden;width:100%;box-sizing:border-box;min-height:45px}.cc-messagecomposer__mentions::-webkit-scrollbar{display:none}.cc-messagecomposer__mentions-limit-exceeded{margin-top:20px;left:2px;position:relative;padding-left:13px;background-color:#fff}*{box-sizing:border-box}cometchat-ai-card{height:100%;width:100%;display:flex;border-radius:8px;overflow-y:auto;justify-content:center;align-items:center}cometchat-popover{position:relative}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { inputElementRef: [{
                 type: ViewChild,
                 args: ["inputElement", { static: false }]
@@ -16056,7 +16065,7 @@ class CometChatDetailsComponent {
         actionMessage.setSender(this.loggedInUser);
         actionMessage.setConversationId("group_" + this.group.getGuid());
         actionMessage.setMuid(CometChatUIKitUtility.ID());
-        actionMessage.setMessage(`${this.loggedInUser?.getName()} ${action} ${actionOn.getUid()}`);
+        actionMessage.setMessage(`${this.loggedInUser?.getName()} ${action} ${actionOn.getName()}`);
         actionMessage.setSentAt(CometChatUIKitUtility.getUnixTimestamp());
         actionMessage.setNewScope(actionOn.getScope());
         actionMessage.setReceiverType(CometChatUIKitConstants.MessageReceiverType.group);
@@ -16074,7 +16083,7 @@ class CometChatDetailsComponent {
         actionMessage.setMuid(CometChatUIKitUtility.ID());
         actionMessage.setSentAt(CometChatUIKitUtility.getUnixTimestamp());
         actionMessage.setReceiverType(CometChatUIKitConstants.MessageReceiverType.group);
-        let message = CometChatUIKitConstants.groupMemberAction.LEFT ? `${this.loggedInUser?.getName()} ${action}` : `${this.loggedInUser?.getName()} ${action} ${actionOn.getUid()}`;
+        let message = CometChatUIKitConstants.groupMemberAction.LEFT ? `${this.loggedInUser?.getName()} ${action}` : `${this.loggedInUser?.getName()} ${action} ${actionOn.getName()}`;
         actionMessage.setMessage(message);
         return actionMessage;
     }
@@ -17249,6 +17258,7 @@ class CometChatGroupsComponent {
     }
     removeListener() {
         CometChat.removeGroupListener(this.groupsListenerId);
+        CometChat.removeConnectionListener(this.connectionListenerId);
     }
     /**
      * @param  {CometChat.Group} group