stream-chat-angular 4.59.2 → 4.60.0

package/fesm2015/stream-chat-angular.js

@@ -20,7 +20,7 @@ import transliterate from '@stream-io/transliterate';
 import * as i8 from 'angular-mentions';
 import { MentionModule } from 'angular-mentions';
 
-const version = '4.59.2';
+const version = '4.60.0';
 
 /**
  * The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](../components/NotificationListComponent.mdx) component displays the currently active notifications.
@@ -384,6 +384,7 @@ class ChannelService {
             const channel = this.activeChannelSubject.getValue();
             return messages.map((message) => this.transformToStreamMessage(message, channel));
         }), shareReplay(1));
+        this.bouncedMessage$ = new BehaviorSubject(undefined);
         this.hasMoreChannels$ = this.hasMoreChannelsSubject
             .asObservable()
             .pipe(shareReplay(1));
@@ -725,18 +726,39 @@ class ChannelService {
             if (this.beforeUpdateMessage) {
                 messageToUpdate = yield this.beforeUpdateMessage(messageToUpdate);
             }
+            if (message.moderation_details) {
+                return this.resendMessage(message);
+            }
             const response = yield this.chatClientService.chatClient.updateMessage(messageToUpdate);
             const channel = (_a = this.channelsSubject
                 .getValue()) === null || _a === void 0 ? void 0 : _a.find((c) => c.cid === message.cid);
+            if (response.message.type === 'error' &&
+                response.message.moderation_details) {
+                this.notificationService.addTemporaryNotification('streamChat.This message did not meet our content guidelines');
+                return message;
+            }
             return this.transformToStreamMessage(response.message, channel);
         });
     }
     /**
      * Deletes the message from the active channel
      * @param message Message to be deleted
+     * @param isLocalDelete set this `true` if you want to delete a message that's only part of the local state, not yet saved on the backend
      */
-    deleteMessage(message) {
+    deleteMessage(message, isLocalDelete = false) {
         return __awaiter(this, void 0, void 0, function* () {
+            if (isLocalDelete && this.activeChannel) {
+                const result = this.activeChannel.state.removeMessage({
+                    id: message.id,
+                    parent_id: message.parent_id,
+                });
+                if (result) {
+                    message.parent_id
+                        ? this.activeThreadMessagesSubject.next(this.activeChannel.state.threads[message.parent_id])
+                        : this.activeChannelMessagesSubject.next(this.activeChannel.state.messages);
+                }
+                return;
+            }
             if (this.messageDeleteConfirmationHandler) {
                 const result = yield this.messageDeleteConfirmationHandler(message);
                 if (result) {
@@ -2449,6 +2471,8 @@ const en = {
         'Unread messages': 'Unread messages',
         '{{count}} unread messages': '{{count}} unread messages',
         '{{count}} unread message': '{{count}} unread message',
+        'This message did not meet our content guidelines': 'This message did not meet our content guidelines',
+        'Send Anyway': 'Send Anyway',
     },
 };
 
@@ -2865,6 +2889,14 @@ 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)
+         */
+        this.messageBouncePromptTemplate$ = new BehaviorSubject(undefined);
     }
 }
 CustomTemplatesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: CustomTemplatesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -3175,6 +3207,137 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: ChatClientService }, { type: NotificationService }, { type: ChannelService }]; } });
 
+/**
+ * The `MessageActionsBox` component displays a list of message actions (i.e edit), that can be opened or closed. You can find the [list of the supported actions](../concepts/message-interactions.mdx) in the message interaction guide.
+ */
+class MessageActionsBoxComponent {
+    constructor(customTemplatesService, messageActionsService, cdRef) {
+        this.customTemplatesService = customTemplatesService;
+        this.messageActionsService = messageActionsService;
+        this.cdRef = cdRef;
+        /**
+         * Indicates if the list should be opened or closed. Adding a UI element to open and close the list is the parent's component responsibility.
+         * @deprecated No need for this since [theme-v2](../theming/introduction.mdx)
+         */
+        this.isOpen = false;
+        /**
+         * Indicates if the message actions are belonging to a message that was sent by the current user or not.
+         */
+        this.isMine = false;
+        /**
+         * 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.
+         */
+        this.enabledActions = [];
+        /**
+         * A list of custom message actions to be displayed in the action box
+         *
+         * In the next major release this will be released with `messageReactionsService.customActions$`
+         *
+         * More information: https://getstream.io/chat/docs/sdk/angular/services/MessageActionsService
+         */
+        this.customActions = [];
+        /**
+         * The number of authorized actions (it can be less or equal than the number of enabled actions)
+         *
+         * @deprecated components should use `messageReactionsService.getAuthorizedMessageActionsCount` method
+         *
+         * More information: https://getstream.io/chat/docs/sdk/angular/services/MessageActionsService
+         */
+        this.displayedActionsCount = new EventEmitter();
+        /**
+         * An event which emits `true` if the edit message modal is open, and `false` when it is closed.
+         *
+         * @deprecated components should use `messageReactionsService.messageToEdit$` Observable
+         *
+         * More information: https://getstream.io/chat/docs/sdk/angular/services/MessageActionsService
+         */
+        this.isEditing = new EventEmitter();
+        this.visibleMessageActionItems = [];
+        this.isEditModalOpen = false;
+        this.subscriptions = [];
+        this.isViewInited = false;
+        this.messageActionItems = this.messageActionsService.defaultActions;
+    }
+    ngOnInit() {
+        this.subscriptions.push(this.messageActionsService.messageToEdit$.subscribe((m) => {
+            var _a;
+            let isEditModalOpen = false;
+            if (m && m.id === ((_a = this.message) === null || _a === void 0 ? void 0 : _a.id)) {
+                isEditModalOpen = true;
+            }
+            if (isEditModalOpen !== this.isEditModalOpen) {
+                this.isEditModalOpen = isEditModalOpen;
+                this.isEditing.emit(this.isEditModalOpen);
+                if (this.isViewInited) {
+                    this.cdRef.detectChanges();
+                }
+            }
+        }));
+    }
+    ngOnChanges(changes) {
+        if (changes.isMine ||
+            changes.enabledActions ||
+            changes.message ||
+            changes.customActions) {
+            this.setVisibleActions();
+        }
+    }
+    ngAfterViewInit() {
+        this.isViewInited = true;
+    }
+    ngOnDestroy() {
+        this.subscriptions.forEach((s) => s.unsubscribe());
+    }
+    getActionLabel(actionLabelOrTranslationKey) {
+        return typeof actionLabelOrTranslationKey === 'string'
+            ? actionLabelOrTranslationKey
+            : actionLabelOrTranslationKey(this.message);
+    }
+    getMessageActionTemplateContext(item) {
+        return {
+            actionHandler: item.actionHandler,
+            isMine: this.isMine,
+            actionName: item.actionName,
+            message: this.message,
+            actionLabelOrTranslationKey: item.actionLabelOrTranslationKey,
+        };
+    }
+    trackByActionName(_, item) {
+        return item.actionName;
+    }
+    setVisibleActions() {
+        this.visibleMessageActionItems = [
+            ...this.messageActionItems,
+            ...this.customActions,
+        ].filter((item) => item.isVisible(this.enabledActions, this.isMine, this.message));
+        this.displayedActionsCount.emit(this.visibleMessageActionItems.length);
+    }
+}
+MessageActionsBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageActionsBoxComponent, deps: [{ token: CustomTemplatesService }, { token: MessageActionsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+MessageActionsBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: { isOpen: "isOpen", isMine: "isMine", message: "message", enabledActions: "enabledActions", customActions: "customActions" }, outputs: { displayedActionsCount: "displayedActionsCount", isEditing: "isEditing" }, usesOnChanges: true, ngImport: i0, template: "<div\n  #actionBox\n  data-testid=\"action-box\"\n  class=\"str-chat__message-actions-box str-chat__message-actions-box-angular\"\n  [class.str-chat__message-actions-box--open]=\"true\"\n>\n  <ul class=\"str-chat__message-actions-list\">\n    <ng-container\n      *ngFor=\"let item of visibleMessageActionItems; trackBy: trackByActionName\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          (customTemplatesService.messageActionsBoxItemTemplate$ | async) ||\n            defaultMessageActionItem;\n          context: getMessageActionTemplateContext(item)\n        \"\n      ></ng-container>\n    </ng-container>\n  </ul>\n</div>\n\n<ng-template\n  #defaultMessageActionItem\n  let-actionName=\"actionName\"\n  let-actionHandler=\"actionHandler\"\n  let-actionLabelOrTranslationKey=\"actionLabelOrTranslationKey\"\n>\n  <button\n    class=\"str-chat__message-actions-list-item-button\"\n    [attr.data-testid]=\"actionName + '-action'\"\n    (click)=\"actionHandler(message, isMine)\"\n  >\n    <li class=\"str-chat__message-actions-list-item\">\n      {{ getActionLabel(actionLabelOrTranslationKey) | translate }}\n    </li>\n  </button>\n</ng-template>\n", directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i5.AsyncPipe, "translate": i6.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageActionsBoxComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'stream-message-actions-box',
+                    templateUrl: './message-actions-box.component.html',
+                    styles: [],
+                }]
+        }], ctorParameters: function () { return [{ type: CustomTemplatesService }, { type: MessageActionsService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { isOpen: [{
+                type: Input
+            }], isMine: [{
+                type: Input
+            }], message: [{
+                type: Input
+            }], enabledActions: [{
+                type: Input
+            }], customActions: [{
+                type: Input
+            }], displayedActionsCount: [{
+                type: Output
+            }], isEditing: [{
+                type: Output
+            }] } });
+
 /**
  * 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.
  */
@@ -4105,113 +4268,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
         }], ctorParameters: function () { return [{ type: CustomTemplatesService }, { type: NotificationService }, { type: ThemeService }]; } });
 
 /**
- * The `MessageActionsBox` component displays a list of message actions (i.e edit), that can be opened or closed. You can find the [list of the supported actions](../concepts/message-interactions.mdx) in the message interaction guide.
+ * 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 MessageActionsBoxComponent {
-    constructor(customTemplatesService, messageActionsService, cdRef) {
+class EditMessageFormComponent {
+    constructor(customTemplatesService, messageActionsService) {
         this.customTemplatesService = customTemplatesService;
         this.messageActionsService = messageActionsService;
-        this.cdRef = cdRef;
-        /**
-         * Indicates if the list should be opened or closed. Adding a UI element to open and close the list is the parent's component responsibility.
-         * @deprecated No need for this since [theme-v2](../theming/introduction.mdx)
-         */
-        this.isOpen = false;
-        /**
-         * Indicates if the message actions are belonging to a message that was sent by the current user or not.
-         */
-        this.isMine = false;
-        /**
-         * 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.
-         */
-        this.enabledActions = [];
-        /**
-         * A list of custom message actions to be displayed in the action box
-         *
-         * In the next major release this will be released with `messageReactionsService.customActions$`
-         *
-         * More information: https://getstream.io/chat/docs/sdk/angular/services/MessageActionsService
-         */
-        this.customActions = [];
-        /**
-         * The number of authorized actions (it can be less or equal than the number of enabled actions)
-         *
-         * @deprecated components should use `messageReactionsService.getAuthorizedMessageActionsCount` method
-         *
-         * More information: https://getstream.io/chat/docs/sdk/angular/services/MessageActionsService
-         */
-        this.displayedActionsCount = new EventEmitter();
-        /**
-         * An event which emits `true` if the edit message modal is open, and `false` when it is closed.
-         *
-         * @deprecated components should use `messageReactionsService.messageToEdit$` Observable
-         *
-         * More information: https://getstream.io/chat/docs/sdk/angular/services/MessageActionsService
-         */
-        this.isEditing = new EventEmitter();
-        this.isEditModalOpen = false;
-        this.visibleMessageActionItems = [];
+        this.class = 'str-chat-angular__edit-message-form';
+        this.isModalOpen = false;
         this.sendMessageSubject = new Subject();
         this.subscriptions = [];
