stream-chat-angular 5.4.3 → 5.6.0

package/fesm2015/stream-chat-angular.mjs

@@ -5,7 +5,7 @@ import { BehaviorSubject, ReplaySubject, combineLatest, take as take$1, Subject,
 import { StreamChat } from 'stream-chat';
 import { take, shareReplay, map, first, filter, tap, debounceTime, throttleTime } from 'rxjs/operators';
 import { v4 } from 'uuid';
-import * as i10 from '@ngx-translate/core';
+import * as i6 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
@@ -19,10 +19,10 @@ import prettybytes from 'pretty-bytes';
 import fixWebmDuration from 'fix-webm-duration';
 import { NgModel } from '@angular/forms';
 import transliterate from '@stream-io/transliterate';
-import * as i8$1 from 'angular-mentions';
+import * as i7 from 'angular-mentions';
 import { MentionModule } from 'angular-mentions';
 
-const version = '5.4.3';
+const version = '5.6.0';
 
 /**
  * The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](../components/NotificationListComponent.mdx) component displays the currently active notifications.
@@ -2040,20 +2040,73 @@ const isImageAttachment = (attachment) => {
         !attachment.og_scrape_url);
 };
 
+/**
+ * The message service contains configuration options related to displaying the message content
+ */
+class MessageService {
+    constructor() {
+        /**
+         * Decides if the message content should be formatted as text or HTML
+         *
+         * If you display messages as text the following parts are still be displayed as HTML:
+         * - user mentions -> you can customize this with your own template using the [`customTemplatesService.mentionTemplate$`](https://getstream.io/chat/docs/sdk/angular/services/CustomTemplatesService/#mentiontemplate)
+         * - links -> you can customize this by providing you own [`customLinkRenderer`](#customlinkrenderer) method
+         */
+        this.displayAs = 'text';
+    }
+    /**
+     * Tells if an attachment is custom (you need to provide your own template to display them) or built-in (the SDK supports it out-of-the-box)
+     * @param attachment
+     * @returns `true` if the attachment is custom
+     */
+    isCustomAttachment(attachment) {
+        if (this.filterCustomAttachment) {
+            return this.filterCustomAttachment(attachment);
+        }
+        else {
+            return (attachment.type !== 'image' &&
+                attachment.type !== 'file' &&
+                attachment.type !== 'video' &&
+                attachment.type !== 'voiceRecording' &&
+                attachment.type !== 'giphy');
+        }
+    }
+}
+MessageService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+MessageService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return []; } });
+
 /**
  * The `AttachmentService` manages the uploads of a message input.
  *
  * You can read more about [uploads](https://getstream.io/chat/docs/javascript/file_uploads/?language=javascript&q=size) in the Stream API documentation. You can use Stream's API or the dashboard to customize the [file](https://getstream.io/chat/docs/javascript/app_setting_overview/?language=javascript&q=size#file-uploads) and [image upload](https://getstream.io/chat/docs/javascript/app_setting_overview/?language=javascript&q=size#image-uploads) configuration.
  */
 class AttachmentService {
-    constructor(channelService, notificationService, chatClientService) {
+    constructor(channelService, notificationService, chatClientService, messageService) {
         this.channelService = channelService;
         this.notificationService = notificationService;
         this.chatClientService = chatClientService;
-        this.attachmentUploadInProgressCounterSubject = new BehaviorSubject(0);
+        this.messageService = messageService;
+        /**
+         * Emits the number of uploads in progress.
+         *
+         * You can increment and decrement this counter if you're using custom attachments and want to disable message sending until all attachments are uploaded.
+         *
+         * The SDK will handle updating this counter for built-in attachments, but for custom attachments you should take care of this.
+         */
+        this.attachmentUploadInProgressCounter$ = new BehaviorSubject(0);
+        /**
+         * You can get and set the list if uploaded custom attachments
+         *
+         * By default the SDK components won't display these, but you can provide your own `customAttachmentPreviewListTemplate$` and `customAttachmentListTemplate$` for the [`CustomTemplatesService`](../../services/CustomTemplatesService).
+         */
+        this.customAttachments$ = new BehaviorSubject([]);
         this.attachmentUploadsSubject = new BehaviorSubject([]);
-        this.attachmentUploadInProgressCounter$ =
-            this.attachmentUploadInProgressCounterSubject.asObservable();
         this.attachmentUploads$ = this.attachmentUploadsSubject.asObservable();
         this.chatClientService.appSettings$.subscribe((appSettings) => (this.appSettings = appSettings));
     }
@@ -2062,6 +2115,7 @@ class AttachmentService {
      */
     resetAttachmentUploads() {
         this.attachmentUploadsSubject.next([]);
+        this.customAttachments$.next([]);
     }
     /**
      * Upload a voice recording
@@ -2214,7 +2268,7 @@ class AttachmentService {
      */
     mapToAttachments() {
         const attachmentUploads = this.attachmentUploadsSubject.getValue();
-        return attachmentUploads
+        const builtInAttachments = attachmentUploads
             .filter((r) => r.state === 'success')
             .map((r) => {
             var _a, _b, _c, _d;
@@ -2242,6 +2296,7 @@ class AttachmentService {
             }
             return attachment;
         });
+        return [...builtInAttachments, ...this.customAttachments$.value];
     }
     /**
      * Maps attachments received from the Stream API to uploads. This is useful when editing a message.
@@ -2249,7 +2304,17 @@ class AttachmentService {
      */
     createFromAttachments(attachments) {
         const attachmentUploads = [];
+        const builtInAttachments = [];
+        const customAttachments = [];
         attachments.forEach((attachment) => {
+            if (this.messageService.isCustomAttachment(attachment)) {
+                customAttachments.push(attachment);
+            }
+            else {
+                builtInAttachments.push(attachment);
+            }
+        });
+        builtInAttachments.forEach((attachment) => {
             if (isImageAttachment(attachment)) {
                 attachmentUploads.push({
                     url: (attachment.img_url ||
@@ -2301,6 +2366,9 @@ class AttachmentService {
                 ...attachmentUploads,
             ]);
         }
+        if (customAttachments.length > 0) {
+            this.customAttachments$.next(customAttachments);
+        }
     }
     createPreview(file) {
         var _a, _b;
@@ -2322,7 +2390,7 @@ class AttachmentService {
     }
     uploadAttachments(uploads) {
         return __awaiter(this, void 0, void 0, function* () {
-            this.attachmentUploadInProgressCounterSubject.next(this.attachmentUploadInProgressCounterSubject.getValue() + 1);
+            this.attachmentUploadInProgressCounter$.next(this.attachmentUploadInProgressCounter$.value + 1);
             const result = yield this.channelService.uploadAttachments(uploads);
             const attachmentUploads = this.attachmentUploadsSubject.getValue();
             result.forEach((r) => {
@@ -2359,7 +2427,7 @@ class AttachmentService {
                     this.notificationService.addTemporaryNotification(errorKey, 'error', undefined, translateParams);
                 }
             });
-            this.attachmentUploadInProgressCounterSubject.next(this.attachmentUploadInProgressCounterSubject.getValue() - 1);
+            this.attachmentUploadInProgressCounter$.next(this.attachmentUploadInProgressCounter$.value - 1);
             this.attachmentUploadsSubject.next([...attachmentUploads]);
         });
     }
@@ -2451,14 +2519,14 @@ class AttachmentService {
         });
     }
 }
-AttachmentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AttachmentService, deps: [{ token: ChannelService }, { token: NotificationService }, { token: ChatClientService }], target: i0.ɵɵFactoryTarget.Injectable });
+AttachmentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AttachmentService, deps: [{ token: ChannelService }, { token: NotificationService }, { token: ChatClientService }, { token: MessageService }], target: i0.ɵɵFactoryTarget.Injectable });
 AttachmentService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AttachmentService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AttachmentService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: ChannelService }, { type: NotificationService }, { type: ChatClientService }]; } });
+        }], ctorParameters: function () { return [{ type: ChannelService }, { type: NotificationService }, { type: ChatClientService }, { type: MessageService }]; } });
 
 /**
  * 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.
@@ -2774,14 +2842,14 @@ class StreamI18nService {
         this.translteService.setTranslation(lang, { streamChat: Object.assign(Object.assign({}, en.streamChat), overrides) }, true);
     }
 }
-StreamI18nService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: StreamI18nService, deps: [{ token: i10.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
+StreamI18nService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: StreamI18nService, deps: [{ token: i6.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
 StreamI18nService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: StreamI18nService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: StreamI18nService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i10.TranslateService }]; } });
+        }], ctorParameters: function () { return [{ type: i6.TranslateService }]; } });
 
 /**
  * The `Avatar` component displays the provided image, with fallback to the first letter of the optional name input.
@@ -3151,6 +3219,14 @@ class CustomTemplatesService {
          *
          */
         this.channelPreviewInfoTemplate$ = new BehaviorSubject(undefined);
+        /**
+         * The template used to display custom attachment previews in the [message input component](../../components/MessageInputComponent.mdx)
+         */
+        this.customAttachmentPreviewListTemplate$ = new BehaviorSubject(undefined);
+        /**
+         * The template used to display custom attachments in the [message component](../../components/MessageComponent.mdx)
+         */
+        this.customAttachmentListTemplate$ = new BehaviorSubject(undefined);
     }
 }
 CustomTemplatesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CustomTemplatesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -3698,7 +3774,7 @@ class MessageActionsBoxComponent {
     }
 }
 MessageActionsBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageActionsBoxComponent, deps: [{ token: CustomTemplatesService }, { token: MessageActionsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-MessageActionsBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: { isMine: "isMine", message: "message", messageTextHtmlElement: "messageTextHtmlElement", enabledActions: "enabledActions" }, usesOnChanges: true, ngImport: i0, template: "<div\n  #actionBox\n  data-testid=\"action-box\"\n  class=\"str-chat__message-actions-box str-chat__message-actions-box-angular str-chat__message-actions-box--open\"\n>\n  <ul class=\"str-chat__message-actions-list\">\n    <ng-container\n      *ngFor=\"let item of visibleMessageActionItems; trackBy: trackByActionName\"\n    >\n      <ng-container [ngSwitch]=\"item.actionName\">\n        <ng-container *ngSwitchCase=\"'react'\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.messageReactionsSelectorTemplate$\n                | async) || defaultReactionSelector;\n              context: getReactionSelectorTemplateContext()\n            \"\n          ></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.messageActionsBoxItemTemplate$ | async) ||\n                defaultMessageActionItem;\n              context: getMessageActionTemplateContext(item)\n            \"\n          ></ng-container>\n        </ng-container>\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  let-actionHandlerExtraParams=\"actionHandlerExtraParams\"\n>\n  <button\n    class=\"str-chat__message-actions-list-item-button\"\n    [attr.data-testid]=\"actionName + '-action'\"\n    (click)=\"actionHandler(message, actionHandlerExtraParams)\"\n  >\n    <li class=\"str-chat__message-actions-list-item\">\n      {{ getActionLabel(actionLabelOrTranslationKey) | translate }}\n    </li>\n  </button>\n</ng-template>\n\n<ng-template\n  #defaultReactionSelector\n  let-messageId=\"messageId\"\n  let-ownReactions=\"ownReactions\"\n>\n  <stream-message-reactions-selector\n    [messageId]=\"message?.id\"\n    [ownReactions]=\"message?.own_reactions || []\"\n  ></stream-message-reactions-selector>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: MessageReactionsSelectorComponent, selector: "stream-message-reactions-selector", inputs: ["ownReactions", "messageId"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
+MessageActionsBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: { isMine: "isMine", message: "message", messageTextHtmlElement: "messageTextHtmlElement", enabledActions: "enabledActions" }, usesOnChanges: true, ngImport: i0, template: "<div\n  #actionBox\n  data-testid=\"action-box\"\n  class=\"str-chat__message-actions-box str-chat__message-actions-box-angular str-chat__message-actions-box--open\"\n>\n  <ul class=\"str-chat__message-actions-list\">\n    <ng-container\n      *ngFor=\"let item of visibleMessageActionItems; trackBy: trackByActionName\"\n    >\n      <ng-container [ngSwitch]=\"item.actionName\">\n        <ng-container *ngSwitchCase=\"'react'\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.messageReactionsSelectorTemplate$\n                | async) || defaultReactionSelector;\n              context: getReactionSelectorTemplateContext()\n            \"\n          ></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.messageActionsBoxItemTemplate$ | async) ||\n                defaultMessageActionItem;\n              context: getMessageActionTemplateContext(item)\n            \"\n          ></ng-container>\n        </ng-container>\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  let-actionHandlerExtraParams=\"actionHandlerExtraParams\"\n>\n  <button\n    class=\"str-chat__message-actions-list-item-button\"\n    [attr.data-testid]=\"actionName + '-action'\"\n    (click)=\"actionHandler(message, actionHandlerExtraParams)\"\n  >\n    <li class=\"str-chat__message-actions-list-item\">\n      {{ getActionLabel(actionLabelOrTranslationKey) | translate }}\n    </li>\n  </button>\n</ng-template>\n\n<ng-template\n  #defaultReactionSelector\n  let-messageId=\"messageId\"\n  let-ownReactions=\"ownReactions\"\n>\n  <stream-message-reactions-selector\n    [messageId]=\"message?.id\"\n    [ownReactions]=\"message?.own_reactions || []\"\n  ></stream-message-reactions-selector>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: MessageReactionsSelectorComponent, selector: "stream-message-reactions-selector", inputs: ["ownReactions", "messageId"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageActionsBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'stream-message-actions-box', template: "<div\n  #actionBox\n  data-testid=\"action-box\"\n  class=\"str-chat__message-actions-box str-chat__message-actions-box-angular str-chat__message-actions-box--open\"\n>\n  <ul class=\"str-chat__message-actions-list\">\n    <ng-container\n      *ngFor=\"let item of visibleMessageActionItems; trackBy: trackByActionName\"\n    >\n      <ng-container [ngSwitch]=\"item.actionName\">\n        <ng-container *ngSwitchCase=\"'react'\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.messageReactionsSelectorTemplate$\n                | async) || defaultReactionSelector;\n              context: getReactionSelectorTemplateContext()\n            \"\n          ></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.messageActionsBoxItemTemplate$ | async) ||\n                defaultMessageActionItem;\n              context: getMessageActionTemplateContext(item)\n            \"\n          ></ng-container>\n        </ng-container>\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  let-actionHandlerExtraParams=\"actionHandlerExtraParams\"\n>\n  <button\n    class=\"str-chat__message-actions-list-item-button\"\n    [attr.data-testid]=\"actionName + '-action'\"\n    (click)=\"actionHandler(message, actionHandlerExtraParams)\"\n  >\n    <li class=\"str-chat__message-actions-list-item\">\n      {{ getActionLabel(actionLabelOrTranslationKey) | translate }}\n    </li>\n  </button>\n</ng-template>\n\n<ng-template\n  #defaultReactionSelector\n  let-messageId=\"messageId\"\n  let-ownReactions=\"ownReactions\"\n>\n  <stream-message-reactions-selector\n    [messageId]=\"message?.id\"\n    [ownReactions]=\"message?.own_reactions || []\"\n  ></stream-message-reactions-selector>\n</ng-template>\n" }]
@@ -3748,7 +3824,7 @@ class NotificationListComponent {
     }
 }
 NotificationListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NotificationListComponent, deps: [{ token: CustomTemplatesService }, { token: NotificationService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
-NotificationListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: NotificationListComponent, selector: "stream-notification-list", ngImport: i0, template: "<div\n  data-testid=\"notification-list\"\n  class=\"str-chat str-chat__theme-{{\n    theme$ | async\n  }} str-chat__list-notifications\"\n>\n  <ng-container\n    *ngFor=\"let notification of notifications$ | async; trackBy: trackById\"\n  >\n    <ng-template #notificationContent>\n      <div\n        *ngIf=\"notification.text !== undefined\"\n        data-testclass=\"notification-content\"\n      >\n        {{ notification.text | translate : notification.translateParams }}\n      </div>\n      <ng-container *ngIf=\"notification.template !== undefined\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            notification.template;\n            context: getNotificationContentContext(notification)\n          \"\n        ></ng-container>\n      </ng-container>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.notificationTemplate$ | async) ||\n          defaultNotification;\n        context: { type: notification.type, content: notificationContent }\n      \"\n    ></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #defaultNotification let-type=\"type\" let-content=\"content\">\n  <stream-notification [type]=\"type\" [content]=\"content\"></stream-notification>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NotificationComponent, selector: "stream-notification", inputs: ["type", "content"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
+NotificationListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: NotificationListComponent, selector: "stream-notification-list", ngImport: i0, template: "<div\n  data-testid=\"notification-list\"\n  class=\"str-chat str-chat__theme-{{\n    theme$ | async\n  }} str-chat__list-notifications\"\n>\n  <ng-container\n    *ngFor=\"let notification of notifications$ | async; trackBy: trackById\"\n  >\n    <ng-template #notificationContent>\n      <div\n        *ngIf=\"notification.text !== undefined\"\n        data-testclass=\"notification-content\"\n      >\n        {{ notification.text | translate : notification.translateParams }}\n      </div>\n      <ng-container *ngIf=\"notification.template !== undefined\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            notification.template;\n            context: getNotificationContentContext(notification)\n          \"\n        ></ng-container>\n      </ng-container>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.notificationTemplate$ | async) ||\n          defaultNotification;\n        context: { type: notification.type, content: notificationContent }\n      \"\n    ></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #defaultNotification let-type=\"type\" let-content=\"content\">\n  <stream-notification [type]=\"type\" [content]=\"content\"></stream-notification>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NotificationComponent, selector: "stream-notification", inputs: ["type", "content"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NotificationListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'stream-notification-list', template: "<div\n  data-testid=\"notification-list\"\n  class=\"str-chat str-chat__theme-{{\n    theme$ | async\n  }} str-chat__list-notifications\"\n>\n  <ng-container\n    *ngFor=\"let notification of notifications$ | async; trackBy: trackById\"\n  >\n    <ng-template #notificationContent>\n      <div\n        *ngIf=\"notification.text !== undefined\"\n        data-testclass=\"notification-content\"\n      >\n        {{ notification.text | translate : notification.translateParams }}\n      </div>\n      <ng-container *ngIf=\"notification.template !== undefined\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            notification.template;\n            context: getNotificationContentContext(notification)\n          \"\n        ></ng-container>\n      </ng-container>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.notificationTemplate$ | async) ||\n          defaultNotification;\n        context: { type: notification.type, content: notificationContent }\n      \"\n    ></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #defaultNotification let-type=\"type\" let-content=\"content\">\n  <stream-notification [type]=\"type\" [content]=\"content\"></stream-notification>\n</ng-template>\n" }]
@@ -3879,7 +3955,7 @@ class MessageBouncePromptComponent {
     }
 }
 MessageBouncePromptComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageBouncePromptComponent, deps: [{ token: ChannelService }, { token: CustomTemplatesService }, { token: MessageActionsService }], target: i0.ɵɵFactoryTarget.Component });
-MessageBouncePromptComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MessageBouncePromptComponent, selector: "stream-message-bounce-prompt", host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<ng-container\n  *ngTemplateOutlet=\"\n    (customTemplatesService.modalTemplate$ | async) || defaultModal;\n    context: {\n      message: message,\n      isOpen: isModalOpen,\n      isOpenChangeHandler: messageBounceModalOpenChanged,\n      content: modalContent\n    }\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    *ngIf=\"isOpen\"\n    [isOpen]=\"isOpen\"\n    [content]=\"content\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n  >\n  </stream-modal>\n</ng-template>\n\n<ng-template #modalContent>\n  <div\n    class=\"str-chat__message-bounce-prompt\"\n    data-testid=\"message-bounce-prompt\"\n  >\n    <div class=\"str-chat__message-bounce-prompt-header\">\n      {{\n        \"streamChat.This message did not meet our content guidelines\"\n          | translate\n      }}\n    </div>\n    <div class=\"str-chat__message-bounce-actions\">\n      <button\n        class=\"str-chat__message-bounce-edit\"\n        data-testid=\"message-bounce-edit\"\n        type=\"button\"\n        (click)=\"editMessage()\"\n        (keyup.enter)=\"editMessage()\"\n      >\n        {{ \"streamChat.Edit Message\" | translate }}\n      </button>\n      <button\n        class=\"str-chat__message-bounce-send\"\n        data-testid=\"message-bounce-send\"\n        (click)=\"resendMessage()\"\n        (keyup.enter)=\"resendMessage()\"\n      >\n        {{ \"streamChat.Send Anyway\" | translate }}\n      </button>\n      <button\n        class=\"str-chat__message-bounce-delete\"\n        data-testid=\"message-bounce-delete\"\n        (click)=\"deleteMessage()\"\n        (keyup.enter)=\"deleteMessage()\"\n      >\n        {{ \"streamChat.Delete\" | translate }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
+MessageBouncePromptComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MessageBouncePromptComponent, selector: "stream-message-bounce-prompt", host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<ng-container\n  *ngTemplateOutlet=\"\n    (customTemplatesService.modalTemplate$ | async) || defaultModal;\n    context: {\n      message: message,\n      isOpen: isModalOpen,\n      isOpenChangeHandler: messageBounceModalOpenChanged,\n      content: modalContent\n    }\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    *ngIf=\"isOpen\"\n    [isOpen]=\"isOpen\"\n    [content]=\"content\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n  >\n  </stream-modal>\n</ng-template>\n\n<ng-template #modalContent>\n  <div\n    class=\"str-chat__message-bounce-prompt\"\n    data-testid=\"message-bounce-prompt\"\n  >\n    <div class=\"str-chat__message-bounce-prompt-header\">\n      {{\n        \"streamChat.This message did not meet our content guidelines\"\n          | translate\n      }}\n    </div>\n    <div class=\"str-chat__message-bounce-actions\">\n      <button\n        class=\"str-chat__message-bounce-edit\"\n        data-testid=\"message-bounce-edit\"\n        type=\"button\"\n        (click)=\"editMessage()\"\n        (keyup.enter)=\"editMessage()\"\n      >\n        {{ \"streamChat.Edit Message\" | translate }}\n      </button>\n      <button\n        class=\"str-chat__message-bounce-send\"\n        data-testid=\"message-bounce-send\"\n        (click)=\"resendMessage()\"\n        (keyup.enter)=\"resendMessage()\"\n      >\n        {{ \"streamChat.Send Anyway\" | translate }}\n      </button>\n      <button\n        class=\"str-chat__message-bounce-delete\"\n        data-testid=\"message-bounce-delete\"\n        (click)=\"deleteMessage()\"\n        (keyup.enter)=\"deleteMessage()\"\n      >\n        {{ \"streamChat.Delete\" | translate }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageBouncePromptComponent, decorators: [{
             type: Component,
             args: [{ selector: 'stream-message-bounce-prompt', template: "<ng-container\n  *ngTemplateOutlet=\"\n    (customTemplatesService.modalTemplate$ | async) || defaultModal;\n    context: {\n      message: message,\n      isOpen: isModalOpen,\n      isOpenChangeHandler: messageBounceModalOpenChanged,\n      content: modalContent\n    }\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    *ngIf=\"isOpen\"\n    [isOpen]=\"isOpen\"\n    [content]=\"content\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n  >\n  </stream-modal>\n</ng-template>\n\n<ng-template #modalContent>\n  <div\n    class=\"str-chat__message-bounce-prompt\"\n    data-testid=\"message-bounce-prompt\"\n  >\n    <div class=\"str-chat__message-bounce-prompt-header\">\n      {{\n        \"streamChat.This message did not meet our content guidelines\"\n          | translate\n      }}\n    </div>\n    <div class=\"str-chat__message-bounce-actions\">\n      <button\n        class=\"str-chat__message-bounce-edit\"\n        data-testid=\"message-bounce-edit\"\n        type=\"button\"\n        (click)=\"editMessage()\"\n        (keyup.enter)=\"editMessage()\"\n      >\n        {{ \"streamChat.Edit Message\" | translate }}\n      </button>\n      <button\n        class=\"str-chat__message-bounce-send\"\n        data-testid=\"message-bounce-send\"\n        (click)=\"resendMessage()\"\n        (keyup.enter)=\"resendMessage()\"\n      >\n        {{ \"streamChat.Send Anyway\" | translate }}\n      </button>\n      <button\n        class=\"str-chat__message-bounce-delete\"\n        data-testid=\"message-bounce-delete\"\n        (click)=\"deleteMessage()\"\n        (keyup.enter)=\"deleteMessage()\"\n      >\n        {{ \"streamChat.Delete\" | translate }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n" }]
@@ -3914,7 +3990,7 @@ class ChannelComponent {
     }
 }
 ChannelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ChannelComponent, deps: [{ token: ChannelService }, { token: ThemeService }, { token: CustomTemplatesService }], target: i0.ɵɵFactoryTarget.Component });
-ChannelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ChannelComponent, selector: "stream-channel", ngImport: i0, template: "<div\n  class=\"str-chat str-chat-channel messaging str-chat__channel str-chat__theme-{{\n    theme$ | async\n  }}\"\n>\n  <div\n    *ngIf=\"\n      (isError$ | async) === false &&\n        (isInitializing$ | async) === false &&\n        (isActiveChannel$ | async) === true;\n      else noChannel\n    \"\n    class=\"str-chat__container\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.messageBouncePromptTemplate$ | async) ||\n        defaultMessageBouncePrompt\n      \"\n    ></ng-container>\n    <ng-template #defaultMessageBouncePrompt>\n      <stream-message-bounce-prompt></stream-message-bounce-prompt>\n    </ng-template>\n    <div class=\"str-chat__main-panel\">\n      <ng-content></ng-content>\n    </div>\n    <ng-content\n      *ngIf=\"isActiveThread$ | async\"\n      select='[name=\"thread\"]'\n    ></ng-content>\n  </div>\n  <ng-template #noChannel>\n    <div\n      *ngIf=\"\n        (isInitializing$ | async) === false &&\n        ((isError$ | async) === true || (isActiveChannel$ | async) === false)\n      \"\n      class=\"str-chat__empty-channel\"\n    >\n      <stream-icon icon=\"chat-bubble\"></stream-icon>\n      <p class=\"str-chat__empty-channel-text\">\n        {{ \"streamChat.No chats here yet\u2026\" | translate }}\n      </p>\n      <div class=\"str-chat__empty-channel-notifications\">\n        <stream-notification-list></stream-notification-list>\n      </div>\n    </div>\n    <div\n      *ngIf=\"\n        (isInitializing$ | async) === true &&\n        (isError$ | async) === false &&\n        (isActiveChannel$ | async) === false\n      \"\n      class=\"str-chat__loading-channel\"\n    >\n      <div class=\"str-chat__loading-channel-header\">\n        <div class=\"str-chat__loading-channel-header-avatar\"></div>\n        <div class=\"str-chat__loading-channel-header-end\">\n          <div class=\"str-chat__loading-channel-header-name\"></div>\n          <div class=\"str-chat__loading-channel-header-info\"></div>\n        </div>\n      </div>\n      <div class=\"str-chat__loading-channel-message-list\">\n        <div class=\"str-chat__loading-channel-message\">\n          <div class=\"str-chat__loading-channel-message-avatar\"></div>\n          <div class=\"str-chat__loading-channel-message-end\">\n            <div class=\"str-chat__loading-channel-message-sender\"></div>\n            <div class=\"str-chat__loading-channel-message-last-row\">\n              <div class=\"str-chat__loading-channel-message-text\"></div>\n              <div class=\"str-chat__loading-channel-message-date\"></div>\n            </div>\n          </div>\n        </div>\n        <div class=\"str-chat__loading-channel-message\">\n          <div class=\"str-chat__loading-channel-message-avatar\"></div>\n          <div class=\"str-chat__loading-channel-message-end\">\n            <div class=\"str-chat__loading-channel-message-sender\"></div>\n            <div class=\"str-chat__loading-channel-message-last-row\">\n              <div class=\"str-chat__loading-channel-message-text\"></div>\n              <div class=\"str-chat__loading-channel-message-date\"></div>\n            </div>\n          </div>\n        </div>\n        <div class=\"str-chat__loading-channel-message\">\n          <div class=\"str-chat__loading-channel-message-avatar\"></div>\n          <div class=\"str-chat__loading-channel-message-end\">\n            <div class=\"str-chat__loading-channel-message-sender\"></div>\n            <div class=\"str-chat__loading-channel-message-last-row\">\n              <div class=\"str-chat__loading-channel-message-text\"></div>\n              <div class=\"str-chat__loading-channel-message-date\"></div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"str-chat__loading-channel-message-input-row\">\n        <div class=\"str-chat__loading-channel-message-input\"></div>\n        <div class=\"str-chat__loading-channel-message-send\"></div>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "stream-icon", inputs: ["icon"] }, { kind: "component", type: NotificationListComponent, selector: "stream-notification-list" }, { kind: "component", type: MessageBouncePromptComponent, selector: "stream-message-bounce-prompt" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
+ChannelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ChannelComponent, selector: "stream-channel", ngImport: i0, template: "<div\n  class=\"str-chat str-chat-channel messaging str-chat__channel str-chat__theme-{{\n    theme$ | async\n  }}\"\n>\n  <div\n    *ngIf=\"\n      (isError$ | async) === false &&\n        (isInitializing$ | async) === false &&\n        (isActiveChannel$ | async) === true;\n      else noChannel\n    \"\n    class=\"str-chat__container\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.messageBouncePromptTemplate$ | async) ||\n        defaultMessageBouncePrompt\n      \"\n    ></ng-container>\n    <ng-template #defaultMessageBouncePrompt>\n      <stream-message-bounce-prompt></stream-message-bounce-prompt>\n    </ng-template>\n    <div class=\"str-chat__main-panel\">\n      <ng-content></ng-content>\n    </div>\n    <ng-content\n      *ngIf=\"isActiveThread$ | async\"\n      select='[name=\"thread\"]'\n    ></ng-content>\n  </div>\n  <ng-template #noChannel>\n    <div\n      *ngIf=\"\n        (isInitializing$ | async) === false &&\n        ((isError$ | async) === true || (isActiveChannel$ | async) === false)\n      \"\n      class=\"str-chat__empty-channel\"\n    >\n      <stream-icon icon=\"chat-bubble\"></stream-icon>\n      <p class=\"str-chat__empty-channel-text\">\n        {{ \"streamChat.No chats here yet\u2026\" | translate }}\n      </p>\n      <div class=\"str-chat__empty-channel-notifications\">\n        <stream-notification-list></stream-notification-list>\n      </div>\n    </div>\n    <div\n      *ngIf=\"\n        (isInitializing$ | async) === true &&\n        (isError$ | async) === false &&\n        (isActiveChannel$ | async) === false\n      \"\n      class=\"str-chat__loading-channel\"\n    >\n      <div class=\"str-chat__loading-channel-header\">\n        <div class=\"str-chat__loading-channel-header-avatar\"></div>\n        <div class=\"str-chat__loading-channel-header-end\">\n          <div class=\"str-chat__loading-channel-header-name\"></div>\n          <div class=\"str-chat__loading-channel-header-info\"></div>\n        </div>\n      </div>\n      <div class=\"str-chat__loading-channel-message-list\">\n        <div class=\"str-chat__loading-channel-message\">\n          <div class=\"str-chat__loading-channel-message-avatar\"></div>\n          <div class=\"str-chat__loading-channel-message-end\">\n            <div class=\"str-chat__loading-channel-message-sender\"></div>\n            <div class=\"str-chat__loading-channel-message-last-row\">\n              <div class=\"str-chat__loading-channel-message-text\"></div>\n              <div class=\"str-chat__loading-channel-message-date\"></div>\n            </div>\n          </div>\n        </div>\n        <div class=\"str-chat__loading-channel-message\">\n          <div class=\"str-chat__loading-channel-message-avatar\"></div>\n          <div class=\"str-chat__loading-channel-message-end\">\n            <div class=\"str-chat__loading-channel-message-sender\"></div>\n            <div class=\"str-chat__loading-channel-message-last-row\">\n              <div class=\"str-chat__loading-channel-message-text\"></div>\n              <div class=\"str-chat__loading-channel-message-date\"></div>\n            </div>\n          </div>\n        </div>\n        <div class=\"str-chat__loading-channel-message\">\n          <div class=\"str-chat__loading-channel-message-avatar\"></div>\n          <div class=\"str-chat__loading-channel-message-end\">\n            <div class=\"str-chat__loading-channel-message-sender\"></div>\n            <div class=\"str-chat__loading-channel-message-last-row\">\n              <div class=\"str-chat__loading-channel-message-text\"></div>\n              <div class=\"str-chat__loading-channel-message-date\"></div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"str-chat__loading-channel-message-input-row\">\n        <div class=\"str-chat__loading-channel-message-input\"></div>\n        <div class=\"str-chat__loading-channel-message-send\"></div>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "stream-icon", inputs: ["icon"] }, { kind: "component", type: NotificationListComponent, selector: "stream-notification-list" }, { kind: "component", type: MessageBouncePromptComponent, selector: "stream-message-bounce-prompt" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ChannelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'stream-channel', template: "<div\n  class=\"str-chat str-chat-channel messaging str-chat__channel str-chat__theme-{{\n    theme$ | async\n  }}\"\n>\n  <div\n    *ngIf=\"\n      (isError$ | async) === false &&\n        (isInitializing$ | async) === false &&\n        (isActiveChannel$ | async) === true;\n      else noChannel\n    \"\n    class=\"str-chat__container\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.messageBouncePromptTemplate$ | async) ||\n        defaultMessageBouncePrompt\n      \"\n    ></ng-container>\n    <ng-template #defaultMessageBouncePrompt>\n      <stream-message-bounce-prompt></stream-message-bounce-prompt>\n    </ng-template>\n    <div class=\"str-chat__main-panel\">\n      <ng-content></ng-content>\n    </div>\n    <ng-content\n      *ngIf=\"isActiveThread$ | async\"\n      select='[name=\"thread\"]'\n    ></ng-content>\n  </div>\n  <ng-template #noChannel>\n    <div\n      *ngIf=\"\n        (isInitializing$ | async) === false &&\n        ((isError$ | async) === true || (isActiveChannel$ | async) === false)\n      \"\n      class=\"str-chat__empty-channel\"\n    >\n      <stream-icon icon=\"chat-bubble\"></stream-icon>\n      <p class=\"str-chat__empty-channel-text\">\n        {{ \"streamChat.No chats here yet\u2026\" | translate }}\n      </p>\n      <div class=\"str-chat__empty-channel-notifications\">\n        <stream-notification-list></stream-notification-list>\n      </div>\n    </div>\n    <div\n      *ngIf=\"\n        (isInitializing$ | async) === true &&\n        (isError$ | async) === false &&\n        (isActiveChannel$ | async) === false\n      \"\n      class=\"str-chat__loading-channel\"\n    >\n      <div class=\"str-chat__loading-channel-header\">\n        <div class=\"str-chat__loading-channel-header-avatar\"></div>\n        <div class=\"str-chat__loading-channel-header-end\">\n          <div class=\"str-chat__loading-channel-header-name\"></div>\n          <div class=\"str-chat__loading-channel-header-info\"></div>\n        </div>\n      </div>\n      <div class=\"str-chat__loading-channel-message-list\">\n        <div class=\"str-chat__loading-channel-message\">\n          <div class=\"str-chat__loading-channel-message-avatar\"></div>\n          <div class=\"str-chat__loading-channel-message-end\">\n            <div class=\"str-chat__loading-channel-message-sender\"></div>\n            <div class=\"str-chat__loading-channel-message-last-row\">\n              <div class=\"str-chat__loading-channel-message-text\"></div>\n              <div class=\"str-chat__loading-channel-message-date\"></div>\n            </div>\n          </div>\n        </div>\n        <div class=\"str-chat__loading-channel-message\">\n          <div class=\"str-chat__loading-channel-message-avatar\"></div>\n          <div class=\"str-chat__loading-channel-message-end\">\n            <div class=\"str-chat__loading-channel-message-sender\"></div>\n            <div class=\"str-chat__loading-channel-message-last-row\">\n              <div class=\"str-chat__loading-channel-message-text\"></div>\n              <div class=\"str-chat__loading-channel-message-date\"></div>\n            </div>\n          </div>\n        </div>\n        <div class=\"str-chat__loading-channel-message\">\n          <div class=\"str-chat__loading-channel-message-avatar\"></div>\n          <div class=\"str-chat__loading-channel-message-end\">\n            <div class=\"str-chat__loading-channel-message-sender\"></div>\n            <div class=\"str-chat__loading-channel-message-last-row\">\n              <div class=\"str-chat__loading-channel-message-text\"></div>\n              <div class=\"str-chat__loading-channel-message-date\"></div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"str-chat__loading-channel-message-input-row\">\n        <div class=\"str-chat__loading-channel-message-input\"></div>\n        <div class=\"str-chat__loading-channel-message-send\"></div>\n      </div>\n    </div>\n  </ng-template>\n</div>\n" }]
@@ -4006,7 +4082,7 @@ class ChannelHeaderComponent {
     }
 }
 ChannelHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ChannelHeaderComponent, deps: [{ token: ChannelService }, { token: CustomTemplatesService }, { token: i0.ChangeDetectorRef }, { token: ChatClientService }], target: i0.ɵɵFactoryTarget.Component });
-ChannelHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ChannelHeaderComponent, selector: "stream-channel-header", ngImport: i0, template: "<div class=\"str-chat__header-livestream str-chat__channel-header\">\n  <ng-content></ng-content>\n  <stream-avatar-placeholder\n    type=\"channel\"\n    location=\"channel-header\"\n    imageUrl=\"{{ activeChannel?.data?.image }}\"\n    name=\"{{ avatarName }}\"\n    [channel]=\"activeChannel\"\n  ></stream-avatar-placeholder>\n  <div class=\"str-chat__header-livestream-left str-chat__channel-header-end\">\n    <p\n      data-testid=\"name\"\n      class=\"str-chat__header-livestream-left--title str-chat__channel-header-title\"\n    >\n      {{ displayText }}\n    </p>\n    <ng-container\n      *ngTemplateOutlet=\"\n        channelHeaderInfoTemplate || defaultChannelInfo;\n        context: getChannelInfoContext()\n      \"\n    ></ng-container>\n    <ng-template #defaultChannelInfo>\n      <p\n        data-testid=\"info\"\n        class=\"str-chat__header-livestream-left--members str-chat__channel-header-info\"\n      >\n        {{'streamChat.{{ memberCount }} members' | translate:memberCountParam}}\n        {{canReceiveConnectEvents ? ('streamChat.{{ watcherCount }} online' |\n        translate:watcherCountParam) : ''}}\n      </p>\n    </ng-template>\n  </div>\n  <ng-container *ngIf=\"channelActionsTemplate\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        channelActionsTemplate;\n        context: getChannelActionsContext()\n      \"\n    ></ng-container>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
+ChannelHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ChannelHeaderComponent, selector: "stream-channel-header", ngImport: i0, template: "<div class=\"str-chat__header-livestream str-chat__channel-header\">\n  <ng-content></ng-content>\n  <stream-avatar-placeholder\n    type=\"channel\"\n    location=\"channel-header\"\n    imageUrl=\"{{ activeChannel?.data?.image }}\"\n    name=\"{{ avatarName }}\"\n    [channel]=\"activeChannel\"\n  ></stream-avatar-placeholder>\n  <div class=\"str-chat__header-livestream-left str-chat__channel-header-end\">\n    <p\n      data-testid=\"name\"\n      class=\"str-chat__header-livestream-left--title str-chat__channel-header-title\"\n    >\n      {{ displayText }}\n    </p>\n    <ng-container\n      *ngTemplateOutlet=\"\n        channelHeaderInfoTemplate || defaultChannelInfo;\n        context: getChannelInfoContext()\n      \"\n    ></ng-container>\n    <ng-template #defaultChannelInfo>\n      <p\n        data-testid=\"info\"\n        class=\"str-chat__header-livestream-left--members str-chat__channel-header-info\"\n      >\n        {{'streamChat.{{ memberCount }} members' | translate:memberCountParam}}\n        {{canReceiveConnectEvents ? ('streamChat.{{ watcherCount }} online' |\n        translate:watcherCountParam) : ''}}\n      </p>\n    </ng-template>\n  </div>\n  <ng-container *ngIf=\"channelActionsTemplate\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        channelActionsTemplate;\n        context: getChannelActionsContext()\n      \"\n    ></ng-container>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ChannelHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'stream-channel-header', template: "<div class=\"str-chat__header-livestream str-chat__channel-header\">\n  <ng-content></ng-content>\n  <stream-avatar-placeholder\n    type=\"channel\"\n    location=\"channel-header\"\n    imageUrl=\"{{ activeChannel?.data?.image }}\"\n    name=\"{{ avatarName }}\"\n    [channel]=\"activeChannel\"\n  ></stream-avatar-placeholder>\n  <div class=\"str-chat__header-livestream-left str-chat__channel-header-end\">\n    <p\n      data-testid=\"name\"\n      class=\"str-chat__header-livestream-left--title str-chat__channel-header-title\"\n    >\n      {{ displayText }}\n    </p>\n    <ng-container\n      *ngTemplateOutlet=\"\n        channelHeaderInfoTemplate || defaultChannelInfo;\n        context: getChannelInfoContext()\n      \"\n    ></ng-container>\n    <ng-template #defaultChannelInfo>\n      <p\n        data-testid=\"info\"\n        class=\"str-chat__header-livestream-left--members str-chat__channel-header-info\"\n      >\n        {{'streamChat.{{ memberCount }} members' | translate:memberCountParam}}\n        {{canReceiveConnectEvents ? ('streamChat.{{ watcherCount }} online' |\n        translate:watcherCountParam) : ''}}\n      </p>\n    </ng-template>\n  </div>\n  <ng-container *ngIf=\"channelActionsTemplate\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        channelActionsTemplate;\n        context: getChannelActionsContext()\n      \"\n    ></ng-container>\n  </ng-container>\n</div>\n" }]
@@ -4023,30 +4099,6 @@ const isOnSeparateDate = (date1, date2) => {
     return false;
 };
 
-/**
- * The message service contains configuration options related to displaying the message content
- */
-class MessageService {
-    constructor() {
-        /**
-         * Decides if the message content should be formatted as text or HTML
-         *
-         * If you display messages as text the following parts are still be displayed as HTML:
-         * - user mentions -> you can customize this with your own template using the [`customTemplatesService.mentionTemplate$`](https://getstream.io/chat/docs/sdk/angular/services/CustomTemplatesService/#mentiontemplate)
-         * - links -> you can customize this by providing you own [`customLinkRenderer`](#customlinkrenderer) method
-         */
-        this.displayAs = 'text';
-    }
-}
-MessageService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-MessageService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return []; } });
-
 Dayjs.extend(calendar);
 Dayjs.extend(relativeTime);
 const parseDate = (date, format = 'date-time') => {
@@ -4258,7 +4310,7 @@ class ChannelPreviewComponent {
     }
 }
 ChannelPreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ChannelPreviewComponent, deps: [{ token: ChannelService }, { token: i0.NgZone }, { token: ChatClientService }, { token: MessageService }, { token: CustomTemplatesService }, { token: DateParserService }], target: i0.ɵɵFactoryTarget.Component });
-ChannelPreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ChannelPreviewComponent, selector: "stream-channel-preview", inputs: { channel: "channel" }, ngImport: i0, template: "<button\n  class=\"str-chat__channel-preview-messenger str-chat__channel-preview\"\n  data-testid=\"channel-preview-container\"\n  [class.str-chat__channel-preview-messenger--active]=\"isActive\"\n  [class.str-chat__channel-preview--active]=\"isActive\"\n  [class.str-chat__channel-preview-messenger--unread]=\"isUnread\"\n  (click)=\"setAsActiveChannel()\"\n>\n  <div class=\"str-chat__channel-preview-messenger--left\">\n    <stream-avatar-placeholder\n      type=\"channel\"\n      location=\"channel-preview\"\n      name=\"{{ avatarName }}\"\n      imageUrl=\"{{ avatarImage }}\"\n      [channel]=\"channel\"\n    ></stream-avatar-placeholder>\n  </div>\n  <div\n    class=\"str-chat__channel-preview-messenger--right str-chat__channel-preview-end\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.channelPreviewInfoTemplate$ | async) ||\n          defaultChannelInfo;\n        context: {\n          channelDisplayTitle: title,\n          channel: channel,\n          unreadCount: unreadCount,\n          latestMessageText: latestMessageText,\n          latestMessageStatus: latestMessageStatus,\n          latestMessageTime: latestMessageTime,\n          latestMessage: latestMessage\n        }\n      \"\n    ></ng-container>\n    <ng-template\n      #defaultChannelInfo\n      let-channelDisplayTitle=\"channelDisplayTitle\"\n      let-unreadCount=\"unreadCount\"\n      let-latestMessageText=\"latestMessageText\"\n      let-latestMessageStatus=\"latestMessageStatus\"\n      let-latestMessageTime=\"latestMessageTime\"\n    >\n      <div class=\"str-chat__channel-preview-end-first-row\">\n        <div class=\"str-chat__channel-preview-messenger--name\">\n          <span data-testid=\"channel-preview-title\">{{\n            channelDisplayTitle\n          }}</span>\n        </div>\n        <div\n          *ngIf=\"unreadCount\"\n          data-testid=\"unread-badge\"\n          class=\"str-chat__channel-preview-unread-badge\"\n        >\n          {{ unreadCount }}\n        </div>\n      </div>\n      <div class=\"str-chat__channel-preview-end-second-row\">\n        <div\n          data-testid=\"latest-message\"\n          class=\"str-chat__channel-preview-messenger--last-message\"\n        >\n          <ng-container *ngIf=\"displayAs === 'text'; else asHTML\">\n            {{ latestMessageText | translate }}\n          </ng-container>\n          <ng-template #asHTML>\n            <span\n              data-testid=\"html-content\"\n              [innerHTML]=\"latestMessageText | translate\"\n            ></span>\n          </ng-template>\n        </div>\n        <div\n          *ngIf=\"latestMessageStatus\"\n          data-testid=\"latest-message-status\"\n          class=\"str-chat__channel-preview-messenger--status str-chat__channel-preview-messenger--status-{{\n            latestMessageStatus\n          }}\"\n        >\n          <stream-icon-placeholder\n            [icon]=\"latestMessageStatus === 'delivered' ? 'delivered' : 'read'\"\n          ></stream-icon-placeholder>\n        </div>\n        <div\n          *ngIf=\"latestMessageTime\"\n          data-testid=\"latest-message-time\"\n          class=\"str-chat__channel-preview-messenger--time\"\n        >\n          {{ latestMessageTime }}\n        </div>\n      </div>\n    </ng-template>\n  </div>\n</button>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
+ChannelPreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ChannelPreviewComponent, selector: "stream-channel-preview", inputs: { channel: "channel" }, ngImport: i0, template: "<button\n  class=\"str-chat__channel-preview-messenger str-chat__channel-preview\"\n  data-testid=\"channel-preview-container\"\n  [class.str-chat__channel-preview-messenger--active]=\"isActive\"\n  [class.str-chat__channel-preview--active]=\"isActive\"\n  [class.str-chat__channel-preview-messenger--unread]=\"isUnread\"\n  (click)=\"setAsActiveChannel()\"\n>\n  <div class=\"str-chat__channel-preview-messenger--left\">\n    <stream-avatar-placeholder\n      type=\"channel\"\n      location=\"channel-preview\"\n      name=\"{{ avatarName }}\"\n      imageUrl=\"{{ avatarImage }}\"\n      [channel]=\"channel\"\n    ></stream-avatar-placeholder>\n  </div>\n  <div\n    class=\"str-chat__channel-preview-messenger--right str-chat__channel-preview-end\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.channelPreviewInfoTemplate$ | async) ||\n          defaultChannelInfo;\n        context: {\n          channelDisplayTitle: title,\n          channel: channel,\n          unreadCount: unreadCount,\n          latestMessageText: latestMessageText,\n          latestMessageStatus: latestMessageStatus,\n          latestMessageTime: latestMessageTime,\n          latestMessage: latestMessage\n        }\n      \"\n    ></ng-container>\n    <ng-template\n      #defaultChannelInfo\n      let-channelDisplayTitle=\"channelDisplayTitle\"\n      let-unreadCount=\"unreadCount\"\n      let-latestMessageText=\"latestMessageText\"\n      let-latestMessageStatus=\"latestMessageStatus\"\n      let-latestMessageTime=\"latestMessageTime\"\n    >\n      <div class=\"str-chat__channel-preview-end-first-row\">\n        <div class=\"str-chat__channel-preview-messenger--name\">\n          <span data-testid=\"channel-preview-title\">{{\n            channelDisplayTitle\n          }}</span>\n        </div>\n        <div\n          *ngIf=\"unreadCount\"\n          data-testid=\"unread-badge\"\n          class=\"str-chat__channel-preview-unread-badge\"\n        >\n          {{ unreadCount }}\n        </div>\n      </div>\n      <div class=\"str-chat__channel-preview-end-second-row\">\n        <div\n          data-testid=\"latest-message\"\n          class=\"str-chat__channel-preview-messenger--last-message\"\n        >\n          <ng-container *ngIf=\"displayAs === 'text'; else asHTML\">\n            {{ latestMessageText | translate }}\n          </ng-container>\n          <ng-template #asHTML>\n            <span\n              data-testid=\"html-content\"\n              [innerHTML]=\"latestMessageText | translate\"\n            ></span>\n          </ng-template>\n        </div>\n        <div\n          *ngIf=\"latestMessageStatus\"\n          data-testid=\"latest-message-status\"\n          class=\"str-chat__channel-preview-messenger--status str-chat__channel-preview-messenger--status-{{\n            latestMessageStatus\n          }}\"\n        >\n          <stream-icon-placeholder\n            [icon]=\"latestMessageStatus === 'delivered' ? 'delivered' : 'read'\"\n          ></stream-icon-placeholder>\n        </div>\n        <div\n          *ngIf=\"latestMessageTime\"\n          data-testid=\"latest-message-time\"\n          class=\"str-chat__channel-preview-messenger--time\"\n        >\n          {{ latestMessageTime }}\n        </div>\n      </div>\n    </ng-template>\n  </div>\n</button>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ChannelPreviewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'stream-channel-preview', template: "<button\n  class=\"str-chat__channel-preview-messenger str-chat__channel-preview\"\n  data-testid=\"channel-preview-container\"\n  [class.str-chat__channel-preview-messenger--active]=\"isActive\"\n  [class.str-chat__channel-preview--active]=\"isActive\"\n  [class.str-chat__channel-preview-messenger--unread]=\"isUnread\"\n  (click)=\"setAsActiveChannel()\"\n>\n  <div class=\"str-chat__channel-preview-messenger--left\">\n    <stream-avatar-placeholder\n      type=\"channel\"\n      location=\"channel-preview\"\n      name=\"{{ avatarName }}\"\n      imageUrl=\"{{ avatarImage }}\"\n      [channel]=\"channel\"\n    ></stream-avatar-placeholder>\n  </div>\n  <div\n    class=\"str-chat__channel-preview-messenger--right str-chat__channel-preview-end\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.channelPreviewInfoTemplate$ | async) ||\n          defaultChannelInfo;\n        context: {\n          channelDisplayTitle: title,\n          channel: channel,\n          unreadCount: unreadCount,\n          latestMessageText: latestMessageText,\n          latestMessageStatus: latestMessageStatus,\n          latestMessageTime: latestMessageTime,\n          latestMessage: latestMessage\n        }\n      \"\n    ></ng-container>\n    <ng-template\n      #defaultChannelInfo\n      let-channelDisplayTitle=\"channelDisplayTitle\"\n      let-unreadCount=\"unreadCount\"\n      let-latestMessageText=\"latestMessageText\"\n      let-latestMessageStatus=\"latestMessageStatus\"\n      let-latestMessageTime=\"latestMessageTime\"\n    >\n      <div class=\"str-chat__channel-preview-end-first-row\">\n        <div class=\"str-chat__channel-preview-messenger--name\">\n          <span data-testid=\"channel-preview-title\">{{\n            channelDisplayTitle\n          }}</span>\n        </div>\n        <div\n          *ngIf=\"unreadCount\"\n          data-testid=\"unread-badge\"\n          class=\"str-chat__channel-preview-unread-badge\"\n        >\n          {{ unreadCount }}\n        </div>\n      </div>\n      <div class=\"str-chat__channel-preview-end-second-row\">\n        <div\n          data-testid=\"latest-message\"\n          class=\"str-chat__channel-preview-messenger--last-message\"\n        >\n          <ng-container *ngIf=\"displayAs === 'text'; else asHTML\">\n            {{ latestMessageText | translate }}\n          </ng-container>\n          <ng-template #asHTML>\n            <span\n              data-testid=\"html-content\"\n              [innerHTML]=\"latestMessageText | translate\"\n            ></span>\n          </ng-template>\n        </div>\n        <div\n          *ngIf=\"latestMessageStatus\"\n          data-testid=\"latest-message-status\"\n          class=\"str-chat__channel-preview-messenger--status str-chat__channel-preview-messenger--status-{{\n            latestMessageStatus\n          }}\"\n        >\n          <stream-icon-placeholder\n            [icon]=\"latestMessageStatus === 'delivered' ? 'delivered' : 'read'\"\n          ></stream-icon-placeholder>\n        </div>\n        <div\n          *ngIf=\"latestMessageTime\"\n          data-testid=\"latest-message-time\"\n          class=\"str-chat__channel-preview-messenger--time\"\n        >\n          {{ latestMessageTime }}\n        </div>\n      </div>\n    </ng-template>\n  </div>\n</button>\n" }]
@@ -4334,7 +4386,7 @@ class PaginatedListComponent {
     }
 }
 PaginatedListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PaginatedListComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PaginatedListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PaginatedListComponent, selector: "stream-paginated-list", inputs: { items: "items", isLoading: "isLoading", hasMore: "hasMore", trackBy: "trackBy" }, outputs: { loadMore: "loadMore" }, queries: [{ propertyName: "itemTempalteRef", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div class=\"stream-chat__paginated-list\" #container>\n  <div\n    data-testid=\"item\"\n    class=\"stream-chat__paginated-list-item\"\n    *ngFor=\"let item of items; let index = index; trackBy: trackBy\"\n  >\n    <ng-template\n      *ngIf=\"itemTempalteRef\"\n      [ngTemplateOutlet]=\"itemTempalteRef\"\n      [ngTemplateOutletContext]=\"{ item: item, index: index }\"\n    ></ng-template>\n  </div>\n  <button\n    *ngIf=\"hasMore && !isScrollable\"\n    class=\"str-chat__load-more-button__button str-chat__cta-button\"\n    data-testid=\"load-more-button\"\n    [disabled]=\"isLoading\"\n    (click)=\"loadMore.emit()\"\n    (keyup.enter)=\"loadMore.emit()\"\n  >\n    <span>{{ \"Load more\" | translate }}</span>\n  </button>\n  <stream-loading-indicator-placeholder\n    data-testid=\"loading-indicator\"\n    *ngIf=\"isLoading\"\n  ></stream-loading-indicator-placeholder>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
+PaginatedListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PaginatedListComponent, selector: "stream-paginated-list", inputs: { items: "items", isLoading: "isLoading", hasMore: "hasMore", trackBy: "trackBy" }, outputs: { loadMore: "loadMore" }, queries: [{ propertyName: "itemTempalteRef", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div class=\"stream-chat__paginated-list\" #container>\n  <div\n    data-testid=\"item\"\n    class=\"stream-chat__paginated-list-item\"\n    *ngFor=\"let item of items; let index = index; trackBy: trackBy\"\n  >\n    <ng-template\n      *ngIf=\"itemTempalteRef\"\n      [ngTemplateOutlet]=\"itemTempalteRef\"\n      [ngTemplateOutletContext]=\"{ item: item, index: index }\"\n    ></ng-template>\n  </div>\n  <button\n    *ngIf=\"hasMore && !isScrollable\"\n    class=\"str-chat__load-more-button__button str-chat__cta-button\"\n    data-testid=\"load-more-button\"\n    [disabled]=\"isLoading\"\n    (click)=\"loadMore.emit()\"\n    (keyup.enter)=\"loadMore.emit()\"\n  >\n    <span>{{ \"Load more\" | translate }}</span>\n  </button>\n  <stream-loading-indicator-placeholder\n    data-testid=\"loading-indicator\"\n    *ngIf=\"isLoading\"\n  ></stream-loading-indicator-placeholder>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PaginatedListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'stream-paginated-list', template: "<div class=\"stream-chat__paginated-list\" #container>\n  <div\n    data-testid=\"item\"\n    class=\"stream-chat__paginated-list-item\"\n    *ngFor=\"let item of items; let index = index; trackBy: trackBy\"\n  >\n    <ng-template\n      *ngIf=\"itemTempalteRef\"\n      [ngTemplateOutlet]=\"itemTempalteRef\"\n      [ngTemplateOutletContext]=\"{ item: item, index: index }\"\n    ></ng-template>\n  </div>\n  <button\n    *ngIf=\"hasMore && !isScrollable\"\n    class=\"str-chat__load-more-button__button str-chat__cta-button\"\n    data-testid=\"load-more-button\"\n    [disabled]=\"isLoading\"\n    (click)=\"loadMore.emit()\"\n    (keyup.enter)=\"loadMore.emit()\"\n  >\n    <span>{{ \"Load more\" | translate }}</span>\n  </button>\n  <stream-loading-indicator-placeholder\n    data-testid=\"loading-indicator\"\n    *ngIf=\"isLoading\"\n  ></stream-loading-indicator-placeholder>\n</div>\n" }]
@@ -4388,7 +4440,7 @@ class ChannelListComponent {
     }
 }
 ChannelListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ChannelListComponent, deps: [{ token: ChannelService }, { token: CustomTemplatesService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
-ChannelListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ChannelListComponent, selector: "stream-channel-list", ngImport: i0, template: "<div\n  #container\n  data-testid=\"channel-list-container\"\n  class=\"str-chat str-chat-angular__channel-list str-chat__channel-list str-chat-channel-list messaging str-chat__theme-{{\n    theme$ | async\n  }}\"\n>\n  <div\n    *ngIf=\"\n      (isError$ | async) === false && (isInitializing$ | async) === false;\n      else statusIndicator\n    \"\n    class=\"str-chat__channel-list-messenger\"\n  >\n    <div class=\"str-chat__channel-list-messenger__main\">\n      <ng-content select=\"[channel-list-top]\"></ng-content>\n      <div\n        *ngIf=\"!(channels$ | async)?.length\"\n        class=\"str-chat__channel-list-empty\"\n      >\n        <stream-icon icon=\"chat-bubble\"></stream-icon>\n        <p data-testid=\"empty-channel-list-indicator\">\n          {{ \"streamChat.You have no channels currently\" | translate }}\n        </p>\n      </div>\n      <p\n        *ngIf=\"!(channels$ | async)?.length\"\n        class=\"str-chat__channel-list-empty-v1\"\n        data-testid=\"empty-channel-list-indicator\"\n      >\n        {{ \"streamChat.You have no channels currently\" | translate }}\n      </p>\n      <stream-paginated-list\n        [items]=\"(channels$ | async) ?? []\"\n        [hasMore]=\"(hasMoreChannels$ | async) ?? false\"\n        [isLoading]=\"isLoadingMoreChannels\"\n        (loadMore)=\"loadMoreChannels()\"\n        [trackBy]=\"trackByChannelId\"\n      >\n        <ng-template let-channel=\"item\">\n          <ng-template #defaultTemplate let-channelInput=\"channel\">\n            <stream-channel-preview\n              data-testclass=\"channel-preview\"\n              [channel]=\"channelInput\"\n            ></stream-channel-preview>\n          </ng-template>\n          <div>\n            <ng-container\n              *ngTemplateOutlet=\"\n                customChannelPreviewTemplate || defaultTemplate;\n                context: { channel: channel }\n              \"\n            ></ng-container>\n          </div>\n        </ng-template>\n      </stream-paginated-list>\n      <ng-content select=\"[channel-list-bottom]\"></ng-content>\n    </div>\n  </div>\n</div>\n\n<ng-template #statusIndicator>\n  <ng-container *ngIf=\"isError$ | async\">\n    <ng-container *ngTemplateOutlet=\"chatDown\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"isInitializing$ | async\">\n    <ng-container *ngTemplateOutlet=\"loadingChannels\"></ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #chatDown>\n  <div data-testid=\"chatdown-container\" class=\"str-chat__down\">\n    <ng-container *ngTemplateOutlet=\"loadingChannels\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #loadingChannels>\n  <div\n    data-testid=\"loading-indicator-full-size\"\n    class=\"str-chat__loading-channels\"\n  >\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #loadingChannel>\n  <div\n    class=\"str-chat__loading-channels-item str-chat__channel-preview-loading\"\n  >\n    <div class=\"str-chat__loading-channels-avatar\"></div>\n    <div\n      class=\"str-chat__loading-channels-meta str-chat__channel-preview-end-loading\"\n    >\n      <div class=\"str-chat__loading-channels-username\"></div>\n      <div class=\"str-chat__loading-channels-status\"></div>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "stream-icon", inputs: ["icon"] }, { kind: "component", type: ChannelPreviewComponent, selector: "stream-channel-preview", inputs: ["channel"] }, { kind: "component", type: PaginatedListComponent, selector: "stream-paginated-list", inputs: ["items", "isLoading", "hasMore", "trackBy"], outputs: ["loadMore"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
+ChannelListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ChannelListComponent, selector: "stream-channel-list", ngImport: i0, template: "<div\n  #container\n  data-testid=\"channel-list-container\"\n  class=\"str-chat str-chat-angular__channel-list str-chat__channel-list str-chat-channel-list messaging str-chat__theme-{{\n    theme$ | async\n  }}\"\n>\n  <div\n    *ngIf=\"\n      (isError$ | async) === false && (isInitializing$ | async) === false;\n      else statusIndicator\n    \"\n    class=\"str-chat__channel-list-messenger\"\n  >\n    <div class=\"str-chat__channel-list-messenger__main\">\n      <ng-content select=\"[channel-list-top]\"></ng-content>\n      <div\n        *ngIf=\"!(channels$ | async)?.length\"\n        class=\"str-chat__channel-list-empty\"\n      >\n        <stream-icon icon=\"chat-bubble\"></stream-icon>\n        <p data-testid=\"empty-channel-list-indicator\">\n          {{ \"streamChat.You have no channels currently\" | translate }}\n        </p>\n      </div>\n      <p\n        *ngIf=\"!(channels$ | async)?.length\"\n        class=\"str-chat__channel-list-empty-v1\"\n        data-testid=\"empty-channel-list-indicator\"\n      >\n        {{ \"streamChat.You have no channels currently\" | translate }}\n      </p>\n      <stream-paginated-list\n        [items]=\"(channels$ | async) ?? []\"\n        [hasMore]=\"(hasMoreChannels$ | async) ?? false\"\n        [isLoading]=\"isLoadingMoreChannels\"\n        (loadMore)=\"loadMoreChannels()\"\n        [trackBy]=\"trackByChannelId\"\n      >\n        <ng-template let-channel=\"item\">\n          <ng-template #defaultTemplate let-channelInput=\"channel\">\n            <stream-channel-preview\n              data-testclass=\"channel-preview\"\n              [channel]=\"channelInput\"\n            ></stream-channel-preview>\n          </ng-template>\n          <div>\n            <ng-container\n              *ngTemplateOutlet=\"\n                customChannelPreviewTemplate || defaultTemplate;\n                context: { channel: channel }\n              \"\n            ></ng-container>\n          </div>\n        </ng-template>\n      </stream-paginated-list>\n      <ng-content select=\"[channel-list-bottom]\"></ng-content>\n    </div>\n  </div>\n</div>\n\n<ng-template #statusIndicator>\n  <ng-container *ngIf=\"isError$ | async\">\n    <ng-container *ngTemplateOutlet=\"chatDown\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"isInitializing$ | async\">\n    <ng-container *ngTemplateOutlet=\"loadingChannels\"></ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #chatDown>\n  <div data-testid=\"chatdown-container\" class=\"str-chat__down\">\n    <ng-container *ngTemplateOutlet=\"loadingChannels\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #loadingChannels>\n  <div\n    data-testid=\"loading-indicator-full-size\"\n    class=\"str-chat__loading-channels\"\n  >\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #loadingChannel>\n  <div\n    class=\"str-chat__loading-channels-item str-chat__channel-preview-loading\"\n  >\n    <div class=\"str-chat__loading-channels-avatar\"></div>\n    <div\n      class=\"str-chat__loading-channels-meta str-chat__channel-preview-end-loading\"\n    >\n      <div class=\"str-chat__loading-channels-username\"></div>\n      <div class=\"str-chat__loading-channels-status\"></div>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "stream-icon", inputs: ["icon"] }, { kind: "component", type: ChannelPreviewComponent, selector: "stream-channel-preview", inputs: ["channel"] }, { kind: "component", type: PaginatedListComponent, selector: "stream-paginated-list", inputs: ["items", "isLoading", "hasMore", "trackBy"], outputs: ["loadMore"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ChannelListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'stream-channel-list', template: "<div\n  #container\n  data-testid=\"channel-list-container\"\n  class=\"str-chat str-chat-angular__channel-list str-chat__channel-list str-chat-channel-list messaging str-chat__theme-{{\n    theme$ | async\n  }}\"\n>\n  <div\n    *ngIf=\"\n      (isError$ | async) === false && (isInitializing$ | async) === false;\n      else statusIndicator\n    \"\n    class=\"str-chat__channel-list-messenger\"\n  >\n    <div class=\"str-chat__channel-list-messenger__main\">\n      <ng-content select=\"[channel-list-top]\"></ng-content>\n      <div\n        *ngIf=\"!(channels$ | async)?.length\"\n        class=\"str-chat__channel-list-empty\"\n      >\n        <stream-icon icon=\"chat-bubble\"></stream-icon>\n        <p data-testid=\"empty-channel-list-indicator\">\n          {{ \"streamChat.You have no channels currently\" | translate }}\n        </p>\n      </div>\n      <p\n        *ngIf=\"!(channels$ | async)?.length\"\n        class=\"str-chat__channel-list-empty-v1\"\n        data-testid=\"empty-channel-list-indicator\"\n      >\n        {{ \"streamChat.You have no channels currently\" | translate }}\n      </p>\n      <stream-paginated-list\n        [items]=\"(channels$ | async) ?? []\"\n        [hasMore]=\"(hasMoreChannels$ | async) ?? false\"\n        [isLoading]=\"isLoadingMoreChannels\"\n        (loadMore)=\"loadMoreChannels()\"\n        [trackBy]=\"trackByChannelId\"\n      >\n        <ng-template let-channel=\"item\">\n          <ng-template #defaultTemplate let-channelInput=\"channel\">\n            <stream-channel-preview\n              data-testclass=\"channel-preview\"\n              [channel]=\"channelInput\"\n            ></stream-channel-preview>\n          </ng-template>\n          <div>\n            <ng-container\n              *ngTemplateOutlet=\"\n                customChannelPreviewTemplate || defaultTemplate;\n                context: { channel: channel }\n              \"\n            ></ng-container>\n          </div>\n        </ng-template>\n      </stream-paginated-list>\n      <ng-content select=\"[channel-list-bottom]\"></ng-content>\n    </div>\n  </div>\n</div>\n\n<ng-template #statusIndicator>\n  <ng-container *ngIf=\"isError$ | async\">\n    <ng-container *ngTemplateOutlet=\"chatDown\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"isInitializing$ | async\">\n    <ng-container *ngTemplateOutlet=\"loadingChannels\"></ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #chatDown>\n  <div data-testid=\"chatdown-container\" class=\"str-chat__down\">\n    <ng-container *ngTemplateOutlet=\"loadingChannels\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #loadingChannels>\n  <div\n    data-testid=\"loading-indicator-full-size\"\n    class=\"str-chat__loading-channels\"\n  >\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #loadingChannel>\n  <div\n    class=\"str-chat__loading-channels-item str-chat__channel-preview-loading\"\n  >\n    <div class=\"str-chat__loading-channels-avatar\"></div>\n    <div\n      class=\"str-chat__loading-channels-meta str-chat__channel-preview-end-loading\"\n    >\n      <div class=\"str-chat__loading-channels-username\"></div>\n      <div class=\"str-chat__loading-channels-status\"></div>\n    </div>\n  </div>\n</ng-template>\n" }]
@@ -4675,7 +4727,7 @@ class VoiceRecordingComponent {
     }
 }
 VoiceRecordingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: VoiceRecordingComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-VoiceRecordingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: VoiceRecordingComponent, selector: "stream-voice-recording", inputs: { attachment: "attachment" }, viewQueries: [{ propertyName: "audioElement", first: true, predicate: ["audioElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"str-chat__message-attachment__voice-recording-widget\"\n  data-testid=\"voice-recording-widget\"\n  [class.str-chat__message-attachment__voice-recording-widget--error]=\"isError\"\n>\n  <!-- Empty event handlers to trigger change detection -->\n  <audio\n    #audioElement\n    (play)=\"(null)\"\n    (pause)=\"(null)\"\n    (ended)=\"(null)\"\n    (error)=\"isError = true\"\n    (abort)=\"isError = true\"\n  >\n    <source\n      data-testid=\"audio-source\"\n      [src]=\"attachment?.asset_url\"\n      [type]=\"attachment?.mime_type\"\n    />\n  </audio>\n  <button\n    class=\"str-chat__message-attachment-audio-widget--play-button\"\n    data-testid=\"play-button\"\n    (click)=\"togglePlay()\"\n  >\n    <stream-icon-placeholder\n      [icon]=\"audioElement?.paused ? 'play' : 'pause'\"\n    ></stream-icon-placeholder>\n  </button>\n  <div class=\"str-chat__message-attachment__voice-recording-widget__metadata\">\n    <div class=\"str-chat__message-attachment-voice-recording-widget--first-row\">\n      <div\n        class=\"str-chat__message-attachment__voice-recording-widget__title\"\n        data-testid=\"voice-recording-title\"\n        [title]=\"attachment?.title\"\n      >\n        {{ attachment?.title }}\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"isError; else state\">\n      <div\n        class=\"str-chat__message-attachment__voice-recording-widget__error-message\"\n      >\n        <stream-icon-placeholder icon=\"error\"></stream-icon-placeholder>\n        <span data-testid=\"error-message\">{{\n          \"streamChat.Error playing audio\" | translate\n        }}</span>\n      </div>\n    </ng-container>\n    <ng-template #state>\n      <div\n        class=\"str-chat__message-attachment__voice-recording-widget__audio-state\"\n      >\n        <div\n          class=\"str-chat__message-attachment__voice-recording-widget__timer\"\n        >\n          <span\n            *ngIf=\"!!attachment?.duration; else fileSizeTemplate\"\n            data-testid=\"duration\"\n          >\n            {{\n              secondsElapsed > 0 || !audioElement.paused\n                ? secondsElapsedFormatted\n                : durationFormatted\n            }}</span\n          >\n          <ng-template #fileSizeTemplate>\n            <span\n              class=\"str-chat__message-attachment-file--item-size\"\n              data-testid=\"file-size-indicator\"\n            >\n              {{ fileSize }}\n            </span>\n          </ng-template>\n        </div>\n        <stream-voice-recording-wavebar\n          *ngIf=\"attachment?.waveform_data && attachment?.duration\"\n          [waveFormData]=\"attachment?.waveform_data || []\"\n          [duration]=\"attachment?.duration\"\n          [audioElement]=\"audioElement\"\n        ></stream-voice-recording-wavebar>\n      </div>\n    </ng-template>\n  </div>\n  <div\n    class=\"str-chat__message-attachment__voice-recording-widget__right-section\"\n  >\n    <button\n      *ngIf=\"!audioElement?.paused; else fileIcon\"\n      class=\"str-chat__message_attachment__playback-rate-button\"\n      data-testid=\"playback-rate-button\"\n      (click)=\"setPlaybackRate()\"\n    >\n      {{ audioElement?.playbackRate | number : \"1.1-1\" }}x\n    </button>\n    <ng-template #fileIcon>\n      <stream-icon-placeholder\n        class=\"str-chat__attachment-type-icon\"\n        icon=\"audio-file\"\n      ></stream-icon-placeholder>\n    </ng-template>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "component", type: VoiceRecordingWavebarComponent, selector: "stream-voice-recording-wavebar", inputs: ["audioElement", "waveFormData", "duration"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
+VoiceRecordingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: VoiceRecordingComponent, selector: "stream-voice-recording", inputs: { attachment: "attachment" }, viewQueries: [{ propertyName: "audioElement", first: true, predicate: ["audioElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"str-chat__message-attachment__voice-recording-widget\"\n  data-testid=\"voice-recording-widget\"\n  [class.str-chat__message-attachment__voice-recording-widget--error]=\"isError\"\n>\n  <!-- Empty event handlers to trigger change detection -->\n  <audio\n    #audioElement\n    (play)=\"(null)\"\n    (pause)=\"(null)\"\n    (ended)=\"(null)\"\n    (error)=\"isError = true\"\n    (abort)=\"isError = true\"\n  >\n    <source\n      data-testid=\"audio-source\"\n      [src]=\"attachment?.asset_url\"\n      [type]=\"attachment?.mime_type\"\n    />\n  </audio>\n  <button\n    class=\"str-chat__message-attachment-audio-widget--play-button\"\n    data-testid=\"play-button\"\n    (click)=\"togglePlay()\"\n  >\n    <stream-icon-placeholder\n      [icon]=\"audioElement?.paused ? 'play' : 'pause'\"\n    ></stream-icon-placeholder>\n  </button>\n  <div class=\"str-chat__message-attachment__voice-recording-widget__metadata\">\n    <div class=\"str-chat__message-attachment-voice-recording-widget--first-row\">\n      <div\n        class=\"str-chat__message-attachment__voice-recording-widget__title\"\n        data-testid=\"voice-recording-title\"\n        [title]=\"attachment?.title\"\n      >\n        {{ attachment?.title }}\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"isError; else state\">\n      <div\n        class=\"str-chat__message-attachment__voice-recording-widget__error-message\"\n      >\n        <stream-icon-placeholder icon=\"error\"></stream-icon-placeholder>\n        <span data-testid=\"error-message\">{{\n          \"streamChat.Error playing audio\" | translate\n        }}</span>\n      </div>\n    </ng-container>\n    <ng-template #state>\n      <div\n        class=\"str-chat__message-attachment__voice-recording-widget__audio-state\"\n      >\n        <div\n          class=\"str-chat__message-attachment__voice-recording-widget__timer\"\n        >\n          <span\n            *ngIf=\"!!attachment?.duration; else fileSizeTemplate\"\n            data-testid=\"duration\"\n          >\n            {{\n              secondsElapsed > 0 || !audioElement.paused\n                ? secondsElapsedFormatted\n                : durationFormatted\n            }}</span\n          >\n          <ng-template #fileSizeTemplate>\n            <span\n              class=\"str-chat__message-attachment-file--item-size\"\n              data-testid=\"file-size-indicator\"\n            >\n              {{ fileSize }}\n            </span>\n          </ng-template>\n        </div>\n        <stream-voice-recording-wavebar\n          *ngIf=\"attachment?.waveform_data && attachment?.duration\"\n          [waveFormData]=\"attachment?.waveform_data || []\"\n          [duration]=\"attachment?.duration\"\n          [audioElement]=\"audioElement\"\n        ></stream-voice-recording-wavebar>\n      </div>\n    </ng-template>\n  </div>\n  <div\n    class=\"str-chat__message-attachment__voice-recording-widget__right-section\"\n  >\n    <button\n      *ngIf=\"!audioElement?.paused; else fileIcon\"\n      class=\"str-chat__message_attachment__playback-rate-button\"\n      data-testid=\"playback-rate-button\"\n      (click)=\"setPlaybackRate()\"\n    >\n      {{ audioElement?.playbackRate | number : \"1.1-1\" }}x\n    </button>\n    <ng-template #fileIcon>\n      <stream-icon-placeholder\n        class=\"str-chat__attachment-type-icon\"\n        icon=\"audio-file\"\n      ></stream-icon-placeholder>\n    </ng-template>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "component", type: VoiceRecordingWavebarComponent, selector: "stream-voice-recording-wavebar", inputs: ["audioElement", "waveFormData", "duration"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: VoiceRecordingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'stream-voice-recording', template: "<div\n  class=\"str-chat__message-attachment__voice-recording-widget\"\n  data-testid=\"voice-recording-widget\"\n  [class.str-chat__message-attachment__voice-recording-widget--error]=\"isError\"\n>\n  <!-- Empty event handlers to trigger change detection -->\n  <audio\n    #audioElement\n    (play)=\"(null)\"\n    (pause)=\"(null)\"\n    (ended)=\"(null)\"\n    (error)=\"isError = true\"\n    (abort)=\"isError = true\"\n  >\n    <source\n      data-testid=\"audio-source\"\n      [src]=\"attachment?.asset_url\"\n      [type]=\"attachment?.mime_type\"\n    />\n  </audio>\n  <button\n    class=\"str-chat__message-attachment-audio-widget--play-button\"\n    data-testid=\"play-button\"\n    (click)=\"togglePlay()\"\n  >\n    <stream-icon-placeholder\n      [icon]=\"audioElement?.paused ? 'play' : 'pause'\"\n    ></stream-icon-placeholder>\n  </button>\n  <div class=\"str-chat__message-attachment__voice-recording-widget__metadata\">\n    <div class=\"str-chat__message-attachment-voice-recording-widget--first-row\">\n      <div\n        class=\"str-chat__message-attachment__voice-recording-widget__title\"\n        data-testid=\"voice-recording-title\"\n        [title]=\"attachment?.title\"\n      >\n        {{ attachment?.title }}\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"isError; else state\">\n      <div\n        class=\"str-chat__message-attachment__voice-recording-widget__error-message\"\n      >\n        <stream-icon-placeholder icon=\"error\"></stream-icon-placeholder>\n        <span data-testid=\"error-message\">{{\n          \"streamChat.Error playing audio\" | translate\n        }}</span>\n      </div>\n    </ng-container>\n    <ng-template #state>\n      <div\n        class=\"str-chat__message-attachment__voice-recording-widget__audio-state\"\n      >\n        <div\n          class=\"str-chat__message-attachment__voice-recording-widget__timer\"\n        >\n          <span\n            *ngIf=\"!!attachment?.duration; else fileSizeTemplate\"\n            data-testid=\"duration\"\n          >\n            {{\n              secondsElapsed > 0 || !audioElement.paused\n                ? secondsElapsedFormatted\n                : durationFormatted\n            }}</span\n          >\n          <ng-template #fileSizeTemplate>\n            <span\n              class=\"str-chat__message-attachment-file--item-size\"\n              data-testid=\"file-size-indicator\"\n            >\n              {{ fileSize }}\n            </span>\n          </ng-template>\n        </div>\n        <stream-voice-recording-wavebar\n          *ngIf=\"attachment?.waveform_data && attachment?.duration\"\n          [waveFormData]=\"attachment?.waveform_data || []\"\n          [duration]=\"attachment?.duration\"\n          [audioElement]=\"audioElement\"\n        ></stream-voice-recording-wavebar>\n      </div>\n    </ng-template>\n  </div>\n  <div\n    class=\"str-chat__message-attachment__voice-recording-widget__right-section\"\n  >\n    <button\n      *ngIf=\"!audioElement?.paused; else fileIcon\"\n      class=\"str-chat__message_attachment__playback-rate-button\"\n      data-testid=\"playback-rate-button\"\n      (click)=\"setPlaybackRate()\"\n    >\n      {{ audioElement?.playbackRate | number : \"1.1-1\" }}x\n    </button>\n    <ng-template #fileIcon>\n      <stream-icon-placeholder\n        class=\"str-chat__attachment-type-icon\"\n        icon=\"audio-file\"\n      ></stream-icon-placeholder>\n    </ng-template>\n  </div>\n</div>\n" }]
@@ -4690,10 +4742,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
  * The `AttachmentList` component displays the attachments of a message
  */
 class AttachmentListComponent {
-    constructor(customTemplatesService, channelService, attachmentConfigurationService) {
+    constructor(customTemplatesService, channelService, attachmentConfigurationService, messageService) {
         this.customTemplatesService = customTemplatesService;
         this.channelService = channelService;
         this.attachmentConfigurationService = attachmentConfigurationService;
+        this.messageService = messageService;
         /**
          * The attachments to display
          */
@@ -4704,28 +4757,47 @@ class AttachmentListComponent {
         this.imageModalStateChange = new EventEmitter();
         this.class = 'str-chat__attachment-list-angular-host';
         this.orderedAttachments = [];
+        this.customAttachments = [];
         this.imagesToView = [];
         this.imagesToViewCurrentIndex = 0;
         this.attachmentConfigurations = new Map();
+        this.subscriptions = [];
+    }
+    ngOnInit() {
+        this.subscriptions.push(this.customTemplatesService.customAttachmentListTemplate$.subscribe((t) => (this.customAttachmentsTemplate = t)));
     }
     ngOnChanges(changes) {
         if (changes.attachments) {
-            const images = this.attachments.filter(this.isImage);
+            const builtInAttachments = [];
+            const customAttachments = [];
+            this.attachments.forEach((a) => {
+                if (this.messageService.isCustomAttachment(a)) {
+                    customAttachments.push(a);
+                }
+                else {
+                    builtInAttachments.push(a);
+                }
+            });
+            const images = builtInAttachments.filter(this.isImage);
             const containsGallery = images.length >= 2;
             this.orderedAttachments = [
                 ...(containsGallery ? this.createGallery(images) : images),
-                ...this.attachments.filter((a) => this.isVideo(a)),
-                ...this.attachments.filter((a) => this.isVoiceMessage(a)),
-                ...this.attachments.filter((a) => this.isFile(a)),
+                ...builtInAttachments.filter((a) => this.isVideo(a)),
+                ...builtInAttachments.filter((a) => this.isVoiceMessage(a)),
+                ...builtInAttachments.filter((a) => this.isFile(a)),
             ];
             this.attachmentConfigurations = new Map();
             // Display link attachments only if there are no other attachments
             // Giphy-s always sent without other attachments
             if (this.orderedAttachments.length === 0) {
-                this.orderedAttachments.push(...this.attachments.filter((a) => this.isCard(a)));
+                this.orderedAttachments.push(...builtInAttachments.filter((a) => this.isCard(a)));
             }
+            this.customAttachments = customAttachments;
         }
     }
+    ngOnDestroy() {
+        this.subscriptions.forEach((s) => s.unsubscribe());
+    }
     trackByUrl(_, attachment) {
         return (attachment.image_url ||
             attachment.img_url ||
@@ -4857,12 +4929,12 @@ class AttachmentListComponent {
         this.imagesToView = [];
     }
 }
-AttachmentListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AttachmentListComponent, deps: [{ token: CustomTemplatesService }, { token: ChannelService }, { token: AttachmentConfigurationService }], target: i0.ɵɵFactoryTarget.Component });
-AttachmentListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AttachmentListComponent, selector: "stream-attachment-list", inputs: { messageId: "messageId", parentMessageId: "parentMessageId", attachments: "attachments" }, outputs: { imageModalStateChange: "imageModalStateChange" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div *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--voice-recording]=\"\n        isVoiceMessage(attachment)\n      \"\n      [class.str-chat__message-attachment-with-actions]=\"\n        attachment.actions && attachment.actions.length > 0\n      \"\n      [class.str-chat__message-attachment--svg-image]=\"isSvg(attachment)\"\n    >\n      <ng-container *ngIf=\"isImage(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.imageAttachmentTemplate$ | async) ||\n              defaultImage;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultImage let-attachmentContext=\"attachment\">\n          <img\n            #imgElement\n            class=\"str-chat__message-attachment--img\"\n            data-testclass=\"image\"\n            [src]=\"\n              getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).url\n            \"\n            [alt]=\"attachmentContext?.fallback\"\n            [ngStyle]=\"{\n              height: getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).height,\n              width: getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).width,\n              '--original-height': getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).originalHeight,\n              '--original-width': getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).originalWidth\n            }\"\n            (click)=\"openImageModal([attachmentContext])\"\n            (keyup.enter)=\"openImageModal([attachmentContext])\"\n          />\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isGallery(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.galleryAttachmentTemplate$ | async) ||\n              defaultGallery;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultGallery let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__gallery\"\n            data-testid=\"image-gallery\"\n            [class.str-chat__gallery--square]=\"\n              (attachmentContext?.images)!.length > 3\n            \"\n            [class.str-chat__gallery-two-rows]=\"\n              (attachmentContext?.images)!.length > 2\n            \"\n          >\n            <ng-container\n              *ngFor=\"\n                let galleryImage of attachmentContext.images;\n                let index = index;\n                let isLast = last;\n                trackBy: trackByImageUrl\n              \"\n            >\n              <button\n                *ngIf=\"index < 3 || (index === 3 && isLast)\"\n                class=\"str-chat__gallery-image\"\n                data-testclass=\"gallery-image\"\n                [class.str-chat__message-attachment--svg-image]=\"\n                  isSvg(galleryImage)\n                \"\n                (click)=\"openImageModal(attachmentContext.images!, index)\"\n                (keyup.enter)=\"openImageModal(attachmentContext.images!, index)\"\n              >\n                <img\n                  #imgElement\n                  fetchpriority=\"low\"\n                  loading=\"lazy\"\n                  [src]=\"\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).url\n                  \"\n                  [alt]=\"galleryImage.fallback\"\n                  [style.--original-height]=\"\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).originalHeight\n                  \"\n                  [style.--original-width]=\"\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).originalWidth\n                  \"\n                  [ngStyle]=\"{\n                    height: getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).height,\n                    width: getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).width\n                  }\"\n                />\n              </button>\n              <button\n                *ngIf=\"index === 3 && !isLast\"\n                #element\n                class=\"str-chat__gallery-placeholder\"\n                data-testclass=\"gallery-image\"\n                data-testid=\"more-image-button\"\n                [class.str-chat__message-attachment--svg-image]=\"\n                  isSvg(galleryImage)\n                \"\n                [ngStyle]=\"{\n                  'background-image':\n                    'url(' +\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      element\n                    ).url +\n                    ')',\n                  height: getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).height,\n                  width: getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).width,\n                  '--original-height': getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).originalHeight,\n                  '--original-width': getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).originalWidth\n                }\"\n                (click)=\"openImageModal(attachmentContext.images!, index)\"\n                (keyup.enter)=\"openImageModal(attachmentContext.images!, index)\"\n              >\n                <p\n                  [innerHTML]=\"\n                    'streamChat.{{ imageCount }} more'\n                      | translate\n                        : { imageCount: attachmentContext!.images!.length - 4 }\n                  \"\n                ></p>\n              </button>\n            </ng-container>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isVideo(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.videoAttachmentTemplate$ | async) ||\n              defaultVideo;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultVideo let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__player-wrapper\"\n            data-testclass=\"video-attachment-parent\"\n            [style.--original-height]=\"\n              getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                .originalHeight\n            \"\n            [style.--original-width]=\"\n              getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                .originalWidth\n            \"\n            [ngStyle]=\"{\n              height: getVideoAttachmentConfiguration(\n                attachmentContext,\n                videoElement\n              ).height,\n              width: getVideoAttachmentConfiguration(\n                attachmentContext,\n                videoElement\n              ).width\n            }\"\n          >\n            <video\n              #videoElement\n              class=\"str-chat__video-angular\"\n              controls\n              data-testclass=\"video-attachment\"\n              [src]=\"\n                getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                  .url\n              \"\n              [poster]=\"\n                getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                  .thumbUrl\n              \"\n            ></video>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isFile(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.fileAttachmentTemplate$ | async) ||\n              defaultFile;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultFile let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__message-attachment-file--item str-chat-angular__message-attachment-file-single\"\n          >\n            <stream-icon-placeholder\n              class=\"str-chat__attachment-type-icon\"\n              icon=\"unspecified-filetype\"\n            ></stream-icon-placeholder>\n            <div class=\"str-chat__message-attachment-file--item-text\">\n              <a\n                class=\"str-chat__message-attachment-file--item-first-row\"\n                data-testclass=\"file-link\"\n                target=\"_blank\"\n                href=\"{{ attachmentContext.asset_url }}\"\n              >\n                <div\n                  data-testclass=\"file-title\"\n                  class=\"str-chat__message-attachment-file--item-name\"\n                >\n                  {{ attachmentContext.title }}\n                </div>\n                <stream-icon-placeholder\n                  class=\"str-chat__message-attachment-download-icon\"\n                  icon=\"download\"\n                ></stream-icon-placeholder>\n              </a>\n              <span\n                *ngIf=\"hasFileSize(attachmentContext)\"\n                class=\"str-chat__message-attachment-file--item-size\"\n                data-testclass=\"size\"\n                >{{ getFileSize(attachmentContext) }}</span\n              >\n            </div>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isVoiceMessage(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.voiceRecordingAttachmentTemplate$\n              | async) || defaultRecording;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultRecording>\n          <stream-voice-recording\n            data-testclass=\"voice-recording\"\n            [attachment]=\"attachment\"\n          ></stream-voice-recording>\n        </ng-template>\n      </ng-container>\n      <ng-container\n        *ngIf=\"\n          isCard(attachment) &&\n          getCardAttachmentConfiguration(attachment) as attachmentConfiguration\n        \"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.cardAttachmentTemplate$ | async) ||\n              defaultCard;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultCard let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__message-attachment-card str-chat__message-attachment-card--{{\n              attachmentContext.type\n            }}\"\n          >\n            <div\n              *ngIf=\"attachmentConfiguration.url\"\n              class=\"str-chat__message-attachment-card--header\"\n            >\n              <img\n                fetchpriority=\"low\"\n                loading=\"lazy\"\n                data-testclass=\"card-img\"\n                alt=\"{{ attachmentConfiguration.url }}\"\n                src=\"{{ attachmentConfiguration.url }}\"\n                [ngStyle]=\"{\n                  height: attachmentConfiguration.height,\n                  width: attachmentConfiguration.width\n                }\"\n              />\n            </div>\n            <div class=\"str-chat__message-attachment-card--content\">\n              <div class=\"str-chat__message-attachment-card--flex\">\n                <div\n                  *ngIf=\"attachmentContext.title\"\n                  data-testclass=\"card-title\"\n                  class=\"str-chat__message-attachment-card--title\"\n                >\n                  {{ attachmentContext.title }}\n                </div>\n                <div\n                  *ngIf=\"attachmentContext.text\"\n                  class=\"str-chat__message-attachment-card--text\"\n                  data-testclass=\"card-text\"\n                >\n                  {{ attachmentContext.text }}\n                </div>\n                <a\n                  *ngIf=\"\n                    attachmentContext.title_link ||\n                    attachmentContext.og_scrape_url\n                  \"\n                  class=\"str-chat__message-attachment-card--url\"\n                  data-testclass=\"url-link\"\n                  noopener\n                  noreferrer\n                  target=\"_blank\"\n                  href=\"{{\n                    attachmentContext.title_link ||\n                      attachmentContext.og_scrape_url\n                  }}\"\n                >\n                  {{\n                    trimUrl(\n                      attachmentContext.title_link ||\n                        attachmentContext.og_scrape_url\n                    )\n                  }}\n                </a>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"attachment.actions && attachment.actions.length > 0\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.attachmentActionsTemplate$ | async) ||\n              defaultActions;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultActions let-attachmentContext=\"attachment\">\n          <div class=\"str-chat__message-attachment-actions\">\n            <div class=\"str-chat__message-attachment-actions-form\">\n              <button\n                *ngFor=\"\n                  let action of attachmentContext.actions;\n                  trackBy: trackByActionValue\n                \"\n                data-testclass=\"attachment-action\"\n                class=\"str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--{{\n                  action.style\n                }}\"\n                (click)=\"sendAction(action)\"\n                (keyup.enter)=\"sendAction(action)\"\n              >\n                {{ action.text }}\n              </button>\n            </div>\n          </div>\n        </ng-template>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"imagesToView && imagesToView.length > 0\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.modalTemplate$ | async) || defaultModal;\n        context: getModalContext()\n      \"\n    ></ng-container>\n  </ng-container>\n</div>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    class=\"stream-chat-angular__image-modal-host\"\n    [isOpen]=\"isOpen\"\n    [content]=\"content\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n  >\n  </stream-modal>\n</ng-template>\n\n<ng-template #modalContent>\n  <div class=\"stream-chat-angular__image-modal str-chat__image-carousel\">\n    <img\n      #imgElement\n      class=\"stream-chat-angular__image-modal-image str-chat__image-carousel-image\"\n      data-testid=\"modal-image\"\n      [src]=\"\n        getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).url\n      \"\n      [style.--original-height]=\"\n        getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).originalHeight\n      \"\n      [style.--original-width]=\"\n        getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).originalWidth\n      \"\n      [alt]=\"imagesToView[imagesToViewCurrentIndex].fallback\"\n      [ngStyle]=\"{\n        width: getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).width,\n        height: getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).height\n      }\"\n    />\n    <div>\n      <button\n        class=\"stream-chat-angular__image-modal-stepper str-chat__image-carousel-stepper str-chat__image-carousel-stepper-prev\"\n        data-testid=\"image-modal-prev\"\n        type=\"button\"\n        [ngStyle]=\"{\n          visibility: isImageModalPrevButtonVisible ? 'visible' : 'hidden'\n        }\"\n        (click)=\"stepImages(-1)\"\n        (keyup.enter)=\"stepImages(-1)\"\n      >\n        <stream-icon-placeholder icon=\"arrow-left\"></stream-icon-placeholder>\n      </button>\n      <button\n        class=\"stream-chat-angular__image-modal-stepper str-chat__image-carousel-stepper str-chat__image-carousel-stepper-next\"\n        type=\"button\"\n        data-testid=\"image-modal-next\"\n        [ngStyle]=\"{\n          visibility: isImageModalNextButtonVisible ? 'visible' : 'hidden'\n        }\"\n        (click)=\"stepImages(1)\"\n        (keyup.enter)=\"stepImages(1)\"\n      >\n        <stream-icon-placeholder icon=\"arrow-right\"></stream-icon-placeholder>\n      </button>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: VoiceRecordingComponent, selector: "stream-voice-recording", inputs: ["attachment"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "component", type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
+AttachmentListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AttachmentListComponent, deps: [{ token: CustomTemplatesService }, { token: ChannelService }, { token: AttachmentConfigurationService }, { token: MessageService }], target: i0.ɵɵFactoryTarget.Component });
+AttachmentListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AttachmentListComponent, selector: "stream-attachment-list", inputs: { messageId: "messageId", parentMessageId: "parentMessageId", attachments: "attachments" }, outputs: { imageModalStateChange: "imageModalStateChange" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  *ngIf=\"\n    orderedAttachments.length > 0 ||\n    (customAttachments.length > 0 && customAttachmentsTemplate)\n  \"\n  class=\"str-chat__attachment-list\"\n>\n  <ng-container\n    *ngFor=\"let attachment of orderedAttachments; trackBy: trackByUrl\"\n  >\n    <div\n      data-testclass=\"attachment-container\"\n      class=\"str-chat__message-attachment str-chat__message-attachment--{{\n        attachment.type\n      }} str-chat__message-attachment-dynamic-size\"\n      [class.str-chat__message-attachment--card]=\"isCard(attachment)\"\n      [class.str-chat-angular__message-attachment-file-single]=\"\n        isFile(attachment)\n      \"\n      [class.str-chat__message-attachment--voice-recording]=\"\n        isVoiceMessage(attachment)\n      \"\n      [class.str-chat__message-attachment-with-actions]=\"\n        attachment.actions && attachment.actions.length > 0\n      \"\n      [class.str-chat__message-attachment--svg-image]=\"isSvg(attachment)\"\n    >\n      <ng-container *ngIf=\"isImage(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.imageAttachmentTemplate$ | async) ||\n              defaultImage;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultImage let-attachmentContext=\"attachment\">\n          <img\n            #imgElement\n            class=\"str-chat__message-attachment--img\"\n            data-testclass=\"image\"\n            [src]=\"\n              getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).url\n            \"\n            [alt]=\"attachmentContext?.fallback\"\n            [ngStyle]=\"{\n              height: getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).height,\n              width: getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).width,\n              '--original-height': getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).originalHeight,\n              '--original-width': getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).originalWidth\n            }\"\n            (click)=\"openImageModal([attachmentContext])\"\n            (keyup.enter)=\"openImageModal([attachmentContext])\"\n          />\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isGallery(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.galleryAttachmentTemplate$ | async) ||\n              defaultGallery;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultGallery let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__gallery\"\n            data-testid=\"image-gallery\"\n            [class.str-chat__gallery--square]=\"\n              (attachmentContext?.images)!.length > 3\n            \"\n            [class.str-chat__gallery-two-rows]=\"\n              (attachmentContext?.images)!.length > 2\n            \"\n          >\n            <ng-container\n              *ngFor=\"\n                let galleryImage of attachmentContext.images;\n                let index = index;\n                let isLast = last;\n                trackBy: trackByImageUrl\n              \"\n            >\n              <button\n                *ngIf=\"index < 3 || (index === 3 && isLast)\"\n                class=\"str-chat__gallery-image\"\n                data-testclass=\"gallery-image\"\n                [class.str-chat__message-attachment--svg-image]=\"\n                  isSvg(galleryImage)\n                \"\n                (click)=\"openImageModal(attachmentContext.images!, index)\"\n                (keyup.enter)=\"openImageModal(attachmentContext.images!, index)\"\n              >\n                <img\n                  #imgElement\n                  fetchpriority=\"low\"\n                  loading=\"lazy\"\n                  [src]=\"\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).url\n                  \"\n                  [alt]=\"galleryImage.fallback\"\n                  [style.--original-height]=\"\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).originalHeight\n                  \"\n                  [style.--original-width]=\"\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).originalWidth\n                  \"\n                  [ngStyle]=\"{\n                    height: getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).height,\n                    width: getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).width\n                  }\"\n                />\n              </button>\n              <button\n                *ngIf=\"index === 3 && !isLast\"\n                #element\n                class=\"str-chat__gallery-placeholder\"\n                data-testclass=\"gallery-image\"\n                data-testid=\"more-image-button\"\n                [class.str-chat__message-attachment--svg-image]=\"\n                  isSvg(galleryImage)\n                \"\n                [ngStyle]=\"{\n                  'background-image':\n                    'url(' +\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      element\n                    ).url +\n                    ')',\n                  height: getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).height,\n                  width: getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).width,\n                  '--original-height': getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).originalHeight,\n                  '--original-width': getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).originalWidth\n                }\"\n                (click)=\"openImageModal(attachmentContext.images!, index)\"\n                (keyup.enter)=\"openImageModal(attachmentContext.images!, index)\"\n              >\n                <p\n                  [innerHTML]=\"\n                    'streamChat.{{ imageCount }} more'\n                      | translate\n                        : { imageCount: attachmentContext!.images!.length - 4 }\n                  \"\n                ></p>\n              </button>\n            </ng-container>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isVideo(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.videoAttachmentTemplate$ | async) ||\n              defaultVideo;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultVideo let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__player-wrapper\"\n            data-testclass=\"video-attachment-parent\"\n            [style.--original-height]=\"\n              getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                .originalHeight\n            \"\n            [style.--original-width]=\"\n              getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                .originalWidth\n            \"\n            [ngStyle]=\"{\n              height: getVideoAttachmentConfiguration(\n                attachmentContext,\n                videoElement\n              ).height,\n              width: getVideoAttachmentConfiguration(\n                attachmentContext,\n                videoElement\n              ).width\n            }\"\n          >\n            <video\n              #videoElement\n              class=\"str-chat__video-angular\"\n              controls\n              data-testclass=\"video-attachment\"\n              [src]=\"\n                getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                  .url\n              \"\n              [poster]=\"\n                getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                  .thumbUrl\n              \"\n            ></video>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isFile(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.fileAttachmentTemplate$ | async) ||\n              defaultFile;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultFile let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__message-attachment-file--item str-chat-angular__message-attachment-file-single\"\n          >\n            <stream-icon-placeholder\n              class=\"str-chat__attachment-type-icon\"\n              icon=\"unspecified-filetype\"\n            ></stream-icon-placeholder>\n            <div class=\"str-chat__message-attachment-file--item-text\">\n              <a\n                class=\"str-chat__message-attachment-file--item-first-row\"\n                data-testclass=\"file-link\"\n                target=\"_blank\"\n                href=\"{{ attachmentContext.asset_url }}\"\n              >\n                <div\n                  data-testclass=\"file-title\"\n                  class=\"str-chat__message-attachment-file--item-name\"\n                >\n                  {{ attachmentContext.title }}\n                </div>\n                <stream-icon-placeholder\n                  class=\"str-chat__message-attachment-download-icon\"\n                  icon=\"download\"\n                ></stream-icon-placeholder>\n              </a>\n              <span\n                *ngIf=\"hasFileSize(attachmentContext)\"\n                class=\"str-chat__message-attachment-file--item-size\"\n                data-testclass=\"size\"\n                >{{ getFileSize(attachmentContext) }}</span\n              >\n            </div>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isVoiceMessage(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.voiceRecordingAttachmentTemplate$\n              | async) || defaultRecording;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultRecording>\n          <stream-voice-recording\n            data-testclass=\"voice-recording\"\n            [attachment]=\"attachment\"\n          ></stream-voice-recording>\n        </ng-template>\n      </ng-container>\n      <ng-container\n        *ngIf=\"\n          isCard(attachment) &&\n          getCardAttachmentConfiguration(attachment) as attachmentConfiguration\n        \"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.cardAttachmentTemplate$ | async) ||\n              defaultCard;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultCard let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__message-attachment-card str-chat__message-attachment-card--{{\n              attachmentContext.type\n            }}\"\n          >\n            <div\n              *ngIf=\"attachmentConfiguration.url\"\n              class=\"str-chat__message-attachment-card--header\"\n            >\n              <img\n                fetchpriority=\"low\"\n                loading=\"lazy\"\n                data-testclass=\"card-img\"\n                alt=\"{{ attachmentConfiguration.url }}\"\n                src=\"{{ attachmentConfiguration.url }}\"\n                [ngStyle]=\"{\n                  height: attachmentConfiguration.height,\n                  width: attachmentConfiguration.width\n                }\"\n              />\n            </div>\n            <div class=\"str-chat__message-attachment-card--content\">\n              <div class=\"str-chat__message-attachment-card--flex\">\n                <div\n                  *ngIf=\"attachmentContext.title\"\n                  data-testclass=\"card-title\"\n                  class=\"str-chat__message-attachment-card--title\"\n                >\n                  {{ attachmentContext.title }}\n                </div>\n                <div\n                  *ngIf=\"attachmentContext.text\"\n                  class=\"str-chat__message-attachment-card--text\"\n                  data-testclass=\"card-text\"\n                >\n                  {{ attachmentContext.text }}\n                </div>\n                <a\n                  *ngIf=\"\n                    attachmentContext.title_link ||\n                    attachmentContext.og_scrape_url\n                  \"\n                  class=\"str-chat__message-attachment-card--url\"\n                  data-testclass=\"url-link\"\n                  noopener\n                  noreferrer\n                  target=\"_blank\"\n                  href=\"{{\n                    attachmentContext.title_link ||\n                      attachmentContext.og_scrape_url\n                  }}\"\n                >\n                  {{\n                    trimUrl(\n                      attachmentContext.title_link ||\n                        attachmentContext.og_scrape_url\n                    )\n                  }}\n                </a>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"attachment.actions && attachment.actions.length > 0\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.attachmentActionsTemplate$ | async) ||\n              defaultActions;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultActions let-attachmentContext=\"attachment\">\n          <div class=\"str-chat__message-attachment-actions\">\n            <div class=\"str-chat__message-attachment-actions-form\">\n              <button\n                *ngFor=\"\n                  let action of attachmentContext.actions;\n                  trackBy: trackByActionValue\n                \"\n                data-testclass=\"attachment-action\"\n                class=\"str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--{{\n                  action.style\n                }}\"\n                (click)=\"sendAction(action)\"\n                (keyup.enter)=\"sendAction(action)\"\n              >\n                {{ action.text }}\n              </button>\n            </div>\n          </div>\n        </ng-template>\n      </ng-container>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"customAttachmentsTemplate\">\n    <ng-template\n      *ngTemplateOutlet=\"\n        customAttachmentsTemplate;\n        context: {\n          messageId: messageId,\n          parentMessageId: parentMessageId,\n          attachments: customAttachments\n        }\n      \"\n    ></ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"imagesToView && imagesToView.length > 0\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.modalTemplate$ | async) || defaultModal;\n        context: getModalContext()\n      \"\n    ></ng-container>\n  </ng-container>\n</div>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    class=\"stream-chat-angular__image-modal-host\"\n    [isOpen]=\"isOpen\"\n    [content]=\"content\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n  >\n  </stream-modal>\n</ng-template>\n\n<ng-template #modalContent>\n  <div class=\"stream-chat-angular__image-modal str-chat__image-carousel\">\n    <img\n      #imgElement\n      class=\"stream-chat-angular__image-modal-image str-chat__image-carousel-image\"\n      data-testid=\"modal-image\"\n      [src]=\"\n        getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).url\n      \"\n      [style.--original-height]=\"\n        getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).originalHeight\n      \"\n      [style.--original-width]=\"\n        getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).originalWidth\n      \"\n      [alt]=\"imagesToView[imagesToViewCurrentIndex].fallback\"\n      [ngStyle]=\"{\n        width: getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).width,\n        height: getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).height\n      }\"\n    />\n    <div>\n      <button\n        class=\"stream-chat-angular__image-modal-stepper str-chat__image-carousel-stepper str-chat__image-carousel-stepper-prev\"\n        data-testid=\"image-modal-prev\"\n        type=\"button\"\n        [ngStyle]=\"{\n          visibility: isImageModalPrevButtonVisible ? 'visible' : 'hidden'\n        }\"\n        (click)=\"stepImages(-1)\"\n        (keyup.enter)=\"stepImages(-1)\"\n      >\n        <stream-icon-placeholder icon=\"arrow-left\"></stream-icon-placeholder>\n      </button>\n      <button\n        class=\"stream-chat-angular__image-modal-stepper str-chat__image-carousel-stepper str-chat__image-carousel-stepper-next\"\n        type=\"button\"\n        data-testid=\"image-modal-next\"\n        [ngStyle]=\"{\n          visibility: isImageModalNextButtonVisible ? 'visible' : 'hidden'\n        }\"\n        (click)=\"stepImages(1)\"\n        (keyup.enter)=\"stepImages(1)\"\n      >\n        <stream-icon-placeholder icon=\"arrow-right\"></stream-icon-placeholder>\n      </button>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: VoiceRecordingComponent, selector: "stream-voice-recording", inputs: ["attachment"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "component", type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AttachmentListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-attachment-list', 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--voice-recording]=\"\n        isVoiceMessage(attachment)\n      \"\n      [class.str-chat__message-attachment-with-actions]=\"\n        attachment.actions && attachment.actions.length > 0\n      \"\n      [class.str-chat__message-attachment--svg-image]=\"isSvg(attachment)\"\n    >\n      <ng-container *ngIf=\"isImage(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.imageAttachmentTemplate$ | async) ||\n              defaultImage;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultImage let-attachmentContext=\"attachment\">\n          <img\n            #imgElement\n            class=\"str-chat__message-attachment--img\"\n            data-testclass=\"image\"\n            [src]=\"\n              getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).url\n            \"\n            [alt]=\"attachmentContext?.fallback\"\n            [ngStyle]=\"{\n              height: getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).height,\n              width: getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).width,\n              '--original-height': getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).originalHeight,\n              '--original-width': getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).originalWidth\n            }\"\n            (click)=\"openImageModal([attachmentContext])\"\n            (keyup.enter)=\"openImageModal([attachmentContext])\"\n          />\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isGallery(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.galleryAttachmentTemplate$ | async) ||\n              defaultGallery;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultGallery let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__gallery\"\n            data-testid=\"image-gallery\"\n            [class.str-chat__gallery--square]=\"\n              (attachmentContext?.images)!.length > 3\n            \"\n            [class.str-chat__gallery-two-rows]=\"\n              (attachmentContext?.images)!.length > 2\n            \"\n          >\n            <ng-container\n              *ngFor=\"\n                let galleryImage of attachmentContext.images;\n                let index = index;\n                let isLast = last;\n                trackBy: trackByImageUrl\n              \"\n            >\n              <button\n                *ngIf=\"index < 3 || (index === 3 && isLast)\"\n                class=\"str-chat__gallery-image\"\n                data-testclass=\"gallery-image\"\n                [class.str-chat__message-attachment--svg-image]=\"\n                  isSvg(galleryImage)\n                \"\n                (click)=\"openImageModal(attachmentContext.images!, index)\"\n                (keyup.enter)=\"openImageModal(attachmentContext.images!, index)\"\n              >\n                <img\n                  #imgElement\n                  fetchpriority=\"low\"\n                  loading=\"lazy\"\n                  [src]=\"\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).url\n                  \"\n                  [alt]=\"galleryImage.fallback\"\n                  [style.--original-height]=\"\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).originalHeight\n                  \"\n                  [style.--original-width]=\"\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).originalWidth\n                  \"\n                  [ngStyle]=\"{\n                    height: getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).height,\n                    width: getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).width\n                  }\"\n                />\n              </button>\n              <button\n                *ngIf=\"index === 3 && !isLast\"\n                #element\n                class=\"str-chat__gallery-placeholder\"\n                data-testclass=\"gallery-image\"\n                data-testid=\"more-image-button\"\n                [class.str-chat__message-attachment--svg-image]=\"\n                  isSvg(galleryImage)\n                \"\n                [ngStyle]=\"{\n                  'background-image':\n                    'url(' +\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      element\n                    ).url +\n                    ')',\n                  height: getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).height,\n                  width: getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).width,\n                  '--original-height': getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).originalHeight,\n                  '--original-width': getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).originalWidth\n                }\"\n                (click)=\"openImageModal(attachmentContext.images!, index)\"\n                (keyup.enter)=\"openImageModal(attachmentContext.images!, index)\"\n              >\n                <p\n                  [innerHTML]=\"\n                    'streamChat.{{ imageCount }} more'\n                      | translate\n                        : { imageCount: attachmentContext!.images!.length - 4 }\n                  \"\n                ></p>\n              </button>\n            </ng-container>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isVideo(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.videoAttachmentTemplate$ | async) ||\n              defaultVideo;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultVideo let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__player-wrapper\"\n            data-testclass=\"video-attachment-parent\"\n            [style.--original-height]=\"\n              getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                .originalHeight\n            \"\n            [style.--original-width]=\"\n              getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                .originalWidth\n            \"\n            [ngStyle]=\"{\n              height: getVideoAttachmentConfiguration(\n                attachmentContext,\n                videoElement\n              ).height,\n              width: getVideoAttachmentConfiguration(\n                attachmentContext,\n                videoElement\n              ).width\n            }\"\n          >\n            <video\n              #videoElement\n              class=\"str-chat__video-angular\"\n              controls\n              data-testclass=\"video-attachment\"\n              [src]=\"\n                getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                  .url\n              \"\n              [poster]=\"\n                getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                  .thumbUrl\n              \"\n            ></video>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isFile(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.fileAttachmentTemplate$ | async) ||\n              defaultFile;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultFile let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__message-attachment-file--item str-chat-angular__message-attachment-file-single\"\n          >\n            <stream-icon-placeholder\n              class=\"str-chat__attachment-type-icon\"\n              icon=\"unspecified-filetype\"\n            ></stream-icon-placeholder>\n            <div class=\"str-chat__message-attachment-file--item-text\">\n              <a\n                class=\"str-chat__message-attachment-file--item-first-row\"\n                data-testclass=\"file-link\"\n                target=\"_blank\"\n                href=\"{{ attachmentContext.asset_url }}\"\n              >\n                <div\n                  data-testclass=\"file-title\"\n                  class=\"str-chat__message-attachment-file--item-name\"\n                >\n                  {{ attachmentContext.title }}\n                </div>\n                <stream-icon-placeholder\n                  class=\"str-chat__message-attachment-download-icon\"\n                  icon=\"download\"\n                ></stream-icon-placeholder>\n              </a>\n              <span\n                *ngIf=\"hasFileSize(attachmentContext)\"\n                class=\"str-chat__message-attachment-file--item-size\"\n                data-testclass=\"size\"\n                >{{ getFileSize(attachmentContext) }}</span\n              >\n            </div>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isVoiceMessage(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.voiceRecordingAttachmentTemplate$\n              | async) || defaultRecording;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultRecording>\n          <stream-voice-recording\n            data-testclass=\"voice-recording\"\n            [attachment]=\"attachment\"\n          ></stream-voice-recording>\n        </ng-template>\n      </ng-container>\n      <ng-container\n        *ngIf=\"\n          isCard(attachment) &&\n          getCardAttachmentConfiguration(attachment) as attachmentConfiguration\n        \"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.cardAttachmentTemplate$ | async) ||\n              defaultCard;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultCard let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__message-attachment-card str-chat__message-attachment-card--{{\n              attachmentContext.type\n            }}\"\n          >\n            <div\n              *ngIf=\"attachmentConfiguration.url\"\n              class=\"str-chat__message-attachment-card--header\"\n            >\n              <img\n                fetchpriority=\"low\"\n                loading=\"lazy\"\n                data-testclass=\"card-img\"\n                alt=\"{{ attachmentConfiguration.url }}\"\n                src=\"{{ attachmentConfiguration.url }}\"\n                [ngStyle]=\"{\n                  height: attachmentConfiguration.height,\n                  width: attachmentConfiguration.width\n                }\"\n              />\n            </div>\n            <div class=\"str-chat__message-attachment-card--content\">\n              <div class=\"str-chat__message-attachment-card--flex\">\n                <div\n                  *ngIf=\"attachmentContext.title\"\n                  data-testclass=\"card-title\"\n                  class=\"str-chat__message-attachment-card--title\"\n                >\n                  {{ attachmentContext.title }}\n                </div>\n                <div\n                  *ngIf=\"attachmentContext.text\"\n                  class=\"str-chat__message-attachment-card--text\"\n                  data-testclass=\"card-text\"\n                >\n                  {{ attachmentContext.text }}\n                </div>\n                <a\n                  *ngIf=\"\n                    attachmentContext.title_link ||\n                    attachmentContext.og_scrape_url\n                  \"\n                  class=\"str-chat__message-attachment-card--url\"\n                  data-testclass=\"url-link\"\n                  noopener\n                  noreferrer\n                  target=\"_blank\"\n                  href=\"{{\n                    attachmentContext.title_link ||\n                      attachmentContext.og_scrape_url\n                  }}\"\n                >\n                  {{\n                    trimUrl(\n                      attachmentContext.title_link ||\n                        attachmentContext.og_scrape_url\n                    )\n                  }}\n                </a>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"attachment.actions && attachment.actions.length > 0\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.attachmentActionsTemplate$ | async) ||\n              defaultActions;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultActions let-attachmentContext=\"attachment\">\n          <div class=\"str-chat__message-attachment-actions\">\n            <div class=\"str-chat__message-attachment-actions-form\">\n              <button\n                *ngFor=\"\n                  let action of attachmentContext.actions;\n                  trackBy: trackByActionValue\n                \"\n                data-testclass=\"attachment-action\"\n                class=\"str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--{{\n                  action.style\n                }}\"\n                (click)=\"sendAction(action)\"\n                (keyup.enter)=\"sendAction(action)\"\n              >\n                {{ action.text }}\n              </button>\n            </div>\n          </div>\n        </ng-template>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"imagesToView && imagesToView.length > 0\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.modalTemplate$ | async) || defaultModal;\n        context: getModalContext()\n      \"\n    ></ng-container>\n  </ng-container>\n</div>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    class=\"stream-chat-angular__image-modal-host\"\n    [isOpen]=\"isOpen\"\n    [content]=\"content\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n  >\n  </stream-modal>\n</ng-template>\n\n<ng-template #modalContent>\n  <div class=\"stream-chat-angular__image-modal str-chat__image-carousel\">\n    <img\n      #imgElement\n      class=\"stream-chat-angular__image-modal-image str-chat__image-carousel-image\"\n      data-testid=\"modal-image\"\n      [src]=\"\n        getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).url\n      \"\n      [style.--original-height]=\"\n        getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).originalHeight\n      \"\n      [style.--original-width]=\"\n        getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).originalWidth\n      \"\n      [alt]=\"imagesToView[imagesToViewCurrentIndex].fallback\"\n      [ngStyle]=\"{\n        width: getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).width,\n        height: getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).height\n      }\"\n    />\n    <div>\n      <button\n        class=\"stream-chat-angular__image-modal-stepper str-chat__image-carousel-stepper str-chat__image-carousel-stepper-prev\"\n        data-testid=\"image-modal-prev\"\n        type=\"button\"\n        [ngStyle]=\"{\n          visibility: isImageModalPrevButtonVisible ? 'visible' : 'hidden'\n        }\"\n        (click)=\"stepImages(-1)\"\n        (keyup.enter)=\"stepImages(-1)\"\n      >\n        <stream-icon-placeholder icon=\"arrow-left\"></stream-icon-placeholder>\n      </button>\n      <button\n        class=\"stream-chat-angular__image-modal-stepper str-chat__image-carousel-stepper str-chat__image-carousel-stepper-next\"\n        type=\"button\"\n        data-testid=\"image-modal-next\"\n        [ngStyle]=\"{\n          visibility: isImageModalNextButtonVisible ? 'visible' : 'hidden'\n        }\"\n        (click)=\"stepImages(1)\"\n        (keyup.enter)=\"stepImages(1)\"\n      >\n        <stream-icon-placeholder icon=\"arrow-right\"></stream-icon-placeholder>\n      </button>\n    </div>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: CustomTemplatesService }, { type: ChannelService }, { type: AttachmentConfigurationService }]; }, propDecorators: { messageId: [{
+            args: [{ selector: 'stream-attachment-list', template: "<div\n  *ngIf=\"\n    orderedAttachments.length > 0 ||\n    (customAttachments.length > 0 && customAttachmentsTemplate)\n  \"\n  class=\"str-chat__attachment-list\"\n>\n  <ng-container\n    *ngFor=\"let attachment of orderedAttachments; trackBy: trackByUrl\"\n  >\n    <div\n      data-testclass=\"attachment-container\"\n      class=\"str-chat__message-attachment str-chat__message-attachment--{{\n        attachment.type\n      }} str-chat__message-attachment-dynamic-size\"\n      [class.str-chat__message-attachment--card]=\"isCard(attachment)\"\n      [class.str-chat-angular__message-attachment-file-single]=\"\n        isFile(attachment)\n      \"\n      [class.str-chat__message-attachment--voice-recording]=\"\n        isVoiceMessage(attachment)\n      \"\n      [class.str-chat__message-attachment-with-actions]=\"\n        attachment.actions && attachment.actions.length > 0\n      \"\n      [class.str-chat__message-attachment--svg-image]=\"isSvg(attachment)\"\n    >\n      <ng-container *ngIf=\"isImage(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.imageAttachmentTemplate$ | async) ||\n              defaultImage;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultImage let-attachmentContext=\"attachment\">\n          <img\n            #imgElement\n            class=\"str-chat__message-attachment--img\"\n            data-testclass=\"image\"\n            [src]=\"\n              getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).url\n            \"\n            [alt]=\"attachmentContext?.fallback\"\n            [ngStyle]=\"{\n              height: getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).height,\n              width: getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).width,\n              '--original-height': getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).originalHeight,\n              '--original-width': getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).originalWidth\n            }\"\n            (click)=\"openImageModal([attachmentContext])\"\n            (keyup.enter)=\"openImageModal([attachmentContext])\"\n          />\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isGallery(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.galleryAttachmentTemplate$ | async) ||\n              defaultGallery;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultGallery let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__gallery\"\n            data-testid=\"image-gallery\"\n            [class.str-chat__gallery--square]=\"\n              (attachmentContext?.images)!.length > 3\n            \"\n            [class.str-chat__gallery-two-rows]=\"\n              (attachmentContext?.images)!.length > 2\n            \"\n          >\n            <ng-container\n              *ngFor=\"\n                let galleryImage of attachmentContext.images;\n                let index = index;\n                let isLast = last;\n                trackBy: trackByImageUrl\n              \"\n            >\n              <button\n                *ngIf=\"index < 3 || (index === 3 && isLast)\"\n                class=\"str-chat__gallery-image\"\n                data-testclass=\"gallery-image\"\n                [class.str-chat__message-attachment--svg-image]=\"\n                  isSvg(galleryImage)\n                \"\n                (click)=\"openImageModal(attachmentContext.images!, index)\"\n                (keyup.enter)=\"openImageModal(attachmentContext.images!, index)\"\n              >\n                <img\n                  #imgElement\n                  fetchpriority=\"low\"\n                  loading=\"lazy\"\n                  [src]=\"\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).url\n                  \"\n                  [alt]=\"galleryImage.fallback\"\n                  [style.--original-height]=\"\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).originalHeight\n                  \"\n                  [style.--original-width]=\"\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).originalWidth\n                  \"\n                  [ngStyle]=\"{\n                    height: getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).height,\n                    width: getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).width\n                  }\"\n                />\n              </button>\n              <button\n                *ngIf=\"index === 3 && !isLast\"\n                #element\n                class=\"str-chat__gallery-placeholder\"\n                data-testclass=\"gallery-image\"\n                data-testid=\"more-image-button\"\n                [class.str-chat__message-attachment--svg-image]=\"\n                  isSvg(galleryImage)\n                \"\n                [ngStyle]=\"{\n                  'background-image':\n                    'url(' +\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      element\n                    ).url +\n                    ')',\n                  height: getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).height,\n                  width: getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).width,\n                  '--original-height': getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).originalHeight,\n                  '--original-width': getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).originalWidth\n                }\"\n                (click)=\"openImageModal(attachmentContext.images!, index)\"\n                (keyup.enter)=\"openImageModal(attachmentContext.images!, index)\"\n              >\n                <p\n                  [innerHTML]=\"\n                    'streamChat.{{ imageCount }} more'\n                      | translate\n                        : { imageCount: attachmentContext!.images!.length - 4 }\n                  \"\n                ></p>\n              </button>\n            </ng-container>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isVideo(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.videoAttachmentTemplate$ | async) ||\n              defaultVideo;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultVideo let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__player-wrapper\"\n            data-testclass=\"video-attachment-parent\"\n            [style.--original-height]=\"\n              getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                .originalHeight\n            \"\n            [style.--original-width]=\"\n              getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                .originalWidth\n            \"\n            [ngStyle]=\"{\n              height: getVideoAttachmentConfiguration(\n                attachmentContext,\n                videoElement\n              ).height,\n              width: getVideoAttachmentConfiguration(\n                attachmentContext,\n                videoElement\n              ).width\n            }\"\n          >\n            <video\n              #videoElement\n              class=\"str-chat__video-angular\"\n              controls\n              data-testclass=\"video-attachment\"\n              [src]=\"\n                getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                  .url\n              \"\n              [poster]=\"\n                getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                  .thumbUrl\n              \"\n            ></video>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isFile(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.fileAttachmentTemplate$ | async) ||\n              defaultFile;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultFile let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__message-attachment-file--item str-chat-angular__message-attachment-file-single\"\n          >\n            <stream-icon-placeholder\n              class=\"str-chat__attachment-type-icon\"\n              icon=\"unspecified-filetype\"\n            ></stream-icon-placeholder>\n            <div class=\"str-chat__message-attachment-file--item-text\">\n              <a\n                class=\"str-chat__message-attachment-file--item-first-row\"\n                data-testclass=\"file-link\"\n                target=\"_blank\"\n                href=\"{{ attachmentContext.asset_url }}\"\n              >\n                <div\n                  data-testclass=\"file-title\"\n                  class=\"str-chat__message-attachment-file--item-name\"\n                >\n                  {{ attachmentContext.title }}\n                </div>\n                <stream-icon-placeholder\n                  class=\"str-chat__message-attachment-download-icon\"\n                  icon=\"download\"\n                ></stream-icon-placeholder>\n              </a>\n              <span\n                *ngIf=\"hasFileSize(attachmentContext)\"\n                class=\"str-chat__message-attachment-file--item-size\"\n                data-testclass=\"size\"\n                >{{ getFileSize(attachmentContext) }}</span\n              >\n            </div>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isVoiceMessage(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.voiceRecordingAttachmentTemplate$\n              | async) || defaultRecording;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultRecording>\n          <stream-voice-recording\n            data-testclass=\"voice-recording\"\n            [attachment]=\"attachment\"\n          ></stream-voice-recording>\n        </ng-template>\n      </ng-container>\n      <ng-container\n        *ngIf=\"\n          isCard(attachment) &&\n          getCardAttachmentConfiguration(attachment) as attachmentConfiguration\n        \"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.cardAttachmentTemplate$ | async) ||\n              defaultCard;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultCard let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__message-attachment-card str-chat__message-attachment-card--{{\n              attachmentContext.type\n            }}\"\n          >\n            <div\n              *ngIf=\"attachmentConfiguration.url\"\n              class=\"str-chat__message-attachment-card--header\"\n            >\n              <img\n                fetchpriority=\"low\"\n                loading=\"lazy\"\n                data-testclass=\"card-img\"\n                alt=\"{{ attachmentConfiguration.url }}\"\n                src=\"{{ attachmentConfiguration.url }}\"\n                [ngStyle]=\"{\n                  height: attachmentConfiguration.height,\n                  width: attachmentConfiguration.width\n                }\"\n              />\n            </div>\n            <div class=\"str-chat__message-attachment-card--content\">\n              <div class=\"str-chat__message-attachment-card--flex\">\n                <div\n                  *ngIf=\"attachmentContext.title\"\n                  data-testclass=\"card-title\"\n                  class=\"str-chat__message-attachment-card--title\"\n                >\n                  {{ attachmentContext.title }}\n                </div>\n                <div\n                  *ngIf=\"attachmentContext.text\"\n                  class=\"str-chat__message-attachment-card--text\"\n                  data-testclass=\"card-text\"\n                >\n                  {{ attachmentContext.text }}\n                </div>\n                <a\n                  *ngIf=\"\n                    attachmentContext.title_link ||\n                    attachmentContext.og_scrape_url\n                  \"\n                  class=\"str-chat__message-attachment-card--url\"\n                  data-testclass=\"url-link\"\n                  noopener\n                  noreferrer\n                  target=\"_blank\"\n                  href=\"{{\n                    attachmentContext.title_link ||\n                      attachmentContext.og_scrape_url\n                  }}\"\n                >\n                  {{\n                    trimUrl(\n                      attachmentContext.title_link ||\n                        attachmentContext.og_scrape_url\n                    )\n                  }}\n                </a>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"attachment.actions && attachment.actions.length > 0\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.attachmentActionsTemplate$ | async) ||\n              defaultActions;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultActions let-attachmentContext=\"attachment\">\n          <div class=\"str-chat__message-attachment-actions\">\n            <div class=\"str-chat__message-attachment-actions-form\">\n              <button\n                *ngFor=\"\n                  let action of attachmentContext.actions;\n                  trackBy: trackByActionValue\n                \"\n                data-testclass=\"attachment-action\"\n                class=\"str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--{{\n                  action.style\n                }}\"\n                (click)=\"sendAction(action)\"\n                (keyup.enter)=\"sendAction(action)\"\n              >\n                {{ action.text }}\n              </button>\n            </div>\n          </div>\n        </ng-template>\n      </ng-container>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"customAttachmentsTemplate\">\n    <ng-template\n      *ngTemplateOutlet=\"\n        customAttachmentsTemplate;\n        context: {\n          messageId: messageId,\n          parentMessageId: parentMessageId,\n          attachments: customAttachments\n        }\n      \"\n    ></ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"imagesToView && imagesToView.length > 0\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.modalTemplate$ | async) || defaultModal;\n        context: getModalContext()\n      \"\n    ></ng-container>\n  </ng-container>\n</div>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    class=\"stream-chat-angular__image-modal-host\"\n    [isOpen]=\"isOpen\"\n    [content]=\"content\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n  >\n  </stream-modal>\n</ng-template>\n\n<ng-template #modalContent>\n  <div class=\"stream-chat-angular__image-modal str-chat__image-carousel\">\n    <img\n      #imgElement\n      class=\"stream-chat-angular__image-modal-image str-chat__image-carousel-image\"\n      data-testid=\"modal-image\"\n      [src]=\"\n        getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).url\n      \"\n      [style.--original-height]=\"\n        getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).originalHeight\n      \"\n      [style.--original-width]=\"\n        getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).originalWidth\n      \"\n      [alt]=\"imagesToView[imagesToViewCurrentIndex].fallback\"\n      [ngStyle]=\"{\n        width: getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).width,\n        height: getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).height\n      }\"\n    />\n    <div>\n      <button\n        class=\"stream-chat-angular__image-modal-stepper str-chat__image-carousel-stepper str-chat__image-carousel-stepper-prev\"\n        data-testid=\"image-modal-prev\"\n        type=\"button\"\n        [ngStyle]=\"{\n          visibility: isImageModalPrevButtonVisible ? 'visible' : 'hidden'\n        }\"\n        (click)=\"stepImages(-1)\"\n        (keyup.enter)=\"stepImages(-1)\"\n      >\n        <stream-icon-placeholder icon=\"arrow-left\"></stream-icon-placeholder>\n      </button>\n      <button\n        class=\"stream-chat-angular__image-modal-stepper str-chat__image-carousel-stepper str-chat__image-carousel-stepper-next\"\n        type=\"button\"\n        data-testid=\"image-modal-next\"\n        [ngStyle]=\"{\n          visibility: isImageModalNextButtonVisible ? 'visible' : 'hidden'\n        }\"\n        (click)=\"stepImages(1)\"\n        (keyup.enter)=\"stepImages(1)\"\n      >\n        <stream-icon-placeholder icon=\"arrow-right\"></stream-icon-placeholder>\n      </button>\n    </div>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: CustomTemplatesService }, { type: ChannelService }, { type: AttachmentConfigurationService }, { type: MessageService }]; }, propDecorators: { messageId: [{
                 type: Input
             }], parentMessageId: [{
                 type: Input
@@ -5572,7 +5644,7 @@ class MessageComponent {
     }
 }
 MessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageComponent, deps: [{ token: ChatClientService }, { token: ChannelService }, { token: CustomTemplatesService }, { token: i0.ChangeDetectorRef }, { token: DateParserService }, { token: MessageService }, { token: MessageActionsService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-MessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MessageComponent, selector: "stream-message", inputs: { message: "message", enabledMessageActions: "enabledMessageActions", isLastSentMessage: "isLastSentMessage", mode: "mode", isHighlighted: "isHighlighted", scroll$: "scroll$" }, viewQueries: [{ propertyName: "messageMenuTrigger", first: true, predicate: ["messageMenuTrigger"], descendants: true }, { propertyName: "messageMenuFloat", first: true, predicate: ["messageMenuFloat"], descendants: true }, { propertyName: "messageTextElement", first: true, predicate: ["messageTextElement"], descendants: true }, { propertyName: "messageBubble", first: true, predicate: ["messageBubble"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #container\n  data-testid=\"message-container\"\n  class=\"str-chat__message-simple str-chat__message str-chat__message--{{\n    message?.type\n  }} str-chat__message--{{ message?.status }} {{\n    message?.text ? 'str-chat__message--has-text' : 'has-no-text'\n  }} str-chat__message-menu-{{ areMessageOptionsOpen ? 'opened' : 'closed' }}\"\n  [class.str-chat__message--me]=\"isSentByCurrentUser\"\n  [class.str-chat__message--other]=\"!isSentByCurrentUser\"\n  [class.str-chat__message-simple--me]=\"isSentByCurrentUser\"\n  [class.str-chat__message--has-attachment]=\"hasAttachment\"\n  [class.str-chat__message--with-reactions]=\"hasReactions\"\n  [class.str-chat__message--highlighted]=\"isHighlighted\"\n  [class.str-chat__message-with-thread-link]=\"shouldDisplayThreadLink\"\n  [class.str-chat__message-send-can-be-retried]=\"\n    (message?.status === 'failed' && message?.errorStatusCode !== 403) ||\n    (message?.type === 'error' && message?.moderation_details)\n  \"\n  [class.str-chat__message-with-touch-support]=\"hasTouchSupport\"\n  [class.str-chat__message-without-touch-support]=\"!hasTouchSupport\"\n>\n  <ng-container *ngIf=\"!message?.deleted_at; else deletedMessage\">\n    <ng-container *ngIf=\"message?.type !== 'system'; else systemMessage\">\n      <stream-avatar-placeholder\n        data-testid=\"avatar\"\n        class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n        type=\"user\"\n        location=\"message-sender\"\n        [imageUrl]=\"message?.user?.image\"\n        [name]=\"message?.user?.name || message?.user?.id\"\n        [user]=\"message?.user || undefined\"\n      ></stream-avatar-placeholder>\n      <div class=\"str-chat__message-inner\">\n        <div\n          *ngIf=\"!hasTouchSupport && areOptionsVisible\"\n          class=\"str-chat__message-simple__actions str-chat__message-options\"\n          data-testid=\"message-options\"\n          [class.str-chat__message-actions-open]=\"areMessageOptionsOpen\"\n        >\n          <div\n            #messageActionsToggle\n            data-testid=\"message-actions-container\"\n            class=\"str-chat__message-actions-container str-chat__message-simple__actions__action str-chat__message-simple__actions__action--options\"\n            [floatUiLoose]=\"messageMenuFloat\"\n            [looseTrigger]=\"\n              messageActionsService.customActionClickHandler ? 'none' : 'click'\n            \"\n            [hideOnScroll]=\"false\"\n            [hideOnClickOutside]=\"true\"\n            [hideOnMouseLeave]=\"false\"\n            [disableAnimation]=\"false\"\n            [preventOverflow]=\"true\"\n            [positionFixed]=\"true\"\n            (onSHown)=\"areMessageOptionsOpen = true\"\n            (onHidden)=\"areMessageOptionsOpen = false\"\n          >\n            <div\n              *ngIf=\"visibleMessageActionsCount > 0\"\n              class=\"str-chat__message-actions-box-button\"\n              data-testid=\"message-options-button\"\n              (click)=\"messageOptionsButtonClicked()\"\n              (keyup.enter)=\"messageOptionsButtonClicked()\"\n            >\n              <stream-icon-placeholder\n                icon=\"action\"\n                class=\"str-chat__message-action-icon\"\n              ></stream-icon-placeholder>\n            </div>\n          </div>\n        </div>\n        <div class=\"str-chat__message-reactions-host\">\n          <ng-template\n            #defaultMessageReactions\n            let-messageReactionCounts=\"messageReactionCounts\"\n            let-latestReactions=\"latestReactions\"\n            let-messageId=\"messageId\"\n            let-ownReactions=\"ownReactions\"\n            let-messageReactionGroups=\"messageReactionGroups\"\n          >\n            <stream-message-reactions\n              [messageReactionCounts]=\"messageReactionCounts\"\n              [latestReactions]=\"latestReactions\"\n              [messageId]=\"messageId\"\n              [ownReactions]=\"ownReactions\"\n              [messageReactionGroups]=\"messageReactionGroups\"\n            ></stream-message-reactions>\n          </ng-template>\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.messageReactionsTemplate$ | async) ||\n                defaultMessageReactions;\n              context: getMessageReactionsContext()\n            \"\n          ></ng-container>\n        </div>\n        <float-ui-content #messageMenuFloat>\n          <ng-template\n            #defaultMessageActionsBox\n            let-isMine=\"isMine\"\n            let-messageInput=\"message\"\n            let-enabledActions=\"enabledActions\"\n            let-messageTextHtmlElement=\"messageTextHtmlElement\"\n          >\n            <stream-message-actions-box\n              [isMine]=\"isMine\"\n              [message]=\"messageInput\"\n              [enabledActions]=\"enabledActions\"\n              [messageTextHtmlElement]=\"messageTextHtmlElement\"\n            ></stream-message-actions-box>\n          </ng-template>\n          <ng-container>\n            <div\n              (click)=\"messageActionsBoxClicked(messageMenuFloat)\"\n              (keyup.enter)=\"messageActionsBoxClicked(messageMenuFloat)\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  (customTemplatesService.messageActionsBoxTemplate$ | async) ||\n                    defaultMessageActionsBox;\n                  context: getMessageActionsBoxContext()\n                \"\n              >\n              </ng-container>\n            </div>\n          </ng-container>\n        </float-ui-content>\n        <div\n          class=\"str-chat__message-bubble str-chat-angular__message-bubble\"\n          [class.str-chat-angular__message-bubble--attachment-modal-open]=\"\n            imageAttachmentModalState === 'opened'\n          \"\n          data-testid=\"message-bubble\"\n          [floatUiLoose]=\"messageMenuFloat\"\n          #messageMenuTrigger=\"floatUiLoose\"\n          #messageBubble\n          looseTrigger=\"none\"\n          [hideOnScroll]=\"false\"\n          [hideOnClickOutside]=\"true\"\n          [hideOnMouseLeave]=\"false\"\n          [disableAnimation]=\"true\"\n          [preventOverflow]=\"true\"\n          (onShown)=\"areMessageOptionsOpen = true\"\n          (onHidden)=\"areMessageOptionsOpen = false\"\n          [positionFixed]=\"true\"\n        >\n          <ng-container *ngIf=\"hasAttachment && !message?.quoted_message\">\n            <div class=\"str-chat__attachments-container\">\n              <ng-container\n                *ngTemplateOutlet=\"attachmentsTemplate\"\n              ></ng-container>\n            </div>\n          </ng-container>\n          <div\n            *ngIf=\"message?.text || (message?.quoted_message && hasAttachment)\"\n            class=\"str-chat__message-text\"\n            tabindex=\"0\"\n            [class.str-chat__message-text--pointer-cursor]=\"\n              (message?.status === 'failed' &&\n                message?.errorStatusCode !== 403) ||\n              (this.message?.type === 'error' &&\n                this.message?.moderation_details) ||\n              message?.message_text_updated_at\n            \"\n            (click)=\"messageClicked()\"\n            (keyup.enter)=\"messageClicked()\"\n          >\n            <div\n              data-testid=\"inner-message\"\n              class=\"str-chat__message-text-inner str-chat__message-simple-text-inner\"\n              [class.str-chat__message-light-text-inner--has-attachment]=\"\n                hasAttachment\n              \"\n            >\n              <ng-container *ngTemplateOutlet=\"quotedMessage\"></ng-container>\n              <ng-container *ngIf=\"hasAttachment && message?.quoted_message\">\n                <ng-container\n                  *ngTemplateOutlet=\"attachmentsTemplate\"\n                ></ng-container>\n              </ng-container>\n              <div\n                *ngIf=\"message?.type === 'error'\"\n                data-testid=\"client-error-message\"\n                class=\"str-chat__simple-message--error-message str-chat__message--error-message\"\n              >\n                <ng-container *ngIf=\"!message?.moderation_details\">{{\n                  \"streamChat.Error \u00B7 Unsent\" | translate\n                }}</ng-container>\n              </div>\n              <div\n                *ngIf=\"message?.status === 'failed'\"\n                data-testid=\"error-message\"\n                class=\"str-chat__simple-message--error-message str-chat__message--error-message\"\n              >\n                {{\n                  (message?.errorStatusCode === 403\n                    ? \"streamChat.Message Failed \u00B7 Unauthorized\"\n                    : \"streamChat.Message Failed \u00B7 Click to try again\"\n                  ) | translate\n                }}\n              </div>\n              <div #messageTextElement data-testid=\"text\">\n                <p>\n                  <ng-container *ngIf=\"messageTextParts; else defaultContent\">\n                    <!-- eslint-disable-next-line @angular-eslint/template/use-track-by-function -->\n                    <ng-container *ngFor=\"let part of messageTextParts\">\n                      <span\n                        *ngIf=\"part.type === 'text'; else mention\"\n                        [innerHTML]=\"part.content\"\n                      ></span>\n                      <ng-template #mention>\n                        <ng-template #defaultMention let-content=\"content\">\n                          <span class=\"str-chat__message-mention\">{{\n                            content\n                          }}</span>\n                        </ng-template>\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            (customTemplatesService.mentionTemplate$ | async) ||\n                              defaultMention;\n                            context: getMentionContext(part)\n                          \"\n                        ></ng-container>\n                      </ng-template>\n                    </ng-container>\n                  </ng-container>\n                  <ng-template #defaultContent>\n                    <ng-container *ngIf=\"displayAs === 'text'; else asHTML\">\n                      {{ messageText || \"\" }}\n                    </ng-container>\n                    <ng-template #asHTML\n                      ><span\n                        data-testid=\"html-content\"\n                        [innerHTML]=\"messageText\"\n                      ></span\n                    ></ng-template>\n                  </ng-template>\n                </p>\n              </div>\n            </div>\n          </div>\n          <stream-icon-placeholder\n            class=\"str-chat__message-error-icon\"\n            icon=\"error\"\n          ></stream-icon-placeholder>\n        </div>\n      </div>\n      <ng-container\n        *ngTemplateOutlet=\"replyCountButton; context: { message: message }\"\n      ></ng-container>\n\n      <ng-container *ngTemplateOutlet=\"messageDateAndSender\"></ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n\n<ng-template #deletedMessage>\n  <div data-testid=\"message-deleted-component\">\n    <div class=\"str-chat__message--deleted-inner\" translate>\n      streamChat.This message was deleted...\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #systemMessage>\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.systemMessageTemplate$ | async) ||\n        defaultSystemMessage;\n      context: getMessageContext()\n    \"\n  ></ng-container>\n  <ng-template #defaultSystemMessage let-messageInput=\"message\">\n    <div data-testid=\"system-message\" class=\"str-chat__message--system\">\n      <div class=\"str-chat__message--system__text\">\n        <div class=\"str-chat__message--system__line\"></div>\n        <p>{{ messageInput?.text }}</p>\n        <div class=\"str-chat__message--system__line\"></div>\n      </div>\n      <div class=\"str-chat__message--system__date\">\n        {{ parsedDate }}\n      </div>\n    </div>\n  </ng-template>\n</ng-template>\n\n<ng-template #quotedMessage>\n  <div\n    *ngIf=\"message?.quoted_message\"\n    class=\"quoted-message str-chat__quoted-message-preview\"\n    data-testid=\"quoted-message-container\"\n    [class.mine]=\"isSentByCurrentUser\"\n    (click)=\"\n      jumpToMessage(\n        (message?.quoted_message)!.id,\n        message?.quoted_message?.parent_id\n      )\n    \"\n    (keyup.enter)=\"\n      jumpToMessage(\n        (message?.quoted_message)!.id,\n        message?.quoted_message?.parent_id\n      )\n    \"\n  >\n    <stream-avatar-placeholder\n      data-testid=\"qouted-message-avatar\"\n      class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n      type=\"user\"\n      location=\"quoted-message-sender\"\n      [imageUrl]=\"message?.quoted_message?.user?.image\"\n      [name]=\"\n        message?.quoted_message?.user?.name || message?.quoted_message?.user?.id\n      \"\n      [user]=\"message?.quoted_message?.user || undefined\"\n    ></stream-avatar-placeholder>\n    <div class=\"quoted-message-inner str-chat__quoted-message-bubble\">\n      <ng-container\n        *ngIf=\"\n          message?.quoted_message?.attachments &&\n          message?.quoted_message?.attachments?.length\n        \"\n      >\n        <ng-template\n          #defaultAttachments\n          let-messageId=\"messageId\"\n          let-attachments=\"attachments\"\n          let-parentMessageId=\"parentMessageId\"\n          let-imageModalStateChangeHandler=\"imageModalStateChangeHandler\"\n        >\n          <stream-attachment-list\n            [messageId]=\"messageId\"\n            [attachments]=\"attachments\"\n            [parentMessageId]=\"parentMessageId\"\n            (imageModalStateChange)=\"imageModalStateChangeHandler($event)\"\n          ></stream-attachment-list>\n        </ng-template>\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.attachmentListTemplate$ | async) ||\n              defaultAttachments;\n            context: getQuotedMessageAttachmentListContext()\n          \"\n        ></ng-container>\n      </ng-container>\n      <div\n        data-testid=\"quoted-message-text\"\n        [innerHTML]=\"\n          message?.quoted_message?.translation ||\n          message?.quoted_message?.html ||\n          message?.quoted_message?.text\n        \"\n      ></div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #messageDateAndSender>\n  <ng-container>\n    <div\n      *ngIf=\"shouldDisplayTranslationNotice\"\n      class=\"str-chat__translation-notice\"\n      data-testid=\"translation-notice\"\n    >\n      <button\n        *ngIf=\"displayedMessageTextContent === 'translation'\"\n        data-testid=\"see-original\"\n        translate\n        (click)=\"displayOriginalMessage()\"\n        (keyup.enter)=\"displayOriginalMessage()\"\n      >\n        streamChat.See original (automatically translated)\n      </button>\n      <button\n        *ngIf=\"displayedMessageTextContent === 'original'\"\n        data-testid=\"see-translation\"\n        translate\n        (click)=\"displayTranslatedMessage()\"\n        (keyup.enter)=\"displayTranslatedMessage()\"\n      >\n        streamChat.See translation\n      </button>\n    </div>\n    <ng-container\n      *ngIf=\"customTemplatesService.customMessageMetadataTemplate$ | async\"\n    >\n      <div class=\"str-chat__custom-message-metadata\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.customMessageMetadataTemplate$ | async)!;\n            context: getMessageMetadataContext()\n          \"\n        ></ng-container>\n      </div>\n    </ng-container>\n    <div\n      class=\"str-chat__message-data str-chat__message-simple-data str-chat__message-metadata\"\n    >\n      <ng-container *ngTemplateOutlet=\"messageStatus\"></ng-container>\n\n      <span\n        *ngIf=\"!isSentByCurrentUser\"\n        data-testid=\"sender\"\n        class=\"str-chat__message-simple-name str-chat__message-sender-name\"\n      >\n        {{ message?.user?.name ? message?.user?.name : message?.user?.id }}\n      </span>\n      <span\n        data-testid=\"date\"\n        class=\"str-chat__message-simple-timestamp str-chat__message-simple-time\"\n      >\n        {{ parsedDate }}\n      </span>\n      <ng-container *ngIf=\"message?.message_text_updated_at\">\n        <span\n          data-testid=\"edited-flag\"\n          class=\"str-chat__mesage-simple-edited\"\n          translate\n          >streamChat.Edited</span\n        >\n        <div\n          data-testid=\"edited-timestamp\"\n          class=\"str-chat__message-edited-timestamp\"\n          [ngClass]=\"{\n            'str-chat__message-edited-timestamp--open': isEditedFlagOpened,\n            'str-chat__message-edited-timestamp--collapsed': !isEditedFlagOpened\n          }\"\n        >\n          <span translate>streamChat.Edited</span>\n          <time\n            dateTime=\"{{ message?.message_text_updated_at }}\"\n            title=\"{{ message?.message_text_updated_at }}\"\n          >\n            {{ pasedEditedDate }}\n          </time>\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #messageStatus>\n  <ng-container\n    *ngIf=\"\n      isSentByCurrentUser &&\n      ((isLastSentMessage && message?.status === 'received') ||\n        message?.status === 'sending')\n    \"\n  >\n    <ng-container *ngIf=\"message?.status === 'sending'; else sentStatus\">\n      <ng-container *ngTemplateOutlet=\"sendingStatus\"></ng-container>\n    </ng-container>\n    <ng-template #sentStatus>\n      <ng-container\n        *ngIf=\"\n          mode === 'main' && isMessageDeliveredAndRead && canDisplayReadStatus;\n          else deliveredStatus\n        \"\n      >\n        <ng-container *ngTemplateOutlet=\"readStatus\"></ng-container>\n      </ng-container>\n    </ng-template>\n    <ng-template #deliveredStatus>\n      <ng-container\n        *ngTemplateOutlet=\"\n          (customTemplatesService.deliveredStatusTemplate$ | async) ||\n            defaultDeliveredStatus;\n          context: getDeliveredStatusContext()\n        \"\n      ></ng-container>\n    </ng-template>\n    <ng-template #defaultDeliveredStatus>\n      <span\n        *ngIf=\"mode === 'main'\"\n        class=\"str-chat__message-simple-status str-chat__message-simple-status-angular str-chat__message-status\"\n        data-testid=\"delivered-indicator\"\n        tabindex=\"0\"\n        [floatUiLoose]=\"floatingContent\"\n        loosePlacement=\"top\"\n        [looseTrigger]=\"hasTouchSupport ? 'click' : 'hover'\"\n        [disableAnimation]=\"true\"\n        [hideOnClickOutside]=\"true\"\n        [positionFixed]=\"true\"\n        [preventOverflow]=\"true\"\n      >\n        <float-ui-content #floatingContent>\n          <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n            {{ \"streamChat.Delivered\" | translate }}\n          </div>\n        </float-ui-content>\n        <stream-icon-placeholder\n          data-testid=\"delivered-icon\"\n          icon=\"delivered\"\n        ></stream-icon-placeholder>\n      </span>\n    </ng-template>\n    <ng-template #sendingStatus>\n      <ng-container\n        *ngTemplateOutlet=\"\n          (customTemplatesService.sendingStatusTemplate$ | async) ||\n            defaultSendingStatus;\n          context: getSendingStatusContext()\n        \"\n      ></ng-container>\n    </ng-template>\n    <ng-template #defaultSendingStatus>\n      <span\n        class=\"str-chat__message-simple-status str-chat__message-simple-status-angular str-chat__message-status\"\n        data-testid=\"sending-indicator\"\n        tabindex=\"0\"\n        [floatUiLoose]=\"floatingContent\"\n        loosePlacement=\"top\"\n        [looseTrigger]=\"hasTouchSupport ? 'click' : 'hover'\"\n        [disableAnimation]=\"true\"\n        [hideOnClickOutside]=\"true\"\n        [positionFixed]=\"true\"\n        [preventOverflow]=\"true\"\n      >\n        <float-ui-content #floatingContent>\n          <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n            {{ \"streamChat.Sending...\" | translate }}\n          </div>\n        </float-ui-content>\n        <stream-loading-indicator-placeholder\n          data-testid=\"loading-indicator\"\n        ></stream-loading-indicator-placeholder>\n      </span>\n    </ng-template>\n    <ng-template #readStatus>\n      <ng-container\n        *ngTemplateOutlet=\"\n          (customTemplatesService.readStatusTemplate$ | async) ||\n            defaultReadStatus;\n          context: getReadStatusContext()\n        \"\n      ></ng-container>\n    </ng-template>\n    <ng-template #defaultReadStatus let-readByText=\"readByText\">\n      <span\n        class=\"str-chat__message-simple-status str-chat__message-simple-status-angular str-chat__message-status\"\n        data-testid=\"read-indicator\"\n        tabindex=\"0\"\n        [floatUiLoose]=\"floatingContent\"\n        loosePlacement=\"top\"\n        [looseTrigger]=\"hasTouchSupport ? 'click' : 'hover'\"\n        [disableAnimation]=\"true\"\n        [hideOnClickOutside]=\"true\"\n        [positionFixed]=\"true\"\n        [preventOverflow]=\"true\"\n      >\n        <float-ui-content #floatingContent>\n          <div\n            class=\"str-chat__tooltip str-chat__tooltip-angular\"\n            data-testid=\"read-by-tooltip\"\n          >\n            {{ readByText }}\n          </div>\n        </float-ui-content>\n        <stream-icon-placeholder icon=\"read\"></stream-icon-placeholder>\n      </span>\n    </ng-template>\n  </ng-container>\n</ng-template>\n\n<ng-template #replyCountButton>\n  <div\n    class=\"str-chat__message-simple-reply-button str-chat__message-replies-count-button-wrapper\"\n  >\n    <button\n      *ngIf=\"shouldDisplayThreadLink\"\n      class=\"str-chat__message-replies-count-button\"\n      data-testid=\"reply-count-button\"\n      (click)=\"setAsActiveParentMessage()\"\n    >\n      {{message?.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}\n      replies' | translate:replyCountParam)}}\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #attachmentsTemplate>\n  <ng-template\n    #defaultAttachments\n    let-messageId=\"messageId\"\n    let-attachments=\"attachments\"\n    let-parentMessageId=\"parentMessageId\"\n    let-imageModalStateChangeHandler=\"imageModalStateChangeHandler\"\n  >\n    <stream-attachment-list\n      [messageId]=\"messageId\"\n      [attachments]=\"attachments\"\n      [parentMessageId]=\"parentMessageId\"\n      (imageModalStateChange)=\"imageModalStateChangeHandler($event)\"\n    ></stream-attachment-list>\n  </ng-template>\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.attachmentListTemplate$ | async) ||\n        defaultAttachments;\n      context: getAttachmentListContext()\n    \"\n  ></ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i8.NgxFloatUiContentComponent, selector: "float-ui-content", exportAs: ["ngxFloatUiContent"] }, { kind: "directive", type: i8.NgxFloatUiLooseDirective, selector: "[floatUiLoose]", inputs: ["floatUiLoose", "loosePlacement", "looseTrigger"], exportAs: ["floatUiLoose"] }, { kind: "component", type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { kind: "directive", type: i10.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "component", type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder" }, { kind: "component", type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: ["isMine", "message", "messageTextHtmlElement", "enabledActions"] }, { kind: "component", type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "parentMessageId", "attachments"], outputs: ["imageModalStateChange"] }, { kind: "component", type: MessageReactionsComponent, selector: "stream-message-reactions", inputs: ["messageId", "messageReactionGroups", "messageReactionCounts", "latestReactions", "ownReactions"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MessageComponent, selector: "stream-message", inputs: { message: "message", enabledMessageActions: "enabledMessageActions", isLastSentMessage: "isLastSentMessage", mode: "mode", isHighlighted: "isHighlighted", scroll$: "scroll$" }, viewQueries: [{ propertyName: "messageMenuTrigger", first: true, predicate: ["messageMenuTrigger"], descendants: true }, { propertyName: "messageMenuFloat", first: true, predicate: ["messageMenuFloat"], descendants: true }, { propertyName: "messageTextElement", first: true, predicate: ["messageTextElement"], descendants: true }, { propertyName: "messageBubble", first: true, predicate: ["messageBubble"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #container\n  data-testid=\"message-container\"\n  class=\"str-chat__message-simple str-chat__message str-chat__message--{{\n    message?.type\n  }} str-chat__message--{{ message?.status }} {{\n    message?.text ? 'str-chat__message--has-text' : 'has-no-text'\n  }} str-chat__message-menu-{{ areMessageOptionsOpen ? 'opened' : 'closed' }}\"\n  [class.str-chat__message--me]=\"isSentByCurrentUser\"\n  [class.str-chat__message--other]=\"!isSentByCurrentUser\"\n  [class.str-chat__message-simple--me]=\"isSentByCurrentUser\"\n  [class.str-chat__message--has-attachment]=\"hasAttachment\"\n  [class.str-chat__message--with-reactions]=\"hasReactions\"\n  [class.str-chat__message--highlighted]=\"isHighlighted\"\n  [class.str-chat__message-with-thread-link]=\"shouldDisplayThreadLink\"\n  [class.str-chat__message-send-can-be-retried]=\"\n    (message?.status === 'failed' && message?.errorStatusCode !== 403) ||\n    (message?.type === 'error' && message?.moderation_details)\n  \"\n  [class.str-chat__message-with-touch-support]=\"hasTouchSupport\"\n  [class.str-chat__message-without-touch-support]=\"!hasTouchSupport\"\n>\n  <ng-container *ngIf=\"!message?.deleted_at; else deletedMessage\">\n    <ng-container *ngIf=\"message?.type !== 'system'; else systemMessage\">\n      <stream-avatar-placeholder\n        data-testid=\"avatar\"\n        class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n        type=\"user\"\n        location=\"message-sender\"\n        [imageUrl]=\"message?.user?.image\"\n        [name]=\"message?.user?.name || message?.user?.id\"\n        [user]=\"message?.user || undefined\"\n      ></stream-avatar-placeholder>\n      <div class=\"str-chat__message-inner\">\n        <div\n          *ngIf=\"!hasTouchSupport && areOptionsVisible\"\n          class=\"str-chat__message-simple__actions str-chat__message-options\"\n          data-testid=\"message-options\"\n          [class.str-chat__message-actions-open]=\"areMessageOptionsOpen\"\n        >\n          <div\n            #messageActionsToggle\n            data-testid=\"message-actions-container\"\n            class=\"str-chat__message-actions-container str-chat__message-simple__actions__action str-chat__message-simple__actions__action--options\"\n            [floatUiLoose]=\"messageMenuFloat\"\n            [looseTrigger]=\"\n              messageActionsService.customActionClickHandler ? 'none' : 'click'\n            \"\n            [hideOnScroll]=\"false\"\n            [hideOnClickOutside]=\"true\"\n            [hideOnMouseLeave]=\"false\"\n            [disableAnimation]=\"false\"\n            [preventOverflow]=\"true\"\n            [positionFixed]=\"true\"\n            (onSHown)=\"areMessageOptionsOpen = true\"\n            (onHidden)=\"areMessageOptionsOpen = false\"\n          >\n            <div\n              *ngIf=\"visibleMessageActionsCount > 0\"\n              class=\"str-chat__message-actions-box-button\"\n              data-testid=\"message-options-button\"\n              (click)=\"messageOptionsButtonClicked()\"\n              (keyup.enter)=\"messageOptionsButtonClicked()\"\n            >\n              <stream-icon-placeholder\n                icon=\"action\"\n                class=\"str-chat__message-action-icon\"\n              ></stream-icon-placeholder>\n            </div>\n          </div>\n        </div>\n        <div class=\"str-chat__message-reactions-host\">\n          <ng-template\n            #defaultMessageReactions\n            let-messageReactionCounts=\"messageReactionCounts\"\n            let-latestReactions=\"latestReactions\"\n            let-messageId=\"messageId\"\n            let-ownReactions=\"ownReactions\"\n            let-messageReactionGroups=\"messageReactionGroups\"\n          >\n            <stream-message-reactions\n              [messageReactionCounts]=\"messageReactionCounts\"\n              [latestReactions]=\"latestReactions\"\n              [messageId]=\"messageId\"\n              [ownReactions]=\"ownReactions\"\n              [messageReactionGroups]=\"messageReactionGroups\"\n            ></stream-message-reactions>\n          </ng-template>\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.messageReactionsTemplate$ | async) ||\n                defaultMessageReactions;\n              context: getMessageReactionsContext()\n            \"\n          ></ng-container>\n        </div>\n        <float-ui-content #messageMenuFloat>\n          <ng-template\n            #defaultMessageActionsBox\n            let-isMine=\"isMine\"\n            let-messageInput=\"message\"\n            let-enabledActions=\"enabledActions\"\n            let-messageTextHtmlElement=\"messageTextHtmlElement\"\n          >\n            <stream-message-actions-box\n              [isMine]=\"isMine\"\n              [message]=\"messageInput\"\n              [enabledActions]=\"enabledActions\"\n              [messageTextHtmlElement]=\"messageTextHtmlElement\"\n            ></stream-message-actions-box>\n          </ng-template>\n          <ng-container>\n            <div\n              (click)=\"messageActionsBoxClicked(messageMenuFloat)\"\n              (keyup.enter)=\"messageActionsBoxClicked(messageMenuFloat)\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  (customTemplatesService.messageActionsBoxTemplate$ | async) ||\n                    defaultMessageActionsBox;\n                  context: getMessageActionsBoxContext()\n                \"\n              >\n              </ng-container>\n            </div>\n          </ng-container>\n        </float-ui-content>\n        <div\n          class=\"str-chat__message-bubble str-chat-angular__message-bubble\"\n          [class.str-chat-angular__message-bubble--attachment-modal-open]=\"\n            imageAttachmentModalState === 'opened'\n          \"\n          data-testid=\"message-bubble\"\n          [floatUiLoose]=\"messageMenuFloat\"\n          #messageMenuTrigger=\"floatUiLoose\"\n          #messageBubble\n          looseTrigger=\"none\"\n          [hideOnScroll]=\"false\"\n          [hideOnClickOutside]=\"true\"\n          [hideOnMouseLeave]=\"false\"\n          [disableAnimation]=\"true\"\n          [preventOverflow]=\"true\"\n          (onShown)=\"areMessageOptionsOpen = true\"\n          (onHidden)=\"areMessageOptionsOpen = false\"\n          [positionFixed]=\"true\"\n        >\n          <ng-container *ngIf=\"hasAttachment && !message?.quoted_message\">\n            <div class=\"str-chat__attachments-container\">\n              <ng-container\n                *ngTemplateOutlet=\"attachmentsTemplate\"\n              ></ng-container>\n            </div>\n          </ng-container>\n          <div\n            *ngIf=\"message?.text || (message?.quoted_message && hasAttachment)\"\n            class=\"str-chat__message-text\"\n            tabindex=\"0\"\n            [class.str-chat__message-text--pointer-cursor]=\"\n              (message?.status === 'failed' &&\n                message?.errorStatusCode !== 403) ||\n              (this.message?.type === 'error' &&\n                this.message?.moderation_details) ||\n              message?.message_text_updated_at\n            \"\n            (click)=\"messageClicked()\"\n            (keyup.enter)=\"messageClicked()\"\n          >\n            <div\n              data-testid=\"inner-message\"\n              class=\"str-chat__message-text-inner str-chat__message-simple-text-inner\"\n              [class.str-chat__message-light-text-inner--has-attachment]=\"\n                hasAttachment\n              \"\n            >\n              <ng-container *ngTemplateOutlet=\"quotedMessage\"></ng-container>\n              <ng-container *ngIf=\"hasAttachment && message?.quoted_message\">\n                <ng-container\n                  *ngTemplateOutlet=\"attachmentsTemplate\"\n                ></ng-container>\n              </ng-container>\n              <div\n                *ngIf=\"message?.type === 'error'\"\n                data-testid=\"client-error-message\"\n                class=\"str-chat__simple-message--error-message str-chat__message--error-message\"\n              >\n                <ng-container *ngIf=\"!message?.moderation_details\">{{\n                  \"streamChat.Error \u00B7 Unsent\" | translate\n                }}</ng-container>\n              </div>\n              <div\n                *ngIf=\"message?.status === 'failed'\"\n                data-testid=\"error-message\"\n                class=\"str-chat__simple-message--error-message str-chat__message--error-message\"\n              >\n                {{\n                  (message?.errorStatusCode === 403\n                    ? \"streamChat.Message Failed \u00B7 Unauthorized\"\n                    : \"streamChat.Message Failed \u00B7 Click to try again\"\n                  ) | translate\n                }}\n              </div>\n              <div #messageTextElement data-testid=\"text\">\n                <p>\n                  <ng-container *ngIf=\"messageTextParts; else defaultContent\">\n                    <!-- eslint-disable-next-line @angular-eslint/template/use-track-by-function -->\n                    <ng-container *ngFor=\"let part of messageTextParts\">\n                      <span\n                        *ngIf=\"part.type === 'text'; else mention\"\n                        [innerHTML]=\"part.content\"\n                      ></span>\n                      <ng-template #mention>\n                        <ng-template #defaultMention let-content=\"content\">\n                          <span class=\"str-chat__message-mention\">{{\n                            content\n                          }}</span>\n                        </ng-template>\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            (customTemplatesService.mentionTemplate$ | async) ||\n                              defaultMention;\n                            context: getMentionContext(part)\n                          \"\n                        ></ng-container>\n                      </ng-template>\n                    </ng-container>\n                  </ng-container>\n                  <ng-template #defaultContent>\n                    <ng-container *ngIf=\"displayAs === 'text'; else asHTML\">\n                      {{ messageText || \"\" }}\n                    </ng-container>\n                    <ng-template #asHTML\n                      ><span\n                        data-testid=\"html-content\"\n                        [innerHTML]=\"messageText\"\n                      ></span\n                    ></ng-template>\n                  </ng-template>\n                </p>\n              </div>\n            </div>\n          </div>\n          <stream-icon-placeholder\n            class=\"str-chat__message-error-icon\"\n            icon=\"error\"\n          ></stream-icon-placeholder>\n        </div>\n      </div>\n      <ng-container\n        *ngTemplateOutlet=\"replyCountButton; context: { message: message }\"\n      ></ng-container>\n\n      <ng-container *ngTemplateOutlet=\"messageDateAndSender\"></ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n\n<ng-template #deletedMessage>\n  <div data-testid=\"message-deleted-component\">\n    <div class=\"str-chat__message--deleted-inner\" translate>\n      streamChat.This message was deleted...\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #systemMessage>\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.systemMessageTemplate$ | async) ||\n        defaultSystemMessage;\n      context: getMessageContext()\n    \"\n  ></ng-container>\n  <ng-template #defaultSystemMessage let-messageInput=\"message\">\n    <div data-testid=\"system-message\" class=\"str-chat__message--system\">\n      <div class=\"str-chat__message--system__text\">\n        <div class=\"str-chat__message--system__line\"></div>\n        <p>{{ messageInput?.text }}</p>\n        <div class=\"str-chat__message--system__line\"></div>\n      </div>\n      <div class=\"str-chat__message--system__date\">\n        {{ parsedDate }}\n      </div>\n    </div>\n  </ng-template>\n</ng-template>\n\n<ng-template #quotedMessage>\n  <div\n    *ngIf=\"message?.quoted_message\"\n    class=\"quoted-message str-chat__quoted-message-preview\"\n    data-testid=\"quoted-message-container\"\n    [class.mine]=\"isSentByCurrentUser\"\n    (click)=\"\n      jumpToMessage(\n        (message?.quoted_message)!.id,\n        message?.quoted_message?.parent_id\n      )\n    \"\n    (keyup.enter)=\"\n      jumpToMessage(\n        (message?.quoted_message)!.id,\n        message?.quoted_message?.parent_id\n      )\n    \"\n  >\n    <stream-avatar-placeholder\n      data-testid=\"qouted-message-avatar\"\n      class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n      type=\"user\"\n      location=\"quoted-message-sender\"\n      [imageUrl]=\"message?.quoted_message?.user?.image\"\n      [name]=\"\n        message?.quoted_message?.user?.name || message?.quoted_message?.user?.id\n      \"\n      [user]=\"message?.quoted_message?.user || undefined\"\n    ></stream-avatar-placeholder>\n    <div class=\"quoted-message-inner str-chat__quoted-message-bubble\">\n      <ng-container\n        *ngIf=\"\n          message?.quoted_message?.attachments &&\n          message?.quoted_message?.attachments?.length\n        \"\n      >\n        <ng-template\n          #defaultAttachments\n          let-messageId=\"messageId\"\n          let-attachments=\"attachments\"\n          let-parentMessageId=\"parentMessageId\"\n          let-imageModalStateChangeHandler=\"imageModalStateChangeHandler\"\n        >\n          <stream-attachment-list\n            [messageId]=\"messageId\"\n            [attachments]=\"attachments\"\n            [parentMessageId]=\"parentMessageId\"\n            (imageModalStateChange)=\"imageModalStateChangeHandler($event)\"\n          ></stream-attachment-list>\n        </ng-template>\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.attachmentListTemplate$ | async) ||\n              defaultAttachments;\n            context: getQuotedMessageAttachmentListContext()\n          \"\n        ></ng-container>\n      </ng-container>\n      <div\n        data-testid=\"quoted-message-text\"\n        [innerHTML]=\"\n          message?.quoted_message?.translation ||\n          message?.quoted_message?.html ||\n          message?.quoted_message?.text\n        \"\n      ></div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #messageDateAndSender>\n  <ng-container>\n    <div\n      *ngIf=\"shouldDisplayTranslationNotice\"\n      class=\"str-chat__translation-notice\"\n      data-testid=\"translation-notice\"\n    >\n      <button\n        *ngIf=\"displayedMessageTextContent === 'translation'\"\n        data-testid=\"see-original\"\n        translate\n        (click)=\"displayOriginalMessage()\"\n        (keyup.enter)=\"displayOriginalMessage()\"\n      >\n        streamChat.See original (automatically translated)\n      </button>\n      <button\n        *ngIf=\"displayedMessageTextContent === 'original'\"\n        data-testid=\"see-translation\"\n        translate\n        (click)=\"displayTranslatedMessage()\"\n        (keyup.enter)=\"displayTranslatedMessage()\"\n      >\n        streamChat.See translation\n      </button>\n    </div>\n    <ng-container\n      *ngIf=\"customTemplatesService.customMessageMetadataTemplate$ | async\"\n    >\n      <div class=\"str-chat__custom-message-metadata\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.customMessageMetadataTemplate$ | async)!;\n            context: getMessageMetadataContext()\n          \"\n        ></ng-container>\n      </div>\n    </ng-container>\n    <div\n      class=\"str-chat__message-data str-chat__message-simple-data str-chat__message-metadata\"\n    >\n      <ng-container *ngTemplateOutlet=\"messageStatus\"></ng-container>\n\n      <span\n        *ngIf=\"!isSentByCurrentUser\"\n        data-testid=\"sender\"\n        class=\"str-chat__message-simple-name str-chat__message-sender-name\"\n      >\n        {{ message?.user?.name ? message?.user?.name : message?.user?.id }}\n      </span>\n      <span\n        data-testid=\"date\"\n        class=\"str-chat__message-simple-timestamp str-chat__message-simple-time\"\n      >\n        {{ parsedDate }}\n      </span>\n      <ng-container *ngIf=\"message?.message_text_updated_at\">\n        <span\n          data-testid=\"edited-flag\"\n          class=\"str-chat__mesage-simple-edited\"\n          translate\n          >streamChat.Edited</span\n        >\n        <div\n          data-testid=\"edited-timestamp\"\n          class=\"str-chat__message-edited-timestamp\"\n          [ngClass]=\"{\n            'str-chat__message-edited-timestamp--open': isEditedFlagOpened,\n            'str-chat__message-edited-timestamp--collapsed': !isEditedFlagOpened\n          }\"\n        >\n          <span translate>streamChat.Edited</span>\n          <time\n            dateTime=\"{{ message?.message_text_updated_at }}\"\n            title=\"{{ message?.message_text_updated_at }}\"\n          >\n            {{ pasedEditedDate }}\n          </time>\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #messageStatus>\n  <ng-container\n    *ngIf=\"\n      isSentByCurrentUser &&\n      ((isLastSentMessage && message?.status === 'received') ||\n        message?.status === 'sending')\n    \"\n  >\n    <ng-container *ngIf=\"message?.status === 'sending'; else sentStatus\">\n      <ng-container *ngTemplateOutlet=\"sendingStatus\"></ng-container>\n    </ng-container>\n    <ng-template #sentStatus>\n      <ng-container\n        *ngIf=\"\n          mode === 'main' && isMessageDeliveredAndRead && canDisplayReadStatus;\n          else deliveredStatus\n        \"\n      >\n        <ng-container *ngTemplateOutlet=\"readStatus\"></ng-container>\n      </ng-container>\n    </ng-template>\n    <ng-template #deliveredStatus>\n      <ng-container\n        *ngTemplateOutlet=\"\n          (customTemplatesService.deliveredStatusTemplate$ | async) ||\n            defaultDeliveredStatus;\n          context: getDeliveredStatusContext()\n        \"\n      ></ng-container>\n    </ng-template>\n    <ng-template #defaultDeliveredStatus>\n      <span\n        *ngIf=\"mode === 'main'\"\n        class=\"str-chat__message-simple-status str-chat__message-simple-status-angular str-chat__message-status\"\n        data-testid=\"delivered-indicator\"\n        tabindex=\"0\"\n        [floatUiLoose]=\"floatingContent\"\n        loosePlacement=\"top\"\n        [looseTrigger]=\"hasTouchSupport ? 'click' : 'hover'\"\n        [disableAnimation]=\"true\"\n        [hideOnClickOutside]=\"true\"\n        [positionFixed]=\"true\"\n        [preventOverflow]=\"true\"\n      >\n        <float-ui-content #floatingContent>\n          <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n            {{ \"streamChat.Delivered\" | translate }}\n          </div>\n        </float-ui-content>\n        <stream-icon-placeholder\n          data-testid=\"delivered-icon\"\n          icon=\"delivered\"\n        ></stream-icon-placeholder>\n      </span>\n    </ng-template>\n    <ng-template #sendingStatus>\n      <ng-container\n        *ngTemplateOutlet=\"\n          (customTemplatesService.sendingStatusTemplate$ | async) ||\n            defaultSendingStatus;\n          context: getSendingStatusContext()\n        \"\n      ></ng-container>\n    </ng-template>\n    <ng-template #defaultSendingStatus>\n      <span\n        class=\"str-chat__message-simple-status str-chat__message-simple-status-angular str-chat__message-status\"\n        data-testid=\"sending-indicator\"\n        tabindex=\"0\"\n        [floatUiLoose]=\"floatingContent\"\n        loosePlacement=\"top\"\n        [looseTrigger]=\"hasTouchSupport ? 'click' : 'hover'\"\n        [disableAnimation]=\"true\"\n        [hideOnClickOutside]=\"true\"\n        [positionFixed]=\"true\"\n        [preventOverflow]=\"true\"\n      >\n        <float-ui-content #floatingContent>\n          <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n            {{ \"streamChat.Sending...\" | translate }}\n          </div>\n        </float-ui-content>\n        <stream-loading-indicator-placeholder\n          data-testid=\"loading-indicator\"\n        ></stream-loading-indicator-placeholder>\n      </span>\n    </ng-template>\n    <ng-template #readStatus>\n      <ng-container\n        *ngTemplateOutlet=\"\n          (customTemplatesService.readStatusTemplate$ | async) ||\n            defaultReadStatus;\n          context: getReadStatusContext()\n        \"\n      ></ng-container>\n    </ng-template>\n    <ng-template #defaultReadStatus let-readByText=\"readByText\">\n      <span\n        class=\"str-chat__message-simple-status str-chat__message-simple-status-angular str-chat__message-status\"\n        data-testid=\"read-indicator\"\n        tabindex=\"0\"\n        [floatUiLoose]=\"floatingContent\"\n        loosePlacement=\"top\"\n        [looseTrigger]=\"hasTouchSupport ? 'click' : 'hover'\"\n        [disableAnimation]=\"true\"\n        [hideOnClickOutside]=\"true\"\n        [positionFixed]=\"true\"\n        [preventOverflow]=\"true\"\n      >\n        <float-ui-content #floatingContent>\n          <div\n            class=\"str-chat__tooltip str-chat__tooltip-angular\"\n            data-testid=\"read-by-tooltip\"\n          >\n            {{ readByText }}\n          </div>\n        </float-ui-content>\n        <stream-icon-placeholder icon=\"read\"></stream-icon-placeholder>\n      </span>\n    </ng-template>\n  </ng-container>\n</ng-template>\n\n<ng-template #replyCountButton>\n  <div\n    class=\"str-chat__message-simple-reply-button str-chat__message-replies-count-button-wrapper\"\n  >\n    <button\n      *ngIf=\"shouldDisplayThreadLink\"\n      class=\"str-chat__message-replies-count-button\"\n      data-testid=\"reply-count-button\"\n      (click)=\"setAsActiveParentMessage()\"\n    >\n      {{message?.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}\n      replies' | translate:replyCountParam)}}\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #attachmentsTemplate>\n  <ng-template\n    #defaultAttachments\n    let-messageId=\"messageId\"\n    let-attachments=\"attachments\"\n    let-parentMessageId=\"parentMessageId\"\n    let-imageModalStateChangeHandler=\"imageModalStateChangeHandler\"\n  >\n    <stream-attachment-list\n      [messageId]=\"messageId\"\n      [attachments]=\"attachments\"\n      [parentMessageId]=\"parentMessageId\"\n      (imageModalStateChange)=\"imageModalStateChangeHandler($event)\"\n    ></stream-attachment-list>\n  </ng-template>\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.attachmentListTemplate$ | async) ||\n        defaultAttachments;\n      context: getAttachmentListContext()\n    \"\n  ></ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i8.NgxFloatUiContentComponent, selector: "float-ui-content", exportAs: ["ngxFloatUiContent"] }, { kind: "directive", type: i8.NgxFloatUiLooseDirective, selector: "[floatUiLoose]", inputs: ["floatUiLoose", "loosePlacement", "looseTrigger"], exportAs: ["floatUiLoose"] }, { kind: "component", type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { kind: "directive", type: i6.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "component", type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder" }, { kind: "component", type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: ["isMine", "message", "messageTextHtmlElement", "enabledActions"] }, { kind: "component", type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "parentMessageId", "attachments"], outputs: ["imageModalStateChange"] }, { kind: "component", type: MessageReactionsComponent, selector: "stream-message-reactions", inputs: ["messageId", "messageReactionGroups", "messageReactionCounts", "latestReactions", "ownReactions"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'stream-message', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  #container\n  data-testid=\"message-container\"\n  class=\"str-chat__message-simple str-chat__message str-chat__message--{{\n    message?.type\n  }} str-chat__message--{{ message?.status }} {{\n    message?.text ? 'str-chat__message--has-text' : 'has-no-text'\n  }} str-chat__message-menu-{{ areMessageOptionsOpen ? 'opened' : 'closed' }}\"\n  [class.str-chat__message--me]=\"isSentByCurrentUser\"\n  [class.str-chat__message--other]=\"!isSentByCurrentUser\"\n  [class.str-chat__message-simple--me]=\"isSentByCurrentUser\"\n  [class.str-chat__message--has-attachment]=\"hasAttachment\"\n  [class.str-chat__message--with-reactions]=\"hasReactions\"\n  [class.str-chat__message--highlighted]=\"isHighlighted\"\n  [class.str-chat__message-with-thread-link]=\"shouldDisplayThreadLink\"\n  [class.str-chat__message-send-can-be-retried]=\"\n    (message?.status === 'failed' && message?.errorStatusCode !== 403) ||\n    (message?.type === 'error' && message?.moderation_details)\n  \"\n  [class.str-chat__message-with-touch-support]=\"hasTouchSupport\"\n  [class.str-chat__message-without-touch-support]=\"!hasTouchSupport\"\n>\n  <ng-container *ngIf=\"!message?.deleted_at; else deletedMessage\">\n    <ng-container *ngIf=\"message?.type !== 'system'; else systemMessage\">\n      <stream-avatar-placeholder\n        data-testid=\"avatar\"\n        class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n        type=\"user\"\n        location=\"message-sender\"\n        [imageUrl]=\"message?.user?.image\"\n        [name]=\"message?.user?.name || message?.user?.id\"\n        [user]=\"message?.user || undefined\"\n      ></stream-avatar-placeholder>\n      <div class=\"str-chat__message-inner\">\n        <div\n          *ngIf=\"!hasTouchSupport && areOptionsVisible\"\n          class=\"str-chat__message-simple__actions str-chat__message-options\"\n          data-testid=\"message-options\"\n          [class.str-chat__message-actions-open]=\"areMessageOptionsOpen\"\n        >\n          <div\n            #messageActionsToggle\n            data-testid=\"message-actions-container\"\n            class=\"str-chat__message-actions-container str-chat__message-simple__actions__action str-chat__message-simple__actions__action--options\"\n            [floatUiLoose]=\"messageMenuFloat\"\n            [looseTrigger]=\"\n              messageActionsService.customActionClickHandler ? 'none' : 'click'\n            \"\n            [hideOnScroll]=\"false\"\n            [hideOnClickOutside]=\"true\"\n            [hideOnMouseLeave]=\"false\"\n            [disableAnimation]=\"false\"\n            [preventOverflow]=\"true\"\n            [positionFixed]=\"true\"\n            (onSHown)=\"areMessageOptionsOpen = true\"\n            (onHidden)=\"areMessageOptionsOpen = false\"\n          >\n            <div\n              *ngIf=\"visibleMessageActionsCount > 0\"\n              class=\"str-chat__message-actions-box-button\"\n              data-testid=\"message-options-button\"\n              (click)=\"messageOptionsButtonClicked()\"\n              (keyup.enter)=\"messageOptionsButtonClicked()\"\n            >\n              <stream-icon-placeholder\n                icon=\"action\"\n                class=\"str-chat__message-action-icon\"\n              ></stream-icon-placeholder>\n            </div>\n          </div>\n        </div>\n        <div class=\"str-chat__message-reactions-host\">\n          <ng-template\n            #defaultMessageReactions\n            let-messageReactionCounts=\"messageReactionCounts\"\n            let-latestReactions=\"latestReactions\"\n            let-messageId=\"messageId\"\n            let-ownReactions=\"ownReactions\"\n            let-messageReactionGroups=\"messageReactionGroups\"\n          >\n            <stream-message-reactions\n              [messageReactionCounts]=\"messageReactionCounts\"\n              [latestReactions]=\"latestReactions\"\n              [messageId]=\"messageId\"\n              [ownReactions]=\"ownReactions\"\n              [messageReactionGroups]=\"messageReactionGroups\"\n            ></stream-message-reactions>\n          </ng-template>\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.messageReactionsTemplate$ | async) ||\n                defaultMessageReactions;\n              context: getMessageReactionsContext()\n            \"\n          ></ng-container>\n        </div>\n        <float-ui-content #messageMenuFloat>\n          <ng-template\n            #defaultMessageActionsBox\n            let-isMine=\"isMine\"\n            let-messageInput=\"message\"\n            let-enabledActions=\"enabledActions\"\n            let-messageTextHtmlElement=\"messageTextHtmlElement\"\n          >\n            <stream-message-actions-box\n              [isMine]=\"isMine\"\n              [message]=\"messageInput\"\n              [enabledActions]=\"enabledActions\"\n              [messageTextHtmlElement]=\"messageTextHtmlElement\"\n            ></stream-message-actions-box>\n          </ng-template>\n          <ng-container>\n            <div\n              (click)=\"messageActionsBoxClicked(messageMenuFloat)\"\n              (keyup.enter)=\"messageActionsBoxClicked(messageMenuFloat)\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  (customTemplatesService.messageActionsBoxTemplate$ | async) ||\n                    defaultMessageActionsBox;\n                  context: getMessageActionsBoxContext()\n                \"\n              >\n              </ng-container>\n            </div>\n          </ng-container>\n        </float-ui-content>\n        <div\n          class=\"str-chat__message-bubble str-chat-angular__message-bubble\"\n          [class.str-chat-angular__message-bubble--attachment-modal-open]=\"\n            imageAttachmentModalState === 'opened'\n          \"\n          data-testid=\"message-bubble\"\n          [floatUiLoose]=\"messageMenuFloat\"\n          #messageMenuTrigger=\"floatUiLoose\"\n          #messageBubble\n          looseTrigger=\"none\"\n          [hideOnScroll]=\"false\"\n          [hideOnClickOutside]=\"true\"\n          [hideOnMouseLeave]=\"false\"\n          [disableAnimation]=\"true\"\n          [preventOverflow]=\"true\"\n          (onShown)=\"areMessageOptionsOpen = true\"\n          (onHidden)=\"areMessageOptionsOpen = false\"\n          [positionFixed]=\"true\"\n        >\n          <ng-container *ngIf=\"hasAttachment && !message?.quoted_message\">\n            <div class=\"str-chat__attachments-container\">\n              <ng-container\n                *ngTemplateOutlet=\"attachmentsTemplate\"\n              ></ng-container>\n            </div>\n          </ng-container>\n          <div\n            *ngIf=\"message?.text || (message?.quoted_message && hasAttachment)\"\n            class=\"str-chat__message-text\"\n            tabindex=\"0\"\n            [class.str-chat__message-text--pointer-cursor]=\"\n              (message?.status === 'failed' &&\n                message?.errorStatusCode !== 403) ||\n              (this.message?.type === 'error' &&\n                this.message?.moderation_details) ||\n              message?.message_text_updated_at\n            \"\n            (click)=\"messageClicked()\"\n            (keyup.enter)=\"messageClicked()\"\n          >\n            <div\n              data-testid=\"inner-message\"\n              class=\"str-chat__message-text-inner str-chat__message-simple-text-inner\"\n              [class.str-chat__message-light-text-inner--has-attachment]=\"\n                hasAttachment\n              \"\n            >\n              <ng-container *ngTemplateOutlet=\"quotedMessage\"></ng-container>\n              <ng-container *ngIf=\"hasAttachment && message?.quoted_message\">\n                <ng-container\n                  *ngTemplateOutlet=\"attachmentsTemplate\"\n                ></ng-container>\n              </ng-container>\n              <div\n                *ngIf=\"message?.type === 'error'\"\n                data-testid=\"client-error-message\"\n                class=\"str-chat__simple-message--error-message str-chat__message--error-message\"\n              >\n                <ng-container *ngIf=\"!message?.moderation_details\">{{\n                  \"streamChat.Error \u00B7 Unsent\" | translate\n                }}</ng-container>\n              </div>\n              <div\n                *ngIf=\"message?.status === 'failed'\"\n                data-testid=\"error-message\"\n                class=\"str-chat__simple-message--error-message str-chat__message--error-message\"\n              >\n                {{\n                  (message?.errorStatusCode === 403\n                    ? \"streamChat.Message Failed \u00B7 Unauthorized\"\n                    : \"streamChat.Message Failed \u00B7 Click to try again\"\n                  ) | translate\n                }}\n              </div>\n              <div #messageTextElement data-testid=\"text\">\n                <p>\n                  <ng-container *ngIf=\"messageTextParts; else defaultContent\">\n                    <!-- eslint-disable-next-line @angular-eslint/template/use-track-by-function -->\n                    <ng-container *ngFor=\"let part of messageTextParts\">\n                      <span\n                        *ngIf=\"part.type === 'text'; else mention\"\n                        [innerHTML]=\"part.content\"\n                      ></span>\n                      <ng-template #mention>\n                        <ng-template #defaultMention let-content=\"content\">\n                          <span class=\"str-chat__message-mention\">{{\n                            content\n                          }}</span>\n                        </ng-template>\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            (customTemplatesService.mentionTemplate$ | async) ||\n                              defaultMention;\n                            context: getMentionContext(part)\n                          \"\n                        ></ng-container>\n                      </ng-template>\n                    </ng-container>\n                  </ng-container>\n                  <ng-template #defaultContent>\n                    <ng-container *ngIf=\"displayAs === 'text'; else asHTML\">\n                      {{ messageText || \"\" }}\n                    </ng-container>\n                    <ng-template #asHTML\n                      ><span\n                        data-testid=\"html-content\"\n                        [innerHTML]=\"messageText\"\n                      ></span\n                    ></ng-template>\n                  </ng-template>\n                </p>\n              </div>\n            </div>\n          </div>\n          <stream-icon-placeholder\n            class=\"str-chat__message-error-icon\"\n            icon=\"error\"\n          ></stream-icon-placeholder>\n        </div>\n      </div>\n      <ng-container\n        *ngTemplateOutlet=\"replyCountButton; context: { message: message }\"\n      ></ng-container>\n\n      <ng-container *ngTemplateOutlet=\"messageDateAndSender\"></ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n\n<ng-template #deletedMessage>\n  <div data-testid=\"message-deleted-component\">\n    <div class=\"str-chat__message--deleted-inner\" translate>\n      streamChat.This message was deleted...\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #systemMessage>\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.systemMessageTemplate$ | async) ||\n        defaultSystemMessage;\n      context: getMessageContext()\n    \"\n  ></ng-container>\n  <ng-template #defaultSystemMessage let-messageInput=\"message\">\n    <div data-testid=\"system-message\" class=\"str-chat__message--system\">\n      <div class=\"str-chat__message--system__text\">\n        <div class=\"str-chat__message--system__line\"></div>\n        <p>{{ messageInput?.text }}</p>\n        <div class=\"str-chat__message--system__line\"></div>\n      </div>\n      <div class=\"str-chat__message--system__date\">\n        {{ parsedDate }}\n      </div>\n    </div>\n  </ng-template>\n</ng-template>\n\n<ng-template #quotedMessage>\n  <div\n    *ngIf=\"message?.quoted_message\"\n    class=\"quoted-message str-chat__quoted-message-preview\"\n    data-testid=\"quoted-message-container\"\n    [class.mine]=\"isSentByCurrentUser\"\n    (click)=\"\n      jumpToMessage(\n        (message?.quoted_message)!.id,\n        message?.quoted_message?.parent_id\n      )\n    \"\n    (keyup.enter)=\"\n      jumpToMessage(\n        (message?.quoted_message)!.id,\n        message?.quoted_message?.parent_id\n      )\n    \"\n  >\n    <stream-avatar-placeholder\n      data-testid=\"qouted-message-avatar\"\n      class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n      type=\"user\"\n      location=\"quoted-message-sender\"\n      [imageUrl]=\"message?.quoted_message?.user?.image\"\n      [name]=\"\n        message?.quoted_message?.user?.name || message?.quoted_message?.user?.id\n      \"\n      [user]=\"message?.quoted_message?.user || undefined\"\n    ></stream-avatar-placeholder>\n    <div class=\"quoted-message-inner str-chat__quoted-message-bubble\">\n      <ng-container\n        *ngIf=\"\n          message?.quoted_message?.attachments &&\n          message?.quoted_message?.attachments?.length\n        \"\n      >\n        <ng-template\n          #defaultAttachments\n          let-messageId=\"messageId\"\n          let-attachments=\"attachments\"\n          let-parentMessageId=\"parentMessageId\"\n          let-imageModalStateChangeHandler=\"imageModalStateChangeHandler\"\n        >\n          <stream-attachment-list\n            [messageId]=\"messageId\"\n            [attachments]=\"attachments\"\n            [parentMessageId]=\"parentMessageId\"\n            (imageModalStateChange)=\"imageModalStateChangeHandler($event)\"\n          ></stream-attachment-list>\n        </ng-template>\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.attachmentListTemplate$ | async) ||\n              defaultAttachments;\n            context: getQuotedMessageAttachmentListContext()\n          \"\n        ></ng-container>\n      </ng-container>\n      <div\n        data-testid=\"quoted-message-text\"\n        [innerHTML]=\"\n          message?.quoted_message?.translation ||\n          message?.quoted_message?.html ||\n          message?.quoted_message?.text\n        \"\n      ></div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #messageDateAndSender>\n  <ng-container>\n    <div\n      *ngIf=\"shouldDisplayTranslationNotice\"\n      class=\"str-chat__translation-notice\"\n      data-testid=\"translation-notice\"\n    >\n      <button\n        *ngIf=\"displayedMessageTextContent === 'translation'\"\n        data-testid=\"see-original\"\n        translate\n        (click)=\"displayOriginalMessage()\"\n        (keyup.enter)=\"displayOriginalMessage()\"\n      >\n        streamChat.See original (automatically translated)\n      </button>\n      <button\n        *ngIf=\"displayedMessageTextContent === 'original'\"\n        data-testid=\"see-translation\"\n        translate\n        (click)=\"displayTranslatedMessage()\"\n        (keyup.enter)=\"displayTranslatedMessage()\"\n      >\n        streamChat.See translation\n      </button>\n    </div>\n    <ng-container\n      *ngIf=\"customTemplatesService.customMessageMetadataTemplate$ | async\"\n    >\n      <div class=\"str-chat__custom-message-metadata\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.customMessageMetadataTemplate$ | async)!;\n            context: getMessageMetadataContext()\n          \"\n        ></ng-container>\n      </div>\n    </ng-container>\n    <div\n      class=\"str-chat__message-data str-chat__message-simple-data str-chat__message-metadata\"\n    >\n      <ng-container *ngTemplateOutlet=\"messageStatus\"></ng-container>\n\n      <span\n        *ngIf=\"!isSentByCurrentUser\"\n        data-testid=\"sender\"\n        class=\"str-chat__message-simple-name str-chat__message-sender-name\"\n      >\n        {{ message?.user?.name ? message?.user?.name : message?.user?.id }}\n      </span>\n      <span\n        data-testid=\"date\"\n        class=\"str-chat__message-simple-timestamp str-chat__message-simple-time\"\n      >\n        {{ parsedDate }}\n      </span>\n      <ng-container *ngIf=\"message?.message_text_updated_at\">\n        <span\n          data-testid=\"edited-flag\"\n          class=\"str-chat__mesage-simple-edited\"\n          translate\n          >streamChat.Edited</span\n        >\n        <div\n          data-testid=\"edited-timestamp\"\n          class=\"str-chat__message-edited-timestamp\"\n          [ngClass]=\"{\n            'str-chat__message-edited-timestamp--open': isEditedFlagOpened,\n            'str-chat__message-edited-timestamp--collapsed': !isEditedFlagOpened\n          }\"\n        >\n          <span translate>streamChat.Edited</span>\n          <time\n            dateTime=\"{{ message?.message_text_updated_at }}\"\n            title=\"{{ message?.message_text_updated_at }}\"\n          >\n            {{ pasedEditedDate }}\n          </time>\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #messageStatus>\n  <ng-container\n    *ngIf=\"\n      isSentByCurrentUser &&\n      ((isLastSentMessage && message?.status === 'received') ||\n        message?.status === 'sending')\n    \"\n  >\n    <ng-container *ngIf=\"message?.status === 'sending'; else sentStatus\">\n      <ng-container *ngTemplateOutlet=\"sendingStatus\"></ng-container>\n    </ng-container>\n    <ng-template #sentStatus>\n      <ng-container\n        *ngIf=\"\n          mode === 'main' && isMessageDeliveredAndRead && canDisplayReadStatus;\n          else deliveredStatus\n        \"\n      >\n        <ng-container *ngTemplateOutlet=\"readStatus\"></ng-container>\n      </ng-container>\n    </ng-template>\n    <ng-template #deliveredStatus>\n      <ng-container\n        *ngTemplateOutlet=\"\n          (customTemplatesService.deliveredStatusTemplate$ | async) ||\n            defaultDeliveredStatus;\n          context: getDeliveredStatusContext()\n        \"\n      ></ng-container>\n    </ng-template>\n    <ng-template #defaultDeliveredStatus>\n      <span\n        *ngIf=\"mode === 'main'\"\n        class=\"str-chat__message-simple-status str-chat__message-simple-status-angular str-chat__message-status\"\n        data-testid=\"delivered-indicator\"\n        tabindex=\"0\"\n        [floatUiLoose]=\"floatingContent\"\n        loosePlacement=\"top\"\n        [looseTrigger]=\"hasTouchSupport ? 'click' : 'hover'\"\n        [disableAnimation]=\"true\"\n        [hideOnClickOutside]=\"true\"\n        [positionFixed]=\"true\"\n        [preventOverflow]=\"true\"\n      >\n        <float-ui-content #floatingContent>\n          <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n            {{ \"streamChat.Delivered\" | translate }}\n          </div>\n        </float-ui-content>\n        <stream-icon-placeholder\n          data-testid=\"delivered-icon\"\n          icon=\"delivered\"\n        ></stream-icon-placeholder>\n      </span>\n    </ng-template>\n    <ng-template #sendingStatus>\n      <ng-container\n        *ngTemplateOutlet=\"\n          (customTemplatesService.sendingStatusTemplate$ | async) ||\n            defaultSendingStatus;\n          context: getSendingStatusContext()\n        \"\n      ></ng-container>\n    </ng-template>\n    <ng-template #defaultSendingStatus>\n      <span\n        class=\"str-chat__message-simple-status str-chat__message-simple-status-angular str-chat__message-status\"\n        data-testid=\"sending-indicator\"\n        tabindex=\"0\"\n        [floatUiLoose]=\"floatingContent\"\n        loosePlacement=\"top\"\n        [looseTrigger]=\"hasTouchSupport ? 'click' : 'hover'\"\n        [disableAnimation]=\"true\"\n        [hideOnClickOutside]=\"true\"\n        [positionFixed]=\"true\"\n        [preventOverflow]=\"true\"\n      >\n        <float-ui-content #floatingContent>\n          <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n            {{ \"streamChat.Sending...\" | translate }}\n          </div>\n        </float-ui-content>\n        <stream-loading-indicator-placeholder\n          data-testid=\"loading-indicator\"\n        ></stream-loading-indicator-placeholder>\n      </span>\n    </ng-template>\n    <ng-template #readStatus>\n      <ng-container\n        *ngTemplateOutlet=\"\n          (customTemplatesService.readStatusTemplate$ | async) ||\n            defaultReadStatus;\n          context: getReadStatusContext()\n        \"\n      ></ng-container>\n    </ng-template>\n    <ng-template #defaultReadStatus let-readByText=\"readByText\">\n      <span\n        class=\"str-chat__message-simple-status str-chat__message-simple-status-angular str-chat__message-status\"\n        data-testid=\"read-indicator\"\n        tabindex=\"0\"\n        [floatUiLoose]=\"floatingContent\"\n        loosePlacement=\"top\"\n        [looseTrigger]=\"hasTouchSupport ? 'click' : 'hover'\"\n        [disableAnimation]=\"true\"\n        [hideOnClickOutside]=\"true\"\n        [positionFixed]=\"true\"\n        [preventOverflow]=\"true\"\n      >\n        <float-ui-content #floatingContent>\n          <div\n            class=\"str-chat__tooltip str-chat__tooltip-angular\"\n            data-testid=\"read-by-tooltip\"\n          >\n            {{ readByText }}\n          </div>\n        </float-ui-content>\n        <stream-icon-placeholder icon=\"read\"></stream-icon-placeholder>\n      </span>\n    </ng-template>\n  </ng-container>\n</ng-template>\n\n<ng-template #replyCountButton>\n  <div\n    class=\"str-chat__message-simple-reply-button str-chat__message-replies-count-button-wrapper\"\n  >\n    <button\n      *ngIf=\"shouldDisplayThreadLink\"\n      class=\"str-chat__message-replies-count-button\"\n      data-testid=\"reply-count-button\"\n      (click)=\"setAsActiveParentMessage()\"\n    >\n      {{message?.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}\n      replies' | translate:replyCountParam)}}\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #attachmentsTemplate>\n  <ng-template\n    #defaultAttachments\n    let-messageId=\"messageId\"\n    let-attachments=\"attachments\"\n    let-parentMessageId=\"parentMessageId\"\n    let-imageModalStateChangeHandler=\"imageModalStateChangeHandler\"\n  >\n    <stream-attachment-list\n      [messageId]=\"messageId\"\n      [attachments]=\"attachments\"\n      [parentMessageId]=\"parentMessageId\"\n      (imageModalStateChange)=\"imageModalStateChangeHandler($event)\"\n    ></stream-attachment-list>\n  </ng-template>\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.attachmentListTemplate$ | async) ||\n        defaultAttachments;\n      context: getAttachmentListContext()\n    \"\n  ></ng-container>\n</ng-template>\n" }]
@@ -5611,6 +5683,7 @@ class TextareaDirective {
         this.valueChange = new EventEmitter();
         this.send = new EventEmitter();
         this.userMentions = new EventEmitter();
+        this.pasteFromClipboard = new EventEmitter();
         this.subscriptions = [];
         this.unpropagatedChanges = [];
     }
@@ -5628,6 +5701,7 @@ class TextareaDirective {
                 if (this.componentRef.instance.userMentions) {
                     this.subscriptions.push(this.componentRef.instance.userMentions.subscribe((value) => this.userMentions.next(value)));
                 }
+                this.subscriptions.push(this.componentRef.instance.pasteFromClipboard.subscribe((value) => this.pasteFromClipboard.next(value)));
                 this.componentRef.instance.areMentionsEnabled = this.areMentionsEnabled;
                 this.componentRef.instance.mentionScope = this.mentionScope;
                 this.componentRef.instance.value = this.value;
@@ -5663,7 +5737,7 @@ class TextareaDirective {
     }
 }
 TextareaDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TextareaDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-TextareaDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: TextareaDirective, selector: "[streamTextarea]", inputs: { componentRef: "componentRef", areMentionsEnabled: "areMentionsEnabled", mentionScope: "mentionScope", inputMode: "inputMode", value: "value", placeholder: "placeholder", autoFocus: "autoFocus" }, outputs: { valueChange: "valueChange", send: "send", userMentions: "userMentions" }, usesOnChanges: true, ngImport: i0 });
+TextareaDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: TextareaDirective, selector: "[streamTextarea]", inputs: { componentRef: "componentRef", areMentionsEnabled: "areMentionsEnabled", mentionScope: "mentionScope", inputMode: "inputMode", value: "value", placeholder: "placeholder", autoFocus: "autoFocus" }, outputs: { valueChange: "valueChange", send: "send", userMentions: "userMentions", pasteFromClipboard: "pasteFromClipboard" }, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TextareaDirective, decorators: [{
             type: Directive,
             args: [{
@@ -5689,6 +5763,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Output
             }], userMentions: [{
                 type: Output
+            }], pasteFromClipboard: [{
+                type: Output
             }] } });
 
 /**
@@ -6297,7 +6373,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
  * The `AttachmentPreviewList` component displays a preview of the attachments uploaded to a message. Users can delete attachments using the preview component, or retry upload if it failed previously.
  */
 class AttachmentPreviewListComponent {
-    constructor() {
+    constructor(customTemplateService, attachmentService) {
+        this.customTemplateService = customTemplateService;
+        this.attachmentService = attachmentService;
         /**
          * An output to notify the parent component if the user tries to retry a failed upload
          */
@@ -6306,6 +6384,15 @@ class AttachmentPreviewListComponent {
          * An output to notify the parent component if the user wants to delete a file
          */
         this.deleteAttachment = new EventEmitter();
+        this.customAttachments = [];
+        this.subscriptions = [];
+    }
+    ngOnInit() {
+        this.subscriptions.push(this.customTemplateService.customAttachmentPreviewListTemplate$.subscribe((t) => (this.customAttachmentsPreview = t)));
+        this.subscriptions.push(this.attachmentService.customAttachments$.subscribe((a) => (this.customAttachments = a)));
+    }
+    ngOnDestroy() {
+        this.subscriptions.forEach((s) => s.unsubscribe());
     }
     attachmentUploadRetried(file) {
         this.retryAttachmentUpload.emit(file);
@@ -6317,12 +6404,12 @@ class AttachmentPreviewListComponent {
         return item.file;
     }
 }
-AttachmentPreviewListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AttachmentPreviewListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AttachmentPreviewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AttachmentPreviewListComponent, selector: "stream-attachment-preview-list", inputs: { attachmentUploads$: "attachmentUploads$" }, outputs: { retryAttachmentUpload: "retryAttachmentUpload", deleteAttachment: "deleteAttachment" }, ngImport: i0, template: "<div\n  *ngIf=\"(attachmentUploads$ | async)?.length\"\n  class=\"str-chat__attachment-preview-list\"\n>\n  <div class=\"str-chat__attachment-list-scroll-container\">\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=\"str-chat__attachment-preview-image\"\n        data-testclass=\"attachment-image-preview\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            deleteButton;\n            context: { attachmentUpload: attachmentUpload }\n          \"\n        ></ng-container>\n        <div\n          *ngIf=\"attachmentUpload.state === 'uploading'\"\n          class=\"str-chat__attachment-preview-image-loading\"\n        >\n          <stream-loading-indicator-placeholder\n            data-testclass=\"loading-indicator\"\n          ></stream-loading-indicator-placeholder>\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"\n            retryButton;\n            context: { attachmentUpload: attachmentUpload }\n          \"\n        ></ng-container>\n        <img\n          *ngIf=\"attachmentUpload.url || attachmentUpload.previewUri\"\n          class=\"str-chat__attachment-preview-thumbnail\"\n          data-testclass=\"attachment-image\"\n          src=\"{{\n            attachmentUpload.url\n              ? attachmentUpload.url\n              : attachmentUpload.previewUri\n          }}\"\n          alt=\"{{ attachmentUpload.file.name }}\"\n        />\n      </div>\n      <div\n        *ngIf=\"\n          attachmentUpload.type === 'file' ||\n          attachmentUpload.type === 'video' ||\n          attachmentUpload.type === 'voiceRecording'\n        \"\n        class=\"str-chat__attachment-preview-file str-chat__attachment-preview-type-{{\n          attachmentUpload.type\n        }}\"\n        data-testclass=\"attachment-file-preview\"\n      >\n        <stream-icon-placeholder\n          class=\"str-chat__attachment-preview-file-icon\"\n          icon=\"unspecified-filetype\"\n        ></stream-icon-placeholder>\n\n        <div class=\"str-chat__attachment-preview-file-end\">\n          <div\n            class=\"str-chat__attachment-preview-file-name\"\n            title=\"{{ attachmentUpload.file.name }}\"\n          >\n            {{ attachmentUpload.file.name }}\n          </div>\n          <a\n            *ngIf=\"attachmentUpload.state === 'success'\"\n            class=\"str-chat__attachment-preview-file-download\"\n            data-testclass=\"file-download-link\"\n            download\n            href=\"{{ attachmentUpload.url }}\"\n            (click)=\"attachmentUpload.url ? null : $event.preventDefault()\"\n            (keyup.enter)=\"\n              attachmentUpload.url ? null : $event.preventDefault()\n            \"\n          >\n            <stream-icon-placeholder icon=\"download\"></stream-icon-placeholder>\n          </a>\n          <stream-loading-indicator-placeholder\n            *ngIf=\"attachmentUpload.state === 'uploading'\"\n            data-testclass=\"loading-indicator\"\n          ></stream-loading-indicator-placeholder>\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"\n            deleteButton;\n            context: { attachmentUpload: attachmentUpload }\n          \"\n        ></ng-container>\n        <ng-container\n          *ngTemplateOutlet=\"\n            retryButton;\n            context: { attachmentUpload: attachmentUpload }\n          \"\n        ></ng-container>\n      </div>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #deleteButton let-attachmentUpload=\"attachmentUpload\">\n  <div\n    class=\"str-chat__attachment-preview-delete\"\n    data-testclass=\"file-delete\"\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</ng-template>\n\n<ng-template #retryButton let-attachmentUpload=\"attachmentUpload\">\n  <div\n    *ngIf=\"attachmentUpload.state === 'error'\"\n    data-testclass=\"upload-retry\"\n    class=\"str-chat__attachment-preview-error str-chat__attachment-preview-error-{{\n      attachmentUpload.type === 'image' ? 'image' : 'file'\n    }}\"\n    (click)=\"attachmentUploadRetried(attachmentUpload.file)\"\n    (keyup.enter)=\"attachmentUploadRetried(attachmentUpload.file)\"\n  >\n    <stream-icon-placeholder icon=\"retry\"></stream-icon-placeholder>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "component", type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
+AttachmentPreviewListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AttachmentPreviewListComponent, deps: [{ token: CustomTemplatesService }, { token: AttachmentService }], target: i0.ɵɵFactoryTarget.Component });
+AttachmentPreviewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AttachmentPreviewListComponent, selector: "stream-attachment-preview-list", inputs: { attachmentUploads$: "attachmentUploads$" }, outputs: { retryAttachmentUpload: "retryAttachmentUpload", deleteAttachment: "deleteAttachment" }, ngImport: i0, template: "<div\n  *ngIf=\"\n    (attachmentUploads$ | async)?.length ||\n    (customAttachments.length > 0 && customAttachmentsPreview)\n  \"\n  class=\"str-chat__attachment-preview-list\"\n>\n  <div class=\"str-chat__attachment-list-scroll-container\">\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=\"str-chat__attachment-preview-image\"\n        data-testclass=\"attachment-image-preview\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            deleteButton;\n            context: { attachmentUpload: attachmentUpload }\n          \"\n        ></ng-container>\n        <div\n          *ngIf=\"attachmentUpload.state === 'uploading'\"\n          class=\"str-chat__attachment-preview-image-loading\"\n        >\n          <stream-loading-indicator-placeholder\n            data-testclass=\"loading-indicator\"\n          ></stream-loading-indicator-placeholder>\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"\n            retryButton;\n            context: { attachmentUpload: attachmentUpload }\n          \"\n        ></ng-container>\n        <img\n          *ngIf=\"attachmentUpload.url || attachmentUpload.previewUri\"\n          class=\"str-chat__attachment-preview-thumbnail\"\n          data-testclass=\"attachment-image\"\n          src=\"{{\n            attachmentUpload.url\n              ? attachmentUpload.url\n              : attachmentUpload.previewUri\n          }}\"\n          alt=\"{{ attachmentUpload.file.name }}\"\n        />\n      </div>\n      <div\n        *ngIf=\"\n          attachmentUpload.type === 'file' ||\n          attachmentUpload.type === 'video' ||\n          attachmentUpload.type === 'voiceRecording'\n        \"\n        class=\"str-chat__attachment-preview-file str-chat__attachment-preview-type-{{\n          attachmentUpload.type\n        }}\"\n        data-testclass=\"attachment-file-preview\"\n      >\n        <stream-icon-placeholder\n          class=\"str-chat__attachment-preview-file-icon\"\n          icon=\"unspecified-filetype\"\n        ></stream-icon-placeholder>\n\n        <div class=\"str-chat__attachment-preview-file-end\">\n          <div\n            class=\"str-chat__attachment-preview-file-name\"\n            title=\"{{ attachmentUpload.file.name }}\"\n          >\n            {{ attachmentUpload.file.name }}\n          </div>\n          <a\n            *ngIf=\"attachmentUpload.state === 'success'\"\n            class=\"str-chat__attachment-preview-file-download\"\n            data-testclass=\"file-download-link\"\n            download\n            href=\"{{ attachmentUpload.url }}\"\n            (click)=\"attachmentUpload.url ? null : $event.preventDefault()\"\n            (keyup.enter)=\"\n              attachmentUpload.url ? null : $event.preventDefault()\n            \"\n          >\n            <stream-icon-placeholder icon=\"download\"></stream-icon-placeholder>\n          </a>\n          <stream-loading-indicator-placeholder\n            *ngIf=\"attachmentUpload.state === 'uploading'\"\n            data-testclass=\"loading-indicator\"\n          ></stream-loading-indicator-placeholder>\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"\n            deleteButton;\n            context: { attachmentUpload: attachmentUpload }\n          \"\n        ></ng-container>\n        <ng-container\n          *ngTemplateOutlet=\"\n            retryButton;\n            context: { attachmentUpload: attachmentUpload }\n          \"\n        ></ng-container>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"customAttachmentsPreview\">\n      <ng-template\n        *ngTemplateOutlet=\"\n          customAttachmentsPreview;\n          context: { service: attachmentService }\n        \"\n      ></ng-template>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #deleteButton let-attachmentUpload=\"attachmentUpload\">\n  <div\n    class=\"str-chat__attachment-preview-delete\"\n    data-testclass=\"file-delete\"\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</ng-template>\n\n<ng-template #retryButton let-attachmentUpload=\"attachmentUpload\">\n  <div\n    *ngIf=\"attachmentUpload.state === 'error'\"\n    data-testclass=\"upload-retry\"\n    class=\"str-chat__attachment-preview-error str-chat__attachment-preview-error-{{\n      attachmentUpload.type === 'image' ? 'image' : 'file'\n    }}\"\n    (click)=\"attachmentUploadRetried(attachmentUpload.file)\"\n    (keyup.enter)=\"attachmentUploadRetried(attachmentUpload.file)\"\n  >\n    <stream-icon-placeholder icon=\"retry\"></stream-icon-placeholder>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "component", type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AttachmentPreviewListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-attachment-preview-list', template: "<div\n  *ngIf=\"(attachmentUploads$ | async)?.length\"\n  class=\"str-chat__attachment-preview-list\"\n>\n  <div class=\"str-chat__attachment-list-scroll-container\">\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=\"str-chat__attachment-preview-image\"\n        data-testclass=\"attachment-image-preview\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            deleteButton;\n            context: { attachmentUpload: attachmentUpload }\n          \"\n        ></ng-container>\n        <div\n          *ngIf=\"attachmentUpload.state === 'uploading'\"\n          class=\"str-chat__attachment-preview-image-loading\"\n        >\n          <stream-loading-indicator-placeholder\n            data-testclass=\"loading-indicator\"\n          ></stream-loading-indicator-placeholder>\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"\n            retryButton;\n            context: { attachmentUpload: attachmentUpload }\n          \"\n        ></ng-container>\n        <img\n          *ngIf=\"attachmentUpload.url || attachmentUpload.previewUri\"\n          class=\"str-chat__attachment-preview-thumbnail\"\n          data-testclass=\"attachment-image\"\n          src=\"{{\n            attachmentUpload.url\n              ? attachmentUpload.url\n              : attachmentUpload.previewUri\n          }}\"\n          alt=\"{{ attachmentUpload.file.name }}\"\n        />\n      </div>\n      <div\n        *ngIf=\"\n          attachmentUpload.type === 'file' ||\n          attachmentUpload.type === 'video' ||\n          attachmentUpload.type === 'voiceRecording'\n        \"\n        class=\"str-chat__attachment-preview-file str-chat__attachment-preview-type-{{\n          attachmentUpload.type\n        }}\"\n        data-testclass=\"attachment-file-preview\"\n      >\n        <stream-icon-placeholder\n          class=\"str-chat__attachment-preview-file-icon\"\n          icon=\"unspecified-filetype\"\n        ></stream-icon-placeholder>\n\n        <div class=\"str-chat__attachment-preview-file-end\">\n          <div\n            class=\"str-chat__attachment-preview-file-name\"\n            title=\"{{ attachmentUpload.file.name }}\"\n          >\n            {{ attachmentUpload.file.name }}\n          </div>\n          <a\n            *ngIf=\"attachmentUpload.state === 'success'\"\n            class=\"str-chat__attachment-preview-file-download\"\n            data-testclass=\"file-download-link\"\n            download\n            href=\"{{ attachmentUpload.url }}\"\n            (click)=\"attachmentUpload.url ? null : $event.preventDefault()\"\n            (keyup.enter)=\"\n              attachmentUpload.url ? null : $event.preventDefault()\n            \"\n          >\n            <stream-icon-placeholder icon=\"download\"></stream-icon-placeholder>\n          </a>\n          <stream-loading-indicator-placeholder\n            *ngIf=\"attachmentUpload.state === 'uploading'\"\n            data-testclass=\"loading-indicator\"\n          ></stream-loading-indicator-placeholder>\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"\n            deleteButton;\n            context: { attachmentUpload: attachmentUpload }\n          \"\n        ></ng-container>\n        <ng-container\n          *ngTemplateOutlet=\"\n            retryButton;\n            context: { attachmentUpload: attachmentUpload }\n          \"\n        ></ng-container>\n      </div>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #deleteButton let-attachmentUpload=\"attachmentUpload\">\n  <div\n    class=\"str-chat__attachment-preview-delete\"\n    data-testclass=\"file-delete\"\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</ng-template>\n\n<ng-template #retryButton let-attachmentUpload=\"attachmentUpload\">\n  <div\n    *ngIf=\"attachmentUpload.state === 'error'\"\n    data-testclass=\"upload-retry\"\n    class=\"str-chat__attachment-preview-error str-chat__attachment-preview-error-{{\n      attachmentUpload.type === 'image' ? 'image' : 'file'\n    }}\"\n    (click)=\"attachmentUploadRetried(attachmentUpload.file)\"\n    (keyup.enter)=\"attachmentUploadRetried(attachmentUpload.file)\"\n  >\n    <stream-icon-placeholder icon=\"retry\"></stream-icon-placeholder>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { attachmentUploads$: [{
+            args: [{ selector: 'stream-attachment-preview-list', template: "<div\n  *ngIf=\"\n    (attachmentUploads$ | async)?.length ||\n    (customAttachments.length > 0 && customAttachmentsPreview)\n  \"\n  class=\"str-chat__attachment-preview-list\"\n>\n  <div class=\"str-chat__attachment-list-scroll-container\">\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=\"str-chat__attachment-preview-image\"\n        data-testclass=\"attachment-image-preview\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            deleteButton;\n            context: { attachmentUpload: attachmentUpload }\n          \"\n        ></ng-container>\n        <div\n          *ngIf=\"attachmentUpload.state === 'uploading'\"\n          class=\"str-chat__attachment-preview-image-loading\"\n        >\n          <stream-loading-indicator-placeholder\n            data-testclass=\"loading-indicator\"\n          ></stream-loading-indicator-placeholder>\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"\n            retryButton;\n            context: { attachmentUpload: attachmentUpload }\n          \"\n        ></ng-container>\n        <img\n          *ngIf=\"attachmentUpload.url || attachmentUpload.previewUri\"\n          class=\"str-chat__attachment-preview-thumbnail\"\n          data-testclass=\"attachment-image\"\n          src=\"{{\n            attachmentUpload.url\n              ? attachmentUpload.url\n              : attachmentUpload.previewUri\n          }}\"\n          alt=\"{{ attachmentUpload.file.name }}\"\n        />\n      </div>\n      <div\n        *ngIf=\"\n          attachmentUpload.type === 'file' ||\n          attachmentUpload.type === 'video' ||\n          attachmentUpload.type === 'voiceRecording'\n        \"\n        class=\"str-chat__attachment-preview-file str-chat__attachment-preview-type-{{\n          attachmentUpload.type\n        }}\"\n        data-testclass=\"attachment-file-preview\"\n      >\n        <stream-icon-placeholder\n          class=\"str-chat__attachment-preview-file-icon\"\n          icon=\"unspecified-filetype\"\n        ></stream-icon-placeholder>\n\n        <div class=\"str-chat__attachment-preview-file-end\">\n          <div\n            class=\"str-chat__attachment-preview-file-name\"\n            title=\"{{ attachmentUpload.file.name }}\"\n          >\n            {{ attachmentUpload.file.name }}\n          </div>\n          <a\n            *ngIf=\"attachmentUpload.state === 'success'\"\n            class=\"str-chat__attachment-preview-file-download\"\n            data-testclass=\"file-download-link\"\n            download\n            href=\"{{ attachmentUpload.url }}\"\n            (click)=\"attachmentUpload.url ? null : $event.preventDefault()\"\n            (keyup.enter)=\"\n              attachmentUpload.url ? null : $event.preventDefault()\n            \"\n          >\n            <stream-icon-placeholder icon=\"download\"></stream-icon-placeholder>\n          </a>\n          <stream-loading-indicator-placeholder\n            *ngIf=\"attachmentUpload.state === 'uploading'\"\n            data-testclass=\"loading-indicator\"\n          ></stream-loading-indicator-placeholder>\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"\n            deleteButton;\n            context: { attachmentUpload: attachmentUpload }\n          \"\n        ></ng-container>\n        <ng-container\n          *ngTemplateOutlet=\"\n            retryButton;\n            context: { attachmentUpload: attachmentUpload }\n          \"\n        ></ng-container>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"customAttachmentsPreview\">\n      <ng-template\n        *ngTemplateOutlet=\"\n          customAttachmentsPreview;\n          context: { service: attachmentService }\n        \"\n      ></ng-template>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #deleteButton let-attachmentUpload=\"attachmentUpload\">\n  <div\n    class=\"str-chat__attachment-preview-delete\"\n    data-testclass=\"file-delete\"\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</ng-template>\n\n<ng-template #retryButton let-attachmentUpload=\"attachmentUpload\">\n  <div\n    *ngIf=\"attachmentUpload.state === 'error'\"\n    data-testclass=\"upload-retry\"\n    class=\"str-chat__attachment-preview-error str-chat__attachment-preview-error-{{\n      attachmentUpload.type === 'image' ? 'image' : 'file'\n    }}\"\n    (click)=\"attachmentUploadRetried(attachmentUpload.file)\"\n    (keyup.enter)=\"attachmentUploadRetried(attachmentUpload.file)\"\n  >\n    <stream-icon-placeholder icon=\"retry\"></stream-icon-placeholder>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: CustomTemplatesService }, { type: AttachmentService }]; }, propDecorators: { attachmentUploads$: [{
                 type: Input
             }], retryAttachmentUpload: [{
                 type: Output
@@ -6420,6 +6507,7 @@ class MessageInputComponent {
             this.checkIfInEditMode();
         }));
         this.attachmentUploads$ = this.attachmentService.attachmentUploads$;
+        this.customAttachments$ = this.attachmentService.customAttachments$;
         this.attachmentUploadInProgressCounter$ =
             this.attachmentService.attachmentUploadInProgressCounter$;
         this.isFileUploadEnabled = this.configService.isFileUploadEnabled;
@@ -6595,6 +6683,18 @@ class MessageInputComponent {
         }
         return '';
     }
+    itemsPasted(event) {
+        var _a, _b;
+        if (this.configService.customPasteEventHandler) {
+            this.configService.customPasteEventHandler(event, this);
+        }
+        else {
+            if ((_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.files) {
+                event.preventDefault();
+                void this.filesSelected((_b = event.clipboardData) === null || _b === void 0 ? void 0 : _b.files);
+            }
+        }
+    }
     filesSelected(fileList) {
         return __awaiter(this, void 0, void 0, function* () {
             yield this.attachmentService.filesSelected(fileList);
@@ -6617,6 +6717,7 @@ class MessageInputComponent {
             attachmentUploads$: this.attachmentService.attachmentUploads$,
             deleteUploadHandler: this.deleteUpload.bind(this),
             retryUploadHandler: this.retryUpload.bind(this),
+            service: this.attachmentService,
         };
     }
     getAttachmentUploadContext() {
@@ -6752,10 +6853,10 @@ class MessageInputComponent {
     }
 }
 MessageInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageInputComponent, deps: [{ token: ChannelService }, { token: NotificationService }, { token: AttachmentService }, { token: MessageInputConfigService }, { token: textareaInjectionToken }, { token: i0.ComponentFactoryResolver }, { token: i0.ChangeDetectorRef }, { token: EmojiInputService }, { token: CustomTemplatesService }, { token: MessageActionsService }, { token: VoiceRecorderService }, { token: AudioRecorderService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MessageInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MessageInputComponent, selector: "stream-message-input", inputs: { isFileUploadEnabled: "isFileUploadEnabled", areMentionsEnabled: "areMentionsEnabled", mentionScope: "mentionScope", mode: "mode", isMultipleFileUploadEnabled: "isMultipleFileUploadEnabled", message: "message", sendMessage$: "sendMessage$", inputMode: "inputMode", autoFocus: "autoFocus", watchForMessageToEdit: "watchForMessageToEdit", displaySendButton: "displaySendButton", displayVoiceRecordingButton: "displayVoiceRecordingButton" }, outputs: { messageUpdate: "messageUpdate" }, host: { properties: { "class": "this.class" } }, providers: [AttachmentService, EmojiInputService, VoiceRecorderService], queries: [{ propertyName: "voiceRecorderRef", first: true, predicate: TemplateRef, descendants: true }], 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=\"str-chat__message-input str-chat-angular__message-input\"\n  [style.display]=\"isVoiceRecording ? 'none' : 'flex'\"\n>\n  <div *ngIf=\"quotedMessage\" class=\"str-chat__quoted-message-preview-header\">\n    <div class=\"str-chat__quoted-message-reply-to-message\">\n      {{ \"streamChat.Reply to Message\" | translate }}\n    </div>\n    <button\n      class=\"str-chat__quoted-message-remove\"\n      data-testid=\"remove-quote\"\n      (click)=\"deselectMessageToQuote()\"\n      (keyup.enter)=\"deselectMessageToQuote()\"\n    >\n      <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n    </button>\n  </div>\n  <div *ngIf=\"isUpdate\" class=\"str-chat__quoted-message-preview-header\">\n    <div class=\"str-chat__quoted-message-reply-to-message\">\n      {{ \"streamChat.Edit Message\" | translate }}\n    </div>\n    <button\n      class=\"str-chat__quoted-message-remove\"\n      data-testid=\"remove-quote\"\n      (click)=\"deselectMessageToEdit()\"\n      (keyup.enter)=\"deselectMessageToEdit()\"\n    >\n      <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n    </button>\n  </div>\n  <ng-container *ngIf=\"canSendMessages; else notAllowed\">\n    <div\n      class=\"str-chat__message-input-inner str-chat-angular__message-input-inner\"\n    >\n      <ng-content select=\"[message-input-start]\"></ng-content>\n      <ng-container\n        *ngIf=\"isFileUploadEnabled && isFileUploadAuthorized && canSendMessages\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            customAttachmentUploadTemplate || defaultAttachmentUpload;\n            context: getAttachmentUploadContext()\n          \"\n        ></ng-container>\n        <ng-template #defaultAttachmentUpload>\n          <div\n            class=\"str-chat__file-input-container\"\n            data-testid=\"file-upload-button\"\n          >\n            <input\n              #fileInput\n              type=\"file\"\n              class=\"str-chat__file-input\"\n              data-testid=\"file-input\"\n              [multiple]=\"isMultipleFileUploadEnabled\"\n              id=\"{{ fileInputId }}\"\n              (change)=\"filesSelected(fileInput.files)\"\n            />\n            <label class=\"str-chat__file-input-label\" for=\"{{ fileInputId }}\">\n              <stream-icon-placeholder icon=\"attach\"></stream-icon-placeholder>\n            </label>\n          </div>\n        </ng-template>\n      </ng-container>\n      <div class=\"str-chat__message-textarea-container\">\n        <div\n          *ngIf=\"quotedMessage\"\n          data-testid=\"quoted-message-container\"\n          class=\"str-chat__quoted-message-preview\"\n        >\n          <stream-avatar-placeholder\n            data-testid=\"qouted-message-avatar\"\n            class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n            type=\"user\"\n            location=\"quoted-message-sender\"\n            [imageUrl]=\"quotedMessage.user?.image\"\n            [name]=\"quotedMessage.user?.name || quotedMessage.user?.id\"\n            [user]=\"quotedMessage.user || undefined\"\n          ></stream-avatar-placeholder>\n          <div\n            class=\"quoted-message-preview-content-inner str-chat__quoted-message-bubble\"\n          >\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              class=\"str-chat__quoted-message-text\"\n              data-testid=\"quoted-message-text\"\n              [innerHTML]=\"\n                quotedMessage.translation ||\n                quotedMessage.html ||\n                quotedMessage.text\n              \"\n            ></div>\n          </div>\n        </div>\n        <ng-template\n          #defaultAttachmentsPreview\n          let-attachmentUploads$=\"attachmentUploads$\"\n          let-retryUploadHandler=\"retryUploadHandler\"\n          let-deleteUploadHandler=\"deleteUploadHandler\"\n        >\n          <stream-attachment-preview-list\n            class=\"str-chat__attachment-preview-list-angular-host\"\n            [attachmentUploads$]=\"attachmentUploads$\"\n            (retryAttachmentUpload)=\"retryUploadHandler($event)\"\n            (deleteAttachment)=\"deleteUploadHandler($event)\"\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=\"str-chat__message-textarea-with-emoji-picker\">\n          <ng-container\n            streamTextarea\n            [componentRef]=\"textareaRef\"\n            [areMentionsEnabled]=\"areMentionsEnabled\"\n            [mentionScope]=\"mentionScope\"\n            [inputMode]=\"inputMode\"\n            [autoFocus]=\"autoFocus\"\n            [placeholder]=\"textareaPlaceholder\"\n            [(value)]=\"textareaValue\"\n            (valueChange)=\"typingStart$.next()\"\n            (send)=\"messageSent()\"\n            (userMentions)=\"mentionedUsers = $event\"\n          ></ng-container>\n          <ng-container *ngIf=\"emojiPickerTemplate\" data-testid=\"emoji-picker\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                emojiPickerTemplate;\n                context: getEmojiPickerContext()\n              \"\n            ></ng-container>\n          </ng-container>\n        </div>\n      </div>\n      <button\n        *ngIf=\"canSendMessages && !isCooldownInProgress && displaySendButton\"\n        data-testid=\"send-button\"\n        class=\"str-chat__send-button\"\n        [disabled]=\"\n          (attachmentUploadInProgressCounter$ | async)! > 0 ||\n          (!textareaValue && (attachmentUploads$ | async)!.length === 0)\n        \"\n        (click)=\"messageSent()\"\n        (keyup.enter)=\"messageSent()\"\n      >\n        <stream-icon-placeholder icon=\"send\"></stream-icon-placeholder>\n      </button>\n      <div\n        *ngIf=\"isCooldownInProgress\"\n        class=\"str-chat__message-input-cooldown\"\n        data-testid=\"cooldown-timer\"\n      >\n        {{ cooldown$ | async }}\n      </div>\n      <button\n        *ngIf=\"displayVoiceRecordingButton\"\n        class=\"str-chat__start-recording-audio-button\"\n        data-testid=\"start-voice-recording\"\n        [disabled]=\"\n          voiceRecorderService.isRecorderVisible$.value ||\n          audioRecorder?.isRecording\n        \"\n        (click)=\"startVoiceRecording()\"\n        (keyup.enter)=\"startVoiceRecording()\"\n      >\n        <stream-icon-placeholder icon=\"mic\"></stream-icon-placeholder>\n      </button>\n      <ng-content select=\"[message-input-end]\"></ng-content>\n    </div>\n  </ng-container>\n  <ng-template #notAllowed>\n    <div\n      class=\"str-chat__message-input-not-allowed\"\n      data-testid=\"disabled-textarea\"\n    >\n      {{ disabledTextareaText | translate }}\n    </div>\n  </ng-template>\n</div>\n<ng-template\n  *ngIf=\"voiceRecorderRef\"\n  [ngTemplateOutlet]=\"voiceRecorderRef\"\n  [ngTemplateOutletContext]=\"{ service: voiceRecorderService }\"\n></ng-template>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "component", type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "parentMessageId", "attachments"], outputs: ["imageModalStateChange"] }, { kind: "component", type: AttachmentPreviewListComponent, selector: "stream-attachment-preview-list", inputs: ["attachmentUploads$"], outputs: ["retryAttachmentUpload", "deleteAttachment"] }, { kind: "directive", type: TextareaDirective, selector: "[streamTextarea]", inputs: ["componentRef", "areMentionsEnabled", "mentionScope", "inputMode", "value", "placeholder", "autoFocus"], outputs: ["valueChange", "send", "userMentions"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
+MessageInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MessageInputComponent, selector: "stream-message-input", inputs: { isFileUploadEnabled: "isFileUploadEnabled", areMentionsEnabled: "areMentionsEnabled", mentionScope: "mentionScope", mode: "mode", isMultipleFileUploadEnabled: "isMultipleFileUploadEnabled", message: "message", sendMessage$: "sendMessage$", inputMode: "inputMode", autoFocus: "autoFocus", watchForMessageToEdit: "watchForMessageToEdit", displaySendButton: "displaySendButton", displayVoiceRecordingButton: "displayVoiceRecordingButton" }, outputs: { messageUpdate: "messageUpdate" }, host: { properties: { "class": "this.class" } }, providers: [AttachmentService, EmojiInputService, VoiceRecorderService], queries: [{ propertyName: "voiceRecorderRef", first: true, predicate: TemplateRef, descendants: true }], 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=\"str-chat__message-input str-chat-angular__message-input\"\n  [style.display]=\"isVoiceRecording ? 'none' : 'flex'\"\n>\n  <div *ngIf=\"quotedMessage\" class=\"str-chat__quoted-message-preview-header\">\n    <div class=\"str-chat__quoted-message-reply-to-message\">\n      {{ \"streamChat.Reply to Message\" | translate }}\n    </div>\n    <button\n      class=\"str-chat__quoted-message-remove\"\n      data-testid=\"remove-quote\"\n      (click)=\"deselectMessageToQuote()\"\n      (keyup.enter)=\"deselectMessageToQuote()\"\n    >\n      <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n    </button>\n  </div>\n  <div *ngIf=\"isUpdate\" class=\"str-chat__quoted-message-preview-header\">\n    <div class=\"str-chat__quoted-message-reply-to-message\">\n      {{ \"streamChat.Edit Message\" | translate }}\n    </div>\n    <button\n      class=\"str-chat__quoted-message-remove\"\n      data-testid=\"remove-quote\"\n      (click)=\"deselectMessageToEdit()\"\n      (keyup.enter)=\"deselectMessageToEdit()\"\n    >\n      <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n    </button>\n  </div>\n  <ng-container *ngIf=\"canSendMessages; else notAllowed\">\n    <div\n      class=\"str-chat__message-input-inner str-chat-angular__message-input-inner\"\n    >\n      <ng-content select=\"[message-input-start]\"></ng-content>\n      <ng-container\n        *ngIf=\"isFileUploadEnabled && isFileUploadAuthorized && canSendMessages\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            customAttachmentUploadTemplate || defaultAttachmentUpload;\n            context: getAttachmentUploadContext()\n          \"\n        ></ng-container>\n        <ng-template #defaultAttachmentUpload>\n          <div\n            class=\"str-chat__file-input-container\"\n            data-testid=\"file-upload-button\"\n          >\n            <input\n              #fileInput\n              type=\"file\"\n              class=\"str-chat__file-input\"\n              data-testid=\"file-input\"\n              [multiple]=\"isMultipleFileUploadEnabled\"\n              id=\"{{ fileInputId }}\"\n              (change)=\"filesSelected(fileInput.files)\"\n            />\n            <label class=\"str-chat__file-input-label\" for=\"{{ fileInputId }}\">\n              <stream-icon-placeholder icon=\"attach\"></stream-icon-placeholder>\n            </label>\n          </div>\n        </ng-template>\n      </ng-container>\n      <div class=\"str-chat__message-textarea-container\">\n        <div\n          *ngIf=\"quotedMessage\"\n          data-testid=\"quoted-message-container\"\n          class=\"str-chat__quoted-message-preview\"\n        >\n          <stream-avatar-placeholder\n            data-testid=\"qouted-message-avatar\"\n            class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n            type=\"user\"\n            location=\"quoted-message-sender\"\n            [imageUrl]=\"quotedMessage.user?.image\"\n            [name]=\"quotedMessage.user?.name || quotedMessage.user?.id\"\n            [user]=\"quotedMessage.user || undefined\"\n          ></stream-avatar-placeholder>\n          <div\n            class=\"quoted-message-preview-content-inner str-chat__quoted-message-bubble\"\n          >\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              class=\"str-chat__quoted-message-text\"\n              data-testid=\"quoted-message-text\"\n              [innerHTML]=\"\n                quotedMessage.translation ||\n                quotedMessage.html ||\n                quotedMessage.text\n              \"\n            ></div>\n          </div>\n        </div>\n        <ng-template\n          #defaultAttachmentsPreview\n          let-attachmentUploads$=\"attachmentUploads$\"\n          let-retryUploadHandler=\"retryUploadHandler\"\n          let-deleteUploadHandler=\"deleteUploadHandler\"\n        >\n          <stream-attachment-preview-list\n            class=\"str-chat__attachment-preview-list-angular-host\"\n            [attachmentUploads$]=\"attachmentUploads$\"\n            (retryAttachmentUpload)=\"retryUploadHandler($event)\"\n            (deleteAttachment)=\"deleteUploadHandler($event)\"\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=\"str-chat__message-textarea-with-emoji-picker\">\n          <ng-container\n            streamTextarea\n            [componentRef]=\"textareaRef\"\n            [areMentionsEnabled]=\"areMentionsEnabled\"\n            [mentionScope]=\"mentionScope\"\n            [inputMode]=\"inputMode\"\n            [autoFocus]=\"autoFocus\"\n            [placeholder]=\"textareaPlaceholder\"\n            [(value)]=\"textareaValue\"\n            (valueChange)=\"typingStart$.next()\"\n            (send)=\"messageSent()\"\n            (userMentions)=\"mentionedUsers = $event\"\n            (pasteFromClipboard)=\"itemsPasted($event)\"\n          ></ng-container>\n          <ng-container *ngIf=\"emojiPickerTemplate\" data-testid=\"emoji-picker\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                emojiPickerTemplate;\n                context: getEmojiPickerContext()\n              \"\n            ></ng-container>\n          </ng-container>\n        </div>\n      </div>\n      <button\n        *ngIf=\"canSendMessages && !isCooldownInProgress && displaySendButton\"\n        data-testid=\"send-button\"\n        class=\"str-chat__send-button\"\n        [disabled]=\"\n          (attachmentUploadInProgressCounter$ | async)! > 0 ||\n          (!textareaValue &&\n            (attachmentUploads$ | async)!.length === 0 &&\n            (customAttachments$ | async)!.length === 0)\n        \"\n        (click)=\"messageSent()\"\n        (keyup.enter)=\"messageSent()\"\n      >\n        <stream-icon-placeholder icon=\"send\"></stream-icon-placeholder>\n      </button>\n      <div\n        *ngIf=\"isCooldownInProgress\"\n        class=\"str-chat__message-input-cooldown\"\n        data-testid=\"cooldown-timer\"\n      >\n        {{ cooldown$ | async }}\n      </div>\n      <button\n        *ngIf=\"displayVoiceRecordingButton\"\n        class=\"str-chat__start-recording-audio-button\"\n        data-testid=\"start-voice-recording\"\n        [disabled]=\"\n          voiceRecorderService.isRecorderVisible$.value ||\n          audioRecorder?.isRecording\n        \"\n        (click)=\"startVoiceRecording()\"\n        (keyup.enter)=\"startVoiceRecording()\"\n      >\n        <stream-icon-placeholder icon=\"mic\"></stream-icon-placeholder>\n      </button>\n      <ng-content select=\"[message-input-end]\"></ng-content>\n    </div>\n  </ng-container>\n  <ng-template #notAllowed>\n    <div\n      class=\"str-chat__message-input-not-allowed\"\n      data-testid=\"disabled-textarea\"\n    >\n      {{ disabledTextareaText | translate }}\n    </div>\n  </ng-template>\n</div>\n<ng-template\n  *ngIf=\"voiceRecorderRef\"\n  [ngTemplateOutlet]=\"voiceRecorderRef\"\n  [ngTemplateOutletContext]=\"{ service: voiceRecorderService }\"\n></ng-template>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "component", type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "parentMessageId", "attachments"], outputs: ["imageModalStateChange"] }, { kind: "component", type: AttachmentPreviewListComponent, selector: "stream-attachment-preview-list", inputs: ["attachmentUploads$"], outputs: ["retryAttachmentUpload", "deleteAttachment"] }, { kind: "directive", type: TextareaDirective, selector: "[streamTextarea]", inputs: ["componentRef", "areMentionsEnabled", "mentionScope", "inputMode", "value", "placeholder", "autoFocus"], outputs: ["valueChange", "send", "userMentions", "pasteFromClipboard"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-message-input', providers: [AttachmentService, EmojiInputService, VoiceRecorderService], template: "<div\n  class=\"str-chat__message-input str-chat-angular__message-input\"\n  [style.display]=\"isVoiceRecording ? 'none' : 'flex'\"\n>\n  <div *ngIf=\"quotedMessage\" class=\"str-chat__quoted-message-preview-header\">\n    <div class=\"str-chat__quoted-message-reply-to-message\">\n      {{ \"streamChat.Reply to Message\" | translate }}\n    </div>\n    <button\n      class=\"str-chat__quoted-message-remove\"\n      data-testid=\"remove-quote\"\n      (click)=\"deselectMessageToQuote()\"\n      (keyup.enter)=\"deselectMessageToQuote()\"\n    >\n      <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n    </button>\n  </div>\n  <div *ngIf=\"isUpdate\" class=\"str-chat__quoted-message-preview-header\">\n    <div class=\"str-chat__quoted-message-reply-to-message\">\n      {{ \"streamChat.Edit Message\" | translate }}\n    </div>\n    <button\n      class=\"str-chat__quoted-message-remove\"\n      data-testid=\"remove-quote\"\n      (click)=\"deselectMessageToEdit()\"\n      (keyup.enter)=\"deselectMessageToEdit()\"\n    >\n      <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n    </button>\n  </div>\n  <ng-container *ngIf=\"canSendMessages; else notAllowed\">\n    <div\n      class=\"str-chat__message-input-inner str-chat-angular__message-input-inner\"\n    >\n      <ng-content select=\"[message-input-start]\"></ng-content>\n      <ng-container\n        *ngIf=\"isFileUploadEnabled && isFileUploadAuthorized && canSendMessages\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            customAttachmentUploadTemplate || defaultAttachmentUpload;\n            context: getAttachmentUploadContext()\n          \"\n        ></ng-container>\n        <ng-template #defaultAttachmentUpload>\n          <div\n            class=\"str-chat__file-input-container\"\n            data-testid=\"file-upload-button\"\n          >\n            <input\n              #fileInput\n              type=\"file\"\n              class=\"str-chat__file-input\"\n              data-testid=\"file-input\"\n              [multiple]=\"isMultipleFileUploadEnabled\"\n              id=\"{{ fileInputId }}\"\n              (change)=\"filesSelected(fileInput.files)\"\n            />\n            <label class=\"str-chat__file-input-label\" for=\"{{ fileInputId }}\">\n              <stream-icon-placeholder icon=\"attach\"></stream-icon-placeholder>\n            </label>\n          </div>\n        </ng-template>\n      </ng-container>\n      <div class=\"str-chat__message-textarea-container\">\n        <div\n          *ngIf=\"quotedMessage\"\n          data-testid=\"quoted-message-container\"\n          class=\"str-chat__quoted-message-preview\"\n        >\n          <stream-avatar-placeholder\n            data-testid=\"qouted-message-avatar\"\n            class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n            type=\"user\"\n            location=\"quoted-message-sender\"\n            [imageUrl]=\"quotedMessage.user?.image\"\n            [name]=\"quotedMessage.user?.name || quotedMessage.user?.id\"\n            [user]=\"quotedMessage.user || undefined\"\n          ></stream-avatar-placeholder>\n          <div\n            class=\"quoted-message-preview-content-inner str-chat__quoted-message-bubble\"\n          >\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              class=\"str-chat__quoted-message-text\"\n              data-testid=\"quoted-message-text\"\n              [innerHTML]=\"\n                quotedMessage.translation ||\n                quotedMessage.html ||\n                quotedMessage.text\n              \"\n            ></div>\n          </div>\n        </div>\n        <ng-template\n          #defaultAttachmentsPreview\n          let-attachmentUploads$=\"attachmentUploads$\"\n          let-retryUploadHandler=\"retryUploadHandler\"\n          let-deleteUploadHandler=\"deleteUploadHandler\"\n        >\n          <stream-attachment-preview-list\n            class=\"str-chat__attachment-preview-list-angular-host\"\n            [attachmentUploads$]=\"attachmentUploads$\"\n            (retryAttachmentUpload)=\"retryUploadHandler($event)\"\n            (deleteAttachment)=\"deleteUploadHandler($event)\"\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=\"str-chat__message-textarea-with-emoji-picker\">\n          <ng-container\n            streamTextarea\n            [componentRef]=\"textareaRef\"\n            [areMentionsEnabled]=\"areMentionsEnabled\"\n            [mentionScope]=\"mentionScope\"\n            [inputMode]=\"inputMode\"\n            [autoFocus]=\"autoFocus\"\n            [placeholder]=\"textareaPlaceholder\"\n            [(value)]=\"textareaValue\"\n            (valueChange)=\"typingStart$.next()\"\n            (send)=\"messageSent()\"\n            (userMentions)=\"mentionedUsers = $event\"\n          ></ng-container>\n          <ng-container *ngIf=\"emojiPickerTemplate\" data-testid=\"emoji-picker\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                emojiPickerTemplate;\n                context: getEmojiPickerContext()\n              \"\n            ></ng-container>\n          </ng-container>\n        </div>\n      </div>\n      <button\n        *ngIf=\"canSendMessages && !isCooldownInProgress && displaySendButton\"\n        data-testid=\"send-button\"\n        class=\"str-chat__send-button\"\n        [disabled]=\"\n          (attachmentUploadInProgressCounter$ | async)! > 0 ||\n          (!textareaValue && (attachmentUploads$ | async)!.length === 0)\n        \"\n        (click)=\"messageSent()\"\n        (keyup.enter)=\"messageSent()\"\n      >\n        <stream-icon-placeholder icon=\"send\"></stream-icon-placeholder>\n      </button>\n      <div\n        *ngIf=\"isCooldownInProgress\"\n        class=\"str-chat__message-input-cooldown\"\n        data-testid=\"cooldown-timer\"\n      >\n        {{ cooldown$ | async }}\n      </div>\n      <button\n        *ngIf=\"displayVoiceRecordingButton\"\n        class=\"str-chat__start-recording-audio-button\"\n        data-testid=\"start-voice-recording\"\n        [disabled]=\"\n          voiceRecorderService.isRecorderVisible$.value ||\n          audioRecorder?.isRecording\n        \"\n        (click)=\"startVoiceRecording()\"\n        (keyup.enter)=\"startVoiceRecording()\"\n      >\n        <stream-icon-placeholder icon=\"mic\"></stream-icon-placeholder>\n      </button>\n      <ng-content select=\"[message-input-end]\"></ng-content>\n    </div>\n  </ng-container>\n  <ng-template #notAllowed>\n    <div\n      class=\"str-chat__message-input-not-allowed\"\n      data-testid=\"disabled-textarea\"\n    >\n      {{ disabledTextareaText | translate }}\n    </div>\n  </ng-template>\n</div>\n<ng-template\n  *ngIf=\"voiceRecorderRef\"\n  [ngTemplateOutlet]=\"voiceRecorderRef\"\n  [ngTemplateOutletContext]=\"{ service: voiceRecorderService }\"\n></ng-template>\n" }]
+            args: [{ selector: 'stream-message-input', providers: [AttachmentService, EmojiInputService, VoiceRecorderService], template: "<div\n  class=\"str-chat__message-input str-chat-angular__message-input\"\n  [style.display]=\"isVoiceRecording ? 'none' : 'flex'\"\n>\n  <div *ngIf=\"quotedMessage\" class=\"str-chat__quoted-message-preview-header\">\n    <div class=\"str-chat__quoted-message-reply-to-message\">\n      {{ \"streamChat.Reply to Message\" | translate }}\n    </div>\n    <button\n      class=\"str-chat__quoted-message-remove\"\n      data-testid=\"remove-quote\"\n      (click)=\"deselectMessageToQuote()\"\n      (keyup.enter)=\"deselectMessageToQuote()\"\n    >\n      <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n    </button>\n  </div>\n  <div *ngIf=\"isUpdate\" class=\"str-chat__quoted-message-preview-header\">\n    <div class=\"str-chat__quoted-message-reply-to-message\">\n      {{ \"streamChat.Edit Message\" | translate }}\n    </div>\n    <button\n      class=\"str-chat__quoted-message-remove\"\n      data-testid=\"remove-quote\"\n      (click)=\"deselectMessageToEdit()\"\n      (keyup.enter)=\"deselectMessageToEdit()\"\n    >\n      <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n    </button>\n  </div>\n  <ng-container *ngIf=\"canSendMessages; else notAllowed\">\n    <div\n      class=\"str-chat__message-input-inner str-chat-angular__message-input-inner\"\n    >\n      <ng-content select=\"[message-input-start]\"></ng-content>\n      <ng-container\n        *ngIf=\"isFileUploadEnabled && isFileUploadAuthorized && canSendMessages\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            customAttachmentUploadTemplate || defaultAttachmentUpload;\n            context: getAttachmentUploadContext()\n          \"\n        ></ng-container>\n        <ng-template #defaultAttachmentUpload>\n          <div\n            class=\"str-chat__file-input-container\"\n            data-testid=\"file-upload-button\"\n          >\n            <input\n              #fileInput\n              type=\"file\"\n              class=\"str-chat__file-input\"\n              data-testid=\"file-input\"\n              [multiple]=\"isMultipleFileUploadEnabled\"\n              id=\"{{ fileInputId }}\"\n              (change)=\"filesSelected(fileInput.files)\"\n            />\n            <label class=\"str-chat__file-input-label\" for=\"{{ fileInputId }}\">\n              <stream-icon-placeholder icon=\"attach\"></stream-icon-placeholder>\n            </label>\n          </div>\n        </ng-template>\n      </ng-container>\n      <div class=\"str-chat__message-textarea-container\">\n        <div\n          *ngIf=\"quotedMessage\"\n          data-testid=\"quoted-message-container\"\n          class=\"str-chat__quoted-message-preview\"\n        >\n          <stream-avatar-placeholder\n            data-testid=\"qouted-message-avatar\"\n            class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n            type=\"user\"\n            location=\"quoted-message-sender\"\n            [imageUrl]=\"quotedMessage.user?.image\"\n            [name]=\"quotedMessage.user?.name || quotedMessage.user?.id\"\n            [user]=\"quotedMessage.user || undefined\"\n          ></stream-avatar-placeholder>\n          <div\n            class=\"quoted-message-preview-content-inner str-chat__quoted-message-bubble\"\n          >\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              class=\"str-chat__quoted-message-text\"\n              data-testid=\"quoted-message-text\"\n              [innerHTML]=\"\n                quotedMessage.translation ||\n                quotedMessage.html ||\n                quotedMessage.text\n              \"\n            ></div>\n          </div>\n        </div>\n        <ng-template\n          #defaultAttachmentsPreview\n          let-attachmentUploads$=\"attachmentUploads$\"\n          let-retryUploadHandler=\"retryUploadHandler\"\n          let-deleteUploadHandler=\"deleteUploadHandler\"\n        >\n          <stream-attachment-preview-list\n            class=\"str-chat__attachment-preview-list-angular-host\"\n            [attachmentUploads$]=\"attachmentUploads$\"\n            (retryAttachmentUpload)=\"retryUploadHandler($event)\"\n            (deleteAttachment)=\"deleteUploadHandler($event)\"\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=\"str-chat__message-textarea-with-emoji-picker\">\n          <ng-container\n            streamTextarea\n            [componentRef]=\"textareaRef\"\n            [areMentionsEnabled]=\"areMentionsEnabled\"\n            [mentionScope]=\"mentionScope\"\n            [inputMode]=\"inputMode\"\n            [autoFocus]=\"autoFocus\"\n            [placeholder]=\"textareaPlaceholder\"\n            [(value)]=\"textareaValue\"\n            (valueChange)=\"typingStart$.next()\"\n            (send)=\"messageSent()\"\n            (userMentions)=\"mentionedUsers = $event\"\n            (pasteFromClipboard)=\"itemsPasted($event)\"\n          ></ng-container>\n          <ng-container *ngIf=\"emojiPickerTemplate\" data-testid=\"emoji-picker\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                emojiPickerTemplate;\n                context: getEmojiPickerContext()\n              \"\n            ></ng-container>\n          </ng-container>\n        </div>\n      </div>\n      <button\n        *ngIf=\"canSendMessages && !isCooldownInProgress && displaySendButton\"\n        data-testid=\"send-button\"\n        class=\"str-chat__send-button\"\n        [disabled]=\"\n          (attachmentUploadInProgressCounter$ | async)! > 0 ||\n          (!textareaValue &&\n            (attachmentUploads$ | async)!.length === 0 &&\n            (customAttachments$ | async)!.length === 0)\n        \"\n        (click)=\"messageSent()\"\n        (keyup.enter)=\"messageSent()\"\n      >\n        <stream-icon-placeholder icon=\"send\"></stream-icon-placeholder>\n      </button>\n      <div\n        *ngIf=\"isCooldownInProgress\"\n        class=\"str-chat__message-input-cooldown\"\n        data-testid=\"cooldown-timer\"\n      >\n        {{ cooldown$ | async }}\n      </div>\n      <button\n        *ngIf=\"displayVoiceRecordingButton\"\n        class=\"str-chat__start-recording-audio-button\"\n        data-testid=\"start-voice-recording\"\n        [disabled]=\"\n          voiceRecorderService.isRecorderVisible$.value ||\n          audioRecorder?.isRecording\n        \"\n        (click)=\"startVoiceRecording()\"\n        (keyup.enter)=\"startVoiceRecording()\"\n      >\n        <stream-icon-placeholder icon=\"mic\"></stream-icon-placeholder>\n      </button>\n      <ng-content select=\"[message-input-end]\"></ng-content>\n    </div>\n  </ng-container>\n  <ng-template #notAllowed>\n    <div\n      class=\"str-chat__message-input-not-allowed\"\n      data-testid=\"disabled-textarea\"\n    >\n      {{ disabledTextareaText | translate }}\n    </div>\n  </ng-template>\n</div>\n<ng-template\n  *ngIf=\"voiceRecorderRef\"\n  [ngTemplateOutlet]=\"voiceRecorderRef\"\n  [ngTemplateOutletContext]=\"{ service: voiceRecorderService }\"\n></ng-template>\n" }]
         }], ctorParameters: function () {
         return [{ type: ChannelService }, { type: NotificationService }, { type: AttachmentService }, { type: MessageInputConfigService }, { type: i0.Type, decorators: [{
                         type: Inject,
@@ -6806,9 +6907,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
  * The `Textarea` component is used by the [`MessageInput`](./MessageInputComponent.mdx) component to display the input HTML element where users can type their message.
  */
 class TextareaComponent {
-    constructor(emojiInputService, themeService) {
+    constructor(emojiInputService) {
         this.emojiInputService = emojiInputService;
-        this.themeService = themeService;
         this.class = 'str-chat__textarea str-chat__message-textarea-angular-host';
         /**
          * The value of the input HTML element.
@@ -6830,6 +6930,10 @@ class TextareaComponent {
          * Emits when a user triggers a message send event (this happens when they hit the `Enter` key).
          */
         this.send = new EventEmitter();
+        /**
+         * Emits any paste event that occured inside the textarea
+         */
+        this.pasteFromClipboard = new EventEmitter();
         this.subscriptions = [];
         this.isViewInited = false;
         this.subscriptions.push(this.emojiInputService.emojiInput$.subscribe((emoji) => {
@@ -6882,12 +6986,12 @@ class TextareaComponent {
         this.messageInput.nativeElement.style.height = `${this.messageInput.nativeElement.scrollHeight}px`;
     }
 }
-TextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TextareaComponent, deps: [{ token: EmojiInputService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
-TextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TextareaComponent, selector: "stream-textarea", inputs: { value: "value", placeholder: "placeholder", inputMode: "inputMode", autoFocus: "autoFocus" }, outputs: { valueChange: "valueChange", send: "send" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<textarea\n  #input\n  data-testid=\"textarea\"\n  class=\"rta__textarea str-chat__textarea__textarea str-chat__angular-textarea str-chat__message-textarea\"\n  rows=\"1\"\n  [value]=\"value || ''\"\n  [autofocus]=\"autoFocus\"\n  placeholder=\"{{ placeholder | translate }}\"\n  (input)=\"inputChanged()\"\n  (keydown.enter)=\"enterHit($event)\"\n></textarea>\n", dependencies: [{ kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
+TextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TextareaComponent, deps: [{ token: EmojiInputService }], target: i0.ɵɵFactoryTarget.Component });
+TextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TextareaComponent, selector: "stream-textarea", inputs: { value: "value", placeholder: "placeholder", inputMode: "inputMode", autoFocus: "autoFocus" }, outputs: { valueChange: "valueChange", send: "send", pasteFromClipboard: "pasteFromClipboard" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<textarea\n  #input\n  data-testid=\"textarea\"\n  class=\"rta__textarea str-chat__textarea__textarea str-chat__angular-textarea str-chat__message-textarea\"\n  rows=\"1\"\n  [value]=\"value || ''\"\n  [autofocus]=\"autoFocus\"\n  placeholder=\"{{ placeholder | translate }}\"\n  (input)=\"inputChanged()\"\n  (keydown.enter)=\"enterHit($event)\"\n  (paste)=\"pasteFromClipboard.emit($event)\"\n></textarea>\n", dependencies: [{ kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TextareaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-textarea', template: "<textarea\n  #input\n  data-testid=\"textarea\"\n  class=\"rta__textarea str-chat__textarea__textarea str-chat__angular-textarea str-chat__message-textarea\"\n  rows=\"1\"\n  [value]=\"value || ''\"\n  [autofocus]=\"autoFocus\"\n  placeholder=\"{{ placeholder | translate }}\"\n  (input)=\"inputChanged()\"\n  (keydown.enter)=\"enterHit($event)\"\n></textarea>\n" }]
-        }], ctorParameters: function () { return [{ type: EmojiInputService }, { type: ThemeService }]; }, propDecorators: { class: [{
+            args: [{ selector: 'stream-textarea', template: "<textarea\n  #input\n  data-testid=\"textarea\"\n  class=\"rta__textarea str-chat__textarea__textarea str-chat__angular-textarea str-chat__message-textarea\"\n  rows=\"1\"\n  [value]=\"value || ''\"\n  [autofocus]=\"autoFocus\"\n  placeholder=\"{{ placeholder | translate }}\"\n  (input)=\"inputChanged()\"\n  (keydown.enter)=\"enterHit($event)\"\n  (paste)=\"pasteFromClipboard.emit($event)\"\n></textarea>\n" }]
+        }], ctorParameters: function () { return [{ type: EmojiInputService }]; }, propDecorators: { class: [{
                 type: HostBinding
             }], value: [{
                 type: Input
@@ -6901,6 +7005,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Output
             }], send: [{
                 type: Output
+            }], pasteFromClipboard: [{
+                type: Output
             }], messageInput: [{
                 type: ViewChild,
                 args: ['input']
@@ -6931,13 +7037,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
  * The `AutocompleteTextarea` component is used by the [`MessageInput`](./MessageInputComponent.mdx) component to display the input HTML element where users can type their message.
  */
 class AutocompleteTextareaComponent {
-    constructor(channelService, chatClientService, transliterationService, emojiInputService, customTemplatesService, themeService, cdRef) {
+    constructor(channelService, chatClientService, transliterationService, emojiInputService, customTemplatesService, cdRef) {
         this.channelService = channelService;
         this.chatClientService = chatClientService;
         this.transliterationService = transliterationService;
         this.emojiInputService = emojiInputService;
         this.customTemplatesService = customTemplatesService;
-        this.themeService = themeService;
         this.cdRef = cdRef;
         this.class = 'str-chat__textarea str-chat__message-textarea-angular-host';
         /**
@@ -6972,6 +7077,10 @@ class AutocompleteTextareaComponent {
          * Emits the array of users that are mentioned in the message, it is updated when a user mentions a new user or deletes a mention.
          */
         this.userMentions = new EventEmitter();
+        /**
+         * Emits any paste event that occured inside the textarea
+         */
+        this.pasteFromClipboard = new EventEmitter();
         this.autocompleteKey = 'autocompleteLabel';
         this.mentionTriggerChar = '@';
         this.commandTriggerChar = '/';
@@ -7156,12 +7265,12 @@ class AutocompleteTextareaComponent {
         }
     }
 }
-AutocompleteTextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AutocompleteTextareaComponent, deps: [{ token: ChannelService }, { token: ChatClientService }, { token: TransliterationService }, { token: EmojiInputService }, { token: CustomTemplatesService }, { token: ThemeService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AutocompleteTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AutocompleteTextareaComponent, selector: "stream-autocomplete-textarea", inputs: { value: "value", placeholder: "placeholder", areMentionsEnabled: "areMentionsEnabled", inputMode: "inputMode", mentionScope: "mentionScope", autoFocus: "autoFocus" }, outputs: { valueChange: "valueChange", send: "send", userMentions: "userMentions" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<textarea\n  #input\n  data-testid=\"textarea\"\n  class=\"rta__textarea str-chat__textarea__textarea str-chat__angular-textarea str-chat__message-textarea\"\n  rows=\"1\"\n  [value]=\"value || ''\"\n  [autofocus]=\"autoFocus\"\n  placeholder=\"{{ placeholder | translate }}\"\n  [mentionConfig]=\"autocompleteConfig\"\n  [mentionListTemplate]=\"autocompleteItem\"\n  (input)=\"inputChanged()\"\n  (keydown.enter)=\"enterHit($event)\"\n  (searchTerm)=\"autcompleteSearchTermChanged($event)\"\n  (blur)=\"inputLeft()\"\n></textarea>\n<ng-template #autocompleteItem let-item=\"item\">\n  <div class=\"rta rta__item str-chat__emojisearch__item\" [ngSwitch]=\"item.type\">\n    <div *ngSwitchCase=\"'mention'\" class=\"rta__entity\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          mentionAutocompleteItemTemplate || defaultMentionTemplate;\n          context: { item: item }\n        \"\n      ></ng-container>\n    </div>\n    <div *ngSwitchCase=\"'command'\" class=\"rta__entity\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          commandAutocompleteItemTemplate || defaultCommandTemplate;\n          context: { item: item }\n        \"\n      ></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #defaultCommandTemplate let-item=\"item\">\n  <div class=\"str-chat__slash-command\">\n    <span class=\"str-chat__slash-command-header\">\n      <strong\n        class=\"str-chat__slash-command-name\"\n        data-testclass=\"command-name\"\n        >{{ item.name }}</strong\n      >\n      <span class=\"str-chat__slash-command-args\"\n        >/{{ item.name }} {{ item.args }}</span\n      >\n    </span>\n    <br />\n  </div>\n</ng-template>\n\n<ng-template #defaultMentionTemplate let-item=\"item\">\n  <div class=\"str-chat__user-item\">\n    <stream-avatar-placeholder\n      data-testclass=\"avatar\"\n      class=\"str-chat__avatar str-chat__avatar--circle\"\n      type=\"user\"\n      location=\"autocomplete-item\"\n      [imageUrl]=\"item.image || item.user?.image\"\n      [name]=\"item.autocompleteLabel\"\n      [user]=\"item.user || item\"\n    ></stream-avatar-placeholder>\n    <span data-testclass=\"username\" class=\"str-chat__user-item--name\">{{\n      item.autocompleteLabel\n    }}</span>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i8$1.MentionDirective, selector: "[mention], [mentionConfig]", inputs: ["mentionConfig", "mention", "mentionListTemplate"], outputs: ["searchTerm", "itemSelected", "opened", "closed"] }, { kind: "component", type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
+AutocompleteTextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AutocompleteTextareaComponent, deps: [{ token: ChannelService }, { token: ChatClientService }, { token: TransliterationService }, { token: EmojiInputService }, { token: CustomTemplatesService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AutocompleteTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AutocompleteTextareaComponent, selector: "stream-autocomplete-textarea", inputs: { value: "value", placeholder: "placeholder", areMentionsEnabled: "areMentionsEnabled", inputMode: "inputMode", mentionScope: "mentionScope", autoFocus: "autoFocus" }, outputs: { valueChange: "valueChange", send: "send", userMentions: "userMentions", pasteFromClipboard: "pasteFromClipboard" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<textarea\n  #input\n  data-testid=\"textarea\"\n  class=\"rta__textarea str-chat__textarea__textarea str-chat__angular-textarea str-chat__message-textarea\"\n  rows=\"1\"\n  [value]=\"value || ''\"\n  [autofocus]=\"autoFocus\"\n  placeholder=\"{{ placeholder | translate }}\"\n  [mentionConfig]=\"autocompleteConfig\"\n  [mentionListTemplate]=\"autocompleteItem\"\n  (input)=\"inputChanged()\"\n  (keydown.enter)=\"enterHit($event)\"\n  (searchTerm)=\"autcompleteSearchTermChanged($event)\"\n  (blur)=\"inputLeft()\"\n  (paste)=\"pasteFromClipboard.emit($event)\"\n></textarea>\n<ng-template #autocompleteItem let-item=\"item\">\n  <div class=\"rta rta__item str-chat__emojisearch__item\" [ngSwitch]=\"item.type\">\n    <div *ngSwitchCase=\"'mention'\" class=\"rta__entity\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          mentionAutocompleteItemTemplate || defaultMentionTemplate;\n          context: { item: item }\n        \"\n      ></ng-container>\n    </div>\n    <div *ngSwitchCase=\"'command'\" class=\"rta__entity\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          commandAutocompleteItemTemplate || defaultCommandTemplate;\n          context: { item: item }\n        \"\n      ></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #defaultCommandTemplate let-item=\"item\">\n  <div class=\"str-chat__slash-command\">\n    <span class=\"str-chat__slash-command-header\">\n      <strong\n        class=\"str-chat__slash-command-name\"\n        data-testclass=\"command-name\"\n        >{{ item.name }}</strong\n      >\n      <span class=\"str-chat__slash-command-args\"\n        >/{{ item.name }} {{ item.args }}</span\n      >\n    </span>\n    <br />\n  </div>\n</ng-template>\n\n<ng-template #defaultMentionTemplate let-item=\"item\">\n  <div class=\"str-chat__user-item\">\n    <stream-avatar-placeholder\n      data-testclass=\"avatar\"\n      class=\"str-chat__avatar str-chat__avatar--circle\"\n      type=\"user\"\n      location=\"autocomplete-item\"\n      [imageUrl]=\"item.image || item.user?.image\"\n      [name]=\"item.autocompleteLabel\"\n      [user]=\"item.user || item\"\n    ></stream-avatar-placeholder>\n    <span data-testclass=\"username\" class=\"str-chat__user-item--name\">{{\n      item.autocompleteLabel\n    }}</span>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i7.MentionDirective, selector: "[mention], [mentionConfig]", inputs: ["mentionConfig", "mention", "mentionListTemplate"], outputs: ["searchTerm", "itemSelected", "opened", "closed"] }, { kind: "component", type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AutocompleteTextareaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-autocomplete-textarea', template: "<textarea\n  #input\n  data-testid=\"textarea\"\n  class=\"rta__textarea str-chat__textarea__textarea str-chat__angular-textarea str-chat__message-textarea\"\n  rows=\"1\"\n  [value]=\"value || ''\"\n  [autofocus]=\"autoFocus\"\n  placeholder=\"{{ placeholder | translate }}\"\n  [mentionConfig]=\"autocompleteConfig\"\n  [mentionListTemplate]=\"autocompleteItem\"\n  (input)=\"inputChanged()\"\n  (keydown.enter)=\"enterHit($event)\"\n  (searchTerm)=\"autcompleteSearchTermChanged($event)\"\n  (blur)=\"inputLeft()\"\n></textarea>\n<ng-template #autocompleteItem let-item=\"item\">\n  <div class=\"rta rta__item str-chat__emojisearch__item\" [ngSwitch]=\"item.type\">\n    <div *ngSwitchCase=\"'mention'\" class=\"rta__entity\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          mentionAutocompleteItemTemplate || defaultMentionTemplate;\n          context: { item: item }\n        \"\n      ></ng-container>\n    </div>\n    <div *ngSwitchCase=\"'command'\" class=\"rta__entity\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          commandAutocompleteItemTemplate || defaultCommandTemplate;\n          context: { item: item }\n        \"\n      ></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #defaultCommandTemplate let-item=\"item\">\n  <div class=\"str-chat__slash-command\">\n    <span class=\"str-chat__slash-command-header\">\n      <strong\n        class=\"str-chat__slash-command-name\"\n        data-testclass=\"command-name\"\n        >{{ item.name }}</strong\n      >\n      <span class=\"str-chat__slash-command-args\"\n        >/{{ item.name }} {{ item.args }}</span\n      >\n    </span>\n    <br />\n  </div>\n</ng-template>\n\n<ng-template #defaultMentionTemplate let-item=\"item\">\n  <div class=\"str-chat__user-item\">\n    <stream-avatar-placeholder\n      data-testclass=\"avatar\"\n      class=\"str-chat__avatar str-chat__avatar--circle\"\n      type=\"user\"\n      location=\"autocomplete-item\"\n      [imageUrl]=\"item.image || item.user?.image\"\n      [name]=\"item.autocompleteLabel\"\n      [user]=\"item.user || item\"\n    ></stream-avatar-placeholder>\n    <span data-testclass=\"username\" class=\"str-chat__user-item--name\">{{\n      item.autocompleteLabel\n    }}</span>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: ChannelService }, { type: ChatClientService }, { type: TransliterationService }, { type: EmojiInputService }, { type: CustomTemplatesService }, { type: ThemeService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { class: [{
+            args: [{ selector: 'stream-autocomplete-textarea', template: "<textarea\n  #input\n  data-testid=\"textarea\"\n  class=\"rta__textarea str-chat__textarea__textarea str-chat__angular-textarea str-chat__message-textarea\"\n  rows=\"1\"\n  [value]=\"value || ''\"\n  [autofocus]=\"autoFocus\"\n  placeholder=\"{{ placeholder | translate }}\"\n  [mentionConfig]=\"autocompleteConfig\"\n  [mentionListTemplate]=\"autocompleteItem\"\n  (input)=\"inputChanged()\"\n  (keydown.enter)=\"enterHit($event)\"\n  (searchTerm)=\"autcompleteSearchTermChanged($event)\"\n  (blur)=\"inputLeft()\"\n  (paste)=\"pasteFromClipboard.emit($event)\"\n></textarea>\n<ng-template #autocompleteItem let-item=\"item\">\n  <div class=\"rta rta__item str-chat__emojisearch__item\" [ngSwitch]=\"item.type\">\n    <div *ngSwitchCase=\"'mention'\" class=\"rta__entity\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          mentionAutocompleteItemTemplate || defaultMentionTemplate;\n          context: { item: item }\n        \"\n      ></ng-container>\n    </div>\n    <div *ngSwitchCase=\"'command'\" class=\"rta__entity\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          commandAutocompleteItemTemplate || defaultCommandTemplate;\n          context: { item: item }\n        \"\n      ></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #defaultCommandTemplate let-item=\"item\">\n  <div class=\"str-chat__slash-command\">\n    <span class=\"str-chat__slash-command-header\">\n      <strong\n        class=\"str-chat__slash-command-name\"\n        data-testclass=\"command-name\"\n        >{{ item.name }}</strong\n      >\n      <span class=\"str-chat__slash-command-args\"\n        >/{{ item.name }} {{ item.args }}</span\n      >\n    </span>\n    <br />\n  </div>\n</ng-template>\n\n<ng-template #defaultMentionTemplate let-item=\"item\">\n  <div class=\"str-chat__user-item\">\n    <stream-avatar-placeholder\n      data-testclass=\"avatar\"\n      class=\"str-chat__avatar str-chat__avatar--circle\"\n      type=\"user\"\n      location=\"autocomplete-item\"\n      [imageUrl]=\"item.image || item.user?.image\"\n      [name]=\"item.autocompleteLabel\"\n      [user]=\"item.user || item\"\n    ></stream-avatar-placeholder>\n    <span data-testclass=\"username\" class=\"str-chat__user-item--name\">{{\n      item.autocompleteLabel\n    }}</span>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: ChannelService }, { type: ChatClientService }, { type: TransliterationService }, { type: EmojiInputService }, { type: CustomTemplatesService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { class: [{
                 type: HostBinding
             }], value: [{
                 type: Input
@@ -7181,6 +7290,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Output
             }], userMentions: [{
                 type: Output
+            }], pasteFromClipboard: [{
+                type: Output
             }], messageInput: [{
                 type: ViewChild,
                 args: ['input']
@@ -8232,7 +8343,7 @@ class MessageListComponent {
     }
 }
 MessageListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageListComponent, deps: [{ token: ChannelService }, { token: ChatClientService }, { token: CustomTemplatesService }, { token: DateParserService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-MessageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MessageListComponent, selector: "stream-message-list", inputs: { mode: "mode", direction: "direction", hideJumpToLatestButtonDuringScroll: "hideJumpToLatestButtonDuringScroll", displayDateSeparator: "displayDateSeparator", displayUnreadSeparator: "displayUnreadSeparator", dateSeparatorTextPos: "dateSeparatorTextPos", openMessageListAt: "openMessageListAt", hideUnreadCountForNotificationAndIndicator: "hideUnreadCountForNotificationAndIndicator", displayLoadingIndicator: "displayLoadingIndicator" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "parentMessageElement", first: true, predicate: ["parentMessageElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container\n  *ngIf=\"\n    lastReadMessageId &&\n    isUnreadNotificationVisible &&\n    openMessageListAt === 'last-message' &&\n    displayUnreadSeparator\n  \"\n>\n  <ng-container\n    *ngTemplateOutlet=\"\n      customnewMessagesNotificationTemplate ||\n        defaultUnreadMessagesNotification;\n      context: {\n        unreadCount: unreadCount,\n        onDismiss: messageNotificationDismissClicked,\n        onJump: messageNotificationJumpClicked\n      }\n    \"\n  ></ng-container>\n</ng-container>\n<ng-template\n  #defaultUnreadMessagesNotification\n  let-unreadCount=\"unreadCount\"\n  let-onDismiss=\"onDismiss\"\n  let-onJump=\"onJump\"\n>\n  <div\n    class=\"str-chat__unread-messages-notification\"\n    data-testid=\"unread-messages-notification\"\n  >\n    <button\n      data-testid=\"unread-messages-notification-jump-to-message\"\n      (click)=\"onJump()\"\n    >\n      <ng-container\n        *ngIf=\"\n          unreadCount > 0 && !hideUnreadCountForNotificationAndIndicator;\n          else noUnreadCount\n        \"\n      >\n        {{\n          (unreadCount === 1\n            ? \"streamChat.\\{\\{count\\}\\} unread message\"\n            : \"streamChat.\\{\\{count\\}\\} unread messages\"\n          ) | translate : { count: unreadCount }\n        }}\n      </ng-container>\n      <ng-template #noUnreadCount>\n        {{ \"streamChat.Unread messages\" | translate }}\n      </ng-template>\n    </button>\n    <button\n      data-testid=\"unread-messages-notification-dismiss\"\n      (click)=\"onDismiss()\"\n    >\n      <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n    </button>\n  </div>\n</ng-template>\n<div #scrollContainer data-testid=\"scroll-container\" class=\"str-chat__list\">\n  <ng-container *ngIf=\"mode === 'main' && isEmpty && emptyListTemplate\">\n    <ng-container *ngTemplateOutlet=\"emptyListTemplate\"></ng-container>\n  </ng-container>\n  <div class=\"str-chat__reverse-infinite-scroll str-chat__message-list-scroll\">\n    <ul class=\"str-chat__ul\">\n      <li\n        *ngIf=\"mode === 'thread' && parentMessage\"\n        #parentMessageElement\n        data-testid=\"parent-message\"\n        class=\"str-chat__parent-message-li\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            messageTemplateContainer;\n            context: { message: parentMessage, index: 'parent' }\n          \"\n        ></ng-container>\n        <div data-testid=\"reply-count\" class=\"str-chat__thread-start\">\n          {{parentMessage.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}\n          replies' | translate:replyCountParam)}}\n        </div>\n      </li>\n      <ng-container *ngIf=\"mode === 'thread' && isEmpty && emptyListTemplate\">\n        <ng-container *ngTemplateOutlet=\"emptyListTemplate\"></ng-container>\n      </ng-container>\n      <stream-loading-indicator-placeholder\n        *ngIf=\"\n          ((loadingState === 'loading-top' && direction === 'bottom-to-top') ||\n            (loadingState === 'loading-bottom' &&\n              direction === 'top-to-bottom')) &&\n            displayLoadingIndicator;\n          else loadingIndicatorPlaceholder\n        \"\n        data-testid=\"top-loading-indicator\"\n      ></stream-loading-indicator-placeholder>\n      <ng-container *ngIf=\"messages$ | async as messages\">\n        <ng-container\n          *ngFor=\"\n            let message of messages;\n            let i = index;\n            let isFirst = first;\n            let isLast = last;\n            trackBy: trackByMessageId\n          \"\n        >\n          <ng-container *ngIf=\"isFirst\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                dateSeparator;\n                context: {\n                  date: message.created_at,\n                  parsedDate: parseDate(message.created_at)\n                }\n              \"\n            ></ng-container>\n          </ng-container>\n          <li\n            tabindex=\"0\"\n            data-testclass=\"message\"\n            class=\"str-chat__li str-chat__li--{{ groupStyles[i] }}\"\n            id=\"{{ message.id }}\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                messageTemplateContainer;\n                context: { message: message, index: i }\n              \"\n            ></ng-container>\n          </li>\n          <ng-container\n            *ngIf=\"\n              (lastReadMessageId === message?.id &&\n                direction === 'bottom-to-top') ||\n              (direction === 'top-to-bottom' &&\n                lastReadMessageId === messages[i + 1]?.id)\n            \"\n          >\n            <li\n              *ngIf=\"displayUnreadSeparator\"\n              id=\"stream-chat-new-message-indicator\"\n              data-testid=\"new-messages-indicator\"\n              class=\"str-chat__li str-chat__unread-messages-separator-wrapper\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  customnewMessagesIndicatorTemplate ||\n                    defaultNewMessagesIndicator;\n                  context: { unreadCount: unreadCount }\n                \"\n              ></ng-container>\n            </li>\n          </ng-container>\n          <ng-container *ngIf=\"isNextMessageOnSeparateDate[i]\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                dateSeparator;\n                context: {\n                  date: messages[i + 1].created_at,\n                  parsedDate: parseDate(messages[i + 1].created_at)\n                }\n              \"\n            ></ng-container>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n      <stream-loading-indicator-placeholder\n        *ngIf=\"\n          ((loadingState === 'loading-bottom' &&\n            direction === 'bottom-to-top') ||\n            (loadingState === 'loading-top' &&\n              direction === 'top-to-bottom')) &&\n            displayLoadingIndicator;\n          else loadingIndicatorPlaceholder\n        \"\n        data-testid=\"bottom-loading-indicator\"\n      ></stream-loading-indicator-placeholder>\n      <ng-template #loadingIndicatorPlaceholder>\n        <div class=\"str-chat__loading-indicator-placeholder\"></div>\n      </ng-template>\n    </ul>\n    <ng-template #defaultTypingIndicator let-usersTyping$=\"usersTyping$\">\n      <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n      <ng-container *ngIf=\"$any(usersTyping$ | async) as users\">\n        <div\n          *ngIf=\"users.length > 0\"\n          data-testid=\"typing-indicator\"\n          class=\"str-chat__typing-indicator str-chat__typing-indicator--typing\"\n        >\n          <div class=\"str-chat__typing-indicator__dots\">\n            <span class=\"str-chat__typing-indicator__dot\"></span>\n            <span class=\"str-chat__typing-indicator__dot\"></span>\n            <span class=\"str-chat__typing-indicator__dot\"></span>\n          </div>\n          <div\n            data-testid=\"typing-users\"\n            class=\"str-chat__typing-indicator__users\"\n          >\n            {{\n              users.length === 1\n                ? (\"streamChat.user is typing\"\n                  | translate : { user: getTypingIndicatorText(users) })\n                : (\"streamChat.users are typing\"\n                  | translate : { users: getTypingIndicatorText(users) })\n            }}\n          </div>\n        </div>\n      </ng-container>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        typingIndicatorTemplate || defaultTypingIndicator;\n        context: getTypingIndicatorContext()\n      \"\n    ></ng-container>\n  </div>\n</div>\n<div class=\"str-chat__jump-to-latest-message\">\n  <button\n    *ngIf=\"isUserScrolled && isJumpToLatestButtonVisible\"\n    data-testid=\"scroll-to-latest\"\n    class=\"str-chat__message-notification-scroll-to-latest str-chat__message-notification-scroll-to-latest-right str-chat__circle-fab\"\n    (keyup.enter)=\"jumpToLatestMessage()\"\n    (click)=\"jumpToLatestMessage()\"\n  >\n    <stream-icon\n      class=\"str-chat__jump-to-latest-icon str-chat__circle-fab-icon\"\n      [icon]=\"direction === 'bottom-to-top' ? 'arrow-down' : 'arrow-up'\"\n    ></stream-icon>\n    <div\n      *ngIf=\"newMessageCountWhileBeingScrolled > 0\"\n      class=\"str-chat__message-notification str-chat__message-notification-scroll-to-latest-unread-count str-chat__jump-to-latest-unread-count\"\n    >\n      {{ newMessageCountWhileBeingScrolled }}\n    </div>\n  </button>\n</div>\n\n<ng-template #messageTemplateContainer let-message=\"message\" let-index=\"index\">\n  <ng-template\n    #defaultMessageTemplate\n    let-messageInput=\"message\"\n    let-isLastSentMessage=\"isLastSentMessage\"\n    let-enabledMessageActions=\"enabledMessageActions\"\n    let-mode=\"mode\"\n    let-isHighlighted=\"isHighlighted\"\n    let-scroll$=\"scroll$\"\n  >\n    <stream-message\n      [message]=\"messageInput\"\n      [isLastSentMessage]=\"isLastSentMessage\"\n      [enabledMessageActions]=\"enabledMessageActions\"\n      [mode]=\"mode\"\n      [isHighlighted]=\"isHighlighted\"\n      [scroll$]=\"scroll$\"\n    ></stream-message>\n  </ng-template>\n  <ng-container\n    *ngTemplateOutlet=\"\n      messageTemplate || defaultMessageTemplate;\n      context: {\n        message: message,\n        isLastSentMessage: !!(\n          lastSentMessageId && message?.id === lastSentMessageId\n        ),\n        enabledMessageActions: enabledMessageActions,\n        mode: mode,\n        isHighlighted: message?.id === highlightedMessageId,\n        scroll$: scroll$\n      }\n    \"\n  ></ng-container>\n</ng-template>\n\n<ng-template #dateSeparator let-date=\"date\" let-parsedDate=\"parsedDate\">\n  <ng-container *ngIf=\"displayDateSeparator\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        customDateSeparatorTemplate || defaultDateSeparator;\n        context: {\n          date: date,\n          parsedDate: parsedDate\n        }\n      \"\n    ></ng-container>\n  </ng-container>\n\n  <ng-template\n    #defaultDateSeparator\n    let-date=\"date\"\n    let-parsedDate=\"parsedDate\"\n  >\n    <div data-testid=\"date-separator\" class=\"str-chat__date-separator\">\n      <hr\n        *ngIf=\"\n          dateSeparatorTextPos === 'right' || dateSeparatorTextPos === 'center'\n        \"\n        class=\"str-chat__date-separator-line\"\n      />\n      <div class=\"str-chat__date-separator-date\">\n        {{ parsedDate }}\n      </div>\n      <hr\n        *ngIf=\"\n          dateSeparatorTextPos === 'left' || dateSeparatorTextPos === 'center'\n        \"\n        class=\"str-chat__date-separator-line\"\n      />\n    </div>\n  </ng-template>\n</ng-template>\n\n<ng-template #defaultNewMessagesIndicator let-unreadCount=\"unreadCount\">\n  <div class=\"str-chat__unread-messages-separator\">\n    <ng-container\n      *ngIf=\"\n        unreadCount > 0 && !hideUnreadCountForNotificationAndIndicator;\n        else noUnreadCount\n      \"\n    >\n      {{\n        (unreadCount === 1\n          ? \"streamChat.\\{\\{count\\}\\} unread message\"\n          : \"streamChat.\\{\\{count\\}\\} unread messages\"\n        ) | translate : { count: unreadCount }\n      }}\n    </ng-container>\n    <ng-template #noUnreadCount>\n      {{ \"streamChat.Unread messages\" | translate }}\n    </ng-template>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "stream-icon", inputs: ["icon"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "component", type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder" }, { kind: "component", type: MessageComponent, selector: "stream-message", inputs: ["message", "enabledMessageActions", "isLastSentMessage", "mode", "isHighlighted", "scroll$"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MessageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MessageListComponent, selector: "stream-message-list", inputs: { mode: "mode", direction: "direction", hideJumpToLatestButtonDuringScroll: "hideJumpToLatestButtonDuringScroll", displayDateSeparator: "displayDateSeparator", displayUnreadSeparator: "displayUnreadSeparator", dateSeparatorTextPos: "dateSeparatorTextPos", openMessageListAt: "openMessageListAt", hideUnreadCountForNotificationAndIndicator: "hideUnreadCountForNotificationAndIndicator", displayLoadingIndicator: "displayLoadingIndicator" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "parentMessageElement", first: true, predicate: ["parentMessageElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container\n  *ngIf=\"\n    lastReadMessageId &&\n    isUnreadNotificationVisible &&\n    openMessageListAt === 'last-message' &&\n    displayUnreadSeparator\n  \"\n>\n  <ng-container\n    *ngTemplateOutlet=\"\n      customnewMessagesNotificationTemplate ||\n        defaultUnreadMessagesNotification;\n      context: {\n        unreadCount: unreadCount,\n        onDismiss: messageNotificationDismissClicked,\n        onJump: messageNotificationJumpClicked\n      }\n    \"\n  ></ng-container>\n</ng-container>\n<ng-template\n  #defaultUnreadMessagesNotification\n  let-unreadCount=\"unreadCount\"\n  let-onDismiss=\"onDismiss\"\n  let-onJump=\"onJump\"\n>\n  <div\n    class=\"str-chat__unread-messages-notification\"\n    data-testid=\"unread-messages-notification\"\n  >\n    <button\n      data-testid=\"unread-messages-notification-jump-to-message\"\n      (click)=\"onJump()\"\n    >\n      <ng-container\n        *ngIf=\"\n          unreadCount > 0 && !hideUnreadCountForNotificationAndIndicator;\n          else noUnreadCount\n        \"\n      >\n        {{\n          (unreadCount === 1\n            ? \"streamChat.\\{\\{count\\}\\} unread message\"\n            : \"streamChat.\\{\\{count\\}\\} unread messages\"\n          ) | translate : { count: unreadCount }\n        }}\n      </ng-container>\n      <ng-template #noUnreadCount>\n        {{ \"streamChat.Unread messages\" | translate }}\n      </ng-template>\n    </button>\n    <button\n      data-testid=\"unread-messages-notification-dismiss\"\n      (click)=\"onDismiss()\"\n    >\n      <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n    </button>\n  </div>\n</ng-template>\n<div #scrollContainer data-testid=\"scroll-container\" class=\"str-chat__list\">\n  <ng-container *ngIf=\"mode === 'main' && isEmpty && emptyListTemplate\">\n    <ng-container *ngTemplateOutlet=\"emptyListTemplate\"></ng-container>\n  </ng-container>\n  <div class=\"str-chat__reverse-infinite-scroll str-chat__message-list-scroll\">\n    <ul class=\"str-chat__ul\">\n      <li\n        *ngIf=\"mode === 'thread' && parentMessage\"\n        #parentMessageElement\n        data-testid=\"parent-message\"\n        class=\"str-chat__parent-message-li\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            messageTemplateContainer;\n            context: { message: parentMessage, index: 'parent' }\n          \"\n        ></ng-container>\n        <div data-testid=\"reply-count\" class=\"str-chat__thread-start\">\n          {{parentMessage.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}\n          replies' | translate:replyCountParam)}}\n        </div>\n      </li>\n      <ng-container *ngIf=\"mode === 'thread' && isEmpty && emptyListTemplate\">\n        <ng-container *ngTemplateOutlet=\"emptyListTemplate\"></ng-container>\n      </ng-container>\n      <stream-loading-indicator-placeholder\n        *ngIf=\"\n          ((loadingState === 'loading-top' && direction === 'bottom-to-top') ||\n            (loadingState === 'loading-bottom' &&\n              direction === 'top-to-bottom')) &&\n            displayLoadingIndicator;\n          else loadingIndicatorPlaceholder\n        \"\n        data-testid=\"top-loading-indicator\"\n      ></stream-loading-indicator-placeholder>\n      <ng-container *ngIf=\"messages$ | async as messages\">\n        <ng-container\n          *ngFor=\"\n            let message of messages;\n            let i = index;\n            let isFirst = first;\n            let isLast = last;\n            trackBy: trackByMessageId\n          \"\n        >\n          <ng-container *ngIf=\"isFirst\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                dateSeparator;\n                context: {\n                  date: message.created_at,\n                  parsedDate: parseDate(message.created_at)\n                }\n              \"\n            ></ng-container>\n          </ng-container>\n          <li\n            tabindex=\"0\"\n            data-testclass=\"message\"\n            class=\"str-chat__li str-chat__li--{{ groupStyles[i] }}\"\n            id=\"{{ message.id }}\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                messageTemplateContainer;\n                context: { message: message, index: i }\n              \"\n            ></ng-container>\n          </li>\n          <ng-container\n            *ngIf=\"\n              (lastReadMessageId === message?.id &&\n                direction === 'bottom-to-top') ||\n              (direction === 'top-to-bottom' &&\n                lastReadMessageId === messages[i + 1]?.id)\n            \"\n          >\n            <li\n              *ngIf=\"displayUnreadSeparator\"\n              id=\"stream-chat-new-message-indicator\"\n              data-testid=\"new-messages-indicator\"\n              class=\"str-chat__li str-chat__unread-messages-separator-wrapper\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  customnewMessagesIndicatorTemplate ||\n                    defaultNewMessagesIndicator;\n                  context: { unreadCount: unreadCount }\n                \"\n              ></ng-container>\n            </li>\n          </ng-container>\n          <ng-container *ngIf=\"isNextMessageOnSeparateDate[i]\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                dateSeparator;\n                context: {\n                  date: messages[i + 1].created_at,\n                  parsedDate: parseDate(messages[i + 1].created_at)\n                }\n              \"\n            ></ng-container>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n      <stream-loading-indicator-placeholder\n        *ngIf=\"\n          ((loadingState === 'loading-bottom' &&\n            direction === 'bottom-to-top') ||\n            (loadingState === 'loading-top' &&\n              direction === 'top-to-bottom')) &&\n            displayLoadingIndicator;\n          else loadingIndicatorPlaceholder\n        \"\n        data-testid=\"bottom-loading-indicator\"\n      ></stream-loading-indicator-placeholder>\n      <ng-template #loadingIndicatorPlaceholder>\n        <div class=\"str-chat__loading-indicator-placeholder\"></div>\n      </ng-template>\n    </ul>\n    <ng-template #defaultTypingIndicator let-usersTyping$=\"usersTyping$\">\n      <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n      <ng-container *ngIf=\"$any(usersTyping$ | async) as users\">\n        <div\n          *ngIf=\"users.length > 0\"\n          data-testid=\"typing-indicator\"\n          class=\"str-chat__typing-indicator str-chat__typing-indicator--typing\"\n        >\n          <div class=\"str-chat__typing-indicator__dots\">\n            <span class=\"str-chat__typing-indicator__dot\"></span>\n            <span class=\"str-chat__typing-indicator__dot\"></span>\n            <span class=\"str-chat__typing-indicator__dot\"></span>\n          </div>\n          <div\n            data-testid=\"typing-users\"\n            class=\"str-chat__typing-indicator__users\"\n          >\n            {{\n              users.length === 1\n                ? (\"streamChat.user is typing\"\n                  | translate : { user: getTypingIndicatorText(users) })\n                : (\"streamChat.users are typing\"\n                  | translate : { users: getTypingIndicatorText(users) })\n            }}\n          </div>\n        </div>\n      </ng-container>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        typingIndicatorTemplate || defaultTypingIndicator;\n        context: getTypingIndicatorContext()\n      \"\n    ></ng-container>\n  </div>\n</div>\n<div class=\"str-chat__jump-to-latest-message\">\n  <button\n    *ngIf=\"isUserScrolled && isJumpToLatestButtonVisible\"\n    data-testid=\"scroll-to-latest\"\n    class=\"str-chat__message-notification-scroll-to-latest str-chat__message-notification-scroll-to-latest-right str-chat__circle-fab\"\n    (keyup.enter)=\"jumpToLatestMessage()\"\n    (click)=\"jumpToLatestMessage()\"\n  >\n    <stream-icon\n      class=\"str-chat__jump-to-latest-icon str-chat__circle-fab-icon\"\n      [icon]=\"direction === 'bottom-to-top' ? 'arrow-down' : 'arrow-up'\"\n    ></stream-icon>\n    <div\n      *ngIf=\"newMessageCountWhileBeingScrolled > 0\"\n      class=\"str-chat__message-notification str-chat__message-notification-scroll-to-latest-unread-count str-chat__jump-to-latest-unread-count\"\n    >\n      {{ newMessageCountWhileBeingScrolled }}\n    </div>\n  </button>\n</div>\n\n<ng-template #messageTemplateContainer let-message=\"message\" let-index=\"index\">\n  <ng-template\n    #defaultMessageTemplate\n    let-messageInput=\"message\"\n    let-isLastSentMessage=\"isLastSentMessage\"\n    let-enabledMessageActions=\"enabledMessageActions\"\n    let-mode=\"mode\"\n    let-isHighlighted=\"isHighlighted\"\n    let-scroll$=\"scroll$\"\n  >\n    <stream-message\n      [message]=\"messageInput\"\n      [isLastSentMessage]=\"isLastSentMessage\"\n      [enabledMessageActions]=\"enabledMessageActions\"\n      [mode]=\"mode\"\n      [isHighlighted]=\"isHighlighted\"\n      [scroll$]=\"scroll$\"\n    ></stream-message>\n  </ng-template>\n  <ng-container\n    *ngTemplateOutlet=\"\n      messageTemplate || defaultMessageTemplate;\n      context: {\n        message: message,\n        isLastSentMessage: !!(\n          lastSentMessageId && message?.id === lastSentMessageId\n        ),\n        enabledMessageActions: enabledMessageActions,\n        mode: mode,\n        isHighlighted: message?.id === highlightedMessageId,\n        scroll$: scroll$\n      }\n    \"\n  ></ng-container>\n</ng-template>\n\n<ng-template #dateSeparator let-date=\"date\" let-parsedDate=\"parsedDate\">\n  <ng-container *ngIf=\"displayDateSeparator\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        customDateSeparatorTemplate || defaultDateSeparator;\n        context: {\n          date: date,\n          parsedDate: parsedDate\n        }\n      \"\n    ></ng-container>\n  </ng-container>\n\n  <ng-template\n    #defaultDateSeparator\n    let-date=\"date\"\n    let-parsedDate=\"parsedDate\"\n  >\n    <div data-testid=\"date-separator\" class=\"str-chat__date-separator\">\n      <hr\n        *ngIf=\"\n          dateSeparatorTextPos === 'right' || dateSeparatorTextPos === 'center'\n        \"\n        class=\"str-chat__date-separator-line\"\n      />\n      <div class=\"str-chat__date-separator-date\">\n        {{ parsedDate }}\n      </div>\n      <hr\n        *ngIf=\"\n          dateSeparatorTextPos === 'left' || dateSeparatorTextPos === 'center'\n        \"\n        class=\"str-chat__date-separator-line\"\n      />\n    </div>\n  </ng-template>\n</ng-template>\n\n<ng-template #defaultNewMessagesIndicator let-unreadCount=\"unreadCount\">\n  <div class=\"str-chat__unread-messages-separator\">\n    <ng-container\n      *ngIf=\"\n        unreadCount > 0 && !hideUnreadCountForNotificationAndIndicator;\n        else noUnreadCount\n      \"\n    >\n      {{\n        (unreadCount === 1\n          ? \"streamChat.\\{\\{count\\}\\} unread message\"\n          : \"streamChat.\\{\\{count\\}\\} unread messages\"\n        ) | translate : { count: unreadCount }\n      }}\n    </ng-container>\n    <ng-template #noUnreadCount>\n      {{ \"streamChat.Unread messages\" | translate }}\n    </ng-template>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "stream-icon", inputs: ["icon"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "component", type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder" }, { kind: "component", type: MessageComponent, selector: "stream-message", inputs: ["message", "enabledMessageActions", "isLastSentMessage", "mode", "isHighlighted", "scroll$"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'stream-message-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container\n  *ngIf=\"\n    lastReadMessageId &&\n    isUnreadNotificationVisible &&\n    openMessageListAt === 'last-message' &&\n    displayUnreadSeparator\n  \"\n>\n  <ng-container\n    *ngTemplateOutlet=\"\n      customnewMessagesNotificationTemplate ||\n        defaultUnreadMessagesNotification;\n      context: {\n        unreadCount: unreadCount,\n        onDismiss: messageNotificationDismissClicked,\n        onJump: messageNotificationJumpClicked\n      }\n    \"\n  ></ng-container>\n</ng-container>\n<ng-template\n  #defaultUnreadMessagesNotification\n  let-unreadCount=\"unreadCount\"\n  let-onDismiss=\"onDismiss\"\n  let-onJump=\"onJump\"\n>\n  <div\n    class=\"str-chat__unread-messages-notification\"\n    data-testid=\"unread-messages-notification\"\n  >\n    <button\n      data-testid=\"unread-messages-notification-jump-to-message\"\n      (click)=\"onJump()\"\n    >\n      <ng-container\n        *ngIf=\"\n          unreadCount > 0 && !hideUnreadCountForNotificationAndIndicator;\n          else noUnreadCount\n        \"\n      >\n        {{\n          (unreadCount === 1\n            ? \"streamChat.\\{\\{count\\}\\} unread message\"\n            : \"streamChat.\\{\\{count\\}\\} unread messages\"\n          ) | translate : { count: unreadCount }\n        }}\n      </ng-container>\n      <ng-template #noUnreadCount>\n        {{ \"streamChat.Unread messages\" | translate }}\n      </ng-template>\n    </button>\n    <button\n      data-testid=\"unread-messages-notification-dismiss\"\n      (click)=\"onDismiss()\"\n    >\n      <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n    </button>\n  </div>\n</ng-template>\n<div #scrollContainer data-testid=\"scroll-container\" class=\"str-chat__list\">\n  <ng-container *ngIf=\"mode === 'main' && isEmpty && emptyListTemplate\">\n    <ng-container *ngTemplateOutlet=\"emptyListTemplate\"></ng-container>\n  </ng-container>\n  <div class=\"str-chat__reverse-infinite-scroll str-chat__message-list-scroll\">\n    <ul class=\"str-chat__ul\">\n      <li\n        *ngIf=\"mode === 'thread' && parentMessage\"\n        #parentMessageElement\n        data-testid=\"parent-message\"\n        class=\"str-chat__parent-message-li\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            messageTemplateContainer;\n            context: { message: parentMessage, index: 'parent' }\n          \"\n        ></ng-container>\n        <div data-testid=\"reply-count\" class=\"str-chat__thread-start\">\n          {{parentMessage.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}\n          replies' | translate:replyCountParam)}}\n        </div>\n      </li>\n      <ng-container *ngIf=\"mode === 'thread' && isEmpty && emptyListTemplate\">\n        <ng-container *ngTemplateOutlet=\"emptyListTemplate\"></ng-container>\n      </ng-container>\n      <stream-loading-indicator-placeholder\n        *ngIf=\"\n          ((loadingState === 'loading-top' && direction === 'bottom-to-top') ||\n            (loadingState === 'loading-bottom' &&\n              direction === 'top-to-bottom')) &&\n            displayLoadingIndicator;\n          else loadingIndicatorPlaceholder\n        \"\n        data-testid=\"top-loading-indicator\"\n      ></stream-loading-indicator-placeholder>\n      <ng-container *ngIf=\"messages$ | async as messages\">\n        <ng-container\n          *ngFor=\"\n            let message of messages;\n            let i = index;\n            let isFirst = first;\n            let isLast = last;\n            trackBy: trackByMessageId\n          \"\n        >\n          <ng-container *ngIf=\"isFirst\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                dateSeparator;\n                context: {\n                  date: message.created_at,\n                  parsedDate: parseDate(message.created_at)\n                }\n              \"\n            ></ng-container>\n          </ng-container>\n          <li\n            tabindex=\"0\"\n            data-testclass=\"message\"\n            class=\"str-chat__li str-chat__li--{{ groupStyles[i] }}\"\n            id=\"{{ message.id }}\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                messageTemplateContainer;\n                context: { message: message, index: i }\n              \"\n            ></ng-container>\n          </li>\n          <ng-container\n            *ngIf=\"\n              (lastReadMessageId === message?.id &&\n                direction === 'bottom-to-top') ||\n              (direction === 'top-to-bottom' &&\n                lastReadMessageId === messages[i + 1]?.id)\n            \"\n          >\n            <li\n              *ngIf=\"displayUnreadSeparator\"\n              id=\"stream-chat-new-message-indicator\"\n              data-testid=\"new-messages-indicator\"\n              class=\"str-chat__li str-chat__unread-messages-separator-wrapper\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  customnewMessagesIndicatorTemplate ||\n                    defaultNewMessagesIndicator;\n                  context: { unreadCount: unreadCount }\n                \"\n              ></ng-container>\n            </li>\n          </ng-container>\n          <ng-container *ngIf=\"isNextMessageOnSeparateDate[i]\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                dateSeparator;\n                context: {\n                  date: messages[i + 1].created_at,\n                  parsedDate: parseDate(messages[i + 1].created_at)\n                }\n              \"\n            ></ng-container>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n      <stream-loading-indicator-placeholder\n        *ngIf=\"\n          ((loadingState === 'loading-bottom' &&\n            direction === 'bottom-to-top') ||\n            (loadingState === 'loading-top' &&\n              direction === 'top-to-bottom')) &&\n            displayLoadingIndicator;\n          else loadingIndicatorPlaceholder\n        \"\n        data-testid=\"bottom-loading-indicator\"\n      ></stream-loading-indicator-placeholder>\n      <ng-template #loadingIndicatorPlaceholder>\n        <div class=\"str-chat__loading-indicator-placeholder\"></div>\n      </ng-template>\n    </ul>\n    <ng-template #defaultTypingIndicator let-usersTyping$=\"usersTyping$\">\n      <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n      <ng-container *ngIf=\"$any(usersTyping$ | async) as users\">\n        <div\n          *ngIf=\"users.length > 0\"\n          data-testid=\"typing-indicator\"\n          class=\"str-chat__typing-indicator str-chat__typing-indicator--typing\"\n        >\n          <div class=\"str-chat__typing-indicator__dots\">\n            <span class=\"str-chat__typing-indicator__dot\"></span>\n            <span class=\"str-chat__typing-indicator__dot\"></span>\n            <span class=\"str-chat__typing-indicator__dot\"></span>\n          </div>\n          <div\n            data-testid=\"typing-users\"\n            class=\"str-chat__typing-indicator__users\"\n          >\n            {{\n              users.length === 1\n                ? (\"streamChat.user is typing\"\n                  | translate : { user: getTypingIndicatorText(users) })\n                : (\"streamChat.users are typing\"\n                  | translate : { users: getTypingIndicatorText(users) })\n            }}\n          </div>\n        </div>\n      </ng-container>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        typingIndicatorTemplate || defaultTypingIndicator;\n        context: getTypingIndicatorContext()\n      \"\n    ></ng-container>\n  </div>\n</div>\n<div class=\"str-chat__jump-to-latest-message\">\n  <button\n    *ngIf=\"isUserScrolled && isJumpToLatestButtonVisible\"\n    data-testid=\"scroll-to-latest\"\n    class=\"str-chat__message-notification-scroll-to-latest str-chat__message-notification-scroll-to-latest-right str-chat__circle-fab\"\n    (keyup.enter)=\"jumpToLatestMessage()\"\n    (click)=\"jumpToLatestMessage()\"\n  >\n    <stream-icon\n      class=\"str-chat__jump-to-latest-icon str-chat__circle-fab-icon\"\n      [icon]=\"direction === 'bottom-to-top' ? 'arrow-down' : 'arrow-up'\"\n    ></stream-icon>\n    <div\n      *ngIf=\"newMessageCountWhileBeingScrolled > 0\"\n      class=\"str-chat__message-notification str-chat__message-notification-scroll-to-latest-unread-count str-chat__jump-to-latest-unread-count\"\n    >\n      {{ newMessageCountWhileBeingScrolled }}\n    </div>\n  </button>\n</div>\n\n<ng-template #messageTemplateContainer let-message=\"message\" let-index=\"index\">\n  <ng-template\n    #defaultMessageTemplate\n    let-messageInput=\"message\"\n    let-isLastSentMessage=\"isLastSentMessage\"\n    let-enabledMessageActions=\"enabledMessageActions\"\n    let-mode=\"mode\"\n    let-isHighlighted=\"isHighlighted\"\n    let-scroll$=\"scroll$\"\n  >\n    <stream-message\n      [message]=\"messageInput\"\n      [isLastSentMessage]=\"isLastSentMessage\"\n      [enabledMessageActions]=\"enabledMessageActions\"\n      [mode]=\"mode\"\n      [isHighlighted]=\"isHighlighted\"\n      [scroll$]=\"scroll$\"\n    ></stream-message>\n  </ng-template>\n  <ng-container\n    *ngTemplateOutlet=\"\n      messageTemplate || defaultMessageTemplate;\n      context: {\n        message: message,\n        isLastSentMessage: !!(\n          lastSentMessageId && message?.id === lastSentMessageId\n        ),\n        enabledMessageActions: enabledMessageActions,\n        mode: mode,\n        isHighlighted: message?.id === highlightedMessageId,\n        scroll$: scroll$\n      }\n    \"\n  ></ng-container>\n</ng-template>\n\n<ng-template #dateSeparator let-date=\"date\" let-parsedDate=\"parsedDate\">\n  <ng-container *ngIf=\"displayDateSeparator\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        customDateSeparatorTemplate || defaultDateSeparator;\n        context: {\n          date: date,\n          parsedDate: parsedDate\n        }\n      \"\n    ></ng-container>\n  </ng-container>\n\n  <ng-template\n    #defaultDateSeparator\n    let-date=\"date\"\n    let-parsedDate=\"parsedDate\"\n  >\n    <div data-testid=\"date-separator\" class=\"str-chat__date-separator\">\n      <hr\n        *ngIf=\"\n          dateSeparatorTextPos === 'right' || dateSeparatorTextPos === 'center'\n        \"\n        class=\"str-chat__date-separator-line\"\n      />\n      <div class=\"str-chat__date-separator-date\">\n        {{ parsedDate }}\n      </div>\n      <hr\n        *ngIf=\"\n          dateSeparatorTextPos === 'left' || dateSeparatorTextPos === 'center'\n        \"\n        class=\"str-chat__date-separator-line\"\n      />\n    </div>\n  </ng-template>\n</ng-template>\n\n<ng-template #defaultNewMessagesIndicator let-unreadCount=\"unreadCount\">\n  <div class=\"str-chat__unread-messages-separator\">\n    <ng-container\n      *ngIf=\"\n        unreadCount > 0 && !hideUnreadCountForNotificationAndIndicator;\n        else noUnreadCount\n      \"\n    >\n      {{\n        (unreadCount === 1\n          ? \"streamChat.\\{\\{count\\}\\} unread message\"\n          : \"streamChat.\\{\\{count\\}\\} unread messages\"\n        ) | translate : { count: unreadCount }\n      }}\n    </ng-container>\n    <ng-template #noUnreadCount>\n      {{ \"streamChat.Unread messages\" | translate }}\n    </ng-template>\n  </div>\n</ng-template>\n" }]
@@ -8298,7 +8409,7 @@ class ThreadComponent {
     }
 }
 ThreadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ThreadComponent, deps: [{ token: CustomTemplatesService }, { token: ChannelService }, { token: ChatClientService }], target: i0.ɵɵFactoryTarget.Component });
-ThreadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ThreadComponent, selector: "stream-thread", host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<div class=\"str-chat__thread-container\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.threadHeaderTemplate$ | async) ||\n        defaultThreadHeader;\n      context: getThreadHeaderContext()\n    \"\n  ></ng-container>\n  <ng-content></ng-content>\n</div>\n\n<ng-template\n  #defaultThreadHeader\n  let-parentMessage=\"parentMessage\"\n  let-closeThreadHandler=\"closeThreadHandler\"\n>\n  <div class=\"str-chat__thread-header\">\n    <div class=\"str-chat__thread-header-details\">\n      <div class=\"str-chat__thread-header-name\" translate>\n        streamChat.Thread\n      </div>\n      <div\n        class=\"str-chat__thread-header-channel-name\"\n        data-testid=\"channel-name\"\n      >\n        {{ channelName }}\n      </div>\n    </div>\n    <button\n      class=\"str-chat__square-button str-chat__close-thread-button\"\n      data-testid=\"close-button\"\n      (click)=\"closeThreadHandler()\"\n    >\n      <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n    </button>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i10.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
+ThreadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ThreadComponent, selector: "stream-thread", host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<div class=\"str-chat__thread-container\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.threadHeaderTemplate$ | async) ||\n        defaultThreadHeader;\n      context: getThreadHeaderContext()\n    \"\n  ></ng-container>\n  <ng-content></ng-content>\n</div>\n\n<ng-template\n  #defaultThreadHeader\n  let-parentMessage=\"parentMessage\"\n  let-closeThreadHandler=\"closeThreadHandler\"\n>\n  <div class=\"str-chat__thread-header\">\n    <div class=\"str-chat__thread-header-details\">\n      <div class=\"str-chat__thread-header-name\" translate>\n        streamChat.Thread\n      </div>\n      <div\n        class=\"str-chat__thread-header-channel-name\"\n        data-testid=\"channel-name\"\n      >\n        {{ channelName }}\n      </div>\n    </div>\n    <button\n      class=\"str-chat__square-button str-chat__close-thread-button\"\n      data-testid=\"close-button\"\n      (click)=\"closeThreadHandler()\"\n    >\n      <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n    </button>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ThreadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'stream-thread', template: "<div class=\"str-chat__thread-container\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.threadHeaderTemplate$ | async) ||\n        defaultThreadHeader;\n      context: getThreadHeaderContext()\n    \"\n  ></ng-container>\n  <ng-content></ng-content>\n</div>\n\n<ng-template\n  #defaultThreadHeader\n  let-parentMessage=\"parentMessage\"\n  let-closeThreadHandler=\"closeThreadHandler\"\n>\n  <div class=\"str-chat__thread-header\">\n    <div class=\"str-chat__thread-header-details\">\n      <div class=\"str-chat__thread-header-name\" translate>\n        streamChat.Thread\n      </div>\n      <div\n        class=\"str-chat__thread-header-channel-name\"\n        data-testid=\"channel-name\"\n      >\n        {{ channelName }}\n      </div>\n    </div>\n    <button\n      class=\"str-chat__square-button str-chat__close-thread-button\"\n      data-testid=\"close-button\"\n      (click)=\"closeThreadHandler()\"\n    >\n      <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n    </button>\n  </div>\n</ng-template>\n" }]