stream-chat-angular 6.3.1 → 6.4.0

package/fesm2015/stream-chat-angular.mjs

@@ -1,9 +1,9 @@
 import { __awaiter } from 'tslib';
 import * as i0 from '@angular/core';
 import { Injectable, Component, Input, EventEmitter, Output, ViewChild, HostBinding, TemplateRef, ContentChild, ChangeDetectionStrategy, InjectionToken, Directive, NgModule, Inject, Optional } from '@angular/core';
-import { BehaviorSubject, ReplaySubject, combineLatest, map as map$1, shareReplay as shareReplay$1, take as take$1, pairwise, Subject, timer, merge, switchMap, distinctUntilChanged, filter as filter$1, of } from 'rxjs';
+import { BehaviorSubject, ReplaySubject, combineLatest, map as map$1, shareReplay as shareReplay$1, take as take$1, pairwise, Subject, timer, merge, switchMap, distinctUntilChanged as distinctUntilChanged$1, filter as filter$1, of } from 'rxjs';
 import { StreamChat, VotingVisibility, isVoteAnswer } from 'stream-chat';
-import { take, shareReplay, map, first, filter, tap, debounceTime, throttleTime } from 'rxjs/operators';
+import { take, shareReplay, map, first, filter, distinctUntilChanged, tap, debounceTime, throttleTime } from 'rxjs/operators';
 import { v4 } from 'uuid';
 import * as i6 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
@@ -23,7 +23,7 @@ import { MentionModule } from 'angular-mentions';
 import * as i1$1 from '@angular/forms';
 import { FormGroup, FormControl, Validators, FormArray, ReactiveFormsModule } from '@angular/forms';
 