-        this.isViewInited = false;
-        this.modalClosed = () => {
-            this.isEditModalOpen = false;
-            this.messageActionsService.messageToEdit$.next(undefined);
-        };
-        this.messageActionItems = this.messageActionsService.defaultActions;
         this.sendMessage$ = this.sendMessageSubject.asObservable();
     }
     ngOnInit() {
-        this.subscriptions.push(this.messageActionsService.messageToEdit$.subscribe((m) => {
-            var _a;
-            let isEditModalOpen = false;
-            if (m && m.id === ((_a = this.message) === null || _a === void 0 ? void 0 : _a.id)) {
-                isEditModalOpen = true;
+        this.messageActionsService.messageToEdit$.subscribe((message) => {
+            if ((message && !this.isModalOpen) || (!message && this.isModalOpen)) {
+                this.message = message;
+                this.isModalOpen = !!message;
             }
-            if (isEditModalOpen !== this.isEditModalOpen) {
-                this.isEditModalOpen = isEditModalOpen;
-                this.isEditing.emit(this.isEditModalOpen);
-                if (this.isViewInited) {
-                    this.cdRef.detectChanges();
-                }
-            }
-        }));
-    }
-    ngOnChanges(changes) {
-        if (changes.isMine ||
-            changes.enabledActions ||
-            changes.message ||
-            changes.customActions) {
-            this.setVisibleActions();
-        }
-    }
-    ngAfterViewInit() {
-        this.isViewInited = true;
+        });
     }
     ngOnDestroy() {
         this.subscriptions.forEach((s) => s.unsubscribe());
     }
-    getActionLabel(actionLabelOrTranslationKey) {
-        return typeof actionLabelOrTranslationKey === 'string'
-            ? actionLabelOrTranslationKey
-            : actionLabelOrTranslationKey(this.message);
-    }
-    getMessageActionTemplateContext(item) {
+    getEditModalContext() {
         return {
-            actionHandler: item.actionHandler,
-            isMine: this.isMine,
-            actionName: item.actionName,
-            message: this.message,
-            actionLabelOrTranslationKey: item.actionLabelOrTranslationKey,
+            isOpen: this.isModalOpen,
+            isOpenChangeHandler: (isOpen) => {
+                this.isModalOpen = isOpen;
+                if (!this.isModalOpen) {
+                    this.dismissed();
+                }
+            },
+            content: this.modalContent,
         };
     }
-    sendClicked() {
-        this.sendMessageSubject.next();
-    }
     getMessageInputContext() {
         return {
             message: this.message,
-            messageUpdateHandler: this.modalClosed,
+            messageUpdateHandler: () => {
+                this.dismissed();
+            },
             isFileUploadEnabled: undefined,
             areMentionsEnabled: undefined,
             isMultipleFileUploadEnabled: undefined,
@@ -4220,64 +4319,110 @@ class MessageActionsBoxComponent {
             sendMessage$: this.sendMessage$,
         };
     }
-    getEditModalContext() {
-        return {
-            isOpen: this.isEditModalOpen,
-            isOpenChangeHandler: (isOpen) => {
-                this.isEditModalOpen = isOpen;
-                if (!this.isEditModalOpen) {
-                    this.modalClosed();
-                }
-            },
-            content: this.modalContent,
-        };
-    }
-    trackByActionName(_, item) {
-        return item.actionName;
+    sendClicked() {
+        this.sendMessageSubject.next();
     }
-    setVisibleActions() {
-        this.visibleMessageActionItems = [
-            ...this.messageActionItems,
-            ...this.customActions,
-        ].filter((item) => item.isVisible(this.enabledActions, this.isMine, this.message));
-        this.displayedActionsCount.emit(this.visibleMessageActionItems.length);
+    dismissed() {
+        this.isModalOpen = false;
+        this.message = undefined;
+        this.messageActionsService.messageToEdit$.next(undefined);
     }
 }
-MessageActionsBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageActionsBoxComponent, deps: [{ token: CustomTemplatesService }, { token: MessageActionsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-MessageActionsBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: { isOpen: "isOpen", isMine: "isMine", message: "message", enabledActions: "enabledActions", customActions: "customActions" }, outputs: { displayedActionsCount: "displayedActionsCount", isEditing: "isEditing" }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #actionBox\n  data-testid=\"action-box\"\n  class=\"str-chat__message-actions-box str-chat__message-actions-box-angular\"\n  [class.str-chat__message-actions-box--open]=\"true\"\n>\n  <ul class=\"str-chat__message-actions-list\">\n    <ng-container\n      *ngFor=\"let item of visibleMessageActionItems; trackBy: trackByActionName\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          (customTemplatesService.messageActionsBoxItemTemplate$ | async) ||\n            defaultMessageActionItem;\n          context: getMessageActionTemplateContext(item)\n        \"\n      ></ng-container>\n    </ng-container>\n  </ul>\n</div>\n\n<ng-template\n  #defaultMessageActionItem\n  let-actionName=\"actionName\"\n  let-actionHandler=\"actionHandler\"\n  let-actionLabelOrTranslationKey=\"actionLabelOrTranslationKey\"\n>\n  <button\n    class=\"str-chat__message-actions-list-item-button\"\n    [attr.data-testid]=\"actionName + '-action'\"\n    (click)=\"actionHandler(message, isMine)\"\n  >\n    <li class=\"str-chat__message-actions-list-item\">\n      {{ getActionLabel(actionLabelOrTranslationKey) | translate }}\n    </li>\n  </button>\n</ng-template>\n\n<ng-container\n  *ngTemplateOutlet=\"\n    (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    [isOpen]=\"isOpen\"\n    *ngIf=\"isOpen\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n    [content]=\"content\"\n  >\n  </stream-modal>\n</ng-template>\n\n<ng-template #modalContent>\n  <div class=\"str-chat__edit-message-form\" *ngIf=\"isEditModalOpen\">\n    <ng-template\n      #defaultInput\n      let-messageInput=\"message\"\n      let-messageUpdateHandler=\"messageUpdateHandler\"\n      let-sendMessage$Input=\"sendMessage$\"\n    >\n      <stream-message-input\n        [message]=\"messageInput\"\n        (messageUpdate)=\"messageUpdateHandler()\"\n        [sendMessage$]=\"sendMessage$Input\"\n      ></stream-message-input>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        (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)=\"modalClosed()\"\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", components: [{ type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }, { type: MessageInputComponent, selector: "stream-message-input", inputs: ["isFileUploadEnabled", "areMentionsEnabled", "mentionScope", "mode", "isMultipleFileUploadEnabled", "message", "sendMessage$", "inputMode", "autoFocus"], outputs: ["messageUpdate"] }, { type: NotificationListComponent, selector: "stream-notification-list" }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "async": i5.AsyncPipe, "translate": i6.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageActionsBoxComponent, decorators: [{
+EditMessageFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: EditMessageFormComponent, deps: [{ token: CustomTemplatesService }, { token: MessageActionsService }], target: i0.ɵɵFactoryTarget.Component });
+EditMessageFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", 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    [isOpen]=\"isOpen\"\n    *ngIf=\"isOpen\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n    [content]=\"content\"\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        (messageUpdate)=\"messageUpdateHandler()\"\n        [sendMessage$]=\"sendMessage$Input\"\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", components: [{ type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }, { type: MessageInputComponent, selector: "stream-message-input", inputs: ["isFileUploadEnabled", "areMentionsEnabled", "mentionScope", "mode", "isMultipleFileUploadEnabled", "message", "sendMessage$", "inputMode", "autoFocus"], outputs: ["messageUpdate"] }, { type: NotificationListComponent, selector: "stream-notification-list" }], directives: [{ type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "async": i5.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: EditMessageFormComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'stream-message-actions-box',
-                    templateUrl: './message-actions-box.component.html',
+                    selector: 'stream-edit-message-form',
+                    templateUrl: './edit-message-form.component.html',
                     styles: [],
                 }]
-        }], ctorParameters: function () { return [{ type: CustomTemplatesService }, { type: MessageActionsService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { isOpen: [{
-                type: Input
-            }], isMine: [{
-                type: Input
-            }], message: [{
-                type: Input
-            }], enabledActions: [{
-                type: Input
-            }], customActions: [{
-                type: Input
-            }], displayedActionsCount: [{
-                type: Output
-            }], isEditing: [{
-                type: Output
+        }], ctorParameters: function () { return [{ type: CustomTemplatesService }, { type: MessageActionsService }]; }, propDecorators: { class: [{
+                type: HostBinding
             }], modalContent: [{
                 type: ViewChild,
-                args: ['modalContent', { static: true }]
+                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;
+                }
+            }
+        }));
+    }
+    ngOnDestroy() {
+        this.subscriptions.forEach((s) => s.unsubscribe());
+    }
+    resendMessage() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.isModalOpen = false;
+            yield this.channelService.resendMessage(this.message);
+            this.message = undefined;
+            this.channelService.bouncedMessage$.next(undefined);
+        });
+    }
+    deleteMessage() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.message) {
+                return;
+            }
+            this.isModalOpen = false;
+            yield 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: "12.2.5", ngImport: i0, type: MessageBouncePromptComponent, deps: [{ token: ChannelService }, { token: CustomTemplatesService }, { token: MessageActionsService }], target: i0.ɵɵFactoryTarget.Component });
+MessageBouncePromptComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", 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    [isOpen]=\"isOpen\"\n    *ngIf=\"isOpen\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n    [content]=\"content\"\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        (click)=\"editMessage()\"\n        (keyup.enter)=\"editMessage()\"\n        type=\"button\"\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", components: [{ type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }], directives: [{ type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i5.AsyncPipe, "translate": i6.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageBouncePromptComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'stream-message-bounce-prompt',
+                    templateUrl: './message-bounce-prompt.component.html',
+                    styles: [],
+                }]
+        }], 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) {
+    constructor(channelService, themeService, customTemplatesService) {
         this.channelService = channelService;
         this.themeService = themeService;
+        this.customTemplatesService = customTemplatesService;
         this.subscriptions = [];
         this.isError$ = combineLatest([
             this.channelService.channelQueryState$,
@@ -4296,8 +4441,8 @@ class ChannelComponent {
         this.isActiveChannel$ = this.channelService.activeChannel$.pipe(map((c) => !!c));
     }
 }
-ChannelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelComponent, deps: [{ token: ChannelService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
-ChannelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", 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    class=\"str-chat__container\"\n    *ngIf=\"\n      (isError$ | async) === false &&\n        (isInitializing$ | async) === false &&\n        (isActiveChannel$ | async) === true;\n      else noChannel\n    \"\n  >\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      class=\"str-chat__empty-channel\"\n      *ngIf=\"\n        (isInitializing$ | async) === false &&\n        ((isError$ | async) === true || (isActiveChannel$ | async) === false)\n      \"\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", components: [{ type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: NotificationListComponent, selector: "stream-notification-list" }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i5.AsyncPipe, "translate": i6.TranslatePipe } });
+ChannelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelComponent, deps: [{ token: ChannelService }, { token: ThemeService }, { token: CustomTemplatesService }], target: i0.ɵɵFactoryTarget.Component });
+ChannelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", 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    class=\"str-chat__container\"\n    *ngIf=\"\n      (isError$ | async) === false &&\n        (isInitializing$ | async) === false &&\n        (isActiveChannel$ | async) === true;\n      else noChannel\n    \"\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      class=\"str-chat__empty-channel\"\n      *ngIf=\"\n        (isInitializing$ | async) === false &&\n        ((isError$ | async) === true || (isActiveChannel$ | async) === false)\n      \"\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", components: [{ type: EditMessageFormComponent, selector: "stream-edit-message-form" }, { type: MessageBouncePromptComponent, selector: "stream-message-bounce-prompt" }, { type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: NotificationListComponent, selector: "stream-notification-list" }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i5.AsyncPipe, "translate": i6.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelComponent, decorators: [{
             type: Component,
             args: [{
@@ -4305,7 +4450,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
                     templateUrl: './channel.component.html',
                     styles: [],
                 }]
-        }], ctorParameters: function () { return [{ type: ChannelService }, { type: ThemeService }]; } });
+        }], ctorParameters: function () { return [{ type: ChannelService }, { type: ThemeService }, { type: CustomTemplatesService }]; } });
 
 const listUsers = (users) => {
     let outStr = '';
@@ -4680,7 +4825,7 @@ const parseDate = (date, format = 'date-time') => {
             nextWeek: 'dddd',
             lastDay: '[Yesterday]',
             lastWeek: '[Last] dddd',
-            sameElse: 'DD/MM/YYYY', // Everything else ( 17/10/2011 )
+            sameElse: 'MM/DD/YYYY', // Everything else ( 10/17/2011 )
         });
 };
 
