stream-chat-angular 2.2.0 → 2.5.0

package/README.md

@@ -35,7 +35,7 @@ For complete pricing and details visit our [Chat Pricing Page](https://getstream
 ### Install with NPM
 
 ```
-npm install stream-chat-angular stream-chat-css stream-chat @ngx-translate/core
+npm install stream-chat-angular @stream-io/stream-chat-css stream-chat @ngx-translate/core
 ```
 
 **Important note** If you are using **Angular 12** you will need to add `--legacy-peer-deps` flag as `@ngx-translate/core`'s newest version only supports Angular 13.

package/assets/version.d.ts

@@ -1 +1 @@
-export declare const version = "2.2.0";
+export declare const version = "2.5.0";

package/bundles/stream-chat-angular.umd.js

@@ -353,7 +353,7 @@
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
-    var version = '2.2.0';
+    var version = '2.5.0';
 
     var NotificationService = /** @class */ (function () {
         function NotificationService() {
@@ -1731,9 +1731,11 @@
             this.send = new i0.EventEmitter();
             this.userMentions = new i0.EventEmitter();
             this.subscriptions = [];
+            this.unpropagatedChanges = [];
         }
         TextareaDirective.prototype.ngOnChanges = function (changes) {
             var _this = this;
+            this.unpropagatedChanges.push(changes);
             if (!this.componentRef) {
                 return;
             }
@@ -1745,6 +1747,11 @@
                     if (this.componentRef.instance.userMentions) {
                         this.subscriptions.push(this.componentRef.instance.userMentions.subscribe(function (value) { return _this.userMentions.next(value); }));
                     }
+                    this.componentRef.instance.areMentionsEnabled = this.areMentionsEnabled;
+                    this.componentRef.instance.mentionAutocompleteItemTemplate =
+                        this.mentionAutocompleteItemTemplate;
+                    this.componentRef.instance.mentionScope = this.mentionScope;
+                    this.componentRef.instance.value = this.value;
                 }
             }
             if (changes.areMentionsEnabled) {
@@ -1761,8 +1768,11 @@
                 this.componentRef.instance.value = this.value;
             }
             // ngOnChanges not called for dynamic components since we don't use template binding
+            var changesToPropagate = {};
+            this.unpropagatedChanges.forEach(function (c) { return (changesToPropagate = Object.assign(Object.assign({}, changesToPropagate), c)); });
             // eslint-disable-next-line @angular-eslint/no-lifecycle-call
-            this.componentRef.instance.ngOnChanges(changes);
+            this.componentRef.instance.ngOnChanges(changesToPropagate);
+            this.unpropagatedChanges = [];
         };
         return TextareaDirective;
     }());
@@ -1868,24 +1878,13 @@
             this.textareaValue = '';
             this.mentionedUsers = [];
             this.subscriptions = [];
+            this.isViewInited = false;
             this.subscriptions.push(this.attachmentService.attachmentUploadInProgressCounter$.subscribe(function (counter) {
                 if (counter === 0 && _this.hideNotification) {
                     _this.hideNotification();
                     _this.hideNotification = undefined;
                 }
             }));
-            this.attachmentUploads$ = this.attachmentService.attachmentUploads$;
-            this.isFileUploadEnabled = this.configService.isFileUploadEnabled;
-            this.acceptedFileTypes = this.configService.acceptedFileTypes;
-            this.isMultipleFileUploadEnabled =
-                this.configService.isMultipleFileUploadEnabled;
-            this.areMentionsEnabled = this.configService.areMentionsEnabled;
-            this.mentionAutocompleteItemTemplate =
-                this.configService.mentionAutocompleteItemTemplate;
-            this.mentionScope = this.configService.mentionScope;
-        }
-        MessageInputComponent.prototype.ngOnInit = function () {
-            var _this = this;
             this.subscriptions.push(this.channelService.activeChannel$.subscribe(function (channel) {
                 var _a;
                 _this.textareaValue = '';
@@ -1896,12 +1895,24 @@
                         capabilities.indexOf('upload-file') !== -1;
                     _this.canSendLinks = capabilities.indexOf('send-links') !== -1;
                     _this.canSendMessages = capabilities.indexOf('send-message') !== -1;
-                    _this.cdRef.detectChanges();
-                    _this.initTextarea();
+                    if (_this.isViewInited) {
+                        _this.cdRef.detectChanges();
+                        _this.initTextarea();
+                    }
                 }
             }));
