stream-chat-angular 4.1.0 → 4.2.0

package/fesm2015/stream-chat-angular.js

@@ -19,7 +19,7 @@ import transliterate from '@stream-io/transliterate';
 import * as i8 from 'angular-mentions';
 import { MentionModule } from 'angular-mentions';
 
-const version = '4.1.0';
+const version = '4.2.0';
 
 /**
  * The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](../components/NotificationListComponent.mdx) component displays the currently active notifications.
@@ -641,10 +641,10 @@ class ChannelService {
             const uploadResults = yield Promise.allSettled(uploads.map((upload) => upload.type === 'image'
                 ? this.customImageUploadRequest
                     ? this.customImageUploadRequest(upload.file, channel)
-                    : channel.sendImage(upload.file)
+                    : channel.sendImage(upload.file, upload.file.name, upload.file.type)
                 : this.customFileUploadRequest
                     ? this.customFileUploadRequest(upload.file, channel)
-                    : channel.sendFile(upload.file)));
+                    : channel.sendFile(upload.file, upload.file.name, upload.file.type)));
             uploadResults.forEach((uploadResult, i) => {
                 const file = uploads[i].file;
                 const type = uploads[i].type;
@@ -654,6 +654,8 @@ class ChannelService {
                         type,
                         state: 'success',
                         url: uploadResult.value.file,
+                        /* eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access */
+                        thumb_url: uploadResult.value.thumb_url,
                     });
                 }
                 else {
@@ -1564,6 +1566,7 @@ class AttachmentService {
                 attachment.asset_url = r.url;
                 attachment.title = (_b = r.file) === null || _b === void 0 ? void 0 : _b.name;
                 attachment.file_size = (_c = r.file) === null || _c === void 0 ? void 0 : _c.size;
+                attachment.thumb_url = r.thumb_url;
             }
             return attachment;
         });
@@ -1596,6 +1599,7 @@ class AttachmentService {
                         size: attachment.file_size,
                     },
                     type: attachment.type,
+                    thumb_url: attachment.thumb_url,
                 });
             }
         });
@@ -1635,6 +1639,7 @@ class AttachmentService {
                 }
                 upload.state = r.state;
                 upload.url = r.url;