-const version = '6.3.1';
+const version = '6.4.0';
 
 /**
  * The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](/chat/docs/sdk/angular/components/NotificationListComponent/) component displays the currently active notifications.
@@ -468,6 +468,7 @@ class ChannelService {
         this._shouldMarkActiveChannelAsRead = true;
         this.isStateRecoveryInProgress = false;
         this.channelQueryStateSubject = new BehaviorSubject(undefined);
+        this.channelSwitchStateSubject = new BehaviorSubject('end');
         this.channelListSetter = (channels, shouldStopWatchingRemovedChannels = true) => {
             var _a;
             const currentChannels = this.channelsSubject.getValue() || [];
@@ -568,6 +569,9 @@ class ChannelService {
         this.channelQueryState$ = this.channelQueryStateSubject
             .asObservable()
             .pipe(shareReplay(1));
+        this.channelSwitchState$ = this.channelSwitchStateSubject
+            .asObservable()
+            .pipe(shareReplay(1));
     }
     /**
      * If set to false, read events won't be sent as new messages are received. If set to true active channel (if any) will immediately be marked as read.
@@ -607,6 +611,7 @@ class ChannelService {
      */
     setAsActiveChannel(channel) {
         var _a, _b;
+        this.channelSwitchStateSubject.next('start');
         const prevActiveChannel = this.activeChannelSubject.getValue();
         if ((prevActiveChannel === null || prevActiveChannel === void 0 ? void 0 : prevActiveChannel.cid) === channel.cid) {
             return;
@@ -629,11 +634,13 @@ class ChannelService {
             channel.state.latestMessages = channel.state.latestMessages.slice(channelStateLength - 2 * this.messagePageSize);
         }
         this.setChannelState(channel);
+        this.channelSwitchStateSubject.next('end');
     }
     /**
      * Deselects the currently active (if any) channel
      */
     deselectActiveChannel() {
+        this.channelSwitchStateSubject.next('start');
         const activeChannel = this.activeChannelSubject.getValue();
         if (!activeChannel) {
             return;
@@ -654,6 +661,7 @@ class ChannelService {
         this.activeChannelUnreadCount = undefined;
         this.areReadEventsPaused = false;
         this.isMessageLoadingInProgress = false;
+        this.channelSwitchStateSubject.next('end');
     }
     /**
      * Sets the given `message` as an active parent message. If `undefined` is provided, it will deleselect the current parent message.
@@ -1090,6 +1098,9 @@ class ChannelService {
      * @param message The message to select, if called with `undefined`, it deselects the message
      */
     selectMessageToQuote(message) {
+        if (message && !this.isStreamMessage(message)) {
+            message = this.transformToStreamMessage(message);
+        }
         this.messageToQuoteSubject.next(message);
     }
     /**
@@ -6801,6 +6812,20 @@ class MessageInputComponent {
          * Emits when a message was successfuly sent or updated
          */
         this.messageUpdate = new EventEmitter();
+        /**
+         * Emits the messsage draft whenever the composed message changes.
+         *   - If the user clears the message input, or sends the message, undefined is emitted.
+         *   - If active channel changes, nothing is emitted.
+         *
+         * To save and fetch message drafts, you can use the [Stream message drafts API](https://getstream.io/chat/docs/javascript/drafts/).
+         *
+         * Message draft only works for new messages, nothing is emitted when input is in edit mode (if `message` input is set).
+         *
+         * To load a message draft into the input, use the `loadDraft` method.
+         *   - If channel id doesn't match the active channel id, the draft is ignored.
+         *   - If a thread message is loaded, and the input isn't in thread mode or parent ids don't match, the draft is ignored.
+         */
+        this.messageDraftChange = new EventEmitter();
         this.class = 'str-chat__message-input-angular-host';
         this.isVoiceRecording = true;
         this.textareaValue = '';
@@ -6813,12 +6838,16 @@ class MessageInputComponent {
         this.isViewInited = false;
         this.defaultTextareaPlaceholder = 'streamChat.Type your message';
         this.slowModeTextareaPlaceholder = 'streamChat.Slow Mode ON';
+        this.isChannelChangeResetInProgress = false;
+        this.isSendingMessage = false;
+        this.isLoadingDraft = false;
         this.closePollComposer = () => {
             this.isComposerOpen = false;
         };
         this.addPoll = (pollId) => {
             this.isComposerOpen = false;
             this.pollId = pollId;
+            this.updateMessageDraft();
             void this.messageSent();
         };
         this.textareaPlaceholder = this.defaultTextareaPlaceholder;
@@ -6828,6 +6857,15 @@ class MessageInputComponent {
                 this.hideNotification = undefined;
             }
         }));
+        this.subscriptions.push(this.attachmentService.attachmentUploads$
+            .pipe(distinctUntilChanged((prev, current) => prev.filter((v) => v.state === 'success').length ===
+            current.filter((v) => v.state === 'success').length))
+            .subscribe(() => {
+            this.updateMessageDraft();
+        }));
+        this.subscriptions.push(this.attachmentService.customAttachments$.subscribe(() => {
+            this.updateMessageDraft();
+        }));
         this.subscriptions.push(this.channelService.activeChannel$.subscribe((channel) => {
             var _a;
             if (channel && this.channel && channel.id !== this.channel.id) {
@@ -6835,6 +6873,8 @@ class MessageInputComponent {
                 this.attachmentService.resetAttachmentUploads();
                 this.pollId = undefined;
                 this.voiceRecorderService.isRecorderVisible$.next(false);
+                // Preemptively deselect quoted message, to avoid unwanted draft emission
+                this.channelService.selectMessageToQuote(undefined);
             }
             const capabilities = (_a = channel === null || channel === void 0 ? void 0 : channel.data) === null || _a === void 0 ? void 0 : _a.own_capabilities;
             if (capabilities) {
@@ -6846,12 +6886,16 @@ class MessageInputComponent {
                 this.setCanSendMessages();
             }
         }));
+        this.subscriptions.push(this.channelService.channelSwitchState$.subscribe((state) => {
+            this.isChannelChangeResetInProgress = state === 'start';
+        }));
         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.updateMessageDraft();
             }
         }));
         this.subscriptions.push(this.messageActionsService.messageToEdit$.subscribe((message) => {
@@ -6964,6 +7008,7 @@ class MessageInputComponent {
             if (this.isCooldownInProgress) {
                 return;
             }
+            this.isSendingMessage = true;
             let attachmentUploadInProgressCounter;
             this.attachmentService.attachmentUploadInProgressCounter$
                 .pipe(first())
@@ -7010,10 +7055,15 @@ class MessageInputComponent {
                 }
             }
             catch (error) {
+                this.isSendingMessage = false;
                 if (this.isUpdate) {
                     this.notificationService.addTemporaryNotification('streamChat.Edit message request failed');
                 }
             }
+            finally {
+                this.isSendingMessage = false;
+                this.updateMessageDraft();
+            }
             void this.channelService.typingStopped(this.parentMessageId);
             if (this.quotedMessage) {
                 this.deselectMessageToQuote();
@@ -7100,6 +7150,40 @@ class MessageInputComponent {
     openPollComposer() {
         this.isComposerOpen = true;
     }
+    userMentionsChanged(userMentions) {
+        if (userMentions.map((u) => u.id).join(',') !==
+            this.mentionedUsers.map((u) => u.id).join(',')) {
+            this.mentionedUsers = userMentions;
+            this.updateMessageDraft();
+        }
+    }
+    updateMessageDraft() {
+        var _a, _b;
+        if (this.isLoadingDraft ||
+            this.isSendingMessage ||
+            this.isChannelChangeResetInProgress ||
+            this.isUpdate) {
+            return;
+        }
+        const attachments = this.attachmentService.mapToAttachments();
+        if (!this.textareaValue &&
+            !this.mentionedUsers.length &&
+            !(attachments === null || attachments === void 0 ? void 0 : attachments.length) &&
+            !this.pollId &&
+            !((_a = this.quotedMessage) === null || _a === void 0 ? void 0 : _a.id)) {
+            this.messageDraftChange.emit(undefined);
+        }
+        else {
+            this.messageDraftChange.emit({
+                text: this.textareaValue,
+                attachments: this.attachmentService.mapToAttachments(),
+                mentioned_users: this.mentionedUsers.map((user) => user.id),
+                poll_id: this.pollId,
+                parent_id: this.parentMessageId,
+                quoted_message_id: (_b = this.quotedMessage) === null || _b === void 0 ? void 0 : _b.id,
+            });
+        }
+    }
     voiceRecordingReady(recording) {
         return __awaiter(this, void 0, void 0, function* () {
             try {
@@ -7116,6 +7200,30 @@ class MessageInputComponent {
     get isUpdate() {
         return !!this.message;
     }
+    /**
+     *
+     * @param draft DraftResponse to load into the message input.
+     * - Draft messages are only supported for new messages, input is ignored in edit mode (if `message` input is set).
+     * - If channel id doesn't match the active channel id, the draft is ignored.
+     * - If a thread message is loaded, and the input isn't in thread mode or parent ids don't match, the draft is ignored.
+     */
+    loadDraft(draft) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (((_a = this.channel) === null || _a === void 0 ? void 0 : _a.cid) !== draft.channel_cid ||
+            ((_b = draft === null || draft === void 0 ? void 0 : draft.message) === null || _b === void 0 ? void 0 : _b.parent_id) !== this.parentMessageId ||
+            this.isUpdate) {
+            return;
+        }
+        this.isLoadingDraft = true;
+        this.textareaValue = ((_c = draft.message) === null || _c === void 0 ? void 0 : _c.text) || '';
+        this.mentionedUsers =
+            ((_e = (_d = draft === null || draft === void 0 ? void 0 : draft.message) === null || _d === void 0 ? void 0 : _d.mentioned_users) === null || _e === void 0 ? void 0 : _e.map((id) => ({ id }))) || [];
+        this.pollId = (_f = draft === null || draft === void 0 ? void 0 : draft.message) === null || _f === void 0 ? void 0 : _f.poll_id;
+        this.attachmentService.resetAttachmentUploads();
+        this.attachmentService.createFromAttachments(((_g = draft === null || draft === void 0 ? void 0 : draft.message) === null || _g === void 0 ? void 0 : _g.attachments) || []);
+        this.channelService.selectMessageToQuote(draft.quoted_message);
+        this.isLoadingDraft = false;
+    }
     deleteUpload(upload) {
         if (this.isUpdate) {
             // Delay delete to avoid modal detecting this click as outside click
@@ -7220,10 +7328,10 @@ class MessageInputComponent {
     }
 }
 MessageInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageInputComponent, deps: [{ token: ChannelService }, { token: NotificationService }, { token: AttachmentService }, { token: MessageInputConfigService }, { token: textareaInjectionToken }, { token: i0.ComponentFactoryResolver }, { token: i0.ChangeDetectorRef }, { token: EmojiInputService }, { token: CustomTemplatesService }, { token: MessageActionsService }, { token: VoiceRecorderService }, { token: AudioRecorderService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MessageInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MessageInputComponent, selector: "stream-message-input", inputs: { isFileUploadEnabled: "isFileUploadEnabled", areMentionsEnabled: "areMentionsEnabled", mentionScope: "mentionScope", mode: "mode", isMultipleFileUploadEnabled: "isMultipleFileUploadEnabled", message: "message", sendMessage$: "sendMessage$", inputMode: "inputMode", autoFocus: "autoFocus", watchForMessageToEdit: "watchForMessageToEdit", displaySendButton: "displaySendButton", displayVoiceRecordingButton: "displayVoiceRecordingButton", displayPollCreateButton: "displayPollCreateButton" }, outputs: { messageUpdate: "messageUpdate" }, host: { properties: { "class": "this.class" } }, providers: [AttachmentService, EmojiInputService, VoiceRecorderService], queries: [{ propertyName: "voiceRecorderRef", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "textareaAnchor", first: true, predicate: TextareaDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"str-chat__message-input str-chat-angular__message-input\"\n  [style.display]=\"isVoiceRecording ? 'none' : 'flex'\"\n>\n  <div *ngIf=\"quotedMessage\" class=\"str-chat__quoted-message-preview-header\">\n    <div class=\"str-chat__quoted-message-reply-to-message\">\n      {{ \"streamChat.Reply to Message\" | translate }}\n    </div>\n    <button\n      class=\"str-chat__quoted-message-remove\"\n      data-testid=\"remove-quote\"\n      (click)=\"deselectMessageToQuote()\"\n      (keyup.enter)=\"deselectMessageToQuote()\"\n    >\n      <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n    </button>\n  </div>\n  <div *ngIf=\"isUpdate\" class=\"str-chat__quoted-message-preview-header\">\n    <div class=\"str-chat__quoted-message-reply-to-message\">\n      {{ \"streamChat.Edit Message\" | translate }}\n    </div>\n    <button\n      class=\"str-chat__quoted-message-remove\"\n      data-testid=\"remove-quote\"\n      (click)=\"deselectMessageToEdit()\"\n      (keyup.enter)=\"deselectMessageToEdit()\"\n    >\n      <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n    </button>\n  </div>\n  <ng-container *ngIf=\"canSendMessages; else notAllowed\">\n    <div\n      class=\"str-chat__message-input-inner str-chat-angular__message-input-inner\"\n    >\n      <ng-content select=\"[message-input-start]\"></ng-content>\n      <ng-container\n        *ngIf=\"isFileUploadEnabled && isFileUploadAuthorized && canSendMessages\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            customAttachmentUploadTemplate || defaultAttachmentUpload;\n            context: getAttachmentUploadContext()\n          \"\n        ></ng-container>\n        <ng-template #defaultAttachmentUpload>\n          <div\n            class=\"str-chat__file-input-container\"\n            data-testid=\"file-upload-button\"\n          >\n            <input\n              #fileInput\n              type=\"file\"\n              class=\"str-chat__file-input\"\n              data-testid=\"file-input\"\n              [multiple]=\"isMultipleFileUploadEnabled\"\n              id=\"{{ fileInputId }}\"\n              [disabled]=\"\n                (attachmentService.attachmentsCounter$ | async)! >=\n                attachmentService.maxNumberOfAttachments\n              \"\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      <ng-container\n        *ngIf=\"canSendPolls && displayPollCreateButton && mode !== 'thread'\"\n      >\n        <button\n          class=\"str-chat-angular__create-poll\"\n          (click)=\"openPollComposer()\"\n        >\n          <stream-icon-placeholder icon=\"poll\"></stream-icon-placeholder>\n        </button>\n      </ng-container>\n      <div class=\"str-chat__message-textarea-container\">\n        <div\n          *ngIf=\"quotedMessage\"\n          data-testid=\"quoted-message-container\"\n          class=\"str-chat__quoted-message-preview\"\n        >\n          <stream-avatar-placeholder\n            data-testid=\"qouted-message-avatar\"\n            class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n            type=\"user\"\n            location=\"quoted-message-sender\"\n            [imageUrl]=\"quotedMessage.user?.image\"\n            [name]=\"quotedMessage.user?.name || quotedMessage.user?.id\"\n            [user]=\"quotedMessage.user || undefined\"\n          ></stream-avatar-placeholder>\n          <div\n            class=\"quoted-message-preview-content-inner str-chat__quoted-message-bubble\"\n          >\n            <stream-attachment-list\n              *ngIf=\"\n                quotedMessage?.attachments && quotedMessage?.attachments?.length\n              \"\n              [attachments]=\"quotedMessageAttachments\"\n              [messageId]=\"quotedMessage.id\"\n            ></stream-attachment-list>\n            <ng-container\n              *ngIf=\"\n                quotedMessage?.poll_id &&\n                (customTemplatesService.pollTemplate$ | async)\n              \"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  (customTemplatesService.pollTemplate$ | async)!;\n                  context: {\n                    pollId: quotedMessage?.poll_id,\n                    messageId: quotedMessage?.id,\n                    isQuote: true\n                  }\n                \"\n              ></ng-container>\n            </ng-container>\n            <div class=\"str-chat__quoted-message-text\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  (customTemplatesService.messageTextTemplate$ | async) ||\n                    defaultText;\n                  context: getQuotedMessageTextContext()\n                \"\n              ></ng-container>\n              <ng-template\n                #defaultText\n                let-message=\"message\"\n                let-isQuoted=\"isQuoted\"\n                let-shouldTranslate=\"shouldTranslate\"\n              >\n                <stream-message-text\n                  [message]=\"message\"\n                  [isQuoted]=\"isQuoted\"\n                  [shouldTranslate]=\"shouldTranslate\"\n                  data-testid=\"quoted-message-text\"\n                ></stream-message-text>\n              </ng-template>\n            </div>\n          </div>\n        </div>\n        <ng-template\n          #defaultAttachmentsPreview\n          let-attachmentUploads$=\"attachmentUploads$\"\n          let-retryUploadHandler=\"retryUploadHandler\"\n          let-deleteUploadHandler=\"deleteUploadHandler\"\n        >\n          <stream-attachment-preview-list\n            class=\"str-chat__attachment-preview-list-angular-host\"\n            [attachmentUploads$]=\"attachmentUploads$\"\n            (retryAttachmentUpload)=\"retryUploadHandler($event)\"\n            (deleteAttachment)=\"deleteUploadHandler($event)\"\n          ></stream-attachment-preview-list>\n        </ng-template>\n        <ng-container\n          *ngTemplateOutlet=\"\n            attachmentPreviewListTemplate || defaultAttachmentsPreview;\n            context: getAttachmentPreviewListContext()\n          \"\n        ></ng-container>\n        <div class=\"str-chat__message-textarea-with-emoji-picker\">\n          <ng-container\n            streamTextarea\n            [componentRef]=\"textareaRef\"\n            [areMentionsEnabled]=\"areMentionsEnabled\"\n            [mentionScope]=\"mentionScope\"\n            [inputMode]=\"inputMode\"\n            [autoFocus]=\"autoFocus\"\n            [placeholder]=\"textareaPlaceholder\"\n            [(value)]=\"textareaValue\"\n            (valueChange)=\"typingStart$.next()\"\n            (send)=\"messageSent()\"\n            (userMentions)=\"mentionedUsers = $event\"\n            (pasteFromClipboard)=\"itemsPasted($event)\"\n          ></ng-container>\n          <ng-container *ngIf=\"emojiPickerTemplate\" data-testid=\"emoji-picker\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                emojiPickerTemplate;\n                context: getEmojiPickerContext()\n              \"\n            ></ng-container>\n          </ng-container>\n        </div>\n      </div>\n      <button\n        *ngIf=\"canSendMessages && !isCooldownInProgress && displaySendButton\"\n        data-testid=\"send-button\"\n        class=\"str-chat__send-button\"\n        [disabled]=\"\n          (attachmentUploadInProgressCounter$ | async)! > 0 ||\n          (attachmentService.attachmentsCounter$ | async)! >\n            attachmentService.maxNumberOfAttachments ||\n          (!textareaValue &&\n            (attachmentUploads$ | async)!.length === 0 &&\n            (customAttachments$ | async)!.length === 0)\n        \"\n        (click)=\"messageSent()\"\n        (keyup.enter)=\"messageSent()\"\n      >\n        <stream-icon-placeholder icon=\"send\"></stream-icon-placeholder>\n      </button>\n      <div\n        *ngIf=\"isCooldownInProgress\"\n        class=\"str-chat__message-input-cooldown\"\n        data-testid=\"cooldown-timer\"\n      >\n        {{ cooldown$ | async }}\n      </div>\n      <button\n        *ngIf=\"displayVoiceRecordingButton\"\n        class=\"str-chat__start-recording-audio-button\"\n        data-testid=\"start-voice-recording\"\n        [disabled]=\"\n          voiceRecorderService.isRecorderVisible$.value ||\n          audioRecorder?.isRecording ||\n          (attachmentService.attachmentsCounter$ | async)! >=\n            attachmentService.maxNumberOfAttachments\n        \"\n        (click)=\"startVoiceRecording()\"\n        (keyup.enter)=\"startVoiceRecording()\"\n      >\n        <stream-icon-placeholder icon=\"mic\"></stream-icon-placeholder>\n      </button>\n      <ng-content select=\"[message-input-end]\"></ng-content>\n    </div>\n  </ng-container>\n  <ng-template #notAllowed>\n    <div\n      class=\"str-chat__message-input-not-allowed\"\n      data-testid=\"disabled-textarea\"\n    >\n      {{ disabledTextareaText | translate }}\n    </div>\n  </ng-template>\n</div>\n<ng-template\n  *ngIf=\"voiceRecorderRef\"\n  [ngTemplateOutlet]=\"voiceRecorderRef\"\n  [ngTemplateOutletContext]=\"{ service: voiceRecorderService }\"\n></ng-template>\n<ng-template\n  *ngIf=\"\n    isComposerOpen && (customTemplatesService.pollComposerTemplate$ | async)\n  \"\n  [ngTemplateOutlet]=\"(customTemplatesService.pollComposerTemplate$ | async)!\"\n  [ngTemplateOutletContext]=\"{\n    pollCompose: addPoll,\n    cancel: closePollComposer\n  }\"\n></ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "component", type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "parentMessageId", "attachments"], outputs: ["imageModalStateChange"] }, { kind: "component", type: AttachmentPreviewListComponent, selector: "stream-attachment-preview-list", inputs: ["attachmentUploads$"], outputs: ["retryAttachmentUpload", "deleteAttachment"] }, { kind: "directive", type: TextareaDirective, selector: "[streamTextarea]", inputs: ["componentRef", "areMentionsEnabled", "mentionScope", "inputMode", "value", "placeholder", "autoFocus"], outputs: ["valueChange", "send", "userMentions", "pasteFromClipboard"] }, { kind: "component", type: MessageTextComponent, selector: "stream-message-text", inputs: ["message", "isQuoted", "shouldTranslate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
+MessageInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MessageInputComponent, selector: "stream-message-input", inputs: { isFileUploadEnabled: "isFileUploadEnabled", areMentionsEnabled: "areMentionsEnabled", mentionScope: "mentionScope", mode: "mode", isMultipleFileUploadEnabled: "isMultipleFileUploadEnabled", message: "message", sendMessage$: "sendMessage$", inputMode: "inputMode", autoFocus: "autoFocus", watchForMessageToEdit: "watchForMessageToEdit", displaySendButton: "displaySendButton", displayVoiceRecordingButton: "displayVoiceRecordingButton", displayPollCreateButton: "displayPollCreateButton" }, outputs: { messageUpdate: "messageUpdate", messageDraftChange: "messageDraftChange" }, host: { properties: { "class": "this.class" } }, providers: [AttachmentService, EmojiInputService, VoiceRecorderService], queries: [{ propertyName: "voiceRecorderRef", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "textareaAnchor", first: true, predicate: TextareaDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"str-chat__message-input str-chat-angular__message-input\"\n  [style.display]=\"isVoiceRecording ? 'none' : 'flex'\"\n>\n  <div *ngIf=\"quotedMessage\" class=\"str-chat__quoted-message-preview-header\">\n    <div class=\"str-chat__quoted-message-reply-to-message\">\n      {{ \"streamChat.Reply to Message\" | translate }}\n    </div>\n    <button\n      class=\"str-chat__quoted-message-remove\"\n      data-testid=\"remove-quote\"\n      (click)=\"deselectMessageToQuote()\"\n      (keyup.enter)=\"deselectMessageToQuote()\"\n    >\n      <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n    </button>\n  </div>\n  <div *ngIf=\"isUpdate\" class=\"str-chat__quoted-message-preview-header\">\n    <div class=\"str-chat__quoted-message-reply-to-message\">\n      {{ \"streamChat.Edit Message\" | translate }}\n    </div>\n    <button\n      class=\"str-chat__quoted-message-remove\"\n      data-testid=\"remove-quote\"\n      (click)=\"deselectMessageToEdit()\"\n      (keyup.enter)=\"deselectMessageToEdit()\"\n    >\n      <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n    </button>\n  </div>\n  <ng-container *ngIf=\"canSendMessages; else notAllowed\">\n    <div\n      class=\"str-chat__message-input-inner str-chat-angular__message-input-inner\"\n    >\n      <ng-content select=\"[message-input-start]\"></ng-content>\n      <ng-container\n        *ngIf=\"isFileUploadEnabled && isFileUploadAuthorized && canSendMessages\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            customAttachmentUploadTemplate || defaultAttachmentUpload;\n            context: getAttachmentUploadContext()\n          \"\n        ></ng-container>\n        <ng-template #defaultAttachmentUpload>\n          <div\n            class=\"str-chat__file-input-container\"\n            data-testid=\"file-upload-button\"\n          >\n            <input\n              #fileInput\n              type=\"file\"\n              class=\"str-chat__file-input\"\n              data-testid=\"file-input\"\n              [multiple]=\"isMultipleFileUploadEnabled\"\n              id=\"{{ fileInputId }}\"\n              [disabled]=\"\n                (attachmentService.attachmentsCounter$ | async)! >=\n                attachmentService.maxNumberOfAttachments\n              \"\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      <ng-container\n        *ngIf=\"canSendPolls && displayPollCreateButton && mode !== 'thread'\"\n      >\n        <button\n          class=\"str-chat-angular__create-poll\"\n          (click)=\"openPollComposer()\"\n        >\n          <stream-icon-placeholder icon=\"poll\"></stream-icon-placeholder>\n        </button>\n      </ng-container>\n      <div class=\"str-chat__message-textarea-container\">\n        <div\n          *ngIf=\"quotedMessage\"\n          data-testid=\"quoted-message-container\"\n          class=\"str-chat__quoted-message-preview\"\n        >\n          <stream-avatar-placeholder\n            data-testid=\"qouted-message-avatar\"\n            class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n            type=\"user\"\n            location=\"quoted-message-sender\"\n            [imageUrl]=\"quotedMessage.user?.image\"\n            [name]=\"quotedMessage.user?.name || quotedMessage.user?.id\"\n            [user]=\"quotedMessage.user || undefined\"\n          ></stream-avatar-placeholder>\n          <div\n            class=\"quoted-message-preview-content-inner str-chat__quoted-message-bubble\"\n          >\n            <stream-attachment-list\n              *ngIf=\"\n                quotedMessage?.attachments && quotedMessage?.attachments?.length\n              \"\n              [attachments]=\"quotedMessageAttachments\"\n              [messageId]=\"quotedMessage.id\"\n            ></stream-attachment-list>\n            <ng-container\n              *ngIf=\"\n                quotedMessage?.poll_id &&\n                (customTemplatesService.pollTemplate$ | async)\n              \"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  (customTemplatesService.pollTemplate$ | async)!;\n                  context: {\n                    pollId: quotedMessage?.poll_id,\n                    messageId: quotedMessage?.id,\n                    isQuote: true\n                  }\n                \"\n              ></ng-container>\n            </ng-container>\n            <div class=\"str-chat__quoted-message-text\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  (customTemplatesService.messageTextTemplate$ | async) ||\n                    defaultText;\n                  context: getQuotedMessageTextContext()\n                \"\n              ></ng-container>\n              <ng-template\n                #defaultText\n                let-message=\"message\"\n                let-isQuoted=\"isQuoted\"\n                let-shouldTranslate=\"shouldTranslate\"\n              >\n                <stream-message-text\n                  [message]=\"message\"\n                  [isQuoted]=\"isQuoted\"\n                  [shouldTranslate]=\"shouldTranslate\"\n                  data-testid=\"quoted-message-text\"\n                ></stream-message-text>\n              </ng-template>\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(); updateMessageDraft()\"\n            (send)=\"messageSent()\"\n            (userMentions)=\"userMentionsChanged($event)\"\n            (pasteFromClipboard)=\"itemsPasted($event)\"\n          ></ng-container>\n          <ng-container *ngIf=\"emojiPickerTemplate\" data-testid=\"emoji-picker\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                emojiPickerTemplate;\n                context: getEmojiPickerContext()\n              \"\n            ></ng-container>\n          </ng-container>\n        </div>\n      </div>\n      <button\n        *ngIf=\"canSendMessages && !isCooldownInProgress && displaySendButton\"\n        data-testid=\"send-button\"\n        class=\"str-chat__send-button\"\n        [disabled]=\"\n          (attachmentUploadInProgressCounter$ | async)! > 0 ||\n          (attachmentService.attachmentsCounter$ | async)! >\n            attachmentService.maxNumberOfAttachments ||\n          (!textareaValue &&\n            (attachmentUploads$ | async)!.length === 0 &&\n            (customAttachments$ | async)!.length === 0)\n        \"\n        (click)=\"messageSent()\"\n        (keyup.enter)=\"messageSent()\"\n      >\n        <stream-icon-placeholder icon=\"send\"></stream-icon-placeholder>\n      </button>\n      <div\n        *ngIf=\"isCooldownInProgress\"\n        class=\"str-chat__message-input-cooldown\"\n        data-testid=\"cooldown-timer\"\n      >\n        {{ cooldown$ | async }}\n      </div>\n      <button\n        *ngIf=\"displayVoiceRecordingButton\"\n        class=\"str-chat__start-recording-audio-button\"\n        data-testid=\"start-voice-recording\"\n        [disabled]=\"\n          voiceRecorderService.isRecorderVisible$.value ||\n          audioRecorder?.isRecording ||\n          (attachmentService.attachmentsCounter$ | async)! >=\n            attachmentService.maxNumberOfAttachments\n        \"\n        (click)=\"startVoiceRecording()\"\n        (keyup.enter)=\"startVoiceRecording()\"\n      >\n        <stream-icon-placeholder icon=\"mic\"></stream-icon-placeholder>\n      </button>\n      <ng-content select=\"[message-input-end]\"></ng-content>\n    </div>\n  </ng-container>\n  <ng-template #notAllowed>\n    <div\n      class=\"str-chat__message-input-not-allowed\"\n      data-testid=\"disabled-textarea\"\n    >\n      {{ disabledTextareaText | translate }}\n    </div>\n  </ng-template>\n</div>\n<ng-template\n  *ngIf=\"voiceRecorderRef\"\n  [ngTemplateOutlet]=\"voiceRecorderRef\"\n  [ngTemplateOutletContext]=\"{ service: voiceRecorderService }\"\n></ng-template>\n<ng-template\n  *ngIf=\"\n    isComposerOpen && (customTemplatesService.pollComposerTemplate$ | async)\n  \"\n  [ngTemplateOutlet]=\"(customTemplatesService.pollComposerTemplate$ | async)!\"\n  [ngTemplateOutletContext]=\"{\n    pollCompose: addPoll,\n    cancel: closePollComposer\n  }\"\n></ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "component", type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "parentMessageId", "attachments"], outputs: ["imageModalStateChange"] }, { kind: "component", type: AttachmentPreviewListComponent, selector: "stream-attachment-preview-list", inputs: ["attachmentUploads$"], outputs: ["retryAttachmentUpload", "deleteAttachment"] }, { kind: "directive", type: TextareaDirective, selector: "[streamTextarea]", inputs: ["componentRef", "areMentionsEnabled", "mentionScope", "inputMode", "value", "placeholder", "autoFocus"], outputs: ["valueChange", "send", "userMentions", "pasteFromClipboard"] }, { kind: "component", type: MessageTextComponent, selector: "stream-message-text", inputs: ["message", "isQuoted", "shouldTranslate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-message-input', providers: [AttachmentService, EmojiInputService, VoiceRecorderService], template: "<div\n  class=\"str-chat__message-input str-chat-angular__message-input\"\n  [style.display]=\"isVoiceRecording ? 'none' : 'flex'\"\n>\n  <div *ngIf=\"quotedMessage\" class=\"str-chat__quoted-message-preview-header\">\n    <div class=\"str-chat__quoted-message-reply-to-message\">\n      {{ \"streamChat.Reply to Message\" | translate }}\n    </div>\n    <button\n      class=\"str-chat__quoted-message-remove\"\n      data-testid=\"remove-quote\"\n      (click)=\"deselectMessageToQuote()\"\n      (keyup.enter)=\"deselectMessageToQuote()\"\n    >\n      <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n    </button>\n  </div>\n  <div *ngIf=\"isUpdate\" class=\"str-chat__quoted-message-preview-header\">\n    <div class=\"str-chat__quoted-message-reply-to-message\">\n      {{ \"streamChat.Edit Message\" | translate }}\n    </div>\n    <button\n      class=\"str-chat__quoted-message-remove\"\n      data-testid=\"remove-quote\"\n      (click)=\"deselectMessageToEdit()\"\n      (keyup.enter)=\"deselectMessageToEdit()\"\n    >\n      <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n    </button>\n  </div>\n  <ng-container *ngIf=\"canSendMessages; else notAllowed\">\n    <div\n      class=\"str-chat__message-input-inner str-chat-angular__message-input-inner\"\n    >\n      <ng-content select=\"[message-input-start]\"></ng-content>\n      <ng-container\n        *ngIf=\"isFileUploadEnabled && isFileUploadAuthorized && canSendMessages\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            customAttachmentUploadTemplate || defaultAttachmentUpload;\n            context: getAttachmentUploadContext()\n          \"\n        ></ng-container>\n        <ng-template #defaultAttachmentUpload>\n          <div\n            class=\"str-chat__file-input-container\"\n            data-testid=\"file-upload-button\"\n          >\n            <input\n              #fileInput\n              type=\"file\"\n              class=\"str-chat__file-input\"\n              data-testid=\"file-input\"\n              [multiple]=\"isMultipleFileUploadEnabled\"\n              id=\"{{ fileInputId }}\"\n              [disabled]=\"\n                (attachmentService.attachmentsCounter$ | async)! >=\n                attachmentService.maxNumberOfAttachments\n              \"\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      <ng-container\n        *ngIf=\"canSendPolls && displayPollCreateButton && mode !== 'thread'\"\n      >\n        <button\n          class=\"str-chat-angular__create-poll\"\n          (click)=\"openPollComposer()\"\n        >\n          <stream-icon-placeholder icon=\"poll\"></stream-icon-placeholder>\n        </button>\n      </ng-container>\n      <div class=\"str-chat__message-textarea-container\">\n        <div\n          *ngIf=\"quotedMessage\"\n          data-testid=\"quoted-message-container\"\n          class=\"str-chat__quoted-message-preview\"\n        >\n          <stream-avatar-placeholder\n            data-testid=\"qouted-message-avatar\"\n            class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n            type=\"user\"\n            location=\"quoted-message-sender\"\n            [imageUrl]=\"quotedMessage.user?.image\"\n            [name]=\"quotedMessage.user?.name || quotedMessage.user?.id\"\n            [user]=\"quotedMessage.user || undefined\"\n          ></stream-avatar-placeholder>\n          <div\n            class=\"quoted-message-preview-content-inner str-chat__quoted-message-bubble\"\n          >\n            <stream-attachment-list\n              *ngIf=\"\n                quotedMessage?.attachments && quotedMessage?.attachments?.length\n              \"\n              [attachments]=\"quotedMessageAttachments\"\n              [messageId]=\"quotedMessage.id\"\n            ></stream-attachment-list>\n            <ng-container\n              *ngIf=\"\n                quotedMessage?.poll_id &&\n                (customTemplatesService.pollTemplate$ | async)\n              \"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  (customTemplatesService.pollTemplate$ | async)!;\n                  context: {\n                    pollId: quotedMessage?.poll_id,\n                    messageId: quotedMessage?.id,\n                    isQuote: true\n                  }\n                \"\n              ></ng-container>\n            </ng-container>\n            <div class=\"str-chat__quoted-message-text\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  (customTemplatesService.messageTextTemplate$ | async) ||\n                    defaultText;\n                  context: getQuotedMessageTextContext()\n                \"\n              ></ng-container>\n              <ng-template\n                #defaultText\n                let-message=\"message\"\n                let-isQuoted=\"isQuoted\"\n                let-shouldTranslate=\"shouldTranslate\"\n              >\n                <stream-message-text\n                  [message]=\"message\"\n                  [isQuoted]=\"isQuoted\"\n                  [shouldTranslate]=\"shouldTranslate\"\n                  data-testid=\"quoted-message-text\"\n                ></stream-message-text>\n              </ng-template>\n            </div>\n          </div>\n        </div>\n        <ng-template\n          #defaultAttachmentsPreview\n          let-attachmentUploads$=\"attachmentUploads$\"\n          let-retryUploadHandler=\"retryUploadHandler\"\n          let-deleteUploadHandler=\"deleteUploadHandler\"\n        >\n          <stream-attachment-preview-list\n            class=\"str-chat__attachment-preview-list-angular-host\"\n            [attachmentUploads$]=\"attachmentUploads$\"\n            (retryAttachmentUpload)=\"retryUploadHandler($event)\"\n            (deleteAttachment)=\"deleteUploadHandler($event)\"\n          ></stream-attachment-preview-list>\n        </ng-template>\n        <ng-container\n          *ngTemplateOutlet=\"\n            attachmentPreviewListTemplate || defaultAttachmentsPreview;\n            context: getAttachmentPreviewListContext()\n          \"\n        ></ng-container>\n        <div class=\"str-chat__message-textarea-with-emoji-picker\">\n          <ng-container\n            streamTextarea\n            [componentRef]=\"textareaRef\"\n            [areMentionsEnabled]=\"areMentionsEnabled\"\n            [mentionScope]=\"mentionScope\"\n            [inputMode]=\"inputMode\"\n            [autoFocus]=\"autoFocus\"\n            [placeholder]=\"textareaPlaceholder\"\n            [(value)]=\"textareaValue\"\n            (valueChange)=\"typingStart$.next()\"\n            (send)=\"messageSent()\"\n            (userMentions)=\"mentionedUsers = $event\"\n            (pasteFromClipboard)=\"itemsPasted($event)\"\n          ></ng-container>\n          <ng-container *ngIf=\"emojiPickerTemplate\" data-testid=\"emoji-picker\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                emojiPickerTemplate;\n                context: getEmojiPickerContext()\n              \"\n            ></ng-container>\n          </ng-container>\n        </div>\n      </div>\n      <button\n        *ngIf=\"canSendMessages && !isCooldownInProgress && displaySendButton\"\n        data-testid=\"send-button\"\n        class=\"str-chat__send-button\"\n        [disabled]=\"\n          (attachmentUploadInProgressCounter$ | async)! > 0 ||\n          (attachmentService.attachmentsCounter$ | async)! >\n            attachmentService.maxNumberOfAttachments ||\n          (!textareaValue &&\n            (attachmentUploads$ | async)!.length === 0 &&\n            (customAttachments$ | async)!.length === 0)\n        \"\n        (click)=\"messageSent()\"\n        (keyup.enter)=\"messageSent()\"\n      >\n        <stream-icon-placeholder icon=\"send\"></stream-icon-placeholder>\n      </button>\n      <div\n        *ngIf=\"isCooldownInProgress\"\n        class=\"str-chat__message-input-cooldown\"\n        data-testid=\"cooldown-timer\"\n      >\n        {{ cooldown$ | async }}\n      </div>\n      <button\n        *ngIf=\"displayVoiceRecordingButton\"\n        class=\"str-chat__start-recording-audio-button\"\n        data-testid=\"start-voice-recording\"\n        [disabled]=\"\n          voiceRecorderService.isRecorderVisible$.value ||\n          audioRecorder?.isRecording ||\n          (attachmentService.attachmentsCounter$ | async)! >=\n            attachmentService.maxNumberOfAttachments\n        \"\n        (click)=\"startVoiceRecording()\"\n        (keyup.enter)=\"startVoiceRecording()\"\n      >\n        <stream-icon-placeholder icon=\"mic\"></stream-icon-placeholder>\n      </button>\n      <ng-content select=\"[message-input-end]\"></ng-content>\n    </div>\n  </ng-container>\n  <ng-template #notAllowed>\n    <div\n      class=\"str-chat__message-input-not-allowed\"\n      data-testid=\"disabled-textarea\"\n    >\n      {{ disabledTextareaText | translate }}\n    </div>\n  </ng-template>\n</div>\n<ng-template\n  *ngIf=\"voiceRecorderRef\"\n  [ngTemplateOutlet]=\"voiceRecorderRef\"\n  [ngTemplateOutletContext]=\"{ service: voiceRecorderService }\"\n></ng-template>\n<ng-template\n  *ngIf=\"\n    isComposerOpen && (customTemplatesService.pollComposerTemplate$ | async)\n  \"\n  [ngTemplateOutlet]=\"(customTemplatesService.pollComposerTemplate$ | async)!\"\n  [ngTemplateOutletContext]=\"{\n    pollCompose: addPoll,\n    cancel: closePollComposer\n  }\"\n></ng-template>\n" }]
+            args: [{ selector: 'stream-message-input', providers: [AttachmentService, EmojiInputService, VoiceRecorderService], template: "<div\n  class=\"str-chat__message-input str-chat-angular__message-input\"\n  [style.display]=\"isVoiceRecording ? 'none' : 'flex'\"\n>\n  <div *ngIf=\"quotedMessage\" class=\"str-chat__quoted-message-preview-header\">\n    <div class=\"str-chat__quoted-message-reply-to-message\">\n      {{ \"streamChat.Reply to Message\" | translate }}\n    </div>\n    <button\n      class=\"str-chat__quoted-message-remove\"\n      data-testid=\"remove-quote\"\n      (click)=\"deselectMessageToQuote()\"\n      (keyup.enter)=\"deselectMessageToQuote()\"\n    >\n      <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n    </button>\n  </div>\n  <div *ngIf=\"isUpdate\" class=\"str-chat__quoted-message-preview-header\">\n    <div class=\"str-chat__quoted-message-reply-to-message\">\n      {{ \"streamChat.Edit Message\" | translate }}\n    </div>\n    <button\n      class=\"str-chat__quoted-message-remove\"\n      data-testid=\"remove-quote\"\n      (click)=\"deselectMessageToEdit()\"\n      (keyup.enter)=\"deselectMessageToEdit()\"\n    >\n      <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n    </button>\n  </div>\n  <ng-container *ngIf=\"canSendMessages; else notAllowed\">\n    <div\n      class=\"str-chat__message-input-inner str-chat-angular__message-input-inner\"\n    >\n      <ng-content select=\"[message-input-start]\"></ng-content>\n      <ng-container\n        *ngIf=\"isFileUploadEnabled && isFileUploadAuthorized && canSendMessages\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            customAttachmentUploadTemplate || defaultAttachmentUpload;\n            context: getAttachmentUploadContext()\n          \"\n        ></ng-container>\n        <ng-template #defaultAttachmentUpload>\n          <div\n            class=\"str-chat__file-input-container\"\n            data-testid=\"file-upload-button\"\n          >\n            <input\n              #fileInput\n              type=\"file\"\n              class=\"str-chat__file-input\"\n              data-testid=\"file-input\"\n              [multiple]=\"isMultipleFileUploadEnabled\"\n              id=\"{{ fileInputId }}\"\n              [disabled]=\"\n                (attachmentService.attachmentsCounter$ | async)! >=\n                attachmentService.maxNumberOfAttachments\n              \"\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      <ng-container\n        *ngIf=\"canSendPolls && displayPollCreateButton && mode !== 'thread'\"\n      >\n        <button\n          class=\"str-chat-angular__create-poll\"\n          (click)=\"openPollComposer()\"\n        >\n          <stream-icon-placeholder icon=\"poll\"></stream-icon-placeholder>\n        </button>\n      </ng-container>\n      <div class=\"str-chat__message-textarea-container\">\n        <div\n          *ngIf=\"quotedMessage\"\n          data-testid=\"quoted-message-container\"\n          class=\"str-chat__quoted-message-preview\"\n        >\n          <stream-avatar-placeholder\n            data-testid=\"qouted-message-avatar\"\n            class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n            type=\"user\"\n            location=\"quoted-message-sender\"\n            [imageUrl]=\"quotedMessage.user?.image\"\n            [name]=\"quotedMessage.user?.name || quotedMessage.user?.id\"\n            [user]=\"quotedMessage.user || undefined\"\n          ></stream-avatar-placeholder>\n          <div\n            class=\"quoted-message-preview-content-inner str-chat__quoted-message-bubble\"\n          >\n            <stream-attachment-list\n              *ngIf=\"\n                quotedMessage?.attachments && quotedMessage?.attachments?.length\n              \"\n              [attachments]=\"quotedMessageAttachments\"\n              [messageId]=\"quotedMessage.id\"\n            ></stream-attachment-list>\n            <ng-container\n              *ngIf=\"\n                quotedMessage?.poll_id &&\n                (customTemplatesService.pollTemplate$ | async)\n              \"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  (customTemplatesService.pollTemplate$ | async)!;\n                  context: {\n                    pollId: quotedMessage?.poll_id,\n                    messageId: quotedMessage?.id,\n                    isQuote: true\n                  }\n                \"\n              ></ng-container>\n            </ng-container>\n            <div class=\"str-chat__quoted-message-text\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  (customTemplatesService.messageTextTemplate$ | async) ||\n                    defaultText;\n                  context: getQuotedMessageTextContext()\n                \"\n              ></ng-container>\n              <ng-template\n                #defaultText\n                let-message=\"message\"\n                let-isQuoted=\"isQuoted\"\n                let-shouldTranslate=\"shouldTranslate\"\n              >\n                <stream-message-text\n                  [message]=\"message\"\n                  [isQuoted]=\"isQuoted\"\n                  [shouldTranslate]=\"shouldTranslate\"\n                  data-testid=\"quoted-message-text\"\n                ></stream-message-text>\n              </ng-template>\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(); updateMessageDraft()\"\n            (send)=\"messageSent()\"\n            (userMentions)=\"userMentionsChanged($event)\"\n            (pasteFromClipboard)=\"itemsPasted($event)\"\n          ></ng-container>\n          <ng-container *ngIf=\"emojiPickerTemplate\" data-testid=\"emoji-picker\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                emojiPickerTemplate;\n                context: getEmojiPickerContext()\n              \"\n            ></ng-container>\n          </ng-container>\n        </div>\n      </div>\n      <button\n        *ngIf=\"canSendMessages && !isCooldownInProgress && displaySendButton\"\n        data-testid=\"send-button\"\n        class=\"str-chat__send-button\"\n        [disabled]=\"\n          (attachmentUploadInProgressCounter$ | async)! > 0 ||\n          (attachmentService.attachmentsCounter$ | async)! >\n            attachmentService.maxNumberOfAttachments ||\n          (!textareaValue &&\n            (attachmentUploads$ | async)!.length === 0 &&\n            (customAttachments$ | async)!.length === 0)\n        \"\n        (click)=\"messageSent()\"\n        (keyup.enter)=\"messageSent()\"\n      >\n        <stream-icon-placeholder icon=\"send\"></stream-icon-placeholder>\n      </button>\n      <div\n        *ngIf=\"isCooldownInProgress\"\n        class=\"str-chat__message-input-cooldown\"\n        data-testid=\"cooldown-timer\"\n      >\n        {{ cooldown$ | async }}\n      </div>\n      <button\n        *ngIf=\"displayVoiceRecordingButton\"\n        class=\"str-chat__start-recording-audio-button\"\n        data-testid=\"start-voice-recording\"\n        [disabled]=\"\n          voiceRecorderService.isRecorderVisible$.value ||\n          audioRecorder?.isRecording ||\n          (attachmentService.attachmentsCounter$ | async)! >=\n            attachmentService.maxNumberOfAttachments\n        \"\n        (click)=\"startVoiceRecording()\"\n        (keyup.enter)=\"startVoiceRecording()\"\n      >\n        <stream-icon-placeholder icon=\"mic\"></stream-icon-placeholder>\n      </button>\n      <ng-content select=\"[message-input-end]\"></ng-content>\n    </div>\n  </ng-container>\n  <ng-template #notAllowed>\n    <div\n      class=\"str-chat__message-input-not-allowed\"\n      data-testid=\"disabled-textarea\"\n    >\n      {{ disabledTextareaText | translate }}\n    </div>\n  </ng-template>\n</div>\n<ng-template\n  *ngIf=\"voiceRecorderRef\"\n  [ngTemplateOutlet]=\"voiceRecorderRef\"\n  [ngTemplateOutletContext]=\"{ service: voiceRecorderService }\"\n></ng-template>\n<ng-template\n  *ngIf=\"\n    isComposerOpen && (customTemplatesService.pollComposerTemplate$ | async)\n  \"\n  [ngTemplateOutlet]=\"(customTemplatesService.pollComposerTemplate$ | async)!\"\n  [ngTemplateOutletContext]=\"{\n    pollCompose: addPoll,\n    cancel: closePollComposer\n  }\"\n></ng-template>\n" }]
         }], ctorParameters: function () {
         return [{ type: ChannelService }, { type: NotificationService }, { type: AttachmentService }, { type: MessageInputConfigService }, { type: i0.Type, decorators: [{
                         type: Inject,
@@ -7259,6 +7367,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], messageUpdate: [{
                 type: Output
+            }], messageDraftChange: [{
+                type: Output
             }], voiceRecorderRef: [{
                 type: ContentChild,
                 args: [TemplateRef]
@@ -7875,7 +7985,7 @@ class VirtualizedListService {
             }
         }));
         this.subscriptions.push(this.scrollPosition$
-            .pipe(distinctUntilChanged())
+            .pipe(distinctUntilChanged$1())
             .subscribe((position) => {
             if (this.queryStateSubject.getValue().state === `loading-${position}`) {
                 return;