stream-chat-angular 3.0.0-beta.7 → 3.0.0

package/fesm2015/stream-chat-angular.js

@@ -1,6 +1,6 @@
 import { __awaiter } from 'tslib';
 import * as i0 from '@angular/core';
-import { Injectable, Component, Input, InjectionToken, EventEmitter, Directive, Output, ViewChild, Inject, HostBinding, NgModule } from '@angular/core';
+import { Injectable, Component, Input, EventEmitter, Output, ViewChild, InjectionToken, Directive, Inject, HostBinding, NgModule } from '@angular/core';
 import { BehaviorSubject, ReplaySubject, combineLatest, Subject, timer, of } from 'rxjs';
 import { StreamChat } from 'stream-chat';
 import { map, shareReplay, filter, first, take, tap, catchError, startWith, distinctUntilChanged, debounceTime } from 'rxjs/operators';
@@ -17,7 +17,7 @@ import transliterate from '@stream-io/transliterate';
 import * as i7 from 'angular-mentions';
 import { MentionModule } from 'angular-mentions';
 
-const version = '3.0.0-beta.7';
+const version = '3.0.0';
 
 /**
  * The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](../components/NotificationListComponent.mdx) component displays the currently active notifications.
@@ -253,7 +253,7 @@ const getReadBy = (message, channel) => {
 };
 
 /**
- * The `ChannelService` provides data and interaction for the channel list and message list. TEST
+ * The `ChannelService` provides data and interaction for the channel list and message list.
  */
 class ChannelService {
     constructor(chatClientService, ngZone) {
@@ -346,6 +346,21 @@ class ChannelService {
         this.activeThreadMessagesSubject.next([]);
         this.messageToQuoteSubject.next(undefined);
     }
+    /**
+     * Deselects the currently active (if any) channel
+     */
+    deselectActiveChannel() {
+        const activeChannel = this.activeChannelSubject.getValue();
+        if (!activeChannel) {
+            return;
+        }
+        this.activeChannelMessagesSubject.next([]);
+        this.activeChannelSubject.next(undefined);
+        this.activeParentMessageIdSubject.next(undefined);
+        this.activeThreadMessagesSubject.next([]);
+        this.latestMessageDateByUserByChannelsSubject.next({});
+        this.selectMessageToQuote(undefined);
+    }
     /**
      * Sets the given `message` as an active parent message. If `undefined` is provided, it will deleselect the current parent message.
      * @param message
@@ -416,8 +431,10 @@ class ChannelService {
      * @param filters
      * @param sort
      * @param options
+     * @param shouldSetActiveChannel Decides if the first channel in the result should be made as an active channel, or no channel should be marked as active
+     * @returns the list of channels found by the query
      */
-    init(filters, sort, options) {
+    init(filters, sort, options, shouldSetActiveChannel = true) {
         return __awaiter(this, void 0, void 0, function* () {
             this.filters = filters;
             this.options = options || {
@@ -429,21 +446,17 @@ class ChannelService {
                 message_limit: this.messagePageSize,
             };
             this.sort = sort || { last_message_at: -1, updated_at: -1 };
-            yield this.queryChannels();
+            const result = yield this.queryChannels(shouldSetActiveChannel);
             this.chatClientService.events$.subscribe((notification) => void this.handleNotification(notification));
+            return result;
         });
     }
     /**
      * Resets the `activeChannel$`, `channels$` and `activeChannelMessages$` Observables. Useful when disconnecting a chat user, use in combination with [`disconnectUser`](./ChatClientService.mdx/#disconnectuser).
      */
     reset() {
-        this.activeChannelMessagesSubject.next([]);
-        this.activeChannelSubject.next(undefined);
-        this.activeParentMessageIdSubject.next(undefined);
-        this.activeThreadMessagesSubject.next([]);
+        this.deselectActiveChannel();
         this.channelsSubject.next(undefined);
-        this.latestMessageDateByUserByChannelsSubject.next({});
-        this.selectMessageToQuote(undefined);
     }
     /**
      * Loads the next page of channels. The page size can be set in the [query option](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript#query-options) object.
@@ -451,7 +464,7 @@ class ChannelService {
     loadMoreChannels() {
         return __awaiter(this, void 0, void 0, function* () {
             this.options.offset = this.channels.length;
-            yield this.queryChannels();
+            yield this.queryChannels(false);
         });
     }
     /**
@@ -535,8 +548,12 @@ class ChannelService {
             const result = [];
             const channel = this.activeChannelSubject.getValue();
             const uploadResults = yield Promise.allSettled(uploads.map((upload) => upload.type === 'image'
-                ? channel.sendImage(upload.file)
-                : channel.sendFile(upload.file)));
+                ? this.customImageUploadRequest
+                    ? this.customImageUploadRequest(upload.file, channel)
+                    : channel.sendImage(upload.file)
+                : this.customFileUploadRequest
+                    ? this.customFileUploadRequest(upload.file, channel)
+                    : channel.sendFile(upload.file)));
             uploadResults.forEach((uploadResult, i) => {
                 const file = uploads[i].file;
                 const type = uploads[i].type;
@@ -563,8 +580,12 @@ class ChannelService {
         return __awaiter(this, void 0, void 0, function* () {
             const channel = this.activeChannelSubject.getValue();
             yield (attachmentUpload.type === 'image'
-                ? channel.deleteImage(attachmentUpload.url)
-                : channel.deleteFile(attachmentUpload.url));
+                ? this.customImageDeleteRequest
+                    ? this.customImageDeleteRequest(attachmentUpload.url, channel)
+                    : channel.deleteImage(attachmentUpload.url)
+                : this.customFileDeleteRequest
+                    ? this.customFileDeleteRequest(attachmentUpload.url, channel)
+                    : channel.deleteFile(attachmentUpload.url));
         });
     }
     /**
@@ -865,20 +886,24 @@ class ChannelService {
         this.activeChannelSubscriptions.forEach((s) => s.unsubscribe());
         this.activeChannelSubscriptions = [];
     }
-    queryChannels() {
+    queryChannels(shouldSetActiveChannel) {
         return __awaiter(this, void 0, void 0, function* () {
             try {
                 const channels = yield this.chatClientService.chatClient.queryChannels(this.filters, this.sort, this.options);
                 channels.forEach((c) => this.watchForChannelEvents(c));
                 const prevChannels = this.channelsSubject.getValue() || [];
                 this.channelsSubject.next([...prevChannels, ...channels]);
-                if (channels.length > 0 && !this.activeChannelSubject.getValue()) {
+                if (channels.length > 0 &&
+                    !this.activeChannelSubject.getValue() &&
+                    shouldSetActiveChannel) {
                     this.setAsActiveChannel(channels[0]);
                 }
                 this.hasMoreChannelsSubject.next(channels.length >= this.options.limit);
+                return channels;
             }
             catch (error) {
                 this.channelsSubject.error(error);
+                throw error;
             }
         });
     }
@@ -1244,10 +1269,14 @@ class AttachmentService {
             }
             const imageFiles = [];
             const dataFiles = [];
+            const videoFiles = [];
             Array.from(fileList).forEach((file) => {
                 if (isImageFile(file)) {
                     imageFiles.push(file);
                 }
+                else if (file.type.startsWith('video/')) {
+                    videoFiles.push(file);
+                }
                 else {
                     dataFiles.push(file);
                 }
@@ -1259,6 +1288,11 @@ class AttachmentService {
                     state: 'uploading',
                     type: 'image',
                 })),
+                ...videoFiles.map((file) => ({
+                    file,
+                    state: 'uploading',
+                    type: 'video',
+                })),
                 ...dataFiles.map((file) => ({
                     file,
                     state: 'uploading',
@@ -1296,19 +1330,25 @@ class AttachmentService {
     deleteAttachment(upload) {
         return __awaiter(this, void 0, void 0, function* () {
             const attachmentUploads = this.attachmentUploadsSubject.getValue();
+            let result;
             if (upload.state === 'success') {
                 try {
                     yield this.channelService.deleteAttachment(upload);
-                    attachmentUploads.splice(attachmentUploads.indexOf(upload), 1);
+                    result = [...attachmentUploads];
+                    const index = attachmentUploads.indexOf(upload);
+                    result.splice(index, 1);
                 }
                 catch (error) {
+                    result = attachmentUploads;
                     this.notificationService.addTemporaryNotification('streamChat.Error deleting attachment');
                 }
             }
             else {
-                attachmentUploads.splice(attachmentUploads.indexOf(upload), 1);
+                result = [...attachmentUploads];
+                const index = attachmentUploads.indexOf(upload);
+                result.splice(index, 1);
             }
-            this.attachmentUploadsSubject.next([...attachmentUploads]);
+            this.attachmentUploadsSubject.next([...result]);
         });
     }
     /**
@@ -1390,9 +1430,9 @@ class AttachmentService {
     }
     uploadAttachments(uploads) {
         return __awaiter(this, void 0, void 0, function* () {
-            const attachmentUploads = this.attachmentUploadsSubject.getValue();
             this.attachmentUploadInProgressCounterSubject.next(this.attachmentUploadInProgressCounterSubject.getValue() + 1);
             const result = yield this.channelService.uploadAttachments(uploads);
+            const attachmentUploads = this.attachmentUploadsSubject.getValue();
             result.forEach((r) => {
                 const upload = attachmentUploads.find((upload) => upload.file === r.file);
                 if (!upload) {
@@ -1861,6 +1901,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
                 type: Input
             }] } });
 
+/**
+ * The `Modal` component displays its content in an overlay. The modal can be closed with a close button, if the user clicks outside of the modal content, or if the escape button is pressed. The modal can also be closed from outside.
+ */
+class ModalComponent {
+    constructor() {
+        /**
+         * If `true` the modal will be displayed, if `false` the modal will be hidden
+         */
+        this.isOpen = false;
+        /**
+         * Emits `true` if the modal becomes visible, and `false` if the modal is closed.
+         */
+        this.isOpenChange = new EventEmitter();
+        this.watchForEscPress = (event) => {
+            if (event.key === 'Escape') {
+                this.close();
+            }
+        };
+        this.stopWatchForEscPress = () => {
+            window.removeEventListener('keyup', this.watchForEscPress);
+        };
+        this.watchForOutsideClicks = (event) => {
+            var _a;
+            if (!((_a = this.innerContainer) === null || _a === void 0 ? void 0 : _a.nativeElement.contains(event.target))) {
+                this.close();
+            }
+        };
+    }
+    ngOnChanges(changes) {
+        if (changes.isOpen) {
+            if (this.isOpen) {
+                window.addEventListener('keyup', this.watchForEscPress);
+                setTimeout(() => window.addEventListener('click', this.watchForOutsideClicks), 0);
+            }
+            else {
+                this.stopWatchForOutsideClicks();
+                this.stopWatchForEscPress();
+            }
+        }
+    }
+    close() {
+        this.isOpen = false;
+        this.isOpenChange.emit(false);
+        this.stopWatchForOutsideClicks();
+        this.stopWatchForEscPress();
+    }
+    stopWatchForOutsideClicks() {
+        window.removeEventListener('click', this.watchForOutsideClicks);
+    }
+}
+ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ModalComponent, selector: "stream-modal", inputs: { isOpen: "isOpen", content: "content" }, outputs: { isOpenChange: "isOpenChange" }, viewQueries: [{ propertyName: "innerContainer", first: true, predicate: ["modalInner"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  data-testid=\"modal\"\n  class=\"str-chat__modal str-chat__modal--{{ isOpen ? 'open' : 'close' }}\"\n>\n  <div\n    data-testid=\"close\"\n    class=\"str-chat__modal__close-button\"\n    (click)=\"close()\"\n    (keyup.enter)=\"close()\"\n    translate\n  >\n    streamChat.Close\n    <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n  </div>\n  <div class=\"str-chat__modal__inner\" #modalInner>\n    <ng-container *ngIf=\"content; else elseContent\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </ng-container>\n    <ng-template #elseContent>\n      <ng-content></ng-content>\n    </ng-template>\n  </div>\n</div>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }], directives: [{ type: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ModalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'stream-modal',
+                    templateUrl: './modal.component.html',
+                    styles: [],
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { isOpen: [{
+                type: Input
+            }], content: [{
+                type: Input
+            }], isOpenChange: [{
+                type: Output
+            }], innerContainer: [{
+                type: ViewChild,
+                args: ['modalInner']
+            }] } });
+
 const textareaInjectionToken = new InjectionToken('textareaInjectionToken');
 
 class TextareaDirective {
@@ -2003,76 +2113,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-/**
- * The `Modal` component displays its content in an overlay. The modal can be closed with a close button, if the user clicks outside of the modal content, or if the escape button is pressed. The modal can also be closed from outside.
- */
-class ModalComponent {
-    constructor() {
-        /**
-         * If `true` the modal will be displayed, if `false` the modal will be hidden
-         */
-        this.isOpen = false;
-        /**
-         * Emits `true` if the modal becomes visible, and `false` if the modal is closed.
-         */
-        this.isOpenChange = new EventEmitter();
-        this.watchForEscPress = (event) => {
-            if (event.key === 'Escape') {
-                this.close();
-            }
-        };
-        this.stopWatchForEscPress = () => {
-            window.removeEventListener('keyup', this.watchForEscPress);
-        };
-        this.watchForOutsideClicks = (event) => {
-            var _a;
-            if (!((_a = this.innerContainer) === null || _a === void 0 ? void 0 : _a.nativeElement.contains(event.target))) {
-                this.close();
-            }
-        };
-    }
-    ngOnChanges(changes) {
-        if (changes.isOpen) {
-            if (this.isOpen) {
-                window.addEventListener('keyup', this.watchForEscPress);
-                setTimeout(() => window.addEventListener('click', this.watchForOutsideClicks), 0);
-            }
-            else {
-                this.stopWatchForOutsideClicks();
-                this.stopWatchForEscPress();
-            }
-        }
-    }
-    close() {
-        this.isOpen = false;
-        this.isOpenChange.emit(false);
-        this.stopWatchForOutsideClicks();
-        this.stopWatchForEscPress();
-    }
-    stopWatchForOutsideClicks() {
-        window.removeEventListener('click', this.watchForOutsideClicks);
-    }
-}
-ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ModalComponent, selector: "stream-modal", inputs: { isOpen: "isOpen", content: "content" }, outputs: { isOpenChange: "isOpenChange" }, viewQueries: [{ propertyName: "innerContainer", first: true, predicate: ["modalInner"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  data-testid=\"modal\"\n  class=\"str-chat__modal str-chat__modal--{{ isOpen ? 'open' : 'close' }}\"\n>\n  <div\n    data-testid=\"close\"\n    class=\"str-chat__modal__close-button\"\n    (click)=\"close()\"\n    (keyup.enter)=\"close()\"\n    translate\n  >\n    streamChat.Close\n    <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n  </div>\n  <div class=\"str-chat__modal__inner\" #modalInner>\n    <ng-container *ngIf=\"content; else elseContent\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </ng-container>\n    <ng-template #elseContent>\n      <ng-content></ng-content>\n    </ng-template>\n  </div>\n</div>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }], directives: [{ type: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ModalComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'stream-modal',
-                    templateUrl: './modal.component.html',
-                    styles: [],
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { isOpen: [{
-                type: Input
-            }], content: [{
-                type: Input
-            }], isOpenChange: [{
-                type: Output
-            }], innerContainer: [{
-                type: ViewChild,
-                args: ['modalInner']
-            }] } });
-
 /**
  * The `AttachmentList` compontent displays the attachments of a message
  */
@@ -2094,6 +2134,7 @@ class AttachmentListComponent {
         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.attachments.filter((a) => this.isCard(a)),
         ];
@@ -2110,6 +2151,12 @@ class AttachmentListComponent {
     isGallery(attachment) {
         return attachment.type === 'gallery';
     }
+    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
+        );
+    }
     isCard(attachment) {
         return (!attachment.type ||
             (attachment.type === 'image' && !this.isImage(attachment)) ||
@@ -2177,7 +2224,7 @@ class AttachmentListComponent {
     }
 }
 AttachmentListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: AttachmentListComponent, deps: [{ token: CustomTemplatesService }, { token: ImageLoadService }, { token: ChannelService }], 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", attachments: "attachments" }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngFor=\"let attachment of orderedAttachments; trackBy: trackById\">\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  >\n    <img\n      *ngIf=\"isImage(attachment)\"\n      class=\"str-chat__message-attachment--img\"\n      data-testclass=\"image\"\n      [src]=\"attachment.img_url || attachment.thumb_url || attachment.image_url\"\n      [alt]=\"attachment?.fallback\"\n      (load)=\"imageLoaded()\"\n      (click)=\"openImageModal([attachment])\"\n      (keyup.enter)=\"openImageModal([attachment])\"\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    >\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        >\n          <img\n            [src]=\"\n              galleryImage.img_url ||\n              galleryImage.thumb_url ||\n              galleryImage.image_url\n            \"\n            [alt]=\"galleryImage.fallback\"\n            (load)=\"imageLoaded()\"\n          />\n        </button>\n        <button\n          *ngIf=\"index === 3 && !isLast\"\n          class=\"str-chat__gallery-placeholder\"\n          data-testclass=\"gallery-image\"\n          (click)=\"openImageModal(attachment.images!, index)\"\n          (keyup.enter)=\"openImageModal(attachment.images!, index)\"\n          [ngStyle]=\"{\n            'background-image':\n              'url(' +\n              (galleryImage.img_url ||\n                galleryImage.thumb_url ||\n                galleryImage.image_url) +\n              ')'\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      *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        icon=\"file\"\n        [size]=\"30\"\n      ></stream-icon-placeholder>\n      <div class=\"str-chat__message-attachment-file--item-text\">\n        <a\n          data-testclass=\"file-link\"\n          download\n          href=\"{{ attachment.asset_url }}\"\n          target=\"_blank\"\n        >\n          {{ attachment.title }}\n        </a>\n        <span data-testclass=\"size\" *ngIf=\"hasFileSize(attachment)\">{{\n          getFileSize(attachment)\n        }}</span>\n      </div>\n    </div>\n    <div\n      *ngIf=\"isCard(attachment)\"\n      class=\"str-chat__message-attachment-card str-chat__message-attachment-card--{{\n        attachment.type\n      }}\"\n    >\n      <div\n        *ngIf=\"attachment.image_url || attachment.thumb_url\"\n        class=\"str-chat__message-attachment-card--header\"\n      >\n        <img\n          data-testclass=\"card-img\"\n          alt=\"{{ attachment.image_url || attachment.thumb_url }}\"\n          src=\"{{ attachment.image_url || attachment.thumb_url }}\"\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=\"let action of attachment.actions; trackBy: trackByActionValue\"\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\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    [isOpen]=\"isOpen\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n    [content]=\"content\"\n  >\n  </stream-modal>\n</ng-template>\n\n<ng-template #modalContent>\n  <div class=\"stream-chat-angular__image-modal\">\n    <button\n      class=\"stream-chat-angular__image-modal-stepper\"\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      class=\"stream-chat-angular__image-modal-image\"\n      data-testid=\"modal-image\"\n      [src]=\"\n        imagesToView[imagesToViewCurrentIndex].img_url ||\n        imagesToView[imagesToViewCurrentIndex].thumb_url ||\n        imagesToView[imagesToViewCurrentIndex].image_url\n      \"\n      [alt]=\"imagesToView[imagesToViewCurrentIndex].fallback\"\n    />\n    <button\n      class=\"stream-chat-angular__image-modal-stepper\"\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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i2.TranslatePipe, "async": i3.AsyncPipe } });
+AttachmentListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AttachmentListComponent, selector: "stream-attachment-list", inputs: { messageId: "messageId", attachments: "attachments" }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngFor=\"let attachment of orderedAttachments; trackBy: trackById\">\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  >\n    <img\n      *ngIf=\"isImage(attachment)\"\n      class=\"str-chat__message-attachment--img\"\n      data-testclass=\"image\"\n      [src]=\"attachment.img_url || attachment.thumb_url || attachment.image_url\"\n      [alt]=\"attachment?.fallback\"\n      (load)=\"imageLoaded()\"\n      (click)=\"openImageModal([attachment])\"\n      (keyup.enter)=\"openImageModal([attachment])\"\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    >\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        >\n          <img\n            [src]=\"\n              galleryImage.img_url ||\n              galleryImage.thumb_url ||\n              galleryImage.image_url\n            \"\n            [alt]=\"galleryImage.fallback\"\n            (load)=\"imageLoaded()\"\n          />\n        </button>\n        <button\n          *ngIf=\"index === 3 && !isLast\"\n          class=\"str-chat__gallery-placeholder\"\n          data-testclass=\"gallery-image\"\n          (click)=\"openImageModal(attachment.images!, index)\"\n          (keyup.enter)=\"openImageModal(attachment.images!, index)\"\n          [ngStyle]=\"{\n            'background-image':\n              'url(' +\n              (galleryImage.img_url ||\n                galleryImage.thumb_url ||\n                galleryImage.image_url) +\n              ')'\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    <video\n      *ngIf=\"isVideo(attachment)\"\n      controls\n      data-testclass=\"video-attachment\"\n      [src]=\"attachment.asset_url\"\n      style=\"\n        width: 100%;\n        max-width: 400px;\n        height: 300px;\n        border-radius: inherit;\n      \"\n    ></video>\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        icon=\"file\"\n        [size]=\"30\"\n      ></stream-icon-placeholder>\n      <div class=\"str-chat__message-attachment-file--item-text\">\n        <a\n          data-testclass=\"file-link\"\n          download\n          href=\"{{ attachment.asset_url }}\"\n          target=\"_blank\"\n        >\n          {{ attachment.title }}\n        </a>\n        <span data-testclass=\"size\" *ngIf=\"hasFileSize(attachment)\">{{\n          getFileSize(attachment)\n        }}</span>\n      </div>\n    </div>\n    <div\n      *ngIf=\"isCard(attachment)\"\n      class=\"str-chat__message-attachment-card str-chat__message-attachment-card--{{\n        attachment.type\n      }}\"\n    >\n      <div\n        *ngIf=\"attachment.image_url || attachment.thumb_url\"\n        class=\"str-chat__message-attachment-card--header\"\n      >\n        <img\n          data-testclass=\"card-img\"\n          alt=\"{{ attachment.image_url || attachment.thumb_url }}\"\n          src=\"{{ attachment.image_url || attachment.thumb_url }}\"\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=\"let action of attachment.actions; trackBy: trackByActionValue\"\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\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    [isOpen]=\"isOpen\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n    [content]=\"content\"\n  >\n  </stream-modal>\n</ng-template>\n\n<ng-template #modalContent>\n  <div class=\"stream-chat-angular__image-modal\">\n    <button\n      class=\"stream-chat-angular__image-modal-stepper\"\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      class=\"stream-chat-angular__image-modal-image\"\n      data-testid=\"modal-image\"\n      [src]=\"\n        imagesToView[imagesToViewCurrentIndex].img_url ||\n        imagesToView[imagesToViewCurrentIndex].thumb_url ||\n        imagesToView[imagesToViewCurrentIndex].image_url\n      \"\n      [alt]=\"imagesToView[imagesToViewCurrentIndex].fallback\"\n    />\n    <button\n      class=\"stream-chat-angular__image-modal-stepper\"\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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i2.TranslatePipe, "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: AttachmentListComponent, decorators: [{
             type: Component,
             args: [{
@@ -2219,7 +2266,7 @@ class AttachmentPreviewListComponent {
     }
 }
 AttachmentPreviewListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: AttachmentPreviewListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AttachmentPreviewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AttachmentPreviewListComponent, selector: "stream-attachment-preview-list", inputs: { attachmentUploads$: "attachmentUploads$" }, outputs: { retryAttachmentUpload: "retryAttachmentUpload", deleteAttachment: "deleteAttachment" }, ngImport: i0, template: "<div class=\"rfu-image-previewer\" *ngIf=\"(attachmentUploads$ | async)?.length\">\n  <ng-container\n    *ngFor=\"\n      let attachmentUpload of attachmentUploads$ | async;\n      trackBy: trackByFile\n    \"\n  >\n    <div\n      *ngIf=\"attachmentUpload.type === 'image'\"\n      class=\"rfu-image-previewer__image\"\n      [class.rfu-image-previewer__image--loaded]=\"\n        attachmentUpload.state === 'success'\n      \"\n      data-testclass=\"attachment-image-preview\"\n    >\n      <div\n        *ngIf=\"attachmentUpload.state === 'error'\"\n        class=\"rfu-image-previewer__retry\"\n        (click)=\"attachmentUploadRetried(attachmentUpload.file)\"\n        (keyup.enter)=\"attachmentUploadRetried(attachmentUpload.file)\"\n        data-testclass=\"upload-error\"\n      >\n        <stream-icon-placeholder icon=\"retry\"></stream-icon-placeholder>\n      </div>\n      <div class=\"rfu-thumbnail__wrapper\" style=\"width: 100; height: 100\">\n        <div class=\"rfu-thumbnail__overlay\">\n          <div\n            class=\"rfu-icon-button\"\n            data-testclass=\"delete-attachment\"\n            role=\"button\"\n            (click)=\"attachmentDeleted(attachmentUpload)\"\n            (keyup.enter)=\"attachmentDeleted(attachmentUpload)\"\n          >\n            <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n          </div>\n        </div>\n        <img\n          *ngIf=\"attachmentUpload.url || attachmentUpload.previewUri\"\n          src=\"{{\n            attachmentUpload.url\n              ? attachmentUpload.url\n              : attachmentUpload.previewUri\n          }}\"\n          alt=\"attachmentUpload.file.name\"\n          class=\"rfu-thumbnail__image\"\n          data-testclass=\"attachment-image\"\n        />\n      </div>\n      <stream-loading-indicator-placeholder\n        data-testclass=\"loading-indicator\"\n        color=\"rgba(255,255,255,0.7)\"\n        *ngIf=\"attachmentUpload.state === 'uploading'\"\n      ></stream-loading-indicator-placeholder>\n    </div>\n    <div\n      class=\"rfu-file-previewer\"\n      *ngIf=\"attachmentUpload.type === 'file'\"\n      data-testclass=\"attachment-file-preview\"\n    >\n      <ol>\n        <li\n          class=\"rfu-file-previewer__file\"\n          [class.rfu-file-previewer__file--uploading]=\"\n            attachmentUpload.state === 'uploading'\n          \"\n          [class.rfu-file-previewer__file--failed]=\"\n            attachmentUpload.state === 'error'\n          \"\n        >\n          <stream-icon-placeholder icon=\"file\"></stream-icon-placeholder>\n\n          <a\n            data-testclass=\"file-download-link\"\n            href=\"{{ attachmentUpload.url }}\"\n            (click)=\"attachmentUpload.url ? null : $event.preventDefault()\"\n            (keyup.enter)=\"\n              attachmentUpload.url ? null : $event.preventDefault()\n            \"\n            download\n          >\n            {{ attachmentUpload.file.name }}\n            <ng-container *ngIf=\"attachmentUpload.state === 'error'\">\n              <div\n                data-testclass=\"file-upload-retry\"\n                class=\"rfu-file-previewer__failed\"\n                (click)=\"attachmentUploadRetried(attachmentUpload.file)\"\n                (keyup.enter)=\"attachmentUploadRetried(attachmentUpload.file)\"\n                translate\n              >\n                streamChat.failed\n              </div>\n              <div\n                class=\"rfu-file-previewer__retry\"\n                (click)=\"attachmentUploadRetried(attachmentUpload.file)\"\n                (keyup.enter)=\"attachmentUploadRetried(attachmentUpload.file)\"\n                translate\n              >\n                streamChat.retry\n              </div>\n            </ng-container>\n          </a>\n\n          <span\n            data-testclass=\"file-delete\"\n            class=\"rfu-file-previewer__close-button\"\n            (click)=\"attachmentDeleted(attachmentUpload)\"\n            (keyup.enter)=\"attachmentDeleted(attachmentUpload)\"\n          >\n            \u2718\n          </span>\n          <div\n            *ngIf=\"attachmentUpload.state === 'uploading'\"\n            class=\"rfu-file-previewer__loading-indicator\"\n          >\n            <stream-loading-indicator-placeholder></stream-loading-indicator-placeholder>\n          </div>\n        </li>\n      </ol>\n    </div>\n  </ng-container>\n</div>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder", inputs: ["size", "color"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "async": i3.AsyncPipe } });
+AttachmentPreviewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AttachmentPreviewListComponent, selector: "stream-attachment-preview-list", inputs: { attachmentUploads$: "attachmentUploads$" }, outputs: { retryAttachmentUpload: "retryAttachmentUpload", deleteAttachment: "deleteAttachment" }, ngImport: i0, template: "<div class=\"rfu-image-previewer\" *ngIf=\"(attachmentUploads$ | async)?.length\">\n  <ng-container\n    *ngFor=\"\n      let attachmentUpload of attachmentUploads$ | async;\n      trackBy: trackByFile\n    \"\n  >\n    <div\n      *ngIf=\"attachmentUpload.type === 'image'\"\n      class=\"rfu-image-previewer__image\"\n      [class.rfu-image-previewer__image--loaded]=\"\n        attachmentUpload.state === 'success'\n      \"\n      data-testclass=\"attachment-image-preview\"\n    >\n      <div\n        *ngIf=\"attachmentUpload.state === 'error'\"\n        class=\"rfu-image-previewer__retry\"\n        (click)=\"attachmentUploadRetried(attachmentUpload.file)\"\n        (keyup.enter)=\"attachmentUploadRetried(attachmentUpload.file)\"\n        data-testclass=\"upload-error\"\n      >\n        <stream-icon-placeholder icon=\"retry\"></stream-icon-placeholder>\n      </div>\n      <div class=\"rfu-thumbnail__wrapper\" style=\"width: 100; height: 100\">\n        <div class=\"rfu-thumbnail__overlay\">\n          <div\n            class=\"rfu-icon-button\"\n            data-testclass=\"delete-attachment\"\n            role=\"button\"\n            (click)=\"attachmentDeleted(attachmentUpload)\"\n            (keyup.enter)=\"attachmentDeleted(attachmentUpload)\"\n          >\n            <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n          </div>\n        </div>\n        <img\n          *ngIf=\"attachmentUpload.url || attachmentUpload.previewUri\"\n          src=\"{{\n            attachmentUpload.url\n              ? attachmentUpload.url\n              : attachmentUpload.previewUri\n          }}\"\n          alt=\"attachmentUpload.file.name\"\n          class=\"rfu-thumbnail__image\"\n          data-testclass=\"attachment-image\"\n        />\n      </div>\n      <stream-loading-indicator-placeholder\n        data-testclass=\"loading-indicator\"\n        color=\"rgba(255,255,255,0.7)\"\n        *ngIf=\"attachmentUpload.state === 'uploading'\"\n      ></stream-loading-indicator-placeholder>\n    </div>\n    <div\n      class=\"rfu-file-previewer\"\n      *ngIf=\"\n        attachmentUpload.type === 'file' || attachmentUpload.type === 'video'\n      \"\n      data-testclass=\"attachment-file-preview\"\n    >\n      <ol>\n        <li\n          class=\"rfu-file-previewer__file\"\n          [class.rfu-file-previewer__file--uploading]=\"\n            attachmentUpload.state === 'uploading'\n          \"\n          [class.rfu-file-previewer__file--failed]=\"\n            attachmentUpload.state === 'error'\n          \"\n        >\n          <stream-icon-placeholder icon=\"file\"></stream-icon-placeholder>\n\n          <a\n            data-testclass=\"file-download-link\"\n            href=\"{{ attachmentUpload.url }}\"\n            (click)=\"attachmentUpload.url ? null : $event.preventDefault()\"\n            (keyup.enter)=\"\n              attachmentUpload.url ? null : $event.preventDefault()\n            \"\n            download\n          >\n            {{ attachmentUpload.file.name }}\n            <ng-container *ngIf=\"attachmentUpload.state === 'error'\">\n              <div\n                data-testclass=\"file-upload-retry\"\n                class=\"rfu-file-previewer__failed\"\n                (click)=\"attachmentUploadRetried(attachmentUpload.file)\"\n                (keyup.enter)=\"attachmentUploadRetried(attachmentUpload.file)\"\n                translate\n              >\n                streamChat.failed\n              </div>\n              <div\n                class=\"rfu-file-previewer__retry\"\n                (click)=\"attachmentUploadRetried(attachmentUpload.file)\"\n                (keyup.enter)=\"attachmentUploadRetried(attachmentUpload.file)\"\n                translate\n              >\n                streamChat.retry\n              </div>\n            </ng-container>\n          </a>\n\n          <span\n            data-testclass=\"file-delete\"\n            class=\"rfu-file-previewer__close-button\"\n            (click)=\"attachmentDeleted(attachmentUpload)\"\n            (keyup.enter)=\"attachmentDeleted(attachmentUpload)\"\n          >\n            \u2718\n          </span>\n          <div\n            *ngIf=\"attachmentUpload.state === 'uploading'\"\n            class=\"rfu-file-previewer__loading-indicator\"\n          >\n            <stream-loading-indicator-placeholder></stream-loading-indicator-placeholder>\n          </div>\n        </li>\n      </ol>\n    </div>\n  </ng-container>\n</div>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder", inputs: ["size", "color"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: AttachmentPreviewListComponent, decorators: [{
             type: Component,
             args: [{
@@ -2358,8 +2405,19 @@ class MessageInputComponent {
         if (changes.mode) {
             this.setCanSendMessages();
         }
+        if (changes.sendMessage$) {
+            if (this.sendMessageSubcription) {
+                this.sendMessageSubcription.unsubscribe();
+            }
+            if (this.sendMessage$) {
+                this.sendMessageSubcription = this.sendMessage$.subscribe(() => void this.messageSent());
+            }
+        }
     }
     ngOnDestroy() {
+        if (this.sendMessageSubcription) {
+            this.sendMessageSubcription.unsubscribe();
+        }
         this.subscriptions.forEach((s) => s.unsubscribe());
     }
     messageSent() {
@@ -2566,7 +2624,7 @@ class MessageInputComponent {
     }
 }
 MessageInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageInputComponent, deps: [{ token: ChannelService }, { token: NotificationService }, { token: AttachmentService }, { token: MessageInputConfigService }, { token: textareaInjectionToken }, { token: i0.ComponentFactoryResolver }, { token: i0.ChangeDetectorRef }, { token: ChatClientService }, { token: EmojiInputService }, { token: CustomTemplatesService }], target: i0.ɵɵFactoryTarget.Component });
-MessageInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageInputComponent, selector: "stream-message-input", inputs: { isFileUploadEnabled: "isFileUploadEnabled", areMentionsEnabled: "areMentionsEnabled", mentionScope: "mentionScope", mode: "mode", isMultipleFileUploadEnabled: "isMultipleFileUploadEnabled", message: "message" }, outputs: { messageUpdate: "messageUpdate" }, providers: [AttachmentService, EmojiInputService], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "textareaAnchor", first: true, predicate: TextareaDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"{{\n    mode === 'main' ? 'str-chat__input-flat' : 'str-chat__small-message-input'\n  }}\"\n  [class.str-chat__input-flat-has-attachments]=\"\n    (attachmentUploads$ | async)!.length > 0\n  \"\n  [class.str-chat__input-flat-quoted]=\"!!quotedMessage\"\n>\n  <div\n    data-testid=\"quoted-message-container\"\n    class=\"quoted-message-preview\"\n    *ngIf=\"quotedMessage\"\n  >\n    <div class=\"quoted-message-preview-header\">\n      <div>{{ \"streamChat.Reply to Message\" | translate }}</div>\n      <button\n        class=\"str-chat__square-button\"\n        data-testid=\"remove-quote\"\n        (click)=\"deselectMessageToQuote()\"\n        (keyup.enter)=\"deselectMessageToQuote()\"\n      >\n        <stream-icon-placeholder\n          icon=\"close-no-outline\"\n          style=\"font-size: 10px; line-height: 10px\"\n        ></stream-icon-placeholder>\n      </button>\n    </div>\n    <div class=\"quoted-message-preview-content\">\n      <stream-avatar-placeholder\n        data-testid=\"qouted-message-avatar\"\n        class=\"str-chat-angular__avatar-host\"\n        [imageUrl]=\"quotedMessage?.user?.image\"\n        [name]=\"quotedMessage?.user?.name || quotedMessage?.user?.id\"\n        [size]=\"20\"\n      ></stream-avatar-placeholder>\n      <div class=\"quoted-message-preview-content-inner\">\n        <stream-attachment-list\n          *ngIf=\"\n            quotedMessage?.attachments && quotedMessage?.attachments?.length\n          \"\n          [attachments]=\"quotedMessageAttachments\"\n          [messageId]=\"quotedMessage?.id\"\n        ></stream-attachment-list>\n        <div\n          data-testid=\"quoted-message-text\"\n          [innerHTML]=\"quotedMessage?.html || quotedMessage?.text\"\n        ></div>\n      </div>\n    </div>\n  </div>\n  <div class=\"str-chat__input-flat-wrapper\" style=\"width: 100%\">\n    <div\n      class=\"{{\n        mode === 'main'\n          ? 'str-chat__input-flat--textarea-wrapper'\n          : 'str-chat__small-message-input--textarea-wrapper'\n      }}\"\n    >\n      <ng-template\n        #defaultAttachmentsPreview\n        let-attachmentUploads$=\"attachmentUploads$\"\n        let-retryUploadHandler=\"retryUploadHandler\"\n        let-deleteUploadHandler=\"deleteUploadHandler\"\n      >\n        <stream-attachment-preview-list\n          [attachmentUploads$]=\"attachmentUploads$\"\n          (retryAttachmentUpload)=\"retryUploadHandler($event)\"\n          (deleteAttachment)=\"deleteUploadHandler($event)\"\n          class=\"rfu-image-previewer-angular-host\"\n        ></stream-attachment-preview-list>\n      </ng-template>\n      <ng-container\n        *ngTemplateOutlet=\"\n          attachmentPreviewListTemplate || defaultAttachmentsPreview;\n          context: getAttachmentPreviewListContext()\n        \"\n      ></ng-container>\n      <div class=\"rta str-chat__textarea str-chat-angular__textarea\">\n        <ng-container\n          *ngIf=\"emojiPickerTemplate && !isCooldownInProgress\"\n          data-testid=\"emoji-picker\"\n        >\n          <div\n            class=\"\n              str-chat__input-flat-emojiselect\n              str-chat-angular__emojiselect\n            \"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                emojiPickerTemplate;\n                context: getEmojiPickerContext()\n              \"\n            ></ng-container>\n          </div>\n        </ng-container>\n        <div\n          class=\"str-chat__input-flat-cooldown str-chat-angular__cooldown\"\n          *ngIf=\"isCooldownInProgress\"\n          data-testid=\"cooldown-timer\"\n        >\n          {{ cooldown$ | async }}\n        </div>\n        <ng-template\n          *ngIf=\"canSendMessages && !isCooldownInProgress; else notAllowed\"\n          streamTextarea\n          [(value)]=\"textareaValue\"\n          (valueChange)=\"typingStart$.next()\"\n          (send)=\"messageSent()\"\n          [componentRef]=\"textareaRef\"\n          (userMentions)=\"mentionedUsers = $event\"\n          [areMentionsEnabled]=\"areMentionsEnabled\"\n          [mentionScope]=\"mentionScope\"\n        ></ng-template>\n        <ng-template #notAllowed>\n          <textarea\n            disabled\n            rows=\"1\"\n            [value]=\"disabledTextareaText | translate\"\n            class=\"rta__textarea str-chat__textarea__textarea\"\n            data-testid=\"disabled-textarea\"\n          ></textarea>\n        </ng-template>\n      </div>\n      <div\n        *ngIf=\"\n          isFileUploadEnabled &&\n          isFileUploadAuthorized &&\n          canSendMessages &&\n          !isCooldownInProgress\n        \"\n        class=\"str-chat__fileupload-wrapper\"\n        data-testid=\"file-upload-button\"\n      >\n        <div class=\"str-chat__tooltip\">\n          {{ \"streamChat.Attach files\" | translate }}\n        </div>\n        <div class=\"rfu-file-upload-button\">\n          <label>\n            <input\n              #fileInput\n              type=\"file\"\n              class=\"rfu-file-input\"\n              data-testid=\"file-input\"\n              [multiple]=\"isMultipleFileUploadEnabled\"\n              (change)=\"filesSelected(fileInput.files)\"\n            />\n            <span class=\"str-chat__input-flat-fileupload\">\n              <stream-icon-placeholder\n                icon=\"file-upload\"\n              ></stream-icon-placeholder>\n            </span>\n          </label>\n        </div>\n      </div>\n    </div>\n    <button\n      *ngIf=\"canSendMessages\"\n      data-testid=\"send-button\"\n      class=\"str-chat__send-button\"\n      (click)=\"messageSent()\"\n      (keyup.enter)=\"messageSent()\"\n    >\n      <stream-icon-placeholder icon=\"send\"></stream-icon-placeholder>\n    </button>\n  </div>\n</div>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size"] }, { type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "attachments"] }, { type: AttachmentPreviewListComponent, selector: "stream-attachment-preview-list", inputs: ["attachmentUploads$"], outputs: ["retryAttachmentUpload", "deleteAttachment"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: TextareaDirective, selector: "[streamTextarea]", inputs: ["componentRef", "areMentionsEnabled", "mentionScope", "value"], outputs: ["valueChange", "send", "userMentions"] }], pipes: { "async": i3.AsyncPipe, "translate": i2.TranslatePipe } });
+MessageInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageInputComponent, selector: "stream-message-input", inputs: { isFileUploadEnabled: "isFileUploadEnabled", areMentionsEnabled: "areMentionsEnabled", mentionScope: "mentionScope", mode: "mode", isMultipleFileUploadEnabled: "isMultipleFileUploadEnabled", message: "message", sendMessage$: "sendMessage$" }, outputs: { messageUpdate: "messageUpdate" }, providers: [AttachmentService, EmojiInputService], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "textareaAnchor", first: true, predicate: TextareaDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"{{\n    mode === 'main' ? 'str-chat__input-flat' : 'str-chat__small-message-input'\n  }}\"\n  [class.str-chat__input-flat-has-attachments]=\"\n    (attachmentUploads$ | async)!.length > 0\n  \"\n  [class.str-chat__input-flat-quoted]=\"!!quotedMessage\"\n>\n  <div\n    data-testid=\"quoted-message-container\"\n    class=\"quoted-message-preview\"\n    *ngIf=\"quotedMessage\"\n  >\n    <div class=\"quoted-message-preview-header\">\n      <div>{{ \"streamChat.Reply to Message\" | translate }}</div>\n      <button\n        class=\"str-chat__square-button\"\n        data-testid=\"remove-quote\"\n        (click)=\"deselectMessageToQuote()\"\n        (keyup.enter)=\"deselectMessageToQuote()\"\n      >\n        <stream-icon-placeholder\n          icon=\"close-no-outline\"\n          style=\"font-size: 10px; line-height: 10px\"\n        ></stream-icon-placeholder>\n      </button>\n    </div>\n    <div class=\"quoted-message-preview-content\">\n      <stream-avatar-placeholder\n        data-testid=\"qouted-message-avatar\"\n        class=\"str-chat-angular__avatar-host\"\n        [imageUrl]=\"quotedMessage?.user?.image\"\n        [name]=\"quotedMessage?.user?.name || quotedMessage?.user?.id\"\n        [size]=\"20\"\n      ></stream-avatar-placeholder>\n      <div class=\"quoted-message-preview-content-inner\">\n        <stream-attachment-list\n          *ngIf=\"\n            quotedMessage?.attachments && quotedMessage?.attachments?.length\n          \"\n          [attachments]=\"quotedMessageAttachments\"\n          [messageId]=\"quotedMessage?.id\"\n        ></stream-attachment-list>\n        <div\n          data-testid=\"quoted-message-text\"\n          [innerHTML]=\"quotedMessage?.html || quotedMessage?.text\"\n        ></div>\n      </div>\n    </div>\n  </div>\n  <div class=\"str-chat__input-flat-wrapper\" style=\"width: 100%\">\n    <div\n      class=\"{{\n        mode === 'main'\n          ? 'str-chat__input-flat--textarea-wrapper'\n          : 'str-chat__small-message-input--textarea-wrapper'\n      }}\"\n    >\n      <ng-template\n        #defaultAttachmentsPreview\n        let-attachmentUploads$=\"attachmentUploads$\"\n        let-retryUploadHandler=\"retryUploadHandler\"\n        let-deleteUploadHandler=\"deleteUploadHandler\"\n      >\n        <stream-attachment-preview-list\n          [attachmentUploads$]=\"attachmentUploads$\"\n          (retryAttachmentUpload)=\"retryUploadHandler($event)\"\n          (deleteAttachment)=\"deleteUploadHandler($event)\"\n          class=\"rfu-image-previewer-angular-host\"\n        ></stream-attachment-preview-list>\n      </ng-template>\n      <ng-container\n        *ngTemplateOutlet=\"\n          attachmentPreviewListTemplate || defaultAttachmentsPreview;\n          context: getAttachmentPreviewListContext()\n        \"\n      ></ng-container>\n      <div class=\"rta str-chat__textarea str-chat-angular__textarea\">\n        <ng-container\n          *ngIf=\"emojiPickerTemplate && !isCooldownInProgress\"\n          data-testid=\"emoji-picker\"\n        >\n          <div\n            class=\"\n              str-chat__input-flat-emojiselect\n              str-chat-angular__emojiselect\n            \"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                emojiPickerTemplate;\n                context: getEmojiPickerContext()\n              \"\n            ></ng-container>\n          </div>\n        </ng-container>\n        <div\n          class=\"str-chat__input-flat-cooldown str-chat-angular__cooldown\"\n          *ngIf=\"isCooldownInProgress\"\n          data-testid=\"cooldown-timer\"\n        >\n          {{ cooldown$ | async }}\n        </div>\n        <ng-template\n          *ngIf=\"canSendMessages && !isCooldownInProgress; else notAllowed\"\n          streamTextarea\n          [(value)]=\"textareaValue\"\n          (valueChange)=\"typingStart$.next()\"\n          (send)=\"messageSent()\"\n          [componentRef]=\"textareaRef\"\n          (userMentions)=\"mentionedUsers = $event\"\n          [areMentionsEnabled]=\"areMentionsEnabled\"\n          [mentionScope]=\"mentionScope\"\n        ></ng-template>\n        <ng-template #notAllowed>\n          <textarea\n            disabled\n            rows=\"1\"\n            [value]=\"disabledTextareaText | translate\"\n            class=\"rta__textarea str-chat__textarea__textarea\"\n            data-testid=\"disabled-textarea\"\n          ></textarea>\n        </ng-template>\n      </div>\n      <div\n        *ngIf=\"\n          isFileUploadEnabled &&\n          isFileUploadAuthorized &&\n          canSendMessages &&\n          !isCooldownInProgress\n        \"\n        class=\"str-chat__fileupload-wrapper\"\n        data-testid=\"file-upload-button\"\n      >\n        <div class=\"str-chat__tooltip\">\n          {{ \"streamChat.Attach files\" | translate }}\n        </div>\n        <div class=\"rfu-file-upload-button\">\n          <label>\n            <input\n              #fileInput\n              type=\"file\"\n              class=\"rfu-file-input\"\n              data-testid=\"file-input\"\n              [multiple]=\"isMultipleFileUploadEnabled\"\n              (change)=\"filesSelected(fileInput.files)\"\n            />\n            <span class=\"str-chat__input-flat-fileupload\">\n              <stream-icon-placeholder\n                icon=\"file-upload\"\n              ></stream-icon-placeholder>\n            </span>\n          </label>\n        </div>\n      </div>\n    </div>\n    <button\n      *ngIf=\"canSendMessages\"\n      data-testid=\"send-button\"\n      class=\"str-chat__send-button\"\n      (click)=\"messageSent()\"\n      (keyup.enter)=\"messageSent()\"\n    >\n      <stream-icon-placeholder icon=\"send\"></stream-icon-placeholder>\n    </button>\n  </div>\n</div>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size"] }, { type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "attachments"] }, { type: AttachmentPreviewListComponent, selector: "stream-attachment-preview-list", inputs: ["attachmentUploads$"], outputs: ["retryAttachmentUpload", "deleteAttachment"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: TextareaDirective, selector: "[streamTextarea]", inputs: ["componentRef", "areMentionsEnabled", "mentionScope", "value"], outputs: ["valueChange", "send", "userMentions"] }], pipes: { "async": i3.AsyncPipe, "translate": i2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageInputComponent, decorators: [{
             type: Component,
             args: [{
@@ -2590,6 +2648,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
                 type: Input
             }], message: [{
                 type: Input
+            }], sendMessage$: [{
+                type: Input
             }], messageUpdate: [{
                 type: Output
             }], fileInput: [{
@@ -2680,6 +2740,7 @@ class MessageActionsBoxComponent {
         this.isEditModalOpen = false;
         this.subscriptions = [];
         this.visibleMessageActionItems = [];
+        this.sendMessageSubject = new Subject();
         this.modalClosed = () => {
             this.isEditModalOpen = false;
             this.isEditing.emit(false);
@@ -2743,6 +2804,7 @@ class MessageActionsBoxComponent {
                     enabledActions.indexOf('delete-any-message') !== -1,
             },
         ];
+        this.sendMessage$ = this.sendMessageSubject.asObservable();
     }
     ngOnChanges(changes) {
         if (changes.isMine || changes.enabledActions || changes.message) {
@@ -2760,8 +2822,7 @@ class MessageActionsBoxComponent {
             : actionLabelOrTranslationKey();
     }
     sendClicked() {
-        var _a;
-        (_a = this.messageInput) === null || _a === void 0 ? void 0 : _a.messageSent();
+        this.sendMessageSubject.next();
     }
     getMessageInputContext() {
         return {
@@ -2772,6 +2833,7 @@ class MessageActionsBoxComponent {
             isMultipleFileUploadEnabled: undefined,
             mentionScope: undefined,
             mode: undefined,
+            sendMessage$: this.sendMessage$,
         };
     }
     getEditModalContext() {
@@ -2791,7 +2853,7 @@ class MessageActionsBoxComponent {
     }
 }
 MessageActionsBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageActionsBoxComponent, deps: [{ token: ChatClientService }, { token: NotificationService }, { token: ChannelService }, { token: CustomTemplatesService }], target: i0.ɵɵFactoryTarget.Component });
-MessageActionsBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: { isOpen: "isOpen", isMine: "isMine", message: "message", enabledActions: "enabledActions" }, outputs: { displayedActionsCount: "displayedActionsCount", isEditing: "isEditing" }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: MessageInputComponent, descendants: true }, { propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  data-testid=\"action-box\"\n  class=\"str-chat__message-actions-box\"\n  [class.str-chat__message-actions-box--open]=\"isOpen\"\n  [class.str-chat__message-actions-box--mine]=\"isMine\"\n>\n  <ul class=\"str-chat__message-actions-list\">\n    <ng-container\n      *ngFor=\"let item of visibleMessageActionItems; trackBy: trackByActionName\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          messageActionItemTemplate || defaultMessageActionItem;\n          context: item\n        \"\n      ></ng-container>\n    </ng-container>\n  </ul>\n</div>\n\n<ng-template\n  #defaultMessageActionItem\n  let-actionName=\"actionName\"\n  let-actionHandler=\"actionHandler\"\n  let-actionLabelOrTranslationKey=\"actionLabelOrTranslationKey\"\n>\n  <button [attr.data-testid]=\"actionName + '-action'\" (click)=\"actionHandler()\">\n    <li class=\"str-chat__message-actions-list-item\">\n      {{ getActionLabel(actionLabelOrTranslationKey) | translate }}\n    </li>\n  </button>\n</ng-template>\n\n<ng-container\n  *ngTemplateOutlet=\"\n    modalTemplate || defaultModal;\n    context: getEditModalContext()\n  \"\n></ng-container>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    [isOpen]=\"isOpen\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n    [content]=\"content\"\n  >\n  </stream-modal>\n</ng-template>\n\n<ng-template #modalContent>\n  <div class=\"str-chat__edit-message-form\" *ngIf=\"isEditModalOpen\">\n    <ng-template\n      #defaultInput\n      let-messageInput=\"message\"\n      let-messageUpdateHandler=\"messageUpdateHandler\"\n    >\n      <stream-message-input\n        [message]=\"messageInput\"\n        (messageUpdate)=\"messageUpdateHandler()\"\n      ></stream-message-input>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        messageInputTemplate || defaultInput;\n        context: getMessageInputContext()\n      \"\n    >\n    </ng-container>\n\n    <stream-notification-list></stream-notification-list>\n    <div\n      class=\"\n        str-chat__message-team-form-footer\n        str-chat__message-team-form-footer-angular\n      \"\n    >\n      <div class=\"str-chat__edit-message-form-options\">\n        <button translate data-testid=\"cancel-button\" (click)=\"modalClosed()\">\n          streamChat.Cancel\n        </button>\n        <button\n          type=\"submit\"\n          translate\n          data-testid=\"send-button\"\n          (click)=\"sendClicked()\"\n          (keyup.enter)=\"sendClicked()\"\n        >\n          streamChat.Send\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", components: [{ type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }, { type: MessageInputComponent, selector: "stream-message-input", inputs: ["isFileUploadEnabled", "areMentionsEnabled", "mentionScope", "mode", "isMultipleFileUploadEnabled", "message"], outputs: ["messageUpdate"] }, { type: NotificationListComponent, selector: "stream-notification-list" }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i2.TranslatePipe } });
+MessageActionsBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: { isOpen: "isOpen", isMine: "isMine", message: "message", enabledActions: "enabledActions" }, outputs: { displayedActionsCount: "displayedActionsCount", isEditing: "isEditing" }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  data-testid=\"action-box\"\n  class=\"str-chat__message-actions-box\"\n  [class.str-chat__message-actions-box--open]=\"isOpen\"\n  [class.str-chat__message-actions-box--mine]=\"isMine\"\n>\n  <ul class=\"str-chat__message-actions-list\">\n    <ng-container\n      *ngFor=\"let item of visibleMessageActionItems; trackBy: trackByActionName\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          messageActionItemTemplate || defaultMessageActionItem;\n          context: item\n        \"\n      ></ng-container>\n    </ng-container>\n  </ul>\n</div>\n\n<ng-template\n  #defaultMessageActionItem\n  let-actionName=\"actionName\"\n  let-actionHandler=\"actionHandler\"\n  let-actionLabelOrTranslationKey=\"actionLabelOrTranslationKey\"\n>\n  <button [attr.data-testid]=\"actionName + '-action'\" (click)=\"actionHandler()\">\n    <li class=\"str-chat__message-actions-list-item\">\n      {{ getActionLabel(actionLabelOrTranslationKey) | translate }}\n    </li>\n  </button>\n</ng-template>\n\n<ng-container\n  *ngTemplateOutlet=\"\n    modalTemplate || defaultModal;\n    context: getEditModalContext()\n  \"\n></ng-container>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    [isOpen]=\"isOpen\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n    [content]=\"content\"\n  >\n  </stream-modal>\n</ng-template>\n\n<ng-template #modalContent>\n  <div class=\"str-chat__edit-message-form\" *ngIf=\"isEditModalOpen\">\n    <ng-template\n      #defaultInput\n      let-messageInput=\"message\"\n      let-messageUpdateHandler=\"messageUpdateHandler\"\n      let-sendMessage$Input=\"sendMessage$\"\n    >\n      <stream-message-input\n        [message]=\"messageInput\"\n        (messageUpdate)=\"messageUpdateHandler()\"\n        [sendMessage$]=\"sendMessage$Input\"\n      ></stream-message-input>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        messageInputTemplate || defaultInput;\n        context: getMessageInputContext()\n      \"\n    >\n    </ng-container>\n\n    <stream-notification-list></stream-notification-list>\n    <div\n      class=\"\n        str-chat__message-team-form-footer\n        str-chat__message-team-form-footer-angular\n      \"\n    >\n      <div class=\"str-chat__edit-message-form-options\">\n        <button translate data-testid=\"cancel-button\" (click)=\"modalClosed()\">\n          streamChat.Cancel\n        </button>\n        <button\n          type=\"submit\"\n          translate\n          data-testid=\"send-button\"\n          (click)=\"sendClicked()\"\n          (keyup.enter)=\"sendClicked()\"\n        >\n          streamChat.Send\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", components: [{ type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }, { type: MessageInputComponent, selector: "stream-message-input", inputs: ["isFileUploadEnabled", "areMentionsEnabled", "mentionScope", "mode", "isMultipleFileUploadEnabled", "message", "sendMessage$"], outputs: ["messageUpdate"] }, { type: NotificationListComponent, selector: "stream-notification-list" }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageActionsBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -2811,9 +2873,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
                 type: Output
             }], isEditing: [{
                 type: Output
-            }], messageInput: [{
-                type: ViewChild,
-                args: [MessageInputComponent]
             }], modalContent: [{
                 type: ViewChild,
                 args: ['modalContent', { static: true }]
@@ -3501,7 +3560,12 @@ class MessageComponent {
                 this.message.mentioned_users.length === 0) {
                 // Wrap emojis in span to display emojis correctly in Chrome https://bugs.chromium.org/p/chromium/issues/detail?id=596223
                 const regex = new RegExp(emojiRegex(), 'g');
-                content = content.replace(regex, (match) => `<span class="str-chat__emoji-display-fix">${match}</span>`);
+                // Based on this: https://stackoverflow.com/questions/4565112/javascript-how-to-find-out-if-the-user-browser-is-chrome
+                /* eslint-disable @typescript-eslint/no-unsafe-member-access */
+                const isChrome = !!window.chrome &&
+                    typeof window.opr === 'undefined';
+                /* eslint-enable @typescript-eslint/no-unsafe-member-access */
+                content = content.replace(regex, (match) => `<span ${isChrome ? 'class="str-chat__emoji-display-fix"' : ''}>${match}</span>`);
                 this.messageTextParts = [{ content, type: 'text' }];
             }
             else {