+                upload.thumb_url = r.thumb_url;
                 if (upload.state === 'error') {
                     this.notificationService.addTemporaryNotification(upload.type === 'image'
                         ? 'streamChat.Error uploading image'
@@ -1656,28 +1661,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
         }], ctorParameters: function () { return [{ type: ChannelService }, { type: NotificationService }]; } });
 
 /**
- * The `AttachmentConfigurationService` provides customization for certain attributes of attachments displayed inside the message component.
+ * The `AttachmentConfigurationService` provides customization for certain attributes of attachments displayed inside the message component. If you're using your own CDN, you can integrate resizing features of it by providing your own handlers.
  */
 class AttachmentConfigurationService {
+    constructor() {
+        /**
+         * You can turn on/off thumbnail generation for video attachments
+         */
+        this.shouldGenerateVideoThumbnail = true;
+    }
     /**
      * Handles the configuration for image attachments, it's possible to provide your own function to override the default logic
      * @param attachment The attachment to configure
      * @param location Specifies where the image is being displayed
+     * @param element The default resizing logics reads the height/max-height and max-width propperties of this element and reduces file size based on the given values. File size reduction is done by Stream's CDN.
      */
-    getImageAttachmentConfiguration(attachment, location) {
+    getImageAttachmentConfiguration(attachment, location, element) {
         if (this.customImageAttachmentConfigurationHandler) {
-            return this.customImageAttachmentConfigurationHandler(attachment, location);
+            return this.customImageAttachmentConfigurationHandler(attachment, location, element);
+        }
+        const url = new URL((attachment.img_url ||
+            attachment.thumb_url ||
+            attachment.image_url ||
+            ''));
+        const { sizeRestriction, height } = this.getSizingRestrictions(url, element);
+        if (sizeRestriction) {
+            // Apply 2x for retina displays
+            sizeRestriction.height *= 2;
+            sizeRestriction.width *= 2;
+            this.addResizingParamsToUrl(sizeRestriction, url);
         }
-        const height = {
-            gallery: '',
-            single: '300px',
-            carousel: '', // Set from CSS
-        }[location];
         return {
-            url: (attachment.img_url ||
-                attachment.thumb_url ||
-                attachment.image_url ||
-                ''),
+            url: url.href,
             width: '',
             height,
         };
@@ -1685,15 +1700,34 @@ class AttachmentConfigurationService {
     /**
      * Handles the configuration for video attachments, it's possible to provide your own function to override the default logic
      * @param attachment The attachment to configure
+     * @param element The default resizing logics reads the height/max-height and max-width propperties of this element and reduces file size based on the given values. File size reduction is done by Stream's CDN.
      */
-    getVideoAttachmentConfiguration(attachment) {
+    getVideoAttachmentConfiguration(attachment, element) {
         if (this.customVideoAttachmentConfigurationHandler) {
-            return this.customVideoAttachmentConfigurationHandler(attachment);
+            return this.customVideoAttachmentConfigurationHandler(attachment, element);
+        }
+        let attachmentHeight = ``;
+        let thumbUrl = undefined;
+        if (attachment.thumb_url && this.shouldGenerateVideoThumbnail) {
+            const url = new URL(attachment.thumb_url);
+            const { sizeRestriction, height } = this.getSizingRestrictions(url, element);
+            if (sizeRestriction) {
+                sizeRestriction.height *= 2;
+                sizeRestriction.width *= 2;
+                this.addResizingParamsToUrl(sizeRestriction, url);
+            }
+            thumbUrl = url.href;
+            attachmentHeight = height;
+        }
+        else {
+            const cssSizeRestriction = this.getCSSSizeRestriction(element);
+            attachmentHeight = `${cssSizeRestriction.maxHeight || cssSizeRestriction.height || ''}px`;
         }
         return {
             url: attachment.asset_url || '',
-            width: '100%',
-            height: '100%',
+            width: '',
+            height: attachmentHeight,
+            thumbUrl: thumbUrl,
         };
     }
     /**
@@ -1726,6 +1760,52 @@ class AttachmentConfigurationService {
             height: '', // Set from CSS
         };
     }
+    addResizingParamsToUrl(sizeRestriction, url) {
+        url.searchParams.set('h', sizeRestriction.height.toString());
+        url.searchParams.set('w', sizeRestriction.width.toString());
+    }
+    getSizingRestrictions(url, htmlElement) {
+        const urlParams = url.searchParams;
+        const originalHeight = Number(urlParams.get('oh')) || 1;
+        const originalWidth = Number(urlParams.get('ow')) || 1;
+        const cssSizeRestriction = this.getCSSSizeRestriction(htmlElement);
+        let sizeRestriction;
+        let height = '';
+        if ((cssSizeRestriction.maxHeight || cssSizeRestriction.height) &&
+            cssSizeRestriction.maxWidth) {
+            sizeRestriction = this.getSizeRestrictions(originalHeight, originalWidth, (cssSizeRestriction.maxHeight || cssSizeRestriction.height), cssSizeRestriction.maxWidth);
+            if (cssSizeRestriction.maxHeight) {
+                const heightNum = originalHeight > 1 && originalWidth > 1
+                    ? originalHeight <= cssSizeRestriction.maxHeight &&
+                        originalWidth <= cssSizeRestriction.maxWidth
+                        ? originalHeight
+                        : Math.round(Math.min(cssSizeRestriction.maxHeight, (cssSizeRestriction.maxWidth / originalWidth) *
+                            originalHeight))
+                    : cssSizeRestriction.maxHeight;
+                height = `${heightNum}px`;
+            }
+        }
+        else {
+            sizeRestriction = undefined;
+        }
+        return { sizeRestriction, height };
+    }
+    getSizeRestrictions(originalHeight, originalWidth, maxHeight, maxWidth) {
+        return {
+            height: Math.round(Math.max(maxHeight, (maxWidth / originalWidth) * originalHeight)),
+            width: Math.round(Math.max(maxHeight, (maxWidth / originalHeight) * originalWidth)),
+        };
+    }
+    getCSSSizeRestriction(htmlElement) {
+        const computedStylesheet = getComputedStyle(htmlElement);
+        const height = this.getValueRepresentationOfCSSProperty(computedStylesheet.getPropertyValue('height'));
+        const maxHeight = this.getValueRepresentationOfCSSProperty(computedStylesheet.getPropertyValue('max-height'));
+        const maxWidth = this.getValueRepresentationOfCSSProperty(computedStylesheet.getPropertyValue('max-width'));
+        return { height, maxHeight, maxWidth };
+    }
+    getValueRepresentationOfCSSProperty(property) {
+        return Number(property.replace('px', '')) || undefined;
+    }
 }
 AttachmentConfigurationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: AttachmentConfigurationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
 AttachmentConfigurationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: AttachmentConfigurationService, providedIn: 'root' });
@@ -2434,24 +2514,31 @@ class AttachmentListComponent {
         this.orderedAttachments = [];
         this.imagesToView = [];
         this.imagesToViewCurrentIndex = 0;
+        this.attachmentConfigurations = new Map();
         this.themeVersion = themeService.themeVersion;
     }
-    ngOnChanges() {
-        const images = this.attachments.filter(this.isImage);
-        const containsGallery = images.length >= 2;
-        this.orderedAttachments = [
-            ...(containsGallery ? this.createGallery(images) : images),
-            ...this.attachments.filter((a) => this.isVideo(a)),
-            ...this.attachments.filter((a) => this.isFile(a)),
-        ];
-        // Display link attachments only if there are no other attachments
-        // Giphy-s always sent without other attachments
-        if (this.orderedAttachments.length === 0) {
-            this.orderedAttachments.push(...this.attachments.filter((a) => this.isCard(a)));
+    ngOnChanges(changes) {
+        if (changes.attachments) {
+            const images = this.attachments.filter(this.isImage);
+            const containsGallery = images.length >= 2;
+            this.orderedAttachments = [
+                ...(containsGallery ? this.createGallery(images) : images),
+                ...this.attachments.filter((a) => this.isVideo(a)),
+                ...this.attachments.filter((a) => this.isFile(a)),
+            ];
+            this.attachmentConfigurations = new Map();
+            // Display link attachments only if there are no other attachments
+            // Giphy-s always sent without other attachments
+            if (this.orderedAttachments.length === 0) {
+                this.orderedAttachments.push(...this.attachments.filter((a) => this.isCard(a)));
+            }
         }
     }
-    trackById(index) {
-        return index;
+    trackByUrl(_, attachment) {
+        return (attachment.image_url ||
+            attachment.img_url ||
+            attachment.asset_url ||
+            attachment.thumb_url);
     }
     isImage(attachment) {
         return isImageAttachment(attachment);
@@ -2517,18 +2604,39 @@ class AttachmentListComponent {
     trackByImageUrl(_, item) {
         return item.image_url || item.img_url || item.thumb_url;
     }
-    getImageAttachmentConfiguration(attachment, type) {
-        return this.attachmentConfigurationService.getImageAttachmentConfiguration(attachment, type);
+    getImageAttachmentConfiguration(attachment, type, element) {
+        const existingConfiguration = this.attachmentConfigurations.get(attachment);
+        if (existingConfiguration) {
+            return existingConfiguration;
+        }
+        const configuration = this.attachmentConfigurationService.getImageAttachmentConfiguration(attachment, type, element);
+        this.attachmentConfigurations.set(attachment, configuration);
+        return configuration;
+    }
+    getCarouselImageAttachmentConfiguration(attachment, element) {
+        return this.attachmentConfigurationService.getImageAttachmentConfiguration(attachment, 'carousel', element);
     }
-    getVideoAttachmentConfiguration(attachment) {
-        return this.attachmentConfigurationService.getVideoAttachmentConfiguration(attachment);
+    getVideoAttachmentConfiguration(attachment, element) {
+        const existingConfiguration = this.attachmentConfigurations.get(attachment);
+        if (existingConfiguration) {
+            return existingConfiguration;
+        }
+        const configuration = this.attachmentConfigurationService.getVideoAttachmentConfiguration(attachment, element);
+        this.attachmentConfigurations.set(attachment, configuration);
+        return configuration;
     }
     getCardAttachmentConfiguration(attachment) {
+        const existingConfiguration = this.attachmentConfigurations.get(attachment);
+        if (existingConfiguration) {
+            return existingConfiguration;
+        }
         if (attachment.type === 'giphy') {
             return this.attachmentConfigurationService.getGiphyAttachmentConfiguration(attachment);
         }
         else {
-            return this.attachmentConfigurationService.getScrapedImageAttachmentConfiguration(attachment);
+            const configuration = this.attachmentConfigurationService.getScrapedImageAttachmentConfiguration(attachment);
+            this.attachmentConfigurations.set(attachment, configuration);
+            return configuration;
         }
     }
     get isImageModalPrevButtonVisible() {
@@ -2550,7 +2658,7 @@ class AttachmentListComponent {
     }
 }
 AttachmentListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: AttachmentListComponent, deps: [{ token: CustomTemplatesService }, { token: ChannelService }, { token: AttachmentConfigurationService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
-AttachmentListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AttachmentListComponent, selector: "stream-attachment-list", inputs: { messageId: "messageId", parentMessageId: "parentMessageId", attachments: "attachments" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"orderedAttachments.length > 0\" class=\"str-chat__attachment-list\">\n  <ng-container\n    *ngFor=\"let attachment of orderedAttachments; trackBy: trackById\"\n  >\n    <div\n      data-testclass=\"attachment-container\"\n      class=\"str-chat__message-attachment str-chat__message-attachment--{{\n        attachment.type\n      }}\"\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      <img\n        *ngIf=\"\n          isImage(attachment) &&\n          getImageAttachmentConfiguration(\n            attachment,\n            'single'\n          ) as attachmentConfiguration\n        \"\n        class=\"str-chat__message-attachment--img\"\n        data-testclass=\"image\"\n        [src]=\"attachmentConfiguration.url\"\n        [alt]=\"attachment?.fallback\"\n        (click)=\"openImageModal([attachment])\"\n        (keyup.enter)=\"openImageModal([attachment])\"\n        [ngStyle]=\"{\n          height: attachmentConfiguration.height,\n          width: attachmentConfiguration.width\n        }\"\n      />\n      <div\n        class=\"str-chat__gallery\"\n        data-testid=\"image-gallery\"\n        *ngIf=\"isGallery(attachment)\"\n        [class.str-chat__gallery--square]=\"(attachment?.images)!.length > 3\"\n        [class.str-chat__gallery-two-rows]=\"(attachment?.images)!.length > 2\"\n      >\n        <ng-container\n          *ngFor=\"\n            let galleryImage of attachment.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(attachment.images!, index)\"\n            (keyup.enter)=\"openImageModal(attachment.images!, index)\"\n            [class.str-chat__message-attachment--svg-image]=\"\n              isSvg(galleryImage)\n            \"\n          >\n            <img\n              *ngIf=\"\n                getImageAttachmentConfiguration(\n                  galleryImage,\n                  'gallery'\n                ) as attachmentConfiguration\n              \"\n              [src]=\"attachmentConfiguration.url\"\n              [alt]=\"galleryImage.fallback\"\n              [ngStyle]=\"{\n                height: attachmentConfiguration.height,\n                width: attachmentConfiguration.width\n              }\"\n            />\n          </button>\n          <button\n            *ngIf=\"\n              index === 3 &&\n              !isLast &&\n              getImageAttachmentConfiguration(\n                galleryImage,\n                'gallery'\n              ) as attachmentConfiguration\n            \"\n            class=\"str-chat__gallery-placeholder\"\n            data-testclass=\"gallery-image\"\n            data-testid=\"more-image-button\"\n            (click)=\"openImageModal(attachment.images!, index)\"\n            (keyup.enter)=\"openImageModal(attachment.images!, index)\"\n            [class.str-chat__message-attachment--svg-image]=\"\n              isSvg(galleryImage)\n            \"\n            [ngStyle]=\"{\n              'background-image': 'url(' + attachmentConfiguration.url + ')',\n              height: attachmentConfiguration.height,\n              width: attachmentConfiguration.width\n            }\"\n          >\n            <p\n              [innerHTML]=\"\n                'streamChat.{{ imageCount }} more'\n                  | translate: { imageCount: attachment!.images!.length - 4 }\n              \"\n            ></p>\n          </button>\n        </ng-container>\n      </div>\n      <div\n        class=\"str-chat__player-wrapper\"\n        *ngIf=\"\n          isVideo(attachment) &&\n          getVideoAttachmentConfiguration(attachment) as attachmentConfiguration\n        \"\n      >\n        <video\n          class=\"str-chat__video-angular\"\n          controls\n          data-testclass=\"video-attachment\"\n          [src]=\"attachmentConfiguration.url\"\n          [ngStyle]=\"{\n            height: attachmentConfiguration.height,\n            width: attachmentConfiguration.width\n          }\"\n        ></video>\n      </div>\n      <div\n        *ngIf=\"isFile(attachment)\"\n        class=\"\n          str-chat__message-attachment-file--item\n          str-chat-angular__message-attachment-file-single\n        \"\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              {{ attachment.title }}\n            </div>\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(attachment)\"\n            >{{ getFileSize(attachment) }}</span\n          >\n        </div>\n      </div>\n      <div\n        *ngIf=\"\n          isCard(attachment) &&\n          getCardAttachmentConfiguration(attachment) as attachmentConfiguration\n        \"\n        class=\"str-chat__message-attachment-card str-chat__message-attachment-card--{{\n          attachment.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=\"attachment.title\"\n              data-testclass=\"card-title\"\n              class=\"str-chat__message-attachment-card--title\"\n            >\n              {{ attachment.title }}\n            </div>\n            <div\n              *ngIf=\"attachment.text\"\n              class=\"str-chat__message-attachment-card--text\"\n              data-testclass=\"card-text\"\n            >\n              {{ attachment.text }}\n            </div>\n            <a\n              class=\"str-chat__message-attachment-card--url\"\n              *ngIf=\"attachment.title_link || attachment.og_scrape_url\"\n              data-testclass=\"url-link\"\n              noopener\n              noreferrer\n              href=\"{{ attachment.title_link || attachment.og_scrape_url }}\"\n              target=\"_blank\"\n            >\n              {{ trimUrl(attachment.title_link || attachment.og_scrape_url) }}\n            </a>\n          </div>\n        </div>\n      </div>\n      <div\n        class=\"str-chat__message-attachment-actions\"\n        *ngIf=\"attachment.actions && attachment.actions.length > 0\"\n      >\n        <div class=\"str-chat__message-attachment-actions-form\">\n          <button\n            *ngFor=\"\n              let action of attachment.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    </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      *ngIf=\"\n        getImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          'carousel'\n        ) as attachmentConfiguration\n      \"\n      class=\"\n        stream-chat-angular__image-modal-image\n        str-chat__image-carousel-image\n      \"\n      data-testid=\"modal-image\"\n      [src]=\"attachmentConfiguration.url\"\n      [alt]=\"imagesToView[imagesToViewCurrentIndex].fallback\"\n      [ngStyle]=\"{\n        width: attachmentConfiguration.width,\n        height: attachmentConfiguration.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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i6.TranslatePipe, "async": i4.AsyncPipe } });
+AttachmentListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AttachmentListComponent, selector: "stream-attachment-list", inputs: { messageId: "messageId", parentMessageId: "parentMessageId", attachments: "attachments" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, 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      <img\n        #imgElement\n        *ngIf=\"isImage(attachment)\"\n        class=\"str-chat__message-attachment--img\"\n        data-testclass=\"image\"\n        [src]=\"\n          getImageAttachmentConfiguration(attachment, 'single', imgElement).url\n        \"\n        [alt]=\"attachment?.fallback\"\n        (click)=\"openImageModal([attachment])\"\n        (keyup.enter)=\"openImageModal([attachment])\"\n        [ngStyle]=\"{\n          height: getImageAttachmentConfiguration(\n            attachment,\n            'single',\n            imgElement\n          ).height,\n          width: getImageAttachmentConfiguration(\n            attachment,\n            'single',\n            imgElement\n          ).width\n        }\"\n      />\n      <div\n        class=\"str-chat__gallery\"\n        data-testid=\"image-gallery\"\n        *ngIf=\"isGallery(attachment)\"\n        [class.str-chat__gallery--square]=\"(attachment?.images)!.length > 3\"\n        [class.str-chat__gallery-two-rows]=\"(attachment?.images)!.length > 2\"\n      >\n        <ng-container\n          *ngFor=\"\n            let galleryImage of attachment.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(attachment.images!, index)\"\n            (keyup.enter)=\"openImageModal(attachment.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              [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(attachment.images!, index)\"\n            (keyup.enter)=\"openImageModal(attachment.images!, index)\"\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            }\"\n          >\n            <p\n              [innerHTML]=\"\n                'streamChat.{{ imageCount }} more'\n                  | translate: { imageCount: attachment!.images!.length - 4 }\n              \"\n            ></p>\n          </button>\n        </ng-container>\n      </div>\n      <div class=\"str-chat__player-wrapper\" *ngIf=\"isVideo(attachment)\">\n        <video\n          #videoElement\n          class=\"str-chat__video-angular\"\n          controls\n          data-testclass=\"video-attachment\"\n          [src]=\"getVideoAttachmentConfiguration(attachment, videoElement).url\"\n          [ngStyle]=\"{\n            height: getVideoAttachmentConfiguration(attachment, videoElement)\n              .height,\n            width: getVideoAttachmentConfiguration(attachment, videoElement)\n              .width\n          }\"\n          [poster]=\"\n            getVideoAttachmentConfiguration(attachment, videoElement).thumbUrl\n          \"\n        ></video>\n      </div>\n      <div\n        *ngIf=\"isFile(attachment)\"\n        class=\"\n          str-chat__message-attachment-file--item\n          str-chat-angular__message-attachment-file-single\n        \"\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              {{ attachment.title }}\n            </div>\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(attachment)\"\n            >{{ getFileSize(attachment) }}</span\n          >\n        </div>\n      </div>\n      <div\n        *ngIf=\"\n          isCard(attachment) &&\n          getCardAttachmentConfiguration(attachment) as attachmentConfiguration\n        \"\n        class=\"str-chat__message-attachment-card str-chat__message-attachment-card--{{\n          attachment.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=\"attachment.title\"\n              data-testclass=\"card-title\"\n              class=\"str-chat__message-attachment-card--title\"\n            >\n              {{ attachment.title }}\n            </div>\n            <div\n              *ngIf=\"attachment.text\"\n              class=\"str-chat__message-attachment-card--text\"\n              data-testclass=\"card-text\"\n            >\n              {{ attachment.text }}\n            </div>\n            <a\n              class=\"str-chat__message-attachment-card--url\"\n              *ngIf=\"attachment.title_link || attachment.og_scrape_url\"\n              data-testclass=\"url-link\"\n              noopener\n              noreferrer\n              href=\"{{ attachment.title_link || attachment.og_scrape_url }}\"\n              target=\"_blank\"\n            >\n              {{ trimUrl(attachment.title_link || attachment.og_scrape_url) }}\n            </a>\n          </div>\n        </div>\n      </div>\n      <div\n        class=\"str-chat__message-attachment-actions\"\n        *ngIf=\"attachment.actions && attachment.actions.length > 0\"\n      >\n        <div class=\"str-chat__message-attachment-actions-form\">\n          <button\n            *ngFor=\"\n              let action of attachment.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    </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      [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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i6.TranslatePipe, "async": i4.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: AttachmentListComponent, decorators: [{
             type: Component,
             args: [{
@@ -3777,8 +3885,14 @@ class MessageComponent {
         this.subscriptions.push(this.customTemplatesService.messageReactionsTemplate$.subscribe((template) => (this.messageReactionsTemplate = template)));
     }
     ngOnChanges(changes) {
+        var _a, _b;
         if (changes.message) {
             this.createMessageParts();
+            const originalAttachments = (_b = (_a = this.message) === null || _a === void 0 ? void 0 : _a.quoted_message) === null || _b === void 0 ? void 0 : _b.attachments;
+            this.quotedMessageAttachments =
+                originalAttachments && originalAttachments.length
+                    ? [originalAttachments[0]]
+                    : [];
         }
         if (changes.enabledMessageActions) {
             this.canReactToMessage =
@@ -3855,13 +3969,6 @@ class MessageComponent {
         return (this.canReceiveReadEvents !== false &&
             this.enabledMessageActions.indexOf('read-events') !== -1);
     }
-    get quotedMessageAttachments() {
-        var _a, _b;
-        const originalAttachments = (_b = (_a = this.message) === null || _a === void 0 ? void 0 : _a.quoted_message) === null || _b === void 0 ? void 0 : _b.attachments;
-        return originalAttachments && originalAttachments.length
-            ? [originalAttachments[0]]
-            : [];
-    }
     getAttachmentListContext() {
         var _a, _b, _c;
         return {
@@ -4605,7 +4712,7 @@ class MessageListComponent {
                     (((_b = this.parentMessageElement) === null || _b === void 0 ? void 0 : _b.nativeElement.clientHeight) || 0))) {
             position = 'top';
         }
-        else if (Math.round(this.scrollContainer.nativeElement.scrollTop) +
+        else if (Math.ceil(this.scrollContainer.nativeElement.scrollTop) +
             this.scrollContainer.nativeElement.clientHeight >=
             this.scrollContainer.nativeElement.scrollHeight) {
             position = 'bottom';