stream-chat-angular 4.56.0-perf-message-list.2 → 4.57.0

package/assets/version.d.ts

@@ -1 +1 @@
-export declare const version = "4.56.0-perf-message-list.2";
+export declare const version = "4.57.0";

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

@@ -356,7 +356,7 @@
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
-    var version = '4.56.0-perf-message-list.2';
+    var version = '4.57.0';
 
     /**
      * The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](../components/NotificationListComponent.mdx) component displays the currently active notifications.
@@ -3116,9 +3116,10 @@
      * The `Avatar` component displays the provided image, with fallback to the first letter of the optional name input.
      */
     var AvatarComponent = /** @class */ (function () {
-        function AvatarComponent(chatClientService, ngZone) {
+        function AvatarComponent(chatClientService, ngZone, cdRef) {
             this.chatClientService = chatClientService;
             this.ngZone = ngZone;
+            this.cdRef = cdRef;
             /**
              * The size in pixels of the avatar image.
              */
@@ -3133,93 +3134,116 @@
             this.initialsType = 'first-letter-of-first-word';
             this.isError = false;
             this.isOnline = false;
+            this.initials = '';
+            this.isViewInited = false;
+            this.subscriptions = [];
         }
-        AvatarComponent.prototype.ngOnChanges = function (changes) {
+        AvatarComponent.prototype.ngOnInit = function () {
             var _this = this;
-            var _a, _b;
-            if (changes['channel']) {
-                if (this.channel) {
-                    var otherMember_1 = this.getOtherMemberIfOneToOneChannel();
-                    if (otherMember_1) {
-                        this.isOnline = otherMember_1.online || false;
-                        this.isOnlineSubscription = this.chatClientService.events$
-                            .pipe(operators.filter(function (e) { return e.eventType === 'user.presence.changed'; }))
-                            .subscribe(function (event) {
-                            var _a;
-                            if (((_a = event.event.user) === null || _a === void 0 ? void 0 : _a.id) === otherMember_1.id) {
-                                _this.ngZone.run(function () {
-                                    var _a;
-                                    _this.isOnline = ((_a = event.event.user) === null || _a === void 0 ? void 0 : _a.online) || false;
-                                });
-                            }
-                        });
+            this.subscriptions.push(this.chatClientService.user$.subscribe(function (u) {
+                if ((u === null || u === void 0 ? void 0 : u.id) !== _this.userId) {
+                    _this.userId = u === null || u === void 0 ? void 0 : u.id;
+                    if (_this.type || _this.channel || _this.name) {
+                        _this.setInitials();
+                        _this.setFallbackChannelImage();
+                        _this.updateIsOnlineSubscription();
                     }
-                    else {
-                        (_a = this.isOnlineSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+                    if (_this.isViewInited) {
+                        _this.cdRef.detectChanges();
                     }
                 }
-                else {
-                    this.isOnline = false;
-                    (_b = this.isOnlineSubscription) === null || _b === void 0 ? void 0 : _b.unsubscribe();
-                }
+            }));
+        };
+        AvatarComponent.prototype.ngOnChanges = function (changes) {
+            if (changes['channel']) {
+                this.updateIsOnlineSubscription();
+            }
+            if (changes.type || changes.name || changes.channel) {
+                this.setInitials();
+            }
+            if (changes.type || changes.channel) {
+                this.setFallbackChannelImage();
             }
         };
-        Object.defineProperty(AvatarComponent.prototype, "initials", {
-            get: function () {
-                var _a, _b, _c, _d, _e;
-                var result = '';
-                if (this.type === 'user') {
-                    result = ((_a = this.name) === null || _a === void 0 ? void 0 : _a.toString()) || '';
-                }
-                else if (this.type === 'channel') {
-                    if ((_c = (_b = this.channel) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.name) {
-                        result = (_e = (_d = this.channel) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.name;
-                    }
-                    else {
-                        var otherMember = this.getOtherMemberIfOneToOneChannel();
-                        if (otherMember) {
-                            result = otherMember.name || otherMember.id || '';
-                        }
-                        else {
-                            result = '#';
-                        }
-                    }
-                }
-                var words = result.split(' ');
-                var initials;
-                if (this.initialsType === 'first-letter-of-each-word') {
-                    initials = words.map(function (w) { return w.charAt(0) || ''; }).join('');
+        AvatarComponent.prototype.setFallbackChannelImage = function () {
+            if (this.type !== 'channel') {
+                this.fallbackChannelImage = undefined;
+            }
+            else {
+                var otherMember = this.getOtherMemberIfOneToOneChannel();
+                if (otherMember) {
+                    this.fallbackChannelImage = otherMember.image;
                 }
                 else {
-                    initials = words[0].charAt(0) || '';
+                    this.fallbackChannelImage = undefined;
                 }
-                return initials;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(AvatarComponent.prototype, "fallbackChannelImage", {
-            get: function () {
-                if (this.type !== 'channel') {
-                    return undefined;
+            }
+        };
+        AvatarComponent.prototype.setInitials = function () {
+            var _a, _b, _c, _d, _e;
+            var result = '';
+            if (this.type === 'user') {
+                result = ((_a = this.name) === null || _a === void 0 ? void 0 : _a.toString()) || '';
+            }
+            else if (this.type === 'channel') {
+                if ((_c = (_b = this.channel) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.name) {
+                    result = (_e = (_d = this.channel) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.name;
                 }
                 else {
                     var otherMember = this.getOtherMemberIfOneToOneChannel();
                     if (otherMember) {
-                        return otherMember.image;
+                        result = otherMember.name || otherMember.id || '';
                     }
                     else {
-                        return undefined;
+                        result = '#';
                     }
                 }
-            },
-            enumerable: false,
-            configurable: true
-        });
+            }
+            var words = result.split(' ');
+            var initials;
+            if (this.initialsType === 'first-letter-of-each-word') {
+                initials = words.map(function (w) { return w.charAt(0) || ''; }).join('');
+            }
+            else {
+                initials = words[0].charAt(0) || '';
+            }
+            this.initials = initials;
+        };
+        AvatarComponent.prototype.updateIsOnlineSubscription = function () {
+            var _this = this;
+            var _a, _b;
+            if (this.channel) {
+                var otherMember_1 = this.getOtherMemberIfOneToOneChannel();
+                if (otherMember_1) {
+                    this.isOnline = otherMember_1.online || false;
+                    this.isOnlineSubscription = this.chatClientService.events$
+                        .pipe(operators.filter(function (e) { return e.eventType === 'user.presence.changed'; }))
+                        .subscribe(function (event) {
+                        var _a;
+                        if (((_a = event.event.user) === null || _a === void 0 ? void 0 : _a.id) === otherMember_1.id) {
+                            _this.ngZone.run(function () {
+                                var _a;
+                                _this.isOnline = ((_a = event.event.user) === null || _a === void 0 ? void 0 : _a.online) || false;
+                            });
+                        }
+                    });
+                }
+                else {
+                    (_a = this.isOnlineSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+                }
+            }
+            else {
+                this.isOnline = false;
+                (_b = this.isOnlineSubscription) === null || _b === void 0 ? void 0 : _b.unsubscribe();
+            }
+        };
+        AvatarComponent.prototype.ngAfterViewInit = function () {
+            this.isViewInited = true;
+        };
         AvatarComponent.prototype.getOtherMemberIfOneToOneChannel = function () {
             var _this = this;
             var _a, _b;
-            var otherMembers = Object.values(((_b = (_a = this.channel) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.members) || {}).filter(function (m) { var _a; return m.user_id !== ((_a = _this.chatClientService.chatClient.user) === null || _a === void 0 ? void 0 : _a.id); });
+            var otherMembers = Object.values(((_b = (_a = this.channel) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.members) || {}).filter(function (m) { return m.user_id !== _this.userId; });
             if (otherMembers.length === 1) {
                 return otherMembers[0].user;
             }
@@ -3229,7 +3253,7 @@
         };
         return AvatarComponent;
     }());
-    AvatarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AvatarComponent, deps: [{ token: ChatClientService }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AvatarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AvatarComponent, deps: [{ token: ChatClientService }, { token: i0__namespace.NgZone }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
     AvatarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AvatarComponent, selector: "stream-avatar", inputs: { name: "name", imageUrl: "imageUrl", size: "size", location: "location", channel: "channel", user: "user", type: "type", showOnlineIndicator: "showOnlineIndicator", initialsType: "initialsType" }, usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  class=\"str-chat__avatar str-chat__avatar--circle stream-chat__avatar--{{\n    location\n  }}\"\n  title=\"{{ name }}\"\n  [style]=\"{\n    flexBasis: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n    fontSize:\n      initialsType === 'first-letter-of-first-word'\n        ? 'calc(var(--str-chat__spacing-px, 1px) * ' + size / 2 + ')'\n        : 'calc(var(--str-chat__spacing-px, 1px) * ' + size / 3 + ')',\n    height: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n    lineHeight: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n    width: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')'\n  }\"\n>\n  <img\n    *ngIf=\"(imageUrl || fallbackChannelImage) && !isError; else fallback\"\n    class=\"str-chat__avatar-image str-chat__avatar-image\"\n    src=\"{{ imageUrl || fallbackChannelImage }}\"\n    alt=\"{{ initials }}\"\n    data-testid=\"avatar-img\"\n    (error)=\"isError = true\"\n    [style]=\"{\n      flexBasis: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n      height: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n      objectFit: 'cover',\n      width: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')'\n    }\"\n    fetchpriority=\"high\"\n  />\n  <ng-template #fallback>\n    <div\n      data-testid=\"fallback-img\"\n      style=\"overflow: hidden; white-space: nowrap; text-overflow: ellipsis\"\n      class=\"str-chat__avatar-fallback\"\n    >\n      {{ initials }}\n    </div>\n  </ng-template>\n  <div\n    data-testid=\"online-indicator\"\n    *ngIf=\"isOnline && showOnlineIndicator\"\n    class=\"str-chat__avatar--online-indicator\"\n  ></div>\n</div>\n", styles: [""], directives: [{ type: i9__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AvatarComponent, decorators: [{
                 type: i0.Component,
@@ -3238,7 +3262,7 @@
                         templateUrl: './avatar.component.html',
                         styleUrls: ['./avatar.component.scss'],
                     }]
-            }], ctorParameters: function () { return [{ type: ChatClientService }, { type: i0__namespace.NgZone }]; }, propDecorators: { name: [{
+            }], ctorParameters: function () { return [{ type: ChatClientService }, { type: i0__namespace.NgZone }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { name: [{
                     type: i0.Input
                 }], imageUrl: [{
                     type: i0.Input
@@ -3386,21 +3410,33 @@
             /**
              * The template used for displaying the delivered state of the message inside the [message component](../components/MessageComponent.mdx)
              *
+             * Displayed for the last message sent by the current user, if the message isn't yet read by anyone
+             *
              * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
              */
             this.deliveredStatusTemplate$ = new rxjs.BehaviorSubject(undefined);
             /**
              * The template used for displaying the sending state of the message inside the [message component](../components/MessageComponent.mdx)
              *
+             * Displayed for the last message sent by the current user, if the message is currently being sent
+             *
              * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
              */
             this.sendingStatusTemplate$ = new rxjs.BehaviorSubject(undefined);
             /**
              * The template used for displaying the sent state of the message inside the [message component](../components/MessageComponent.mdx)
              *
+             * Displayed for the last message sent by the current user, if the message is read at least by one user
+             *
              * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
              */
             this.readStatusTemplate$ = new rxjs.BehaviorSubject(undefined);
+            /**
+             * Template to display custom metadata inside [message component](../components/MessageComponent.mdx)
+             *
+             * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
+             */
+            this.customMessageMetadataTemplate$ = new rxjs.BehaviorSubject(undefined);
             /**
              * The template used to display additional information about a channel under the channel name inside the [channel header component](../components/ChannelHeaderComponent.mdx)
              *
@@ -5544,6 +5580,11 @@
             this.isLoading = true;
             this.reactions = [];
             this.shouldHandleReactionClick = true;
+            this.existingReactions = [];
+            this.reactionsCount = 0;
+            this.reactionOptions = [];
+            this.subscriptions = [];
+            this.isViewInited = false;
             this.isOpenChange = function (isOpen) {
                 _this.selectedReactionType = isOpen ? _this.selectedReactionType : undefined;
             };
@@ -5554,6 +5595,16 @@
                 }
             };
         }
+        MessageReactionsComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.subscriptions.push(this.messageReactionsService.reactions$.subscribe(function (reactions) {
+                _this.reactionOptions = Object.keys(reactions);
+                _this.setExistingReactions();
+                if (_this.isViewInited) {
+                    _this.cdRef.detectChanges();
+                }
+            }));
+        };
         MessageReactionsComponent.prototype.ngOnChanges = function (changes) {
             var _this = this;
             if (changes.isSelectorOpen) {
@@ -5561,6 +5612,9 @@
                     ? setTimeout(function () { return _this.watchForOutsideClicks(); }) // setTimeout: wait for current click to bubble up, and only watch for clicks after that
                     : this.stopWatchForOutsideClicks();
             }
+            if (changes.messageReactionCounts) {
+                this.setExistingReactions();
+            }
             if (changes.messageReactionCounts && this.messageReactionCounts) {
                 var reactionsCount = Object.keys(this.messageReactionCounts).reduce(function (acc, key) { return acc + (_this.messageReactionCounts[key] || 0); }, 0);
                 this.shouldHandleReactionClick =
@@ -5568,37 +5622,18 @@
                         !!this.messageReactionsService.customReactionClickHandler;
             }
         };
+        MessageReactionsComponent.prototype.ngAfterViewInit = function () {
+            this.isViewInited = true;
+        };
         MessageReactionsComponent.prototype.ngAfterViewChecked = function () {
             if (this.tooltipText && !this.tooltipPositions) {
                 this.setTooltipPosition();
                 this.cdRef.detectChanges();
             }
         };
-        Object.defineProperty(MessageReactionsComponent.prototype, "existingReactions", {
-            get: function () {
-                var _this = this;
-                return Object.keys(this.messageReactionCounts)
-                    .filter(function (k) { return _this.reactionOptions.indexOf(k) !== -1; })
-                    .filter(function (k) { return _this.messageReactionCounts[k] > 0; });
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MessageReactionsComponent.prototype, "reactionsCount", {
-            get: function () {
-                var _this = this;
-                return this.existingReactions.reduce(function (total, reaction) { return total + _this.messageReactionCounts[reaction]; }, 0);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MessageReactionsComponent.prototype, "reactionOptions", {
-            get: function () {
-                return Object.keys(this.messageReactionsService.reactions);
-            },
-            enumerable: false,
-            configurable: true
-        });
+        MessageReactionsComponent.prototype.ngOnDestroy = function () {
+            this.subscriptions.forEach(function (s) { return s.unsubscribe(); });
+        };
         MessageReactionsComponent.prototype.getLatestUserByReaction = function (reactionType) {
             var _a;
             return (_a = this.latestReactions.find(function (r) { return r.type === reactionType && r.user; })) === null || _a === void 0 ? void 0 : _a.user;
@@ -5740,6 +5775,13 @@
                 });
             });
         };
+        MessageReactionsComponent.prototype.setExistingReactions = function () {
+            var _this = this;
+            this.existingReactions = Object.keys(this.messageReactionCounts)
+                .filter(function (k) { return _this.reactionOptions.indexOf(k) !== -1; })
+                .filter(function (k) { return _this.messageReactionCounts[k] > 0; });
+            this.reactionsCount = this.existingReactions.reduce(function (total, reaction) { return total + _this.messageReactionCounts[reaction]; }, 0);
+        };
         return MessageReactionsComponent;
     }());
     MessageReactionsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageReactionsComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: ChannelService }, { token: MessageReactionsService }, { token: CustomTemplatesService }, { token: ThemeService }], target: i0__namespace.ɵɵFactoryTarget.Component });
@@ -6038,6 +6080,11 @@
                 readByText: this.readByText,
             };
         };
+        MessageComponent.prototype.getMessageMetadataContext = function () {
+            return {
+                message: this.message,
+            };
+        };
         MessageComponent.prototype.jumpToMessage = function (messageId, parentMessageId) {
             void this.channelService.jumpToMessage(messageId, parentMessageId);
         };
@@ -6148,7 +6195,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 }, { token: CustomTemplatesService }, { token: i0__namespace.ChangeDetectorRef }, { token: ThemeService }, { token: DateParserService }, { token: i0__namespace.NgZone }, { token: MessageService }, { token: MessageActionsService }], 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", isLastSentMessage: "isLastSentMessage", mode: "mode", isHighlighted: "isHighlighted", customActions: "customActions" }, 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--other]=\"!isSentByCurrentUser\"\n  [class.str-chat__message-simple--me]=\"isSentByCurrentUser\"\n  [class.str-chat__message--has-attachment]=\"hasAttachment\"\n  [class.str-chat__message--with-reactions]=\"hasReactions\"\n  [class.str-chat__message--highlighted]=\"isHighlighted\"\n  [class.str-chat__message-with-thread-link]=\"shouldDisplayThreadLink\"\n  [class.str-chat__message-send-can-be-retried]=\"\n    message?.status === 'failed' && message?.errorStatusCode !== 403\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 *ngIf=\"themeVersion === '1'\">\n        <ng-container *ngTemplateOutlet=\"messageStatus\"></ng-container>\n      </ng-container>\n      <stream-avatar-placeholder\n        data-testid=\"avatar\"\n        class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n        [imageUrl]=\"message?.user?.image\"\n        [name]=\"message?.user?.name || message?.user?.id\"\n        type=\"user\"\n        location=\"message-sender\"\n        [user]=\"message?.user || undefined\"\n      ></stream-avatar-placeholder>\n      <div class=\"str-chat__message-inner\">\n        <div\n          class=\"str-chat__message-simple__actions str-chat__message-options\"\n          data-testid=\"message-options\"\n          [class.str-chat__message-edit-in-progress]=\"isEditing\"\n          *ngIf=\"areOptionsVisible\"\n        >\n          <div\n            data-testid=\"message-actions-container\"\n            #messageActionsToggle\n            class=\"\n              str-chat__message-actions-container\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            [popper]=\"popperContent\"\n            [popperTrigger]=\"popperTriggerClick\"\n            [popperPlacement]=\"popperPlacementAuto\"\n            [popperHideOnScroll]=\"false\"\n            [popperHideOnClickOutside]=\"true\"\n            [popperHideOnMouseLeave]=\"false\"\n            [popperDisableAnimation]=\"true\"\n          >\n            <popper-content #popperContent>\n              <ng-template\n                #defaultMessageActionsBox\n                let-isOpen=\"isOpen\"\n                let-isMine=\"isMine\"\n                let-enabledActions=\"enabledActions\"\n                let-messageInput=\"message\"\n                let-customActions=\"customActions\"\n              >\n                <stream-message-actions-box\n                  *ngIf=\"isOpen\"\n                  [isOpen]=\"isOpen\"\n                  [isMine]=\"isMine\"\n                  [enabledActions]=\"enabledActions\"\n                  [customActions]=\"customActions\"\n                  [message]=\"messageInput\"\n                ></stream-message-actions-box>\n              </ng-template>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  (customTemplatesService.messageActionsBoxTemplate$ | async) ||\n                    defaultMessageActionsBox;\n                  context: getMessageActionsBoxContext()\n                \"\n              >\n              </ng-container>\n            </popper-content>\n            <div\n              class=\"str-chat__message-actions-box-button\"\n              data-testid=\"action-icon\"\n              (click)=\"isActionBoxOpen = !isActionBoxOpen\"\n              (keyup.enter)=\"isActionBoxOpen = !isActionBoxOpen\"\n              *ngIf=\"visibleMessageActionsCount > 0\"\n            >\n              <stream-icon-placeholder\n                icon=\"action-icon\"\n                class=\"str-chat__message-action-icon\"\n              ></stream-icon-placeholder>\n            </div>\n          </div>\n          <div\n            *ngIf=\"\n              enabledMessageActions.indexOf('send-reply') !== -1 &&\n              mode === 'main'\n            \"\n            class=\"\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--thread\n              str-chat__message-reply-in-thread-button\n            \"\n            data-testid=\"reply-in-thread\"\n            (click)=\"setAsActiveParentMessage()\"\n            (keyup.enter)=\"setAsActiveParentMessage()\"\n          >\n            <stream-icon-placeholder\n              class=\"str-chat__message-action-icon\"\n              icon=\"reply-in-thread\"\n            ></stream-icon-placeholder>\n          </div>\n          <div\n            *ngIf=\"canReactToMessage\"\n            class=\"\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--reactions\n              str-chat__message-reactions-button\n            \"\n            data-testid=\"reaction-icon\"\n            (click)=\"isReactionSelectorOpen = !isReactionSelectorOpen\"\n            (keyup.enter)=\"isReactionSelectorOpen = !isReactionSelectorOpen\"\n          >\n            <stream-icon-placeholder\n              class=\"str-chat__message-action-icon\"\n              icon=\"reaction-icon\"\n            ></stream-icon-placeholder>\n          </div>\n        </div>\n        <div class=\"str-chat__message-reactions-host\">\n          <ng-template\n            #defaultMessageReactions\n            let-messageReactionCounts=\"messageReactionCounts\"\n            let-latestReactions=\"latestReactions\"\n            let-isSelectorOpen=\"isSelectorOpen\"\n            let-isSelectorOpenChangeHandler=\"isSelectorOpenChangeHandler\"\n            let-messageId=\"messageId\"\n            let-ownReactions=\"ownReactions\"\n          >\n            <stream-message-reactions\n              [messageReactionCounts]=\"messageReactionCounts\"\n              [latestReactions]=\"latestReactions\"\n              [isSelectorOpen]=\"isSelectorOpen\"\n              (isSelectorOpenChange)=\"isSelectorOpenChangeHandler($event)\"\n              [messageId]=\"messageId\"\n              [ownReactions]=\"ownReactions\"\n            ></stream-message-reactions>\n          </ng-template>\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.messageReactionsTemplate$ | async) ||\n                defaultMessageReactions;\n              context: getMessageReactionsContext()\n            \"\n          ></ng-container>\n        </div>\n        <!-- transform: translate3d(0, 0, 0) fixes scrolling issues on iOS, see: https://stackoverflow.com/questions/50105780/elements-disappear-when-scrolling-in-safari-webkit-transform-fix-only-works-t/50144295#50144295 -->\n        <!-- transform: none is required when image carousel is open in order for the modal to be correctly positioned, see how the transform property changes the behavior of fixed positioned elements https://developer.mozilla.org/en-US/docs/Web/CSS/position  -->\n        <div\n          class=\"str-chat__message-bubble\"\n          style=\"transform: {{\n            imageAttachmentModalState === 'opened'\n              ? 'none'\n              : 'translate3d(0, 0, 0)'\n          }}\"\n        >\n          <ng-container *ngIf=\"hasAttachment && !message?.quoted_message\">\n            <ng-container\n              *ngTemplateOutlet=\"attachmentsTemplate\"\n            ></ng-container>\n          </ng-container>\n          <div\n            class=\"str-chat__message-text\"\n            tabindex=\"0\"\n            *ngIf=\"message?.text || (message?.quoted_message && hasAttachment)\"\n          >\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              <ng-container *ngTemplateOutlet=\"quotedMessage\"></ng-container>\n              <ng-container *ngIf=\"hasAttachment && message?.quoted_message\">\n                <ng-container\n                  *ngTemplateOutlet=\"attachmentsTemplate\"\n                ></ng-container>\n              </ng-container>\n              <div\n                data-testid=\"client-error-message\"\n                *ngIf=\"message?.type === 'error'\"\n                class=\"\n                  str-chat__simple-message--error-message\n                  str-chat__message--error-message\n                \"\n              >\n                {{ \"streamChat.Error \u00B7 Unsent\" | translate }}\n              </div>\n              <div\n                data-testid=\"error-message\"\n                *ngIf=\"message?.status === 'failed'\"\n                class=\"\n                  str-chat__simple-message--error-message\n                  str-chat__message--error-message\n                \"\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 data-testid=\"text\">\n                <p>\n                  <ng-container *ngIf=\"messageTextParts; else defaultContent\">\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-template #defaultMention let-content=\"content\">\n                          <span class=\"str-chat__message-mention\">{{\n                            content\n                          }}</span>\n                        </ng-template>\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            (customTemplatesService.mentionTemplate$ | async) ||\n                              defaultMention;\n                            context: getMentionContext(part)\n                          \"\n                        ></ng-container>\n                      </ng-template>\n                    </ng-container>\n                  </ng-container>\n                  <ng-template #defaultContent>\n                    <ng-container *ngIf=\"displayAs === 'text'; else asHTML\">\n                      {{ messageText || \"\" }}\n                    </ng-container>\n                    <ng-template #asHTML\n                      ><span\n                        data-testid=\"html-content\"\n                        [innerHTML]=\"messageText\"\n                      ></span\n                    ></ng-template>\n                  </ng-template>\n                </p>\n              </div>\n            </div>\n          </div>\n          <stream-icon-placeholder\n            *ngIf=\"themeVersion === '2'\"\n            class=\"str-chat__message-error-icon\"\n            icon=\"error\"\n          ></stream-icon-placeholder>\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"\n            replyCountButton;\n            context: { position: 'inside-message-bubble' }\n          \"\n        ></ng-container>\n        <ng-container\n          *ngTemplateOutlet=\"\n            messageDateAndSender;\n            context: { position: 'inside-message-bubble' }\n          \"\n        ></ng-container>\n      </div>\n      <ng-container\n        *ngTemplateOutlet=\"\n          replyCountButton;\n          context: { position: 'outside-message-bubble', message: message }\n        \"\n      ></ng-container>\n\n      <ng-container\n        *ngTemplateOutlet=\"\n          messageDateAndSender;\n          context: { position: 'outside-message-bubble' }\n        \"\n      ></ng-container>\n    </ng-container>\n  </ng-container>\n</div>\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  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.systemMessageTemplate$ | async) ||\n        defaultSystemMessage;\n      context: getMessageContext()\n    \"\n  ></ng-container>\n  <ng-template #defaultSystemMessage let-messageInput=\"message\">\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>{{ messageInput?.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</ng-template>\n\n<ng-template #quotedMessage>\n  <div\n    *ngIf=\"message?.quoted_message\"\n    class=\"quoted-message str-chat__quoted-message-preview\"\n    data-testid=\"quoted-message-container\"\n    [class.mine]=\"isSentByCurrentUser\"\n    (click)=\"\n      jumpToMessage(\n        (message?.quoted_message)!.id,\n        message?.quoted_message?.parent_id\n      )\n    \"\n    (keyup.enter)=\"\n      jumpToMessage(\n        (message?.quoted_message)!.id,\n        message?.quoted_message?.parent_id\n      )\n    \"\n  >\n    <stream-avatar-placeholder\n      data-testid=\"qouted-message-avatar\"\n      class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n      [imageUrl]=\"message?.quoted_message?.user?.image\"\n      [name]=\"\n        message?.quoted_message?.user?.name || message?.quoted_message?.user?.id\n      \"\n      [size]=\"20\"\n      type=\"user\"\n      location=\"quoted-message-sender\"\n      [user]=\"message?.quoted_message?.user || undefined\"\n    ></stream-avatar-placeholder>\n    <div class=\"quoted-message-inner str-chat__quoted-message-bubble\">\n      <ng-container\n        *ngIf=\"\n          message?.quoted_message?.attachments &&\n          message?.quoted_message?.attachments?.length\n        \"\n      >\n        <ng-template\n          #defaultAttachments\n          let-messageId=\"messageId\"\n          let-attachments=\"attachments\"\n          let-parentMessageId=\"parentMessageId\"\n          let-imageModalStateChangeHandler=\"imageModalStateChangeHandler\"\n        >\n          <stream-attachment-list\n            [messageId]=\"messageId\"\n            [attachments]=\"attachments\"\n            [parentMessageId]=\"parentMessageId\"\n            (imageModalStateChange)=\"imageModalStateChangeHandler($event)\"\n          ></stream-attachment-list>\n        </ng-template>\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.attachmentListTemplate$ | async) ||\n              defaultAttachments;\n            context: getQuotedMessageAttachmentListContext()\n          \"\n        ></ng-container>\n      </ng-container>\n      <div\n        data-testid=\"quoted-message-text\"\n        [innerHTML]=\"\n          message?.quoted_message?.translation ||\n          message?.quoted_message?.html ||\n          message?.quoted_message?.text\n        \"\n      ></div>\n    </div>\n  </div>\n</ng-template>\n\n<!-- We need these markups in slightly different positions in theme-v1 and theme-v2, this soultion makes that possible without duplicating the code -->\n<ng-template #messageDateAndSender let-position=\"position\">\n  <ng-container\n    *ngIf=\"\n      (position === 'inside-message-bubble' && themeVersion === '1') ||\n      (position === 'outside-message-bubble' && themeVersion === '2')\n    \"\n  >\n    <div\n      class=\"str-chat__translation-notice\"\n      *ngIf=\"shouldDisplayTranslationNotice\"\n      data-testid=\"translation-notice\"\n    >\n      <button\n        data-testid=\"see-original\"\n        *ngIf=\"displayedMessageTextContent === 'translation'\"\n        (click)=\"displayOriginalMessage()\"\n        (keyup.enter)=\"displayOriginalMessage()\"\n        translate\n      >\n        streamChat.See original (automatically translated)\n      </button>\n      <button\n        data-testid=\"see-translation\"\n        *ngIf=\"displayedMessageTextContent === 'original'\"\n        (click)=\"displayTranslatedMessage()\"\n        (keyup.enter)=\"displayTranslatedMessage()\"\n        translate\n      >\n        streamChat.See translation\n      </button>\n    </div>\n    <div\n      class=\"\n        str-chat__message-data\n        str-chat__message-simple-data\n        str-chat__message-metadata\n      \"\n    >\n      <ng-container *ngIf=\"themeVersion === '2'\">\n        <ng-container *ngTemplateOutlet=\"messageStatus\"></ng-container>\n      </ng-container>\n      <span\n        data-testid=\"sender\"\n        *ngIf=\"!isSentByCurrentUser\"\n        class=\"str-chat__message-simple-name str-chat__message-sender-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  </ng-container>\n</ng-template>\n\n<ng-template #messageStatus>\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          mode === 'main' && isMessageDeliveredAndRead && canDisplayReadStatus;\n          else deliveredStatus\n        \"\n      >\n        <ng-container *ngTemplateOutlet=\"readStatus\"></ng-container>\n      </ng-container>\n    </ng-template>\n    <ng-template #deliveredStatus>\n      <ng-container\n        *ngTemplateOutlet=\"\n          (customTemplatesService.deliveredStatusTemplate$ | async) ||\n            defaultDeliveredStatus;\n          context: getDeliveredStatusContext()\n        \"\n      ></ng-container>\n    </ng-template>\n    <ng-template #defaultDeliveredStatus>\n      <span\n        *ngIf=\"mode === 'main'\"\n        class=\"\n          str-chat__message-simple-status\n          str-chat__message-simple-status-angular\n          str-chat__message-status\n        \"\n        data-testid=\"delivered-indicator\"\n        tabindex=\"0\"\n        [popper]=\"popperContent\"\n        [popperTrigger]=\"popperTriggerHover\"\n        [popperPlacement]=\"popperPlacementAuto\"\n        [popperHideOnScroll]=\"false\"\n        [popperHideOnClickOutside]=\"false\"\n        (hover)=\"$event.stopPropagation()\"\n      >\n        <popper-content #popperContent>\n          <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n            {{ \"streamChat.Delivered\" | translate }}\n          </div>\n        </popper-content>\n        <stream-icon-placeholder\n          data-testid=\"delivered-icon\"\n          icon=\"delivered-icon\"\n        ></stream-icon-placeholder>\n      </span>\n    </ng-template>\n    <ng-template #sendingStatus>\n      <ng-container\n        *ngTemplateOutlet=\"\n          (customTemplatesService.sendingStatusTemplate$ | async) ||\n            defaultSendingStatus;\n          context: getSendingStatusContext()\n        \"\n      ></ng-container>\n    </ng-template>\n    <ng-template #defaultSendingStatus>\n      <span\n        class=\"\n          str-chat__message-simple-status\n          str-chat__message-simple-status-angular\n          str-chat__message-status\n        \"\n        data-testid=\"sending-indicator\"\n        tabindex=\"0\"\n        [popper]=\"popperContent\"\n        [popperTrigger]=\"popperTriggerHover\"\n        [popperPlacement]=\"popperPlacementAuto\"\n        [popperHideOnScroll]=\"false\"\n        [popperHideOnClickOutside]=\"false\"\n        (hover)=\"$event.stopPropagation()\"\n      >\n        <popper-content #popperContent>\n          <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n            {{ \"streamChat.Sending...\" | translate }}\n          </div>\n        </popper-content>\n        <stream-loading-indicator-placeholder\n          data-testid=\"loading-indicator\"\n        ></stream-loading-indicator-placeholder>\n      </span>\n    </ng-template>\n    <ng-template #readStatus>\n      <ng-container\n        *ngTemplateOutlet=\"\n          (customTemplatesService.readStatusTemplate$ | async) ||\n            defaultReadStatus;\n          context: getReadStatusContext()\n        \"\n      ></ng-container>\n    </ng-template>\n    <ng-template #defaultReadStatus>\n      <span\n        class=\"\n          str-chat__message-simple-status\n          str-chat__message-simple-status-angular\n          str-chat__message-status\n        \"\n        data-testid=\"read-indicator\"\n        tabindex=\"0\"\n        [popper]=\"popperContent\"\n        [popperTrigger]=\"popperTriggerHover\"\n        [popperPlacement]=\"popperPlacementAuto\"\n        [popperHideOnScroll]=\"false\"\n        [popperHideOnClickOutside]=\"false\"\n        (hover)=\"$event.stopPropagation()\"\n      >\n        <popper-content #popperContent>\n          <div\n            class=\"str-chat__tooltip str-chat__tooltip-angular\"\n            data-testid=\"read-by-tooltip\"\n          >\n            {{ readByText }}\n          </div>\n        </popper-content>\n        <stream-avatar-placeholder\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          type=\"user\"\n          location=\"message-reader\"\n          [user]=\"lastReadUser\"\n        ></stream-avatar-placeholder>\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-container>\n</ng-template>\n\n<ng-template #replyCountButton let-position=\"position\">\n  <div\n    *ngIf=\"\n      (position === 'inside-message-bubble' && themeVersion === '1') ||\n      (position === 'outside-message-bubble' && themeVersion === '2')\n    \"\n    class=\"\n      str-chat__message-simple-reply-button\n      str-chat__message-replies-count-button-wrapper\n    \"\n  >\n    <button\n      *ngIf=\"shouldDisplayThreadLink\"\n      class=\"str-chat__message-replies-count-button\"\n      data-testid=\"reply-count-button\"\n      (click)=\"setAsActiveParentMessage()\"\n    >\n      <stream-icon-placeholder\n        *ngIf=\"themeVersion === '1'\"\n        stream-icon-placeholder\n        icon=\"reply\"\n      ></stream-icon-placeholder>\n      {{message?.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}\n      replies' | translate:replyCountParam)}}\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #attachmentsTemplate>\n  <ng-template\n    #defaultAttachments\n    let-messageId=\"messageId\"\n    let-attachments=\"attachments\"\n    let-parentMessageId=\"parentMessageId\"\n    let-imageModalStateChangeHandler=\"imageModalStateChangeHandler\"\n  >\n    <stream-attachment-list\n      [messageId]=\"messageId\"\n      [attachments]=\"attachments\"\n      [parentMessageId]=\"parentMessageId\"\n      (imageModalStateChange)=\"imageModalStateChangeHandler($event)\"\n    ></stream-attachment-list>\n  </ng-template>\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.attachmentListTemplate$ | async) ||\n        defaultAttachments;\n      context: getAttachmentListContext()\n    \"\n  ></ng-container>\n</ng-template>\n", components: [{ type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { type: i9__namespace$1.NgxPopperjsContentComponent, selector: "popper-content", exportAs: ["ngxPopperjsContent"] }, { type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: ["isOpen", "isMine", "message", "enabledActions", "customActions"], outputs: ["displayedActionsCount", "isEditing"] }, { type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: MessageReactionsComponent, selector: "stream-message-reactions", inputs: ["messageId", "messageReactionCounts", "isSelectorOpen", "latestReactions", "ownReactions"], outputs: ["isSelectorOpenChange"] }, { type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "parentMessageId", "attachments"], outputs: ["imageModalStateChange"] }, { type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder", inputs: ["size", "color"] }], directives: [{ type: i9__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9__namespace$1.NgxPopperjsDirective, selector: "[popper]", inputs: ["popperTimeout", "popperTimeoutAfterShow", "popperApplyClass", "popper", "popperDisabled", "popperPlacement", "popperApplyArrowClass", "popperPreventOverflow", "popperHideOnClickOutside", "popperTrigger", "popperStyles", "popperAriaDescribeBy", "popperAriaRole", "popperBoundaries", "popperCloseOnClickOutside", "popperDisableAnimation", "popperDisableStyle", "popperHideOnMouseLeave", "popperHideOnScroll", "popperAppendTo", "popperModifiers", "popperPositionFixed", "popperDelay", "popperShowOnStart", "popperTarget"], outputs: ["popperOnHidden", "popperOnShown", "popperOnUpdate"], exportAs: ["popper"] }, { type: i9__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "async": i9__namespace.AsyncPipe, "translate": i10__namespace.TranslatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    MessageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageComponent, selector: "stream-message", inputs: { message: "message", enabledMessageActions: "enabledMessageActions", isLastSentMessage: "isLastSentMessage", mode: "mode", isHighlighted: "isHighlighted", customActions: "customActions" }, 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--other]=\"!isSentByCurrentUser\"\n  [class.str-chat__message-simple--me]=\"isSentByCurrentUser\"\n  [class.str-chat__message--has-attachment]=\"hasAttachment\"\n  [class.str-chat__message--with-reactions]=\"hasReactions\"\n  [class.str-chat__message--highlighted]=\"isHighlighted\"\n  [class.str-chat__message-with-thread-link]=\"shouldDisplayThreadLink\"\n  [class.str-chat__message-send-can-be-retried]=\"\n    message?.status === 'failed' && message?.errorStatusCode !== 403\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 *ngIf=\"themeVersion === '1'\">\n        <ng-container *ngTemplateOutlet=\"messageStatus\"></ng-container>\n      </ng-container>\n      <stream-avatar-placeholder\n        data-testid=\"avatar\"\n        class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n        [imageUrl]=\"message?.user?.image\"\n        [name]=\"message?.user?.name || message?.user?.id\"\n        type=\"user\"\n        location=\"message-sender\"\n        [user]=\"message?.user || undefined\"\n      ></stream-avatar-placeholder>\n      <div class=\"str-chat__message-inner\">\n        <div\n          class=\"str-chat__message-simple__actions str-chat__message-options\"\n          data-testid=\"message-options\"\n          [class.str-chat__message-edit-in-progress]=\"isEditing\"\n          *ngIf=\"areOptionsVisible\"\n        >\n          <div\n            data-testid=\"message-actions-container\"\n            #messageActionsToggle\n            class=\"\n              str-chat__message-actions-container\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            [popper]=\"popperContent\"\n            [popperTrigger]=\"popperTriggerClick\"\n            [popperPlacement]=\"popperPlacementAuto\"\n            [popperHideOnScroll]=\"false\"\n            [popperHideOnClickOutside]=\"true\"\n            [popperHideOnMouseLeave]=\"false\"\n            [popperDisableAnimation]=\"true\"\n          >\n            <popper-content #popperContent>\n              <ng-template\n                #defaultMessageActionsBox\n                let-isOpen=\"isOpen\"\n                let-isMine=\"isMine\"\n                let-enabledActions=\"enabledActions\"\n                let-messageInput=\"message\"\n                let-customActions=\"customActions\"\n              >\n                <stream-message-actions-box\n                  *ngIf=\"isOpen\"\n                  [isOpen]=\"isOpen\"\n                  [isMine]=\"isMine\"\n                  [enabledActions]=\"enabledActions\"\n                  [customActions]=\"customActions\"\n                  [message]=\"messageInput\"\n                ></stream-message-actions-box>\n              </ng-template>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  (customTemplatesService.messageActionsBoxTemplate$ | async) ||\n                    defaultMessageActionsBox;\n                  context: getMessageActionsBoxContext()\n                \"\n              >\n              </ng-container>\n            </popper-content>\n            <div\n              class=\"str-chat__message-actions-box-button\"\n              data-testid=\"action-icon\"\n              (click)=\"isActionBoxOpen = !isActionBoxOpen\"\n              (keyup.enter)=\"isActionBoxOpen = !isActionBoxOpen\"\n              *ngIf=\"visibleMessageActionsCount > 0\"\n            >\n              <stream-icon-placeholder\n                icon=\"action-icon\"\n                class=\"str-chat__message-action-icon\"\n              ></stream-icon-placeholder>\n            </div>\n          </div>\n          <div\n            *ngIf=\"\n              enabledMessageActions.indexOf('send-reply') !== -1 &&\n              mode === 'main'\n            \"\n            class=\"\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--thread\n              str-chat__message-reply-in-thread-button\n            \"\n            data-testid=\"reply-in-thread\"\n            (click)=\"setAsActiveParentMessage()\"\n            (keyup.enter)=\"setAsActiveParentMessage()\"\n          >\n            <stream-icon-placeholder\n              class=\"str-chat__message-action-icon\"\n              icon=\"reply-in-thread\"\n            ></stream-icon-placeholder>\n          </div>\n          <div\n            *ngIf=\"canReactToMessage\"\n            class=\"\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--reactions\n              str-chat__message-reactions-button\n            \"\n            data-testid=\"reaction-icon\"\n            (click)=\"isReactionSelectorOpen = !isReactionSelectorOpen\"\n            (keyup.enter)=\"isReactionSelectorOpen = !isReactionSelectorOpen\"\n          >\n            <stream-icon-placeholder\n              class=\"str-chat__message-action-icon\"\n              icon=\"reaction-icon\"\n            ></stream-icon-placeholder>\n          </div>\n        </div>\n        <div class=\"str-chat__message-reactions-host\">\n          <ng-template\n            #defaultMessageReactions\n            let-messageReactionCounts=\"messageReactionCounts\"\n            let-latestReactions=\"latestReactions\"\n            let-isSelectorOpen=\"isSelectorOpen\"\n            let-isSelectorOpenChangeHandler=\"isSelectorOpenChangeHandler\"\n            let-messageId=\"messageId\"\n            let-ownReactions=\"ownReactions\"\n          >\n            <stream-message-reactions\n              [messageReactionCounts]=\"messageReactionCounts\"\n              [latestReactions]=\"latestReactions\"\n              [isSelectorOpen]=\"isSelectorOpen\"\n              (isSelectorOpenChange)=\"isSelectorOpenChangeHandler($event)\"\n              [messageId]=\"messageId\"\n              [ownReactions]=\"ownReactions\"\n            ></stream-message-reactions>\n          </ng-template>\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.messageReactionsTemplate$ | async) ||\n                defaultMessageReactions;\n              context: getMessageReactionsContext()\n            \"\n          ></ng-container>\n        </div>\n        <!-- transform: translate3d(0, 0, 0) fixes scrolling issues on iOS, see: https://stackoverflow.com/questions/50105780/elements-disappear-when-scrolling-in-safari-webkit-transform-fix-only-works-t/50144295#50144295 -->\n        <!-- transform: none is required when image carousel is open in order for the modal to be correctly positioned, see how the transform property changes the behavior of fixed positioned elements https://developer.mozilla.org/en-US/docs/Web/CSS/position  -->\n        <div\n          class=\"str-chat__message-bubble\"\n          style=\"transform: {{\n            imageAttachmentModalState === 'opened'\n              ? 'none'\n              : 'translate3d(0, 0, 0)'\n          }}\"\n        >\n          <ng-container *ngIf=\"hasAttachment && !message?.quoted_message\">\n            <ng-container\n              *ngTemplateOutlet=\"attachmentsTemplate\"\n            ></ng-container>\n          </ng-container>\n          <div\n            class=\"str-chat__message-text\"\n            tabindex=\"0\"\n            *ngIf=\"message?.text || (message?.quoted_message && hasAttachment)\"\n          >\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              <ng-container *ngTemplateOutlet=\"quotedMessage\"></ng-container>\n              <ng-container *ngIf=\"hasAttachment && message?.quoted_message\">\n                <ng-container\n                  *ngTemplateOutlet=\"attachmentsTemplate\"\n                ></ng-container>\n              </ng-container>\n              <div\n                data-testid=\"client-error-message\"\n                *ngIf=\"message?.type === 'error'\"\n                class=\"\n                  str-chat__simple-message--error-message\n                  str-chat__message--error-message\n                \"\n              >\n                {{ \"streamChat.Error \u00B7 Unsent\" | translate }}\n              </div>\n              <div\n                data-testid=\"error-message\"\n                *ngIf=\"message?.status === 'failed'\"\n                class=\"\n                  str-chat__simple-message--error-message\n                  str-chat__message--error-message\n                \"\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 data-testid=\"text\">\n                <p>\n                  <ng-container *ngIf=\"messageTextParts; else defaultContent\">\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-template #defaultMention let-content=\"content\">\n                          <span class=\"str-chat__message-mention\">{{\n                            content\n                          }}</span>\n                        </ng-template>\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            (customTemplatesService.mentionTemplate$ | async) ||\n                              defaultMention;\n                            context: getMentionContext(part)\n                          \"\n                        ></ng-container>\n                      </ng-template>\n                    </ng-container>\n                  </ng-container>\n                  <ng-template #defaultContent>\n                    <ng-container *ngIf=\"displayAs === 'text'; else asHTML\">\n                      {{ messageText || \"\" }}\n                    </ng-container>\n                    <ng-template #asHTML\n                      ><span\n                        data-testid=\"html-content\"\n                        [innerHTML]=\"messageText\"\n                      ></span\n                    ></ng-template>\n                  </ng-template>\n                </p>\n              </div>\n            </div>\n          </div>\n          <stream-icon-placeholder\n            *ngIf=\"themeVersion === '2'\"\n            class=\"str-chat__message-error-icon\"\n            icon=\"error\"\n          ></stream-icon-placeholder>\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"\n            replyCountButton;\n            context: { position: 'inside-message-bubble' }\n          \"\n        ></ng-container>\n        <ng-container\n          *ngTemplateOutlet=\"\n            messageDateAndSender;\n            context: { position: 'inside-message-bubble' }\n          \"\n        ></ng-container>\n      </div>\n      <ng-container\n        *ngTemplateOutlet=\"\n          replyCountButton;\n          context: { position: 'outside-message-bubble', message: message }\n        \"\n      ></ng-container>\n\n      <ng-container\n        *ngTemplateOutlet=\"\n          messageDateAndSender;\n          context: { position: 'outside-message-bubble' }\n        \"\n      ></ng-container>\n    </ng-container>\n  </ng-container>\n</div>\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  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.systemMessageTemplate$ | async) ||\n        defaultSystemMessage;\n      context: getMessageContext()\n    \"\n  ></ng-container>\n  <ng-template #defaultSystemMessage let-messageInput=\"message\">\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>{{ messageInput?.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</ng-template>\n\n<ng-template #quotedMessage>\n  <div\n    *ngIf=\"message?.quoted_message\"\n    class=\"quoted-message str-chat__quoted-message-preview\"\n    data-testid=\"quoted-message-container\"\n    [class.mine]=\"isSentByCurrentUser\"\n    (click)=\"\n      jumpToMessage(\n        (message?.quoted_message)!.id,\n        message?.quoted_message?.parent_id\n      )\n    \"\n    (keyup.enter)=\"\n      jumpToMessage(\n        (message?.quoted_message)!.id,\n        message?.quoted_message?.parent_id\n      )\n    \"\n  >\n    <stream-avatar-placeholder\n      data-testid=\"qouted-message-avatar\"\n      class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n      [imageUrl]=\"message?.quoted_message?.user?.image\"\n      [name]=\"\n        message?.quoted_message?.user?.name || message?.quoted_message?.user?.id\n      \"\n      [size]=\"20\"\n      type=\"user\"\n      location=\"quoted-message-sender\"\n      [user]=\"message?.quoted_message?.user || undefined\"\n    ></stream-avatar-placeholder>\n    <div class=\"quoted-message-inner str-chat__quoted-message-bubble\">\n      <ng-container\n        *ngIf=\"\n          message?.quoted_message?.attachments &&\n          message?.quoted_message?.attachments?.length\n        \"\n      >\n        <ng-template\n          #defaultAttachments\n          let-messageId=\"messageId\"\n          let-attachments=\"attachments\"\n          let-parentMessageId=\"parentMessageId\"\n          let-imageModalStateChangeHandler=\"imageModalStateChangeHandler\"\n        >\n          <stream-attachment-list\n            [messageId]=\"messageId\"\n            [attachments]=\"attachments\"\n            [parentMessageId]=\"parentMessageId\"\n            (imageModalStateChange)=\"imageModalStateChangeHandler($event)\"\n          ></stream-attachment-list>\n        </ng-template>\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.attachmentListTemplate$ | async) ||\n              defaultAttachments;\n            context: getQuotedMessageAttachmentListContext()\n          \"\n        ></ng-container>\n      </ng-container>\n      <div\n        data-testid=\"quoted-message-text\"\n        [innerHTML]=\"\n          message?.quoted_message?.translation ||\n          message?.quoted_message?.html ||\n          message?.quoted_message?.text\n        \"\n      ></div>\n    </div>\n  </div>\n</ng-template>\n\n<!-- We need these markups in slightly different positions in theme-v1 and theme-v2, this soultion makes that possible without duplicating the code -->\n<ng-template #messageDateAndSender let-position=\"position\">\n  <ng-container\n    *ngIf=\"\n      (position === 'inside-message-bubble' && themeVersion === '1') ||\n      (position === 'outside-message-bubble' && themeVersion === '2')\n    \"\n  >\n    <div\n      class=\"str-chat__translation-notice\"\n      *ngIf=\"shouldDisplayTranslationNotice\"\n      data-testid=\"translation-notice\"\n    >\n      <button\n        data-testid=\"see-original\"\n        *ngIf=\"displayedMessageTextContent === 'translation'\"\n        (click)=\"displayOriginalMessage()\"\n        (keyup.enter)=\"displayOriginalMessage()\"\n        translate\n      >\n        streamChat.See original (automatically translated)\n      </button>\n      <button\n        data-testid=\"see-translation\"\n        *ngIf=\"displayedMessageTextContent === 'original'\"\n        (click)=\"displayTranslatedMessage()\"\n        (keyup.enter)=\"displayTranslatedMessage()\"\n        translate\n      >\n        streamChat.See translation\n      </button>\n    </div>\n    <ng-container\n      *ngIf=\"customTemplatesService.customMessageMetadataTemplate$ | async\"\n    >\n      <div class=\"str-chat__custom-message-metadata\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.customMessageMetadataTemplate$ | async)!;\n            context: getMessageMetadataContext()\n          \"\n        ></ng-container>\n      </div>\n    </ng-container>\n    <div\n      class=\"\n        str-chat__message-data\n        str-chat__message-simple-data\n        str-chat__message-metadata\n      \"\n    >\n      <ng-container *ngIf=\"themeVersion === '2'\">\n        <ng-container *ngTemplateOutlet=\"messageStatus\"></ng-container>\n      </ng-container>\n      <span\n        data-testid=\"sender\"\n        *ngIf=\"!isSentByCurrentUser\"\n        class=\"str-chat__message-simple-name str-chat__message-sender-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  </ng-container>\n</ng-template>\n\n<ng-template #messageStatus>\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          mode === 'main' && isMessageDeliveredAndRead && canDisplayReadStatus;\n          else deliveredStatus\n        \"\n      >\n        <ng-container *ngTemplateOutlet=\"readStatus\"></ng-container>\n      </ng-container>\n    </ng-template>\n    <ng-template #deliveredStatus>\n      <ng-container\n        *ngTemplateOutlet=\"\n          (customTemplatesService.deliveredStatusTemplate$ | async) ||\n            defaultDeliveredStatus;\n          context: getDeliveredStatusContext()\n        \"\n      ></ng-container>\n    </ng-template>\n    <ng-template #defaultDeliveredStatus>\n      <span\n        *ngIf=\"mode === 'main'\"\n        class=\"\n          str-chat__message-simple-status\n          str-chat__message-simple-status-angular\n          str-chat__message-status\n        \"\n        data-testid=\"delivered-indicator\"\n        tabindex=\"0\"\n        [popper]=\"popperContent\"\n        [popperTrigger]=\"popperTriggerHover\"\n        [popperPlacement]=\"popperPlacementAuto\"\n        [popperHideOnScroll]=\"false\"\n        [popperHideOnClickOutside]=\"false\"\n        (hover)=\"$event.stopPropagation()\"\n      >\n        <popper-content #popperContent>\n          <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n            {{ \"streamChat.Delivered\" | translate }}\n          </div>\n        </popper-content>\n        <stream-icon-placeholder\n          data-testid=\"delivered-icon\"\n          icon=\"delivered-icon\"\n        ></stream-icon-placeholder>\n      </span>\n    </ng-template>\n    <ng-template #sendingStatus>\n      <ng-container\n        *ngTemplateOutlet=\"\n          (customTemplatesService.sendingStatusTemplate$ | async) ||\n            defaultSendingStatus;\n          context: getSendingStatusContext()\n        \"\n      ></ng-container>\n    </ng-template>\n    <ng-template #defaultSendingStatus>\n      <span\n        class=\"\n          str-chat__message-simple-status\n          str-chat__message-simple-status-angular\n          str-chat__message-status\n        \"\n        data-testid=\"sending-indicator\"\n        tabindex=\"0\"\n        [popper]=\"popperContent\"\n        [popperTrigger]=\"popperTriggerHover\"\n        [popperPlacement]=\"popperPlacementAuto\"\n        [popperHideOnScroll]=\"false\"\n        [popperHideOnClickOutside]=\"false\"\n        (hover)=\"$event.stopPropagation()\"\n      >\n        <popper-content #popperContent>\n          <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n            {{ \"streamChat.Sending...\" | translate }}\n          </div>\n        </popper-content>\n        <stream-loading-indicator-placeholder\n          data-testid=\"loading-indicator\"\n        ></stream-loading-indicator-placeholder>\n      </span>\n    </ng-template>\n    <ng-template #readStatus>\n      <ng-container\n        *ngTemplateOutlet=\"\n          (customTemplatesService.readStatusTemplate$ | async) ||\n            defaultReadStatus;\n          context: getReadStatusContext()\n        \"\n      ></ng-container>\n    </ng-template>\n    <ng-template #defaultReadStatus>\n      <span\n        class=\"\n          str-chat__message-simple-status\n          str-chat__message-simple-status-angular\n          str-chat__message-status\n        \"\n        data-testid=\"read-indicator\"\n        tabindex=\"0\"\n        [popper]=\"popperContent\"\n        [popperTrigger]=\"popperTriggerHover\"\n        [popperPlacement]=\"popperPlacementAuto\"\n        [popperHideOnScroll]=\"false\"\n        [popperHideOnClickOutside]=\"false\"\n        (hover)=\"$event.stopPropagation()\"\n      >\n        <popper-content #popperContent>\n          <div\n            class=\"str-chat__tooltip str-chat__tooltip-angular\"\n            data-testid=\"read-by-tooltip\"\n          >\n            {{ readByText }}\n          </div>\n        </popper-content>\n        <stream-avatar-placeholder\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          type=\"user\"\n          location=\"message-reader\"\n          [user]=\"lastReadUser\"\n        ></stream-avatar-placeholder>\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-container>\n</ng-template>\n\n<ng-template #replyCountButton let-position=\"position\">\n  <div\n    *ngIf=\"\n      (position === 'inside-message-bubble' && themeVersion === '1') ||\n      (position === 'outside-message-bubble' && themeVersion === '2')\n    \"\n    class=\"\n      str-chat__message-simple-reply-button\n      str-chat__message-replies-count-button-wrapper\n    \"\n  >\n    <button\n      *ngIf=\"shouldDisplayThreadLink\"\n      class=\"str-chat__message-replies-count-button\"\n      data-testid=\"reply-count-button\"\n      (click)=\"setAsActiveParentMessage()\"\n    >\n      <stream-icon-placeholder\n        *ngIf=\"themeVersion === '1'\"\n        stream-icon-placeholder\n        icon=\"reply\"\n      ></stream-icon-placeholder>\n      {{message?.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}\n      replies' | translate:replyCountParam)}}\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #attachmentsTemplate>\n  <ng-template\n    #defaultAttachments\n    let-messageId=\"messageId\"\n    let-attachments=\"attachments\"\n    let-parentMessageId=\"parentMessageId\"\n    let-imageModalStateChangeHandler=\"imageModalStateChangeHandler\"\n  >\n    <stream-attachment-list\n      [messageId]=\"messageId\"\n      [attachments]=\"attachments\"\n      [parentMessageId]=\"parentMessageId\"\n      (imageModalStateChange)=\"imageModalStateChangeHandler($event)\"\n    ></stream-attachment-list>\n  </ng-template>\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.attachmentListTemplate$ | async) ||\n        defaultAttachments;\n      context: getAttachmentListContext()\n    \"\n  ></ng-container>\n</ng-template>\n", components: [{ type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { type: i9__namespace$1.NgxPopperjsContentComponent, selector: "popper-content", exportAs: ["ngxPopperjsContent"] }, { type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: ["isOpen", "isMine", "message", "enabledActions", "customActions"], outputs: ["displayedActionsCount", "isEditing"] }, { type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: MessageReactionsComponent, selector: "stream-message-reactions", inputs: ["messageId", "messageReactionCounts", "isSelectorOpen", "latestReactions", "ownReactions"], outputs: ["isSelectorOpenChange"] }, { type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "parentMessageId", "attachments"], outputs: ["imageModalStateChange"] }, { type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder", inputs: ["size", "color"] }], directives: [{ type: i9__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9__namespace$1.NgxPopperjsDirective, selector: "[popper]", inputs: ["popperTimeout", "popperTimeoutAfterShow", "popperApplyClass", "popper", "popperDisabled", "popperPlacement", "popperApplyArrowClass", "popperPreventOverflow", "popperHideOnClickOutside", "popperTrigger", "popperStyles", "popperAriaDescribeBy", "popperAriaRole", "popperBoundaries", "popperCloseOnClickOutside", "popperDisableAnimation", "popperDisableStyle", "popperHideOnMouseLeave", "popperHideOnScroll", "popperAppendTo", "popperModifiers", "popperPositionFixed", "popperDelay", "popperShowOnStart", "popperTarget"], outputs: ["popperOnHidden", "popperOnShown", "popperOnUpdate"], exportAs: ["popper"] }, { type: i9__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "async": i9__namespace.AsyncPipe, "translate": i10__namespace.TranslatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageComponent, decorators: [{
                 type: i0.Component,
                 args: [{