stream-chat-angular 4.38.1 → 4.39.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.38.1';
+    var version = '4.39.0';
 
     /**
      * The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](../components/NotificationListComponent.mdx) component displays the currently active notifications.
@@ -503,7 +503,7 @@
                                                 this.notificationService.addPermanentNotification('streamChat.Error connecting to chat, refresh the page to try again.', 'error');
                                                 throw error_1;
                                             case 4:
-                                                this.userSubject.next(this.chatClient.user);
+                                                this.userSubject.next(this.chatClient.user ? Object.assign({}, this.chatClient.user) : undefined);
                                                 sdkPrefix = 'stream-chat-angular';
                                                 if (!this.chatClient.getUserAgent().includes(sdkPrefix)) {
                                                     this.chatClient.setUserAgent(sdkPrefix + "-" + version + "-" + this.chatClient.getUserAgent());
@@ -1626,13 +1626,16 @@
             this.activeChannelSubscriptions.push(channel.on('message.read', function (e) {
                 _this.ngZone.run(function () {
                     var latestMessage;
-                    _this.activeChannelMessages$.pipe(operators.first()).subscribe(function (messages) {
+                    var messages;
+                    _this.activeChannelMessages$.pipe(operators.first()).subscribe(function (m) {
+                        messages = m;
                         latestMessage = messages[messages.length - 1];
                     });
                     if (!latestMessage || !e.user) {
                         return;
                     }
                     latestMessage.readBy = getReadBy(latestMessage, channel);
+                    messages[messages.length - 1] = Object.assign({}, latestMessage);
                     _this.activeChannelMessagesSubject.next(_this.activeChannelMessagesSubject.getValue());
                 });
             }));
@@ -1713,14 +1716,16 @@
                     : _this.activeChannelMessages$)
                     .pipe(operators.first())
                     .subscribe(function (m) { return (messages = m); });
-                var message = messages.find(function (m) { var _a; return m.id === ((_a = e === null || e === void 0 ? void 0 : e.message) === null || _a === void 0 ? void 0 : _a.id); });
-                if (!message) {
+                var messageIndex = messages.findIndex(function (m) { var _a; return m.id === ((_a = e === null || e === void 0 ? void 0 : e.message) === null || _a === void 0 ? void 0 : _a.id); });
+                if (messageIndex === -1) {
                     return;
                 }
+                var message = messages[messageIndex];
                 message.reaction_counts = Object.assign({}, (_a = e.message) === null || _a === void 0 ? void 0 : _a.reaction_counts);
                 message.reaction_scores = Object.assign({}, (_b = e.message) === null || _b === void 0 ? void 0 : _b.reaction_scores);
                 message.latest_reactions = __spreadArray([], __read((((_c = e.message) === null || _c === void 0 ? void 0 : _c.latest_reactions) || [])));
                 message.own_reactions = __spreadArray([], __read((((_d = e.message) === null || _d === void 0 ? void 0 : _d.own_reactions) || [])));
+                messages[messageIndex] = Object.assign({}, message);
                 isThreadMessage
                     ? _this.activeThreadMessagesSubject.next(__spreadArray([], __read(messages)))
                     : _this.activeChannelMessagesSubject.next(__spreadArray([], __read(messages)));
@@ -3597,18 +3602,8 @@
             this.imagesToView = [];
             this.imagesToViewCurrentIndex = 0;
             this.attachmentConfigurations = new Map();
-            this.subscriptions = [];
             this.themeVersion = themeService.themeVersion;
         }
-        AttachmentListComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.subscriptions.push(this.customTemplatesService.imageAttachmentTemplate$.subscribe(function (t) { return (_this.imageAttachmentTemplate = t); }));
-            this.subscriptions.push(this.customTemplatesService.galleryAttachmentTemplate$.subscribe(function (t) { return (_this.galleryAttachmentTemplate = t); }));
-            this.subscriptions.push(this.customTemplatesService.videoAttachmentTemplate$.subscribe(function (t) { return (_this.videoAttachmentTemplate = t); }));
-            this.subscriptions.push(this.customTemplatesService.fileAttachmentTemplate$.subscribe(function (t) { return (_this.fileAttachmentTemplate = t); }));
-            this.subscriptions.push(this.customTemplatesService.cardAttachmentTemplate$.subscribe(function (t) { return (_this.cardAttachmentTemplate = t); }));
-            this.subscriptions.push(this.customTemplatesService.attachmentActionsTemplate$.subscribe(function (t) { return (_this.attachmentActionsTemplate = t); }));
-        };
         AttachmentListComponent.prototype.ngOnChanges = function (changes) {
             var _a;
             var _this = this;
@@ -3624,9 +3619,6 @@
                 }
             }
         };
-        AttachmentListComponent.prototype.ngOnDestroy = function () {
-            this.subscriptions.forEach(function (s) { return s.unsubscribe(); });
-        };
         AttachmentListComponent.prototype.trackByUrl = function (_, attachment) {
             return (attachment.image_url ||
                 attachment.img_url ||
@@ -3768,7 +3760,7 @@
         return AttachmentListComponent;
     }());
     AttachmentListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AttachmentListComponent, deps: [{ token: CustomTemplatesService }, { token: ChannelService }, { token: AttachmentConfigurationService }, { token: ThemeService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AttachmentListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AttachmentListComponent, selector: "stream-attachment-list", inputs: { messageId: "messageId", parentMessageId: "parentMessageId", attachments: "attachments" }, outputs: { imageModalStateChange: "imageModalStateChange" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div *ngIf=\"orderedAttachments.length > 0\" class=\"str-chat__attachment-list\">\n  <ng-container\n    *ngFor=\"let attachment of orderedAttachments; trackBy: trackByUrl\"\n  >\n    <div\n      data-testclass=\"attachment-container\"\n      class=\"str-chat__message-attachment str-chat__message-attachment--{{\n        attachment.type\n      }} str-chat__message-attachment-dynamic-size\"\n      [class.str-chat__message-attachment--card]=\"isCard(attachment)\"\n      [class.str-chat-angular__message-attachment-file-single]=\"\n        isFile(attachment)\n      \"\n      [class.str-chat__message-attachment-with-actions]=\"\n        attachment.actions && attachment.actions.length > 0\n      \"\n      [class.str-chat__message-attachment--svg-image]=\"isSvg(attachment)\"\n    >\n      <ng-container *ngIf=\"isImage(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            imageAttachmentTemplate || defaultImage;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultImage let-attachmentContext=\"attachment\">\n          <img\n            #imgElement\n            class=\"str-chat__message-attachment--img\"\n            data-testclass=\"image\"\n            [src]=\"\n              getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).url\n            \"\n            [alt]=\"attachmentContext?.fallback\"\n            (click)=\"openImageModal([attachmentContext])\"\n            (keyup.enter)=\"openImageModal([attachmentContext])\"\n            [style.--original-height]=\"\n              getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).originalHeight\n            \"\n            [style.--original-width]=\"\n              getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).originalWidth\n            \"\n            [ngStyle]=\"{\n              height: getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).height,\n              width: getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).width\n            }\"\n          />\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isGallery(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            galleryAttachmentTemplate || defaultGallery;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultGallery let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__gallery\"\n            data-testid=\"image-gallery\"\n            [class.str-chat__gallery--square]=\"\n              (attachmentContext?.images)!.length > 3\n            \"\n            [class.str-chat__gallery-two-rows]=\"\n              (attachmentContext?.images)!.length > 2\n            \"\n          >\n            <ng-container\n              *ngFor=\"\n                let galleryImage of attachmentContext.images;\n                let index = index;\n                let isLast = last;\n                trackBy: trackByImageUrl\n              \"\n            >\n              <button\n                *ngIf=\"index < 3 || (index === 3 && isLast)\"\n                class=\"str-chat__gallery-image\"\n                data-testclass=\"gallery-image\"\n                (click)=\"openImageModal(attachmentContext.images!, index)\"\n                (keyup.enter)=\"openImageModal(attachmentContext.images!, index)\"\n                [class.str-chat__message-attachment--svg-image]=\"\n                  isSvg(galleryImage)\n                \"\n              >\n                <img\n                  #imgElement\n                  [src]=\"\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).url\n                  \"\n                  [alt]=\"galleryImage.fallback\"\n                  [style.--original-height]=\"\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).originalHeight\n                  \"\n                  [style.--original-width]=\"\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).originalWidth\n                  \"\n                  [ngStyle]=\"{\n                    height: getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).height,\n                    width: getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).width\n                  }\"\n                />\n              </button>\n              <button\n                #element\n                *ngIf=\"index === 3 && !isLast\"\n                class=\"str-chat__gallery-placeholder\"\n                data-testclass=\"gallery-image\"\n                data-testid=\"more-image-button\"\n                (click)=\"openImageModal(attachmentContext.images!, index)\"\n                (keyup.enter)=\"openImageModal(attachmentContext.images!, index)\"\n                [class.str-chat__message-attachment--svg-image]=\"\n                  isSvg(galleryImage)\n                \"\n                [style.--original-height]=\"\n                  getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).originalHeight\n                \"\n                [style.--original-width]=\"\n                  getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).originalWidth\n                \"\n                [ngStyle]=\"{\n                  'background-image':\n                    'url(' +\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      element\n                    ).url +\n                    ')',\n                  height: getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).height,\n                  width: getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).width\n                }\"\n              >\n                <p\n                  [innerHTML]=\"\n                    'streamChat.{{ imageCount }} more'\n                      | translate\n                        : { imageCount: attachmentContext!.images!.length - 4 }\n                  \"\n                ></p>\n              </button>\n            </ng-container>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isVideo(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            videoAttachmentTemplate || defaultVideo;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultVideo let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__player-wrapper\"\n            data-testclass=\"video-attachment-parent\"\n            [style.--original-height]=\"\n              getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                .originalHeight\n            \"\n            [style.--original-width]=\"\n              getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                .originalWidth\n            \"\n            [ngStyle]=\"{\n              height: getVideoAttachmentConfiguration(\n                attachmentContext,\n                videoElement\n              ).height,\n              width: getVideoAttachmentConfiguration(\n                attachmentContext,\n                videoElement\n              ).width\n            }\"\n          >\n            <video\n              #videoElement\n              class=\"str-chat__video-angular\"\n              controls\n              data-testclass=\"video-attachment\"\n              [src]=\"\n                getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                  .url\n              \"\n              [poster]=\"\n                getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                  .thumbUrl\n              \"\n            ></video>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isFile(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            fileAttachmentTemplate || defaultFile;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultFile let-attachmentContext=\"attachment\">\n          <a\n            class=\"\n              str-chat__message-attachment-file--item\n              str-chat-angular__message-attachment-file-single\n            \"\n            style=\"cursor: pointer; text-decoration: none\"\n            data-testclass=\"file-link\"\n            href=\"{{ attachmentContext.asset_url }}\"\n            target=\"_blank\"\n          >\n            <stream-icon-placeholder\n              *ngIf=\"themeVersion === '1'\"\n              icon=\"file\"\n              [size]=\"30\"\n            ></stream-icon-placeholder>\n            <stream-icon-placeholder\n              *ngIf=\"themeVersion === '2'\"\n              icon=\"unspecified-filetype\"\n              [size]=\"30\"\n            ></stream-icon-placeholder>\n            <div class=\"str-chat__message-attachment-file--item-text\">\n              <div class=\"str-chat__message-attachment-file--item-first-row\">\n                <div\n                  data-testclass=\"file-title\"\n                  class=\"str-chat__message-attachment-file--item-name\"\n                >\n                  {{ attachmentContext.title }}\n                </div>\n                <!-- Temporary disabled, will be fixed with this: https://github.com/GetStream/stream-chat-angular/issues/393  -->\n                <!-- <a\n              class=\"str-chat__message-attachment-file--item-download\"\n              data-testclass=\"file-link\"\n              download\n              href=\"{{ attachment.asset_url }}\"\n              target=\"_blank\"\n            >\n              <stream-icon-placeholder\n                class=\"str-chat__message-attachment-download-icon\"\n                icon=\"download\"\n              ></stream-icon-placeholder>\n            </a> -->\n              </div>\n              <span\n                class=\"str-chat__message-attachment-file--item-size\"\n                data-testclass=\"size\"\n                *ngIf=\"hasFileSize(attachmentContext)\"\n                >{{ getFileSize(attachmentContext) }}</span\n              >\n            </div>\n          </a>\n        </ng-template>\n      </ng-container>\n      <ng-container\n        *ngIf=\"\n          isCard(attachment) &&\n          getCardAttachmentConfiguration(attachment) as attachmentConfiguration\n        \"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            cardAttachmentTemplate || defaultCard;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultCard let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__message-attachment-card str-chat__message-attachment-card--{{\n              attachmentContext.type\n            }}\"\n          >\n            <div\n              *ngIf=\"attachmentConfiguration.url\"\n              class=\"str-chat__message-attachment-card--header\"\n            >\n              <img\n                data-testclass=\"card-img\"\n                alt=\"{{ attachmentConfiguration.url }}\"\n                src=\"{{ attachmentConfiguration.url }}\"\n                [ngStyle]=\"{\n                  height: attachmentConfiguration.height,\n                  width: attachmentConfiguration.width\n                }\"\n              />\n            </div>\n            <div class=\"str-chat__message-attachment-card--content\">\n              <div class=\"str-chat__message-attachment-card--flex\">\n                <div\n                  *ngIf=\"attachmentContext.title\"\n                  data-testclass=\"card-title\"\n                  class=\"str-chat__message-attachment-card--title\"\n                >\n                  {{ attachmentContext.title }}\n                </div>\n                <div\n                  *ngIf=\"attachmentContext.text\"\n                  class=\"str-chat__message-attachment-card--text\"\n                  data-testclass=\"card-text\"\n                >\n                  {{ attachmentContext.text }}\n                </div>\n                <a\n                  class=\"str-chat__message-attachment-card--url\"\n                  *ngIf=\"\n                    attachmentContext.title_link ||\n                    attachmentContext.og_scrape_url\n                  \"\n                  data-testclass=\"url-link\"\n                  noopener\n                  noreferrer\n                  href=\"{{\n                    attachmentContext.title_link ||\n                      attachmentContext.og_scrape_url\n                  }}\"\n                  target=\"_blank\"\n                >\n                  {{\n                    trimUrl(\n                      attachmentContext.title_link ||\n                        attachmentContext.og_scrape_url\n                    )\n                  }}\n                </a>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"attachment.actions && attachment.actions.length > 0\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            attachmentActionsTemplate || defaultActions;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultActions let-attachmentContext=\"attachment\">\n          <div class=\"str-chat__message-attachment-actions\">\n            <div class=\"str-chat__message-attachment-actions-form\">\n              <button\n                *ngFor=\"\n                  let action of attachmentContext.actions;\n                  trackBy: trackByActionValue\n                \"\n                class=\"str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--{{\n                  action.style\n                }}\"\n                data-testclass=\"attachment-action\"\n                (click)=\"sendAction(action)\"\n                (keyup.enter)=\"sendAction(action)\"\n              >\n                {{ action.text }}\n              </button>\n            </div>\n          </div>\n        </ng-template>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"imagesToView && imagesToView.length > 0\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.modalTemplate$ | async) || defaultModal;\n        context: getModalContext()\n      \"\n    ></ng-container>\n  </ng-container>\n</div>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    class=\"stream-chat-angular__image-modal-host\"\n    [isOpen]=\"isOpen\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n    [content]=\"content\"\n  >\n  </stream-modal>\n</ng-template>\n\n<ng-template #modalContent>\n  <div class=\"stream-chat-angular__image-modal str-chat__image-carousel\">\n    <button\n      class=\"\n        stream-chat-angular__image-modal-stepper\n        str-chat__image-carousel-stepper\n      \"\n      [ngStyle]=\"{\n        visibility: isImageModalPrevButtonVisible ? 'visible' : 'hidden'\n      }\"\n      data-testid=\"image-modal-prev\"\n      type=\"button\"\n      (click)=\"stepImages(-1)\"\n      (keyup.enter)=\"stepImages(-1)\"\n    >\n      <stream-icon-placeholder icon=\"arrow-left\"></stream-icon-placeholder>\n    </button>\n    <img\n      #imgElement\n      class=\"\n        stream-chat-angular__image-modal-image\n        str-chat__image-carousel-image\n      \"\n      data-testid=\"modal-image\"\n      [src]=\"\n        getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).url\n      \"\n      [style.--original-height]=\"\n        getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).originalHeight\n      \"\n      [style.--original-width]=\"\n        getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).originalWidth\n      \"\n      [alt]=\"imagesToView[imagesToViewCurrentIndex].fallback\"\n      [ngStyle]=\"{\n        width: getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).width,\n        height: getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).height\n      }\"\n    />\n    <button\n      class=\"\n        stream-chat-angular__image-modal-stepper\n        str-chat__image-carousel-stepper\n      \"\n      type=\"button\"\n      [ngStyle]=\"{\n        visibility: isImageModalNextButtonVisible ? 'visible' : 'hidden'\n      }\"\n      data-testid=\"image-modal-next\"\n      (click)=\"stepImages(1)\"\n      (keyup.enter)=\"stepImages(1)\"\n    >\n      <stream-icon-placeholder icon=\"arrow-right\"></stream-icon-placeholder>\n    </button>\n  </div>\n</ng-template>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "translate": i9__namespace.TranslatePipe, "async": i5__namespace.AsyncPipe } });
+    AttachmentListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AttachmentListComponent, selector: "stream-attachment-list", inputs: { messageId: "messageId", parentMessageId: "parentMessageId", attachments: "attachments" }, outputs: { imageModalStateChange: "imageModalStateChange" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div *ngIf=\"orderedAttachments.length > 0\" class=\"str-chat__attachment-list\">\n  <ng-container\n    *ngFor=\"let attachment of orderedAttachments; trackBy: trackByUrl\"\n  >\n    <div\n      data-testclass=\"attachment-container\"\n      class=\"str-chat__message-attachment str-chat__message-attachment--{{\n        attachment.type\n      }} str-chat__message-attachment-dynamic-size\"\n      [class.str-chat__message-attachment--card]=\"isCard(attachment)\"\n      [class.str-chat-angular__message-attachment-file-single]=\"\n        isFile(attachment)\n      \"\n      [class.str-chat__message-attachment-with-actions]=\"\n        attachment.actions && attachment.actions.length > 0\n      \"\n      [class.str-chat__message-attachment--svg-image]=\"isSvg(attachment)\"\n    >\n      <ng-container *ngIf=\"isImage(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.imageAttachmentTemplate$ | async) ||\n              defaultImage;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultImage let-attachmentContext=\"attachment\">\n          <img\n            #imgElement\n            class=\"str-chat__message-attachment--img\"\n            data-testclass=\"image\"\n            [src]=\"\n              getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).url\n            \"\n            [alt]=\"attachmentContext?.fallback\"\n            (click)=\"openImageModal([attachmentContext])\"\n            (keyup.enter)=\"openImageModal([attachmentContext])\"\n            [style.--original-height]=\"\n              getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).originalHeight\n            \"\n            [style.--original-width]=\"\n              getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).originalWidth\n            \"\n            [ngStyle]=\"{\n              height: getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).height,\n              width: getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).width\n            }\"\n          />\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isGallery(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.galleryAttachmentTemplate$ | async) ||\n              defaultGallery;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultGallery let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__gallery\"\n            data-testid=\"image-gallery\"\n            [class.str-chat__gallery--square]=\"\n              (attachmentContext?.images)!.length > 3\n            \"\n            [class.str-chat__gallery-two-rows]=\"\n              (attachmentContext?.images)!.length > 2\n            \"\n          >\n            <ng-container\n              *ngFor=\"\n                let galleryImage of attachmentContext.images;\n                let index = index;\n                let isLast = last;\n                trackBy: trackByImageUrl\n              \"\n            >\n              <button\n                *ngIf=\"index < 3 || (index === 3 && isLast)\"\n                class=\"str-chat__gallery-image\"\n                data-testclass=\"gallery-image\"\n                (click)=\"openImageModal(attachmentContext.images!, index)\"\n                (keyup.enter)=\"openImageModal(attachmentContext.images!, index)\"\n                [class.str-chat__message-attachment--svg-image]=\"\n                  isSvg(galleryImage)\n                \"\n              >\n                <img\n                  #imgElement\n                  [src]=\"\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).url\n                  \"\n                  [alt]=\"galleryImage.fallback\"\n                  [style.--original-height]=\"\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).originalHeight\n                  \"\n                  [style.--original-width]=\"\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).originalWidth\n                  \"\n                  [ngStyle]=\"{\n                    height: getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).height,\n                    width: getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).width\n                  }\"\n                />\n              </button>\n              <button\n                #element\n                *ngIf=\"index === 3 && !isLast\"\n                class=\"str-chat__gallery-placeholder\"\n                data-testclass=\"gallery-image\"\n                data-testid=\"more-image-button\"\n                (click)=\"openImageModal(attachmentContext.images!, index)\"\n                (keyup.enter)=\"openImageModal(attachmentContext.images!, index)\"\n                [class.str-chat__message-attachment--svg-image]=\"\n                  isSvg(galleryImage)\n                \"\n                [style.--original-height]=\"\n                  getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).originalHeight\n                \"\n                [style.--original-width]=\"\n                  getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).originalWidth\n                \"\n                [ngStyle]=\"{\n                  'background-image':\n                    'url(' +\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      element\n                    ).url +\n                    ')',\n                  height: getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).height,\n                  width: getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).width\n                }\"\n              >\n                <p\n                  [innerHTML]=\"\n                    'streamChat.{{ imageCount }} more'\n                      | translate\n                        : { imageCount: attachmentContext!.images!.length - 4 }\n                  \"\n                ></p>\n              </button>\n            </ng-container>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isVideo(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.videoAttachmentTemplate$ | async) ||\n              defaultVideo;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultVideo let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__player-wrapper\"\n            data-testclass=\"video-attachment-parent\"\n            [style.--original-height]=\"\n              getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                .originalHeight\n            \"\n            [style.--original-width]=\"\n              getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                .originalWidth\n            \"\n            [ngStyle]=\"{\n              height: getVideoAttachmentConfiguration(\n                attachmentContext,\n                videoElement\n              ).height,\n              width: getVideoAttachmentConfiguration(\n                attachmentContext,\n                videoElement\n              ).width\n            }\"\n          >\n            <video\n              #videoElement\n              class=\"str-chat__video-angular\"\n              controls\n              data-testclass=\"video-attachment\"\n              [src]=\"\n                getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                  .url\n              \"\n              [poster]=\"\n                getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                  .thumbUrl\n              \"\n            ></video>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isFile(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.fileAttachmentTemplate$ | async) ||\n              defaultFile;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultFile let-attachmentContext=\"attachment\">\n          <a\n            class=\"\n              str-chat__message-attachment-file--item\n              str-chat-angular__message-attachment-file-single\n            \"\n            style=\"cursor: pointer; text-decoration: none\"\n            data-testclass=\"file-link\"\n            href=\"{{ attachmentContext.asset_url }}\"\n            target=\"_blank\"\n          >\n            <stream-icon-placeholder\n              *ngIf=\"themeVersion === '1'\"\n              icon=\"file\"\n              [size]=\"30\"\n            ></stream-icon-placeholder>\n            <stream-icon-placeholder\n              *ngIf=\"themeVersion === '2'\"\n              icon=\"unspecified-filetype\"\n              [size]=\"30\"\n            ></stream-icon-placeholder>\n            <div class=\"str-chat__message-attachment-file--item-text\">\n              <div class=\"str-chat__message-attachment-file--item-first-row\">\n                <div\n                  data-testclass=\"file-title\"\n                  class=\"str-chat__message-attachment-file--item-name\"\n                >\n                  {{ attachmentContext.title }}\n                </div>\n                <!-- Temporary disabled, will be fixed with this: https://github.com/GetStream/stream-chat-angular/issues/393  -->\n                <!-- <a\n              class=\"str-chat__message-attachment-file--item-download\"\n              data-testclass=\"file-link\"\n              download\n              href=\"{{ attachment.asset_url }}\"\n              target=\"_blank\"\n            >\n              <stream-icon-placeholder\n                class=\"str-chat__message-attachment-download-icon\"\n                icon=\"download\"\n              ></stream-icon-placeholder>\n            </a> -->\n              </div>\n              <span\n                class=\"str-chat__message-attachment-file--item-size\"\n                data-testclass=\"size\"\n                *ngIf=\"hasFileSize(attachmentContext)\"\n                >{{ getFileSize(attachmentContext) }}</span\n              >\n            </div>\n          </a>\n        </ng-template>\n      </ng-container>\n      <ng-container\n        *ngIf=\"\n          isCard(attachment) &&\n          getCardAttachmentConfiguration(attachment) as attachmentConfiguration\n        \"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.cardAttachmentTemplate$ | async) ||\n              defaultCard;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultCard let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__message-attachment-card str-chat__message-attachment-card--{{\n              attachmentContext.type\n            }}\"\n          >\n            <div\n              *ngIf=\"attachmentConfiguration.url\"\n              class=\"str-chat__message-attachment-card--header\"\n            >\n              <img\n                data-testclass=\"card-img\"\n                alt=\"{{ attachmentConfiguration.url }}\"\n                src=\"{{ attachmentConfiguration.url }}\"\n                [ngStyle]=\"{\n                  height: attachmentConfiguration.height,\n                  width: attachmentConfiguration.width\n                }\"\n              />\n            </div>\n            <div class=\"str-chat__message-attachment-card--content\">\n              <div class=\"str-chat__message-attachment-card--flex\">\n                <div\n                  *ngIf=\"attachmentContext.title\"\n                  data-testclass=\"card-title\"\n                  class=\"str-chat__message-attachment-card--title\"\n                >\n                  {{ attachmentContext.title }}\n                </div>\n                <div\n                  *ngIf=\"attachmentContext.text\"\n                  class=\"str-chat__message-attachment-card--text\"\n                  data-testclass=\"card-text\"\n                >\n                  {{ attachmentContext.text }}\n                </div>\n                <a\n                  class=\"str-chat__message-attachment-card--url\"\n                  *ngIf=\"\n                    attachmentContext.title_link ||\n                    attachmentContext.og_scrape_url\n                  \"\n                  data-testclass=\"url-link\"\n                  noopener\n                  noreferrer\n                  href=\"{{\n                    attachmentContext.title_link ||\n                      attachmentContext.og_scrape_url\n                  }}\"\n                  target=\"_blank\"\n                >\n                  {{\n                    trimUrl(\n                      attachmentContext.title_link ||\n                        attachmentContext.og_scrape_url\n                    )\n                  }}\n                </a>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"attachment.actions && attachment.actions.length > 0\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.attachmentActionsTemplate$ | async) ||\n              defaultActions;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultActions let-attachmentContext=\"attachment\">\n          <div class=\"str-chat__message-attachment-actions\">\n            <div class=\"str-chat__message-attachment-actions-form\">\n              <button\n                *ngFor=\"\n                  let action of attachmentContext.actions;\n                  trackBy: trackByActionValue\n                \"\n                class=\"str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--{{\n                  action.style\n                }}\"\n                data-testclass=\"attachment-action\"\n                (click)=\"sendAction(action)\"\n                (keyup.enter)=\"sendAction(action)\"\n              >\n                {{ action.text }}\n              </button>\n            </div>\n          </div>\n        </ng-template>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"imagesToView && imagesToView.length > 0\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.modalTemplate$ | async) || defaultModal;\n        context: getModalContext()\n      \"\n    ></ng-container>\n  </ng-container>\n</div>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    class=\"stream-chat-angular__image-modal-host\"\n    [isOpen]=\"isOpen\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n    [content]=\"content\"\n  >\n  </stream-modal>\n</ng-template>\n\n<ng-template #modalContent>\n  <div class=\"stream-chat-angular__image-modal str-chat__image-carousel\">\n    <button\n      class=\"\n        stream-chat-angular__image-modal-stepper\n        str-chat__image-carousel-stepper\n      \"\n      [ngStyle]=\"{\n        visibility: isImageModalPrevButtonVisible ? 'visible' : 'hidden'\n      }\"\n      data-testid=\"image-modal-prev\"\n      type=\"button\"\n      (click)=\"stepImages(-1)\"\n      (keyup.enter)=\"stepImages(-1)\"\n    >\n      <stream-icon-placeholder icon=\"arrow-left\"></stream-icon-placeholder>\n    </button>\n    <img\n      #imgElement\n      class=\"\n        stream-chat-angular__image-modal-image\n        str-chat__image-carousel-image\n      \"\n      data-testid=\"modal-image\"\n      [src]=\"\n        getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).url\n      \"\n      [style.--original-height]=\"\n        getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).originalHeight\n      \"\n      [style.--original-width]=\"\n        getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).originalWidth\n      \"\n      [alt]=\"imagesToView[imagesToViewCurrentIndex].fallback\"\n      [ngStyle]=\"{\n        width: getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).width,\n        height: getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).height\n      }\"\n    />\n    <button\n      class=\"\n        stream-chat-angular__image-modal-stepper\n        str-chat__image-carousel-stepper\n      \"\n      type=\"button\"\n      [ngStyle]=\"{\n        visibility: isImageModalNextButtonVisible ? 'visible' : 'hidden'\n      }\"\n      data-testid=\"image-modal-next\"\n      (click)=\"stepImages(1)\"\n      (keyup.enter)=\"stepImages(1)\"\n    >\n      <stream-icon-placeholder icon=\"arrow-right\"></stream-icon-placeholder>\n    </button>\n  </div>\n</ng-template>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "async": i5__namespace.AsyncPipe, "translate": i9__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AttachmentListComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -4410,16 +4402,12 @@
              */
             this.isEditing = new i0.EventEmitter();
             this.isEditModalOpen = false;
