stream-chat-angular 5.0.0-v5.21 → 5.0.0-v5.23

package/fesm2020/stream-chat-angular.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, Input, InjectionToken, EventEmitter, Directive, Output, ViewChild, HostBinding, Inject, ChangeDetectionStrategy, NgModule } from '@angular/core';
-import { BehaviorSubject, ReplaySubject, combineLatest, Subject, timer } from 'rxjs';
+import { Injectable, Component, Input, EventEmitter, Output, ViewChild, HostBinding, ChangeDetectionStrategy, InjectionToken, Directive, Inject, NgModule } from '@angular/core';
+import { BehaviorSubject, ReplaySubject, combineLatest, take as take$1, Subject, timer } from 'rxjs';
 import { StreamChat } from 'stream-chat';
 import { take, shareReplay, map, first, filter, tap, debounceTime, throttleTime } from 'rxjs/operators';
 import { v4 } from 'uuid';
@@ -8,18 +8,18 @@ import * as i10 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import prettybytes from 'pretty-bytes';
 import Dayjs from 'dayjs';
 import calendar from 'dayjs/plugin/calendar';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import emojiRegex from 'emoji-regex';
 import * as i8 from 'ngx-float-ui';
 import { NgxFloatUiModule } from 'ngx-float-ui';
+import prettybytes from 'pretty-bytes';
 import transliterate from '@stream-io/transliterate';
 import * as i8$1 from 'angular-mentions';
 import { MentionModule } from 'angular-mentions';
 
-const version = '5.0.0-v5.21';
+const version = '5.0.0-v5.23';
 
 /**
  * The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](../components/NotificationListComponent.mdx) component displays the currently active notifications.
@@ -2601,11 +2601,6 @@ class CustomTemplatesService {
          *
          */
         this.channelPreviewTemplate$ = new BehaviorSubject(undefined);
-        /**
-         * The message input template used when editing a message (instead of the [default message input](../components/MessageInputComponent.mdx))
-         *
-         */
-        this.messageInputTemplate$ = new BehaviorSubject(undefined);
         /**
          * The template used for displaying a [mention inside a message](../code-examples/mention-actions.mdx)
          *
@@ -2783,10 +2778,6 @@ class CustomTemplatesService {
          * The template to show if the thread message list is empty
          */
         this.emptyThreadMessageListPlaceholder$ = new BehaviorSubject(undefined);
-        /**
-         * The template used to display the [edit message form](../components/EditMessageFormComponent.mdx)
-         */
-        this.editMessageFormTemplate$ = new BehaviorSubject(undefined);
         /**
          * The template used to display the [message bounce prompt](../components/MessageBouncePromptComponent.mdx)
          */
@@ -3033,8 +3024,9 @@ class MessageActionsService {
                 actionLabelOrTranslationKey: 'streamChat.Copy text',
                 isVisible: (_, __, message) => {
                     const isClipboardSupported = navigator?.clipboard?.write !== undefined;
-                    if (!isClipboardSupported) {
-                        console.warn(`Clipboard API isn't available, please check security and browser requirements: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/write#security_considerations`);
+                    if (!isClipboardSupported && !this.hasDisplayedClipboardWarning) {
+                        console.warn(`[Stream Chat] Copy action is disabled because clipboard API isn't available, please check security and browser requirements: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/write#security_considerations`);
+                        this.hasDisplayedClipboardWarning = true;
                     }
                     return (!!message.text &&
                         (message.type === 'regular' || message.type === 'reply') &&
@@ -3066,6 +3058,23 @@ class MessageActionsService {
          * You can pass your own custom actions that will be displayed inside the built-in message actions component
          */
         this.customActions$ = new BehaviorSubject([]);
+        this.hasDisplayedClipboardWarning = false;
+        combineLatest([
+            this.messageToEdit$,
+            this.channelService.activeChannel$,
+        ]).subscribe(([messageToEdit, activeChannel]) => {
+            if (messageToEdit && !activeChannel) {
+                this.messageToEdit$.next(undefined);
+            }
+        });
+        combineLatest([
+            this.messageToEdit$,
+            this.channelService.activeParentMessageId$,
+        ]).subscribe(([messageToEdit, parentMessageId]) => {
+            if (messageToEdit && messageToEdit.parent_id !== parentMessageId) {
+                this.messageToEdit$.next(undefined);
+            }
+        });
     }
     /**
      * This method returns how many authorized actions are available to the given message
@@ -3348,150 +3357,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             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" }]
         }], ctorParameters: function () { return [{ type: CustomTemplatesService }, { type: NotificationService }, { type: ThemeService }]; } });
 
-const textareaInjectionToken = new InjectionToken('textareaInjectionToken');
-
-class TextareaDirective {
-    constructor(viewContainerRef) {
-        this.viewContainerRef = viewContainerRef;
-        this.value = '';
-        this.valueChange = new EventEmitter();
-        this.send = new EventEmitter();
-        this.userMentions = new EventEmitter();
-        this.subscriptions = [];
-        this.unpropagatedChanges = [];
-    }
-    ngOnChanges(changes) {
-        this.unpropagatedChanges.push(changes);
-        if (!this.componentRef) {
-            return;
-        }
-        if (changes.componentRef) {
-            this.subscriptions.forEach((s) => s.unsubscribe());
-            if (this.componentRef) {
-                this.subscriptions.push(this.componentRef.instance.valueChange.subscribe((value) => this.valueChange.next(value)));
-                this.subscriptions.push(this.componentRef.instance.send.subscribe((value) => this.send.next(value)));
-                if (this.componentRef.instance.userMentions) {
-                    this.subscriptions.push(this.componentRef.instance.userMentions.subscribe((value) => this.userMentions.next(value)));
-                }
-                this.componentRef.instance.areMentionsEnabled = this.areMentionsEnabled;
-                this.componentRef.instance.mentionScope = this.mentionScope;
-                this.componentRef.instance.value = this.value;
-                this.componentRef.instance.placeholder = this.placeholder;
-                this.componentRef.instance.inputMode = this.inputMode;
-                this.componentRef.instance.autoFocus = this.autoFocus;
-            }
-        }
-        if (changes.areMentionsEnabled) {
-            this.componentRef.instance.areMentionsEnabled = this.areMentionsEnabled;
-        }
-        if (changes.mentionScope) {
-            this.componentRef.instance.mentionScope = this.mentionScope;
-        }
-        if (changes.value) {
-            this.componentRef.instance.value = this.value;
-        }
-        if (changes.placeholder) {
-            this.componentRef.instance.placeholder = this.placeholder;
-        }
-        if (changes.inputMode) {
-            this.componentRef.instance.inputMode = this.inputMode;
-        }
-        if (changes.autoFocus) {
-            this.componentRef.instance.autoFocus = this.autoFocus;
-        }
-        // ngOnChanges not called for dynamic components since we don't use template binding
-        let changesToPropagate = {};
-        this.unpropagatedChanges.forEach((c) => (changesToPropagate = { ...changesToPropagate, ...c }));
-        // eslint-disable-next-line @angular-eslint/no-lifecycle-call
-        this.componentRef.instance.ngOnChanges?.(changesToPropagate);
-        this.unpropagatedChanges = [];
-    }
-}
-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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TextareaDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[streamTextarea]',
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { componentRef: [{
-                type: Input
-            }], areMentionsEnabled: [{
-                type: Input
-            }], mentionScope: [{
-                type: Input
-            }], inputMode: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], autoFocus: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }], send: [{
-                type: Output
-            }], userMentions: [{
-                type: Output
-            }] } });
-
-/**
- * If you have an emoji picker in your application, you can propagate the selected emoji to the textarea using this service, more info can be found in [custom emoji picker guide](../code-examples/emoji-picker.mdx)
- */
-class EmojiInputService {
-    constructor() {
-        /**
-         * If you have an emoji picker in your application, you can propagate the selected emoji to the textarea using this Subject, more info can be found in [custom emoji picker guide](../code-examples/emoji-picker.mdx)
-         */
-        this.emojiInput$ = new Subject();
-    }
-}
-EmojiInputService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: EmojiInputService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-EmojiInputService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: EmojiInputService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: EmojiInputService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return []; } });
-
-/**
- * The `MessageInputConfigService` is used to keep a consistent configuration among the different [`MessageInput`](../components/MessageInputComponent.mdx) components if your UI has more than one input component.
- */
-class MessageInputConfigService {
-    constructor() {
-        /**
-         * If file upload is enabled, the user can open a file selector from the input. Please note that the user also needs to have the necessary [channel capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript).
-         */
-        this.isFileUploadEnabled = true;
-        /**
-         * If true, users can mention other users in messages. You also [need to use the `AutocompleteTextarea`](../concepts/opt-in-architecture.mdx) for this feature to work.
-         */
-        this.areMentionsEnabled = true;
-        /**
-         * If `false`, users can only upload one attachment per message
-         */
-        this.isMultipleFileUploadEnabled = true;
-        /**
-         * The scope for user mentions, either members of the current channel of members of the application
-         */
-        this.mentionScope = 'channel';
-        /**
-         * In `desktop` mode the `Enter` key will trigger message sending, in `mobile` mode the `Enter` key will insert a new line to the message input.
-         */
-        this.inputMode = 'desktop';
-    }
-}
-MessageInputConfigService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageInputConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-MessageInputConfigService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageInputConfigService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageInputConfigService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return []; } });
-
 /**
  * The `Modal` component displays its content in an overlay. The modal can be closed with a close button, if the user clicks outside of the modal content, or if the escape button is pressed. The modal can also be closed from outside.
  */
@@ -3558,77 +3423,546 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             }] } });
 
 /**
- * This component can be used to visualize the wave bar of a voice recording
+ * The component watches for the [`channelService.bouncedMessage$` stream](../../services/ChannelService/#bouncedmessage) and opens the bounce modal if a message is emitted.
+ *
+ * To bounce messages, you need to set up [semantic filters for moderation](https://getstream.io/automated-moderation/docs/automod_configuration/?q=semantic%20filters).
  */
