stream-chat-angular 5.7.2 → 5.8.0

package/fesm2020/stream-chat-angular.mjs

@@ -21,7 +21,7 @@ import transliterate from '@stream-io/transliterate';
 import * as i7 from 'angular-mentions';
 import { MentionModule } from 'angular-mentions';
 
-const version = '5.7.2';
+const version = '5.8.0';
 
 /**
  * The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](../components/NotificationListComponent.mdx) component displays the currently active notifications.
@@ -4792,13 +4792,13 @@ class AttachmentListComponent {
     isVideo(attachment) {
         return (attachment.type === 'video' &&
             attachment.asset_url &&
-            !attachment.og_scrape_url // links from video share services (such as YouTube or Facebook) are can't be played
-        );
+            !attachment.og_scrape_url);
     }
     isCard(attachment) {
         return (!attachment.type ||
             (attachment.type === 'image' && !this.isImage(attachment)) ||
-            attachment.type === 'giphy');
+            attachment.type === 'giphy' ||
+            (attachment.type === 'video' && attachment.og_scrape_url));
     }
     isVoiceMessage(attachment) {
         return attachment.type === 'voiceRecording';
@@ -4902,10 +4902,10 @@ class AttachmentListComponent {
     }
 }
 AttachmentListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AttachmentListComponent, deps: [{ token: CustomTemplatesService }, { token: ChannelService }, { token: AttachmentConfigurationService }, { token: MessageService }], target: i0.ɵɵFactoryTarget.Component });
-AttachmentListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", 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, template: "<div\n  *ngIf=\"\n    orderedAttachments.length > 0 ||\n    (customAttachments.length > 0 && customAttachmentsTemplate)\n  \"\n  class=\"str-chat__attachment-list\"\n>\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--voice-recording]=\"\n        isVoiceMessage(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            [ngStyle]=\"{\n              height: getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).height,\n              width: getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).width,\n              '--original-height': getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).originalHeight,\n              '--original-width': getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).originalWidth\n            }\"\n            (click)=\"openImageModal([attachmentContext])\"\n            (keyup.enter)=\"openImageModal([attachmentContext])\"\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                [class.str-chat__message-attachment--svg-image]=\"\n                  isSvg(galleryImage)\n                \"\n                (click)=\"openImageModal(attachmentContext.images!, index)\"\n                (keyup.enter)=\"openImageModal(attachmentContext.images!, index)\"\n              >\n                <img\n                  #imgElement\n                  fetchpriority=\"low\"\n                  loading=\"lazy\"\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                *ngIf=\"index === 3 && !isLast\"\n                #element\n                class=\"str-chat__gallery-placeholder\"\n                data-testclass=\"gallery-image\"\n                data-testid=\"more-image-button\"\n                [class.str-chat__message-attachment--svg-image]=\"\n                  isSvg(galleryImage)\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                  '--original-height': getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).originalHeight,\n                  '--original-width': getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).originalWidth\n                }\"\n                (click)=\"openImageModal(attachmentContext.images!, index)\"\n                (keyup.enter)=\"openImageModal(attachmentContext.images!, index)\"\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          <div\n            class=\"str-chat__message-attachment-file--item str-chat-angular__message-attachment-file-single\"\n          >\n            <stream-icon-placeholder\n              class=\"str-chat__attachment-type-icon\"\n              icon=\"unspecified-filetype\"\n            ></stream-icon-placeholder>\n            <div class=\"str-chat__message-attachment-file--item-text\">\n              <a\n                class=\"str-chat__message-attachment-file--item-first-row\"\n                data-testclass=\"file-link\"\n                target=\"_blank\"\n                href=\"{{ attachmentContext.asset_url }}\"\n              >\n                <div\n                  data-testclass=\"file-title\"\n                  class=\"str-chat__message-attachment-file--item-name\"\n                >\n                  {{ attachmentContext.title }}\n                </div>\n                <stream-icon-placeholder\n                  class=\"str-chat__message-attachment-download-icon\"\n                  icon=\"download\"\n                ></stream-icon-placeholder>\n              </a>\n              <span\n                *ngIf=\"hasFileSize(attachmentContext)\"\n                class=\"str-chat__message-attachment-file--item-size\"\n                data-testclass=\"size\"\n                >{{ getFileSize(attachmentContext) }}</span\n              >\n            </div>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isVoiceMessage(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.voiceRecordingAttachmentTemplate$\n              | async) || defaultRecording;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultRecording>\n          <stream-voice-recording\n            data-testclass=\"voice-recording\"\n            [attachment]=\"attachment\"\n          ></stream-voice-recording>\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                fetchpriority=\"low\"\n                loading=\"lazy\"\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                  *ngIf=\"\n                    attachmentContext.title_link ||\n                    attachmentContext.og_scrape_url\n                  \"\n                  class=\"str-chat__message-attachment-card--url\"\n                  data-testclass=\"url-link\"\n                  noopener\n                  noreferrer\n                  target=\"_blank\"\n                  href=\"{{\n                    attachmentContext.title_link ||\n                      attachmentContext.og_scrape_url\n                  }}\"\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                data-testclass=\"attachment-action\"\n                class=\"str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--{{\n                  action.style\n                }}\"\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  <ng-container *ngIf=\"customAttachmentsTemplate\">\n    <ng-template\n      *ngTemplateOutlet=\"\n        customAttachmentsTemplate;\n        context: {\n          messageId: messageId,\n          parentMessageId: parentMessageId,\n          attachments: customAttachments\n        }\n      \"\n    ></ng-template>\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    [content]=\"content\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\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    <img\n      #imgElement\n      class=\"stream-chat-angular__image-modal-image str-chat__image-carousel-image\"\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    <div>\n      <button\n        class=\"stream-chat-angular__image-modal-stepper str-chat__image-carousel-stepper str-chat__image-carousel-stepper-prev\"\n        data-testid=\"image-modal-prev\"\n        type=\"button\"\n        [ngStyle]=\"{\n          visibility: isImageModalPrevButtonVisible ? 'visible' : 'hidden'\n        }\"\n        (click)=\"stepImages(-1)\"\n        (keyup.enter)=\"stepImages(-1)\"\n      >\n        <stream-icon-placeholder icon=\"arrow-left\"></stream-icon-placeholder>\n      </button>\n      <button\n        class=\"stream-chat-angular__image-modal-stepper str-chat__image-carousel-stepper str-chat__image-carousel-stepper-next\"\n        type=\"button\"\n        data-testid=\"image-modal-next\"\n        [ngStyle]=\"{\n          visibility: isImageModalNextButtonVisible ? 'visible' : 'hidden'\n        }\"\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  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: VoiceRecordingComponent, selector: "stream-voice-recording", inputs: ["attachment"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "component", type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
+AttachmentListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", 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, template: "<div\n  *ngIf=\"\n    orderedAttachments.length > 0 ||\n    (customAttachments.length > 0 && customAttachmentsTemplate)\n  \"\n  class=\"str-chat__attachment-list\"\n>\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--voice-recording]=\"\n        isVoiceMessage(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            [ngStyle]=\"{\n              height: getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).height,\n              width: getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).width,\n              '--original-height': getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).originalHeight,\n              '--original-width': getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).originalWidth\n            }\"\n            (click)=\"openImageModal([attachmentContext])\"\n            (keyup.enter)=\"openImageModal([attachmentContext])\"\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                [class.str-chat__message-attachment--svg-image]=\"\n                  isSvg(galleryImage)\n                \"\n                (click)=\"openImageModal(attachmentContext.images!, index)\"\n                (keyup.enter)=\"openImageModal(attachmentContext.images!, index)\"\n              >\n                <img\n                  #imgElement\n                  fetchpriority=\"low\"\n                  loading=\"lazy\"\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                *ngIf=\"index === 3 && !isLast\"\n                #element\n                class=\"str-chat__gallery-placeholder\"\n                data-testclass=\"gallery-image\"\n                data-testid=\"more-image-button\"\n                [class.str-chat__message-attachment--svg-image]=\"\n                  isSvg(galleryImage)\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                  '--original-height': getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).originalHeight,\n                  '--original-width': getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).originalWidth\n                }\"\n                (click)=\"openImageModal(attachmentContext.images!, index)\"\n                (keyup.enter)=\"openImageModal(attachmentContext.images!, index)\"\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          <div\n            class=\"str-chat__message-attachment-file--item str-chat-angular__message-attachment-file-single\"\n          >\n            <stream-icon-placeholder\n              class=\"str-chat__attachment-type-icon\"\n              icon=\"unspecified-filetype\"\n            ></stream-icon-placeholder>\n            <div class=\"str-chat__message-attachment-file--item-text\">\n              <a\n                class=\"str-chat__message-attachment-file--item-first-row\"\n                data-testclass=\"file-link\"\n                target=\"_blank\"\n                href=\"{{ attachmentContext.asset_url }}\"\n              >\n                <div\n                  data-testclass=\"file-title\"\n                  class=\"str-chat__message-attachment-file--item-name\"\n                >\n                  {{ attachmentContext.title }}\n                </div>\n                <stream-icon-placeholder\n                  class=\"str-chat__message-attachment-download-icon\"\n                  icon=\"download\"\n                ></stream-icon-placeholder>\n              </a>\n              <span\n                *ngIf=\"hasFileSize(attachmentContext)\"\n                class=\"str-chat__message-attachment-file--item-size\"\n                data-testclass=\"size\"\n                >{{ getFileSize(attachmentContext) }}</span\n              >\n            </div>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isVoiceMessage(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.voiceRecordingAttachmentTemplate$\n              | async) || defaultRecording;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultRecording>\n          <stream-voice-recording\n            data-testclass=\"voice-recording\"\n            [attachment]=\"attachment\"\n          ></stream-voice-recording>\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              <a\n                *ngIf=\"attachmentContext.type === 'video'; else cardImage\"\n                [href]=\"\n                  attachmentContext.title_link ||\n                  attachmentContext.og_scrape_url\n                \"\n                target=\"_blank\"\n                data-testclass=\"scraped-video\"\n              >\n                <ng-content *ngTemplateOutlet=\"cardImage\"></ng-content>\n                <div\n                  class=\"str-chat__message-attachment-card--video-play\"\n                ></div>\n                <stream-icon-placeholder icon=\"play\"></stream-icon-placeholder>\n              </a>\n              <ng-template #cardImage>\n                <img\n                  fetchpriority=\"low\"\n                  loading=\"lazy\"\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              </ng-template>\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                  *ngIf=\"\n                    attachmentContext.title_link ||\n                    attachmentContext.og_scrape_url\n                  \"\n                  class=\"str-chat__message-attachment-card--url\"\n                  data-testclass=\"url-link\"\n                  noopener\n                  noreferrer\n                  target=\"_blank\"\n                  href=\"{{\n                    attachmentContext.title_link ||\n                      attachmentContext.og_scrape_url\n                  }}\"\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                data-testclass=\"attachment-action\"\n                class=\"str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--{{\n                  action.style\n                }}\"\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  <ng-container *ngIf=\"customAttachmentsTemplate\">\n    <ng-template\n      *ngTemplateOutlet=\"\n        customAttachmentsTemplate;\n        context: {\n          messageId: messageId,\n          parentMessageId: parentMessageId,\n          attachments: customAttachments\n        }\n      \"\n    ></ng-template>\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    [content]=\"content\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\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    <img\n      #imgElement\n      class=\"stream-chat-angular__image-modal-image str-chat__image-carousel-image\"\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    <div>\n      <button\n        class=\"stream-chat-angular__image-modal-stepper str-chat__image-carousel-stepper str-chat__image-carousel-stepper-prev\"\n        data-testid=\"image-modal-prev\"\n        type=\"button\"\n        [ngStyle]=\"{\n          visibility: isImageModalPrevButtonVisible ? 'visible' : 'hidden'\n        }\"\n        (click)=\"stepImages(-1)\"\n        (keyup.enter)=\"stepImages(-1)\"\n      >\n        <stream-icon-placeholder icon=\"arrow-left\"></stream-icon-placeholder>\n      </button>\n      <button\n        class=\"stream-chat-angular__image-modal-stepper str-chat__image-carousel-stepper str-chat__image-carousel-stepper-next\"\n        type=\"button\"\n        data-testid=\"image-modal-next\"\n        [ngStyle]=\"{\n          visibility: isImageModalNextButtonVisible ? 'visible' : 'hidden'\n        }\"\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  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: VoiceRecordingComponent, selector: "stream-voice-recording", inputs: ["attachment"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "component", type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AttachmentListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-attachment-list', template: "<div\n  *ngIf=\"\n    orderedAttachments.length > 0 ||\n    (customAttachments.length > 0 && customAttachmentsTemplate)\n  \"\n  class=\"str-chat__attachment-list\"\n>\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--voice-recording]=\"\n        isVoiceMessage(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            [ngStyle]=\"{\n              height: getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).height,\n              width: getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).width,\n              '--original-height': getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).originalHeight,\n              '--original-width': getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).originalWidth\n            }\"\n            (click)=\"openImageModal([attachmentContext])\"\n            (keyup.enter)=\"openImageModal([attachmentContext])\"\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                [class.str-chat__message-attachment--svg-image]=\"\n                  isSvg(galleryImage)\n                \"\n                (click)=\"openImageModal(attachmentContext.images!, index)\"\n                (keyup.enter)=\"openImageModal(attachmentContext.images!, index)\"\n              >\n                <img\n                  #imgElement\n                  fetchpriority=\"low\"\n                  loading=\"lazy\"\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                *ngIf=\"index === 3 && !isLast\"\n                #element\n                class=\"str-chat__gallery-placeholder\"\n                data-testclass=\"gallery-image\"\n                data-testid=\"more-image-button\"\n                [class.str-chat__message-attachment--svg-image]=\"\n                  isSvg(galleryImage)\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                  '--original-height': getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).originalHeight,\n                  '--original-width': getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).originalWidth\n                }\"\n                (click)=\"openImageModal(attachmentContext.images!, index)\"\n                (keyup.enter)=\"openImageModal(attachmentContext.images!, index)\"\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          <div\n            class=\"str-chat__message-attachment-file--item str-chat-angular__message-attachment-file-single\"\n          >\n            <stream-icon-placeholder\n              class=\"str-chat__attachment-type-icon\"\n              icon=\"unspecified-filetype\"\n            ></stream-icon-placeholder>\n            <div class=\"str-chat__message-attachment-file--item-text\">\n              <a\n                class=\"str-chat__message-attachment-file--item-first-row\"\n                data-testclass=\"file-link\"\n                target=\"_blank\"\n                href=\"{{ attachmentContext.asset_url }}\"\n              >\n                <div\n                  data-testclass=\"file-title\"\n                  class=\"str-chat__message-attachment-file--item-name\"\n                >\n                  {{ attachmentContext.title }}\n                </div>\n                <stream-icon-placeholder\n                  class=\"str-chat__message-attachment-download-icon\"\n                  icon=\"download\"\n                ></stream-icon-placeholder>\n              </a>\n              <span\n                *ngIf=\"hasFileSize(attachmentContext)\"\n                class=\"str-chat__message-attachment-file--item-size\"\n                data-testclass=\"size\"\n                >{{ getFileSize(attachmentContext) }}</span\n              >\n            </div>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isVoiceMessage(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.voiceRecordingAttachmentTemplate$\n              | async) || defaultRecording;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultRecording>\n          <stream-voice-recording\n            data-testclass=\"voice-recording\"\n            [attachment]=\"attachment\"\n          ></stream-voice-recording>\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                fetchpriority=\"low\"\n                loading=\"lazy\"\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                  *ngIf=\"\n                    attachmentContext.title_link ||\n                    attachmentContext.og_scrape_url\n                  \"\n                  class=\"str-chat__message-attachment-card--url\"\n                  data-testclass=\"url-link\"\n                  noopener\n                  noreferrer\n                  target=\"_blank\"\n                  href=\"{{\n                    attachmentContext.title_link ||\n                      attachmentContext.og_scrape_url\n                  }}\"\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                data-testclass=\"attachment-action\"\n                class=\"str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--{{\n                  action.style\n                }}\"\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  <ng-container *ngIf=\"customAttachmentsTemplate\">\n    <ng-template\n      *ngTemplateOutlet=\"\n        customAttachmentsTemplate;\n        context: {\n          messageId: messageId,\n          parentMessageId: parentMessageId,\n          attachments: customAttachments\n        }\n      \"\n    ></ng-template>\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    [content]=\"content\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\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    <img\n      #imgElement\n      class=\"stream-chat-angular__image-modal-image str-chat__image-carousel-image\"\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    <div>\n      <button\n        class=\"stream-chat-angular__image-modal-stepper str-chat__image-carousel-stepper str-chat__image-carousel-stepper-prev\"\n        data-testid=\"image-modal-prev\"\n        type=\"button\"\n        [ngStyle]=\"{\n          visibility: isImageModalPrevButtonVisible ? 'visible' : 'hidden'\n        }\"\n        (click)=\"stepImages(-1)\"\n        (keyup.enter)=\"stepImages(-1)\"\n      >\n        <stream-icon-placeholder icon=\"arrow-left\"></stream-icon-placeholder>\n      </button>\n      <button\n        class=\"stream-chat-angular__image-modal-stepper str-chat__image-carousel-stepper str-chat__image-carousel-stepper-next\"\n        type=\"button\"\n        data-testid=\"image-modal-next\"\n        [ngStyle]=\"{\n          visibility: isImageModalNextButtonVisible ? 'visible' : 'hidden'\n        }\"\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  </div>\n</ng-template>\n" }]
+            args: [{ selector: 'stream-attachment-list', template: "<div\n  *ngIf=\"\n    orderedAttachments.length > 0 ||\n    (customAttachments.length > 0 && customAttachmentsTemplate)\n  \"\n  class=\"str-chat__attachment-list\"\n>\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--voice-recording]=\"\n        isVoiceMessage(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            [ngStyle]=\"{\n              height: getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).height,\n              width: getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).width,\n              '--original-height': getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).originalHeight,\n              '--original-width': getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).originalWidth\n            }\"\n            (click)=\"openImageModal([attachmentContext])\"\n            (keyup.enter)=\"openImageModal([attachmentContext])\"\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                [class.str-chat__message-attachment--svg-image]=\"\n                  isSvg(galleryImage)\n                \"\n                (click)=\"openImageModal(attachmentContext.images!, index)\"\n                (keyup.enter)=\"openImageModal(attachmentContext.images!, index)\"\n              >\n                <img\n                  #imgElement\n                  fetchpriority=\"low\"\n                  loading=\"lazy\"\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                *ngIf=\"index === 3 && !isLast\"\n                #element\n                class=\"str-chat__gallery-placeholder\"\n                data-testclass=\"gallery-image\"\n                data-testid=\"more-image-button\"\n                [class.str-chat__message-attachment--svg-image]=\"\n                  isSvg(galleryImage)\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                  '--original-height': getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).originalHeight,\n                  '--original-width': getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).originalWidth\n                }\"\n                (click)=\"openImageModal(attachmentContext.images!, index)\"\n                (keyup.enter)=\"openImageModal(attachmentContext.images!, index)\"\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          <div\n            class=\"str-chat__message-attachment-file--item str-chat-angular__message-attachment-file-single\"\n          >\n            <stream-icon-placeholder\n              class=\"str-chat__attachment-type-icon\"\n              icon=\"unspecified-filetype\"\n            ></stream-icon-placeholder>\n            <div class=\"str-chat__message-attachment-file--item-text\">\n              <a\n                class=\"str-chat__message-attachment-file--item-first-row\"\n                data-testclass=\"file-link\"\n                target=\"_blank\"\n                href=\"{{ attachmentContext.asset_url }}\"\n              >\n                <div\n                  data-testclass=\"file-title\"\n                  class=\"str-chat__message-attachment-file--item-name\"\n                >\n                  {{ attachmentContext.title }}\n                </div>\n                <stream-icon-placeholder\n                  class=\"str-chat__message-attachment-download-icon\"\n                  icon=\"download\"\n                ></stream-icon-placeholder>\n              </a>\n              <span\n                *ngIf=\"hasFileSize(attachmentContext)\"\n                class=\"str-chat__message-attachment-file--item-size\"\n                data-testclass=\"size\"\n                >{{ getFileSize(attachmentContext) }}</span\n              >\n            </div>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isVoiceMessage(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.voiceRecordingAttachmentTemplate$\n              | async) || defaultRecording;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultRecording>\n          <stream-voice-recording\n            data-testclass=\"voice-recording\"\n            [attachment]=\"attachment\"\n          ></stream-voice-recording>\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              <a\n                *ngIf=\"attachmentContext.type === 'video'; else cardImage\"\n                [href]=\"\n                  attachmentContext.title_link ||\n                  attachmentContext.og_scrape_url\n                \"\n                target=\"_blank\"\n                data-testclass=\"scraped-video\"\n              >\n                <ng-content *ngTemplateOutlet=\"cardImage\"></ng-content>\n                <div\n                  class=\"str-chat__message-attachment-card--video-play\"\n                ></div>\n                <stream-icon-placeholder icon=\"play\"></stream-icon-placeholder>\n              </a>\n              <ng-template #cardImage>\n                <img\n                  fetchpriority=\"low\"\n                  loading=\"lazy\"\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              </ng-template>\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                  *ngIf=\"\n                    attachmentContext.title_link ||\n                    attachmentContext.og_scrape_url\n                  \"\n                  class=\"str-chat__message-attachment-card--url\"\n                  data-testclass=\"url-link\"\n                  noopener\n                  noreferrer\n                  target=\"_blank\"\n                  href=\"{{\n                    attachmentContext.title_link ||\n                      attachmentContext.og_scrape_url\n                  }}\"\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                data-testclass=\"attachment-action\"\n                class=\"str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--{{\n                  action.style\n                }}\"\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  <ng-container *ngIf=\"customAttachmentsTemplate\">\n    <ng-template\n      *ngTemplateOutlet=\"\n        customAttachmentsTemplate;\n        context: {\n          messageId: messageId,\n          parentMessageId: parentMessageId,\n          attachments: customAttachments\n        }\n      \"\n    ></ng-template>\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    [content]=\"content\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\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    <img\n      #imgElement\n      class=\"stream-chat-angular__image-modal-image str-chat__image-carousel-image\"\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    <div>\n      <button\n        class=\"stream-chat-angular__image-modal-stepper str-chat__image-carousel-stepper str-chat__image-carousel-stepper-prev\"\n        data-testid=\"image-modal-prev\"\n        type=\"button\"\n        [ngStyle]=\"{\n          visibility: isImageModalPrevButtonVisible ? 'visible' : 'hidden'\n        }\"\n        (click)=\"stepImages(-1)\"\n        (keyup.enter)=\"stepImages(-1)\"\n      >\n        <stream-icon-placeholder icon=\"arrow-left\"></stream-icon-placeholder>\n      </button>\n      <button\n        class=\"stream-chat-angular__image-modal-stepper str-chat__image-carousel-stepper str-chat__image-carousel-stepper-next\"\n        type=\"button\"\n        data-testid=\"image-modal-next\"\n        [ngStyle]=\"{\n          visibility: isImageModalNextButtonVisible ? 'visible' : 'hidden'\n        }\"\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  </div>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: CustomTemplatesService }, { type: ChannelService }, { type: AttachmentConfigurationService }, { type: MessageService }]; }, propDecorators: { messageId: [{
                 type: Input
             }], parentMessageId: [{
@@ -7772,6 +7772,9 @@ class MessageListComponent {
             }
         }));
         this.subscriptions.push(this.channelService.activeParentMessage$.subscribe((message) => {
+            if (!message && this.parentMessage && this.mode === 'thread') {
+                this.resetScrollState();
+            }
             if (message &&
                 this.parentMessage &&
                 message.id !== this.parentMessage.id &&
@@ -7935,6 +7938,12 @@ class MessageListComponent {
             }
             return;
         }
+        if (this.scrollContainer.nativeElement.scrollHeight >
+            this.scrollContainer.nativeElement.clientHeight) {
+            if (!this.isJumpToLatestButtonVisible) {
+                this.isJumpToLatestButtonVisible = true;
+            }
+        }
         this.scroll$.next();
         let scrollPosition = this.getScrollPosition();
         const isUserScrolled = (this.direction === 'bottom-to-top'
@@ -8053,16 +8062,16 @@ class MessageListComponent {
     }
     getScrollPosition() {
         let position = 'middle';
-        if (Math.floor(this.scrollContainer.nativeElement.scrollTop) <=
-            (this.parentMessageElement?.nativeElement.clientHeight || 0)) {
-            position = 'top';
-        }
-        else if (Math.ceil(this.scrollContainer.nativeElement.scrollTop) +
+        if (Math.ceil(this.scrollContainer.nativeElement.scrollTop) +
             this.scrollContainer.nativeElement.clientHeight +
             1 >=
             this.scrollContainer.nativeElement.scrollHeight) {
             position = 'bottom';
         }
+        else if (Math.floor(this.scrollContainer.nativeElement.scrollTop) <=
+            (this.parentMessageElement?.nativeElement?.clientHeight || 0)) {
+            position = 'top';
+        }
         return position;
     }
     setMessages$() {
@@ -8080,11 +8089,7 @@ class MessageListComponent {
                 }
             }
         });
-        this.messages$ = this.virtualizedList.virtualizedItems$.pipe(tap((messages) => {
-            if (messages.length === 0) {
-                this.resetScrollState();
-                return;
-            }
+        this.messages$ = this.virtualizedList.virtualizedItems$.pipe(tap(() => {
             if (this.isEmpty) {
                 // cdRef.detectChanges() isn't enough here, test will fail
                 setTimeout(() => (this.isEmpty = false), 0);
@@ -8109,6 +8114,8 @@ class MessageListComponent {
             this.isLatestMessageInList =
                 !latestMessageInList ||
                     latestMessageInList.cid !== channel?.cid ||
+                    (this.mode === 'thread' &&
+                        latestMessageInList?.parent_id !== this.parentMessage?.id) ||
                     latestMessageInList?.id ===
                         messagesFromState[messagesFromState.length - 1]?.id;
             if (!this.isLatestMessageInList) {