-            this.subscriptions = [];
             this.visibleMessageActionItems = [];
             this.sendMessageSubject = new rxjs.Subject();
             this.modalClosed = function () {
                 _this.isEditModalOpen = false;
                 _this.isEditing.emit(false);
             };
-            this.subscriptions.push(this.customTemplatesService.messageInputTemplate$.subscribe(function (template) { return (_this.messageInputTemplate = template); }));
-            this.subscriptions.push(this.customTemplatesService.messageActionsBoxItemTemplate$.subscribe(function (template) { return (_this.messageActionItemTemplate = template); }));
-            this.subscriptions.push(this.customTemplatesService.modalTemplate$.subscribe(function (template) { return (_this.modalTemplate = template); }));
             this.messageActionItems = [
                 {
                     actionName: 'quote',
@@ -4509,9 +4497,6 @@
                 this.displayedActionsCount.emit(this.visibleMessageActionItems.length);
             }
         };
-        MessageActionsBoxComponent.prototype.ngOnDestroy = function () {
-            this.subscriptions.forEach(function (s) { return s.unsubscribe(); });
-        };
         MessageActionsBoxComponent.prototype.getActionLabel = function (actionLabelOrTranslationKey) {
             return typeof actionLabelOrTranslationKey === 'string'
                 ? actionLabelOrTranslationKey
@@ -4560,7 +4545,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 }, { token: CustomTemplatesService }], 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", customActions: "customActions" }, outputs: { displayedActionsCount: "displayedActionsCount", isEditing: "isEditing" }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  #actionBox\n  data-testid=\"action-box\"\n  class=\"str-chat__message-actions-box str-chat__message-actions-box-angular\"\n  [class.str-chat__message-actions-box--open]=\"true\"\n>\n  <ul class=\"str-chat__message-actions-list\">\n    <ng-container\n      *ngFor=\"let item of visibleMessageActionItems; trackBy: trackByActionName\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          messageActionItemTemplate || defaultMessageActionItem;\n          context: getMessageActionTemplateContext(item)\n        \"\n      ></ng-container>\n    </ng-container>\n  </ul>\n</div>\n\n<ng-template\n  #defaultMessageActionItem\n  let-actionName=\"actionName\"\n  let-actionHandler=\"actionHandler\"\n  let-actionLabelOrTranslationKey=\"actionLabelOrTranslationKey\"\n>\n  <button\n    class=\"str-chat__message-actions-list-item-button\"\n    [attr.data-testid]=\"actionName + '-action'\"\n    (click)=\"actionHandler(message, isMine)\"\n  >\n    <li class=\"str-chat__message-actions-list-item\">\n      {{ getActionLabel(actionLabelOrTranslationKey) | translate }}\n    </li>\n  </button>\n</ng-template>\n\n<ng-container\n  *ngTemplateOutlet=\"\n    modalTemplate || defaultModal;\n    context: getEditModalContext()\n  \"\n></ng-container>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    [isOpen]=\"isOpen\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n    [content]=\"content\"\n  >\n  </stream-modal>\n</ng-template>\n\n<ng-template #modalContent>\n  <div class=\"str-chat__edit-message-form\" *ngIf=\"isEditModalOpen\">\n    <ng-template\n      #defaultInput\n      let-messageInput=\"message\"\n      let-messageUpdateHandler=\"messageUpdateHandler\"\n      let-sendMessage$Input=\"sendMessage$\"\n    >\n      <stream-message-input\n        [message]=\"messageInput\"\n        (messageUpdate)=\"messageUpdateHandler()\"\n        [sendMessage$]=\"sendMessage$Input\"\n      ></stream-message-input>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        messageInputTemplate || defaultInput;\n        context: getMessageInputContext()\n      \"\n    >\n    </ng-container>\n\n    <stream-notification-list></stream-notification-list>\n    <div\n      class=\"\n        str-chat__message-team-form-footer\n        str-chat__message-team-form-footer-angular\n      \"\n    >\n      <div class=\"str-chat__edit-message-form-options\">\n        <button\n          class=\"str-chat__edit-message-cancel\"\n          translate\n          data-testid=\"cancel-button\"\n          (click)=\"modalClosed()\"\n        >\n          streamChat.Cancel\n        </button>\n        <button\n          type=\"submit\"\n          translate\n          class=\"str-chat__edit-message-send\"\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</ng-template>\n", components: [{ type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }, { type: MessageInputComponent, selector: "stream-message-input", inputs: ["isFileUploadEnabled", "areMentionsEnabled", "mentionScope", "mode", "isMultipleFileUploadEnabled", "message", "sendMessage$", "inputMode"], outputs: ["messageUpdate"] }, { type: NotificationListComponent, selector: "stream-notification-list" }], directives: [{ type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i9__namespace.TranslatePipe } });
+    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", customActions: "customActions" }, outputs: { displayedActionsCount: "displayedActionsCount", isEditing: "isEditing" }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  #actionBox\n  data-testid=\"action-box\"\n  class=\"str-chat__message-actions-box str-chat__message-actions-box-angular\"\n  [class.str-chat__message-actions-box--open]=\"true\"\n>\n  <ul class=\"str-chat__message-actions-list\">\n    <ng-container\n      *ngFor=\"let item of visibleMessageActionItems; trackBy: trackByActionName\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          (customTemplatesService.messageActionsBoxItemTemplate$ | async) ||\n            defaultMessageActionItem;\n          context: getMessageActionTemplateContext(item)\n        \"\n      ></ng-container>\n    </ng-container>\n  </ul>\n</div>\n\n<ng-template\n  #defaultMessageActionItem\n  let-actionName=\"actionName\"\n  let-actionHandler=\"actionHandler\"\n  let-actionLabelOrTranslationKey=\"actionLabelOrTranslationKey\"\n>\n  <button\n    class=\"str-chat__message-actions-list-item-button\"\n    [attr.data-testid]=\"actionName + '-action'\"\n    (click)=\"actionHandler(message, isMine)\"\n  >\n    <li class=\"str-chat__message-actions-list-item\">\n      {{ getActionLabel(actionLabelOrTranslationKey) | translate }}\n    </li>\n  </button>\n</ng-template>\n\n<ng-container\n  *ngTemplateOutlet=\"\n    (customTemplatesService.modalTemplate$ | async) || defaultModal;\n    context: getEditModalContext()\n  \"\n></ng-container>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    [isOpen]=\"isOpen\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n    [content]=\"content\"\n  >\n  </stream-modal>\n</ng-template>\n\n<ng-template #modalContent>\n  <div class=\"str-chat__edit-message-form\" *ngIf=\"isEditModalOpen\">\n    <ng-template\n      #defaultInput\n      let-messageInput=\"message\"\n      let-messageUpdateHandler=\"messageUpdateHandler\"\n      let-sendMessage$Input=\"sendMessage$\"\n    >\n      <stream-message-input\n        [message]=\"messageInput\"\n        (messageUpdate)=\"messageUpdateHandler()\"\n        [sendMessage$]=\"sendMessage$Input\"\n      ></stream-message-input>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.messageInputTemplate$ | async) || defaultInput;\n        context: getMessageInputContext()\n      \"\n    >\n    </ng-container>\n\n    <stream-notification-list></stream-notification-list>\n    <div\n      class=\"\n        str-chat__message-team-form-footer\n        str-chat__message-team-form-footer-angular\n      \"\n    >\n      <div class=\"str-chat__edit-message-form-options\">\n        <button\n          class=\"str-chat__edit-message-cancel\"\n          translate\n          data-testid=\"cancel-button\"\n          (click)=\"modalClosed()\"\n        >\n          streamChat.Cancel\n        </button>\n        <button\n          type=\"submit\"\n          translate\n          class=\"str-chat__edit-message-send\"\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</ng-template>\n", components: [{ type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }, { type: MessageInputComponent, selector: "stream-message-input", inputs: ["isFileUploadEnabled", "areMentionsEnabled", "mentionScope", "mode", "isMultipleFileUploadEnabled", "message", "sendMessage$", "inputMode"], outputs: ["messageUpdate"] }, { type: NotificationListComponent, selector: "stream-notification-list" }], directives: [{ type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "async": i5__namespace.AsyncPipe, "translate": i9__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageActionsBoxComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -5301,25 +5286,51 @@
             this.shouldDisplayTranslationNotice = false;
             this.displayedMessageTextContent = 'original';
             this.imageAttachmentModalState = 'closed';
+            this.shouldDisplayThreadLink = false;
+            this.isSentByCurrentUser = false;
+            this.readByText = '';
+            this.lastReadUser = undefined;
+            this.isOnlyReadByMe = false;
+            this.isReadByMultipleUsers = false;
+            this.isMessageDeliveredAndRead = false;
+            this.parsedDate = '';
+            this.areOptionsVisible = false;
+            this.hasAttachment = false;
+            this.hasReactions = false;
+            this.replyCountParam = {
+                replyCount: undefined,
+            };
+            this.canDisplayReadStatus = false;
             this.subscriptions = [];
             this.themeVersion = themeService.themeVersion;
         }
         MessageComponent.prototype.ngOnInit = function () {
             var _this = this;
             this.subscriptions.push(this.chatClientService.user$.subscribe(function (u) {
-                _this.user = u;
+                if (u !== _this.user) {
+                    _this.user = u;
+                    _this.setIsSentByCurrentUser();
+                    _this.setLastReadUser();
+                    _this.cdRef.detectChanges();
+                }
             }));
-            this.subscriptions.push(this.customTemplatesService.mentionTemplate$.subscribe(function (template) { return (_this.mentionTemplate = template); }));
-            this.subscriptions.push(this.customTemplatesService.attachmentListTemplate$.subscribe(function (template) { return (_this.attachmentListTemplate = template); }));
-            this.subscriptions.push(this.customTemplatesService.messageActionsBoxTemplate$.subscribe(function (template) { return (_this.messageActionsBoxTemplate = template); }));
-            this.subscriptions.push(this.customTemplatesService.messageReactionsTemplate$.subscribe(function (template) { return (_this.messageReactionsTemplate = template); }));
-            this.subscriptions.push(this.customTemplatesService.deliveredStatusTemplate$.subscribe(function (template) { return (_this.customDeliveredStatusTemplate = template); }));
-            this.subscriptions.push(this.customTemplatesService.sendingStatusTemplate$.subscribe(function (template) { return (_this.customSendingStatusTemplate = template); }));
-            this.subscriptions.push(this.customTemplatesService.readStatusTemplate$.subscribe(function (template) { return (_this.customReadStatusTemplate = template); }));
-            this.subscriptions.push(this.customTemplatesService.systemMessageTemplate$.subscribe(function (template) { return (_this.systemMessageTemplate = template); }));
+            this.mentionTemplate$ = this.customTemplatesService.mentionTemplate$;
+            this.attachmentListTemplate$ =
+                this.customTemplatesService.attachmentListTemplate$;
+            this.messageActionsBoxTemplate$ =
+                this.customTemplatesService.messageActionsBoxTemplate$;
+            this.messageReactionsTemplate$ =
+                this.customTemplatesService.messageReactionsTemplate$;
+            this.deliveredStatusTemplate$ =
+                this.customTemplatesService.deliveredStatusTemplate$;
+            this.sendingStatusTemplate$ =
+                this.customTemplatesService.sendingStatusTemplate$;
+            this.readStatusTemplate$ = this.customTemplatesService.readStatusTemplate$;
+            this.systemMessageTemplate$ =
+                this.customTemplatesService.systemMessageTemplate$;
         };
         MessageComponent.prototype.ngOnChanges = function (changes) {
-            var _a, _b;
+            var _a, _b, _c, _d, _e, _f, _g;
             if (changes.message) {
                 this.shouldDisplayTranslationNotice = false;
                 this.displayedMessageTextContent = 'original';
@@ -5329,135 +5340,63 @@
                     originalAttachments && originalAttachments.length
                         ? [originalAttachments[0]]
                         : [];
+                this.setIsSentByCurrentUser();
+                this.setLastReadUser();
+                this.readByText = ((_c = this.message) === null || _c === void 0 ? void 0 : _c.readBy)
+                    ? listUsers(this.message.readBy)
+                    : '';
+                this.isOnlyReadByMe = !!(this.message &&
+                    this.message.readBy &&
+                    this.message.readBy.length === 0);
+                this.isReadByMultipleUsers = !!(this.message &&
+                    this.message.readBy &&
+                    this.message.readBy.length > 1);
+                this.isMessageDeliveredAndRead = !!(this.message &&
+                    this.message.readBy &&
+                    this.message.status === 'received' &&
+                    this.message.readBy.length > 0);
+                this.parsedDate =
+                    (this.message &&
+                        this.message.created_at &&
+                        this.dateParser.parseDateTime(this.message.created_at)) ||
+                        '';
+                this.hasAttachment =
+                    !!((_d = this.message) === null || _d === void 0 ? void 0 : _d.attachments) && !!this.message.attachments.length;
+                this.hasReactions =
+                    !!((_e = this.message) === null || _e === void 0 ? void 0 : _e.reaction_counts) &&
+                        Object.keys(this.message.reaction_counts).length > 0;
+                this.replyCountParam = { replyCount: (_f = this.message) === null || _f === void 0 ? void 0 : _f.reply_count };
             }
             if (changes.enabledMessageActions) {
                 this.canReactToMessage =
                     this.enabledMessageActions.indexOf('send-reaction') !== -1;
                 this.canReceiveReadEvents =
                     this.enabledMessageActions.indexOf('read-events') !== -1;
+                this.canDisplayReadStatus =
+                    this.canReceiveReadEvents !== false &&
+                        this.enabledMessageActions.indexOf('read-events') !== -1;
+            }
+            if (changes.message || changes.enabledMessageActions || changes.mode) {
+                this.shouldDisplayThreadLink =
+                    !!((_g = this.message) === null || _g === void 0 ? void 0 : _g.reply_count) &&
+                        this.mode !== 'thread' &&
+                        this.enabledMessageActions.indexOf('send-reply') !== -1;
+            }
+            if (changes.message || changes.mode) {
+                this.areOptionsVisible = this.message
+                    ? !(!this.message.type ||
+                        this.message.type === 'error' ||
+                        this.message.type === 'system' ||
+                        this.message.type === 'ephemeral' ||
+                        this.message.status === 'failed' ||
+                        this.message.status === 'sending' ||
+                        (this.mode === 'thread' && !this.message.parent_id))
+                    : false;
             }
         };
         MessageComponent.prototype.ngOnDestroy = function () {
             this.subscriptions.forEach(function (s) { return s.unsubscribe(); });
         };
-        Object.defineProperty(MessageComponent.prototype, "shouldDisplayThreadLink", {
-            get: function () {
-                var _a;
-                return (!!((_a = this.message) === null || _a === void 0 ? void 0 : _a.reply_count) &&
-                    this.mode !== 'thread' &&
-                    this.enabledMessageActions.indexOf('send-reply') !== -1);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MessageComponent.prototype, "isSentByCurrentUser", {
-            get: function () {
-                var _a, _b, _c;
-                return ((_b = (_a = this.message) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b.id) === ((_c = this.user) === null || _c === void 0 ? void 0 : _c.id);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MessageComponent.prototype, "readByText", {
-            get: function () {
-                return listUsers(this.message.readBy);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MessageComponent.prototype, "lastReadUser", {
-            get: function () {
-                var _this = this;
-                var _a;
-                return (_a = this.message) === null || _a === void 0 ? void 0 : _a.readBy.filter(function (u) { var _a; return u.id !== ((_a = _this.user) === null || _a === void 0 ? void 0 : _a.id); })[0];
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MessageComponent.prototype, "isOnlyReadByMe", {
-            get: function () {
-                return this.message && this.message.readBy.length === 0;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MessageComponent.prototype, "isReadByMultipleUsers", {
-            get: function () {
-                return this.message && this.message.readBy.length > 1;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MessageComponent.prototype, "isMessageDeliveredAndRead", {
-            get: function () {
-                return (this.message &&
-                    this.message.readBy &&
-                    this.message.status === 'received' &&
-                    this.message.readBy.length > 0);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MessageComponent.prototype, "parsedDate", {
-            get: function () {
-                var _a;
-                if (!this.message || !((_a = this.message) === null || _a === void 0 ? void 0 : _a.created_at)) {
-                    return;
-                }
-                return this.dateParser.parseDateTime(this.message.created_at);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MessageComponent.prototype, "areOptionsVisible", {
-            get: function () {
-                if (!this.message) {
-                    return false;
-                }
-                return !(!this.message.type ||
-                    this.message.type === 'error' ||
-                    this.message.type === 'system' ||
-                    this.message.type === 'ephemeral' ||
-                    this.message.status === 'failed' ||
-                    this.message.status === 'sending' ||
-                    (this.mode === 'thread' && !this.message.parent_id));
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MessageComponent.prototype, "hasAttachment", {
-            get: function () {
-                var _a;
-                return !!((_a = this.message) === null || _a === void 0 ? void 0 : _a.attachments) && !!this.message.attachments.length;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MessageComponent.prototype, "hasReactions", {
-            get: function () {
-                var _a;
-                return (!!((_a = this.message) === null || _a === void 0 ? void 0 : _a.reaction_counts) &&
-                    Object.keys(this.message.reaction_counts).length > 0);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MessageComponent.prototype, "replyCountParam", {
-            get: function () {
-                var _a;
-                return { replyCount: (_a = this.message) === null || _a === void 0 ? void 0 : _a.reply_count };
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MessageComponent.prototype, "canDisplayReadStatus", {
-            get: function () {
-                return (this.canReceiveReadEvents !== false &&
-                    this.enabledMessageActions.indexOf('read-events') !== -1);
-            },
-            enumerable: false,
-            configurable: true
-        });
         MessageComponent.prototype.getAttachmentListContext = function () {
             var _this = this;
             var _a, _b, _c;
@@ -5648,16 +5587,26 @@
             content = content.replace(urlRegexp, function (match) { return "<a href=\"" + match + "\" rel=\"nofollow\">" + match + "</a>"; });
             return content;
         };
+        MessageComponent.prototype.setIsSentByCurrentUser = function () {
+            var _a, _b, _c;
+            this.isSentByCurrentUser = ((_b = (_a = this.message) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b.id) === ((_c = this.user) === null || _c === void 0 ? void 0 : _c.id);
+        };
+        MessageComponent.prototype.setLastReadUser = function () {
+            var _this = this;
+            var _a, _b;
+            this.lastReadUser = (_b = (_a = this.message) === null || _a === void 0 ? void 0 : _a.readBy) === null || _b === void 0 ? void 0 : _b.filter(function (u) { var _a; return u.id !== ((_a = _this.user) === null || _a === void 0 ? void 0 : _a.id); })[0];
+        };
         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 }], 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  (mouseleave)=\"isActionBoxOpen = false\"\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          >\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-displayedActionsCountChangeHandler=\"displayedActionsCountChangeHandler\"\n                let-isEditingChangeHandler=\"isEditingChangeHandler\"\n                let-customActions=\"customActions\"\n              >\n                <stream-message-actions-box\n                  [isOpen]=\"isOpen\"\n                  [isMine]=\"isMine\"\n                  [enabledActions]=\"enabledActions\"\n                  [message]=\"messageInput\"\n                  [customActions]=\"customActions\"\n                  (displayedActionsCount)=\"\n                    displayedActionsCountChangeHandler($event)\n                  \"\n                  (isEditing)=\"isEditingChangeHandler($event)\"\n                ></stream-message-actions-box>\n              </ng-template>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  messageActionsBoxTemplate || defaultMessageActionsBox;\n                  context: getMessageActionsBoxContext()\n                \"\n              >\n              </ng-container>\n            </popper-content>\n            <div\n              class=\"str-chat__message-actions-box-button\"\n              *ngIf=\"visibleMessageActionsCount > 0\"\n              data-testid=\"action-icon\"\n              (click)=\"isActionBoxOpen = !isActionBoxOpen\"\n              (keyup.enter)=\"isActionBoxOpen = !isActionBoxOpen\"\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              messageReactionsTemplate || 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                  <!-- 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                          mentionTemplate || defaultMention;\n                          context: getMentionContext(part)\n                        \"\n                      ></ng-container>\n                    </ng-template>\n                  </ng-container>\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      systemMessageTemplate || 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            attachmentListTemplate || 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          customDeliveredStatusTemplate || 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          customSendingStatusTemplate || 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          customReadStatusTemplate || 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      attachmentListTemplate || 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: i3__namespace.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: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace.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: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i9__namespace.TranslatePipe } });
+    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  (mouseleave)=\"isActionBoxOpen = false\"\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          >\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-displayedActionsCountChangeHandler=\"displayedActionsCountChangeHandler\"\n                let-isEditingChangeHandler=\"isEditingChangeHandler\"\n                let-customActions=\"customActions\"\n              >\n                <stream-message-actions-box\n                  [isOpen]=\"isOpen\"\n                  [isMine]=\"isMine\"\n                  [enabledActions]=\"enabledActions\"\n                  [message]=\"messageInput\"\n                  [customActions]=\"customActions\"\n                  (displayedActionsCount)=\"\n                    displayedActionsCountChangeHandler($event)\n                  \"\n                  (isEditing)=\"isEditingChangeHandler($event)\"\n                ></stream-message-actions-box>\n              </ng-template>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  (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              *ngIf=\"visibleMessageActionsCount > 0\"\n              data-testid=\"action-icon\"\n              (click)=\"isActionBoxOpen = !isActionBoxOpen\"\n              (keyup.enter)=\"isActionBoxOpen = !isActionBoxOpen\"\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              (messageReactionsTemplate$ | async) || 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                  <!-- 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                          (mentionTemplate$ | async) || defaultMention;\n                          context: getMentionContext(part)\n                        \"\n                      ></ng-container>\n                    </ng-template>\n                  </ng-container>\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      (systemMessageTemplate$ | async) || 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            (attachmentListTemplate$ | async) || 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          (deliveredStatusTemplate$ | async) || 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          (sendingStatusTemplate$ | async) || 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          (readStatusTemplate$ | async) || 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      (attachmentListTemplate$ | async) || 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: i3__namespace.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: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace.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: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "async": i5__namespace.AsyncPipe, "translate": i9__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: [{
                         selector: 'stream-message',
                         templateUrl: './message.component.html',
                         styles: [],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
             }], ctorParameters: function () { return [{ type: ChatClientService }, { type: ChannelService }, { type: CustomTemplatesService }, { type: i0__namespace.ChangeDetectorRef }, { type: ThemeService }, { type: DateParserService }]; }, propDecorators: { message: [{
                     type: i0.Input
@@ -6319,6 +6268,7 @@
         MessageListComponent.prototype.scrollToBottom = function () {
             this.scrollContainer.nativeElement.scrollTop =
                 this.scrollContainer.nativeElement.scrollHeight;
+            this.forceRepaint();
         };
         MessageListComponent.prototype.scrollToTop = function () {
             this.scrollContainer.nativeElement.scrollTop = 0;
@@ -6408,6 +6358,13 @@
             this.scrollContainer.nativeElement.scrollTop =
                 (this.prevScrollTop || 0) +
                     (this.scrollContainer.nativeElement.scrollHeight - this.containerHeight);
+            this.forceRepaint();
+        };
+        MessageListComponent.prototype.forceRepaint = function () {
+            // Solves the issue of empty screen on iOS Safari when scrolling
+            this.scrollContainer.nativeElement.style.display = 'none';
+            this.scrollContainer.nativeElement.offsetHeight; // no need to store this anywhere, the reference is enough
+            this.scrollContainer.nativeElement.style.display = '';
         };
         MessageListComponent.prototype.getScrollPosition = function () {
             var _a, _b;