-class VoiceRecordingWavebarComponent {
-    constructor(ngZone, cdRef) {
-        this.ngZone = ngZone;
-        this.cdRef = cdRef;
-        /**
-         * The waveform data to visualize
-         */
-        this.waveFormData = [];
-        this.resampledWaveFormData = [];
-        this.progress = 0;
-        this.isDragging = false;
-        this.sampleSize = 40;
-        this.isViewInited = false;
-        this.upsample = () => {
-            if (this.sampleSize === this.waveFormData.length)
-                return this.waveFormData;
-            // eslint-disable-next-line  prefer-const
-            let [bucketSize, remainder] = this.divMod(this.sampleSize, this.waveFormData.length);
-            const result = [];
-            for (let i = 0; i < this.waveFormData.length; i++) {
-                const extra = remainder && remainder-- ? 1 : 0;
-                result.push(...Array(bucketSize + extra).fill(this.waveFormData[i]));
+class MessageBouncePromptComponent {
+    constructor(channelService, customTemplatesService, messageActionsService) {
+        this.channelService = channelService;
+        this.customTemplatesService = customTemplatesService;
+        this.messageActionsService = messageActionsService;
+        this.class = 'str-chat__message-bounce-prompt';
+        this.isModalOpen = false;
+        this.subscriptions = [];
+        this.messageBounceModalOpenChanged = (isOpen) => {
+            this.isModalOpen = isOpen;
+            if (!isOpen) {
+                this.message = undefined;
+                this.channelService.bouncedMessage$.next(undefined);
             }
-            return result;
-        };
-        this.getNextBucketMean = (data, currentBucketIndex, bucketSize) => {
-            const nextBucketStartIndex = Math.floor(currentBucketIndex * bucketSize) + 1;
-            let nextNextBucketStartIndex = Math.floor((currentBucketIndex + 1) * bucketSize) + 1;
-            nextNextBucketStartIndex =
-                nextNextBucketStartIndex < data.length
-                    ? nextNextBucketStartIndex
-                    : data.length;
-            return this.mean(data.slice(nextBucketStartIndex, nextNextBucketStartIndex));
-        };
-        this.mean = (values) => values.reduce((acc, value) => acc + value, 0) / values.length;
-        this.triangleAreaHeron = (a, b, c) => {
-            const s = (a + b + c) / 2;
-            return Math.sqrt(s * (s - a) * (s - b) * (s - c));
-        };
-        this.triangleBase = (a, b) => Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
-        this.divMod = (num, divisor) => {
-            return [Math.floor(num / divisor), num % divisor];
         };
+        this.subscriptions.push(this.channelService.bouncedMessage$.subscribe((m) => {
+            if (m !== this.message) {
+                this.message = m;
+                if (this.message) {
+                    this.isModalOpen = true;
+                }
+            }
+        }));
     }
-    ngOnInit() {
-        this.containerSizeChanged();
-        if (this.container?.nativeElement) {
-            this.ngZone.runOutsideAngular(() => {
-                new ResizeObserver(() => {
-                    this.containerSizeChanged();
-                }).observe(this.container.nativeElement);
-            });
-        }
+    ngOnDestroy() {
+        this.subscriptions.forEach((s) => s.unsubscribe());
     }
-    ngOnChanges(changes) {
-        if (changes.waveFormData) {
-            this.resampledWaveFormData =
-                this.waveFormData.length > this.sampleSize
-                    ? this.downsample()
-                    : this.upsample();
+    async resendMessage() {
+        this.isModalOpen = false;
+        await this.channelService.resendMessage(this.message);
+        this.message = undefined;
+        this.channelService.bouncedMessage$.next(undefined);
+    }
+    async deleteMessage() {
+        if (!this.message) {
+            return;
         }
-        if (changes.audioElement) {
-            this.ngZone.runOutsideAngular(() => {
-                this.audioElement?.addEventListener('timeupdate', () => {
-                    const progress = (this.audioElement?.currentTime || 0) / (this.duration || 0) || 0;
-                    if (Math.abs(progress - this.progress) >= 0.02) {
-                        this.ngZone.run(() => {
-                            this.progress = progress;
-                            this.cdRef.detectChanges();
+        this.isModalOpen = false;
+        await this.channelService.deleteMessage(this.message, true);
+        this.message = undefined;
+        this.channelService.bouncedMessage$.next(undefined);
+    }
+    editMessage() {
+        this.isModalOpen = false;
+        this.messageActionsService.messageToEdit$.next(this.message);
+        this.message = undefined;
+        this.channelService.bouncedMessage$.next(undefined);
+    }
+}
+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" }] });
+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" }]
+        }], ctorParameters: function () { return [{ type: ChannelService }, { type: CustomTemplatesService }, { type: MessageActionsService }]; }, propDecorators: { class: [{
+                type: HostBinding
+            }] } });
+
+/**
+ * The `Channel` component is a container component that displays the [`ChannelHeader`](./ChannelHeaderComponent.mdx), [`MessageList`](./MessageListComponent.mdx), [`NotificationList`](./NotificationListComponent.mdx) and [`MessageInput`](./MessageInputComponent.mdx) components. You can also provide the [`Thread`](./ThreadComponent.mdx) component to use message [threads](https://getstream.io/chat/docs/javascript/threads/?language=javascript).
+ */
+class ChannelComponent {
+    constructor(channelService, themeService, customTemplatesService) {
+        this.channelService = channelService;
+        this.themeService = themeService;
+        this.customTemplatesService = customTemplatesService;
+        this.subscriptions = [];
+        this.isError$ = combineLatest([
+            this.channelService.channelQueryState$,
+            this.channelService.activeChannel$,
+        ]).pipe(map(([state, activeChannel]) => {
+            return !activeChannel && state?.state === 'error';
+        }));
+        this.isInitializing$ = combineLatest([
+            this.channelService.channelQueryState$,
+            this.channelService.activeChannel$,
+        ]).pipe(map(([state, activeChannel]) => {
+            return !activeChannel && state?.state === 'in-progress';
+        }));
+        this.isActiveThread$ = this.channelService.activeParentMessageId$.pipe(map((id) => !!id));
+        this.theme$ = this.themeService.theme$;
+        this.isActiveChannel$ = this.channelService.activeChannel$.pipe(map((c) => !!c));
+    }
+}
+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" }] });
+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" }]
+        }], ctorParameters: function () { return [{ type: ChannelService }, { type: ThemeService }, { type: CustomTemplatesService }]; } });
+
+const listUsers = (users) => {
+    let outStr = '';
+    const slicedArr = users.map((item) => item.name || item.id).slice(0, 5);
+    const restLength = users.length - slicedArr.length;
+    const commaSeparatedUsers = slicedArr.join(', ');
+    outStr = commaSeparatedUsers;
+    if (restLength > 0) {
+        outStr += ` +${restLength}`;
+    }
+    return outStr;
+};
+
+const getChannelDisplayText = (channel, currentUser) => {
+    if (channel.data?.name) {
+        return channel.data.name;
+    }
+    if (channel.state.members && Object.keys(channel.state.members).length > 0) {
+        const members = Object.values(channel.state.members)
+            .map((m) => m.user || { id: m.user_id })
+            .filter((m) => m.id !== currentUser?.id);
+        return listUsers(members);
+    }
+    return channel.id;
+};
+
+/**
+ * The `ChannelHeader` component displays the avatar and name of the currently active channel along with member and watcher information. You can read about [the difference between members and watchers](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript#watchers-vs-members) in the platform documentation. Please note that number of watchers is only displayed if the user has [`connect-events` capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript)
+ */
+class ChannelHeaderComponent {
+    constructor(channelService, customTemplatesService, cdRef, chatClientService) {
+        this.channelService = channelService;
+        this.customTemplatesService = customTemplatesService;
+        this.cdRef = cdRef;
+        this.chatClientService = chatClientService;
+        this.subscriptions = [];
+        this.channelService.activeChannel$.subscribe((c) => {
+            this.activeChannel = c;
+            const capabilities = this.activeChannel?.data
+                ?.own_capabilities;
+            if (!capabilities) {
+                return;
+            }
+            this.canReceiveConnectEvents =
+                capabilities.indexOf('connect-events') !== -1;
+        });
+    }
+    ngOnInit() {
+        this.subscriptions.push(this.customTemplatesService.channelActionsTemplate$.subscribe((template) => {
+            this.channelActionsTemplate = template;
+            this.cdRef.detectChanges();
+        }));
+        this.subscriptions.push(this.customTemplatesService.channelHeaderInfoTemplate$.subscribe((template) => {
+            this.channelHeaderInfoTemplate = template;
+            this.cdRef.detectChanges();
+        }));
+    }
+    ngOnDestroy() {
+        this.subscriptions.forEach((s) => s.unsubscribe());
+    }
+    getChannelActionsContext() {
+        return { channel: this.activeChannel };
+    }
+    getChannelInfoContext() {
+        return { channel: this.activeChannel };
+    }
+    get memberCountParam() {
+        return { memberCount: this.activeChannel?.data?.member_count || 0 };
+    }
+    get watcherCountParam() {
+        return { watcherCount: this.activeChannel?.state?.watcher_count || 0 };
+    }
+    get displayText() {
+        if (!this.activeChannel) {
+            return '';
+        }
+        return getChannelDisplayText(this.activeChannel, this.chatClientService.chatClient.user);
+    }
+    get avatarName() {
+        return this.activeChannel?.data?.name;
+    }
+}
+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=\"\n        str-chat__header-livestream-left--title str-chat__channel-header-title\n      \"\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=\"\n          str-chat__header-livestream-left--members\n          str-chat__channel-header-info\n        \"\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" }] });
+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=\"\n        str-chat__header-livestream-left--title str-chat__channel-header-title\n      \"\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=\"\n          str-chat__header-livestream-left--members\n          str-chat__channel-header-info\n        \"\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" }]
+        }], ctorParameters: function () { return [{ type: ChannelService }, { type: CustomTemplatesService }, { type: i0.ChangeDetectorRef }, { type: ChatClientService }]; } });
+
+const isOnSeparateDate = (date1, date2) => {
+    if (date1.getDate() !== date2.getDate()) {
+        return true;
+    }
+    else if (date1.getFullYear() !== date2.getFullYear() ||
+        date1.getMonth() !== date2.getMonth()) {
+        return true;
+    }
+    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') => {
+    const parsedTime = Dayjs(date);
+    switch (format) {
+        case 'date': {
+            return parsedTime.calendar(null, {
+                sameDay: '[Today]',
+                nextDay: '[Tomorrow]',
+                nextWeek: 'dddd',
+                lastDay: '[Yesterday]',
+                lastWeek: '[Last] dddd',
+                sameElse: 'MM/DD/YYYY', // Everything else ( 10/17/2011 )
+            });
+        }
+        case 'date-time': {
+            return parsedTime.calendar();
+        }
+        case 'time': {
+            return parsedTime.format('h:mm A');
+        }
+    }
+};
+
+/**
+ * The `DateParserService` parses dates into user-friendly string representations.
+ */
+class DateParserService {
+    constructor() { }
+    /**
+     * Return a user-friendly string representation of the time
+     * @param date
+     * @returns The parsed time
+     */
+    parseTime(date) {
+        if (this.customTimeParser) {
+            return this.customTimeParser(date);
+        }
+        return parseDate(date, 'time');
+    }
+    /**
+     * Return a user-friendly string representation of the date (year, month and date)
+     * @param date
+     * @returns The parsed date
+     */
+    parseDate(date) {
+        if (this.customDateParser) {
+            return this.customDateParser(date);
+        }
+        return parseDate(date, 'date');
+    }
+    /**
+     * Return a user-friendly string representation of the date and time
+     * @param date
+     * @returns The parsed date
+     */
+    parseDateTime(date) {
+        if (this.customDateTimeParser) {
+            return this.customDateTimeParser(date);
+        }
+        return parseDate(date, 'date-time');
+    }
+}
+DateParserService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateParserService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DateParserService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateParserService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateParserService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return []; } });
+
+/**
+ * The `ChannelPreview` component displays a channel preview in the channel list, it consists of the image, name and latest message of the channel.
+ */
+class ChannelPreviewComponent {
+    constructor(channelService, ngZone, chatClientService, messageService, customTemplatesService, dateParser) {
+        this.channelService = channelService;
+        this.ngZone = ngZone;
+        this.chatClientService = chatClientService;
+        this.customTemplatesService = customTemplatesService;
+        this.dateParser = dateParser;
+        this.isActive = false;
+        this.isUnreadMessageWasCalled = false;
+        this.isUnread = false;
+        this.latestMessageText = 'streamChat.Nothing yet...';
+        this.subscriptions = [];
+        this.canSendReadEvents = true;
+        this.displayAs = messageService.displayAs;
+    }
+    ngOnInit() {
+        this.subscriptions.push(this.chatClientService.user$.subscribe((user) => {
+            if (user?.id !== this.userId) {
+                this.userId = user?.id;
+            }
+        }));
+        this.subscriptions.push(this.channelService.activeChannel$.subscribe((activeChannel) => (this.isActive = activeChannel?.id === this.channel?.id)));
+        const messages = this.channel?.state?.latestMessages;
+        if (messages && messages.length > 0) {
+            this.setLatestMessage(messages[messages.length - 1]);
+        }
+        this.updateUnreadState();
+        const capabilities = this.channel?.data?.own_capabilities || [];
+        this.canSendReadEvents = capabilities.indexOf('read-events') !== -1;
+        this.subscriptions.push(this.channel.on('message.new', this.handleMessageEvent.bind(this)));
+        this.subscriptions.push(this.channel.on('message.updated', this.handleMessageEvent.bind(this)));
+        this.subscriptions.push(this.channel.on('message.deleted', this.handleMessageEvent.bind(this)));
+        this.subscriptions.push(this.channel.on('channel.truncated', this.handleMessageEvent.bind(this)));
+        this.subscriptions.push(this.channel.on('message.read', () => this.ngZone.run(() => {
+            this.isUnreadMessageWasCalled = false;
+            this.updateUnreadState();
+        })));
+        this.subscriptions.push(this.chatClientService.events$
+            .pipe(filter((e) => e.eventType === 'notification.mark_unread' &&
+            this.channel.id === e.event?.channel_id))
+            .subscribe(() => {
+            this.ngZone.run(() => {
+                this.isUnreadMessageWasCalled = true;
+                this.updateUnreadState();
+            });
+        }));
+    }
+    ngOnDestroy() {
+        this.subscriptions.forEach((s) => s.unsubscribe());
+    }
+    get avatarImage() {
+        return this.channel?.data?.image;
+    }
+    get avatarName() {
+        return this.channel?.data?.name;
+    }
+    get title() {
+        if (!this.channel) {
+            return '';
+        }
+        return getChannelDisplayText(this.channel, this.chatClientService.chatClient.user);
+    }
+    setAsActiveChannel() {
+        void this.channelService.setAsActiveChannel(this.channel);
+    }
+    handleMessageEvent(event) {
+        this.ngZone.run(() => {
+            if (this.channel?.state.latestMessages.length === 0) {
+                this.latestMessage = undefined;
+                this.latestMessageStatus = undefined;
+                this.latestMessageText = 'streamChat.Nothing yet...';
+                this.latestMessageTime = undefined;
+                return;
+            }
+            const latestMessage = this.channel?.state.latestMessages[this.channel?.state.latestMessages.length - 1];
+            if (!event.message || latestMessage?.id !== event.message.id) {
+                return;
+            }
+            this.setLatestMessage(latestMessage);
+            this.updateUnreadState();
+        });
+    }
+    setLatestMessage(message) {
+        this.latestMessage = message;
+        if (message?.deleted_at) {
+            this.latestMessageText = 'streamChat.Message deleted';
+        }
+        else if (message?.text) {
+            this.latestMessageText =
+                getMessageTranslation(message, this.channel, this.chatClientService.chatClient.user) || message.text;
+        }
+        else if (message?.attachments && message.attachments.length) {
+            this.latestMessageText = 'streamChat.🏙 Attachment...';
+        }
+        if (this.latestMessage && this.latestMessage.type === 'regular') {
+            this.latestMessageTime = isOnSeparateDate(new Date(), this.latestMessage.created_at)
+                ? this.dateParser.parseDate(this.latestMessage.created_at)
+                : this.dateParser.parseTime(this.latestMessage.created_at);
+        }
+        else {
+            this.latestMessageTime = undefined;
+        }
+    }
+    updateUnreadState() {
+        if (this.channel &&
+            this.latestMessage &&
+            this.latestMessage.user?.id === this.userId &&
+            this.latestMessage.status === 'received' &&
+            this.latestMessage.type === 'regular') {
+            this.latestMessageStatus =
+                getReadBy(this.latestMessage, this.channel).length > 0
+                    ? 'read'
+                    : 'delivered';
+        }
+        else {
+            this.latestMessageStatus = undefined;
+        }
+        if ((this.isActive && !this.isUnreadMessageWasCalled) ||
+            !this.canSendReadEvents) {
+            this.unreadCount = 0;
+            this.isUnread = false;
+            return;
+        }
+        this.unreadCount = this.channel.countUnread();
+        this.isUnread = !!this.unreadCount;
+    }
+}
+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=\"\n      str-chat__channel-preview-messenger--right str-chat__channel-preview-end\n    \"\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" }] });
+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=\"\n      str-chat__channel-preview-messenger--right str-chat__channel-preview-end\n    \"\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" }]
+        }], ctorParameters: function () { return [{ type: ChannelService }, { type: i0.NgZone }, { type: ChatClientService }, { type: MessageService }, { type: CustomTemplatesService }, { type: DateParserService }]; }, propDecorators: { channel: [{
+                type: Input
+            }] } });
+
+/**
+ * The `ChannelList` component renders the list of channels.
+ */
+class ChannelListComponent {
+    constructor(channelService, customTemplatesService, themeService) {
+        this.channelService = channelService;
+        this.customTemplatesService = customTemplatesService;
+        this.themeService = themeService;
+        this.isLoadingMoreChannels = false;
+        this.subscriptions = [];
+        this.theme$ = this.themeService.theme$;
+        this.channels$ = this.channelService.channels$;
+        this.hasMoreChannels$ = this.channelService.hasMoreChannels$;
+        this.isError$ = this.channelService.channelQueryState$.pipe(map((s) => !this.isLoadingMoreChannels && s?.state === 'error'));
+        this.isInitializing$ = this.channelService.channelQueryState$.pipe(map((s) => !this.isLoadingMoreChannels && s?.state === 'in-progress'));
+        this.subscriptions.push(this.customTemplatesService.channelPreviewTemplate$.subscribe((template) => (this.customChannelPreviewTemplate = template)));
+    }
+    ngOnDestroy() {
+        this.subscriptions.forEach((s) => s.unsubscribe());
+    }
+    async loadMoreChannels() {
+        this.isLoadingMoreChannels = true;
+        await this.channelService.loadMoreChannels();
+        this.isLoadingMoreChannels = false;
+    }
+    trackByChannelId(index, item) {
+        return item.cid;
+    }
+}
+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", viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div\n  #container\n  data-testid=\"channel-list-container\"\n  class=\"str-chat 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      <ng-container\n        *ngFor=\"let channel of channels$ | async; trackBy: trackByChannelId\"\n      >\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-container>\n      <div\n        *ngIf=\"hasMoreChannels$ | async\"\n        class=\"str-chat__load-more-button\"\n        data-testid=\"load-more\"\n        (click)=\"loadMoreChannels()\"\n        (keyup.enter)=\"loadMoreChannels()\"\n      >\n        <button\n          class=\"str-chat__load-more-button__button str-chat__cta-button\"\n          data-testid=\"load-more-button\"\n          [disabled]=\"isLoadingMoreChannels\"\n        >\n          <span *ngIf=\"!isLoadingMoreChannels; else loadingIndicator\">{{\n            \"Load more\" | translate\n          }}</span>\n          <ng-template #loadingIndicator\n            ><stream-loading-indicator-placeholder></stream-loading-indicator-placeholder\n          ></ng-template>\n        </button>\n      </div>\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 data-testid=\"loading-indicator\" class=\"str-chat__loading-channels\">\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=\"\n        str-chat__loading-channels-meta str-chat__channel-preview-end-loading\n      \"\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.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: ChannelPreviewComponent, selector: "stream-channel-preview", inputs: ["channel"] }, { kind: "component", type: IconComponent, selector: "stream-icon", inputs: ["icon"] }, { kind: "component", type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.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__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      <ng-container\n        *ngFor=\"let channel of channels$ | async; trackBy: trackByChannelId\"\n      >\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-container>\n      <div\n        *ngIf=\"hasMoreChannels$ | async\"\n        class=\"str-chat__load-more-button\"\n        data-testid=\"load-more\"\n        (click)=\"loadMoreChannels()\"\n        (keyup.enter)=\"loadMoreChannels()\"\n      >\n        <button\n          class=\"str-chat__load-more-button__button str-chat__cta-button\"\n          data-testid=\"load-more-button\"\n          [disabled]=\"isLoadingMoreChannels\"\n        >\n          <span *ngIf=\"!isLoadingMoreChannels; else loadingIndicator\">{{\n            \"Load more\" | translate\n          }}</span>\n          <ng-template #loadingIndicator\n            ><stream-loading-indicator-placeholder></stream-loading-indicator-placeholder\n          ></ng-template>\n        </button>\n      </div>\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 data-testid=\"loading-indicator\" class=\"str-chat__loading-channels\">\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=\"\n        str-chat__loading-channels-meta str-chat__channel-preview-end-loading\n      \"\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" }]
+        }], ctorParameters: function () { return [{ type: ChannelService }, { type: CustomTemplatesService }, { type: ThemeService }]; }, propDecorators: { container: [{
+                type: ViewChild,
+                args: ['container']
+            }] } });
+
+/**
+ * This component can be used to visualize the wave bar of a voice recording
+ */
+class VoiceRecordingWavebarComponent {
+    constructor(ngZone, cdRef) {
+        this.ngZone = ngZone;
+        this.cdRef = cdRef;
+        /**
+         * The waveform data to visualize
+         */
+        this.waveFormData = [];
+        this.resampledWaveFormData = [];
+        this.progress = 0;
+        this.isDragging = false;
+        this.sampleSize = 40;
+        this.isViewInited = false;
+        this.upsample = () => {
+            if (this.sampleSize === this.waveFormData.length)
+                return this.waveFormData;
+            // eslint-disable-next-line  prefer-const
+            let [bucketSize, remainder] = this.divMod(this.sampleSize, this.waveFormData.length);
+            const result = [];
+            for (let i = 0; i < this.waveFormData.length; i++) {
+                const extra = remainder && remainder-- ? 1 : 0;
+                result.push(...Array(bucketSize + extra).fill(this.waveFormData[i]));
+            }
+            return result;
+        };
+        this.getNextBucketMean = (data, currentBucketIndex, bucketSize) => {
+            const nextBucketStartIndex = Math.floor(currentBucketIndex * bucketSize) + 1;
+            let nextNextBucketStartIndex = Math.floor((currentBucketIndex + 1) * bucketSize) + 1;
+            nextNextBucketStartIndex =
+                nextNextBucketStartIndex < data.length
+                    ? nextNextBucketStartIndex
+                    : data.length;
+            return this.mean(data.slice(nextBucketStartIndex, nextNextBucketStartIndex));
+        };
+        this.mean = (values) => values.reduce((acc, value) => acc + value, 0) / values.length;
+        this.triangleAreaHeron = (a, b, c) => {
+            const s = (a + b + c) / 2;
+            return Math.sqrt(s * (s - a) * (s - b) * (s - c));
+        };
+        this.triangleBase = (a, b) => Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
+        this.divMod = (num, divisor) => {
+            return [Math.floor(num / divisor), num % divisor];
+        };
+    }
+    ngOnInit() {
+        this.containerSizeChanged();
+        if (this.container?.nativeElement) {
+            this.ngZone.runOutsideAngular(() => {
+                new ResizeObserver(() => {
+                    this.containerSizeChanged();
+                }).observe(this.container.nativeElement);
+            });
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes.waveFormData) {
+            this.resampledWaveFormData =
+                this.waveFormData.length > this.sampleSize
+                    ? this.downsample()
+                    : this.upsample();
+        }
+        if (changes.audioElement) {
+            this.ngZone.runOutsideAngular(() => {
+                this.audioElement?.addEventListener('timeupdate', () => {
+                    const progress = (this.audioElement?.currentTime || 0) / (this.duration || 0) || 0;
+                    if (Math.abs(progress - this.progress) >= 0.02) {
+                        this.ngZone.run(() => {
+                            this.progress = progress;
+                            this.cdRef.detectChanges();
                         });
                     }
                 });
@@ -4024,1631 +4358,1313 @@ 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() {
-        /**
-         * An output to notify the parent component if the user tries to retry a failed upload
-         */
-        this.retryAttachmentUpload = new EventEmitter();
-        /**
-         * An output to notify the parent component if the user wants to delete a file
-         */
-        this.deleteAttachment = new EventEmitter();
-    }
-    attachmentUploadRetried(file) {
-        this.retryAttachmentUpload.emit(file);
-    }
-    attachmentDeleted(upload) {
-        this.deleteAttachment.emit(upload);
-    }
-    trackByFile(_, item) {
-        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' || attachmentUpload.type === 'video'\n        \"\n        class=\"str-chat__attachment-preview-file\"\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 class=\"str-chat__attachment-preview-file-name\">\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" }] });
-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' || attachmentUpload.type === 'video'\n        \"\n        class=\"str-chat__attachment-preview-file\"\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 class=\"str-chat__attachment-preview-file-name\">\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$: [{
-                type: Input
-            }], retryAttachmentUpload: [{
-                type: Output
-            }], deleteAttachment: [{
-                type: Output
-            }] } });
-
-/**
- * The `MessageInput` component displays an input where users can type their messages and upload files, and sends the message to the active channel. The component can be used to compose new messages or update existing ones. To send messages, the chat user needs to have the necessary [channel capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript).
+ * The `MessageReactions` component displays the reactions of a message. You can read more about [message reactions](https://getstream.io/chat/docs/javascript/send_reaction/?language=javascript) in the platform documentation.
  */
-class MessageInputComponent {
-    constructor(channelService, notificationService, attachmentService, configService, textareaType, componentFactoryResolver, cdRef, chatClient, emojiInputService, customTemplatesService) {
-        this.channelService = channelService;
-        this.notificationService = notificationService;
-        this.attachmentService = attachmentService;
-        this.configService = configService;
-        this.textareaType = textareaType;
-        this.componentFactoryResolver = componentFactoryResolver;
+class MessageReactionsComponent {
+    constructor(cdRef, channelService, messageReactionsService, customTemplatesService) {
         this.cdRef = cdRef;
-        this.chatClient = chatClient;
-        this.emojiInputService = emojiInputService;
+        this.channelService = channelService;
+        this.messageReactionsService = messageReactionsService;
         this.customTemplatesService = customTemplatesService;
         /**
-         * Determines if the message is being dispalyed in a channel or in a [thread](https://getstream.io/chat/docs/javascript/threads/?language=javascript).
+         * The number of reactions grouped by [reaction types](https://github.com/GetStream/stream-chat-angular/tree/master/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts)
          */
-        this.mode = 'main';
+        this.messageReactionCounts = {};
         /**
-         * Enables or disables auto focus on the textarea element
+         * List of reactions of a [message](../types/stream-message.mdx), used to display the users of a reaction type.
          */
-        this.autoFocus = true;
+        this.latestReactions = [];
         /**
-         * Emits when a message was successfuly sent or updated
+         * List of the user's own reactions of a [message](../types/stream-message.mdx), used to display the users of a reaction type.
          */
-        this.messageUpdate = new EventEmitter();
-        this.class = 'str-chat__message-input-angular-host';
-        this.textareaValue = '';
-        this.mentionedUsers = [];
-        this.typingStart$ = new Subject();
-        this.isCooldownInProgress = false;
-        this.fileInputId = v4();
+        this.ownReactions = [];
+        this.isLoading = true;
+        this.reactions = [];
+        this.shouldHandleReactionClick = true;
+        this.existingReactions = [];
+        this.reactionsCount = 0;
+        this.reactionOptions = [];
         this.subscriptions = [];
         this.isViewInited = false;
-        this.defaultTextareaPlaceholder = 'streamChat.Type your message';
-        this.slowModeTextareaPlaceholder = 'streamChat.Slow Mode ON';
-        this.textareaPlaceholder = this.defaultTextareaPlaceholder;
-        this.subscriptions.push(this.attachmentService.attachmentUploadInProgressCounter$.subscribe((counter) => {
-            if (counter === 0 && this.hideNotification) {
-                this.hideNotification();
-                this.hideNotification = undefined;
-            }
-        }));
-        this.subscriptions.push(this.channelService.activeChannel$.subscribe((channel) => {
-            if (channel && this.channel && channel.id !== this.channel.id) {
-                this.textareaValue = '';
-                this.attachmentService.resetAttachmentUploads();
-            }
-            const capabilities = channel?.data?.own_capabilities;
-            if (capabilities) {
-                this.isFileUploadAuthorized =
-                    capabilities.indexOf('upload-file') !== -1;
-                this.canSendLinks = capabilities.indexOf('send-links') !== -1;
-                this.channel = channel;
-                this.setCanSendMessages();
-            }
-        }));
-        this.subscriptions.push(this.chatClient.appSettings$.subscribe((appSettings) => (this.appSettings = appSettings)));
-        this.subscriptions.push(this.channelService.messageToQuote$.subscribe((m) => {
-            const isThreadReply = m && m.parent_id;
-            if ((this.mode === 'thread' && isThreadReply) ||
-                (this.mode === 'thread' && this.quotedMessage && !m) ||
-                (this.mode === 'main' && !isThreadReply)) {
-                this.quotedMessage = m;
-            }
-        }));
-        this.attachmentUploads$ = this.attachmentService.attachmentUploads$;
-        this.attachmentUploadInProgressCounter$ =
-            this.attachmentService.attachmentUploadInProgressCounter$;
-        this.isFileUploadEnabled = this.configService.isFileUploadEnabled;
-        this.isMultipleFileUploadEnabled =
-            this.configService.isMultipleFileUploadEnabled;
-        this.areMentionsEnabled = this.configService.areMentionsEnabled;
-        this.mentionScope = this.configService.mentionScope;
-        this.inputMode = this.configService.inputMode;
-        this.subscriptions.push(this.typingStart$.subscribe(() => void this.channelService.typingStarted(this.parentMessageId)));
-        this.subscriptions.push(combineLatest([
-            this.channelService.latestMessageDateByUserByChannels$,
-            this.channelService.activeChannel$,
-        ])
-            .pipe(map(([latestMessages, channel]) => [latestMessages[channel?.cid || ''], channel]))
-            .subscribe(([latestMessageDate, channel]) => {
-            const cooldown = channel?.data?.cooldown &&
-                latestMessageDate &&
-                Math.round(channel?.data?.cooldown -
-                    (new Date().getTime() - latestMessageDate.getTime()) / 1000);
-            if (cooldown &&
-                cooldown > 0 &&
-                (channel?.data?.own_capabilities).includes('slow-mode')) {
-                this.startCooldown(cooldown);
-            }
-            else if (this.isCooldownInProgress) {
-                this.stopCooldown();
-            }
-        }));
+        this.isOpenChange = (isOpen) => {
+            this.selectedReactionType = isOpen ? this.selectedReactionType : undefined;
+        };
     }
     ngOnInit() {
-        this.subscriptions.push(this.customTemplatesService.emojiPickerTemplate$.subscribe((template) => {
-            this.emojiPickerTemplate = template;
-            this.cdRef.detectChanges();
-        }));
-        this.subscriptions.push(this.customTemplatesService.attachmentPreviewListTemplate$.subscribe((template) => {
-            this.attachmentPreviewListTemplate = template;
-            this.cdRef.detectChanges();
-        }));
-        this.subscriptions.push(this.customTemplatesService.customAttachmentUploadTemplate$.subscribe((template) => {
-            this.customAttachmentUploadTemplate = template;
-            this.cdRef.detectChanges();
+        this.subscriptions.push(this.messageReactionsService.reactions$.subscribe((reactions) => {
+            this.reactionOptions = Object.keys(reactions);
+            this.setExistingReactions();
+            if (this.isViewInited) {
+                this.cdRef.detectChanges();
+            }
         }));
     }
-    ngAfterViewInit() {
-        this.isViewInited = true;
-        this.initTextarea();
-    }
     ngOnChanges(changes) {
-        if (changes.message) {
-            this.attachmentService.resetAttachmentUploads();
-            if (this.isUpdate) {
-                this.attachmentService.createFromAttachments(this.message.attachments || []);
-                this.textareaValue = this.message.text || '';
-            }
-        }
-        if (changes.isFileUploadEnabled) {
-            this.configService.isFileUploadEnabled = this.isFileUploadEnabled;
-        }
-        if (changes.isMultipleFileUploadEnabled) {
-            this.configService.isMultipleFileUploadEnabled =
-                this.isMultipleFileUploadEnabled;
-        }
-        if (changes.areMentionsEnabled) {
-            this.configService.areMentionsEnabled = this.areMentionsEnabled;
-        }
-        if (changes.mentionScope) {
-            this.configService.mentionScope = this.mentionScope;
-        }
-        if (changes.mode) {
-            this.setCanSendMessages();
-        }
-        if (changes.inputMode) {
-            this.configService.inputMode = this.inputMode;
+        if (changes.messageReactionCounts) {
+            this.setExistingReactions();
         }
-        if (changes.sendMessage$) {
-            if (this.sendMessageSubcription) {
-                this.sendMessageSubcription.unsubscribe();
-            }
-            if (this.sendMessage$) {
-                this.sendMessageSubcription = this.sendMessage$.subscribe(() => void this.messageSent());
-            }
+        if (changes.messageReactionCounts && this.messageReactionCounts) {
+            const reactionsCount = Object.keys(this.messageReactionCounts).reduce((acc, key) => acc + (this.messageReactionCounts[key] || 0), 0);
+            this.shouldHandleReactionClick =
+                reactionsCount <= ChannelService.MAX_MESSAGE_REACTIONS_TO_FETCH ||
+                    !!this.messageReactionsService.customReactionClickHandler;
         }
     }
+    ngAfterViewInit() {
+        this.isViewInited = true;
+    }
     ngOnDestroy() {
-        if (this.sendMessageSubcription) {
-            this.sendMessageSubcription.unsubscribe();
-        }
         this.subscriptions.forEach((s) => s.unsubscribe());
     }
-    async messageSent() {
-        if (this.isCooldownInProgress) {
-            return;
-        }
-        let attachmentUploadInProgressCounter;
-        this.attachmentService.attachmentUploadInProgressCounter$
-            .pipe(first())
-            .subscribe((counter) => (attachmentUploadInProgressCounter = counter));
-        if (attachmentUploadInProgressCounter > 0) {
-            if (!this.hideNotification) {
-                this.hideNotification =
-                    this.notificationService.addPermanentNotification('streamChat.Wait until all attachments have uploaded');
-            }
+    getEmojiByReaction(reactionType) {
+        return this.messageReactionsService.reactions[reactionType];
+    }
+    reactionSelected(reactionType) {
+        if (!this.shouldHandleReactionClick) {
             return;
         }
-        const attachments = this.attachmentService.mapToAttachments();
-        let text = this.textareaValue;
-        text = text.replace(/^\n+/g, ''); // leading empty lines
-        text = text.replace(/\n+$/g, ''); // ending empty lines
-        const textContainsOnlySpaceChars = !text.replace(/ /g, ''); //spcae
-        if ((!text || textContainsOnlySpaceChars) &&
-            (!attachments || attachments.length === 0)) {
+        if (!this.messageId) {
             return;
         }
-        if (textContainsOnlySpaceChars) {
-            text = '';
+        if (this.messageReactionsService.customReactionClickHandler) {
+            this.messageReactionsService.customReactionClickHandler({
+                messageId: this.messageId,
+                reactionType: reactionType,
+            });
         }
-        if (this.containsLinks && !this.canSendLinks) {
-            this.notificationService.addTemporaryNotification('streamChat.Sending links is not allowed in this conversation');
-            return;
+        else {
+            this.selectedReactionType = reactionType;
+            void this.fetchAllReactions();
         }
-        if (!this.isUpdate) {
-            this.textareaValue = '';
+    }
+    getUsersByReaction(reactionType) {
+        return this.latestReactions
+            .filter((r) => r.type === reactionType)
+            .map((r) => r.user?.name || r.user?.id)
+            .filter((i) => !!i)
+            .join(', ');
+    }
+    getAllUsersByReaction(reactionType) {
+        if (!reactionType) {
+            return [];
         }
-        try {
-            const message = await (this.isUpdate
-                ? this.channelService.updateMessage({
-                    ...this.message,
-                    text: text,
-                    attachments: attachments,
-                })
-                : this.channelService.sendMessage(text, attachments, this.mentionedUsers, this.parentMessageId, this.quotedMessage?.id));
-            this.messageUpdate.emit({ message });
-            if (!this.isUpdate) {
-                this.attachmentService.resetAttachmentUploads();
+        const users = this.reactions
+            .filter((r) => r.type === reactionType)
+            .map((r) => r.user)
+            .filter((i) => !!i);
+        users.sort((u1, u2) => {
+            const name1 = u1.name?.toLowerCase();
+            const name2 = u2.name?.toLowerCase();
+            if (!name1) {
+                return 1;
             }
-        }
-        catch (error) {
-            if (this.isUpdate) {
-                this.notificationService.addTemporaryNotification('streamChat.Edit message request failed');
+            if (!name2) {
+                return -1;
             }
-        }
-        void this.channelService.typingStopped(this.parentMessageId);
-        if (this.quotedMessage) {
-            this.deselectMessageToQuote();
-        }
+            if (name1 === name2) {
+                return 0;
+            }
+            if (name1 < name2) {
+                return -1;
+            }
+            else {
+                return 1;
+            }
+        });
+        return users;
     }
-    get containsLinks() {
-        return /(?:(?:https?|ftp):\/\/)?[\w/\-?=%.]+\.[\w/\-&?=%.]+/.test(this.textareaValue);
+    trackByMessageReaction(_, item) {
+        return item;
     }
-    get quotedMessageAttachments() {
-        const originalAttachments = this.quotedMessage?.attachments;
-        return originalAttachments && originalAttachments.length
-            ? [originalAttachments[0]]
-            : [];
+    trackByUserId(_, item) {
+        return item.id;
     }
-    get disabledTextareaText() {
-        if (!this.canSendMessages) {
-            return this.mode === 'thread'
-                ? "streamChat.You can't send thread replies in this channel"
-                : "streamChat.You can't send messages in this channel";
-        }
-        return '';
+    isOwnReaction(reactionType) {
+        return !!this.ownReactions.find((r) => r.type === reactionType);
     }
-    async filesSelected(fileList) {
-        if (!(await this.areAttachemntsValid(fileList))) {
+    async fetchAllReactions() {
+        if (!this.messageId) {
             return;
         }
-        await this.attachmentService.filesSelected(fileList);
-        this.clearFileInput();
-    }
-    deselectMessageToQuote() {
-        this.channelService.selectMessageToQuote(undefined);
+        this.isLoading = true;
+        try {
+            this.reactions = await this.channelService.getMessageReactions(this.messageId);
+        }
+        catch (error) {
+            this.selectedReactionType = undefined;
+        }
+        finally {
+            this.isLoading = false;
+            this.cdRef.detectChanges();
+        }
     }
-    getEmojiPickerContext() {
-        return {
-            emojiInput$: this.emojiInputService.emojiInput$,
-        };
+    setExistingReactions() {
+        this.existingReactions = Object.keys(this.messageReactionCounts)
+            .filter((k) => this.reactionOptions.indexOf(k) !== -1)
+            .filter((k) => this.messageReactionCounts[k] > 0);
+        this.reactionsCount = this.existingReactions.reduce((total, reaction) => total + this.messageReactionCounts[reaction], 0);
     }
-    getAttachmentPreviewListContext() {
-        return {
-            attachmentUploads$: this.attachmentService.attachmentUploads$,
-            deleteUploadHandler: this.deleteUpload.bind(this),
-            retryUploadHandler: this.retryUpload.bind(this),
+}
+MessageReactionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageReactionsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ChannelService }, { token: MessageReactionsService }, { token: CustomTemplatesService }], target: i0.ɵɵFactoryTarget.Component });
+MessageReactionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MessageReactionsComponent, selector: "stream-message-reactions", inputs: { messageId: "messageId", messageReactionCounts: "messageReactionCounts", latestReactions: "latestReactions", ownReactions: "ownReactions" }, viewQueries: [{ propertyName: "selectorContainer", first: true, predicate: ["selectorContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  *ngIf=\"existingReactions.length > 0\"\n  data-testid=\"reaction-list\"\n  class=\"str-chat__reaction-list str-chat__message-reactions-container\"\n  [class.str-chat__reaction-list--reverse]=\"true\"\n>\n  <ul class=\"str-chat__message-reactions\">\n    <li\n      *ngFor=\"\n        let reactionType of existingReactions;\n        trackBy: trackByMessageReaction\n      \"\n      class=\"str-chat__message-reaction\"\n      data-testclass=\"emoji\"\n      [ngStyle]=\"{ cursor: shouldHandleReactionClick ? 'pointer' : 'default' }\"\n      [class.str-chat__message-reaction-own]=\"isOwnReaction(reactionType)\"\n      (click)=\"reactionSelected(reactionType)\"\n      (keyup.enter)=\"reactionSelected(reactionType)\"\n    >\n      <span class=\"emoji str-chat__message-reaction-emoji\">\n        {{ getEmojiByReaction(reactionType) }}&nbsp;\n      </span>\n      <span\n        data-testclass=\"reaction-list-reaction-count\"\n        class=\"str-chat__message-reaction-count\"\n      >\n        {{ messageReactionCounts[reactionType] }}\n      </span>\n    </li>\n    <li>\n      <span\n        data-testid=\"reactions-count\"\n        class=\"str-chat__reaction-list--counter\"\n        >{{ reactionsCount }}</span\n      >\n    </li>\n  </ul>\n</div>\n\n<ng-container *ngIf=\"selectedReactionType\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.modalTemplate$ | async) || defaultModal;\n      context: {\n        isOpen: !!selectedReactionType,\n        messageId: messageId,\n        reactionType: selectedReactionType,\n        isOpenChangeHandler: isOpenChange,\n        content: modalContent\n      }\n    \"\n  ></ng-container>\n</ng-container>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-messageId=\"messageId\"\n  let-reactionType=\"reactionType\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    class=\"str-chat__message-reactions-details-modal\"\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=\"str-chat__message-reactions-details\">\n    <div class=\"str-chat__message-reactions-details-reaction-types\">\n      <div\n        *ngFor=\"\n          let reactionType of existingReactions;\n          trackBy: trackByMessageReaction\n        \"\n        class=\"str-chat__message-reactions-details-reaction-type\"\n        [ngStyle]=\"{\n          cursor: shouldHandleReactionClick ? 'pointer' : 'default'\n        }\"\n        attr.data-testid=\"reaction-details-selector-{{ reactionType }}\"\n        [class.str-chat__message-reactions-details-reaction-type--selected]=\"\n          reactionType === selectedReactionType\n        \"\n        (click)=\"selectedReactionType = reactionType; allUsers.scrollTop = 0\"\n        (keyup.enter)=\"\n          selectedReactionType = reactionType; allUsers.scrollTop = 0\n        \"\n      >\n        <span class=\"emoji str-chat__message-reaction-emoji\">\n          {{ getEmojiByReaction(reactionType) }}&nbsp;\n        </span>\n        <span class=\"str-chat__message-reaction-count\">\n          {{ messageReactionCounts[reactionType] }}\n        </span>\n      </div>\n    </div>\n    <div\n      class=\"\n        emoji\n        str-chat__message-reaction-emoji str-chat__message-reaction-emoji-big\n      \"\n    >\n      {{ getEmojiByReaction(selectedReactionType!) }}\n    </div>\n    <div\n      #allUsers\n      data-testid=\"all-reacting-users\"\n      class=\"str-chat__message-reactions-details-reacting-users\"\n    >\n      <stream-loading-indicator\n        *ngIf=\"isLoading; else reactions\"\n      ></stream-loading-indicator>\n      <ng-template #reactions>\n        <div\n          *ngFor=\"\n            let user of getAllUsersByReaction(selectedReactionType);\n            trackBy: trackByUserId\n          \"\n          class=\"str-chat__message-reactions-details-reacting-user\"\n        >\n          <stream-avatar-placeholder\n            data-testclass=\"avatar\"\n            class=\"str-chat__avatar str-chat__avatar--circle\"\n            type=\"user\"\n            location=\"reaction\"\n            [imageUrl]=\"user.image\"\n            [name]=\"user.name\"\n            [user]=\"user\"\n          ></stream-avatar-placeholder>\n          <span\n            data-testclass=\"reaction-user-username\"\n            class=\"str-chat__user-item--name\"\n            >{{ user.name }}</span\n          >\n        </div>\n      </ng-template>\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: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "stream-loading-indicator" }, { kind: "component", type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageReactionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'stream-message-reactions', template: "<div\n  *ngIf=\"existingReactions.length > 0\"\n  data-testid=\"reaction-list\"\n  class=\"str-chat__reaction-list str-chat__message-reactions-container\"\n  [class.str-chat__reaction-list--reverse]=\"true\"\n>\n  <ul class=\"str-chat__message-reactions\">\n    <li\n      *ngFor=\"\n        let reactionType of existingReactions;\n        trackBy: trackByMessageReaction\n      \"\n      class=\"str-chat__message-reaction\"\n      data-testclass=\"emoji\"\n      [ngStyle]=\"{ cursor: shouldHandleReactionClick ? 'pointer' : 'default' }\"\n      [class.str-chat__message-reaction-own]=\"isOwnReaction(reactionType)\"\n      (click)=\"reactionSelected(reactionType)\"\n      (keyup.enter)=\"reactionSelected(reactionType)\"\n    >\n      <span class=\"emoji str-chat__message-reaction-emoji\">\n        {{ getEmojiByReaction(reactionType) }}&nbsp;\n      </span>\n      <span\n        data-testclass=\"reaction-list-reaction-count\"\n        class=\"str-chat__message-reaction-count\"\n      >\n        {{ messageReactionCounts[reactionType] }}\n      </span>\n    </li>\n    <li>\n      <span\n        data-testid=\"reactions-count\"\n        class=\"str-chat__reaction-list--counter\"\n        >{{ reactionsCount }}</span\n      >\n    </li>\n  </ul>\n</div>\n\n<ng-container *ngIf=\"selectedReactionType\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.modalTemplate$ | async) || defaultModal;\n      context: {\n        isOpen: !!selectedReactionType,\n        messageId: messageId,\n        reactionType: selectedReactionType,\n        isOpenChangeHandler: isOpenChange,\n        content: modalContent\n      }\n    \"\n  ></ng-container>\n</ng-container>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-messageId=\"messageId\"\n  let-reactionType=\"reactionType\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    class=\"str-chat__message-reactions-details-modal\"\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=\"str-chat__message-reactions-details\">\n    <div class=\"str-chat__message-reactions-details-reaction-types\">\n      <div\n        *ngFor=\"\n          let reactionType of existingReactions;\n          trackBy: trackByMessageReaction\n        \"\n        class=\"str-chat__message-reactions-details-reaction-type\"\n        [ngStyle]=\"{\n          cursor: shouldHandleReactionClick ? 'pointer' : 'default'\n        }\"\n        attr.data-testid=\"reaction-details-selector-{{ reactionType }}\"\n        [class.str-chat__message-reactions-details-reaction-type--selected]=\"\n          reactionType === selectedReactionType\n        \"\n        (click)=\"selectedReactionType = reactionType; allUsers.scrollTop = 0\"\n        (keyup.enter)=\"\n          selectedReactionType = reactionType; allUsers.scrollTop = 0\n        \"\n      >\n        <span class=\"emoji str-chat__message-reaction-emoji\">\n          {{ getEmojiByReaction(reactionType) }}&nbsp;\n        </span>\n        <span class=\"str-chat__message-reaction-count\">\n          {{ messageReactionCounts[reactionType] }}\n        </span>\n      </div>\n    </div>\n    <div\n      class=\"\n        emoji\n        str-chat__message-reaction-emoji str-chat__message-reaction-emoji-big\n      \"\n    >\n      {{ getEmojiByReaction(selectedReactionType!) }}\n    </div>\n    <div\n      #allUsers\n      data-testid=\"all-reacting-users\"\n      class=\"str-chat__message-reactions-details-reacting-users\"\n    >\n      <stream-loading-indicator\n        *ngIf=\"isLoading; else reactions\"\n      ></stream-loading-indicator>\n      <ng-template #reactions>\n        <div\n          *ngFor=\"\n            let user of getAllUsersByReaction(selectedReactionType);\n            trackBy: trackByUserId\n          \"\n          class=\"str-chat__message-reactions-details-reacting-user\"\n        >\n          <stream-avatar-placeholder\n            data-testclass=\"avatar\"\n            class=\"str-chat__avatar str-chat__avatar--circle\"\n            type=\"user\"\n            location=\"reaction\"\n            [imageUrl]=\"user.image\"\n            [name]=\"user.name\"\n            [user]=\"user\"\n          ></stream-avatar-placeholder>\n          <span\n            data-testclass=\"reaction-user-username\"\n            class=\"str-chat__user-item--name\"\n            >{{ user.name }}</span\n          >\n        </div>\n      </ng-template>\n    </div>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: ChannelService }, { type: MessageReactionsService }, { type: CustomTemplatesService }]; }, propDecorators: { messageId: [{
+                type: Input
+            }], messageReactionCounts: [{
+                type: Input
+            }], latestReactions: [{
+                type: Input
+            }], ownReactions: [{
+                type: Input
+            }], selectorContainer: [{
+                type: ViewChild,
+                args: ['selectorContainer']
+            }] } });
+
+/**
+ * The `Message` component displays a message with additional information such as sender and date, and enables [interaction with the message (i.e. edit or react)](../concepts/message-interactions.mdx).
+ */
+class MessageComponent {
+    constructor(chatClientService, channelService, customTemplatesService, cdRef, dateParser, messageService, messageActionsService, ngZone) {
+        this.chatClientService = chatClientService;
+        this.channelService = channelService;
+        this.customTemplatesService = customTemplatesService;
+        this.cdRef = cdRef;
+        this.dateParser = dateParser;
+        this.messageService = messageService;
+        this.messageActionsService = messageActionsService;
+        this.ngZone = ngZone;
+        /**
+         * The list of [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript) that are enabled for the current user, the list of [supported interactions](../concepts/message-interactions.mdx) can be found in our message interaction guide. Unathorized actions won't be displayed on the UI. The [`MessageList`](./MessageListComponent.mdx) component automatically sets this based on [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript).
+         */
+        this.enabledMessageActions = [];
+        /**
+         * Determines if the message is being dispalyed in a channel or in a [thread](https://getstream.io/chat/docs/javascript/threads/?language=javascript).
+         */
+        this.mode = 'main';
+        /**
+         * Highlighting is used to add visual emphasize to a message when jumping to the message
+         */
+        this.isHighlighted = false;
+        this.isEditedFlagOpened = false;
+        this.messageTextParts = [];
+        this.shouldDisplayTranslationNotice = false;
+        this.displayedMessageTextContent = 'original';
+        this.imageAttachmentModalState = 'closed';
+        this.shouldDisplayThreadLink = false;
+        this.isSentByCurrentUser = false;
+        this.readByText = '';
+        this.lastReadUser = undefined;
+        this.isOnlyReadByMe = false;
+        this.isReadByMultipleUsers = false;
+        this.isMessageDeliveredAndRead = false;
+        this.parsedDate = '';
+        this.pasedEditedDate = '';
+        this.areOptionsVisible = false;
+        this.hasAttachment = false;
+        this.hasReactions = false;
+        this.replyCountParam = {
+            replyCount: undefined,
         };
+        this.areMessageOptionsOpen = false;
+        this.canDisplayReadStatus = false;
+        this.hasTouchSupport = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+        this.subscriptions = [];
+        this.isViewInited = false;
+        this.urlRegexp = /(?:(?:https?|ftp|file):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#/%=~_|$?!:,.]*\)|[A-Z0-9+&@#/%=~_|$])/gim;
+        this.emojiRegexp = new RegExp(emojiRegex(), 'g');
+        this.shouldPreventMessageMenuClose = false;
+        this._visibleMessageActionsCount = 0;
+        this.displayAs = this.messageService.displayAs;
     }
-    getAttachmentUploadContext() {
-        return {
-            isMultipleFileUploadEnabled: this.isMultipleFileUploadEnabled,
-            attachmentService: this.attachmentService,
-        };
+    get visibleMessageActionsCount() {
+        return this._visibleMessageActionsCount;
     }
-    deleteUpload(upload) {
-        if (this.isUpdate) {
-            // Delay delete to avoid modal detecting this click as outside click
-            setTimeout(() => {
-                void this.attachmentService.deleteAttachment(upload);
-            });
-        }
-        else {
-            void this.attachmentService.deleteAttachment(upload);
+    set visibleMessageActionsCount(count) {
+        this._visibleMessageActionsCount = count;
+        if (this.areOptionsVisible && this._visibleMessageActionsCount === 0) {
+            this.areOptionsVisible = false;
         }
     }
-    retryUpload(file) {
-        void this.attachmentService.retryAttachmentUpload(file);
-    }
-    clearFileInput() {
-        this.fileInput.nativeElement.value = '';
-    }
-    get isUpdate() {
-        return !!this.message;
+    ngOnInit() {
+        this.subscriptions.push(this.chatClientService.user$.subscribe((u) => {
+            if (u?.id !== this.userId) {
+                this.userId = u?.id;
+                this.setIsSentByCurrentUser();
+                this.setLastReadUser();
+                if (this.isViewInited) {
+                    this.cdRef.detectChanges();
+                }
+            }
+        }));
+        this.subscriptions.push(this.messageActionsService.customActions$.subscribe(() => {
+            if (this.message) {
+                const numberOfEnabledActions = this.messageActionsService.getAuthorizedMessageActionsCount(this.message, this.enabledMessageActions);
+                if (numberOfEnabledActions !== this.visibleMessageActionsCount) {
+                    this.visibleMessageActionsCount = numberOfEnabledActions;
+                    if (this.isViewInited) {
+                        this.cdRef.detectChanges();
+                    }
+                }
+            }
+        }));
     }
-    initTextarea() {
-        // cleanup previously built textarea
-        if (!this.canSendMessages) {
-            this.textareaRef = undefined;
+    ngOnChanges(changes) {
+        if (changes.message) {
+            this.shouldDisplayTranslationNotice = false;
+            this.displayedMessageTextContent = 'original';
+            this.createMessageParts();
+            const originalAttachments = this.message?.quoted_message?.attachments;
+            this.quotedMessageAttachments =
+                originalAttachments && originalAttachments.length
+                    ? [originalAttachments[0]]
+                    : [];
+            this.setIsSentByCurrentUser();
+            this.setLastReadUser();
+            this.readByText = this.message?.readBy
+                ? listUsers(this.message.readBy)
+                : '';
+            this.isOnlyReadByMe = !!(this.message &&
+                this.message.readBy &&
+                this.message.readBy.length === 0);
+            this.isReadByMultipleUsers = !!(this.message &&
+                this.message.readBy &&
+                this.message.readBy.length > 1);
+            this.isMessageDeliveredAndRead = !!(this.message &&
+                this.message.readBy &&
+                this.message.status === 'received' &&
+                this.message.readBy.length > 0);
+            this.parsedDate =
+                (this.message &&
+                    this.message.created_at &&
+                    this.dateParser.parseDateTime(this.message.created_at)) ||
+                    '';
+            this.pasedEditedDate =
+                (this.message &&
+                    this.message.message_text_updated_at &&
+                    this.dateParser.parseDateTime(new Date(this.message.message_text_updated_at))) ||
+                    '';
+            this.hasAttachment =
+                !!this.message?.attachments && !!this.message.attachments.length;
+            this.hasReactions =
+                !!this.message?.reaction_counts &&
+                    Object.keys(this.message.reaction_counts).length > 0;
+            this.replyCountParam = { replyCount: this.message?.reply_count };
         }
-        if (!this.canSendMessages || this.textareaRef || !this.textareaAnchor) {
-            return;
+        if (changes.enabledMessageActions) {
+            this.canReactToMessage =
+                this.enabledMessageActions.indexOf('send-reaction') !== -1;
+            this.canReceiveReadEvents =
+                this.enabledMessageActions.indexOf('read-events') !== -1;
+            this.canDisplayReadStatus =
+                this.canReceiveReadEvents !== false &&
+                    this.enabledMessageActions.indexOf('read-events') !== -1;
         }
-        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.textareaType);
-        this.textareaRef =
-            this.textareaAnchor.viewContainerRef.createComponent(componentFactory);
-        this.cdRef.detectChanges();
-    }
-    async areAttachemntsValid(fileList) {
-        if (!fileList) {
-            return true;
+        if (changes.message || changes.enabledMessageActions || changes.mode) {
+            this.shouldDisplayThreadLink =
+                !!this.message?.reply_count && this.mode !== 'thread';
         }
-        if (!this.appSettings) {
-            await this.chatClient.getAppSettings();
+        if (changes.message || changes.mode || changes.enabledMessageActions) {
+            this.areOptionsVisible = this.message
+                ? !(!this.message.type ||
+                    this.message.type === 'error' ||
+                    this.message.type === 'system' ||
+                    this.message.type === 'deleted' ||
+                    this.message.type === 'ephemeral' ||
+                    this.message.status === 'failed' ||
+                    this.message.status === 'sending' ||
+                    (this.mode === 'thread' && !this.message.parent_id) ||
+                    this.message.deleted_at ||
+                    this.enabledMessageActions.length === 0)
+                : false;
         }
-        let isValid = true;
-        Array.from(fileList).forEach((f) => {
-            let hasBlockedExtension;
-            let hasBlockedMimeType;
-            let hasNotAllowedExtension;
-            let hasNotAllowedMimeType;
-            if (isImageFile(f)) {
-                hasBlockedExtension =
-                    !!this.appSettings?.image_upload_config?.blocked_file_extensions?.find((ext) => f.name.endsWith(ext));
-                hasBlockedMimeType =
-                    !!this.appSettings?.image_upload_config?.blocked_mime_types?.find((type) => f.type === type);
-                hasNotAllowedExtension =
-                    !!this.appSettings?.image_upload_config?.allowed_file_extensions
-                        ?.length &&
-                        !this.appSettings?.image_upload_config?.allowed_file_extensions?.find((ext) => f.name.endsWith(ext));
-                hasNotAllowedMimeType =
-                    !!this.appSettings?.image_upload_config?.allowed_mime_types?.length &&
-                        !this.appSettings?.image_upload_config?.allowed_mime_types?.find((type) => f.type === type);
+        if (changes.message || changes.enabledMessageActions) {
+            if (this.message) {
+                this.visibleMessageActionsCount =
+                    this.messageActionsService.getAuthorizedMessageActionsCount(this.message, this.enabledMessageActions);
             }
             else {
-                hasBlockedExtension =
-                    !!this.appSettings?.file_upload_config?.blocked_file_extensions?.find((ext) => f.name.endsWith(ext));
-                hasBlockedMimeType =
-                    !!this.appSettings?.file_upload_config?.blocked_mime_types?.find((type) => f.type === type);
-                hasNotAllowedExtension =
-                    !!this.appSettings?.file_upload_config?.allowed_file_extensions
-                        ?.length &&
-                        !this.appSettings?.file_upload_config?.allowed_file_extensions?.find((ext) => f.name.endsWith(ext));
-                hasNotAllowedMimeType =
-                    !!this.appSettings?.file_upload_config?.allowed_mime_types?.length &&
-                        !this.appSettings?.file_upload_config?.allowed_mime_types?.find((type) => f.type === type);
-            }
-            if (hasBlockedExtension ||
-                hasBlockedMimeType ||
-                hasNotAllowedExtension ||
-                hasNotAllowedMimeType) {
-                this.notificationService.addTemporaryNotification('streamChat.Error uploading file, extension not supported', undefined, undefined, { name: f.name, ext: f.type });
-                isValid = false;
+                this.visibleMessageActionsCount = 0;
             }
-        });
-        return isValid;
-    }
-    setCanSendMessages() {
-        const capabilities = this.channel?.data?.own_capabilities;
-        if (!capabilities) {
-            this.canSendMessages = false;
-        }
-        else {
-            this.canSendMessages =
-                capabilities.indexOf(this.mode === 'main' ? 'send-message' : 'send-reply') !== -1;
-        }
-        if (this.isViewInited) {
-            this.cdRef.detectChanges();
-            this.initTextarea();
         }
     }
-    get parentMessageId() {
-        let parentMessageId = undefined;
-        if (this.mode === 'thread') {
-            this.channelService.activeParentMessageId$
-                .pipe(first())
-                .subscribe((id) => (parentMessageId = id));
+    ngAfterViewInit() {
+        this.isViewInited = true;
+        if (this.hasTouchSupport && this.messageBubble?.nativeElement) {
+            this.ngZone.runOutsideAngular(() => {
+                this.registerMenuTriggerEventHandlers();
+            });
         }
-        return parentMessageId;
-    }
-    startCooldown(cooldown) {
-        this.textareaPlaceholder = this.slowModeTextareaPlaceholder;
-        this.isCooldownInProgress = true;
-        this.cooldown$ = timer(0, 1000).pipe(take(cooldown + 1), map((v) => cooldown - v), tap((v) => {
-            if (v === 0) {
-                this.stopCooldown();
-            }
-        }));
-    }
-    stopCooldown() {
-        this.cooldown$ = undefined;
-        this.isCooldownInProgress = false;
-        this.textareaPlaceholder = this.defaultTextareaPlaceholder;
-    }
-}
-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: ChatClientService }, { token: EmojiInputService }, { token: CustomTemplatesService }], 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" }, outputs: { messageUpdate: "messageUpdate" }, host: { properties: { "class": "this.class" } }, providers: [AttachmentService, EmojiInputService], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "textareaAnchor", first: true, predicate: TextareaDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"str-chat__message-input str-chat-angular__message-input\">\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  <ng-container *ngIf=\"canSendMessages; else notAllowed\">\n    <div\n      class=\"\n        str-chat__message-input-inner\n        str-chat-angular__message-input-inner\n      \"\n    >\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=\"\n              str-chat-angular__avatar-host\n              str-chat__message-sender-avatar\n            \"\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=\"\n              quoted-message-preview-content-inner\n              str-chat__quoted-message-bubble\n            \"\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 && !message\"\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    </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", 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: 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: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.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], template: "<div class=\"str-chat__message-input str-chat-angular__message-input\">\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  <ng-container *ngIf=\"canSendMessages; else notAllowed\">\n    <div\n      class=\"\n        str-chat__message-input-inner\n        str-chat-angular__message-input-inner\n      \"\n    >\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=\"\n              str-chat-angular__avatar-host\n              str-chat__message-sender-avatar\n            \"\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=\"\n              quoted-message-preview-content-inner\n              str-chat__quoted-message-bubble\n            \"\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 && !message\"\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    </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" }]
-        }], ctorParameters: function () { return [{ type: ChannelService }, { type: NotificationService }, { type: AttachmentService }, { type: MessageInputConfigService }, { type: i0.Type, decorators: [{
-                    type: Inject,
-                    args: [textareaInjectionToken]
-                }] }, { type: i0.ComponentFactoryResolver }, { type: i0.ChangeDetectorRef }, { type: ChatClientService }, { type: EmojiInputService }, { type: CustomTemplatesService }]; }, propDecorators: { isFileUploadEnabled: [{
-                type: Input
-            }], areMentionsEnabled: [{
-                type: Input
-            }], mentionScope: [{
-                type: Input
-            }], mode: [{
-                type: Input
-            }], isMultipleFileUploadEnabled: [{
-                type: Input
-            }], message: [{
-                type: Input
-            }], sendMessage$: [{
-                type: Input
-            }], inputMode: [{
-                type: Input
-            }], autoFocus: [{
-                type: Input
-            }], messageUpdate: [{
-                type: Output
-            }], class: [{
-                type: HostBinding
-            }], fileInput: [{
-                type: ViewChild,
-                args: ['fileInput']
-            }], textareaAnchor: [{
-                type: ViewChild,
-                args: [TextareaDirective, { static: false }]
-            }] } });
-
-/**
- * The edit message form displays a modal that's opened when a user edits a message. The component uses the [`MessageActionsService`](../../services/MessageActionsService) to know which message is being edited.
- *
- * By default this is displayed within the [`stream-channel` component](../../components/ChannelComponent).
- */
-class EditMessageFormComponent {
-    constructor(customTemplatesService, messageActionsService) {
-        this.customTemplatesService = customTemplatesService;
-        this.messageActionsService = messageActionsService;
-        this.class = 'str-chat-angular__edit-message-form';
-        this.isModalOpen = false;
-        this.sendMessageSubject = new Subject();
-        this.subscriptions = [];
-        this.sendMessage$ = this.sendMessageSubject.asObservable();
-    }
-    ngOnInit() {
-        this.messageActionsService.messageToEdit$.subscribe((message) => {
-            if ((message && !this.isModalOpen) || (!message && this.isModalOpen)) {
-                this.message = message;
-                this.isModalOpen = !!message;
-            }
-        });
     }
     ngOnDestroy() {
         this.subscriptions.forEach((s) => s.unsubscribe());
     }
-    getEditModalContext() {
-        return {
-            isOpen: this.isModalOpen,
-            isOpenChangeHandler: (isOpen) => {
-                this.isModalOpen = isOpen;
-                if (!this.isModalOpen) {
-                    this.dismissed();
-                }
-            },
-            content: this.modalContent,
-        };
-    }
-    getMessageInputContext() {
-        return {
-            message: this.message,
-            messageUpdateHandler: () => {
-                this.dismissed();
-            },
-            isFileUploadEnabled: undefined,
-            areMentionsEnabled: undefined,
-            isMultipleFileUploadEnabled: undefined,
-            mentionScope: undefined,
-            mode: undefined,
-            sendMessage$: this.sendMessage$,
-        };
-    }
-    sendClicked() {
-        this.sendMessageSubject.next();
+    mousePushedDown(event) {
+        if (!this.hasTouchSupport ||
+            event.button !== 0 ||
+            !this.areOptionsVisible) {
+            return;
+        }
+        this.startMessageMenuShowTimer({ fromTouch: false });
     }
-    dismissed() {
-        this.isModalOpen = false;
-        this.message = undefined;
-        this.messageActionsService.messageToEdit$.next(undefined);
+    mouseReleased() {
+        this.stopMessageMenuShowTimer();
     }
-}
-EditMessageFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: EditMessageFormComponent, deps: [{ token: CustomTemplatesService }, { token: MessageActionsService }], target: i0.ɵɵFactoryTarget.Component });
-EditMessageFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: EditMessageFormComponent, selector: "stream-edit-message-form", host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["editMessageForm"], descendants: true, static: true }], ngImport: i0, template: "<ng-container\n  *ngTemplateOutlet=\"\n    (customTemplatesService.modalTemplate$ | async) || defaultModal;\n    context: getEditModalContext()\n  \"\n></ng-container>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    *ngIf=\"isOpen\"\n    [isOpen]=\"isOpen\"\n    [content]=\"content\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n  >\n  </stream-modal>\n</ng-template>\n\n<ng-template #editMessageForm>\n  <div class=\"str-chat__edit-message-form\">\n    <ng-template\n      #defaultInput\n      let-messageInput=\"message\"\n      let-messageUpdateHandler=\"messageUpdateHandler\"\n      let-sendMessage$Input=\"sendMessage$\"\n    >\n      <stream-message-input\n        [message]=\"messageInput\"\n        [sendMessage$]=\"sendMessage$Input\"\n        (messageUpdate)=\"messageUpdateHandler()\"\n      ></stream-message-input>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.messageInputTemplate$ | async) || defaultInput;\n        context: getMessageInputContext()\n      \"\n    >\n    </ng-container>\n\n    <stream-notification-list></stream-notification-list>\n    <div\n      class=\"\n        str-chat__message-team-form-footer\n        str-chat__message-team-form-footer-angular\n      \"\n    >\n      <div class=\"str-chat__edit-message-form-options\">\n        <button\n          class=\"str-chat__edit-message-cancel\"\n          translate\n          data-testid=\"cancel-button\"\n          (click)=\"dismissed()\"\n        >\n          streamChat.Cancel\n        </button>\n        <button\n          type=\"submit\"\n          translate\n          class=\"str-chat__edit-message-send\"\n          data-testid=\"send-button\"\n          (click)=\"sendClicked()\"\n          (keyup.enter)=\"sendClicked()\"\n        >\n          streamChat.Send\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ 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: i10.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: MessageInputComponent, selector: "stream-message-input", inputs: ["isFileUploadEnabled", "areMentionsEnabled", "mentionScope", "mode", "isMultipleFileUploadEnabled", "message", "sendMessage$", "inputMode", "autoFocus"], outputs: ["messageUpdate"] }, { kind: "component", type: NotificationListComponent, selector: "stream-notification-list" }, { kind: "component", type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: EditMessageFormComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'stream-edit-message-form', template: "<ng-container\n  *ngTemplateOutlet=\"\n    (customTemplatesService.modalTemplate$ | async) || defaultModal;\n    context: getEditModalContext()\n  \"\n></ng-container>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    *ngIf=\"isOpen\"\n    [isOpen]=\"isOpen\"\n    [content]=\"content\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n  >\n  </stream-modal>\n</ng-template>\n\n<ng-template #editMessageForm>\n  <div class=\"str-chat__edit-message-form\">\n    <ng-template\n      #defaultInput\n      let-messageInput=\"message\"\n      let-messageUpdateHandler=\"messageUpdateHandler\"\n      let-sendMessage$Input=\"sendMessage$\"\n    >\n      <stream-message-input\n        [message]=\"messageInput\"\n        [sendMessage$]=\"sendMessage$Input\"\n        (messageUpdate)=\"messageUpdateHandler()\"\n      ></stream-message-input>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.messageInputTemplate$ | async) || defaultInput;\n        context: getMessageInputContext()\n      \"\n    >\n    </ng-container>\n\n    <stream-notification-list></stream-notification-list>\n    <div\n      class=\"\n        str-chat__message-team-form-footer\n        str-chat__message-team-form-footer-angular\n      \"\n    >\n      <div class=\"str-chat__edit-message-form-options\">\n        <button\n          class=\"str-chat__edit-message-cancel\"\n          translate\n          data-testid=\"cancel-button\"\n          (click)=\"dismissed()\"\n        >\n          streamChat.Cancel\n        </button>\n        <button\n          type=\"submit\"\n          translate\n          class=\"str-chat__edit-message-send\"\n          data-testid=\"send-button\"\n          (click)=\"sendClicked()\"\n          (keyup.enter)=\"sendClicked()\"\n        >\n          streamChat.Send\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: CustomTemplatesService }, { type: MessageActionsService }]; }, propDecorators: { class: [{
-                type: HostBinding
-            }], modalContent: [{
-                type: ViewChild,
-                args: ['editMessageForm', { static: true }]
-            }] } });
-
-/**
- * The component watches for the [`channelService.bouncedMessage$` stream](../../services/ChannelService/#bouncedmessage) and opens the bounce modal if a message is emitted.
- *
- * To bounce messages, you need to set up [semantic filters for moderation](https://getstream.io/automated-moderation/docs/automod_configuration/?q=semantic%20filters).
- */
-class MessageBouncePromptComponent {
-    constructor(channelService, customTemplatesService, messageActionsService) {
-        this.channelService = channelService;
-        this.customTemplatesService = customTemplatesService;
-        this.messageActionsService = messageActionsService;
-        this.class = 'str-chat__message-bounce-prompt';
-        this.isModalOpen = false;
-        this.subscriptions = [];
-        this.messageBounceModalOpenChanged = (isOpen) => {
-            this.isModalOpen = isOpen;
-            if (!isOpen) {
-                this.message = undefined;
-                this.channelService.bouncedMessage$.next(undefined);
-            }
-        };
-        this.subscriptions.push(this.channelService.bouncedMessage$.subscribe((m) => {
-            if (m !== this.message) {
-                this.message = m;
-                if (this.message) {
-                    this.isModalOpen = true;
-                }
-            }
-        }));
+    touchStarted() {
+        if (!this.areOptionsVisible) {
+            return;
+        }
+        this.startMessageMenuShowTimer({ fromTouch: true });
     }
-    ngOnDestroy() {
-        this.subscriptions.forEach((s) => s.unsubscribe());
+    touchEnded() {
+        this.stopMessageMenuShowTimer();
     }
-    async resendMessage() {
-        this.isModalOpen = false;
-        await this.channelService.resendMessage(this.message);
-        this.message = undefined;
-        this.channelService.bouncedMessage$.next(undefined);
+    messageBubbleClicked(event) {
+        if (!this.hasTouchSupport) {
+            return;
+        }
+        if (this.shouldPreventMessageMenuClose) {
+            event.stopPropagation();
+            this.shouldPreventMessageMenuClose = false;
+        }
+        else if (this.areMessageOptionsOpen) {
+            this.messageMenuTrigger?.hide();
+        }
     }
-    async deleteMessage() {
+    messageOptionsButtonClicked() {
         if (!this.message) {
             return;
         }
-        this.isModalOpen = false;
-        await this.channelService.deleteMessage(this.message, true);
-        this.message = undefined;
-        this.channelService.bouncedMessage$.next(undefined);
+        if (this.messageActionsService.customActionClickHandler) {
+            this.messageActionsService.customActionClickHandler({
+                message: this.message,
+                enabledActions: this.enabledMessageActions,
+                customActions: this.messageActionsService.customActions$.getValue(),
+                isMine: this.isSentByCurrentUser,
+                messageTextHtmlElement: this.messageTextElement?.nativeElement,
+            });
+        }
+        else {
+            this.areMessageOptionsOpen = !this.areMessageOptionsOpen;
+        }
     }
-    editMessage() {
-        this.isModalOpen = false;
-        this.messageActionsService.messageToEdit$.next(this.message);
-        this.message = undefined;
-        this.channelService.bouncedMessage$.next(undefined);
+    messageActionsBoxClicked(floatingContent) {
+        floatingContent.hide();
     }
-}
-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" }] });
-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" }]
-        }], ctorParameters: function () { return [{ type: ChannelService }, { type: CustomTemplatesService }, { type: MessageActionsService }]; }, propDecorators: { class: [{
-                type: HostBinding
-            }] } });
-
-/**
- * The `Channel` component is a container component that displays the [`ChannelHeader`](./ChannelHeaderComponent.mdx), [`MessageList`](./MessageListComponent.mdx), [`NotificationList`](./NotificationListComponent.mdx) and [`MessageInput`](./MessageInputComponent.mdx) components. You can also provide the [`Thread`](./ThreadComponent.mdx) component to use message [threads](https://getstream.io/chat/docs/javascript/threads/?language=javascript).
- */
-class ChannelComponent {
-    constructor(channelService, themeService, customTemplatesService) {
-        this.channelService = channelService;
-        this.themeService = themeService;
-        this.customTemplatesService = customTemplatesService;
-        this.subscriptions = [];
-        this.isError$ = combineLatest([
-            this.channelService.channelQueryState$,
-            this.channelService.activeChannel$,
-        ]).pipe(map(([state, activeChannel]) => {
-            return !activeChannel && state?.state === 'error';
-        }));
-        this.isInitializing$ = combineLatest([
-            this.channelService.channelQueryState$,
-            this.channelService.activeChannel$,
-        ]).pipe(map(([state, activeChannel]) => {
-            return !activeChannel && state?.state === 'in-progress';
-        }));
-        this.isActiveThread$ = this.channelService.activeParentMessageId$.pipe(map((id) => !!id));
-        this.theme$ = this.themeService.theme$;
-        this.isActiveChannel$ = this.channelService.activeChannel$.pipe(map((c) => !!c));
+    getAttachmentListContext() {
+        return {
+            messageId: this.message?.id || '',
+            attachments: this.message?.attachments || [],
+            parentMessageId: this.message?.parent_id,
+            imageModalStateChangeHandler: (state) => (this.imageAttachmentModalState = state),
+        };
     }
-}
-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.editMessageFormTemplate$ | async) ||\n        defaultEditMessageForm\n      \"\n    ></ng-container>\n    <ng-template #defaultEditMessageForm>\n      <stream-edit-message-form></stream-edit-message-form>\n    </ng-template>\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: EditMessageFormComponent, selector: "stream-edit-message-form" }, { kind: "component", type: MessageBouncePromptComponent, selector: "stream-message-bounce-prompt" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.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.editMessageFormTemplate$ | async) ||\n        defaultEditMessageForm\n      \"\n    ></ng-container>\n    <ng-template #defaultEditMessageForm>\n      <stream-edit-message-form></stream-edit-message-form>\n    </ng-template>\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" }]
-        }], ctorParameters: function () { return [{ type: ChannelService }, { type: ThemeService }, { type: CustomTemplatesService }]; } });
-
-const listUsers = (users) => {
-    let outStr = '';
-    const slicedArr = users.map((item) => item.name || item.id).slice(0, 5);
-    const restLength = users.length - slicedArr.length;
-    const commaSeparatedUsers = slicedArr.join(', ');
-    outStr = commaSeparatedUsers;
-    if (restLength > 0) {
-        outStr += ` +${restLength}`;
+    getMessageContext() {
+        return {
+            message: this.message,
+            enabledMessageActions: this.enabledMessageActions,
+            isHighlighted: this.isHighlighted,
+            isLastSentMessage: this.isLastSentMessage,
+            mode: this.mode,
+            customActions: this.messageActionsService.customActions$.getValue(),
+            parsedDate: this.parsedDate,
+            scroll$: this.scroll$,
+        };
     }
-    return outStr;
-};
-
-const getChannelDisplayText = (channel, currentUser) => {
-    if (channel.data?.name) {
-        return channel.data.name;
+    getQuotedMessageAttachmentListContext() {
+        return {
+            messageId: this.message?.quoted_message?.id || '',
+            attachments: this.quotedMessageAttachments,
+            parentMessageId: this?.message?.quoted_message?.parent_id,
+        };
     }
-    if (channel.state.members && Object.keys(channel.state.members).length > 0) {
-        const members = Object.values(channel.state.members)
-            .map((m) => m.user || { id: m.user_id })
-            .filter((m) => m.id !== currentUser?.id);
-        return listUsers(members);
+    getMessageReactionsContext() {
+        return {
+            messageReactionCounts: this.message?.reaction_counts || {},
+            latestReactions: this.message?.latest_reactions || [],
+            messageId: this.message?.id,
+            ownReactions: this.message?.own_reactions || [],
+        };
     }
-    return channel.id;
-};
-
-/**
- * The `ChannelHeader` component displays the avatar and name of the currently active channel along with member and watcher information. You can read about [the difference between members and watchers](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript#watchers-vs-members) in the platform documentation. Please note that number of watchers is only displayed if the user has [`connect-events` capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript)
- */
-class ChannelHeaderComponent {
-    constructor(channelService, customTemplatesService, cdRef, chatClientService) {
-        this.channelService = channelService;
-        this.customTemplatesService = customTemplatesService;
-        this.cdRef = cdRef;
-        this.chatClientService = chatClientService;
-        this.subscriptions = [];
-        this.channelService.activeChannel$.subscribe((c) => {
-            this.activeChannel = c;
-            const capabilities = this.activeChannel?.data
-                ?.own_capabilities;
-            if (!capabilities) {
-                return;
-            }
-            this.canReceiveConnectEvents =
-                capabilities.indexOf('connect-events') !== -1;
-        });
+    messageClicked() {
+        if (this.message?.status === 'failed' &&
+            this.message?.errorStatusCode !== 403) {
+            this.resendMessage();
+        }
+        else if (this.message?.type === 'error' &&
+            this.message?.moderation_details) {
+            this.openMessageBouncePrompt();
+        }
+        else {
+            this.isEditedFlagOpened = !this.isEditedFlagOpened;
+        }
     }
-    ngOnInit() {
-        this.subscriptions.push(this.customTemplatesService.channelActionsTemplate$.subscribe((template) => {
-            this.channelActionsTemplate = template;
-            this.cdRef.detectChanges();
-        }));
-        this.subscriptions.push(this.customTemplatesService.channelHeaderInfoTemplate$.subscribe((template) => {
-            this.channelHeaderInfoTemplate = template;
-            this.cdRef.detectChanges();
-        }));
+    resendMessage() {
+        void this.channelService.resendMessage(this.message);
     }
-    ngOnDestroy() {
-        this.subscriptions.forEach((s) => s.unsubscribe());
+    setAsActiveParentMessage() {
+        void this.channelService.setAsActiveParentMessage(this.message);
     }
-    getChannelActionsContext() {
-        return { channel: this.activeChannel };
+    getMentionContext(messagePart) {
+        return {
+            content: messagePart.content,
+            user: messagePart.user,
+        };
     }
-    getChannelInfoContext() {
-        return { channel: this.activeChannel };
+    getMessageActionsBoxContext() {
+        return {
+            isMine: this.isSentByCurrentUser,
+            enabledActions: this.enabledMessageActions,
+            message: this.message,
+            messageTextHtmlElement: this.messageTextElement?.nativeElement,
+        };
     }
-    get memberCountParam() {
-        return { memberCount: this.activeChannel?.data?.member_count || 0 };
+    getDeliveredStatusContext() {
+        return {
+            message: this.message,
+        };
     }
-    get watcherCountParam() {
-        return { watcherCount: this.activeChannel?.state?.watcher_count || 0 };
+    getSendingStatusContext() {
+        return {
+            message: this.message,
+        };
     }
-    get displayText() {
-        if (!this.activeChannel) {
-            return '';
-        }
-        return getChannelDisplayText(this.activeChannel, this.chatClientService.chatClient.user);
+    getReadStatusContext() {
+        return {
+            message: this.message,
+            readByText: this.readByText,
+        };
     }
-    get avatarName() {
-        return this.activeChannel?.data?.name;
+    getMessageMetadataContext() {
+        return {
+            message: this.message,
+        };
     }
-}
-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=\"\n        str-chat__header-livestream-left--title str-chat__channel-header-title\n      \"\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=\"\n          str-chat__header-livestream-left--members\n          str-chat__channel-header-info\n        \"\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" }] });
-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=\"\n        str-chat__header-livestream-left--title str-chat__channel-header-title\n      \"\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=\"\n          str-chat__header-livestream-left--members\n          str-chat__channel-header-info\n        \"\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" }]
-        }], ctorParameters: function () { return [{ type: ChannelService }, { type: CustomTemplatesService }, { type: i0.ChangeDetectorRef }, { type: ChatClientService }]; } });
-
-const isOnSeparateDate = (date1, date2) => {
-    if (date1.getDate() !== date2.getDate()) {
-        return true;
+    jumpToMessage(messageId, parentMessageId) {
+        void this.channelService.jumpToMessage(messageId, parentMessageId);
     }
-    else if (date1.getFullYear() !== date2.getFullYear() ||
-        date1.getMonth() !== date2.getMonth()) {
-        return true;
+    displayTranslatedMessage() {
+        this.createMessageParts(true);
     }
-    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';
+    displayOriginalMessage() {
+        this.createMessageParts(false);
     }
-}
-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') => {
-    const parsedTime = Dayjs(date);
-    switch (format) {
-        case 'date': {
-            return parsedTime.calendar(null, {
-                sameDay: '[Today]',
-                nextDay: '[Tomorrow]',
-                nextWeek: 'dddd',
-                lastDay: '[Yesterday]',
-                lastWeek: '[Last] dddd',
-                sameElse: 'MM/DD/YYYY', // Everything else ( 10/17/2011 )
+    openMessageBouncePrompt() {
+        this.channelService.bouncedMessage$.next(this.message);
+    }
+    createMessageParts(shouldTranslate = true) {
+        this.messageTextParts = undefined;
+        this.messageText = undefined;
+        let content = this.getMessageContent(shouldTranslate);
+        if ((!this.message.mentioned_users ||
+            this.message.mentioned_users.length === 0) &&
+            !content?.match(this.emojiRegexp) &&
+            !content?.match(this.urlRegexp)) {
+            this.messageTextParts = undefined;
+            this.messageText = content;
+            return;
+        }
+        if (!content) {
+            return;
+        }
+        if (!this.message.mentioned_users ||
+            this.message.mentioned_users.length === 0) {
+            content = this.fixEmojiDisplay(content);
+            content = this.wrapLinksWithAnchorTag(content);
+            this.messageTextParts = [{ content, type: 'text' }];
+        }
+        else {
+            this.messageTextParts = [];
+            let text = content;
+            this.message.mentioned_users.forEach((user) => {
+                const mention = `@${user.name || user.id}`;
+                const precedingText = text.substring(0, text.indexOf(mention));
+                let formattedPrecedingText = this.fixEmojiDisplay(precedingText);
+                formattedPrecedingText = this.wrapLinksWithAnchorTag(formattedPrecedingText);
+                this.messageTextParts.push({
+                    content: formattedPrecedingText,
+                    type: 'text',
+                });
+                this.messageTextParts.push({
+                    content: mention,
+                    type: 'mention',
+                    user,
+                });
+                text = text.replace(precedingText + mention, '');
             });
+            if (text) {
+                text = this.fixEmojiDisplay(text);
+                text = this.wrapLinksWithAnchorTag(text);
+                this.messageTextParts.push({ content: text, type: 'text' });
+            }
         }
-        case 'date-time': {
-            return parsedTime.calendar();
+    }
+    getMessageContent(shouldTranslate) {
+        const originalContent = this.message?.text;
+        if (shouldTranslate) {
+            const translation = this.message?.translation;
+            if (translation) {
+                this.shouldDisplayTranslationNotice = true;
+                this.displayedMessageTextContent = 'translation';
+            }
+            return translation || originalContent;
         }
-        case 'time': {
-            return parsedTime.format('h:mm A');
+        else {
+            this.displayedMessageTextContent = 'original';
+            return originalContent;
         }
     }
-};
-
-/**
- * The `DateParserService` parses dates into user-friendly string representations.
- */
-class DateParserService {
-    constructor() { }
-    /**
-     * Return a user-friendly string representation of the time
-     * @param date
-     * @returns The parsed time
-     */
-    parseTime(date) {
-        if (this.customTimeParser) {
-            return this.customTimeParser(date);
-        }
-        return parseDate(date, 'time');
+    fixEmojiDisplay(content) {
+        // Wrap emojis in span to display emojis correctly in Chrome https://bugs.chromium.org/p/chromium/issues/detail?id=596223
+        // Based on this: https://stackoverflow.com/questions/4565112/javascript-how-to-find-out-if-the-user-browser-is-chrome
+        /* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any */
+        const isChrome = !!window.chrome && typeof window.opr === 'undefined';
+        /* eslint-enable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any */
+        content = content.replace(this.emojiRegexp, (match) => `<span ${isChrome ? 'class="str-chat__emoji-display-fix"' : ''}>${match}</span>`);
+        return content;
     }
-    /**
-     * Return a user-friendly string representation of the date (year, month and date)
-     * @param date
-     * @returns The parsed date
-     */
-    parseDate(date) {
-        if (this.customDateParser) {
-            return this.customDateParser(date);
+    wrapLinksWithAnchorTag(content) {
+        if (this.displayAs === 'html') {
+            return content;
         }
-        return parseDate(date, 'date');
+        content = content.replace(this.urlRegexp, (match) => this.messageService.customLinkRenderer
+            ? this.messageService.customLinkRenderer(match)
+            : `<a href="${match}" target="_blank" rel="nofollow">${match}</a>`);
+        return content;
     }
-    /**
-     * Return a user-friendly string representation of the date and time
-     * @param date
-     * @returns The parsed date
-     */
-    parseDateTime(date) {
-        if (this.customDateTimeParser) {
-            return this.customDateTimeParser(date);
-        }
-        return parseDate(date, 'date-time');
+    setIsSentByCurrentUser() {
+        this.isSentByCurrentUser = this.message?.user?.id === this.userId;
     }
-}
-DateParserService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateParserService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-DateParserService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateParserService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateParserService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return []; } });
-
-/**
- * The `ChannelPreview` component displays a channel preview in the channel list, it consists of the image, name and latest message of the channel.
- */
-class ChannelPreviewComponent {
-    constructor(channelService, ngZone, chatClientService, messageService, customTemplatesService, dateParser) {
-        this.channelService = channelService;
-        this.ngZone = ngZone;
-        this.chatClientService = chatClientService;
-        this.customTemplatesService = customTemplatesService;
-        this.dateParser = dateParser;
-        this.isActive = false;
-        this.isUnreadMessageWasCalled = false;
-        this.isUnread = false;
-        this.latestMessageText = 'streamChat.Nothing yet...';
-        this.subscriptions = [];
-        this.canSendReadEvents = true;
-        this.displayAs = messageService.displayAs;
+    setLastReadUser() {
+        this.lastReadUser = this.message?.readBy?.filter((u) => u.id !== this.userId)[0];
     }
-    ngOnInit() {
-        this.subscriptions.push(this.chatClientService.user$.subscribe((user) => {
-            if (user?.id !== this.userId) {
-                this.userId = user?.id;
-            }
-        }));
-        this.subscriptions.push(this.channelService.activeChannel$.subscribe((activeChannel) => (this.isActive = activeChannel?.id === this.channel?.id)));
-        const messages = this.channel?.state?.latestMessages;
-        if (messages && messages.length > 0) {
-            this.setLatestMessage(messages[messages.length - 1]);
+    startMessageMenuShowTimer(options) {
+        this.stopMessageMenuShowTimer();
+        if (this.scroll$) {
+            this.subscriptions.push(this.scroll$.pipe(take$1(1)).subscribe(() => {
+                this.stopMessageMenuShowTimer();
+            }));
         }
-        this.updateUnreadState();
-        const capabilities = this.channel?.data?.own_capabilities || [];
-        this.canSendReadEvents = capabilities.indexOf('read-events') !== -1;
-        this.subscriptions.push(this.channel.on('message.new', this.handleMessageEvent.bind(this)));
-        this.subscriptions.push(this.channel.on('message.updated', this.handleMessageEvent.bind(this)));
-        this.subscriptions.push(this.channel.on('message.deleted', this.handleMessageEvent.bind(this)));
-        this.subscriptions.push(this.channel.on('channel.truncated', this.handleMessageEvent.bind(this)));
-        this.subscriptions.push(this.channel.on('message.read', () => this.ngZone.run(() => {
-            this.isUnreadMessageWasCalled = false;
-            this.updateUnreadState();
-        })));
-        this.subscriptions.push(this.chatClientService.events$
-            .pipe(filter((e) => e.eventType === 'notification.mark_unread' &&
-            this.channel.id === e.event?.channel_id))
-            .subscribe(() => {
+        this.showMessageMenuTimeout = setTimeout(() => {
+            if (!this.message) {
+                return;
+            }
             this.ngZone.run(() => {
-                this.isUnreadMessageWasCalled = true;
-                this.updateUnreadState();
+                if (this.messageActionsService.customActionClickHandler) {
+                    this.messageActionsService.customActionClickHandler({
+                        message: this.message,
+                        enabledActions: this.enabledMessageActions,
+                        customActions: this.messageActionsService.customActions$.getValue(),
+                        isMine: this.isSentByCurrentUser,
+                        messageTextHtmlElement: this.messageTextElement?.nativeElement,
+                    });
+                    return;
+                }
+                else {
+                    this.shouldPreventMessageMenuClose = !options.fromTouch;
+                    this.messageMenuTrigger?.show();
+                }
+                if (this.isViewInited) {
+                    this.cdRef.detectChanges();
+                }
+                this.showMessageMenuTimeout = undefined;
             });
-        }));
-    }
-    ngOnDestroy() {
-        this.subscriptions.forEach((s) => s.unsubscribe());
-    }
-    get avatarImage() {
-        return this.channel?.data?.image;
+        }, 400);
     }
-    get avatarName() {
-        return this.channel?.data?.name;
+    registerMenuTriggerEventHandlers() {
+        this.messageBubble.nativeElement.addEventListener('touchstart', () => this.touchStarted());
+        this.messageBubble.nativeElement.addEventListener('touchend', () => this.touchEnded());
+        this.messageBubble.nativeElement.addEventListener('mousedown', (e) => this.mousePushedDown(e));
+        this.messageBubble.nativeElement.addEventListener('mouseup', () => this.mouseReleased());
+        this.messageBubble.nativeElement.addEventListener('click', (e) => this.messageBubbleClicked(e));
     }
-    get title() {
-        if (!this.channel) {
-            return '';
+    stopMessageMenuShowTimer() {
+        if (this.showMessageMenuTimeout) {
+            clearTimeout(this.showMessageMenuTimeout);
+            this.showMessageMenuTimeout = undefined;
         }
-        return getChannelDisplayText(this.channel, this.chatClientService.chatClient.user);
     }
-    setAsActiveChannel() {
-        void this.channelService.setAsActiveChannel(this.channel);
-    }
-    handleMessageEvent(event) {
-        this.ngZone.run(() => {
-            if (this.channel?.state.latestMessages.length === 0) {
-                this.latestMessage = undefined;
-                this.latestMessageStatus = undefined;
-                this.latestMessageText = 'streamChat.Nothing yet...';
-                this.latestMessageTime = undefined;
-                return;
-            }
-            const latestMessage = this.channel?.state.latestMessages[this.channel?.state.latestMessages.length - 1];
-            if (!event.message || latestMessage?.id !== event.message.id) {
-                return;
-            }
-            this.setLatestMessage(latestMessage);
-            this.updateUnreadState();
-        });
+}
+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=\"\n              str-chat__message-actions-container\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--options\n            \"\n            [floatUiLoose]=\"messageMenuFloat\"\n            looseTrigger=\"click\"\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          >\n            <stream-message-reactions\n              [messageReactionCounts]=\"messageReactionCounts\"\n              [latestReactions]=\"latestReactions\"\n              [messageId]=\"messageId\"\n              [ownReactions]=\"ownReactions\"\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              (click)=\"messageActionsBoxClicked(messageMenuFloat)\"\n            ></stream-message-actions-box>\n          </ng-template>\n          <ng-container>\n            <ng-container\n              *ngTemplateOutlet=\"\n                (customTemplatesService.messageActionsBoxTemplate$ | async) ||\n                  defaultMessageActionsBox;\n                context: getMessageActionsBoxContext()\n              \"\n            >\n            </ng-container>\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=\"\n                str-chat__message-text-inner str-chat__message-simple-text-inner\n              \"\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=\"\n                  str-chat__simple-message--error-message\n                  str-chat__message--error-message\n                \"\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=\"\n                  str-chat__simple-message--error-message\n                  str-chat__message--error-message\n                \"\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=\"\n        str-chat__message-data\n        str-chat__message-simple-data\n        str-chat__message-metadata\n      \"\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=\"\n          str-chat__message-simple-status\n          str-chat__message-simple-status-angular\n          str-chat__message-status\n        \"\n        data-testid=\"delivered-indicator\"\n        tabindex=\"0\"\n        [floatUiLoose]=\"floatingContent\"\n        loosePlacement=\"top\"\n        looseTrigger=\"hover\"\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=\"\n          str-chat__message-simple-status\n          str-chat__message-simple-status-angular\n          str-chat__message-status\n        \"\n        data-testid=\"sending-indicator\"\n        tabindex=\"0\"\n        [floatUiLoose]=\"floatingContent\"\n        loosePlacement=\"top\"\n        looseTrigger=\"hover\"\n        [disableAnimation]=\"false\"\n        [preventOverflow]=\"true\"\n        [positionFixed]=\"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=\"\n          str-chat__message-simple-status\n          str-chat__message-simple-status-angular\n          str-chat__message-status\n        \"\n        data-testid=\"read-indicator\"\n        tabindex=\"0\"\n        [floatUiLoose]=\"floatingContent\"\n        loosePlacement=\"top\"\n        looseTrigger=\"hover\"\n        [disableAnimation]=\"false\"\n        [preventOverflow]=\"true\"\n        [positionFixed]=\"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=\"\n      str-chat__message-simple-reply-button\n      str-chat__message-replies-count-button-wrapper\n    \"\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: 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", "messageReactionCounts", "latestReactions", "ownReactions"] }, { 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" }, { kind: "pipe", type: i10.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=\"\n              str-chat__message-actions-container\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--options\n            \"\n            [floatUiLoose]=\"messageMenuFloat\"\n            looseTrigger=\"click\"\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          >\n            <stream-message-reactions\n              [messageReactionCounts]=\"messageReactionCounts\"\n              [latestReactions]=\"latestReactions\"\n              [messageId]=\"messageId\"\n              [ownReactions]=\"ownReactions\"\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              (click)=\"messageActionsBoxClicked(messageMenuFloat)\"\n            ></stream-message-actions-box>\n          </ng-template>\n          <ng-container>\n            <ng-container\n              *ngTemplateOutlet=\"\n                (customTemplatesService.messageActionsBoxTemplate$ | async) ||\n                  defaultMessageActionsBox;\n                context: getMessageActionsBoxContext()\n              \"\n            >\n            </ng-container>\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=\"\n                str-chat__message-text-inner str-chat__message-simple-text-inner\n              \"\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=\"\n                  str-chat__simple-message--error-message\n                  str-chat__message--error-message\n                \"\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=\"\n                  str-chat__simple-message--error-message\n                  str-chat__message--error-message\n                \"\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=\"\n        str-chat__message-data\n        str-chat__message-simple-data\n        str-chat__message-metadata\n      \"\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=\"\n          str-chat__message-simple-status\n          str-chat__message-simple-status-angular\n          str-chat__message-status\n        \"\n        data-testid=\"delivered-indicator\"\n        tabindex=\"0\"\n        [floatUiLoose]=\"floatingContent\"\n        loosePlacement=\"top\"\n        looseTrigger=\"hover\"\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=\"\n          str-chat__message-simple-status\n          str-chat__message-simple-status-angular\n          str-chat__message-status\n        \"\n        data-testid=\"sending-indicator\"\n        tabindex=\"0\"\n        [floatUiLoose]=\"floatingContent\"\n        loosePlacement=\"top\"\n        looseTrigger=\"hover\"\n        [disableAnimation]=\"false\"\n        [preventOverflow]=\"true\"\n        [positionFixed]=\"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=\"\n          str-chat__message-simple-status\n          str-chat__message-simple-status-angular\n          str-chat__message-status\n        \"\n        data-testid=\"read-indicator\"\n        tabindex=\"0\"\n        [floatUiLoose]=\"floatingContent\"\n        loosePlacement=\"top\"\n        looseTrigger=\"hover\"\n        [disableAnimation]=\"false\"\n        [preventOverflow]=\"true\"\n        [positionFixed]=\"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=\"\n      str-chat__message-simple-reply-button\n      str-chat__message-replies-count-button-wrapper\n    \"\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" }]
+        }], ctorParameters: function () { return [{ type: ChatClientService }, { type: ChannelService }, { type: CustomTemplatesService }, { type: i0.ChangeDetectorRef }, { type: DateParserService }, { type: MessageService }, { type: MessageActionsService }, { type: i0.NgZone }]; }, propDecorators: { message: [{
+                type: Input
+            }], enabledMessageActions: [{
+                type: Input
+            }], isLastSentMessage: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], isHighlighted: [{
+                type: Input
+            }], scroll$: [{
+                type: Input
+            }], messageMenuTrigger: [{
+                type: ViewChild,
+                args: ['messageMenuTrigger']
+            }], messageMenuFloat: [{
+                type: ViewChild,
+                args: ['messageMenuFloat']
+            }], messageTextElement: [{
+                type: ViewChild,
+                args: ['messageTextElement']
+            }], messageBubble: [{
+                type: ViewChild,
+                args: ['messageBubble']
+            }] } });
+
+const textareaInjectionToken = new InjectionToken('textareaInjectionToken');
+
+class TextareaDirective {
+    constructor(viewContainerRef) {
+        this.viewContainerRef = viewContainerRef;
+        this.value = '';
+        this.valueChange = new EventEmitter();
+        this.send = new EventEmitter();
+        this.userMentions = new EventEmitter();
+        this.subscriptions = [];
+        this.unpropagatedChanges = [];
     }
-    setLatestMessage(message) {
-        this.latestMessage = message;
-        if (message?.deleted_at) {
-            this.latestMessageText = 'streamChat.Message deleted';
-        }
-        else if (message?.text) {
-            this.latestMessageText =
-                getMessageTranslation(message, this.channel, this.chatClientService.chatClient.user) || message.text;
-        }
-        else if (message?.attachments && message.attachments.length) {
-            this.latestMessageText = 'streamChat.🏙 Attachment...';
+    ngOnChanges(changes) {
+        this.unpropagatedChanges.push(changes);
+        if (!this.componentRef) {
+            return;
         }
-        if (this.latestMessage && this.latestMessage.type === 'regular') {
-            this.latestMessageTime = isOnSeparateDate(new Date(), this.latestMessage.created_at)
-                ? this.dateParser.parseDate(this.latestMessage.created_at)
-                : this.dateParser.parseTime(this.latestMessage.created_at);
+        if (changes.componentRef) {
+            this.subscriptions.forEach((s) => s.unsubscribe());
+            if (this.componentRef) {
+                this.subscriptions.push(this.componentRef.instance.valueChange.subscribe((value) => this.valueChange.next(value)));
+                this.subscriptions.push(this.componentRef.instance.send.subscribe((value) => this.send.next(value)));
+                if (this.componentRef.instance.userMentions) {
+                    this.subscriptions.push(this.componentRef.instance.userMentions.subscribe((value) => this.userMentions.next(value)));
+                }
+                this.componentRef.instance.areMentionsEnabled = this.areMentionsEnabled;
+                this.componentRef.instance.mentionScope = this.mentionScope;
+                this.componentRef.instance.value = this.value;
+                this.componentRef.instance.placeholder = this.placeholder;
+                this.componentRef.instance.inputMode = this.inputMode;
+                this.componentRef.instance.autoFocus = this.autoFocus;
+            }
         }
-        else {
-            this.latestMessageTime = undefined;
+        if (changes.areMentionsEnabled) {
+            this.componentRef.instance.areMentionsEnabled = this.areMentionsEnabled;
         }
-    }
-    updateUnreadState() {
-        if (this.channel &&
-            this.latestMessage &&
-            this.latestMessage.user?.id === this.userId &&
-            this.latestMessage.status === 'received' &&
-            this.latestMessage.type === 'regular') {
-            this.latestMessageStatus =
-                getReadBy(this.latestMessage, this.channel).length > 0
-                    ? 'read'
-                    : 'delivered';
+        if (changes.mentionScope) {
+            this.componentRef.instance.mentionScope = this.mentionScope;
         }
-        else {
-            this.latestMessageStatus = undefined;
+        if (changes.value) {
+            this.componentRef.instance.value = this.value;
         }
-        if ((this.isActive && !this.isUnreadMessageWasCalled) ||
-            !this.canSendReadEvents) {
-            this.unreadCount = 0;
-            this.isUnread = false;
-            return;
+        if (changes.placeholder) {
+            this.componentRef.instance.placeholder = this.placeholder;
         }
-        this.unreadCount = this.channel.countUnread();
-        this.isUnread = !!this.unreadCount;
+        if (changes.inputMode) {
+            this.componentRef.instance.inputMode = this.inputMode;
+        }
+        if (changes.autoFocus) {
+            this.componentRef.instance.autoFocus = this.autoFocus;
+        }
+        // ngOnChanges not called for dynamic components since we don't use template binding
+        let changesToPropagate = {};
+        this.unpropagatedChanges.forEach((c) => (changesToPropagate = { ...changesToPropagate, ...c }));
+        // eslint-disable-next-line @angular-eslint/no-lifecycle-call
+        this.componentRef.instance.ngOnChanges?.(changesToPropagate);
+        this.unpropagatedChanges = [];
     }
 }
-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=\"\n      str-chat__channel-preview-messenger--right str-chat__channel-preview-end\n    \"\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" }] });
-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=\"\n      str-chat__channel-preview-messenger--right str-chat__channel-preview-end\n    \"\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" }]
-        }], ctorParameters: function () { return [{ type: ChannelService }, { type: i0.NgZone }, { type: ChatClientService }, { type: MessageService }, { type: CustomTemplatesService }, { type: DateParserService }]; }, propDecorators: { channel: [{
+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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TextareaDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[streamTextarea]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { componentRef: [{
+                type: Input
+            }], areMentionsEnabled: [{
+                type: Input
+            }], mentionScope: [{
+                type: Input
+            }], inputMode: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], autoFocus: [{
                 type: Input
+            }], valueChange: [{
+                type: Output
+            }], send: [{
+                type: Output
+            }], userMentions: [{
+                type: Output
             }] } });
 
 /**
- * The `ChannelList` component renders the list of channels.
+ * If you have an emoji picker in your application, you can propagate the selected emoji to the textarea using this service, more info can be found in [custom emoji picker guide](../code-examples/emoji-picker.mdx)
  */
-class ChannelListComponent {
-    constructor(channelService, customTemplatesService, themeService) {
-        this.channelService = channelService;
-        this.customTemplatesService = customTemplatesService;
-        this.themeService = themeService;
-        this.isLoadingMoreChannels = false;
-        this.subscriptions = [];
-        this.theme$ = this.themeService.theme$;
-        this.channels$ = this.channelService.channels$;
-        this.hasMoreChannels$ = this.channelService.hasMoreChannels$;
-        this.isError$ = this.channelService.channelQueryState$.pipe(map((s) => !this.isLoadingMoreChannels && s?.state === 'error'));
-        this.isInitializing$ = this.channelService.channelQueryState$.pipe(map((s) => !this.isLoadingMoreChannels && s?.state === 'in-progress'));
-        this.subscriptions.push(this.customTemplatesService.channelPreviewTemplate$.subscribe((template) => (this.customChannelPreviewTemplate = template)));
-    }
-    ngOnDestroy() {
-        this.subscriptions.forEach((s) => s.unsubscribe());
-    }
-    async loadMoreChannels() {
-        this.isLoadingMoreChannels = true;
-        await this.channelService.loadMoreChannels();
-        this.isLoadingMoreChannels = false;
-    }
-    trackByChannelId(index, item) {
-        return item.cid;
+class EmojiInputService {
+    constructor() {
+        /**
+         * If you have an emoji picker in your application, you can propagate the selected emoji to the textarea using this Subject, more info can be found in [custom emoji picker guide](../code-examples/emoji-picker.mdx)
+         */
+        this.emojiInput$ = new Subject();
     }
 }
-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", viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div\n  #container\n  data-testid=\"channel-list-container\"\n  class=\"str-chat 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      <ng-container\n        *ngFor=\"let channel of channels$ | async; trackBy: trackByChannelId\"\n      >\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-container>\n      <div\n        *ngIf=\"hasMoreChannels$ | async\"\n        class=\"str-chat__load-more-button\"\n        data-testid=\"load-more\"\n        (click)=\"loadMoreChannels()\"\n        (keyup.enter)=\"loadMoreChannels()\"\n      >\n        <button\n          class=\"str-chat__load-more-button__button str-chat__cta-button\"\n          data-testid=\"load-more-button\"\n          [disabled]=\"isLoadingMoreChannels\"\n        >\n          <span *ngIf=\"!isLoadingMoreChannels; else loadingIndicator\">{{\n            \"Load more\" | translate\n          }}</span>\n          <ng-template #loadingIndicator\n            ><stream-loading-indicator-placeholder></stream-loading-indicator-placeholder\n          ></ng-template>\n        </button>\n      </div>\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 data-testid=\"loading-indicator\" class=\"str-chat__loading-channels\">\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=\"\n        str-chat__loading-channels-meta str-chat__channel-preview-end-loading\n      \"\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.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: ChannelPreviewComponent, selector: "stream-channel-preview", inputs: ["channel"] }, { kind: "component", type: IconComponent, selector: "stream-icon", inputs: ["icon"] }, { kind: "component", type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.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__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      <ng-container\n        *ngFor=\"let channel of channels$ | async; trackBy: trackByChannelId\"\n      >\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-container>\n      <div\n        *ngIf=\"hasMoreChannels$ | async\"\n        class=\"str-chat__load-more-button\"\n        data-testid=\"load-more\"\n        (click)=\"loadMoreChannels()\"\n        (keyup.enter)=\"loadMoreChannels()\"\n      >\n        <button\n          class=\"str-chat__load-more-button__button str-chat__cta-button\"\n          data-testid=\"load-more-button\"\n          [disabled]=\"isLoadingMoreChannels\"\n        >\n          <span *ngIf=\"!isLoadingMoreChannels; else loadingIndicator\">{{\n            \"Load more\" | translate\n          }}</span>\n          <ng-template #loadingIndicator\n            ><stream-loading-indicator-placeholder></stream-loading-indicator-placeholder\n          ></ng-template>\n        </button>\n      </div>\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 data-testid=\"loading-indicator\" class=\"str-chat__loading-channels\">\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=\"\n        str-chat__loading-channels-meta str-chat__channel-preview-end-loading\n      \"\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" }]
-        }], ctorParameters: function () { return [{ type: ChannelService }, { type: CustomTemplatesService }, { type: ThemeService }]; }, propDecorators: { container: [{
-                type: ViewChild,
-                args: ['container']
-            }] } });
+EmojiInputService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: EmojiInputService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+EmojiInputService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: EmojiInputService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: EmojiInputService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return []; } });
 
 /**
- * The `MessageReactions` component displays the reactions of a message. You can read more about [message reactions](https://getstream.io/chat/docs/javascript/send_reaction/?language=javascript) in the platform documentation.
+ * The `MessageInputConfigService` is used to keep a consistent configuration among the different [`MessageInput`](../components/MessageInputComponent.mdx) components if your UI has more than one input component.
  */
-class MessageReactionsComponent {
-    constructor(cdRef, channelService, messageReactionsService, customTemplatesService) {
-        this.cdRef = cdRef;
-        this.channelService = channelService;
-        this.messageReactionsService = messageReactionsService;
-        this.customTemplatesService = customTemplatesService;
+class MessageInputConfigService {
+    constructor() {
         /**
-         * The number of reactions grouped by [reaction types](https://github.com/GetStream/stream-chat-angular/tree/master/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts)
+         * If file upload is enabled, the user can open a file selector from the input. Please note that the user also needs to have the necessary [channel capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript).
          */
-        this.messageReactionCounts = {};
+        this.isFileUploadEnabled = true;
         /**
-         * List of reactions of a [message](../types/stream-message.mdx), used to display the users of a reaction type.
+         * If true, users can mention other users in messages. You also [need to use the `AutocompleteTextarea`](../concepts/opt-in-architecture.mdx) for this feature to work.
          */
-        this.latestReactions = [];
+        this.areMentionsEnabled = true;
         /**
-         * List of the user's own reactions of a [message](../types/stream-message.mdx), used to display the users of a reaction type.
+         * If `false`, users can only upload one attachment per message
          */
-        this.ownReactions = [];
-        this.isLoading = true;
-        this.reactions = [];
-        this.shouldHandleReactionClick = true;
-        this.existingReactions = [];
-        this.reactionsCount = 0;
-        this.reactionOptions = [];
-        this.subscriptions = [];
-        this.isViewInited = false;
-        this.isOpenChange = (isOpen) => {
-            this.selectedReactionType = isOpen ? this.selectedReactionType : undefined;
-        };
-    }
-    ngOnInit() {
-        this.subscriptions.push(this.messageReactionsService.reactions$.subscribe((reactions) => {
-            this.reactionOptions = Object.keys(reactions);
-            this.setExistingReactions();
-            if (this.isViewInited) {
-                this.cdRef.detectChanges();
-            }
-        }));
-    }
-    ngOnChanges(changes) {
-        if (changes.messageReactionCounts) {
-            this.setExistingReactions();
-        }
-        if (changes.messageReactionCounts && this.messageReactionCounts) {
-            const reactionsCount = Object.keys(this.messageReactionCounts).reduce((acc, key) => acc + (this.messageReactionCounts[key] || 0), 0);
-            this.shouldHandleReactionClick =
-                reactionsCount <= ChannelService.MAX_MESSAGE_REACTIONS_TO_FETCH ||
-                    !!this.messageReactionsService.customReactionClickHandler;
-        }
-    }
-    ngAfterViewInit() {
-        this.isViewInited = true;
-    }
-    ngOnDestroy() {
-        this.subscriptions.forEach((s) => s.unsubscribe());
-    }
-    getEmojiByReaction(reactionType) {
-        return this.messageReactionsService.reactions[reactionType];
-    }
-    reactionSelected(reactionType) {
-        if (!this.shouldHandleReactionClick) {
-            return;
-        }
-        if (!this.messageId) {
-            return;
-        }
-        if (this.messageReactionsService.customReactionClickHandler) {
-            this.messageReactionsService.customReactionClickHandler({
-                messageId: this.messageId,
-                reactionType: reactionType,
-            });
-        }
-        else {
-            this.selectedReactionType = reactionType;
-            void this.fetchAllReactions();
-        }
-    }
-    getUsersByReaction(reactionType) {
-        return this.latestReactions
-            .filter((r) => r.type === reactionType)
-            .map((r) => r.user?.name || r.user?.id)
-            .filter((i) => !!i)
-            .join(', ');
-    }
-    getAllUsersByReaction(reactionType) {
-        if (!reactionType) {
-            return [];
-        }
-        const users = this.reactions
-            .filter((r) => r.type === reactionType)
-            .map((r) => r.user)
-            .filter((i) => !!i);
-        users.sort((u1, u2) => {
-            const name1 = u1.name?.toLowerCase();
-            const name2 = u2.name?.toLowerCase();
-            if (!name1) {
-                return 1;
-            }
-            if (!name2) {
-                return -1;
-            }
-            if (name1 === name2) {
-                return 0;
-            }
-            if (name1 < name2) {
-                return -1;
-            }
-            else {
-                return 1;
-            }
-        });
-        return users;
-    }
-    trackByMessageReaction(_, item) {
-        return item;
+        this.isMultipleFileUploadEnabled = true;
+        /**
+         * The scope for user mentions, either members of the current channel of members of the application
+         */
+        this.mentionScope = 'channel';
+        /**
+         * In `desktop` mode the `Enter` key will trigger message sending, in `mobile` mode the `Enter` key will insert a new line to the message input.
+         */
+        this.inputMode = 'desktop';
     }
-    trackByUserId(_, item) {
-        return item.id;
+}
+MessageInputConfigService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageInputConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+MessageInputConfigService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageInputConfigService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageInputConfigService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return []; } });
+
+/**
+ * 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() {
+        /**
+         * An output to notify the parent component if the user tries to retry a failed upload
+         */
+        this.retryAttachmentUpload = new EventEmitter();
+        /**
+         * An output to notify the parent component if the user wants to delete a file
+         */
+        this.deleteAttachment = new EventEmitter();
     }
-    isOwnReaction(reactionType) {
-        return !!this.ownReactions.find((r) => r.type === reactionType);
+    attachmentUploadRetried(file) {
+        this.retryAttachmentUpload.emit(file);
     }
-    async fetchAllReactions() {
-        if (!this.messageId) {
-            return;
-        }
-        this.isLoading = true;
-        try {
-            this.reactions = await this.channelService.getMessageReactions(this.messageId);
-        }
-        catch (error) {
-            this.selectedReactionType = undefined;
-        }
-        finally {
-            this.isLoading = false;
-            this.cdRef.detectChanges();
-        }
+    attachmentDeleted(upload) {
+        this.deleteAttachment.emit(upload);
     }
-    setExistingReactions() {
-        this.existingReactions = Object.keys(this.messageReactionCounts)
-            .filter((k) => this.reactionOptions.indexOf(k) !== -1)
-            .filter((k) => this.messageReactionCounts[k] > 0);
-        this.reactionsCount = this.existingReactions.reduce((total, reaction) => total + this.messageReactionCounts[reaction], 0);
+    trackByFile(_, item) {
+        return item.file;
     }
 }
-MessageReactionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageReactionsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ChannelService }, { token: MessageReactionsService }, { token: CustomTemplatesService }], target: i0.ɵɵFactoryTarget.Component });
-MessageReactionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MessageReactionsComponent, selector: "stream-message-reactions", inputs: { messageId: "messageId", messageReactionCounts: "messageReactionCounts", latestReactions: "latestReactions", ownReactions: "ownReactions" }, viewQueries: [{ propertyName: "selectorContainer", first: true, predicate: ["selectorContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  *ngIf=\"existingReactions.length > 0\"\n  data-testid=\"reaction-list\"\n  class=\"str-chat__reaction-list str-chat__message-reactions-container\"\n  [class.str-chat__reaction-list--reverse]=\"true\"\n>\n  <ul class=\"str-chat__message-reactions\">\n    <li\n      *ngFor=\"\n        let reactionType of existingReactions;\n        trackBy: trackByMessageReaction\n      \"\n      class=\"str-chat__message-reaction\"\n      data-testclass=\"emoji\"\n      [ngStyle]=\"{ cursor: shouldHandleReactionClick ? 'pointer' : 'default' }\"\n      [class.str-chat__message-reaction-own]=\"isOwnReaction(reactionType)\"\n      (click)=\"reactionSelected(reactionType)\"\n      (keyup.enter)=\"reactionSelected(reactionType)\"\n    >\n      <span class=\"emoji str-chat__message-reaction-emoji\">\n        {{ getEmojiByReaction(reactionType) }}&nbsp;\n      </span>\n      <span\n        data-testclass=\"reaction-list-reaction-count\"\n        class=\"str-chat__message-reaction-count\"\n      >\n        {{ messageReactionCounts[reactionType] }}\n      </span>\n    </li>\n    <li>\n      <span\n        data-testid=\"reactions-count\"\n        class=\"str-chat__reaction-list--counter\"\n        >{{ reactionsCount }}</span\n      >\n    </li>\n  </ul>\n</div>\n\n<ng-container *ngIf=\"selectedReactionType\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.modalTemplate$ | async) || defaultModal;\n      context: {\n        isOpen: !!selectedReactionType,\n        messageId: messageId,\n        reactionType: selectedReactionType,\n        isOpenChangeHandler: isOpenChange,\n        content: modalContent\n      }\n    \"\n  ></ng-container>\n</ng-container>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-messageId=\"messageId\"\n  let-reactionType=\"reactionType\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    class=\"str-chat__message-reactions-details-modal\"\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=\"str-chat__message-reactions-details\">\n    <div class=\"str-chat__message-reactions-details-reaction-types\">\n      <div\n        *ngFor=\"\n          let reactionType of existingReactions;\n          trackBy: trackByMessageReaction\n        \"\n        class=\"str-chat__message-reactions-details-reaction-type\"\n        [ngStyle]=\"{\n          cursor: shouldHandleReactionClick ? 'pointer' : 'default'\n        }\"\n        attr.data-testid=\"reaction-details-selector-{{ reactionType }}\"\n        [class.str-chat__message-reactions-details-reaction-type--selected]=\"\n          reactionType === selectedReactionType\n        \"\n        (click)=\"selectedReactionType = reactionType; allUsers.scrollTop = 0\"\n        (keyup.enter)=\"\n          selectedReactionType = reactionType; allUsers.scrollTop = 0\n        \"\n      >\n        <span class=\"emoji str-chat__message-reaction-emoji\">\n          {{ getEmojiByReaction(reactionType) }}&nbsp;\n        </span>\n        <span class=\"str-chat__message-reaction-count\">\n          {{ messageReactionCounts[reactionType] }}\n        </span>\n      </div>\n    </div>\n    <div\n      class=\"\n        emoji\n        str-chat__message-reaction-emoji str-chat__message-reaction-emoji-big\n      \"\n    >\n      {{ getEmojiByReaction(selectedReactionType!) }}\n    </div>\n    <div\n      #allUsers\n      data-testid=\"all-reacting-users\"\n      class=\"str-chat__message-reactions-details-reacting-users\"\n    >\n      <stream-loading-indicator\n        *ngIf=\"isLoading; else reactions\"\n      ></stream-loading-indicator>\n      <ng-template #reactions>\n        <div\n          *ngFor=\"\n            let user of getAllUsersByReaction(selectedReactionType);\n            trackBy: trackByUserId\n          \"\n          class=\"str-chat__message-reactions-details-reacting-user\"\n        >\n          <stream-avatar-placeholder\n            data-testclass=\"avatar\"\n            class=\"str-chat__avatar str-chat__avatar--circle\"\n            type=\"user\"\n            location=\"reaction\"\n            [imageUrl]=\"user.image\"\n            [name]=\"user.name\"\n            [user]=\"user\"\n          ></stream-avatar-placeholder>\n          <span\n            data-testclass=\"reaction-user-username\"\n            class=\"str-chat__user-item--name\"\n            >{{ user.name }}</span\n          >\n        </div>\n      </ng-template>\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: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "stream-loading-indicator" }, { kind: "component", type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageReactionsComponent, decorators: [{
+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' || attachmentUpload.type === 'video'\n        \"\n        class=\"str-chat__attachment-preview-file\"\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 class=\"str-chat__attachment-preview-file-name\">\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" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AttachmentPreviewListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-message-reactions', template: "<div\n  *ngIf=\"existingReactions.length > 0\"\n  data-testid=\"reaction-list\"\n  class=\"str-chat__reaction-list str-chat__message-reactions-container\"\n  [class.str-chat__reaction-list--reverse]=\"true\"\n>\n  <ul class=\"str-chat__message-reactions\">\n    <li\n      *ngFor=\"\n        let reactionType of existingReactions;\n        trackBy: trackByMessageReaction\n      \"\n      class=\"str-chat__message-reaction\"\n      data-testclass=\"emoji\"\n      [ngStyle]=\"{ cursor: shouldHandleReactionClick ? 'pointer' : 'default' }\"\n      [class.str-chat__message-reaction-own]=\"isOwnReaction(reactionType)\"\n      (click)=\"reactionSelected(reactionType)\"\n      (keyup.enter)=\"reactionSelected(reactionType)\"\n    >\n      <span class=\"emoji str-chat__message-reaction-emoji\">\n        {{ getEmojiByReaction(reactionType) }}&nbsp;\n      </span>\n      <span\n        data-testclass=\"reaction-list-reaction-count\"\n        class=\"str-chat__message-reaction-count\"\n      >\n        {{ messageReactionCounts[reactionType] }}\n      </span>\n    </li>\n    <li>\n      <span\n        data-testid=\"reactions-count\"\n        class=\"str-chat__reaction-list--counter\"\n        >{{ reactionsCount }}</span\n      >\n    </li>\n  </ul>\n</div>\n\n<ng-container *ngIf=\"selectedReactionType\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.modalTemplate$ | async) || defaultModal;\n      context: {\n        isOpen: !!selectedReactionType,\n        messageId: messageId,\n        reactionType: selectedReactionType,\n        isOpenChangeHandler: isOpenChange,\n        content: modalContent\n      }\n    \"\n  ></ng-container>\n</ng-container>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-messageId=\"messageId\"\n  let-reactionType=\"reactionType\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    class=\"str-chat__message-reactions-details-modal\"\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=\"str-chat__message-reactions-details\">\n    <div class=\"str-chat__message-reactions-details-reaction-types\">\n      <div\n        *ngFor=\"\n          let reactionType of existingReactions;\n          trackBy: trackByMessageReaction\n        \"\n        class=\"str-chat__message-reactions-details-reaction-type\"\n        [ngStyle]=\"{\n          cursor: shouldHandleReactionClick ? 'pointer' : 'default'\n        }\"\n        attr.data-testid=\"reaction-details-selector-{{ reactionType }}\"\n        [class.str-chat__message-reactions-details-reaction-type--selected]=\"\n          reactionType === selectedReactionType\n        \"\n        (click)=\"selectedReactionType = reactionType; allUsers.scrollTop = 0\"\n        (keyup.enter)=\"\n          selectedReactionType = reactionType; allUsers.scrollTop = 0\n        \"\n      >\n        <span class=\"emoji str-chat__message-reaction-emoji\">\n          {{ getEmojiByReaction(reactionType) }}&nbsp;\n        </span>\n        <span class=\"str-chat__message-reaction-count\">\n          {{ messageReactionCounts[reactionType] }}\n        </span>\n      </div>\n    </div>\n    <div\n      class=\"\n        emoji\n        str-chat__message-reaction-emoji str-chat__message-reaction-emoji-big\n      \"\n    >\n      {{ getEmojiByReaction(selectedReactionType!) }}\n    </div>\n    <div\n      #allUsers\n      data-testid=\"all-reacting-users\"\n      class=\"str-chat__message-reactions-details-reacting-users\"\n    >\n      <stream-loading-indicator\n        *ngIf=\"isLoading; else reactions\"\n      ></stream-loading-indicator>\n      <ng-template #reactions>\n        <div\n          *ngFor=\"\n            let user of getAllUsersByReaction(selectedReactionType);\n            trackBy: trackByUserId\n          \"\n          class=\"str-chat__message-reactions-details-reacting-user\"\n        >\n          <stream-avatar-placeholder\n            data-testclass=\"avatar\"\n            class=\"str-chat__avatar str-chat__avatar--circle\"\n            type=\"user\"\n            location=\"reaction\"\n            [imageUrl]=\"user.image\"\n            [name]=\"user.name\"\n            [user]=\"user\"\n          ></stream-avatar-placeholder>\n          <span\n            data-testclass=\"reaction-user-username\"\n            class=\"str-chat__user-item--name\"\n            >{{ user.name }}</span\n          >\n        </div>\n      </ng-template>\n    </div>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: ChannelService }, { type: MessageReactionsService }, { type: CustomTemplatesService }]; }, propDecorators: { messageId: [{
-                type: Input
-            }], messageReactionCounts: [{
-                type: Input
-            }], latestReactions: [{
-                type: Input
-            }], ownReactions: [{
+            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' || attachmentUpload.type === 'video'\n        \"\n        class=\"str-chat__attachment-preview-file\"\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 class=\"str-chat__attachment-preview-file-name\">\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$: [{
                 type: Input
-            }], selectorContainer: [{
-                type: ViewChild,
-                args: ['selectorContainer']
+            }], retryAttachmentUpload: [{
+                type: Output
+            }], deleteAttachment: [{
+                type: Output
             }] } });
 
 /**
- * The `Message` component displays a message with additional information such as sender and date, and enables [interaction with the message (i.e. edit or react)](../concepts/message-interactions.mdx).
+ * The `MessageInput` component displays an input where users can type their messages and upload files, and sends the message to the active channel. The component can be used to compose new messages or update existing ones. To send messages, the chat user needs to have the necessary [channel capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript).
  */
-class MessageComponent {
-    constructor(chatClientService, channelService, customTemplatesService, cdRef, dateParser, messageService, messageActionsService) {
-        this.chatClientService = chatClientService;
+class MessageInputComponent {
+    constructor(channelService, notificationService, attachmentService, configService, textareaType, componentFactoryResolver, cdRef, chatClient, emojiInputService, customTemplatesService, messageActionsService) {
         this.channelService = channelService;
-        this.customTemplatesService = customTemplatesService;
+        this.notificationService = notificationService;
+        this.attachmentService = attachmentService;
+        this.configService = configService;
+        this.textareaType = textareaType;
+        this.componentFactoryResolver = componentFactoryResolver;
         this.cdRef = cdRef;
-        this.dateParser = dateParser;
-        this.messageService = messageService;
+        this.chatClient = chatClient;
+        this.emojiInputService = emojiInputService;
+        this.customTemplatesService = customTemplatesService;
         this.messageActionsService = messageActionsService;
-        /**
-         * The list of [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript) that are enabled for the current user, the list of [supported interactions](../concepts/message-interactions.mdx) can be found in our message interaction guide. Unathorized actions won't be displayed on the UI. The [`MessageList`](./MessageListComponent.mdx) component automatically sets this based on [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript).
-         */
-        this.enabledMessageActions = [];
         /**
          * Determines if the message is being dispalyed in a channel or in a [thread](https://getstream.io/chat/docs/javascript/threads/?language=javascript).
          */
         this.mode = 'main';
         /**
-         * Highlighting is used to add visual emphasize to a message when jumping to the message
+         * Enables or disables auto focus on the textarea element
          */
-        this.isHighlighted = false;
-        this.isEditedFlagOpened = false;
-        this.messageTextParts = [];
-        this.shouldDisplayTranslationNotice = false;
-        this.displayedMessageTextContent = 'original';
-        this.imageAttachmentModalState = 'closed';
-        this.shouldDisplayThreadLink = false;
-        this.isSentByCurrentUser = false;
-        this.readByText = '';
-        this.lastReadUser = undefined;
-        this.isOnlyReadByMe = false;
-        this.isReadByMultipleUsers = false;
-        this.isMessageDeliveredAndRead = false;
-        this.parsedDate = '';
-        this.pasedEditedDate = '';
-        this.areOptionsVisible = false;
-        this.hasAttachment = false;
-        this.hasReactions = false;
-        this.replyCountParam = {
-            replyCount: undefined,
-        };
-        this.areMessageOptionsOpen = false;
-        this.canDisplayReadStatus = false;
-        this.hasTouchSupport = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+        this.autoFocus = true;
+        /**
+         * By default the input will react to changes in `messageToEdit$` from [`MessageActionsService`](../services/MessageActionsService.mdx) and display the message to be edited (taking into account the current `mode`).
+         *
+         * If you don't need that behavior, you can turn this of with this flag. In that case you should create your own edit message UI.
+         */
+        this.watchForMessageToEdit = true;
+        /**
+         * Use this input to control wether a send button is rendered or not. If you don't render a send button, you can still trigger message send using the `sendMessage$` input.
+         */
+        this.displaySendButton = true;
+        /**
+         * Emits when a message was successfuly sent or updated
+         */
+        this.messageUpdate = new EventEmitter();
+        this.class = 'str-chat__message-input-angular-host';
+        this.textareaValue = '';
+        this.mentionedUsers = [];
+        this.typingStart$ = new Subject();
+        this.isCooldownInProgress = false;
+        this.fileInputId = v4();
         this.subscriptions = [];
         this.isViewInited = false;
-        this.urlRegexp = /(?:(?:https?|ftp|file):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#/%=~_|$?!:,.]*\)|[A-Z0-9+&@#/%=~_|$])/gim;
-        this.emojiRegexp = new RegExp(emojiRegex(), 'g');
-        this.shouldPreventMessageMenuClose = false;
-        this._visibleMessageActionsCount = 0;
-        this.displayAs = this.messageService.displayAs;
-    }
-    get visibleMessageActionsCount() {
-        return this._visibleMessageActionsCount;
-    }
-    set visibleMessageActionsCount(count) {
-        this._visibleMessageActionsCount = count;
-        if (this.areOptionsVisible && this._visibleMessageActionsCount === 0) {
-            this.areOptionsVisible = false;
-        }
-    }
-    ngOnInit() {
-        this.subscriptions.push(this.chatClientService.user$.subscribe((u) => {
-            if (u?.id !== this.userId) {
-                this.userId = u?.id;
-                this.setIsSentByCurrentUser();
-                this.setLastReadUser();
-                if (this.isViewInited) {
-                    this.cdRef.detectChanges();
-                }
+        this.defaultTextareaPlaceholder = 'streamChat.Type your message';
+        this.slowModeTextareaPlaceholder = 'streamChat.Slow Mode ON';
+        this.textareaPlaceholder = this.defaultTextareaPlaceholder;
+        this.subscriptions.push(this.attachmentService.attachmentUploadInProgressCounter$.subscribe((counter) => {
+            if (counter === 0 && this.hideNotification) {
+                this.hideNotification();
+                this.hideNotification = undefined;
             }
         }));
-        this.subscriptions.push(this.messageActionsService.customActions$.subscribe(() => {
-            if (this.message) {
-                const numberOfEnabledActions = this.messageActionsService.getAuthorizedMessageActionsCount(this.message, this.enabledMessageActions);
-                if (numberOfEnabledActions !== this.visibleMessageActionsCount) {
-                    this.visibleMessageActionsCount = numberOfEnabledActions;
-                    if (this.isViewInited) {
-                        this.cdRef.detectChanges();
-                    }
-                }
+        this.subscriptions.push(this.channelService.activeChannel$.subscribe((channel) => {
+            if (channel && this.channel && channel.id !== this.channel.id) {
+                this.textareaValue = '';
+                this.attachmentService.resetAttachmentUploads();
+            }
+            const capabilities = channel?.data?.own_capabilities;
+            if (capabilities) {
+                this.isFileUploadAuthorized =
+                    capabilities.indexOf('upload-file') !== -1;
+                this.canSendLinks = capabilities.indexOf('send-links') !== -1;
+                this.channel = channel;
+                this.setCanSendMessages();
+            }
+        }));
+        this.subscriptions.push(this.chatClient.appSettings$.subscribe((appSettings) => (this.appSettings = appSettings)));
+        this.subscriptions.push(this.channelService.messageToQuote$.subscribe((m) => {
+            const isThreadReply = m && m.parent_id;
+            if ((this.mode === 'thread' && isThreadReply) ||
+                (this.mode === 'thread' && this.quotedMessage && !m) ||
+                (this.mode === 'main' && !isThreadReply)) {
+                this.quotedMessage = m;
+            }
+        }));
+        this.subscriptions.push(this.messageActionsService.messageToEdit$.subscribe((message) => {
+            this.messageToEdit = message;
+            this.checkIfInEditMode();
+        }));
+        this.attachmentUploads$ = this.attachmentService.attachmentUploads$;
+        this.attachmentUploadInProgressCounter$ =
+            this.attachmentService.attachmentUploadInProgressCounter$;
+        this.isFileUploadEnabled = this.configService.isFileUploadEnabled;
+        this.isMultipleFileUploadEnabled =
+            this.configService.isMultipleFileUploadEnabled;
+        this.areMentionsEnabled = this.configService.areMentionsEnabled;
+        this.mentionScope = this.configService.mentionScope;
+        this.inputMode = this.configService.inputMode;
+        this.subscriptions.push(this.typingStart$.subscribe(() => void this.channelService.typingStarted(this.parentMessageId)));
+        this.subscriptions.push(combineLatest([
+            this.channelService.latestMessageDateByUserByChannels$,
+            this.channelService.activeChannel$,
+        ])
+            .pipe(map(([latestMessages, channel]) => [latestMessages[channel?.cid || ''], channel]))
+            .subscribe(([latestMessageDate, channel]) => {
+            const cooldown = channel?.data?.cooldown &&
+                latestMessageDate &&
+                Math.round(channel?.data?.cooldown -
+                    (new Date().getTime() - latestMessageDate.getTime()) / 1000);
+            if (cooldown &&
+                cooldown > 0 &&
+                (channel?.data?.own_capabilities).includes('slow-mode')) {
+                this.startCooldown(cooldown);
+            }
+            else if (this.isCooldownInProgress) {
+                this.stopCooldown();
             }
         }));
     }
-    ngOnChanges(changes) {
-        if (changes.message) {
-            this.shouldDisplayTranslationNotice = false;
-            this.displayedMessageTextContent = 'original';
-            this.createMessageParts();
-            const originalAttachments = this.message?.quoted_message?.attachments;
-            this.quotedMessageAttachments =
-                originalAttachments && originalAttachments.length
-                    ? [originalAttachments[0]]
-                    : [];
-            this.setIsSentByCurrentUser();
-            this.setLastReadUser();
-            this.readByText = this.message?.readBy
-                ? listUsers(this.message.readBy)
-                : '';
-            this.isOnlyReadByMe = !!(this.message &&
-                this.message.readBy &&
-                this.message.readBy.length === 0);
-            this.isReadByMultipleUsers = !!(this.message &&
-                this.message.readBy &&
-                this.message.readBy.length > 1);
-            this.isMessageDeliveredAndRead = !!(this.message &&
-                this.message.readBy &&
-                this.message.status === 'received' &&
-                this.message.readBy.length > 0);
-            this.parsedDate =
-                (this.message &&
-                    this.message.created_at &&
-                    this.dateParser.parseDateTime(this.message.created_at)) ||
-                    '';
-            this.pasedEditedDate =
-                (this.message &&
-                    this.message.message_text_updated_at &&
-                    this.dateParser.parseDateTime(new Date(this.message.message_text_updated_at))) ||
-                    '';
-            this.hasAttachment =
-                !!this.message?.attachments && !!this.message.attachments.length;
-            this.hasReactions =
-                !!this.message?.reaction_counts &&
-                    Object.keys(this.message.reaction_counts).length > 0;
-            this.replyCountParam = { replyCount: this.message?.reply_count };
+    ngOnInit() {
+        this.subscriptions.push(this.customTemplatesService.emojiPickerTemplate$.subscribe((template) => {
+            this.emojiPickerTemplate = template;
+            this.cdRef.detectChanges();
+        }));
+        this.subscriptions.push(this.customTemplatesService.attachmentPreviewListTemplate$.subscribe((template) => {
+            this.attachmentPreviewListTemplate = template;
+            this.cdRef.detectChanges();
+        }));
+        this.subscriptions.push(this.customTemplatesService.customAttachmentUploadTemplate$.subscribe((template) => {
+            this.customAttachmentUploadTemplate = template;
+            this.cdRef.detectChanges();
+        }));
+    }
+    ngAfterViewInit() {
+        this.isViewInited = true;
+        this.initTextarea();
+    }
+    ngOnChanges(changes) {
+        if (changes.message) {
+            this.messageToUpdateChanged();
         }
-        if (changes.enabledMessageActions) {
-            this.canReactToMessage =
-                this.enabledMessageActions.indexOf('send-reaction') !== -1;
-            this.canReceiveReadEvents =
-                this.enabledMessageActions.indexOf('read-events') !== -1;
-            this.canDisplayReadStatus =
-                this.canReceiveReadEvents !== false &&
-                    this.enabledMessageActions.indexOf('read-events') !== -1;
+        if (changes.isFileUploadEnabled) {
+            this.configService.isFileUploadEnabled = this.isFileUploadEnabled;
         }
-        if (changes.message || changes.enabledMessageActions || changes.mode) {
-            this.shouldDisplayThreadLink =
-                !!this.message?.reply_count && this.mode !== 'thread';
+        if (changes.isMultipleFileUploadEnabled) {
+            this.configService.isMultipleFileUploadEnabled =
+                this.isMultipleFileUploadEnabled;
         }
-        if (changes.message || changes.mode || changes.enabledMessageActions) {
-            this.areOptionsVisible = this.message
-                ? !(!this.message.type ||
-                    this.message.type === 'error' ||
-                    this.message.type === 'system' ||
-                    this.message.type === 'deleted' ||
-                    this.message.type === 'ephemeral' ||
-                    this.message.status === 'failed' ||
-                    this.message.status === 'sending' ||
-                    (this.mode === 'thread' && !this.message.parent_id) ||
-                    this.message.deleted_at ||
-                    this.enabledMessageActions.length === 0)
-                : false;
+        if (changes.areMentionsEnabled) {
+            this.configService.areMentionsEnabled = this.areMentionsEnabled;
         }
-        if (changes.message || changes.enabledMessageActions) {
-            if (this.message) {
-                this.visibleMessageActionsCount =
-                    this.messageActionsService.getAuthorizedMessageActionsCount(this.message, this.enabledMessageActions);
+        if (changes.mentionScope) {
+            this.configService.mentionScope = this.mentionScope;
+        }
+        if (changes.mode) {
+            this.setCanSendMessages();
+            this.checkIfInEditMode();
+        }
+        if (changes.watchForMessageToEdit) {
+            this.checkIfInEditMode();
+        }
+        if (changes.inputMode) {
+            this.configService.inputMode = this.inputMode;
+        }
+        if (changes.sendMessage$) {
+            if (this.sendMessageSubcription) {
+                this.sendMessageSubcription.unsubscribe();
             }
-            else {
-                this.visibleMessageActionsCount = 0;
+            if (this.sendMessage$) {
+                this.sendMessageSubcription = this.sendMessage$.subscribe(() => void this.messageSent());
             }
         }
     }
-    ngAfterViewInit() {
-        this.isViewInited = true;
-    }
     ngOnDestroy() {
+        if (this.sendMessageSubcription) {
+            this.sendMessageSubcription.unsubscribe();
+        }
         this.subscriptions.forEach((s) => s.unsubscribe());
     }
-    mousePushedDown(event) {
-        if (!this.hasTouchSupport ||
-            event.button !== 0 ||
-            !this.areOptionsVisible) {
+    async messageSent() {
+        if (this.isCooldownInProgress) {
             return;
         }
-        this.startMessageMenuShowTimer({ fromTouch: false });
-    }
-    mouseReleased() {
-        this.stopMessageMenuShowTimer();
-    }
-    touchStarted() {
-        if (!this.areOptionsVisible) {
+        let attachmentUploadInProgressCounter;
+        this.attachmentService.attachmentUploadInProgressCounter$
+            .pipe(first())
+            .subscribe((counter) => (attachmentUploadInProgressCounter = counter));
+        if (attachmentUploadInProgressCounter > 0) {
+            if (!this.hideNotification) {
+                this.hideNotification =
+                    this.notificationService.addPermanentNotification('streamChat.Wait until all attachments have uploaded');
+            }
             return;
         }
-        this.startMessageMenuShowTimer({ fromTouch: true });
-    }
-    touchEnded() {
-        this.stopMessageMenuShowTimer();
-    }
-    messageBubbleClicked(event) {
-        if (!this.hasTouchSupport) {
+        const attachments = this.attachmentService.mapToAttachments();
+        let text = this.textareaValue;
+        text = text.replace(/^\n+/g, ''); // leading empty lines
+        text = text.replace(/\n+$/g, ''); // ending empty lines
+        const textContainsOnlySpaceChars = !text.replace(/ /g, ''); //spcae
+        if ((!text || textContainsOnlySpaceChars) &&
+            (!attachments || attachments.length === 0)) {
             return;
         }
-        if (this.shouldPreventMessageMenuClose) {
-            event.stopPropagation();
-            this.shouldPreventMessageMenuClose = false;
-        }
-        else if (this.areMessageOptionsOpen) {
-            this.messageMenuTrigger?.hide();
+        if (textContainsOnlySpaceChars) {
+            text = '';
         }
-    }
-    messageOptionsButtonClicked() {
-        if (!this.message) {
+        if (this.containsLinks && !this.canSendLinks) {
+            this.notificationService.addTemporaryNotification('streamChat.Sending links is not allowed in this conversation');
             return;
         }
-        if (this.messageActionsService.customActionClickHandler) {
-            this.messageActionsService.customActionClickHandler({
-                message: this.message,
-                enabledActions: this.enabledMessageActions,
-                customActions: this.messageActionsService.customActions$.getValue(),
-                isMine: this.isSentByCurrentUser,
-                messageTextHtmlElement: this.messageTextElement?.nativeElement,
-            });
-        }
-        else {
-            this.areMessageOptionsOpen = !this.areMessageOptionsOpen;
+        if (!this.isUpdate) {
+            this.textareaValue = '';
         }
-    }
-    messageActionsBoxClicked(floatingContent) {
-        floatingContent.hide();
-    }
-    getAttachmentListContext() {
-        return {
-            messageId: this.message?.id || '',
-            attachments: this.message?.attachments || [],
-            parentMessageId: this.message?.parent_id,
-            imageModalStateChangeHandler: (state) => (this.imageAttachmentModalState = state),
-        };
-    }
-    getMessageContext() {
-        return {
-            message: this.message,
-            enabledMessageActions: this.enabledMessageActions,
-            isHighlighted: this.isHighlighted,
-            isLastSentMessage: this.isLastSentMessage,
-            mode: this.mode,
-            customActions: this.messageActionsService.customActions$.getValue(),
-            parsedDate: this.parsedDate,
-        };
-    }
-    getQuotedMessageAttachmentListContext() {
-        return {
-            messageId: this.message?.quoted_message?.id || '',
-            attachments: this.quotedMessageAttachments,
-            parentMessageId: this?.message?.quoted_message?.parent_id,
-        };
-    }
-    getMessageReactionsContext() {
-        return {
-            messageReactionCounts: this.message?.reaction_counts || {},
-            latestReactions: this.message?.latest_reactions || [],
-            messageId: this.message?.id,
-            ownReactions: this.message?.own_reactions || [],
-        };
-    }
-    messageClicked() {
-        if (this.message?.status === 'failed' &&
-            this.message?.errorStatusCode !== 403) {
-            this.resendMessage();
+        try {
+            const message = await (this.isUpdate
+                ? this.channelService.updateMessage({
+                    ...this.message,
+                    text: text,
+                    attachments: attachments,
+                })
+                : this.channelService.sendMessage(text, attachments, this.mentionedUsers, this.parentMessageId, this.quotedMessage?.id));
+            this.messageUpdate.emit({ message });
+            if (this.isUpdate) {
+                this.deselectMessageToEdit();
+            }
+            else {
+                this.attachmentService.resetAttachmentUploads();
+            }
         }
-        else if (this.message?.type === 'error' &&
-            this.message?.moderation_details) {
-            this.openMessageBouncePrompt();
+        catch (error) {
+            if (this.isUpdate) {
+                this.notificationService.addTemporaryNotification('streamChat.Edit message request failed');
+            }
         }
-        else {
-            this.isEditedFlagOpened = !this.isEditedFlagOpened;
+        void this.channelService.typingStopped(this.parentMessageId);
+        if (this.quotedMessage) {
+            this.deselectMessageToQuote();
         }
     }
-    resendMessage() {
-        void this.channelService.resendMessage(this.message);
+    get containsLinks() {
+        return /(?:(?:https?|ftp):\/\/)?[\w/\-?=%.]+\.[\w/\-&?=%.]+/.test(this.textareaValue);
     }
-    setAsActiveParentMessage() {
-        void this.channelService.setAsActiveParentMessage(this.message);
+    get quotedMessageAttachments() {
+        const originalAttachments = this.quotedMessage?.attachments;
+        return originalAttachments && originalAttachments.length
+            ? [originalAttachments[0]]
+            : [];
     }
-    getMentionContext(messagePart) {
-        return {
-            content: messagePart.content,
-            user: messagePart.user,
-        };
+    get disabledTextareaText() {
+        if (!this.canSendMessages) {
+            return this.mode === 'thread'
+                ? "streamChat.You can't send thread replies in this channel"
+                : "streamChat.You can't send messages in this channel";
+        }
+        return '';
     }
-    getMessageActionsBoxContext() {
-        return {
-            isMine: this.isSentByCurrentUser,
-            enabledActions: this.enabledMessageActions,
-            message: this.message,
-            messageTextHtmlElement: this.messageTextElement?.nativeElement,
-        };
+    async filesSelected(fileList) {
+        if (!(await this.areAttachemntsValid(fileList))) {
+            return;
+        }
+        await this.attachmentService.filesSelected(fileList);
+        this.clearFileInput();
     }
-    getDeliveredStatusContext() {
-        return {
-            message: this.message,
-        };
+    deselectMessageToQuote() {
+        this.channelService.selectMessageToQuote(undefined);
     }
-    getSendingStatusContext() {
+    deselectMessageToEdit() {
+        this.messageActionsService.messageToEdit$.next(undefined);
+    }
+    getEmojiPickerContext() {
         return {
-            message: this.message,
+            emojiInput$: this.emojiInputService.emojiInput$,
         };
     }
-    getReadStatusContext() {
+    getAttachmentPreviewListContext() {
         return {
-            message: this.message,
-            readByText: this.readByText,
+            attachmentUploads$: this.attachmentService.attachmentUploads$,
+            deleteUploadHandler: this.deleteUpload.bind(this),
+            retryUploadHandler: this.retryUpload.bind(this),
         };
     }
-    getMessageMetadataContext() {
+    getAttachmentUploadContext() {
         return {
-            message: this.message,
+            isMultipleFileUploadEnabled: this.isMultipleFileUploadEnabled,
+            attachmentService: this.attachmentService,
         };
     }
-    jumpToMessage(messageId, parentMessageId) {
-        void this.channelService.jumpToMessage(messageId, parentMessageId);
+    get isUpdate() {
+        return !!this.message;
     }
-    displayTranslatedMessage() {
-        this.createMessageParts(true);
+    deleteUpload(upload) {
+        if (this.isUpdate) {
+            // Delay delete to avoid modal detecting this click as outside click
+            setTimeout(() => {
+                void this.attachmentService.deleteAttachment(upload);
+            });
+        }
+        else {
+            void this.attachmentService.deleteAttachment(upload);
+        }
     }
-    displayOriginalMessage() {
-        this.createMessageParts(false);
+    retryUpload(file) {
+        void this.attachmentService.retryAttachmentUpload(file);
     }
-    openMessageBouncePrompt() {
-        this.channelService.bouncedMessage$.next(this.message);
+    clearFileInput() {
+        this.fileInput.nativeElement.value = '';
     }
-    createMessageParts(shouldTranslate = true) {
-        this.messageTextParts = undefined;
-        this.messageText = undefined;
-        let content = this.getMessageContent(shouldTranslate);
-        if ((!this.message.mentioned_users ||
-            this.message.mentioned_users.length === 0) &&
-            !content?.match(this.emojiRegexp) &&
-            !content?.match(this.urlRegexp)) {
-            this.messageTextParts = undefined;
-            this.messageText = content;
-            return;
+    initTextarea() {
+        // cleanup previously built textarea
+        if (!this.canSendMessages) {
+            this.textareaRef = undefined;
         }
-        if (!content) {
+        if (!this.canSendMessages || this.textareaRef || !this.textareaAnchor) {
             return;
         }
-        if (!this.message.mentioned_users ||
-            this.message.mentioned_users.length === 0) {
-            content = this.fixEmojiDisplay(content);
-            content = this.wrapLinksWithAnchorTag(content);
-            this.messageTextParts = [{ content, type: 'text' }];
+        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.textareaType);
+        this.textareaRef =
+            this.textareaAnchor.viewContainerRef.createComponent(componentFactory);
+        this.cdRef.detectChanges();
+    }
+    async areAttachemntsValid(fileList) {
+        if (!fileList) {
+            return true;
         }
-        else {
-            this.messageTextParts = [];
-            let text = content;
-            this.message.mentioned_users.forEach((user) => {
-                const mention = `@${user.name || user.id}`;
-                const precedingText = text.substring(0, text.indexOf(mention));
-                let formattedPrecedingText = this.fixEmojiDisplay(precedingText);
-                formattedPrecedingText = this.wrapLinksWithAnchorTag(formattedPrecedingText);
-                this.messageTextParts.push({
-                    content: formattedPrecedingText,
-                    type: 'text',
-                });
-                this.messageTextParts.push({
-                    content: mention,
-                    type: 'mention',
-                    user,
-                });
-                text = text.replace(precedingText + mention, '');
-            });
-            if (text) {
-                text = this.fixEmojiDisplay(text);
-                text = this.wrapLinksWithAnchorTag(text);
-                this.messageTextParts.push({ content: text, type: 'text' });
-            }
+        if (!this.appSettings) {
+            await this.chatClient.getAppSettings();
         }
-    }
-    getMessageContent(shouldTranslate) {
-        const originalContent = this.message?.text;
-        if (shouldTranslate) {
-            const translation = this.message?.translation;
-            if (translation) {
-                this.shouldDisplayTranslationNotice = true;
-                this.displayedMessageTextContent = 'translation';
+        let isValid = true;
+        Array.from(fileList).forEach((f) => {
+            let hasBlockedExtension;
+            let hasBlockedMimeType;
+            let hasNotAllowedExtension;
+            let hasNotAllowedMimeType;
+            if (isImageFile(f)) {
+                hasBlockedExtension =
+                    !!this.appSettings?.image_upload_config?.blocked_file_extensions?.find((ext) => f.name.endsWith(ext));
+                hasBlockedMimeType =
+                    !!this.appSettings?.image_upload_config?.blocked_mime_types?.find((type) => f.type === type);
+                hasNotAllowedExtension =
+                    !!this.appSettings?.image_upload_config?.allowed_file_extensions
+                        ?.length &&
+                        !this.appSettings?.image_upload_config?.allowed_file_extensions?.find((ext) => f.name.endsWith(ext));
+                hasNotAllowedMimeType =
+                    !!this.appSettings?.image_upload_config?.allowed_mime_types?.length &&
+                        !this.appSettings?.image_upload_config?.allowed_mime_types?.find((type) => f.type === type);
             }
-            return translation || originalContent;
+            else {
+                hasBlockedExtension =
+                    !!this.appSettings?.file_upload_config?.blocked_file_extensions?.find((ext) => f.name.endsWith(ext));
+                hasBlockedMimeType =
+                    !!this.appSettings?.file_upload_config?.blocked_mime_types?.find((type) => f.type === type);
+                hasNotAllowedExtension =
+                    !!this.appSettings?.file_upload_config?.allowed_file_extensions
+                        ?.length &&
+                        !this.appSettings?.file_upload_config?.allowed_file_extensions?.find((ext) => f.name.endsWith(ext));
+                hasNotAllowedMimeType =
+                    !!this.appSettings?.file_upload_config?.allowed_mime_types?.length &&
+                        !this.appSettings?.file_upload_config?.allowed_mime_types?.find((type) => f.type === type);
+            }
+            if (hasBlockedExtension ||
+                hasBlockedMimeType ||
+                hasNotAllowedExtension ||
+                hasNotAllowedMimeType) {
+                this.notificationService.addTemporaryNotification('streamChat.Error uploading file, extension not supported', undefined, undefined, { name: f.name, ext: f.type });
+                isValid = false;
+            }
+        });
+        return isValid;
+    }
+    setCanSendMessages() {
+        const capabilities = this.channel?.data?.own_capabilities;
+        if (!capabilities) {
+            this.canSendMessages = false;
         }
         else {
-            this.displayedMessageTextContent = 'original';
-            return originalContent;
+            this.canSendMessages =
+                capabilities.indexOf(this.mode === 'main' ? 'send-message' : 'send-reply') !== -1 || this.isUpdate;
+        }
+        if (this.isViewInited) {
+            this.cdRef.detectChanges();
+            this.initTextarea();
         }
     }
-    fixEmojiDisplay(content) {
-        // Wrap emojis in span to display emojis correctly in Chrome https://bugs.chromium.org/p/chromium/issues/detail?id=596223
-        // Based on this: https://stackoverflow.com/questions/4565112/javascript-how-to-find-out-if-the-user-browser-is-chrome
-        /* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any */
-        const isChrome = !!window.chrome && typeof window.opr === 'undefined';
-        /* eslint-enable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any */
-        content = content.replace(this.emojiRegexp, (match) => `<span ${isChrome ? 'class="str-chat__emoji-display-fix"' : ''}>${match}</span>`);
-        return content;
-    }
-    wrapLinksWithAnchorTag(content) {
-        if (this.displayAs === 'html') {
-            return content;
+    get parentMessageId() {
+        let parentMessageId = undefined;
+        if (this.mode === 'thread') {
+            this.channelService.activeParentMessageId$
+                .pipe(first())
+                .subscribe((id) => (parentMessageId = id));
         }
-        content = content.replace(this.urlRegexp, (match) => this.messageService.customLinkRenderer
-            ? this.messageService.customLinkRenderer(match)
-            : `<a href="${match}" target="_blank" rel="nofollow">${match}</a>`);
-        return content;
+        return parentMessageId;
     }
-    setIsSentByCurrentUser() {
-        this.isSentByCurrentUser = this.message?.user?.id === this.userId;
+    startCooldown(cooldown) {
+        this.textareaPlaceholder = this.slowModeTextareaPlaceholder;
+        this.isCooldownInProgress = true;
+        this.cooldown$ = timer(0, 1000).pipe(take(cooldown + 1), map((v) => cooldown - v), tap((v) => {
+            if (v === 0) {
+                this.stopCooldown();
+            }
+        }));
     }
-    setLastReadUser() {
-        this.lastReadUser = this.message?.readBy?.filter((u) => u.id !== this.userId)[0];
+    stopCooldown() {
+        this.cooldown$ = undefined;
+        this.isCooldownInProgress = false;
+        this.textareaPlaceholder = this.defaultTextareaPlaceholder;
     }
-    startMessageMenuShowTimer(options) {
-        this.stopMessageMenuShowTimer();
-        this.showMessageMenuTimeout = setTimeout(() => {
-            if (!this.message) {
-                return;
-            }
-            if (this.messageActionsService.customActionClickHandler) {
-                this.messageActionsService.customActionClickHandler({
-                    message: this.message,
-                    enabledActions: this.enabledMessageActions,
-                    customActions: this.messageActionsService.customActions$.getValue(),
-                    isMine: this.isSentByCurrentUser,
-                    messageTextHtmlElement: this.messageTextElement?.nativeElement,
-                });
-                return;
-            }
-            else {
-                this.shouldPreventMessageMenuClose = !options.fromTouch;
-                this.messageMenuTrigger?.show();
-            }
-            this.showMessageMenuTimeout = undefined;
-        }, 400);
+    checkIfInEditMode() {
+        if (!this.watchForMessageToEdit) {
+            return;
+        }
+        if (!this.messageToEdit && this.message) {
+            this.message = undefined;
+            this.messageToUpdateChanged();
+        }
+        if (this.messageToEdit &&
+            ((this.mode === 'main' && !this.messageToEdit.parent_id) ||
+                (this.mode === 'thread' && this.messageToEdit.parent_id))) {
+            this.message = this.messageToEdit;
+            this.messageToUpdateChanged();
+        }
     }
-    stopMessageMenuShowTimer() {
-        if (this.showMessageMenuTimeout) {
-            clearTimeout(this.showMessageMenuTimeout);
-            this.showMessageMenuTimeout = undefined;
+    messageToUpdateChanged() {
+        this.attachmentService.resetAttachmentUploads();
+        this.setCanSendMessages();
+        if (this.isUpdate) {
+            this.attachmentService.createFromAttachments(this.message.attachments || []);
+            this.textareaValue = this.message.text || '';
+        }
+        else {
+            this.textareaValue = '';
         }
     }
 }
-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 }], 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" }, 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 }], 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=\"\n              str-chat__message-actions-container\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--options\n            \"\n            [floatUiLoose]=\"messageMenuFloat\"\n            looseTrigger=\"click\"\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          >\n            <stream-message-reactions\n              [messageReactionCounts]=\"messageReactionCounts\"\n              [latestReactions]=\"latestReactions\"\n              [messageId]=\"messageId\"\n              [ownReactions]=\"ownReactions\"\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              (click)=\"messageActionsBoxClicked(messageMenuFloat)\"\n            ></stream-message-actions-box>\n          </ng-template>\n          <ng-container>\n            <ng-container\n              *ngTemplateOutlet=\"\n                (customTemplatesService.messageActionsBoxTemplate$ | async) ||\n                  defaultMessageActionsBox;\n                context: getMessageActionsBoxContext()\n              \"\n            >\n            </ng-container>\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          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          (mousedown)=\"mousePushedDown($event)\"\n          (mouseup)=\"mouseReleased()\"\n          (touchstart)=\"touchStarted()\"\n          (touchend)=\"touchEnded()\"\n          (click)=\"messageBubbleClicked($event)\"\n          (keyup.enter)=\"messageBubbleClicked($event)\"\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=\"\n                str-chat__message-text-inner str-chat__message-simple-text-inner\n              \"\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=\"\n                  str-chat__simple-message--error-message\n                  str-chat__message--error-message\n                \"\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=\"\n                  str-chat__simple-message--error-message\n                  str-chat__message--error-message\n                \"\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=\"\n        str-chat__message-data\n        str-chat__message-simple-data\n        str-chat__message-metadata\n      \"\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=\"\n          str-chat__message-simple-status\n          str-chat__message-simple-status-angular\n          str-chat__message-status\n        \"\n        data-testid=\"delivered-indicator\"\n        tabindex=\"0\"\n        [floatUiLoose]=\"floatingContent\"\n        loosePlacement=\"top\"\n        looseTrigger=\"hover\"\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=\"\n          str-chat__message-simple-status\n          str-chat__message-simple-status-angular\n          str-chat__message-status\n        \"\n        data-testid=\"sending-indicator\"\n        tabindex=\"0\"\n        [floatUiLoose]=\"floatingContent\"\n        loosePlacement=\"top\"\n        looseTrigger=\"hover\"\n        [disableAnimation]=\"false\"\n        [preventOverflow]=\"true\"\n        [positionFixed]=\"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=\"\n          str-chat__message-simple-status\n          str-chat__message-simple-status-angular\n          str-chat__message-status\n        \"\n        data-testid=\"read-indicator\"\n        tabindex=\"0\"\n        [floatUiLoose]=\"floatingContent\"\n        loosePlacement=\"top\"\n        looseTrigger=\"hover\"\n        [disableAnimation]=\"false\"\n        [preventOverflow]=\"true\"\n        [positionFixed]=\"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=\"\n      str-chat__message-simple-reply-button\n      str-chat__message-replies-count-button-wrapper\n    \"\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: 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", "messageReactionCounts", "latestReactions", "ownReactions"] }, { 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" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageComponent, decorators: [{
+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: ChatClientService }, { token: EmojiInputService }, { token: CustomTemplatesService }, { token: MessageActionsService }], 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" }, outputs: { messageUpdate: "messageUpdate" }, host: { properties: { "class": "this.class" } }, providers: [AttachmentService, EmojiInputService], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "textareaAnchor", first: true, predicate: TextareaDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"str-chat__message-input str-chat-angular__message-input\">\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=\"\n        str-chat__message-input-inner\n        str-chat-angular__message-input-inner\n      \"\n    >\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=\"\n              str-chat-angular__avatar-host\n              str-chat__message-sender-avatar\n            \"\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=\"\n              quoted-message-preview-content-inner\n              str-chat__quoted-message-bubble\n            \"\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    </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", 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: 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: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageInputComponent, 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=\"\n              str-chat__message-actions-container\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--options\n            \"\n            [floatUiLoose]=\"messageMenuFloat\"\n            looseTrigger=\"click\"\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          >\n            <stream-message-reactions\n              [messageReactionCounts]=\"messageReactionCounts\"\n              [latestReactions]=\"latestReactions\"\n              [messageId]=\"messageId\"\n              [ownReactions]=\"ownReactions\"\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              (click)=\"messageActionsBoxClicked(messageMenuFloat)\"\n            ></stream-message-actions-box>\n          </ng-template>\n          <ng-container>\n            <ng-container\n              *ngTemplateOutlet=\"\n                (customTemplatesService.messageActionsBoxTemplate$ | async) ||\n                  defaultMessageActionsBox;\n                context: getMessageActionsBoxContext()\n              \"\n            >\n            </ng-container>\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          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          (mousedown)=\"mousePushedDown($event)\"\n          (mouseup)=\"mouseReleased()\"\n          (touchstart)=\"touchStarted()\"\n          (touchend)=\"touchEnded()\"\n          (click)=\"messageBubbleClicked($event)\"\n          (keyup.enter)=\"messageBubbleClicked($event)\"\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=\"\n                str-chat__message-text-inner str-chat__message-simple-text-inner\n              \"\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=\"\n                  str-chat__simple-message--error-message\n                  str-chat__message--error-message\n                \"\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=\"\n                  str-chat__simple-message--error-message\n                  str-chat__message--error-message\n                \"\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=\"\n        str-chat__message-data\n        str-chat__message-simple-data\n        str-chat__message-metadata\n      \"\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=\"\n          str-chat__message-simple-status\n          str-chat__message-simple-status-angular\n          str-chat__message-status\n        \"\n        data-testid=\"delivered-indicator\"\n        tabindex=\"0\"\n        [floatUiLoose]=\"floatingContent\"\n        loosePlacement=\"top\"\n        looseTrigger=\"hover\"\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=\"\n          str-chat__message-simple-status\n          str-chat__message-simple-status-angular\n          str-chat__message-status\n        \"\n        data-testid=\"sending-indicator\"\n        tabindex=\"0\"\n        [floatUiLoose]=\"floatingContent\"\n        loosePlacement=\"top\"\n        looseTrigger=\"hover\"\n        [disableAnimation]=\"false\"\n        [preventOverflow]=\"true\"\n        [positionFixed]=\"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=\"\n          str-chat__message-simple-status\n          str-chat__message-simple-status-angular\n          str-chat__message-status\n        \"\n        data-testid=\"read-indicator\"\n        tabindex=\"0\"\n        [floatUiLoose]=\"floatingContent\"\n        loosePlacement=\"top\"\n        looseTrigger=\"hover\"\n        [disableAnimation]=\"false\"\n        [preventOverflow]=\"true\"\n        [positionFixed]=\"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=\"\n      str-chat__message-simple-reply-button\n      str-chat__message-replies-count-button-wrapper\n    \"\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" }]
-        }], ctorParameters: function () { return [{ type: ChatClientService }, { type: ChannelService }, { type: CustomTemplatesService }, { type: i0.ChangeDetectorRef }, { type: DateParserService }, { type: MessageService }, { type: MessageActionsService }]; }, propDecorators: { message: [{
+            args: [{ selector: 'stream-message-input', providers: [AttachmentService, EmojiInputService], template: "<div class=\"str-chat__message-input str-chat-angular__message-input\">\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=\"\n        str-chat__message-input-inner\n        str-chat-angular__message-input-inner\n      \"\n    >\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=\"\n              str-chat-angular__avatar-host\n              str-chat__message-sender-avatar\n            \"\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=\"\n              quoted-message-preview-content-inner\n              str-chat__quoted-message-bubble\n            \"\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    </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" }]
+        }], ctorParameters: function () { return [{ type: ChannelService }, { type: NotificationService }, { type: AttachmentService }, { type: MessageInputConfigService }, { type: i0.Type, decorators: [{
+                    type: Inject,
+                    args: [textareaInjectionToken]
+                }] }, { type: i0.ComponentFactoryResolver }, { type: i0.ChangeDetectorRef }, { type: ChatClientService }, { type: EmojiInputService }, { type: CustomTemplatesService }, { type: MessageActionsService }]; }, propDecorators: { isFileUploadEnabled: [{
                 type: Input
-            }], enabledMessageActions: [{
+            }], areMentionsEnabled: [{
                 type: Input
-            }], isLastSentMessage: [{
+            }], mentionScope: [{
                 type: Input
             }], mode: [{
                 type: Input
-            }], isHighlighted: [{
+            }], isMultipleFileUploadEnabled: [{
                 type: Input
-            }], messageMenuTrigger: [{
-                type: ViewChild,
-                args: ['messageMenuTrigger']
-            }], messageMenuFloat: [{
+            }], message: [{
+                type: Input
+            }], sendMessage$: [{
+                type: Input
+            }], inputMode: [{
+                type: Input
+            }], autoFocus: [{
+                type: Input
+            }], watchForMessageToEdit: [{
+                type: Input
+            }], displaySendButton: [{
+                type: Input
+            }], messageUpdate: [{
+                type: Output
+            }], class: [{
+                type: HostBinding
+            }], fileInput: [{
                 type: ViewChild,
-                args: ['messageMenuFloat']
-            }], messageTextElement: [{
+                args: ['fileInput']
+            }], textareaAnchor: [{
                 type: ViewChild,
-                args: ['messageTextElement']
+                args: [TextareaDirective, { static: false }]
             }] } });
 
 /**
@@ -5680,6 +5696,7 @@ class TextareaComponent {
          */
         this.send = new EventEmitter();
         this.subscriptions = [];
+        this.isViewInited = false;
         this.subscriptions.push(this.emojiInputService.emojiInput$.subscribe((emoji) => {
             this.messageInput.nativeElement.focus();
             const { selectionStart } = this.messageInput.nativeElement;
@@ -5695,8 +5712,19 @@ class TextareaComponent {
         if (changes.value && !this.value && this.messageInput) {
             this.messageInput.nativeElement.style.height = 'auto';
         }
+        else if (changes.value &&
+            this.value &&
+            this.messageInput &&
+            this.isViewInited) {
+            setTimeout(() => {
+                if (this.messageInput.nativeElement.scrollHeight > 0) {
+                    this.adjustTextareaHeight();
+                }
+            }, 0);
+        }
     }
     ngAfterViewInit() {
+        this.isViewInited = true;
         if (this.messageInput.nativeElement.scrollHeight > 0) {
             this.adjustTextareaHeight();
         }
@@ -5834,6 +5862,7 @@ class AutocompleteTextareaComponent {
             mentionSelect: (item, triggerChar) => this.itemSelectedFromAutocompleteList(item, triggerChar),
         };
         this.searchTerm$ = new BehaviorSubject('');
+        this.isViewInited = false;
         this.searchTerm$.pipe(debounceTime(300)).subscribe((searchTerm) => {
             if (searchTerm.startsWith(this.mentionTriggerChar)) {
                 void this.updateMentionOptions(searchTerm);
@@ -5888,8 +5917,19 @@ class AutocompleteTextareaComponent {
             this.messageInput.nativeElement.style.height = 'auto';
             this.updateMentionedUsersFromText();
         }
+        else if (changes.value &&
+            this.value &&
+            this.messageInput &&
+            this.isViewInited) {
+            setTimeout(() => {
+                if (this.messageInput.nativeElement.scrollHeight > 0) {
+                    this.adjustTextareaHeight();
+                }
+            }, 0);
+        }
     }
     ngAfterViewInit() {
+        this.isViewInited = true;
         if (this.messageInput.nativeElement.scrollHeight > 0) {
             this.adjustTextareaHeight();
         }
@@ -6126,6 +6166,7 @@ class MessageListComponent {
         this.isUnreadNotificationVisible = true;
         this.isJumpingToLatestUnreadMessage = false;
         this.isJumpToLatestButtonVisible = true;
+        this.scroll$ = new Subject();
         this.subscriptions = [];
         this.isLatestMessageInList = true;
         this.parsedDates = new Map();
@@ -6449,6 +6490,7 @@ class MessageListComponent {
             this.scrollContainer.nativeElement.clientHeight) {
             return;
         }
+        this.scroll$.next();
         const scrollPosition = this.getScrollPosition();
         this.chatClientService.chatClient?.logger?.('info', `Scrolled - scroll position: ${scrollPosition}, container height: ${this.scrollContainer.nativeElement.scrollHeight}`, { tags: `message list ${this.mode}` });
         const isUserScrolled = (this.direction === 'bottom-to-top'
@@ -6746,10 +6788,10 @@ 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", limitNumberOfMessagesInList: "limitNumberOfMessagesInList" }, 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\n        *ngIf=\"\n          isLoading && direction === 'bottom-to-top' && displayLoadingIndicator\n        \"\n        data-testid=\"top-loading-indicator\"\n      ></stream-loading-indicator>\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\n        *ngIf=\"\n          isLoading && direction === 'top-to-bottom' && displayLoadingIndicator\n        \"\n        data-testid=\"bottom-loading-indicator\"\n      ></stream-loading-indicator>\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=\"\n      str-chat__message-notification-scroll-to-latest\n      str-chat__message-notification-scroll-to-latest-right\n      str-chat__circle-fab\n    \"\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=\"\n        str-chat__message-notification\n        str-chat__message-notification-scroll-to-latest-unread-count\n        str-chat__jump-to-latest-unread-count\n      \"\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  >\n    <stream-message\n      [message]=\"messageInput\"\n      [isLastSentMessage]=\"isLastSentMessage\"\n      [enabledMessageActions]=\"enabledMessageActions\"\n      [mode]=\"mode\"\n      [isHighlighted]=\"isHighlighted\"\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      }\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: MessageComponent, selector: "stream-message", inputs: ["message", "enabledMessageActions", "isLastSentMessage", "mode", "isHighlighted"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "stream-loading-indicator" }, { kind: "component", type: IconComponent, selector: "stream-icon", inputs: ["icon"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { 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", limitNumberOfMessagesInList: "limitNumberOfMessagesInList" }, 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\n        *ngIf=\"\n          isLoading && direction === 'bottom-to-top' && displayLoadingIndicator\n        \"\n        data-testid=\"top-loading-indicator\"\n      ></stream-loading-indicator>\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\n        *ngIf=\"\n          isLoading && direction === 'top-to-bottom' && displayLoadingIndicator\n        \"\n        data-testid=\"bottom-loading-indicator\"\n      ></stream-loading-indicator>\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=\"\n      str-chat__message-notification-scroll-to-latest\n      str-chat__message-notification-scroll-to-latest-right\n      str-chat__circle-fab\n    \"\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=\"\n        str-chat__message-notification\n        str-chat__message-notification-scroll-to-latest-unread-count\n        str-chat__jump-to-latest-unread-count\n      \"\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: MessageComponent, selector: "stream-message", inputs: ["message", "enabledMessageActions", "isLastSentMessage", "mode", "isHighlighted", "scroll$"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "stream-loading-indicator" }, { kind: "component", type: IconComponent, selector: "stream-icon", inputs: ["icon"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.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\n        *ngIf=\"\n          isLoading && direction === 'bottom-to-top' && displayLoadingIndicator\n        \"\n        data-testid=\"top-loading-indicator\"\n      ></stream-loading-indicator>\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\n        *ngIf=\"\n          isLoading && direction === 'top-to-bottom' && displayLoadingIndicator\n        \"\n        data-testid=\"bottom-loading-indicator\"\n      ></stream-loading-indicator>\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=\"\n      str-chat__message-notification-scroll-to-latest\n      str-chat__message-notification-scroll-to-latest-right\n      str-chat__circle-fab\n    \"\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=\"\n        str-chat__message-notification\n        str-chat__message-notification-scroll-to-latest-unread-count\n        str-chat__jump-to-latest-unread-count\n      \"\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  >\n    <stream-message\n      [message]=\"messageInput\"\n      [isLastSentMessage]=\"isLastSentMessage\"\n      [enabledMessageActions]=\"enabledMessageActions\"\n      [mode]=\"mode\"\n      [isHighlighted]=\"isHighlighted\"\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      }\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" }]
+            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\n        *ngIf=\"\n          isLoading && direction === 'bottom-to-top' && displayLoadingIndicator\n        \"\n        data-testid=\"top-loading-indicator\"\n      ></stream-loading-indicator>\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\n        *ngIf=\"\n          isLoading && direction === 'top-to-bottom' && displayLoadingIndicator\n        \"\n        data-testid=\"bottom-loading-indicator\"\n      ></stream-loading-indicator>\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=\"\n      str-chat__message-notification-scroll-to-latest\n      str-chat__message-notification-scroll-to-latest-right\n      str-chat__circle-fab\n    \"\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=\"\n        str-chat__message-notification\n        str-chat__message-notification-scroll-to-latest-unread-count\n        str-chat__jump-to-latest-unread-count\n      \"\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" }]
         }], ctorParameters: function () { return [{ type: ChannelService }, { type: ChatClientService }, { type: CustomTemplatesService }, { type: DateParserService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { mode: [{
                 type: Input
             }], direction: [{
@@ -6860,7 +6902,6 @@ StreamChatModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versio
         ThreadComponent,
         IconPlaceholderComponent,
         LoadingIndicatorPlaceholderComponent,
-        EditMessageFormComponent,
         MessageBouncePromptComponent,
         VoiceRecordingComponent,
         VoiceRecordingWavebarComponent,
@@ -6887,7 +6928,6 @@ StreamChatModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versio
         ThreadComponent,
         IconPlaceholderComponent,
         LoadingIndicatorPlaceholderComponent,
-        EditMessageFormComponent,
         MessageBouncePromptComponent,
         VoiceRecordingComponent,
         VoiceRecordingWavebarComponent,
@@ -6920,7 +6960,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                         ThreadComponent,
                         IconPlaceholderComponent,
                         LoadingIndicatorPlaceholderComponent,
-                        EditMessageFormComponent,
                         MessageBouncePromptComponent,
                         VoiceRecordingComponent,
                         VoiceRecordingWavebarComponent,
@@ -6953,7 +6992,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                         ThreadComponent,
                         IconPlaceholderComponent,
                         LoadingIndicatorPlaceholderComponent,
-                        EditMessageFormComponent,
                         MessageBouncePromptComponent,
                         VoiceRecordingComponent,
                         VoiceRecordingWavebarComponent,
@@ -7020,5 +7058,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AttachmentConfigurationService, AttachmentListComponent, AttachmentPreviewListComponent, AttachmentService, AutocompleteTextareaComponent, AvatarComponent, AvatarPlaceholderComponent, ChannelComponent, ChannelHeaderComponent, ChannelListComponent, ChannelPreviewComponent, ChannelService, ChatClientService, CustomTemplatesService, DateParserService, EditMessageFormComponent, EmojiInputService, IconComponent, IconPlaceholderComponent, LoadingIndicatorComponent, LoadingIndicatorPlaceholderComponent, MessageActionsBoxComponent, MessageActionsService, MessageBouncePromptComponent, MessageComponent, MessageInputComponent, MessageInputConfigService, MessageListComponent, MessageReactionsComponent, MessageReactionsSelectorComponent, MessageReactionsService, MessageService, ModalComponent, NotificationComponent, NotificationListComponent, NotificationService, StreamAutocompleteTextareaModule, StreamAvatarModule, StreamChatModule, StreamI18nService, StreamTextareaModule, TextareaComponent, TextareaDirective, ThemeService, ThreadComponent, TransliterationService, VoiceRecordingComponent, VoiceRecordingWavebarComponent, createMessagePreview, getChannelDisplayText, getGroupStyles, getMessageTranslation, getReadBy, isImageAttachment, isImageFile, isOnSeparateDate, listUsers, parseDate, textareaInjectionToken };
+export { AttachmentConfigurationService, AttachmentListComponent, AttachmentPreviewListComponent, AttachmentService, AutocompleteTextareaComponent, AvatarComponent, AvatarPlaceholderComponent, ChannelComponent, ChannelHeaderComponent, ChannelListComponent, ChannelPreviewComponent, ChannelService, ChatClientService, CustomTemplatesService, DateParserService, EmojiInputService, IconComponent, IconPlaceholderComponent, LoadingIndicatorComponent, LoadingIndicatorPlaceholderComponent, MessageActionsBoxComponent, MessageActionsService, MessageBouncePromptComponent, MessageComponent, MessageInputComponent, MessageInputConfigService, MessageListComponent, MessageReactionsComponent, MessageReactionsSelectorComponent, MessageReactionsService, MessageService, ModalComponent, NotificationComponent, NotificationListComponent, NotificationService, StreamAutocompleteTextareaModule, StreamAvatarModule, StreamChatModule, StreamI18nService, StreamTextareaModule, TextareaComponent, TextareaDirective, ThemeService, ThreadComponent, TransliterationService, VoiceRecordingComponent, VoiceRecordingWavebarComponent, createMessagePreview, getChannelDisplayText, getGroupStyles, getMessageTranslation, getReadBy, isImageAttachment, isImageFile, isOnSeparateDate, listUsers, parseDate, textareaInjectionToken };
 //# sourceMappingURL=stream-chat-angular.mjs.map