@@ -5091,22 +5236,6 @@ class MessageComponent {
                 }
             }
         }));
-        this.subscriptions.push(this.messageActionsService.messageToEdit$.subscribe((m) => {
-            var _a;
-            let isEditing = false;
-            if (m && m.id === ((_a = this.message) === null || _a === void 0 ? void 0 : _a.id)) {
-                isEditing = true;
-            }
-            if (isEditing !== this.isEditing) {
-                this.isEditing = isEditing;
-                if (!this.isEditing) {
-                    this.isActionBoxOpen = false;
-                }
-                if (this.isViewInited) {
-                    this.cdRef.detectChanges();
-                }
-            }
-        }));
     }
     ngOnChanges(changes) {
         var _a, _b, _c, _d, _e, _f, _g;
@@ -5205,9 +5334,6 @@ class MessageComponent {
         }
     }
     messageActionsBoxClicked(popperContent) {
-        if (this.isEditing) {
-            return;
-        }
         popperContent.hide();
     }
     getAttachmentListContext() {
@@ -5249,6 +5375,17 @@ class MessageComponent {
             ownReactions: ((_d = this.message) === null || _d === void 0 ? void 0 : _d.own_reactions) || [],
         };
     }
+    unsentMessageClicked() {
+        var _a, _b, _c, _d;
+        if (((_a = this.message) === null || _a === void 0 ? void 0 : _a.status) === 'failed' &&
+            ((_b = this.message) === null || _b === void 0 ? void 0 : _b.errorStatusCode) !== 403) {
+            this.resendMessage();
+        }
+        else if (((_c = this.message) === null || _c === void 0 ? void 0 : _c.type) === 'error' &&
+            ((_d = this.message) === null || _d === void 0 ? void 0 : _d.moderation_details)) {
+            this.openMessageBouncePrompt();
+        }
+    }
     resendMessage() {
         void this.channelService.resendMessage(this.message);
     }