-        };
+            this.attachmentUploads$ = this.attachmentService.attachmentUploads$;
+            this.isFileUploadEnabled = this.configService.isFileUploadEnabled;
+            this.acceptedFileTypes = this.configService.acceptedFileTypes;
+            this.isMultipleFileUploadEnabled =
+                this.configService.isMultipleFileUploadEnabled;
+            this.areMentionsEnabled = this.configService.areMentionsEnabled;
+            this.mentionAutocompleteItemTemplate =
+                this.configService.mentionAutocompleteItemTemplate;
+            this.mentionScope = this.configService.mentionScope;
+        }
         MessageInputComponent.prototype.ngAfterViewInit = function () {
+            this.isViewInited = true;
             this.initTextarea();
         };
         MessageInputComponent.prototype.ngOnChanges = function (changes) {
@@ -2179,6 +2190,7 @@
 
     var MessageActionsBoxComponent = /** @class */ (function () {
         function MessageActionsBoxComponent(chatClientService, notificationService, channelService) {
+            var _this = this;
             this.chatClientService = chatClientService;
             this.notificationService = notificationService;
             this.channelService = channelService;
@@ -2188,6 +2200,10 @@
             this.displayedActionsCount = new i0.EventEmitter();
             this.isEditing = new i0.EventEmitter();
             this.isEditModalOpen = false;
+            this.modalClosed = function () {
+                _this.isEditModalOpen = false;
+                _this.isEditing.emit(false);
+            };
         }
         MessageActionsBoxComponent.prototype.ngOnChanges = function (changes) {
             if (changes.isMine || changes.enabledActions) {
@@ -2295,10 +2311,6 @@
             var _a;
             (_a = this.messageInput) === null || _a === void 0 ? void 0 : _a.messageSent();
         };
-        MessageActionsBoxComponent.prototype.modalClosed = function () {
-            this.isEditModalOpen = false;
-            this.isEditing.emit(false);
-        };
         MessageActionsBoxComponent.prototype.deleteClicked = function () {
             return __awaiter(this, void 0, void 0, function () {
                 var error_1;
@@ -2322,7 +2334,7 @@
         return MessageActionsBoxComponent;
     }());
     MessageActionsBoxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageActionsBoxComponent, deps: [{ token: ChatClientService }, { token: NotificationService }, { token: ChannelService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MessageActionsBoxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: { isOpen: "isOpen", isMine: "isMine", message: "message", enabledActions: "enabledActions" }, outputs: { displayedActionsCount: "displayedActionsCount", isEditing: "isEditing" }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: MessageInputComponent, descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  data-testid=\"action-box\"\n  class=\"str-chat__message-actions-box\"\n  [class.str-chat__message-actions-box--open]=\"isOpen\"\n  [class.str-chat__message-actions-box--mine]=\"isMine\"\n>\n  <ul class=\"str-chat__message-actions-list\">\n    <button\n      data-testid=\"quote-action\"\n      *ngIf=\"isQuoteVisible\"\n      (click)=\"quoteClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Reply\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"pin-action\"\n      *ngIf=\"isPinVisible\"\n      (click)=\"pinClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{\n          (message?.pinned ? \"streamChat.Unpin\" : \"streamChat.Pin\") | translate\n        }}\n      </li>\n    </button>\n    <button\n      data-testid=\"flag-action\"\n      *ngIf=\"isFlagVisible\"\n      (click)=\"flagClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Flag\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"mute-action\"\n      *ngIf=\"isMuteVisible\"\n      (click)=\"muteClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Mute\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"edit-action\"\n      *ngIf=\"isEditVisible\"\n      (click)=\"editClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Edit Message\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"delete-action\"\n      *ngIf=\"isDeleteVisible\"\n      (click)=\"deleteClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Delete\" | translate }}\n      </li>\n    </button>\n  </ul>\n</div>\n\n<stream-modal\n  [isOpen]=\"isEditModalOpen\"\n  (isOpenChange)=\"\n    isEditModalOpen = $event; isEditModalOpen ? '' : modalClosed()\n  \"\n>\n  <div class=\"str-chat__edit-message-form\" *ngIf=\"isEditModalOpen\">\n    <stream-message-input\n      [message]=\"message\"\n      (messageUpdate)=\"modalClosed()\"\n    ></stream-message-input>\n    <stream-notification-list></stream-notification-list>\n    <div class=\"str-chat__message-team-form-footer\">\n      <div></div>\n      <div>\n        <button translate data-testid=\"cancel-button\" (click)=\"modalClosed()\">\n          streamChat.Cancel\n        </button>\n        <button\n          type=\"submit\"\n          translate\n          data-testid=\"send-button\"\n          (click)=\"sendClicked()\"\n          (keyup.enter)=\"sendClicked()\"\n        >\n          streamChat.Send\n        </button>\n      </div>\n    </div>\n  </div>\n</stream-modal>\n", components: [{ type: ModalComponent, selector: "stream-modal", inputs: ["isOpen"], outputs: ["isOpenChange"] }, { type: MessageInputComponent, selector: "stream-message-input", inputs: ["isFileUploadEnabled", "areMentionsEnabled", "mentionScope", "mentionAutocompleteItemTemplate", "acceptedFileTypes", "isMultipleFileUploadEnabled", "message"], outputs: ["messageUpdate"] }, { type: NotificationListComponent, selector: "stream-notification-list" }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
+    MessageActionsBoxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: { messageInputTemplate: "messageInputTemplate", isOpen: "isOpen", isMine: "isMine", message: "message", enabledActions: "enabledActions" }, outputs: { displayedActionsCount: "displayedActionsCount", isEditing: "isEditing" }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: MessageInputComponent, descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  data-testid=\"action-box\"\n  class=\"str-chat__message-actions-box\"\n  [class.str-chat__message-actions-box--open]=\"isOpen\"\n  [class.str-chat__message-actions-box--mine]=\"isMine\"\n>\n  <ul class=\"str-chat__message-actions-list\">\n    <button\n      data-testid=\"quote-action\"\n      *ngIf=\"isQuoteVisible\"\n      (click)=\"quoteClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Reply\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"pin-action\"\n      *ngIf=\"isPinVisible\"\n      (click)=\"pinClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{\n          (message?.pinned ? \"streamChat.Unpin\" : \"streamChat.Pin\") | translate\n        }}\n      </li>\n    </button>\n    <button\n      data-testid=\"flag-action\"\n      *ngIf=\"isFlagVisible\"\n      (click)=\"flagClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Flag\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"mute-action\"\n      *ngIf=\"isMuteVisible\"\n      (click)=\"muteClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Mute\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"edit-action\"\n      *ngIf=\"isEditVisible\"\n      (click)=\"editClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Edit Message\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"delete-action\"\n      *ngIf=\"isDeleteVisible\"\n      (click)=\"deleteClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Delete\" | translate }}\n      </li>\n    </button>\n  </ul>\n</div>\n\n<stream-modal\n  [isOpen]=\"isEditModalOpen\"\n  (isOpenChange)=\"\n    isEditModalOpen = $event; isEditModalOpen ? '' : modalClosed()\n  \"\n>\n  <div class=\"str-chat__edit-message-form\" *ngIf=\"isEditModalOpen\">\n    <ng-container *ngIf=\"messageInputTemplate; else defaultInput\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          messageInputTemplate;\n          context: {\n            message: message,\n            messageUpdateHandler: modalClosed\n          }\n        \"\n      ></ng-container>\n    </ng-container>\n    <ng-template #defaultInput>\n      <stream-message-input\n        [message]=\"message\"\n        (messageUpdate)=\"modalClosed()\"\n      ></stream-message-input>\n    </ng-template>\n    <stream-notification-list></stream-notification-list>\n    <div class=\"str-chat__message-team-form-footer\">\n      <div></div>\n      <div>\n        <button translate data-testid=\"cancel-button\" (click)=\"modalClosed()\">\n          streamChat.Cancel\n        </button>\n        <button\n          type=\"submit\"\n          translate\n          data-testid=\"send-button\"\n          (click)=\"sendClicked()\"\n          (keyup.enter)=\"sendClicked()\"\n        >\n          streamChat.Send\n        </button>\n      </div>\n    </div>\n  </div>\n</stream-modal>\n", components: [{ type: ModalComponent, selector: "stream-modal", inputs: ["isOpen"], outputs: ["isOpenChange"] }, { type: MessageInputComponent, selector: "stream-message-input", inputs: ["isFileUploadEnabled", "areMentionsEnabled", "mentionScope", "mentionAutocompleteItemTemplate", "acceptedFileTypes", "isMultipleFileUploadEnabled", "message"], outputs: ["messageUpdate"] }, { type: NotificationListComponent, selector: "stream-notification-list" }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageActionsBoxComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2330,7 +2342,9 @@
                         templateUrl: './message-actions-box.component.html',
                         styles: [],
                     }]
-            }], ctorParameters: function () { return [{ type: ChatClientService }, { type: NotificationService }, { type: ChannelService }]; }, propDecorators: { isOpen: [{
+            }], ctorParameters: function () { return [{ type: ChatClientService }, { type: NotificationService }, { type: ChannelService }]; }, propDecorators: { messageInputTemplate: [{
+                    type: i0.Input
+                }], isOpen: [{
                     type: i0.Input
                 }], isMine: [{
                     type: i0.Input
@@ -2880,30 +2894,6 @@
                     type: i0.Input
                 }] } });
 
-    var HighlightMentionsPipe = /** @class */ (function () {
-        function HighlightMentionsPipe() {
-        }
-        HighlightMentionsPipe.prototype.transform = function (value, mentionedUsers) {
-            if (!value || !mentionedUsers) {
-                return value || '';
-            }
-            var result = value;
-            mentionedUsers.forEach(function (u) {
-                result = result.replace(new RegExp("@" + (u.name || u.id), 'g'), "<b>@" + (u.name || u.id) + "</b>");
-            });
-            return result;
-        };
-        return HighlightMentionsPipe;
-    }());
-    HighlightMentionsPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: HighlightMentionsPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
-    HighlightMentionsPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: HighlightMentionsPipe, name: "highlightMentions" });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: HighlightMentionsPipe, decorators: [{
-                type: i0.Pipe,
-                args: [{
-                        name: 'highlightMentions',
-                    }]
-            }] });
-
     var MessageComponent = /** @class */ (function () {
         function MessageComponent(chatClientService, channelService) {
             this.chatClientService = chatClientService;
@@ -2913,8 +2903,53 @@
             this.isReactionSelectorOpen = false;
             this.isPressedOnMobile = false;
             this.visibleMessageActionsCount = 0;
+            this.messageTextParts = [];
             this.user = this.chatClientService.chatClient.user;
         }
+        MessageComponent.prototype.ngOnChanges = function (changes) {
+            var _this = this;
+            var _a, _b;
+            if (changes.message) {
+                var content = ((_a = this.message) === null || _a === void 0 ? void 0 : _a.html) || ((_b = this.message) === null || _b === void 0 ? void 0 : _b.text);
+                if (!content) {
+                    this.messageTextParts = [];
+                }
+                else {
+                    // Backend will wrap HTML content with <p></p>\n
+                    if (content.startsWith('<p>')) {
+                        content = content.replace('<p>', '');
+                    }
+                    if (content.endsWith('</p>\n')) {
+                        content = content.replace('</p>\n', '');
+                    }
+                    if (!this.message.mentioned_users ||
+                        this.message.mentioned_users.length === 0) {
+                        this.messageTextParts = [{ content: content, type: 'text' }];
+                    }
+                    else {
+                        this.messageTextParts = [];
+                        var text_1 = content;
+                        this.message.mentioned_users.forEach(function (user) {
+                            var mention = "@" + (user.name || user.id);
+                            var precedingText = text_1.substring(0, text_1.indexOf(mention));
+                            _this.messageTextParts.push({
+                                content: precedingText,
+                                type: 'text',
+                            });
+                            _this.messageTextParts.push({
+                                content: mention,
+                                type: 'mention',
+                                user: user,
+                            });
+                            text_1 = text_1.replace(precedingText + mention, '');
+                        });
+                        if (text_1) {
+                            this.messageTextParts.push({ content: text_1, type: 'text' });
+                        }
+                    }
+                }
+            }
+        };
         Object.defineProperty(MessageComponent.prototype, "isSentByCurrentUser", {
             get: function () {
                 var _a, _b, _c;
@@ -3031,7 +3066,7 @@
         return MessageComponent;
     }());
     MessageComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageComponent, deps: [{ token: ChatClientService }, { token: ChannelService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MessageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageComponent, selector: "stream-message", inputs: { message: "message", enabledMessageActions: "enabledMessageActions", areReactionsEnabled: "areReactionsEnabled", canReactToMessage: "canReactToMessage", isLastSentMessage: "isLastSentMessage", canReceiveReadEvents: "canReceiveReadEvents" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0__namespace, template: "<div\n  #container\n  class=\"str-chat__message-simple str-chat__message str-chat__message--{{\n    message?.type\n  }} str-chat__message--{{ message?.status }} {{\n    message?.text ? 'str-chat__message--has-text' : 'has-no-text'\n  }}\"\n  [class.str-chat__message--me]=\"isSentByCurrentUser\"\n  [class.str-chat__message-simple--me]=\"isSentByCurrentUser\"\n  [class.mobile-press]=\"isPressedOnMobile\"\n  [class.str-chat__message--has-attachment]=\"hasAttachment\"\n  [class.str-chat__message--with-reactions]=\"\n    areReactionsEnabled && hasReactions\n  \"\n  data-testid=\"message-container\"\n>\n  <ng-container *ngIf=\"!message?.deleted_at; else deletedMessage\">\n    <ng-container *ngIf=\"message?.type !== 'system'; else systemMessage\">\n      <ng-container\n        *ngIf=\"\n          isSentByCurrentUser &&\n          ((isLastSentMessage && message?.status === 'received') ||\n            message?.status === 'sending')\n        \"\n      >\n        <ng-container *ngIf=\"message?.status === 'sending'; else sentStatus\">\n          <ng-container *ngTemplateOutlet=\"sendingStatus\"></ng-container>\n        </ng-container>\n        <ng-template #sentStatus>\n          <ng-container\n            *ngIf=\"\n              isMessageDeliveredAndRead && canReceiveReadEvents;\n              else deliveredStatus\n            \"\n          >\n            <ng-container *ngTemplateOutlet=\"readStatus\"></ng-container>\n          </ng-container>\n        </ng-template>\n      </ng-container>\n      <stream-avatar\n        data-testid=\"avatar\"\n        class=\"str-chat-angular__avatar-host\"\n        [imageUrl]=\"message?.user?.image\"\n        [name]=\"message?.user?.name || message?.user?.id\"\n      ></stream-avatar>\n      <div class=\"str-chat__message-inner\">\n        <div\n          class=\"str-chat__message-simple__actions\"\n          data-testid=\"message-options\"\n          *ngIf=\"areOptionsVisible\"\n        >\n          <div\n            data-testid=\"message-actions-container\"\n            class=\"\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--options\n            \"\n            [class.str-chat-angular__message-simple__actions__action--options--editing]=\"\n              isEditing\n            \"\n          >\n            <stream-message-actions-box\n              [isOpen]=\"isActionBoxOpen\"\n              [isMine]=\"isSentByCurrentUser\"\n              [enabledActions]=\"enabledMessageActions\"\n              [message]=\"message\"\n              (displayedActionsCount)=\"visibleMessageActionsCount = $event\"\n              (isEditing)=\"isEditing = $event; isActionBoxOpen = !isEditing\"\n            ></stream-message-actions-box>\n            <stream-icon\n              *ngIf=\"visibleMessageActionsCount > 0\"\n              data-testid=\"action-icon\"\n              icon=\"action-icon\"\n              (keyup.enter)=\"isActionBoxOpen = !isActionBoxOpen\"\n              (click)=\"isActionBoxOpen = !isActionBoxOpen\"\n            ></stream-icon>\n          </div>\n          <div\n            *ngIf=\"areReactionsEnabled && canReactToMessage\"\n            class=\"\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--reactions\n            \"\n            data-testid=\"reaction-icon\"\n            (click)=\"isReactionSelectorOpen = !isReactionSelectorOpen\"\n            (keyup.enter)=\"isReactionSelectorOpen = !isReactionSelectorOpen\"\n          >\n            <stream-icon icon=\"reaction-icon\"></stream-icon>\n          </div>\n        </div>\n        <stream-message-reactions\n          *ngIf=\"areReactionsEnabled\"\n          [messageReactionCounts]=\"message?.reaction_counts || {}\"\n          [latestReactions]=\"message?.latest_reactions || []\"\n          [(isSelectorOpen)]=\"isReactionSelectorOpen\"\n          [messageId]=\"message?.id\"\n          [ownReactions]=\"message?.own_reactions || []\"\n        ></stream-message-reactions>\n        <stream-attachment-list\n          *ngIf=\"hasAttachment\"\n          [attachments]=\"message!.attachments!\"\n        ></stream-attachment-list>\n        <div class=\"str-chat__message-text\" *ngIf=\"message?.text\">\n          <div\n            data-testid=\"inner-message\"\n            class=\"\n              str-chat__message-text-inner str-chat__message-simple-text-inner\n            \"\n            [class.str-chat__message-light-text-inner--has-attachment]=\"\n              hasAttachment\n            \"\n            (click)=\"\n              message?.status === 'failed' && message?.errorStatusCode !== 403\n                ? resendMessage()\n                : undefined\n            \"\n            (keyup.enter)=\"\n              message?.status === 'failed' && message?.errorStatusCode !== 403\n                ? resendMessage()\n                : undefined\n            \"\n          >\n            <div\n              data-testid=\"client-error-message\"\n              *ngIf=\"message?.type === 'error'\"\n              class=\"str-chat__simple-message--error-message\"\n            >\n              {{ \"streamChat.Error \u00B7 Unsent\" | translate }}\n            </div>\n            <div\n              data-testid=\"error-message\"\n              *ngIf=\"message?.status === 'failed'\"\n              class=\"str-chat__simple-message--error-message\"\n            >\n              {{\n                (message?.errorStatusCode === 403\n                  ? \"streamChat.Message Failed \u00B7 Unauthorized\"\n                  : \"streamChat.Message Failed \u00B7 Click to try again\"\n                ) | translate\n              }}\n            </div>\n            <div\n              (click)=\"textClicked()\"\n              (keyup.enter)=\"textClicked()\"\n              data-testid=\"text\"\n              [innerHTML]=\"\n                message?.html || message?.text\n                  | highlightMentions: message?.mentioned_users\n              \"\n            ></div>\n          </div>\n        </div>\n        <div class=\"str-chat__message-data str-chat__message-simple-data\">\n          <span\n            data-testid=\"sender\"\n            *ngIf=\"!isSentByCurrentUser\"\n            class=\"str-chat__message-simple-name\"\n          >\n            {{ message?.user?.name ? message?.user?.name : message?.user?.id }}\n          </span>\n          <span data-testid=\"date\" class=\"str-chat__message-simple-timestamp\">\n            {{ parsedDate }}\n          </span>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n\n<ng-template #sendingStatus>\n  <span class=\"str-chat__message-simple-status\" data-testid=\"sending-indicator\">\n    <div class=\"str-chat__tooltip\">\n      {{ \"streamChat.Sending...\" | translate }}\n    </div>\n    <stream-loading-indicator\n      data-testid=\"loading-indicator\"\n    ></stream-loading-indicator>\n  </span>\n</ng-template>\n<ng-template #readStatus>\n  <span class=\"str-chat__message-simple-status\" data-testid=\"read-indicator\">\n    <div class=\"str-chat__tooltip\" data-testid=\"read-by-tooltip\">\n      {{ readByText }}\n    </div>\n    <stream-avatar\n      class=\"str-chat-angular__avatar-host\"\n      data-test-id=\"last-read-user-avatar\"\n      [size]=\"15\"\n      [imageUrl]=\"lastReadUser?.image\"\n      [name]=\"lastReadUser?.name || lastReadUser?.id\"\n    ></stream-avatar>\n    <span\n      data-test-id=\"read-by-length\"\n      *ngIf=\"isReadByMultipleUsers\"\n      class=\"str-chat__message-simple-status-number\"\n    >\n      {{ (message?.readBy)!.length }}\n    </span>\n  </span>\n</ng-template>\n<ng-template #deliveredStatus>\n  <span\n    class=\"str-chat__message-simple-status\"\n    data-testid=\"delivered-indicator\"\n  >\n    <div class=\"str-chat__tooltip\">\n      {{ \"streamChat.Delivered\" | translate }}\n    </div>\n    <stream-icon\n      data-testid=\"delivered-icon\"\n      icon=\"delivered-icon\"\n    ></stream-icon>\n  </span>\n</ng-template>\n\n<ng-template #deletedMessage>\n  <div data-testid=\"message-deleted-component\">\n    <div class=\"str-chat__message--deleted-inner\" translate>\n      streamChat.This message was deleted...\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #systemMessage>\n  <div data-testid=\"system-message\" class=\"str-chat__message--system\">\n    <div class=\"str-chat__message--system__text\">\n      <div class=\"str-chat__message--system__line\"></div>\n      <p>{{ message?.text }}</p>\n      <div class=\"str-chat__message--system__line\"></div>\n    </div>\n    <div class=\"str-chat__message--system__date\">\n      {{ parsedDate }}\n    </div>\n  </div>\n</ng-template>\n", components: [{ type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size"] }, { type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: ["isOpen", "isMine", "message", "enabledActions"], outputs: ["displayedActionsCount", "isEditing"] }, { type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: MessageReactionsComponent, selector: "stream-message-reactions", inputs: ["messageId", "messageReactionCounts", "isSelectorOpen", "latestReactions", "ownReactions"], outputs: ["isSelectorOpenChange"] }, { type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["attachments"] }, { type: LoadingIndicatorComponent, selector: "stream-loading-indicator", inputs: ["size", "color"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i1__namespace.TranslatePipe, "highlightMentions": HighlightMentionsPipe } });
+    MessageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageComponent, selector: "stream-message", inputs: { messageInputTemplate: "messageInputTemplate", mentionTemplate: "mentionTemplate", message: "message", enabledMessageActions: "enabledMessageActions", areReactionsEnabled: "areReactionsEnabled", canReactToMessage: "canReactToMessage", isLastSentMessage: "isLastSentMessage", canReceiveReadEvents: "canReceiveReadEvents" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  #container\n  class=\"str-chat__message-simple str-chat__message str-chat__message--{{\n    message?.type\n  }} str-chat__message--{{ message?.status }} {{\n    message?.text ? 'str-chat__message--has-text' : 'has-no-text'\n  }}\"\n  [class.str-chat__message--me]=\"isSentByCurrentUser\"\n  [class.str-chat__message-simple--me]=\"isSentByCurrentUser\"\n  [class.mobile-press]=\"isPressedOnMobile\"\n  [class.str-chat__message--has-attachment]=\"hasAttachment\"\n  [class.str-chat__message--with-reactions]=\"\n    areReactionsEnabled && hasReactions\n  \"\n  data-testid=\"message-container\"\n>\n  <ng-container *ngIf=\"!message?.deleted_at; else deletedMessage\">\n    <ng-container *ngIf=\"message?.type !== 'system'; else systemMessage\">\n      <ng-container\n        *ngIf=\"\n          isSentByCurrentUser &&\n          ((isLastSentMessage && message?.status === 'received') ||\n            message?.status === 'sending')\n        \"\n      >\n        <ng-container *ngIf=\"message?.status === 'sending'; else sentStatus\">\n          <ng-container *ngTemplateOutlet=\"sendingStatus\"></ng-container>\n        </ng-container>\n        <ng-template #sentStatus>\n          <ng-container\n            *ngIf=\"\n              isMessageDeliveredAndRead && canReceiveReadEvents;\n              else deliveredStatus\n            \"\n          >\n            <ng-container *ngTemplateOutlet=\"readStatus\"></ng-container>\n          </ng-container>\n        </ng-template>\n      </ng-container>\n      <stream-avatar\n        data-testid=\"avatar\"\n        class=\"str-chat-angular__avatar-host\"\n        [imageUrl]=\"message?.user?.image\"\n        [name]=\"message?.user?.name || message?.user?.id\"\n      ></stream-avatar>\n      <div class=\"str-chat__message-inner\">\n        <div\n          class=\"str-chat__message-simple__actions\"\n          data-testid=\"message-options\"\n          *ngIf=\"areOptionsVisible\"\n        >\n          <div\n            data-testid=\"message-actions-container\"\n            class=\"\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--options\n            \"\n            [class.str-chat-angular__message-simple__actions__action--options--editing]=\"\n              isEditing\n            \"\n          >\n            <stream-message-actions-box\n              [isOpen]=\"isActionBoxOpen\"\n              [isMine]=\"isSentByCurrentUser\"\n              [enabledActions]=\"enabledMessageActions\"\n              [message]=\"message\"\n              (displayedActionsCount)=\"visibleMessageActionsCount = $event\"\n              (isEditing)=\"isEditing = $event; isActionBoxOpen = !isEditing\"\n              [messageInputTemplate]=\"messageInputTemplate\"\n            ></stream-message-actions-box>\n            <stream-icon\n              *ngIf=\"visibleMessageActionsCount > 0\"\n              data-testid=\"action-icon\"\n              icon=\"action-icon\"\n              (keyup.enter)=\"isActionBoxOpen = !isActionBoxOpen\"\n              (click)=\"isActionBoxOpen = !isActionBoxOpen\"\n            ></stream-icon>\n          </div>\n          <div\n            *ngIf=\"areReactionsEnabled && canReactToMessage\"\n            class=\"\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--reactions\n            \"\n            data-testid=\"reaction-icon\"\n            (click)=\"isReactionSelectorOpen = !isReactionSelectorOpen\"\n            (keyup.enter)=\"isReactionSelectorOpen = !isReactionSelectorOpen\"\n          >\n            <stream-icon icon=\"reaction-icon\"></stream-icon>\n          </div>\n        </div>\n        <stream-message-reactions\n          *ngIf=\"areReactionsEnabled\"\n          [messageReactionCounts]=\"message?.reaction_counts || {}\"\n          [latestReactions]=\"message?.latest_reactions || []\"\n          [(isSelectorOpen)]=\"isReactionSelectorOpen\"\n          [messageId]=\"message?.id\"\n          [ownReactions]=\"message?.own_reactions || []\"\n        ></stream-message-reactions>\n        <stream-attachment-list\n          *ngIf=\"hasAttachment\"\n          [attachments]=\"message!.attachments!\"\n        ></stream-attachment-list>\n        <div class=\"str-chat__message-text\" *ngIf=\"message?.text\">\n          <div\n            data-testid=\"inner-message\"\n            class=\"\n              str-chat__message-text-inner str-chat__message-simple-text-inner\n            \"\n            [class.str-chat__message-light-text-inner--has-attachment]=\"\n              hasAttachment\n            \"\n            (click)=\"\n              message?.status === 'failed' && message?.errorStatusCode !== 403\n                ? resendMessage()\n                : undefined\n            \"\n            (keyup.enter)=\"\n              message?.status === 'failed' && message?.errorStatusCode !== 403\n                ? resendMessage()\n                : undefined\n            \"\n          >\n            <div\n              data-testid=\"client-error-message\"\n              *ngIf=\"message?.type === 'error'\"\n              class=\"str-chat__simple-message--error-message\"\n            >\n              {{ \"streamChat.Error \u00B7 Unsent\" | translate }}\n            </div>\n            <div\n              data-testid=\"error-message\"\n              *ngIf=\"message?.status === 'failed'\"\n              class=\"str-chat__simple-message--error-message\"\n            >\n              {{\n                (message?.errorStatusCode === 403\n                  ? \"streamChat.Message Failed \u00B7 Unauthorized\"\n                  : \"streamChat.Message Failed \u00B7 Click to try again\"\n                ) | translate\n              }}\n            </div>\n            <div\n              (click)=\"textClicked()\"\n              (keyup.enter)=\"textClicked()\"\n              data-testid=\"text\"\n            >\n              <p>\n                <!-- eslint-disable-next-line @angular-eslint/template/use-track-by-function -->\n                <ng-container *ngFor=\"let part of messageTextParts\">\n                  <span\n                    *ngIf=\"part.type === 'text'; else mention\"\n                    [innerHTML]=\"part.content\"\n                  ></span>\n                  <ng-template #mention>\n                    <ng-container *ngIf=\"mentionTemplate; else defaultMention\">\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          mentionTemplate;\n                          context: { user: part.user! }\n                        \"\n                      ></ng-container>\n                    </ng-container>\n                    <ng-template #defaultMention>\n                      <b>{{ part.content }}</b>\n                    </ng-template>\n                  </ng-template>\n                </ng-container>\n              </p>\n            </div>\n          </div>\n        </div>\n        <div class=\"str-chat__message-data str-chat__message-simple-data\">\n          <span\n            data-testid=\"sender\"\n            *ngIf=\"!isSentByCurrentUser\"\n            class=\"str-chat__message-simple-name\"\n          >\n            {{ message?.user?.name ? message?.user?.name : message?.user?.id }}\n          </span>\n          <span data-testid=\"date\" class=\"str-chat__message-simple-timestamp\">\n            {{ parsedDate }}\n          </span>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n\n<ng-template #sendingStatus>\n  <span class=\"str-chat__message-simple-status\" data-testid=\"sending-indicator\">\n    <div class=\"str-chat__tooltip\">\n      {{ \"streamChat.Sending...\" | translate }}\n    </div>\n    <stream-loading-indicator\n      data-testid=\"loading-indicator\"\n    ></stream-loading-indicator>\n  </span>\n</ng-template>\n<ng-template #readStatus>\n  <span class=\"str-chat__message-simple-status\" data-testid=\"read-indicator\">\n    <div class=\"str-chat__tooltip\" data-testid=\"read-by-tooltip\">\n      {{ readByText }}\n    </div>\n    <stream-avatar\n      class=\"str-chat-angular__avatar-host\"\n      data-test-id=\"last-read-user-avatar\"\n      [size]=\"15\"\n      [imageUrl]=\"lastReadUser?.image\"\n      [name]=\"lastReadUser?.name || lastReadUser?.id\"\n    ></stream-avatar>\n    <span\n      data-test-id=\"read-by-length\"\n      *ngIf=\"isReadByMultipleUsers\"\n      class=\"str-chat__message-simple-status-number\"\n    >\n      {{ (message?.readBy)!.length }}\n    </span>\n  </span>\n</ng-template>\n<ng-template #deliveredStatus>\n  <span\n    class=\"str-chat__message-simple-status\"\n    data-testid=\"delivered-indicator\"\n  >\n    <div class=\"str-chat__tooltip\">\n      {{ \"streamChat.Delivered\" | translate }}\n    </div>\n    <stream-icon\n      data-testid=\"delivered-icon\"\n      icon=\"delivered-icon\"\n    ></stream-icon>\n  </span>\n</ng-template>\n\n<ng-template #deletedMessage>\n  <div data-testid=\"message-deleted-component\">\n    <div class=\"str-chat__message--deleted-inner\" translate>\n      streamChat.This message was deleted...\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #systemMessage>\n  <div data-testid=\"system-message\" class=\"str-chat__message--system\">\n    <div class=\"str-chat__message--system__text\">\n      <div class=\"str-chat__message--system__line\"></div>\n      <p>{{ message?.text }}</p>\n      <div class=\"str-chat__message--system__line\"></div>\n    </div>\n    <div class=\"str-chat__message--system__date\">\n      {{ parsedDate }}\n    </div>\n  </div>\n</ng-template>\n", components: [{ type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size"] }, { type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: ["messageInputTemplate", "isOpen", "isMine", "message", "enabledActions"], outputs: ["displayedActionsCount", "isEditing"] }, { type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: MessageReactionsComponent, selector: "stream-message-reactions", inputs: ["messageId", "messageReactionCounts", "isSelectorOpen", "latestReactions", "ownReactions"], outputs: ["isSelectorOpenChange"] }, { type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["attachments"] }, { type: LoadingIndicatorComponent, selector: "stream-loading-indicator", inputs: ["size", "color"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3039,7 +3074,11 @@
                         templateUrl: './message.component.html',
                         styles: [],
                     }]
-            }], ctorParameters: function () { return [{ type: ChatClientService }, { type: ChannelService }]; }, propDecorators: { message: [{
+            }], ctorParameters: function () { return [{ type: ChatClientService }, { type: ChannelService }]; }, propDecorators: { messageInputTemplate: [{
+                    type: i0.Input
+                }], mentionTemplate: [{
+                    type: i0.Input
+                }], message: [{
                     type: i0.Input
                 }], enabledMessageActions: [{
                     type: i0.Input
@@ -3471,7 +3510,7 @@
         return MessageListComponent;
     }());
     MessageListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageListComponent, deps: [{ token: ChannelService }, { token: ChatClientService }, { token: ImageLoadService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MessageListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageListComponent, selector: "stream-message-list", inputs: { messageTemplate: "messageTemplate", areReactionsEnabled: "areReactionsEnabled", enabledMessageActionsInput: ["enabledMessageActions", "enabledMessageActionsInput"] }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  #scrollContainer\n  data-testid=\"scroll-container\"\n  class=\"str-chat__list\"\n  (scroll)=\"scrolled()\"\n>\n  <div class=\"str-chat__reverse-infinite-scroll\">\n    <ul class=\"str-chat__ul\">\n      <li\n        data-testclass=\"message\"\n        *ngFor=\"\n          let message of messages$ | async;\n          let i = index;\n          trackBy: trackByMessageId\n        \"\n        class=\"str-chat__li str-chat__li--{{ groupStyles[i] }}\"\n      >\n        <ng-container *ngIf=\"messageTemplate; else defaultMessageTemplate\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              messageTemplate;\n              context: {\n                message: message,\n                areReactionsEnabled: areReactionsEnabled,\n                canReactToMessage: canReactToMessage,\n                lastSentMessageId: !!(\n                  lastSentMessageId && message?.id === lastSentMessageId\n                ),\n                canReceiveReadEvents: canReceiveReadEvents\n              }\n            \"\n          ></ng-container>\n        </ng-container>\n        <ng-template #defaultMessageTemplate>\n          <stream-message\n            [message]=\"message\"\n            [areReactionsEnabled]=\"areReactionsEnabled\"\n            [canReactToMessage]=\"canReactToMessage\"\n            [isLastSentMessage]=\"\n              !!(lastSentMessageId && message?.id === lastSentMessageId)\n            \"\n            [enabledMessageActions]=\"enabledMessageActions\"\n            [canReceiveReadEvents]=\"canReceiveReadEvents\"\n          ></stream-message>\n        </ng-template>\n      </li>\n    </ul>\n  </div>\n</div>\n<div class=\"str-chat__list-notifications\">\n  <button\n    data-testid=\"scroll-to-bottom\"\n    *ngIf=\"isUserScrolledUp\"\n    class=\"\n      str-chat__message-notification\n      str-chat__message-notification-right\n      str-chat__message-notification-scroll-down\n    \"\n    (keyup.enter)=\"scrollToBottom()\"\n    (click)=\"scrollToBottom()\"\n  >\n    <div\n      *ngIf=\"unreadMessageCount > 0\"\n      class=\"\n        str-chat__message-notification\n        str-chat__message-notification-scroll-down-unread-count\n      \"\n    >\n      {{ unreadMessageCount }}\n    </div>\n  </button>\n</div>\n", components: [{ type: MessageComponent, selector: "stream-message", inputs: ["message", "enabledMessageActions", "areReactionsEnabled", "canReactToMessage", "isLastSentMessage", "canReceiveReadEvents"] }], directives: [{ type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i3__namespace.AsyncPipe } });
+    MessageListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageListComponent, selector: "stream-message-list", inputs: { messageTemplate: "messageTemplate", messageInputTemplate: "messageInputTemplate", mentionTemplate: "mentionTemplate", areReactionsEnabled: "areReactionsEnabled", enabledMessageActionsInput: ["enabledMessageActions", "enabledMessageActionsInput"] }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  #scrollContainer\n  data-testid=\"scroll-container\"\n  class=\"str-chat__list\"\n  (scroll)=\"scrolled()\"\n>\n  <div class=\"str-chat__reverse-infinite-scroll\">\n    <ul class=\"str-chat__ul\">\n      <li\n        data-testclass=\"message\"\n        *ngFor=\"\n          let message of messages$ | async;\n          let i = index;\n          trackBy: trackByMessageId\n        \"\n        class=\"str-chat__li str-chat__li--{{ groupStyles[i] }}\"\n      >\n        <ng-container *ngIf=\"messageTemplate; else defaultMessageTemplate\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              messageTemplate;\n              context: {\n                message: message,\n                areReactionsEnabled: areReactionsEnabled,\n                canReactToMessage: canReactToMessage,\n                lastSentMessageId: !!(\n                  lastSentMessageId && message?.id === lastSentMessageId\n                ),\n                canReceiveReadEvents: canReceiveReadEvents,\n                messageInputTemplate: messageInputTemplate,\n                mentionTemplate: mentionTemplate\n              }\n            \"\n          ></ng-container>\n        </ng-container>\n        <ng-template #defaultMessageTemplate>\n          <stream-message\n            [message]=\"message\"\n            [areReactionsEnabled]=\"areReactionsEnabled\"\n            [canReactToMessage]=\"canReactToMessage\"\n            [isLastSentMessage]=\"\n              !!(lastSentMessageId && message?.id === lastSentMessageId)\n            \"\n            [enabledMessageActions]=\"enabledMessageActions\"\n            [canReceiveReadEvents]=\"canReceiveReadEvents\"\n            [messageInputTemplate]=\"messageInputTemplate\"\n            [mentionTemplate]=\"mentionTemplate\"\n          ></stream-message>\n        </ng-template>\n      </li>\n    </ul>\n  </div>\n</div>\n<div class=\"str-chat__list-notifications\">\n  <button\n    data-testid=\"scroll-to-bottom\"\n    *ngIf=\"isUserScrolledUp\"\n    class=\"\n      str-chat__message-notification\n      str-chat__message-notification-right\n      str-chat__message-notification-scroll-down\n    \"\n    (keyup.enter)=\"scrollToBottom()\"\n    (click)=\"scrollToBottom()\"\n  >\n    <div\n      *ngIf=\"unreadMessageCount > 0\"\n      class=\"\n        str-chat__message-notification\n        str-chat__message-notification-scroll-down-unread-count\n      \"\n    >\n      {{ unreadMessageCount }}\n    </div>\n  </button>\n</div>\n", components: [{ type: MessageComponent, selector: "stream-message", inputs: ["messageInputTemplate", "mentionTemplate", "message", "enabledMessageActions", "areReactionsEnabled", "canReactToMessage", "isLastSentMessage", "canReceiveReadEvents"] }], directives: [{ type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i3__namespace.AsyncPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageListComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3481,6 +3520,10 @@
                     }]
             }], ctorParameters: function () { return [{ type: ChannelService }, { type: ChatClientService }, { type: ImageLoadService }]; }, propDecorators: { messageTemplate: [{
                     type: i0.Input
+                }], messageInputTemplate: [{
+                    type: i0.Input
+                }], mentionTemplate: [{
+                    type: i0.Input
                 }], areReactionsEnabled: [{
                     type: i0.Input
                 }], enabledMessageActionsInput: [{
@@ -3533,8 +3576,7 @@
             NotificationListComponent,
             AttachmentPreviewListComponent,
             ModalComponent,
-            TextareaDirective,
-            HighlightMentionsPipe], imports: [i3.CommonModule, i1.TranslateModule, StreamAvatarModule], exports: [ChannelComponent,
+            TextareaDirective], imports: [i3.CommonModule, i1.TranslateModule, StreamAvatarModule], exports: [ChannelComponent,
             ChannelHeaderComponent,
             ChannelListComponent,
             ChannelPreviewComponent,
@@ -3550,8 +3592,8 @@
             NotificationListComponent,
             AttachmentPreviewListComponent,
             ModalComponent,
-            HighlightMentionsPipe] });
-    StreamChatModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamChatModule, imports: [[i3.CommonModule, i1.TranslateModule, StreamAvatarModule]] });
+            StreamAvatarModule] });
+    StreamChatModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamChatModule, imports: [[i3.CommonModule, i1.TranslateModule, StreamAvatarModule], StreamAvatarModule] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamChatModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
@@ -3573,7 +3615,6 @@
                             AttachmentPreviewListComponent,
                             ModalComponent,
                             TextareaDirective,
