stream-chat-angular 4.1.0 → 4.2.0

package/assets/version.d.ts

@@ -1 +1 @@
-export declare const version = "4.1.0";
+export declare const version = "4.2.0";

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

@@ -355,7 +355,7 @@
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
-    var version = '4.1.0';
+    var 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.
@@ -1156,10 +1156,10 @@
                             return [4 /*yield*/, Promise.allSettled(uploads.map(function (upload) { return 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); }))];
                         case 1:
                             uploadResults = _h.sent();
                             uploadResults.forEach(function (uploadResult, i) {
@@ -1171,6 +1171,8 @@
                                         type: 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 {
@@ -2234,6 +2236,7 @@
                     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;
             });
@@ -2266,6 +2269,7 @@
                             size: attachment.file_size,
                         },
                         type: attachment.type,
+                        thumb_url: attachment.thumb_url,
                     });
                 }
             });
@@ -2310,6 +2314,7 @@
                                 }
                                 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'
@@ -2335,30 +2340,38 @@
             }], 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.
      */
     var AttachmentConfigurationService = /** @class */ (function () {
         function AttachmentConfigurationService() {
+            /**
+             * 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.
          */
-        AttachmentConfigurationService.prototype.getImageAttachmentConfiguration = function (attachment, location) {
+        AttachmentConfigurationService.prototype.getImageAttachmentConfiguration = function (attachment, location, element) {
             if (this.customImageAttachmentConfigurationHandler) {
-                return this.customImageAttachmentConfigurationHandler(attachment, location);
+                return this.customImageAttachmentConfigurationHandler(attachment, location, element);
+            }
+            var url = new URL((attachment.img_url ||
+                attachment.thumb_url ||
+                attachment.image_url ||
+                ''));
+            var _b = this.getSizingRestrictions(url, element), sizeRestriction = _b.sizeRestriction, height = _b.height;
+            if (sizeRestriction) {
+                // Apply 2x for retina displays
+                sizeRestriction.height *= 2;
+                sizeRestriction.width *= 2;
+                this.addResizingParamsToUrl(sizeRestriction, url);
             }
-            var 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: height,
             };
@@ -2366,15 +2379,34 @@
         /**
          * 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.
          */
-        AttachmentConfigurationService.prototype.getVideoAttachmentConfiguration = function (attachment) {
+        AttachmentConfigurationService.prototype.getVideoAttachmentConfiguration = function (attachment, element) {
             if (this.customVideoAttachmentConfigurationHandler) {
-                return this.customVideoAttachmentConfigurationHandler(attachment);
+                return this.customVideoAttachmentConfigurationHandler(attachment, element);
+            }
+            var attachmentHeight = "";
+            var thumbUrl = undefined;
+            if (attachment.thumb_url && this.shouldGenerateVideoThumbnail) {
+                var url = new URL(attachment.thumb_url);
+                var _b = this.getSizingRestrictions(url, element), sizeRestriction = _b.sizeRestriction, height = _b.height;
+                if (sizeRestriction) {
+                    sizeRestriction.height *= 2;
+                    sizeRestriction.width *= 2;
+                    this.addResizingParamsToUrl(sizeRestriction, url);
+                }
+                thumbUrl = url.href;
+                attachmentHeight = height;
+            }
+            else {
+                var cssSizeRestriction = this.getCSSSizeRestriction(element);
+                attachmentHeight = (cssSizeRestriction.maxHeight || cssSizeRestriction.height || '') + "px";
             }
             return {
                 url: attachment.asset_url || '',
-                width: '100%',
-                height: '100%',
+                width: '',
+                height: attachmentHeight,
+                thumbUrl: thumbUrl,
             };
         };
         /**
@@ -2407,6 +2439,52 @@
                 height: '', // Set from CSS
             };
         };
+        AttachmentConfigurationService.prototype.addResizingParamsToUrl = function (sizeRestriction, url) {
+            url.searchParams.set('h', sizeRestriction.height.toString());
+            url.searchParams.set('w', sizeRestriction.width.toString());
+        };
+        AttachmentConfigurationService.prototype.getSizingRestrictions = function (url, htmlElement) {
+            var urlParams = url.searchParams;
+            var originalHeight = Number(urlParams.get('oh')) || 1;
+            var originalWidth = Number(urlParams.get('ow')) || 1;
+            var cssSizeRestriction = this.getCSSSizeRestriction(htmlElement);
+            var sizeRestriction;
+            var height = '';
+            if ((cssSizeRestriction.maxHeight || cssSizeRestriction.height) &&
+                cssSizeRestriction.maxWidth) {
+                sizeRestriction = this.getSizeRestrictions(originalHeight, originalWidth, (cssSizeRestriction.maxHeight || cssSizeRestriction.height), cssSizeRestriction.maxWidth);
+                if (cssSizeRestriction.maxHeight) {
+                    var 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: sizeRestriction, height: height };
+        };
+        AttachmentConfigurationService.prototype.getSizeRestrictions = function (originalHeight, originalWidth, maxHeight, maxWidth) {
+            return {
+                height: Math.round(Math.max(maxHeight, (maxWidth / originalWidth) * originalHeight)),
+                width: Math.round(Math.max(maxHeight, (maxWidth / originalHeight) * originalWidth)),
+            };
+        };
+        AttachmentConfigurationService.prototype.getCSSSizeRestriction = function (htmlElement) {
+            var computedStylesheet = getComputedStyle(htmlElement);
+            var height = this.getValueRepresentationOfCSSProperty(computedStylesheet.getPropertyValue('height'));
+            var maxHeight = this.getValueRepresentationOfCSSProperty(computedStylesheet.getPropertyValue('max-height'));
+            var maxWidth = this.getValueRepresentationOfCSSProperty(computedStylesheet.getPropertyValue('max-width'));
+            return { height: height, maxHeight: maxHeight, maxWidth: maxWidth };
+        };
+        AttachmentConfigurationService.prototype.getValueRepresentationOfCSSProperty = function (property) {
+            return Number(property.replace('px', '')) || undefined;
+        };
         return AttachmentConfigurationService;
     }());
     AttachmentConfigurationService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AttachmentConfigurationService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
@@ -3138,22 +3216,29 @@
             this.orderedAttachments = [];
             this.imagesToView = [];
             this.imagesToViewCurrentIndex = 0;
+            this.attachmentConfigurations = new Map();
             this.themeVersion = themeService.themeVersion;
         }
-        AttachmentListComponent.prototype.ngOnChanges = function () {
+        AttachmentListComponent.prototype.ngOnChanges = function (changes) {
             var _a;
             var _this = this;
-            var images = this.attachments.filter(this.isImage);
-            var containsGallery = images.length >= 2;
-            this.orderedAttachments = __spreadArray(__spreadArray(__spreadArray([], __read((containsGallery ? this.createGallery(images) : images))), __read(this.attachments.filter(function (a) { return _this.isVideo(a); }))), __read(this.attachments.filter(function (a) { return _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) {
-                (_a = this.orderedAttachments).push.apply(_a, __spreadArray([], __read(this.attachments.filter(function (a) { return _this.isCard(a); }))));
+            if (changes.attachments) {
+                var images = this.attachments.filter(this.isImage);
+                var containsGallery = images.length >= 2;
+                this.orderedAttachments = __spreadArray(__spreadArray(__spreadArray([], __read((containsGallery ? this.createGallery(images) : images))), __read(this.attachments.filter(function (a) { return _this.isVideo(a); }))), __read(this.attachments.filter(function (a) { return _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) {
+                    (_a = this.orderedAttachments).push.apply(_a, __spreadArray([], __read(this.attachments.filter(function (a) { return _this.isCard(a); }))));
+                }
             }
         };
-        AttachmentListComponent.prototype.trackById = function (index) {
-            return index;
+        AttachmentListComponent.prototype.trackByUrl = function (_, attachment) {
+            return (attachment.image_url ||
+                attachment.img_url ||
+                attachment.asset_url ||
+                attachment.thumb_url);
         };
         AttachmentListComponent.prototype.isImage = function (attachment) {
             return isImageAttachment(attachment);
@@ -3222,18 +3307,39 @@
         AttachmentListComponent.prototype.trackByImageUrl = function (_, item) {
             return item.image_url || item.img_url || item.thumb_url;
         };
-        AttachmentListComponent.prototype.getImageAttachmentConfiguration = function (attachment, type) {
-            return this.attachmentConfigurationService.getImageAttachmentConfiguration(attachment, type);
+        AttachmentListComponent.prototype.getImageAttachmentConfiguration = function (attachment, type, element) {
+            var existingConfiguration = this.attachmentConfigurations.get(attachment);
+            if (existingConfiguration) {
+                return existingConfiguration;
+            }
+            var configuration = this.attachmentConfigurationService.getImageAttachmentConfiguration(attachment, type, element);
+            this.attachmentConfigurations.set(attachment, configuration);
+            return configuration;
         };
-        AttachmentListComponent.prototype.getVideoAttachmentConfiguration = function (attachment) {
-            return this.attachmentConfigurationService.getVideoAttachmentConfiguration(attachment);
+        AttachmentListComponent.prototype.getCarouselImageAttachmentConfiguration = function (attachment, element) {
+            return this.attachmentConfigurationService.getImageAttachmentConfiguration(attachment, 'carousel', element);
+        };
+        AttachmentListComponent.prototype.getVideoAttachmentConfiguration = function (attachment, element) {
+            var existingConfiguration = this.attachmentConfigurations.get(attachment);
+            if (existingConfiguration) {
+                return existingConfiguration;
+            }
+            var configuration = this.attachmentConfigurationService.getVideoAttachmentConfiguration(attachment, element);
+            this.attachmentConfigurations.set(attachment, configuration);
+            return configuration;
         };
         AttachmentListComponent.prototype.getCardAttachmentConfiguration = function (attachment) {
+            var existingConfiguration = this.attachmentConfigurations.get(attachment);
+            if (existingConfiguration) {
+                return existingConfiguration;
+            }
             if (attachment.type === 'giphy') {
                 return this.attachmentConfigurationService.getGiphyAttachmentConfiguration(attachment);
             }
             else {
-                return this.attachmentConfigurationService.getScrapedImageAttachmentConfiguration(attachment);
+                var configuration = this.attachmentConfigurationService.getScrapedImageAttachmentConfiguration(attachment);
+                this.attachmentConfigurations.set(attachment, configuration);
+                return configuration;
             }
         };
         Object.defineProperty(AttachmentListComponent.prototype, "isImageModalPrevButtonVisible", {
@@ -3264,7 +3370,7 @@
         return AttachmentListComponent;
     }());
     AttachmentListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AttachmentListComponent, deps: [{ token: CustomTemplatesService }, { token: ChannelService }, { token: AttachmentConfigurationService }, { token: ThemeService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AttachmentListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AttachmentListComponent, selector: "stream-attachment-list", inputs: { messageId: "messageId", parentMessageId: "parentMessageId", attachments: "attachments" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div *ngIf=\"orderedAttachments.length > 0\" class=\"str-chat__attachment-list\">\n  <ng-container\n    *ngFor=\"let attachment of orderedAttachments; trackBy: 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i6__namespace.TranslatePipe, "async": i4__namespace.AsyncPipe } });
+    AttachmentListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AttachmentListComponent, selector: "stream-attachment-list", inputs: { messageId: "messageId", parentMessageId: "parentMessageId", attachments: "attachments" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div *ngIf=\"orderedAttachments.length > 0\" class=\"str-chat__attachment-list\">\n  <ng-container\n    *ngFor=\"let attachment of orderedAttachments; trackBy: trackByUrl\"\n  >\n    <div\n      data-testclass=\"attachment-container\"\n      class=\"str-chat__message-attachment str-chat__message-attachment--{{\n        attachment.type\n      }} str-chat__message-attachment-dynamic-size\"\n      [class.str-chat__message-attachment--card]=\"isCard(attachment)\"\n      [class.str-chat-angular__message-attachment-file-single]=\"\n        isFile(attachment)\n      \"\n      [class.str-chat__message-attachment-with-actions]=\"\n        attachment.actions && attachment.actions.length > 0\n      \"\n      [class.str-chat__message-attachment--svg-image]=\"isSvg(attachment)\"\n    >\n      <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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i6__namespace.TranslatePipe, "async": i4__namespace.AsyncPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AttachmentListComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -4646,8 +4752,14 @@
             this.subscriptions.push(this.customTemplatesService.messageReactionsTemplate$.subscribe(function (template) { return (_this.messageReactionsTemplate = template); }));
         };
         MessageComponent.prototype.ngOnChanges = function (changes) {
+            var _a, _b;
             if (changes.message) {
                 this.createMessageParts();
+                var 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 =
@@ -4777,17 +4889,6 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(MessageComponent.prototype, "quotedMessageAttachments", {
-            get: function () {
-                var _a, _b;
-                var 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]]
-                    : [];
-            },
-            enumerable: false,
-            configurable: true
-        });
         MessageComponent.prototype.getAttachmentListContext = function () {
             var _a, _b, _c;
             return {
@@ -5564,7 +5665,7 @@
                         (((_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';