@@ -5277,10 +5414,6 @@ class MessageComponent {
                 // message action box changes UI bindings in parent, so we'll have to rerun change detection
                 this.cdRef.detectChanges();
             },
-            isEditingChangeHandler: (isEditing) => {
-                this.isEditing = isEditing;
-                this.isActionBoxOpen = !this.isEditing;
-            },
             customActions: this.customActions || [],
         };
     }
@@ -5314,6 +5447,9 @@ class MessageComponent {
     displayOriginalMessage() {
         this.createMessageParts(false);
     }
+    openMessageBouncePrompt() {
+        this.channelService.bouncedMessage$.next(this.message);
+    }
     createMessageParts(shouldTranslate = true) {
         this.messageTextParts = undefined;
         this.messageText = undefined;
@@ -5403,7 +5539,7 @@ class MessageComponent {
     }
 }
 MessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageComponent, deps: [{ token: ChatClientService }, { token: ChannelService }, { token: CustomTemplatesService }, { token: i0.ChangeDetectorRef }, { token: ThemeService }, { token: DateParserService }, { token: i0.NgZone }, { token: MessageService }, { token: MessageActionsService }], target: i0.ɵɵFactoryTarget.Component });
-MessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageComponent, selector: "stream-message", inputs: { message: "message", enabledMessageActions: "enabledMessageActions", isLastSentMessage: "isLastSentMessage", mode: "mode", isHighlighted: "isHighlighted", customActions: "customActions" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #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  }}\"\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  \"\n  data-testid=\"message-container\"\n>\n  <ng-container *ngIf=\"!message?.deleted_at; else deletedMessage\">\n    <ng-container *ngIf=\"message?.type !== 'system'; else systemMessage\">\n      <ng-container *ngIf=\"themeVersion === '1'\">\n        <ng-container *ngTemplateOutlet=\"messageStatus\"></ng-container>\n      </ng-container>\n      <stream-avatar-placeholder\n        data-testid=\"avatar\"\n        class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n        [imageUrl]=\"message?.user?.image\"\n        [name]=\"message?.user?.name || message?.user?.id\"\n        type=\"user\"\n        location=\"message-sender\"\n        [user]=\"message?.user || undefined\"\n      ></stream-avatar-placeholder>\n      <div class=\"str-chat__message-inner\">\n        <div\n          class=\"str-chat__message-simple__actions str-chat__message-options\"\n          data-testid=\"message-options\"\n          [class.str-chat__message-actions-open]=\"isActionBoxOpen\"\n          [class.str-chat__message-edit-in-progress]=\"isEditing\"\n          *ngIf=\"areOptionsVisible\"\n        >\n          <div\n            data-testid=\"message-actions-container\"\n            #messageActionsToggle\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            [class.str-chat-angular__message-simple__actions__action--options--editing]=\"\n              isEditing\n            \"\n            [popper]=\"popperContent\"\n            [popperTrigger]=\"popperTriggerClick\"\n            [popperPlacement]=\"popperPlacementAuto\"\n            [popperHideOnScroll]=\"false\"\n            [popperHideOnClickOutside]=\"true\"\n            [popperHideOnMouseLeave]=\"false\"\n            [popperDisableAnimation]=\"true\"\n            (popperOnHidden)=\"isActionBoxOpen = false\"\n          >\n            <popper-content #popperContent>\n              <ng-template\n                #defaultMessageActionsBox\n                let-isOpen=\"isOpen\"\n                let-isMine=\"isMine\"\n                let-enabledActions=\"enabledActions\"\n                let-messageInput=\"message\"\n                let-customActions=\"customActions\"\n              >\n                <stream-message-actions-box\n                  (click)=\"messageActionsBoxClicked(popperContent)\"\n                  *ngIf=\"isOpen\"\n                  [isOpen]=\"isOpen\"\n                  [isMine]=\"isMine\"\n                  [enabledActions]=\"enabledActions\"\n                  [customActions]=\"customActions\"\n                  [message]=\"messageInput\"\n                ></stream-message-actions-box>\n              </ng-template>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  (customTemplatesService.messageActionsBoxTemplate$ | async) ||\n                    defaultMessageActionsBox;\n                  context: getMessageActionsBoxContext()\n                \"\n              >\n              </ng-container>\n            </popper-content>\n            <div\n              class=\"str-chat__message-actions-box-button\"\n              data-testid=\"action-icon\"\n              (click)=\"messageActionsClicked()\"\n              (keyup.enter)=\"messageActionsClicked()\"\n              *ngIf=\"visibleMessageActionsCount > 0\"\n            >\n              <stream-icon-placeholder\n                icon=\"action-icon\"\n                class=\"str-chat__message-action-icon\"\n              ></stream-icon-placeholder>\n            </div>\n          </div>\n          <div\n            *ngIf=\"\n              enabledMessageActions.indexOf('send-reply') !== -1 &&\n              mode === 'main'\n            \"\n            class=\"\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--thread\n              str-chat__message-reply-in-thread-button\n            \"\n            data-testid=\"reply-in-thread\"\n            (click)=\"setAsActiveParentMessage()\"\n            (keyup.enter)=\"setAsActiveParentMessage()\"\n          >\n            <stream-icon-placeholder\n              class=\"str-chat__message-action-icon\"\n              icon=\"reply-in-thread\"\n            ></stream-icon-placeholder>\n          </div>\n          <div\n            *ngIf=\"canReactToMessage\"\n            class=\"\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--reactions\n              str-chat__message-reactions-button\n            \"\n            data-testid=\"reaction-icon\"\n            (click)=\"isReactionSelectorOpen = !isReactionSelectorOpen\"\n            (keyup.enter)=\"isReactionSelectorOpen = !isReactionSelectorOpen\"\n          >\n            <stream-icon-placeholder\n              class=\"str-chat__message-action-icon\"\n              icon=\"reaction-icon\"\n            ></stream-icon-placeholder>\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-isSelectorOpen=\"isSelectorOpen\"\n            let-isSelectorOpenChangeHandler=\"isSelectorOpenChangeHandler\"\n            let-messageId=\"messageId\"\n            let-ownReactions=\"ownReactions\"\n          >\n            <stream-message-reactions\n              [messageReactionCounts]=\"messageReactionCounts\"\n              [latestReactions]=\"latestReactions\"\n              [isSelectorOpen]=\"isSelectorOpen\"\n              (isSelectorOpenChange)=\"isSelectorOpenChangeHandler($event)\"\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        <!-- transform: translate3d(0, 0, 0) fixes scrolling issues on iOS, see: https://stackoverflow.com/questions/50105780/elements-disappear-when-scrolling-in-safari-webkit-transform-fix-only-works-t/50144295#50144295 -->\n        <!-- transform: none is required when image carousel is open in order for the modal to be correctly positioned, see how the transform property changes the behavior of fixed positioned elements https://developer.mozilla.org/en-US/docs/Web/CSS/position  -->\n        <div\n          class=\"str-chat__message-bubble\"\n          style=\"transform: {{\n            imageAttachmentModalState === 'opened'\n              ? 'none'\n              : 'translate3d(0, 0, 0)'\n          }}\"\n        >\n          <ng-container *ngIf=\"hasAttachment && !message?.quoted_message\">\n            <ng-container\n              *ngTemplateOutlet=\"attachmentsTemplate\"\n            ></ng-container>\n          </ng-container>\n          <div\n            class=\"str-chat__message-text\"\n            tabindex=\"0\"\n            *ngIf=\"message?.text || (message?.quoted_message && hasAttachment)\"\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              (click)=\"\n                message?.status === 'failed' && message?.errorStatusCode !== 403\n                  ? resendMessage()\n                  : undefined\n              \"\n              (keyup.enter)=\"\n                message?.status === 'failed' && message?.errorStatusCode !== 403\n                  ? resendMessage()\n                  : undefined\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                data-testid=\"client-error-message\"\n                *ngIf=\"message?.type === 'error'\"\n                class=\"\n                  str-chat__simple-message--error-message\n                  str-chat__message--error-message\n                \"\n              >\n                {{ \"streamChat.Error \u00B7 Unsent\" | translate }}\n              </div>\n              <div\n                data-testid=\"error-message\"\n                *ngIf=\"message?.status === 'failed'\"\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 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            *ngIf=\"themeVersion === '2'\"\n            class=\"str-chat__message-error-icon\"\n            icon=\"error\"\n          ></stream-icon-placeholder>\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"\n            replyCountButton;\n            context: { position: 'inside-message-bubble' }\n          \"\n        ></ng-container>\n        <ng-container\n          *ngTemplateOutlet=\"\n            messageDateAndSender;\n            context: { position: 'inside-message-bubble' }\n          \"\n        ></ng-container>\n      </div>\n      <ng-container\n        *ngTemplateOutlet=\"\n          replyCountButton;\n          context: { position: 'outside-message-bubble', message: message }\n        \"\n      ></ng-container>\n\n      <ng-container\n        *ngTemplateOutlet=\"\n          messageDateAndSender;\n          context: { position: 'outside-message-bubble' }\n        \"\n      ></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      [imageUrl]=\"message?.quoted_message?.user?.image\"\n      [name]=\"\n        message?.quoted_message?.user?.name || message?.quoted_message?.user?.id\n      \"\n      [size]=\"20\"\n      type=\"user\"\n      location=\"quoted-message-sender\"\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<!-- We need these markups in slightly different positions in theme-v1 and theme-v2, this soultion makes that possible without duplicating the code -->\n<ng-template #messageDateAndSender let-position=\"position\">\n  <ng-container\n    *ngIf=\"\n      (position === 'inside-message-bubble' && themeVersion === '1') ||\n      (position === 'outside-message-bubble' && themeVersion === '2')\n    \"\n  >\n    <div\n      class=\"str-chat__translation-notice\"\n      *ngIf=\"shouldDisplayTranslationNotice\"\n      data-testid=\"translation-notice\"\n    >\n      <button\n        data-testid=\"see-original\"\n        *ngIf=\"displayedMessageTextContent === 'translation'\"\n        (click)=\"displayOriginalMessage()\"\n        (keyup.enter)=\"displayOriginalMessage()\"\n        translate\n      >\n        streamChat.See original (automatically translated)\n      </button>\n      <button\n        data-testid=\"see-translation\"\n        *ngIf=\"displayedMessageTextContent === 'original'\"\n        (click)=\"displayTranslatedMessage()\"\n        (keyup.enter)=\"displayTranslatedMessage()\"\n        translate\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 *ngIf=\"themeVersion === '2'\">\n        <ng-container *ngTemplateOutlet=\"messageStatus\"></ng-container>\n      </ng-container>\n      <span\n        data-testid=\"sender\"\n        *ngIf=\"!isSentByCurrentUser\"\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 data-testid=\"date\" class=\"str-chat__message-simple-timestamp\">\n        {{ parsedDate }}\n      </span>\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        [popper]=\"popperContent\"\n        [popperTrigger]=\"popperTriggerHover\"\n        [popperPlacement]=\"popperPlacementAuto\"\n        [popperHideOnScroll]=\"false\"\n        [popperHideOnClickOutside]=\"false\"\n        (hover)=\"$event.stopPropagation()\"\n      >\n        <popper-content #popperContent>\n          <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n            {{ \"streamChat.Delivered\" | translate }}\n          </div>\n        </popper-content>\n        <stream-icon-placeholder\n          data-testid=\"delivered-icon\"\n          icon=\"delivered-icon\"\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        [popper]=\"popperContent\"\n        [popperTrigger]=\"popperTriggerHover\"\n        [popperPlacement]=\"popperPlacementAuto\"\n        [popperHideOnScroll]=\"false\"\n        [popperHideOnClickOutside]=\"false\"\n        (hover)=\"$event.stopPropagation()\"\n      >\n        <popper-content #popperContent>\n          <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n            {{ \"streamChat.Sending...\" | translate }}\n          </div>\n        </popper-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>\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        [popper]=\"popperContent\"\n        [popperTrigger]=\"popperTriggerHover\"\n        [popperPlacement]=\"popperPlacementAuto\"\n        [popperHideOnScroll]=\"false\"\n        [popperHideOnClickOutside]=\"false\"\n        (hover)=\"$event.stopPropagation()\"\n      >\n        <popper-content #popperContent>\n          <div\n            class=\"str-chat__tooltip str-chat__tooltip-angular\"\n            data-testid=\"read-by-tooltip\"\n          >\n            {{ readByText }}\n          </div>\n        </popper-content>\n        <stream-avatar-placeholder\n          class=\"str-chat-angular__avatar-host\"\n          data-test-id=\"last-read-user-avatar\"\n          [size]=\"15\"\n          [imageUrl]=\"lastReadUser?.image\"\n          [name]=\"lastReadUser?.name || lastReadUser?.id\"\n          type=\"user\"\n          location=\"message-reader\"\n          [user]=\"lastReadUser\"\n        ></stream-avatar-placeholder>\n        <span\n          data-test-id=\"read-by-length\"\n          *ngIf=\"isReadByMultipleUsers\"\n          class=\"str-chat__message-simple-status-number\"\n        >\n          {{ (message?.readBy)!.length }}\n        </span>\n      </span>\n    </ng-template>\n  </ng-container>\n</ng-template>\n\n<ng-template #replyCountButton let-position=\"position\">\n  <div\n    *ngIf=\"\n      (position === 'inside-message-bubble' && themeVersion === '1') ||\n      (position === 'outside-message-bubble' && themeVersion === '2')\n    \"\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      <stream-icon-placeholder\n        *ngIf=\"themeVersion === '1'\"\n        stream-icon-placeholder\n        icon=\"reply\"\n      ></stream-icon-placeholder>\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", components: [{ type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { type: i9.NgxPopperjsContentComponent, selector: "popper-content", exportAs: ["ngxPopperjsContent"] }, { type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: ["isOpen", "isMine", "message", "enabledActions", "customActions"], outputs: ["displayedActionsCount", "isEditing"] }, { type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: MessageReactionsComponent, selector: "stream-message-reactions", inputs: ["messageId", "messageReactionCounts", "isSelectorOpen", "latestReactions", "ownReactions"], outputs: ["isSelectorOpenChange"] }, { type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "parentMessageId", "attachments"], outputs: ["imageModalStateChange"] }, { type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder", inputs: ["size", "color"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.NgxPopperjsDirective, selector: "[popper]", inputs: ["popperTimeout", "popperTimeoutAfterShow", "popperApplyClass", "popper", "popperDisabled", "popperPlacement", "popperApplyArrowClass", "popperPreventOverflow", "popperHideOnClickOutside", "popperTrigger", "popperStyles", "popperAriaDescribeBy", "popperAriaRole", "popperBoundaries", "popperCloseOnClickOutside", "popperDisableAnimation", "popperDisableStyle", "popperHideOnMouseLeave", "popperHideOnScroll", "popperAppendTo", "popperModifiers", "popperPositionFixed", "popperDelay", "popperShowOnStart", "popperTarget"], outputs: ["popperOnHidden", "popperOnShown", "popperOnUpdate"], exportAs: ["popper"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "async": i5.AsyncPipe, "translate": i6.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageComponent, selector: "stream-message", inputs: { message: "message", enabledMessageActions: "enabledMessageActions", isLastSentMessage: "isLastSentMessage", mode: "mode", isHighlighted: "isHighlighted", customActions: "customActions" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #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  }}\"\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  data-testid=\"message-container\"\n>\n  <ng-container *ngIf=\"!message?.deleted_at; else deletedMessage\">\n    <ng-container *ngIf=\"message?.type !== 'system'; else systemMessage\">\n      <ng-container *ngIf=\"themeVersion === '1'\">\n        <ng-container *ngTemplateOutlet=\"messageStatus\"></ng-container>\n      </ng-container>\n      <stream-avatar-placeholder\n        data-testid=\"avatar\"\n        class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n        [imageUrl]=\"message?.user?.image\"\n        [name]=\"message?.user?.name || message?.user?.id\"\n        type=\"user\"\n        location=\"message-sender\"\n        [user]=\"message?.user || undefined\"\n      ></stream-avatar-placeholder>\n      <div class=\"str-chat__message-inner\">\n        <div\n          class=\"str-chat__message-simple__actions str-chat__message-options\"\n          data-testid=\"message-options\"\n          [class.str-chat__message-actions-open]=\"isActionBoxOpen\"\n          *ngIf=\"areOptionsVisible\"\n        >\n          <div\n            data-testid=\"message-actions-container\"\n            #messageActionsToggle\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            [popper]=\"popperContent\"\n            [popperTrigger]=\"popperTriggerClick\"\n            [popperPlacement]=\"popperPlacementAuto\"\n            [popperHideOnScroll]=\"false\"\n            [popperHideOnClickOutside]=\"true\"\n            [popperHideOnMouseLeave]=\"false\"\n            [popperDisableAnimation]=\"true\"\n            (popperOnHidden)=\"isActionBoxOpen = false\"\n          >\n            <popper-content #popperContent>\n              <ng-template\n                #defaultMessageActionsBox\n                let-isOpen=\"isOpen\"\n                let-isMine=\"isMine\"\n                let-enabledActions=\"enabledActions\"\n                let-messageInput=\"message\"\n                let-customActions=\"customActions\"\n              >\n                <stream-message-actions-box\n                  (click)=\"messageActionsBoxClicked(popperContent)\"\n                  *ngIf=\"isOpen\"\n                  [isOpen]=\"isOpen\"\n                  [isMine]=\"isMine\"\n                  [enabledActions]=\"enabledActions\"\n                  [customActions]=\"customActions\"\n                  [message]=\"messageInput\"\n                ></stream-message-actions-box>\n              </ng-template>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  (customTemplatesService.messageActionsBoxTemplate$ | async) ||\n                    defaultMessageActionsBox;\n                  context: getMessageActionsBoxContext()\n                \"\n              >\n              </ng-container>\n            </popper-content>\n            <div\n              class=\"str-chat__message-actions-box-button\"\n              data-testid=\"action-icon\"\n              (click)=\"messageActionsClicked()\"\n              (keyup.enter)=\"messageActionsClicked()\"\n              *ngIf=\"visibleMessageActionsCount > 0\"\n            >\n              <stream-icon-placeholder\n                icon=\"action-icon\"\n                class=\"str-chat__message-action-icon\"\n              ></stream-icon-placeholder>\n            </div>\n          </div>\n          <div\n            *ngIf=\"\n              enabledMessageActions.indexOf('send-reply') !== -1 &&\n              mode === 'main'\n            \"\n            class=\"\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--thread\n              str-chat__message-reply-in-thread-button\n            \"\n            data-testid=\"reply-in-thread\"\n            (click)=\"setAsActiveParentMessage()\"\n            (keyup.enter)=\"setAsActiveParentMessage()\"\n          >\n            <stream-icon-placeholder\n              class=\"str-chat__message-action-icon\"\n              icon=\"reply-in-thread\"\n            ></stream-icon-placeholder>\n          </div>\n          <div\n            *ngIf=\"canReactToMessage\"\n            class=\"\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--reactions\n              str-chat__message-reactions-button\n            \"\n            data-testid=\"reaction-icon\"\n            (click)=\"isReactionSelectorOpen = !isReactionSelectorOpen\"\n            (keyup.enter)=\"isReactionSelectorOpen = !isReactionSelectorOpen\"\n          >\n            <stream-icon-placeholder\n              class=\"str-chat__message-action-icon\"\n              icon=\"reaction-icon\"\n            ></stream-icon-placeholder>\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-isSelectorOpen=\"isSelectorOpen\"\n            let-isSelectorOpenChangeHandler=\"isSelectorOpenChangeHandler\"\n            let-messageId=\"messageId\"\n            let-ownReactions=\"ownReactions\"\n          >\n            <stream-message-reactions\n              [messageReactionCounts]=\"messageReactionCounts\"\n              [latestReactions]=\"latestReactions\"\n              [isSelectorOpen]=\"isSelectorOpen\"\n              (isSelectorOpenChange)=\"isSelectorOpenChangeHandler($event)\"\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        <!-- transform: translate3d(0, 0, 0) fixes scrolling issues on iOS, see: https://stackoverflow.com/questions/50105780/elements-disappear-when-scrolling-in-safari-webkit-transform-fix-only-works-t/50144295#50144295 -->\n        <!-- transform: none is required when image carousel is open in order for the modal to be correctly positioned, see how the transform property changes the behavior of fixed positioned elements https://developer.mozilla.org/en-US/docs/Web/CSS/position  -->\n        <div\n          class=\"str-chat__message-bubble\"\n          style=\"transform: {{\n            imageAttachmentModalState === 'opened'\n              ? 'none'\n              : 'translate3d(0, 0, 0)'\n          }}\"\n        >\n          <ng-container *ngIf=\"hasAttachment && !message?.quoted_message\">\n            <ng-container\n              *ngTemplateOutlet=\"attachmentsTemplate\"\n            ></ng-container>\n          </ng-container>\n          <div\n            class=\"str-chat__message-text\"\n            tabindex=\"0\"\n            *ngIf=\"message?.text || (message?.quoted_message && hasAttachment)\"\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              (click)=\"unsentMessageClicked()\"\n              (keyup.enter)=\"unsentMessageClicked()\"\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                data-testid=\"client-error-message\"\n                *ngIf=\"message?.type === 'error'\"\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                data-testid=\"error-message\"\n                *ngIf=\"message?.status === 'failed'\"\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 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            *ngIf=\"themeVersion === '2'\"\n            class=\"str-chat__message-error-icon\"\n            icon=\"error\"\n          ></stream-icon-placeholder>\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"\n            replyCountButton;\n            context: { position: 'inside-message-bubble' }\n          \"\n        ></ng-container>\n        <ng-container\n          *ngTemplateOutlet=\"\n            messageDateAndSender;\n            context: { position: 'inside-message-bubble' }\n          \"\n        ></ng-container>\n      </div>\n      <ng-container\n        *ngTemplateOutlet=\"\n          replyCountButton;\n          context: { position: 'outside-message-bubble', message: message }\n        \"\n      ></ng-container>\n\n      <ng-container\n        *ngTemplateOutlet=\"\n          messageDateAndSender;\n          context: { position: 'outside-message-bubble' }\n        \"\n      ></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      [imageUrl]=\"message?.quoted_message?.user?.image\"\n      [name]=\"\n        message?.quoted_message?.user?.name || message?.quoted_message?.user?.id\n      \"\n      [size]=\"20\"\n      type=\"user\"\n      location=\"quoted-message-sender\"\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<!-- We need these markups in slightly different positions in theme-v1 and theme-v2, this soultion makes that possible without duplicating the code -->\n<ng-template #messageDateAndSender let-position=\"position\">\n  <ng-container\n    *ngIf=\"\n      (position === 'inside-message-bubble' && themeVersion === '1') ||\n      (position === 'outside-message-bubble' && themeVersion === '2')\n    \"\n  >\n    <div\n      class=\"str-chat__translation-notice\"\n      *ngIf=\"shouldDisplayTranslationNotice\"\n      data-testid=\"translation-notice\"\n    >\n      <button\n        data-testid=\"see-original\"\n        *ngIf=\"displayedMessageTextContent === 'translation'\"\n        (click)=\"displayOriginalMessage()\"\n        (keyup.enter)=\"displayOriginalMessage()\"\n        translate\n      >\n        streamChat.See original (automatically translated)\n      </button>\n      <button\n        data-testid=\"see-translation\"\n        *ngIf=\"displayedMessageTextContent === 'original'\"\n        (click)=\"displayTranslatedMessage()\"\n        (keyup.enter)=\"displayTranslatedMessage()\"\n        translate\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 *ngIf=\"themeVersion === '2'\">\n        <ng-container *ngTemplateOutlet=\"messageStatus\"></ng-container>\n      </ng-container>\n      <span\n        data-testid=\"sender\"\n        *ngIf=\"!isSentByCurrentUser\"\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 data-testid=\"date\" class=\"str-chat__message-simple-timestamp\">\n        {{ parsedDate }}\n      </span>\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        [popper]=\"popperContent\"\n        [popperTrigger]=\"popperTriggerHover\"\n        [popperPlacement]=\"popperPlacementAuto\"\n        [popperHideOnScroll]=\"false\"\n        [popperHideOnClickOutside]=\"false\"\n        (hover)=\"$event.stopPropagation()\"\n      >\n        <popper-content #popperContent>\n          <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n            {{ \"streamChat.Delivered\" | translate }}\n          </div>\n        </popper-content>\n        <stream-icon-placeholder\n          data-testid=\"delivered-icon\"\n          icon=\"delivered-icon\"\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        [popper]=\"popperContent\"\n        [popperTrigger]=\"popperTriggerHover\"\n        [popperPlacement]=\"popperPlacementAuto\"\n        [popperHideOnScroll]=\"false\"\n        [popperHideOnClickOutside]=\"false\"\n        (hover)=\"$event.stopPropagation()\"\n      >\n        <popper-content #popperContent>\n          <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n            {{ \"streamChat.Sending...\" | translate }}\n          </div>\n        </popper-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>\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        [popper]=\"popperContent\"\n        [popperTrigger]=\"popperTriggerHover\"\n        [popperPlacement]=\"popperPlacementAuto\"\n        [popperHideOnScroll]=\"false\"\n        [popperHideOnClickOutside]=\"false\"\n        (hover)=\"$event.stopPropagation()\"\n      >\n        <popper-content #popperContent>\n          <div\n            class=\"str-chat__tooltip str-chat__tooltip-angular\"\n            data-testid=\"read-by-tooltip\"\n          >\n            {{ readByText }}\n          </div>\n        </popper-content>\n        <stream-avatar-placeholder\n          class=\"str-chat-angular__avatar-host\"\n          data-test-id=\"last-read-user-avatar\"\n          [size]=\"15\"\n          [imageUrl]=\"lastReadUser?.image\"\n          [name]=\"lastReadUser?.name || lastReadUser?.id\"\n          type=\"user\"\n          location=\"message-reader\"\n          [user]=\"lastReadUser\"\n        ></stream-avatar-placeholder>\n        <span\n          data-test-id=\"read-by-length\"\n          *ngIf=\"isReadByMultipleUsers\"\n          class=\"str-chat__message-simple-status-number\"\n        >\n          {{ (message?.readBy)!.length }}\n        </span>\n      </span>\n    </ng-template>\n  </ng-container>\n</ng-template>\n\n<ng-template #replyCountButton let-position=\"position\">\n  <div\n    *ngIf=\"\n      (position === 'inside-message-bubble' && themeVersion === '1') ||\n      (position === 'outside-message-bubble' && themeVersion === '2')\n    \"\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      <stream-icon-placeholder\n        *ngIf=\"themeVersion === '1'\"\n        stream-icon-placeholder\n        icon=\"reply\"\n      ></stream-icon-placeholder>\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", components: [{ type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { type: i9.NgxPopperjsContentComponent, selector: "popper-content", exportAs: ["ngxPopperjsContent"] }, { type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: ["isOpen", "isMine", "message", "enabledActions", "customActions"], outputs: ["displayedActionsCount", "isEditing"] }, { type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: MessageReactionsComponent, selector: "stream-message-reactions", inputs: ["messageId", "messageReactionCounts", "isSelectorOpen", "latestReactions", "ownReactions"], outputs: ["isSelectorOpenChange"] }, { type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "parentMessageId", "attachments"], outputs: ["imageModalStateChange"] }, { type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder", inputs: ["size", "color"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.NgxPopperjsDirective, selector: "[popper]", inputs: ["popperTimeout", "popperTimeoutAfterShow", "popperApplyClass", "popper", "popperDisabled", "popperPlacement", "popperApplyArrowClass", "popperPreventOverflow", "popperHideOnClickOutside", "popperTrigger", "popperStyles", "popperAriaDescribeBy", "popperAriaRole", "popperBoundaries", "popperCloseOnClickOutside", "popperDisableAnimation", "popperDisableStyle", "popperHideOnMouseLeave", "popperHideOnScroll", "popperAppendTo", "popperModifiers", "popperPositionFixed", "popperDelay", "popperShowOnStart", "popperTarget"], outputs: ["popperOnHidden", "popperOnShown", "popperOnUpdate"], exportAs: ["popper"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "async": i5.AsyncPipe, "translate": i6.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageComponent, decorators: [{
             type: Component,
             args: [{
@@ -6377,8 +6513,8 @@ class MessageListComponent {
             (_d = (_c = this.chatClientService.chatClient) === null || _c === void 0 ? void 0 : _c.logger) === null || _d === void 0 ? void 0 : _d.call(_c, 'info', `Received one or more messages`, {
                 tags: `message list ${this.mode}`,
             });
-            const currentLatestMessage = messages[messages.length - 1];
-            this.newMessageReceived(currentLatestMessage);
+            const currentLatestMessageInState = messages[messages.length - 1];
+            this.newMessageReceived(currentLatestMessageInState);
             const currentOldestMessage = messages[0];
             if (!this.oldestMessage ||
                 !messages.find((m) => m.id === this.oldestMessage.id)) {
@@ -6411,7 +6547,8 @@ class MessageListComponent {
             this.isLatestMessageInList =
                 !this.latestMessage ||
                     messages.length === 0 ||
-                    messages[messages.length - 1].id === this.latestMessage.id;
+                    messages[messages.length - 1].id === this.latestMessage.id ||
+                    this.mode === 'thread';
             if (!this.isLatestMessageInList) {
                 this.isUserScrolled = true;
             }
@@ -6468,15 +6605,20 @@ class MessageListComponent {
         }
     }
     newMessageReceived(message) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        const latestMessages = (_b = (_a = this.channelService.activeChannel) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.latestMessages;
         if (!this.latestMessage ||
-            ((_a = this.latestMessage.created_at) === null || _a === void 0 ? void 0 : _a.getTime()) < message.created_at.getTime()) {
-            (_c = (_b = this.chatClientService.chatClient) === null || _b === void 0 ? void 0 : _b.logger) === null || _c === void 0 ? void 0 : _c.call(_b, 'info', `Received new message`, { tags: `message list ${this.mode}` });
+            ((_c = this.latestMessage.created_at) === null || _c === void 0 ? void 0 : _c.getTime()) < message.created_at.getTime() ||
+            (this.mode === 'main' &&
+                latestMessages &&
+                this.latestMessage &&
+                ((_d = latestMessages[latestMessages.length - 1]) === null || _d === void 0 ? void 0 : _d.id) !== this.latestMessage.id)) {
+            (_f = (_e = this.chatClientService.chatClient) === null || _e === void 0 ? void 0 : _e.logger) === null || _f === void 0 ? void 0 : _f.call(_e, 'info', `Received new message`, { tags: `message list ${this.mode}` });
             const isNewChannel = !this.latestMessage;
             this.latestMessage = message;
             this.hasNewMessages = true;
             this.isNewMessageSentByUser =
-                ((_d = message.user) === null || _d === void 0 ? void 0 : _d.id) === ((_f = (_e = this.chatClientService.chatClient) === null || _e === void 0 ? void 0 : _e.user) === null || _f === void 0 ? void 0 : _f.id);
+                ((_g = message.user) === null || _g === void 0 ? void 0 : _g.id) === ((_j = (_h = this.chatClientService.chatClient) === null || _h === void 0 ? void 0 : _h.user) === null || _j === void 0 ? void 0 : _j.id);
             if (this.isUserScrolled) {
                 this.newMessageCountWhileBeingScrolled++;
             }
@@ -6647,7 +6789,9 @@ StreamChatModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         TextareaDirective,
         ThreadComponent,
         IconPlaceholderComponent,
-        LoadingIndicatorPlaceholderComponent], imports: [CommonModule,
+        LoadingIndicatorPlaceholderComponent,
+        EditMessageFormComponent,
+        MessageBouncePromptComponent], imports: [CommonModule,
         TranslateModule,
         StreamAvatarModule,
         NgxPopperjsModule], exports: [ChannelComponent,
@@ -6669,7 +6813,9 @@ StreamChatModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         StreamAvatarModule,
         ThreadComponent,
         IconPlaceholderComponent,
-        LoadingIndicatorPlaceholderComponent] });
+        LoadingIndicatorPlaceholderComponent,
+        EditMessageFormComponent,
+        MessageBouncePromptComponent] });
 StreamChatModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: StreamChatModule, imports: [[
             CommonModule,
             TranslateModule,
@@ -6700,6 +6846,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
                         ThreadComponent,
                         IconPlaceholderComponent,
                         LoadingIndicatorPlaceholderComponent,
+                        EditMessageFormComponent,
+                        MessageBouncePromptComponent,
                     ],
                     imports: [
                         CommonModule,
@@ -6728,6 +6876,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
                         ThreadComponent,
                         IconPlaceholderComponent,
                         LoadingIndicatorPlaceholderComponent,
+                        EditMessageFormComponent,
+                        MessageBouncePromptComponent,
                     ],
                 }]
         }] });