-                            HighlightMentionsPipe,
                         ],
                         imports: [i3.CommonModule, i1.TranslateModule, StreamAvatarModule],
                         exports: [
@@ -3593,7 +3634,7 @@
                             NotificationListComponent,
                             AttachmentPreviewListComponent,
                             ModalComponent,
-                            HighlightMentionsPipe,
+                            StreamAvatarModule,
                         ],
                     }]
             }] });
@@ -3674,7 +3715,6 @@
     exports.ChannelPreviewComponent = ChannelPreviewComponent;
     exports.ChannelService = ChannelService;
     exports.ChatClientService = ChatClientService;
-    exports.HighlightMentionsPipe = HighlightMentionsPipe;
     exports.IconComponent = IconComponent;
     exports.ImageLoadService = ImageLoadService;
     exports.LoadingIndicatorComponent = LoadingIndicatorComponent;
@@ -3689,6 +3729,7 @@
     exports.NotificationListComponent = NotificationListComponent;
     exports.NotificationService = NotificationService;
     exports.StreamAutocompleteTextareaModule = StreamAutocompleteTextareaModule;
+    exports.StreamAvatarModule = StreamAvatarModule;
     exports.StreamChatModule = StreamChatModule;
     exports.StreamI18nService = StreamI18nService;
     exports.StreamTextareaModule = StreamTextareaModule;