@@ -6790,5 +6940,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AttachmentConfigurationService, AttachmentListComponent, AttachmentPreviewListComponent, AttachmentService, AutocompleteTextareaComponent, AvatarComponent, AvatarPlaceholderComponent, ChannelComponent, ChannelHeaderComponent, ChannelListComponent, ChannelListToggleService, ChannelPreviewComponent, ChannelService, ChatClientService, CustomTemplatesService, DateParserService, EmojiInputService, IconComponent, IconPlaceholderComponent, ImageLoadService, LoadingIndicatorComponent, LoadingIndicatorPlaceholderComponent, MessageActionsBoxComponent, MessageActionsService, MessageComponent, MessageInputComponent, MessageInputConfigService, MessageListComponent, MessageReactionsComponent, MessageReactionsService, MessageService, ModalComponent, NotificationComponent, NotificationListComponent, NotificationService, StreamAutocompleteTextareaModule, StreamAvatarModule, StreamChatModule, StreamI18nService, StreamTextareaModule, TextareaComponent, TextareaDirective, ThemeService, ThreadComponent, TransliterationService, createMessagePreview, getChannelDisplayText, getGroupStyles, getMessageTranslation, getReadBy, isImageAttachment, isImageFile, listUsers, parseDate, textareaInjectionToken };
+export { AttachmentConfigurationService, AttachmentListComponent, AttachmentPreviewListComponent, AttachmentService, AutocompleteTextareaComponent, AvatarComponent, AvatarPlaceholderComponent, ChannelComponent, ChannelHeaderComponent, ChannelListComponent, ChannelListToggleService, ChannelPreviewComponent, ChannelService, ChatClientService, CustomTemplatesService, DateParserService, EditMessageFormComponent, EmojiInputService, IconComponent, IconPlaceholderComponent, ImageLoadService, LoadingIndicatorComponent, LoadingIndicatorPlaceholderComponent, MessageActionsBoxComponent, MessageActionsService, MessageBouncePromptComponent, MessageComponent, MessageInputComponent, MessageInputConfigService, MessageListComponent, MessageReactionsComponent, MessageReactionsService, MessageService, ModalComponent, NotificationComponent, NotificationListComponent, NotificationService, StreamAutocompleteTextareaModule, StreamAvatarModule, StreamChatModule, StreamI18nService, StreamTextareaModule, TextareaComponent, TextareaDirective, ThemeService, ThreadComponent, TransliterationService, createMessagePreview, getChannelDisplayText, getGroupStyles, getMessageTranslation, getReadBy, isImageAttachment, isImageFile, listUsers, parseDate, textareaInjectionToken };
 //# sourceMappingURL=stream-chat-angular.js.map