stream-chat-angular 5.13.0 → 5.14.0

package/fesm2020/stream-chat-angular.mjs

@@ -20,7 +20,7 @@ import transliterate from '@stream-io/transliterate';
 import * as i8$1 from 'angular-mentions';
 import { MentionModule } from 'angular-mentions';
 
-const version = '5.13.0';
+const version = '5.14.0';
 
 /**
  * The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](/chat/docs/sdk/angular/components/NotificationListComponent/) component displays the currently active notifications.
@@ -2852,6 +2852,7 @@ const en = {
         "You can't uplod more than {{max}} attachments": "You can't uplod more than {{max}} attachments",
         'You currently have {{count}} attachments, the maximum is {{max}}': 'You currently have {{count}} attachments, the maximum is {{max}}',
         'and others': 'and others',
+        'Message was blocked by moderation policies': 'Message was blocked by moderation policies',
     },
 };
 
@@ -3116,7 +3117,7 @@ class CustomTemplatesService {
          */
         this.messageActionsBoxTemplate$ = new BehaviorSubject(undefined);
         /**
-         * The template used for displaying an item in the [message actions box](/chat/docs/sdk/angular/components/MessageActionsBoxComponent/)
+         * The template used for displaying an item in the [message actions box](/chat/docs/angular/components/MessageActionsBoxComponent/)
          *
          */
         this.messageActionsBoxItemTemplate$ = new BehaviorSubject(undefined);
@@ -3268,6 +3269,12 @@ class CustomTemplatesService {
          * Template to display the text content inside the [message component](/chat/docs/sdk/angular/components/MessageComponent/). The default component is [stream-message-text](/chat/docs/sdk/angular/components/MessageTextComponent/)
          */
         this.messageTextTemplate$ = new BehaviorSubject(undefined);
+        /**
+         * The template used to display blocked messages that have been removed by moderation policies instead of the default [message blocked component](/chat/docs/sdk/angular/components/MessageBlockedComponent/)
+         *
+         * The template has no effect if you're using a custom `messageTemplate$`
+         */
+        this.messageBlockedTemplate$ = new BehaviorSubject(undefined);
     }
 }
 CustomTemplatesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CustomTemplatesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -5298,6 +5305,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }] } });
 
+/**
+ * The `MessageBlocked` component displays a message that has been blocked by moderation policies.
+ */
+class MessageBlockedComponent {
+    constructor() {
+        this.isMyMessage = false;
+    }
+}
+MessageBlockedComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageBlockedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MessageBlockedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MessageBlockedComponent, selector: "stream-message-blocked", inputs: { message: "message", isMyMessage: "isMyMessage" }, ngImport: i0, template: "<div\n  class=\"str-chat__message str-chat__message-simple str-chat__message--blocked\"\n  [class.str-chat__message--me]=\"isMyMessage\"\n  [class.str-chat__message-simple--me]=\"isMyMessage\"\n  [class.str-chat__message--other]=\"!isMyMessage\"\n  [attr.data-testid]=\"'message-blocked-component'\"\n>\n  <div class=\"str-chat__message--blocked-inner\">\n    {{ \"streamChat.Message was blocked by moderation policies\" | translate }}\n  </div>\n</div>\n", dependencies: [{ kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageBlockedComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'stream-message-blocked', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"str-chat__message str-chat__message-simple str-chat__message--blocked\"\n  [class.str-chat__message--me]=\"isMyMessage\"\n  [class.str-chat__message-simple--me]=\"isMyMessage\"\n  [class.str-chat__message--other]=\"!isMyMessage\"\n  [attr.data-testid]=\"'message-blocked-component'\"\n>\n  <div class=\"str-chat__message--blocked-inner\">\n    {{ \"streamChat.Message was blocked by moderation policies\" | translate }}\n  </div>\n</div>\n" }]
+        }], propDecorators: { message: [{
+                type: Input
+            }], isMyMessage: [{
+                type: Input
+            }] } });
+
 /**
  * The `Message` component displays a message with additional information such as sender and date, and enables [interaction with the message (i.e. edit or react)](/chat/docs/sdk/angular/concepts/message-interactions/).
  */
@@ -5486,12 +5512,7 @@ class MessageComponent {
             });
         }
         this.subscriptions.push(this.messageActionsService.messageMenuOpenedFor$.subscribe((id) => {
-            if (this.message && this.message.id === id) {
-                if (!this.areMessageOptionsOpen) {
-                    this.messageMenuTrigger?.show();
-                }
-            }
-            else if ((id === undefined || this.message?.id !== id) &&
+            if ((id === undefined || this.message?.id !== id) &&
                 this.areMessageOptionsOpen) {
                 this.messageMenuTrigger?.hide();
             }
@@ -5649,8 +5670,12 @@ class MessageComponent {
         };
     }
     getMessageMetadataContext() {
+        return { message: this.message };
+    }
+    getMessageBlockedContext() {
         return {
             message: this.message,
+            isMyMessage: this.isSentByCurrentUser,
         };
     }
     jumpToMessage(messageId, parentMessageId) {
@@ -5734,10 +5759,10 @@ class MessageComponent {
     }
 }
 MessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageComponent, deps: [{ token: ChatClientService }, { token: ChannelService }, { token: CustomTemplatesService }, { token: i0.ChangeDetectorRef }, { token: DateParserService }, { token: MessageActionsService }, { token: i0.NgZone }, { token: i6.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-MessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MessageComponent, selector: "stream-message", inputs: { message: "message", enabledMessageActions: "enabledMessageActions", isLastSentMessage: "isLastSentMessage", mode: "mode", isHighlighted: "isHighlighted", scroll$: "scroll$" }, viewQueries: [{ propertyName: "messageMenuTrigger", first: true, predicate: ["messageMenuTrigger"], descendants: true }, { propertyName: "messageMenuFloat", first: true, predicate: ["messageMenuFloat"], descendants: true }, { propertyName: "messageTextElement", first: true, predicate: ["messageTextElement"], descendants: true }, { propertyName: "messageBubble", first: true, predicate: ["messageBubble"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  data-testid=\"message-container\"\n  class=\"str-chat__message-simple str-chat__message str-chat__message--{{\n    message?.type\n  }} str-chat__message--{{ message?.status }} {{\n    message?.text ? 'str-chat__message--has-text' : 'has-no-text'\n  }} str-chat__message-menu-{{ areMessageOptionsOpen ? 'opened' : 'closed' }}\"\n  [class.str-chat__message--me]=\"isSentByCurrentUser\"\n  [class.str-chat__message--other]=\"!isSentByCurrentUser\"\n  [class.str-chat__message-simple--me]=\"isSentByCurrentUser\"\n  [class.str-chat__message--has-attachment]=\"hasAttachment\"\n  [class.str-chat__message--with-reactions]=\"hasReactions\"\n  [class.str-chat__message--highlighted]=\"isHighlighted\"\n  [class.str-chat__message-with-thread-link]=\"shouldDisplayThreadLink\"\n  [class.str-chat__message-send-can-be-retried]=\"\n    (message?.status === 'failed' && message?.errorStatusCode !== 403) ||\n    (message?.type === 'error' && message?.moderation_details)\n  \"\n  [class.str-chat__message-with-touch-support]=\"hasTouchSupport\"\n  [class.str-chat__message-without-touch-support]=\"!hasTouchSupport\"\n>\n  <ng-container *ngIf=\"!message?.deleted_at; else deletedMessage\">\n    <ng-container *ngIf=\"message?.type !== 'system'; else systemMessage\">\n      <stream-avatar-placeholder\n        data-testid=\"avatar\"\n        class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n        type=\"user\"\n        location=\"message-sender\"\n        [imageUrl]=\"message?.user?.image\"\n        [name]=\"message?.user?.name || message?.user?.id\"\n        [user]=\"message?.user || undefined\"\n      ></stream-avatar-placeholder>\n      <div class=\"str-chat__message-inner\">\n        <div\n          *ngIf=\"!hasTouchSupport && areOptionsVisible\"\n          class=\"str-chat__message-simple__actions str-chat__message-options\"\n          data-testid=\"message-options\"\n          [class.str-chat__message-actions-open]=\"areMessageOptionsOpen\"\n        >\n          <div\n            #messageActionsToggle\n            data-testid=\"message-actions-container\"\n            class=\"str-chat__message-actions-container str-chat__message-simple__actions__action str-chat__message-simple__actions__action--options\"\n            [floatUiLoose]=\"messageMenuFloat\"\n            [looseTrigger]=\"\n              messageActionsService.customActionClickHandler ? 'none' : 'click'\n            \"\n            [hideOnScroll]=\"false\"\n            [hideOnClickOutside]=\"true\"\n            [hideOnMouseLeave]=\"false\"\n            [disableAnimation]=\"false\"\n            [preventOverflow]=\"true\"\n            [positionFixed]=\"true\"\n            (onSHown)=\"areMessageOptionsOpen = true\"\n            (onHidden)=\"areMessageOptionsOpen = false\"\n          >\n            <div\n              *ngIf=\"visibleMessageActionsCount > 0\"\n              class=\"str-chat__message-actions-box-button\"\n              data-testid=\"message-options-button\"\n              (click)=\"messageOptionsButtonClicked()\"\n              (keyup.enter)=\"messageOptionsButtonClicked()\"\n            >\n              <stream-icon-placeholder\n                icon=\"action\"\n                class=\"str-chat__message-action-icon\"\n              ></stream-icon-placeholder>\n            </div>\n          </div>\n        </div>\n        <ng-container\n          *ngIf=\"\n            customTemplatesService.customMessageMetadataInsideBubbleTemplate$\n              | async\n          \"\n        >\n          <ng-template\n            *ngTemplateOutlet=\"\n              (customTemplatesService.customMessageMetadataInsideBubbleTemplate$\n                | async)!;\n              context: { message: message }\n            \"\n          ></ng-template>\n        </ng-container>\n        <div class=\"str-chat__message-reactions-host\">\n          <ng-template\n            #defaultMessageReactions\n            let-messageReactionCounts=\"messageReactionCounts\"\n            let-latestReactions=\"latestReactions\"\n            let-messageId=\"messageId\"\n            let-ownReactions=\"ownReactions\"\n            let-messageReactionGroups=\"messageReactionGroups\"\n          >\n            <stream-message-reactions\n              [messageReactionCounts]=\"messageReactionCounts\"\n              [latestReactions]=\"latestReactions\"\n              [messageId]=\"messageId\"\n              [ownReactions]=\"ownReactions\"\n              [messageReactionGroups]=\"messageReactionGroups\"\n            ></stream-message-reactions>\n          </ng-template>\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.messageReactionsTemplate$ | async) ||\n                defaultMessageReactions;\n              context: getMessageReactionsContext()\n            \"\n          ></ng-container>\n        </div>\n        <float-ui-content #messageMenuFloat>\n          <ng-template\n            #defaultMessageActionsBox\n            let-isMine=\"isMine\"\n            let-messageInput=\"message\"\n            let-enabledActions=\"enabledActions\"\n            let-messageTextHtmlElement=\"messageTextHtmlElement\"\n          >\n            <stream-message-actions-box\n              [isMine]=\"isMine\"\n              [message]=\"messageInput\"\n              [enabledActions]=\"enabledActions\"\n              [messageTextHtmlElement]=\"messageTextHtmlElement\"\n            ></stream-message-actions-box>\n          </ng-template>\n          <ng-container>\n            <div\n              (click)=\"messageActionsBoxClicked(messageMenuFloat)\"\n              (keyup.enter)=\"messageActionsBoxClicked(messageMenuFloat)\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  (customTemplatesService.messageActionsBoxTemplate$ | async) ||\n                    defaultMessageActionsBox;\n                  context: getMessageActionsBoxContext()\n                \"\n              >\n              </ng-container>\n            </div>\n          </ng-container>\n        </float-ui-content>\n        <div\n          class=\"str-chat__message-bubble str-chat-angular__message-bubble\"\n          [class.str-chat-angular__message-bubble--attachment-modal-open]=\"\n            imageAttachmentModalState === 'opened'\n          \"\n          data-testid=\"message-bubble\"\n          [floatUiLoose]=\"messageMenuFloat\"\n          #messageMenuTrigger=\"floatUiLoose\"\n          #messageBubble\n          looseTrigger=\"none\"\n          [hideOnScroll]=\"false\"\n          [hideOnClickOutside]=\"true\"\n          [hideOnMouseLeave]=\"false\"\n          [disableAnimation]=\"true\"\n          [preventOverflow]=\"true\"\n          (onShown)=\"areMessageOptionsOpen = true\"\n          (onHidden)=\"areMessageOptionsOpen = false\"\n          [positionFixed]=\"true\"\n        >\n          <ng-container *ngIf=\"hasAttachment && !message?.quoted_message\">\n            <div class=\"str-chat__attachments-container\">\n              <ng-container\n                *ngTemplateOutlet=\"attachmentsTemplate\"\n              ></ng-container>\n            </div>\n          </ng-container>\n          <div\n            *ngIf=\"message?.text || (message?.quoted_message && hasAttachment)\"\n            class=\"str-chat__message-text\"\n            tabindex=\"0\"\n            [class.str-chat__message-text--pointer-cursor]=\"\n              (message?.status === 'failed' &&\n                message?.errorStatusCode !== 403) ||\n              (this.message?.type === 'error' &&\n                this.message?.moderation_details) ||\n              message?.message_text_updated_at\n            \"\n            (click)=\"messageClicked()\"\n            (keyup.enter)=\"messageClicked()\"\n          >\n            <div\n              data-testid=\"inner-message\"\n              class=\"str-chat__message-text-inner str-chat__message-simple-text-inner\"\n              [class.str-chat__message-light-text-inner--has-attachment]=\"\n                hasAttachment\n              \"\n            >\n              <ng-container *ngTemplateOutlet=\"quotedMessage\"></ng-container>\n              <ng-container *ngIf=\"hasAttachment && message?.quoted_message\">\n                <ng-container\n                  *ngTemplateOutlet=\"attachmentsTemplate\"\n                ></ng-container>\n              </ng-container>\n              <div\n                *ngIf=\"message?.type === 'error'\"\n                data-testid=\"client-error-message\"\n                class=\"str-chat__simple-message--error-message str-chat__message--error-message\"\n              >\n                <ng-container *ngIf=\"!message?.moderation_details\">{{\n                  \"streamChat.Error \u00B7 Unsent\" | translate\n                }}</ng-container>\n              </div>\n              <div\n                *ngIf=\"message?.status === 'failed'\"\n                data-testid=\"error-message\"\n                class=\"str-chat__simple-message--error-message str-chat__message--error-message\"\n              >\n                {{\n                  (message?.errorStatusCode === 403\n                    ? \"streamChat.Message Failed \u00B7 Unauthorized\"\n                    : \"streamChat.Message Failed \u00B7 Click to try again\"\n                  ) | translate\n                }}\n              </div>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  (customTemplatesService.messageTextTemplate$ | async) ||\n                    defaultText;\n                  context: getMessageTextContext()\n                \"\n              ></ng-container>\n              <ng-template\n                #defaultText\n                let-message=\"message\"\n                let-isQuoted=\"isQuoted\"\n                let-shouldTranslate=\"shouldTranslate\"\n              >\n                <stream-message-text\n                  [message]=\"message\"\n                  [isQuoted]=\"isQuoted\"\n                  [shouldTranslate]=\"shouldTranslate\"\n                  data-testid=\"quoted-message-text\"\n                ></stream-message-text>\n              </ng-template>\n            </div>\n          </div>\n          <stream-icon-placeholder\n            class=\"str-chat__message-error-icon\"\n            icon=\"error\"\n          ></stream-icon-placeholder>\n        </div>\n      </div>\n      <ng-container\n        *ngTemplateOutlet=\"replyCountButton; context: { message: message }\"\n      ></ng-container>\n\n      <ng-container *ngTemplateOutlet=\"messageDateAndSender\"></ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n\n<ng-template #deletedMessage>\n  <div data-testid=\"message-deleted-component\">\n    <div class=\"str-chat__message--deleted-inner\" translate>\n      streamChat.This message was deleted...\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #systemMessage>\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.systemMessageTemplate$ | async) ||\n        defaultSystemMessage;\n      context: getMessageContext()\n    \"\n  ></ng-container>\n  <ng-template #defaultSystemMessage let-messageInput=\"message\">\n    <div data-testid=\"system-message\" class=\"str-chat__message--system\">\n      <div class=\"str-chat__message--system__text\">\n        <div class=\"str-chat__message--system__line\"></div>\n        <p>{{ messageInput?.text }}</p>\n        <div class=\"str-chat__message--system__line\"></div>\n      </div>\n      <div class=\"str-chat__message--system__date\">\n        {{ parsedDate }}\n      </div>\n    </div>\n  </ng-template>\n</ng-template>\n\n<ng-template #quotedMessage>\n  <div\n    *ngIf=\"message?.quoted_message\"\n    class=\"quoted-message str-chat__quoted-message-preview\"\n    data-testid=\"quoted-message-container\"\n    [class.mine]=\"isSentByCurrentUser\"\n    (click)=\"\n      jumpToMessage(\n        (message?.quoted_message)!.id,\n        message?.quoted_message?.parent_id\n      )\n    \"\n    (keyup.enter)=\"\n      jumpToMessage(\n        (message?.quoted_message)!.id,\n        message?.quoted_message?.parent_id\n      )\n    \"\n  >\n    <stream-avatar-placeholder\n      data-testid=\"qouted-message-avatar\"\n      class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n      type=\"user\"\n      location=\"quoted-message-sender\"\n      [imageUrl]=\"message?.quoted_message?.user?.image\"\n      [name]=\"\n        message?.quoted_message?.user?.name || message?.quoted_message?.user?.id\n      \"\n      [user]=\"message?.quoted_message?.user || undefined\"\n    ></stream-avatar-placeholder>\n    <div class=\"quoted-message-inner str-chat__quoted-message-bubble\">\n      <ng-container\n        *ngIf=\"\n          message?.quoted_message?.attachments &&\n          message?.quoted_message?.attachments?.length\n        \"\n      >\n        <ng-template\n          #defaultAttachments\n          let-messageId=\"messageId\"\n          let-attachments=\"attachments\"\n          let-parentMessageId=\"parentMessageId\"\n          let-imageModalStateChangeHandler=\"imageModalStateChangeHandler\"\n        >\n          <stream-attachment-list\n            [messageId]=\"messageId\"\n            [attachments]=\"attachments\"\n            [parentMessageId]=\"parentMessageId\"\n            (imageModalStateChange)=\"imageModalStateChangeHandler($event)\"\n          ></stream-attachment-list>\n        </ng-template>\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.attachmentListTemplate$ | async) ||\n              defaultAttachments;\n            context: getQuotedMessageAttachmentListContext()\n          \"\n        ></ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"message?.quoted_message\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.messageTextTemplate$ | async) ||\n              defaultText;\n            context: getQuotedMessageTextContext()\n          \"\n        ></ng-container>\n        <ng-template\n          #defaultText\n          let-message=\"message\"\n          let-isQuoted=\"isQuoted\"\n          let-shouldTranslate=\"shouldTranslate\"\n        >\n          <stream-message-text\n            [message]=\"message\"\n            [isQuoted]=\"isQuoted\"\n            [shouldTranslate]=\"shouldTranslate\"\n            data-testid=\"quoted-message-text\"\n          ></stream-message-text>\n        </ng-template>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #messageDateAndSender>\n  <ng-container>\n    <div\n      *ngIf=\"shouldDisplayTranslationNotice\"\n      class=\"str-chat__translation-notice\"\n      data-testid=\"translation-notice\"\n    >\n      <button\n        *ngIf=\"displayedMessageTextContent === 'translation'\"\n        data-testid=\"see-original\"\n        translate\n        (click)=\"displayOriginalMessage()\"\n        (keyup.enter)=\"displayOriginalMessage()\"\n      >\n        streamChat.See original (automatically translated)\n      </button>\n      <button\n        *ngIf=\"displayedMessageTextContent === 'original'\"\n        data-testid=\"see-translation\"\n        translate\n        (click)=\"displayTranslatedMessage()\"\n        (keyup.enter)=\"displayTranslatedMessage()\"\n      >\n        streamChat.See translation\n      </button>\n    </div>\n    <ng-container\n      *ngIf=\"customTemplatesService.customMessageMetadataTemplate$ | async\"\n    >\n      <div class=\"str-chat__custom-message-metadata\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.customMessageMetadataTemplate$ | async)!;\n            context: getMessageMetadataContext()\n          \"\n        ></ng-container>\n      </div>\n    </ng-container>\n    <div\n      class=\"str-chat__message-data str-chat__message-simple-data str-chat__message-metadata\"\n    >\n      <ng-container *ngTemplateOutlet=\"messageStatus\"></ng-container>\n\n      <span\n        *ngIf=\"!isSentByCurrentUser\"\n        data-testid=\"sender\"\n        class=\"str-chat__message-simple-name str-chat__message-sender-name\"\n      >\n        {{ message?.user?.name ? message?.user?.name : message?.user?.id }}\n      </span>\n      <span\n        data-testid=\"date\"\n        class=\"str-chat__message-simple-timestamp str-chat__message-simple-time\"\n      >\n        {{ parsedDate }}\n      </span>\n      <ng-container *ngIf=\"message?.message_text_updated_at\">\n        <span\n          data-testid=\"edited-flag\"\n          class=\"str-chat__mesage-simple-edited\"\n          translate\n          >streamChat.Edited</span\n        >\n        <div\n          data-testid=\"edited-timestamp\"\n          class=\"str-chat__message-edited-timestamp\"\n          [ngClass]=\"{\n            'str-chat__message-edited-timestamp--open': isEditedFlagOpened,\n            'str-chat__message-edited-timestamp--collapsed': !isEditedFlagOpened\n          }\"\n        >\n          <span translate>streamChat.Edited</span>\n          <time\n            dateTime=\"{{ message?.message_text_updated_at }}\"\n            title=\"{{ message?.message_text_updated_at }}\"\n          >\n            {{ pasedEditedDate }}\n          </time>\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #messageStatus>\n  <ng-container\n    *ngIf=\"\n      isSentByCurrentUser &&\n      ((isLastSentMessage && message?.status === 'received') ||\n        message?.status === 'sending')\n    \"\n  >\n    <ng-container *ngIf=\"message?.status === 'sending'; else sentStatus\">\n      <ng-container *ngTemplateOutlet=\"sendingStatus\"></ng-container>\n    </ng-container>\n    <ng-template #sentStatus>\n      <ng-container\n        *ngIf=\"\n          mode === 'main' && isMessageDeliveredAndRead && canDisplayReadStatus;\n          else deliveredStatus\n        \"\n      >\n        <ng-container *ngTemplateOutlet=\"readStatus\"></ng-container>\n      </ng-container>\n    </ng-template>\n    <ng-template #deliveredStatus>\n      <ng-container\n        *ngTemplateOutlet=\"\n          (customTemplatesService.deliveredStatusTemplate$ | async) ||\n            defaultDeliveredStatus;\n          context: getDeliveredStatusContext()\n        \"\n      ></ng-container>\n    </ng-template>\n    <ng-template #defaultDeliveredStatus>\n      <span\n        *ngIf=\"mode === 'main'\"\n        class=\"str-chat__message-simple-status str-chat__message-simple-status-angular str-chat__message-status\"\n        data-testid=\"delivered-indicator\"\n        tabindex=\"0\"\n        [floatUiLoose]=\"floatingContent\"\n        loosePlacement=\"top\"\n        [looseTrigger]=\"hasTouchSupport ? 'click' : 'hover'\"\n        [disableAnimation]=\"true\"\n        [hideOnClickOutside]=\"true\"\n        [positionFixed]=\"true\"\n        [preventOverflow]=\"true\"\n      >\n        <float-ui-content #floatingContent>\n          <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n            {{ \"streamChat.Delivered\" | translate }}\n          </div>\n        </float-ui-content>\n        <stream-icon-placeholder\n          data-testid=\"delivered-icon\"\n          icon=\"delivered\"\n        ></stream-icon-placeholder>\n      </span>\n    </ng-template>\n    <ng-template #sendingStatus>\n      <ng-container\n        *ngTemplateOutlet=\"\n          (customTemplatesService.sendingStatusTemplate$ | async) ||\n            defaultSendingStatus;\n          context: getSendingStatusContext()\n        \"\n      ></ng-container>\n    </ng-template>\n    <ng-template #defaultSendingStatus>\n      <span\n        class=\"str-chat__message-simple-status str-chat__message-simple-status-angular str-chat__message-status\"\n        data-testid=\"sending-indicator\"\n        tabindex=\"0\"\n        [floatUiLoose]=\"floatingContent\"\n        loosePlacement=\"top\"\n        [looseTrigger]=\"hasTouchSupport ? 'click' : 'hover'\"\n        [disableAnimation]=\"true\"\n        [hideOnClickOutside]=\"true\"\n        [positionFixed]=\"true\"\n        [preventOverflow]=\"true\"\n      >\n        <float-ui-content #floatingContent>\n          <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n            {{ \"streamChat.Sending...\" | translate }}\n          </div>\n        </float-ui-content>\n        <stream-loading-indicator-placeholder\n          data-testid=\"loading-indicator\"\n        ></stream-loading-indicator-placeholder>\n      </span>\n    </ng-template>\n    <ng-template #readStatus>\n      <ng-container\n        *ngTemplateOutlet=\"\n          (customTemplatesService.readStatusTemplate$ | async) ||\n            defaultReadStatus;\n          context: getReadStatusContext()\n        \"\n      ></ng-container>\n    </ng-template>\n    <ng-template #defaultReadStatus let-readByText=\"readByText\">\n      <span\n        class=\"str-chat__message-simple-status str-chat__message-simple-status-angular str-chat__message-status\"\n        data-testid=\"read-indicator\"\n        tabindex=\"0\"\n        [floatUiLoose]=\"floatingContent\"\n        loosePlacement=\"top\"\n        [looseTrigger]=\"hasTouchSupport ? 'click' : 'hover'\"\n        [disableAnimation]=\"true\"\n        [hideOnClickOutside]=\"true\"\n        [positionFixed]=\"true\"\n        [preventOverflow]=\"true\"\n      >\n        <float-ui-content #floatingContent>\n          <div\n            class=\"str-chat__tooltip str-chat__tooltip-angular\"\n            data-testid=\"read-by-tooltip\"\n          >\n            {{ readByText }}\n          </div>\n        </float-ui-content>\n        <stream-icon-placeholder icon=\"read\"></stream-icon-placeholder>\n      </span>\n    </ng-template>\n  </ng-container>\n</ng-template>\n\n<ng-template #replyCountButton>\n  <div\n    class=\"str-chat__message-simple-reply-button str-chat__message-replies-count-button-wrapper\"\n  >\n    <ng-container *ngIf=\"shouldDisplayThreadLink\">\n      <ng-template\n        *ngTemplateOutlet=\"\n          (customTemplatesService.threadLinkButton$ | async) || defaultButton;\n          context: { message: message }\n        \"\n      ></ng-template>\n    </ng-container>\n    <ng-template #defaultButton let-message=\"message\">\n      <button\n        class=\"str-chat__message-replies-count-button\"\n        data-testid=\"reply-count-button\"\n        (click)=\"setAsActiveParentMessage()\"\n      >\n        {{message?.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}\n        replies' | translate:replyCountParam)}}\n      </button>\n    </ng-template>\n  </div>\n</ng-template>\n\n<ng-template #attachmentsTemplate>\n  <ng-template\n    #defaultAttachments\n    let-messageId=\"messageId\"\n    let-attachments=\"attachments\"\n    let-parentMessageId=\"parentMessageId\"\n    let-imageModalStateChangeHandler=\"imageModalStateChangeHandler\"\n  >\n    <stream-attachment-list\n      [messageId]=\"messageId\"\n      [attachments]=\"attachments\"\n      [parentMessageId]=\"parentMessageId\"\n      (imageModalStateChange)=\"imageModalStateChangeHandler($event)\"\n    ></stream-attachment-list>\n  </ng-template>\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.attachmentListTemplate$ | async) ||\n        defaultAttachments;\n      context: getAttachmentListContext()\n    \"\n  ></ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i8.NgxFloatUiContentComponent, selector: "float-ui-content", exportAs: ["ngxFloatUiContent"] }, { kind: "directive", type: i8.NgxFloatUiLooseDirective, selector: "[floatUiLoose]", inputs: ["floatUiLoose", "loosePlacement", "looseTrigger"], exportAs: ["floatUiLoose"] }, { kind: "component", type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { kind: "directive", type: i6.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "component", type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder" }, { kind: "component", type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: ["isMine", "message", "messageTextHtmlElement", "enabledActions"] }, { kind: "component", type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "parentMessageId", "attachments"], outputs: ["imageModalStateChange"] }, { kind: "component", type: MessageReactionsComponent, selector: "stream-message-reactions", inputs: ["messageId", "messageReactionGroups", "messageReactionCounts", "latestReactions", "ownReactions"] }, { kind: "component", type: MessageTextComponent, selector: "stream-message-text", inputs: ["message", "isQuoted", "shouldTranslate"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MessageComponent, selector: "stream-message", inputs: { message: "message", enabledMessageActions: "enabledMessageActions", isLastSentMessage: "isLastSentMessage", mode: "mode", isHighlighted: "isHighlighted", scroll$: "scroll$" }, viewQueries: [{ propertyName: "messageMenuTrigger", first: true, predicate: ["messageMenuTrigger"], descendants: true }, { propertyName: "messageMenuFloat", first: true, predicate: ["messageMenuFloat"], descendants: true }, { propertyName: "messageTextElement", first: true, predicate: ["messageTextElement"], descendants: true }, { propertyName: "messageBubble", first: true, predicate: ["messageBubble"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container\n  *ngIf=\"\n    message?.type === 'error' &&\n      (message?.moderation_details?.action ===\n        'MESSAGE_RESPONSE_ACTION_REMOVE' ||\n        message?.moderation?.action === 'remove');\n    else notBlockedMessage\n  \"\n>\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.messageBlockedTemplate$ | async) ||\n        defaultBlockedMessage;\n      context: getMessageBlockedContext()\n    \"\n  ></ng-container>\n  <ng-template #defaultBlockedMessage>\n    <stream-message-blocked\n      [message]=\"message\"\n      [isMyMessage]=\"isSentByCurrentUser\"\n    ></stream-message-blocked>\n  </ng-template>\n</ng-container>\n<ng-template #notBlockedMessage>\n  <div\n    data-testid=\"message-container\"\n    class=\"str-chat__message-simple str-chat__message str-chat__message--{{\n      message?.type\n    }} str-chat__message--{{ message?.status }} {{\n      message?.text ? 'str-chat__message--has-text' : 'has-no-text'\n    }} str-chat__message-menu-{{ areMessageOptionsOpen ? 'opened' : 'closed' }}\"\n    [class.str-chat__message--me]=\"isSentByCurrentUser\"\n    [class.str-chat__message--other]=\"!isSentByCurrentUser\"\n    [class.str-chat__message-simple--me]=\"isSentByCurrentUser\"\n    [class.str-chat__message--has-attachment]=\"hasAttachment\"\n    [class.str-chat__message--with-reactions]=\"hasReactions\"\n    [class.str-chat__message--highlighted]=\"isHighlighted\"\n    [class.str-chat__message-with-thread-link]=\"shouldDisplayThreadLink\"\n    [class.str-chat__message-send-can-be-retried]=\"\n      (message?.status === 'failed' && message?.errorStatusCode !== 403) ||\n      (message?.type === 'error' && message?.moderation_details)\n    \"\n    [class.str-chat__message-with-touch-support]=\"hasTouchSupport\"\n    [class.str-chat__message-without-touch-support]=\"!hasTouchSupport\"\n  >\n    <ng-container *ngIf=\"!message?.deleted_at; else deletedMessage\">\n      <ng-container *ngIf=\"message?.type !== 'system'; else systemMessage\">\n        <stream-avatar-placeholder\n          data-testid=\"avatar\"\n          class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n          type=\"user\"\n          location=\"message-sender\"\n          [imageUrl]=\"message?.user?.image\"\n          [name]=\"message?.user?.name || message?.user?.id\"\n          [user]=\"message?.user || undefined\"\n        ></stream-avatar-placeholder>\n        <div class=\"str-chat__message-inner\">\n          <div\n            *ngIf=\"!hasTouchSupport && areOptionsVisible\"\n            class=\"str-chat__message-simple__actions str-chat__message-options\"\n            data-testid=\"message-options\"\n            [class.str-chat__message-actions-open]=\"areMessageOptionsOpen\"\n          >\n            <div\n              #messageActionsToggle\n              data-testid=\"message-actions-container\"\n              class=\"str-chat__message-actions-container str-chat__message-simple__actions__action str-chat__message-simple__actions__action--options\"\n              [floatUiLoose]=\"messageMenuFloat\"\n              [looseTrigger]=\"\n                messageActionsService.customActionClickHandler\n                  ? 'none'\n                  : 'click'\n              \"\n              [hideOnScroll]=\"false\"\n              [hideOnClickOutside]=\"true\"\n              [hideOnMouseLeave]=\"false\"\n              [disableAnimation]=\"false\"\n              [preventOverflow]=\"true\"\n              [positionFixed]=\"true\"\n              (onSHown)=\"areMessageOptionsOpen = true\"\n              (onHidden)=\"areMessageOptionsOpen = false\"\n            >\n              <div\n                *ngIf=\"visibleMessageActionsCount > 0\"\n                class=\"str-chat__message-actions-box-button\"\n                data-testid=\"message-options-button\"\n                (click)=\"messageOptionsButtonClicked()\"\n                (keyup.enter)=\"messageOptionsButtonClicked()\"\n              >\n                <stream-icon-placeholder\n                  icon=\"action\"\n                  class=\"str-chat__message-action-icon\"\n                ></stream-icon-placeholder>\n              </div>\n            </div>\n          </div>\n          <ng-container\n            *ngIf=\"\n              customTemplatesService.customMessageMetadataInsideBubbleTemplate$\n                | async\n            \"\n          >\n            <ng-template\n              *ngTemplateOutlet=\"\n                (customTemplatesService.customMessageMetadataInsideBubbleTemplate$\n                  | async)!;\n                context: { message: message }\n              \"\n            ></ng-template>\n          </ng-container>\n          <div class=\"str-chat__message-reactions-host\">\n            <ng-template\n              #defaultMessageReactions\n              let-messageReactionCounts=\"messageReactionCounts\"\n              let-latestReactions=\"latestReactions\"\n              let-messageId=\"messageId\"\n              let-ownReactions=\"ownReactions\"\n              let-messageReactionGroups=\"messageReactionGroups\"\n            >\n              <stream-message-reactions\n                [messageReactionCounts]=\"messageReactionCounts\"\n                [latestReactions]=\"latestReactions\"\n                [messageId]=\"messageId\"\n                [ownReactions]=\"ownReactions\"\n                [messageReactionGroups]=\"messageReactionGroups\"\n              ></stream-message-reactions>\n            </ng-template>\n            <ng-container\n              *ngTemplateOutlet=\"\n                (customTemplatesService.messageReactionsTemplate$ | async) ||\n                  defaultMessageReactions;\n                context: getMessageReactionsContext()\n              \"\n            ></ng-container>\n          </div>\n          <float-ui-content #messageMenuFloat>\n            <ng-template\n              #defaultMessageActionsBox\n              let-isMine=\"isMine\"\n              let-messageInput=\"message\"\n              let-enabledActions=\"enabledActions\"\n              let-messageTextHtmlElement=\"messageTextHtmlElement\"\n            >\n              <stream-message-actions-box\n                [isMine]=\"isMine\"\n                [message]=\"messageInput\"\n                [enabledActions]=\"enabledActions\"\n                [messageTextHtmlElement]=\"messageTextHtmlElement\"\n              ></stream-message-actions-box>\n            </ng-template>\n            <ng-container>\n              <div\n                (click)=\"messageActionsBoxClicked(messageMenuFloat)\"\n                (keyup.enter)=\"messageActionsBoxClicked(messageMenuFloat)\"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    (customTemplatesService.messageActionsBoxTemplate$\n                      | async) || defaultMessageActionsBox;\n                    context: getMessageActionsBoxContext()\n                  \"\n                >\n                </ng-container>\n              </div>\n            </ng-container>\n          </float-ui-content>\n          <div\n            class=\"str-chat__message-bubble str-chat-angular__message-bubble\"\n            [class.str-chat-angular__message-bubble--attachment-modal-open]=\"\n              imageAttachmentModalState === 'opened'\n            \"\n            data-testid=\"message-bubble\"\n            [floatUiLoose]=\"messageMenuFloat\"\n            #messageMenuTrigger=\"floatUiLoose\"\n            #messageBubble\n            looseTrigger=\"none\"\n            [hideOnScroll]=\"false\"\n            [hideOnClickOutside]=\"true\"\n            [hideOnMouseLeave]=\"false\"\n            [disableAnimation]=\"true\"\n            [preventOverflow]=\"true\"\n            (onShown)=\"areMessageOptionsOpen = true\"\n            (onHidden)=\"areMessageOptionsOpen = false\"\n            [positionFixed]=\"true\"\n          >\n            <ng-container *ngIf=\"hasAttachment && !message?.quoted_message\">\n              <div class=\"str-chat__attachments-container\">\n                <ng-container\n                  *ngTemplateOutlet=\"attachmentsTemplate\"\n                ></ng-container>\n              </div>\n            </ng-container>\n            <div\n              *ngIf=\"\n                message?.text || (message?.quoted_message && hasAttachment)\n              \"\n              class=\"str-chat__message-text\"\n              tabindex=\"0\"\n              [class.str-chat__message-text--pointer-cursor]=\"\n                (message?.status === 'failed' &&\n                  message?.errorStatusCode !== 403) ||\n                (this.message?.type === 'error' &&\n                  this.message?.moderation_details) ||\n                message?.message_text_updated_at\n              \"\n              (click)=\"messageClicked()\"\n              (keyup.enter)=\"messageClicked()\"\n            >\n              <div\n                data-testid=\"inner-message\"\n                class=\"str-chat__message-text-inner str-chat__message-simple-text-inner\"\n                [class.str-chat__message-light-text-inner--has-attachment]=\"\n                  hasAttachment\n                \"\n              >\n                <ng-container *ngTemplateOutlet=\"quotedMessage\"></ng-container>\n                <ng-container *ngIf=\"hasAttachment && message?.quoted_message\">\n                  <ng-container\n                    *ngTemplateOutlet=\"attachmentsTemplate\"\n                  ></ng-container>\n                </ng-container>\n                <div\n                  *ngIf=\"message?.type === 'error'\"\n                  data-testid=\"client-error-message\"\n                  class=\"str-chat__simple-message--error-message str-chat__message--error-message\"\n                >\n                  <ng-container *ngIf=\"!message?.moderation_details\">{{\n                    \"streamChat.Error \u00B7 Unsent\" | translate\n                  }}</ng-container>\n                </div>\n                <div\n                  *ngIf=\"message?.status === 'failed'\"\n                  data-testid=\"error-message\"\n                  class=\"str-chat__simple-message--error-message str-chat__message--error-message\"\n                >\n                  {{\n                    (message?.errorStatusCode === 403\n                      ? \"streamChat.Message Failed \u00B7 Unauthorized\"\n                      : \"streamChat.Message Failed \u00B7 Click to try again\"\n                    ) | translate\n                  }}\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    (customTemplatesService.messageTextTemplate$ | async) ||\n                      defaultText;\n                    context: getMessageTextContext()\n                  \"\n                ></ng-container>\n                <ng-template\n                  #defaultText\n                  let-message=\"message\"\n                  let-isQuoted=\"isQuoted\"\n                  let-shouldTranslate=\"shouldTranslate\"\n                >\n                  <stream-message-text\n                    [message]=\"message\"\n                    [isQuoted]=\"isQuoted\"\n                    [shouldTranslate]=\"shouldTranslate\"\n                    data-testid=\"quoted-message-text\"\n                  ></stream-message-text>\n                </ng-template>\n              </div>\n            </div>\n            <stream-icon-placeholder\n              class=\"str-chat__message-error-icon\"\n              icon=\"error\"\n            ></stream-icon-placeholder>\n          </div>\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"replyCountButton; context: { message: message }\"\n        ></ng-container>\n\n        <ng-container *ngTemplateOutlet=\"messageDateAndSender\"></ng-container>\n      </ng-container>\n    </ng-container>\n  </div>\n\n  <ng-template #deletedMessage>\n    <div data-testid=\"message-deleted-component\">\n      <div class=\"str-chat__message--deleted-inner\" translate>\n        streamChat.This message was deleted...\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template #systemMessage>\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.systemMessageTemplate$ | async) ||\n          defaultSystemMessage;\n        context: getMessageContext()\n      \"\n    ></ng-container>\n    <ng-template #defaultSystemMessage let-messageInput=\"message\">\n      <div data-testid=\"system-message\" class=\"str-chat__message--system\">\n        <div class=\"str-chat__message--system__text\">\n          <div class=\"str-chat__message--system__line\"></div>\n          <p>{{ messageInput?.text }}</p>\n          <div class=\"str-chat__message--system__line\"></div>\n        </div>\n        <div class=\"str-chat__message--system__date\">\n          {{ parsedDate }}\n        </div>\n      </div>\n    </ng-template>\n  </ng-template>\n\n  <ng-template #quotedMessage>\n    <div\n      *ngIf=\"message?.quoted_message\"\n      class=\"quoted-message str-chat__quoted-message-preview\"\n      data-testid=\"quoted-message-container\"\n      [class.mine]=\"isSentByCurrentUser\"\n      (click)=\"\n        jumpToMessage(\n          (message?.quoted_message)!.id,\n          message?.quoted_message?.parent_id\n        )\n      \"\n      (keyup.enter)=\"\n        jumpToMessage(\n          (message?.quoted_message)!.id,\n          message?.quoted_message?.parent_id\n        )\n      \"\n    >\n      <stream-avatar-placeholder\n        data-testid=\"qouted-message-avatar\"\n        class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n        type=\"user\"\n        location=\"quoted-message-sender\"\n        [imageUrl]=\"message?.quoted_message?.user?.image\"\n        [name]=\"\n          message?.quoted_message?.user?.name ||\n          message?.quoted_message?.user?.id\n        \"\n        [user]=\"message?.quoted_message?.user || undefined\"\n      ></stream-avatar-placeholder>\n      <div class=\"quoted-message-inner str-chat__quoted-message-bubble\">\n        <ng-container\n          *ngIf=\"\n            message?.quoted_message?.attachments &&\n            message?.quoted_message?.attachments?.length\n          \"\n        >\n          <ng-template\n            #defaultAttachments\n            let-messageId=\"messageId\"\n            let-attachments=\"attachments\"\n            let-parentMessageId=\"parentMessageId\"\n            let-imageModalStateChangeHandler=\"imageModalStateChangeHandler\"\n          >\n            <stream-attachment-list\n              [messageId]=\"messageId\"\n              [attachments]=\"attachments\"\n              [parentMessageId]=\"parentMessageId\"\n              (imageModalStateChange)=\"imageModalStateChangeHandler($event)\"\n            ></stream-attachment-list>\n          </ng-template>\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.attachmentListTemplate$ | async) ||\n                defaultAttachments;\n              context: getQuotedMessageAttachmentListContext()\n            \"\n          ></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"message?.quoted_message\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.messageTextTemplate$ | async) ||\n                defaultText;\n              context: getQuotedMessageTextContext()\n            \"\n          ></ng-container>\n          <ng-template\n            #defaultText\n            let-message=\"message\"\n            let-isQuoted=\"isQuoted\"\n            let-shouldTranslate=\"shouldTranslate\"\n          >\n            <stream-message-text\n              [message]=\"message\"\n              [isQuoted]=\"isQuoted\"\n              [shouldTranslate]=\"shouldTranslate\"\n              data-testid=\"quoted-message-text\"\n            ></stream-message-text>\n          </ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template #messageDateAndSender>\n    <ng-container>\n      <div\n        *ngIf=\"shouldDisplayTranslationNotice\"\n        class=\"str-chat__translation-notice\"\n        data-testid=\"translation-notice\"\n      >\n        <button\n          *ngIf=\"displayedMessageTextContent === 'translation'\"\n          data-testid=\"see-original\"\n          translate\n          (click)=\"displayOriginalMessage()\"\n          (keyup.enter)=\"displayOriginalMessage()\"\n        >\n          streamChat.See original (automatically translated)\n        </button>\n        <button\n          *ngIf=\"displayedMessageTextContent === 'original'\"\n          data-testid=\"see-translation\"\n          translate\n          (click)=\"displayTranslatedMessage()\"\n          (keyup.enter)=\"displayTranslatedMessage()\"\n        >\n          streamChat.See translation\n        </button>\n      </div>\n      <ng-container\n        *ngIf=\"customTemplatesService.customMessageMetadataTemplate$ | async\"\n      >\n        <div class=\"str-chat__custom-message-metadata\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.customMessageMetadataTemplate$ | async)!;\n              context: getMessageMetadataContext()\n            \"\n          ></ng-container>\n        </div>\n      </ng-container>\n      <div\n        class=\"str-chat__message-data str-chat__message-simple-data str-chat__message-metadata\"\n      >\n        <ng-container *ngTemplateOutlet=\"messageStatus\"></ng-container>\n\n        <span\n          *ngIf=\"!isSentByCurrentUser\"\n          data-testid=\"sender\"\n          class=\"str-chat__message-simple-name str-chat__message-sender-name\"\n        >\n          {{ message?.user?.name ? message?.user?.name : message?.user?.id }}\n        </span>\n        <span\n          data-testid=\"date\"\n          class=\"str-chat__message-simple-timestamp str-chat__message-simple-time\"\n        >\n          {{ parsedDate }}\n        </span>\n        <ng-container *ngIf=\"message?.message_text_updated_at\">\n          <span\n            data-testid=\"edited-flag\"\n            class=\"str-chat__mesage-simple-edited\"\n            translate\n            >streamChat.Edited</span\n          >\n          <div\n            data-testid=\"edited-timestamp\"\n            class=\"str-chat__message-edited-timestamp\"\n            [ngClass]=\"{\n              'str-chat__message-edited-timestamp--open': isEditedFlagOpened,\n              'str-chat__message-edited-timestamp--collapsed':\n                !isEditedFlagOpened\n            }\"\n          >\n            <span translate>streamChat.Edited</span>\n            <time\n              dateTime=\"{{ message?.message_text_updated_at }}\"\n              title=\"{{ message?.message_text_updated_at }}\"\n            >\n              {{ pasedEditedDate }}\n            </time>\n          </div>\n        </ng-container>\n      </div>\n    </ng-container>\n  </ng-template>\n\n  <ng-template #messageStatus>\n    <ng-container\n      *ngIf=\"\n        isSentByCurrentUser &&\n        ((isLastSentMessage && message?.status === 'received') ||\n          message?.status === 'sending')\n      \"\n    >\n      <ng-container *ngIf=\"message?.status === 'sending'; else sentStatus\">\n        <ng-container *ngTemplateOutlet=\"sendingStatus\"></ng-container>\n      </ng-container>\n      <ng-template #sentStatus>\n        <ng-container\n          *ngIf=\"\n            mode === 'main' &&\n              isMessageDeliveredAndRead &&\n              canDisplayReadStatus;\n            else deliveredStatus\n          \"\n        >\n          <ng-container *ngTemplateOutlet=\"readStatus\"></ng-container>\n        </ng-container>\n      </ng-template>\n      <ng-template #deliveredStatus>\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.deliveredStatusTemplate$ | async) ||\n              defaultDeliveredStatus;\n            context: getDeliveredStatusContext()\n          \"\n        ></ng-container>\n      </ng-template>\n      <ng-template #defaultDeliveredStatus>\n        <span\n          *ngIf=\"mode === 'main'\"\n          class=\"str-chat__message-simple-status str-chat__message-simple-status-angular str-chat__message-status\"\n          data-testid=\"delivered-indicator\"\n          tabindex=\"0\"\n          [floatUiLoose]=\"floatingContent\"\n          loosePlacement=\"top\"\n          [looseTrigger]=\"hasTouchSupport ? 'click' : 'hover'\"\n          [disableAnimation]=\"true\"\n          [hideOnClickOutside]=\"true\"\n          [positionFixed]=\"true\"\n          [preventOverflow]=\"true\"\n        >\n          <float-ui-content #floatingContent>\n            <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n              {{ \"streamChat.Delivered\" | translate }}\n            </div>\n          </float-ui-content>\n          <stream-icon-placeholder\n            data-testid=\"delivered-icon\"\n            icon=\"delivered\"\n          ></stream-icon-placeholder>\n        </span>\n      </ng-template>\n      <ng-template #sendingStatus>\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.sendingStatusTemplate$ | async) ||\n              defaultSendingStatus;\n            context: getSendingStatusContext()\n          \"\n        ></ng-container>\n      </ng-template>\n      <ng-template #defaultSendingStatus>\n        <span\n          class=\"str-chat__message-simple-status str-chat__message-simple-status-angular str-chat__message-status\"\n          data-testid=\"sending-indicator\"\n          tabindex=\"0\"\n          [floatUiLoose]=\"floatingContent\"\n          loosePlacement=\"top\"\n          [looseTrigger]=\"hasTouchSupport ? 'click' : 'hover'\"\n          [disableAnimation]=\"true\"\n          [hideOnClickOutside]=\"true\"\n          [positionFixed]=\"true\"\n          [preventOverflow]=\"true\"\n        >\n          <float-ui-content #floatingContent>\n            <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n              {{ \"streamChat.Sending...\" | translate }}\n            </div>\n          </float-ui-content>\n          <stream-loading-indicator-placeholder\n            data-testid=\"loading-indicator\"\n          ></stream-loading-indicator-placeholder>\n        </span>\n      </ng-template>\n      <ng-template #readStatus>\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.readStatusTemplate$ | async) ||\n              defaultReadStatus;\n            context: getReadStatusContext()\n          \"\n        ></ng-container>\n      </ng-template>\n      <ng-template #defaultReadStatus let-readByText=\"readByText\">\n        <span\n          class=\"str-chat__message-simple-status str-chat__message-simple-status-angular str-chat__message-status\"\n          data-testid=\"read-indicator\"\n          tabindex=\"0\"\n          [floatUiLoose]=\"floatingContent\"\n          loosePlacement=\"top\"\n          [looseTrigger]=\"hasTouchSupport ? 'click' : 'hover'\"\n          [disableAnimation]=\"true\"\n          [hideOnClickOutside]=\"true\"\n          [positionFixed]=\"true\"\n          [preventOverflow]=\"true\"\n        >\n          <float-ui-content #floatingContent>\n            <div\n              class=\"str-chat__tooltip str-chat__tooltip-angular\"\n              data-testid=\"read-by-tooltip\"\n            >\n              {{ readByText }}\n            </div>\n          </float-ui-content>\n          <stream-icon-placeholder icon=\"read\"></stream-icon-placeholder>\n        </span>\n      </ng-template>\n    </ng-container>\n  </ng-template>\n\n  <ng-template #replyCountButton>\n    <div\n      class=\"str-chat__message-simple-reply-button str-chat__message-replies-count-button-wrapper\"\n    >\n      <ng-container *ngIf=\"shouldDisplayThreadLink\">\n        <ng-template\n          *ngTemplateOutlet=\"\n            (customTemplatesService.threadLinkButton$ | async) || defaultButton;\n            context: { message: message }\n          \"\n        ></ng-template>\n      </ng-container>\n      <ng-template #defaultButton let-message=\"message\">\n        <button\n          class=\"str-chat__message-replies-count-button\"\n          data-testid=\"reply-count-button\"\n          (click)=\"setAsActiveParentMessage()\"\n        >\n          {{message?.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}\n          replies' | translate:replyCountParam)}}\n        </button>\n      </ng-template>\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</ng-template>\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i8.NgxFloatUiContentComponent, selector: "float-ui-content", exportAs: ["ngxFloatUiContent"] }, { kind: "directive", type: i8.NgxFloatUiLooseDirective, selector: "[floatUiLoose]", inputs: ["floatUiLoose", "loosePlacement", "looseTrigger"], exportAs: ["floatUiLoose"] }, { kind: "component", type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { kind: "directive", type: i6.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "component", type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder" }, { kind: "component", type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: ["isMine", "message", "messageTextHtmlElement", "enabledActions"] }, { kind: "component", type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "parentMessageId", "attachments"], outputs: ["imageModalStateChange"] }, { kind: "component", type: MessageReactionsComponent, selector: "stream-message-reactions", inputs: ["messageId", "messageReactionGroups", "messageReactionCounts", "latestReactions", "ownReactions"] }, { kind: "component", type: MessageTextComponent, selector: "stream-message-text", inputs: ["message", "isQuoted", "shouldTranslate"] }, { kind: "component", type: MessageBlockedComponent, selector: "stream-message-blocked", inputs: ["message", "isMyMessage"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-message', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  data-testid=\"message-container\"\n  class=\"str-chat__message-simple str-chat__message str-chat__message--{{\n    message?.type\n  }} str-chat__message--{{ message?.status }} {{\n    message?.text ? 'str-chat__message--has-text' : 'has-no-text'\n  }} str-chat__message-menu-{{ areMessageOptionsOpen ? 'opened' : 'closed' }}\"\n  [class.str-chat__message--me]=\"isSentByCurrentUser\"\n  [class.str-chat__message--other]=\"!isSentByCurrentUser\"\n  [class.str-chat__message-simple--me]=\"isSentByCurrentUser\"\n  [class.str-chat__message--has-attachment]=\"hasAttachment\"\n  [class.str-chat__message--with-reactions]=\"hasReactions\"\n  [class.str-chat__message--highlighted]=\"isHighlighted\"\n  [class.str-chat__message-with-thread-link]=\"shouldDisplayThreadLink\"\n  [class.str-chat__message-send-can-be-retried]=\"\n    (message?.status === 'failed' && message?.errorStatusCode !== 403) ||\n    (message?.type === 'error' && message?.moderation_details)\n  \"\n  [class.str-chat__message-with-touch-support]=\"hasTouchSupport\"\n  [class.str-chat__message-without-touch-support]=\"!hasTouchSupport\"\n>\n  <ng-container *ngIf=\"!message?.deleted_at; else deletedMessage\">\n    <ng-container *ngIf=\"message?.type !== 'system'; else systemMessage\">\n      <stream-avatar-placeholder\n        data-testid=\"avatar\"\n        class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n        type=\"user\"\n        location=\"message-sender\"\n        [imageUrl]=\"message?.user?.image\"\n        [name]=\"message?.user?.name || message?.user?.id\"\n        [user]=\"message?.user || undefined\"\n      ></stream-avatar-placeholder>\n      <div class=\"str-chat__message-inner\">\n        <div\n          *ngIf=\"!hasTouchSupport && areOptionsVisible\"\n          class=\"str-chat__message-simple__actions str-chat__message-options\"\n          data-testid=\"message-options\"\n          [class.str-chat__message-actions-open]=\"areMessageOptionsOpen\"\n        >\n          <div\n            #messageActionsToggle\n            data-testid=\"message-actions-container\"\n            class=\"str-chat__message-actions-container str-chat__message-simple__actions__action str-chat__message-simple__actions__action--options\"\n            [floatUiLoose]=\"messageMenuFloat\"\n            [looseTrigger]=\"\n              messageActionsService.customActionClickHandler ? 'none' : 'click'\n            \"\n            [hideOnScroll]=\"false\"\n            [hideOnClickOutside]=\"true\"\n            [hideOnMouseLeave]=\"false\"\n            [disableAnimation]=\"false\"\n            [preventOverflow]=\"true\"\n            [positionFixed]=\"true\"\n            (onSHown)=\"areMessageOptionsOpen = true\"\n            (onHidden)=\"areMessageOptionsOpen = false\"\n          >\n            <div\n              *ngIf=\"visibleMessageActionsCount > 0\"\n              class=\"str-chat__message-actions-box-button\"\n              data-testid=\"message-options-button\"\n              (click)=\"messageOptionsButtonClicked()\"\n              (keyup.enter)=\"messageOptionsButtonClicked()\"\n            >\n              <stream-icon-placeholder\n                icon=\"action\"\n                class=\"str-chat__message-action-icon\"\n              ></stream-icon-placeholder>\n            </div>\n          </div>\n        </div>\n        <ng-container\n          *ngIf=\"\n            customTemplatesService.customMessageMetadataInsideBubbleTemplate$\n              | async\n          \"\n        >\n          <ng-template\n            *ngTemplateOutlet=\"\n              (customTemplatesService.customMessageMetadataInsideBubbleTemplate$\n                | async)!;\n              context: { message: message }\n            \"\n          ></ng-template>\n        </ng-container>\n        <div class=\"str-chat__message-reactions-host\">\n          <ng-template\n            #defaultMessageReactions\n            let-messageReactionCounts=\"messageReactionCounts\"\n            let-latestReactions=\"latestReactions\"\n            let-messageId=\"messageId\"\n            let-ownReactions=\"ownReactions\"\n            let-messageReactionGroups=\"messageReactionGroups\"\n          >\n            <stream-message-reactions\n              [messageReactionCounts]=\"messageReactionCounts\"\n              [latestReactions]=\"latestReactions\"\n              [messageId]=\"messageId\"\n              [ownReactions]=\"ownReactions\"\n              [messageReactionGroups]=\"messageReactionGroups\"\n            ></stream-message-reactions>\n          </ng-template>\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.messageReactionsTemplate$ | async) ||\n                defaultMessageReactions;\n              context: getMessageReactionsContext()\n            \"\n          ></ng-container>\n        </div>\n        <float-ui-content #messageMenuFloat>\n          <ng-template\n            #defaultMessageActionsBox\n            let-isMine=\"isMine\"\n            let-messageInput=\"message\"\n            let-enabledActions=\"enabledActions\"\n            let-messageTextHtmlElement=\"messageTextHtmlElement\"\n          >\n            <stream-message-actions-box\n              [isMine]=\"isMine\"\n              [message]=\"messageInput\"\n              [enabledActions]=\"enabledActions\"\n              [messageTextHtmlElement]=\"messageTextHtmlElement\"\n            ></stream-message-actions-box>\n          </ng-template>\n          <ng-container>\n            <div\n              (click)=\"messageActionsBoxClicked(messageMenuFloat)\"\n              (keyup.enter)=\"messageActionsBoxClicked(messageMenuFloat)\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  (customTemplatesService.messageActionsBoxTemplate$ | async) ||\n                    defaultMessageActionsBox;\n                  context: getMessageActionsBoxContext()\n                \"\n              >\n              </ng-container>\n            </div>\n          </ng-container>\n        </float-ui-content>\n        <div\n          class=\"str-chat__message-bubble str-chat-angular__message-bubble\"\n          [class.str-chat-angular__message-bubble--attachment-modal-open]=\"\n            imageAttachmentModalState === 'opened'\n          \"\n          data-testid=\"message-bubble\"\n          [floatUiLoose]=\"messageMenuFloat\"\n          #messageMenuTrigger=\"floatUiLoose\"\n          #messageBubble\n          looseTrigger=\"none\"\n          [hideOnScroll]=\"false\"\n          [hideOnClickOutside]=\"true\"\n          [hideOnMouseLeave]=\"false\"\n          [disableAnimation]=\"true\"\n          [preventOverflow]=\"true\"\n          (onShown)=\"areMessageOptionsOpen = true\"\n          (onHidden)=\"areMessageOptionsOpen = false\"\n          [positionFixed]=\"true\"\n        >\n          <ng-container *ngIf=\"hasAttachment && !message?.quoted_message\">\n            <div class=\"str-chat__attachments-container\">\n              <ng-container\n                *ngTemplateOutlet=\"attachmentsTemplate\"\n              ></ng-container>\n            </div>\n          </ng-container>\n          <div\n            *ngIf=\"message?.text || (message?.quoted_message && hasAttachment)\"\n            class=\"str-chat__message-text\"\n            tabindex=\"0\"\n            [class.str-chat__message-text--pointer-cursor]=\"\n              (message?.status === 'failed' &&\n                message?.errorStatusCode !== 403) ||\n              (this.message?.type === 'error' &&\n                this.message?.moderation_details) ||\n              message?.message_text_updated_at\n            \"\n            (click)=\"messageClicked()\"\n            (keyup.enter)=\"messageClicked()\"\n          >\n            <div\n              data-testid=\"inner-message\"\n              class=\"str-chat__message-text-inner str-chat__message-simple-text-inner\"\n              [class.str-chat__message-light-text-inner--has-attachment]=\"\n                hasAttachment\n              \"\n            >\n              <ng-container *ngTemplateOutlet=\"quotedMessage\"></ng-container>\n              <ng-container *ngIf=\"hasAttachment && message?.quoted_message\">\n                <ng-container\n                  *ngTemplateOutlet=\"attachmentsTemplate\"\n                ></ng-container>\n              </ng-container>\n              <div\n                *ngIf=\"message?.type === 'error'\"\n                data-testid=\"client-error-message\"\n                class=\"str-chat__simple-message--error-message str-chat__message--error-message\"\n              >\n                <ng-container *ngIf=\"!message?.moderation_details\">{{\n                  \"streamChat.Error \u00B7 Unsent\" | translate\n                }}</ng-container>\n              </div>\n              <div\n                *ngIf=\"message?.status === 'failed'\"\n                data-testid=\"error-message\"\n                class=\"str-chat__simple-message--error-message str-chat__message--error-message\"\n              >\n                {{\n                  (message?.errorStatusCode === 403\n                    ? \"streamChat.Message Failed \u00B7 Unauthorized\"\n                    : \"streamChat.Message Failed \u00B7 Click to try again\"\n                  ) | translate\n                }}\n              </div>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  (customTemplatesService.messageTextTemplate$ | async) ||\n                    defaultText;\n                  context: getMessageTextContext()\n                \"\n              ></ng-container>\n              <ng-template\n                #defaultText\n                let-message=\"message\"\n                let-isQuoted=\"isQuoted\"\n                let-shouldTranslate=\"shouldTranslate\"\n              >\n                <stream-message-text\n                  [message]=\"message\"\n                  [isQuoted]=\"isQuoted\"\n                  [shouldTranslate]=\"shouldTranslate\"\n                  data-testid=\"quoted-message-text\"\n                ></stream-message-text>\n              </ng-template>\n            </div>\n          </div>\n          <stream-icon-placeholder\n            class=\"str-chat__message-error-icon\"\n            icon=\"error\"\n          ></stream-icon-placeholder>\n        </div>\n      </div>\n      <ng-container\n        *ngTemplateOutlet=\"replyCountButton; context: { message: message }\"\n      ></ng-container>\n\n      <ng-container *ngTemplateOutlet=\"messageDateAndSender\"></ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n\n<ng-template #deletedMessage>\n  <div data-testid=\"message-deleted-component\">\n    <div class=\"str-chat__message--deleted-inner\" translate>\n      streamChat.This message was deleted...\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #systemMessage>\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.systemMessageTemplate$ | async) ||\n        defaultSystemMessage;\n      context: getMessageContext()\n    \"\n  ></ng-container>\n  <ng-template #defaultSystemMessage let-messageInput=\"message\">\n    <div data-testid=\"system-message\" class=\"str-chat__message--system\">\n      <div class=\"str-chat__message--system__text\">\n        <div class=\"str-chat__message--system__line\"></div>\n        <p>{{ messageInput?.text }}</p>\n        <div class=\"str-chat__message--system__line\"></div>\n      </div>\n      <div class=\"str-chat__message--system__date\">\n        {{ parsedDate }}\n      </div>\n    </div>\n  </ng-template>\n</ng-template>\n\n<ng-template #quotedMessage>\n  <div\n    *ngIf=\"message?.quoted_message\"\n    class=\"quoted-message str-chat__quoted-message-preview\"\n    data-testid=\"quoted-message-container\"\n    [class.mine]=\"isSentByCurrentUser\"\n    (click)=\"\n      jumpToMessage(\n        (message?.quoted_message)!.id,\n        message?.quoted_message?.parent_id\n      )\n    \"\n    (keyup.enter)=\"\n      jumpToMessage(\n        (message?.quoted_message)!.id,\n        message?.quoted_message?.parent_id\n      )\n    \"\n  >\n    <stream-avatar-placeholder\n      data-testid=\"qouted-message-avatar\"\n      class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n      type=\"user\"\n      location=\"quoted-message-sender\"\n      [imageUrl]=\"message?.quoted_message?.user?.image\"\n      [name]=\"\n        message?.quoted_message?.user?.name || message?.quoted_message?.user?.id\n      \"\n      [user]=\"message?.quoted_message?.user || undefined\"\n    ></stream-avatar-placeholder>\n    <div class=\"quoted-message-inner str-chat__quoted-message-bubble\">\n      <ng-container\n        *ngIf=\"\n          message?.quoted_message?.attachments &&\n          message?.quoted_message?.attachments?.length\n        \"\n      >\n        <ng-template\n          #defaultAttachments\n          let-messageId=\"messageId\"\n          let-attachments=\"attachments\"\n          let-parentMessageId=\"parentMessageId\"\n          let-imageModalStateChangeHandler=\"imageModalStateChangeHandler\"\n        >\n          <stream-attachment-list\n            [messageId]=\"messageId\"\n            [attachments]=\"attachments\"\n            [parentMessageId]=\"parentMessageId\"\n            (imageModalStateChange)=\"imageModalStateChangeHandler($event)\"\n          ></stream-attachment-list>\n        </ng-template>\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.attachmentListTemplate$ | async) ||\n              defaultAttachments;\n            context: getQuotedMessageAttachmentListContext()\n          \"\n        ></ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"message?.quoted_message\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.messageTextTemplate$ | async) ||\n              defaultText;\n            context: getQuotedMessageTextContext()\n          \"\n        ></ng-container>\n        <ng-template\n          #defaultText\n          let-message=\"message\"\n          let-isQuoted=\"isQuoted\"\n          let-shouldTranslate=\"shouldTranslate\"\n        >\n          <stream-message-text\n            [message]=\"message\"\n            [isQuoted]=\"isQuoted\"\n            [shouldTranslate]=\"shouldTranslate\"\n            data-testid=\"quoted-message-text\"\n          ></stream-message-text>\n        </ng-template>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #messageDateAndSender>\n  <ng-container>\n    <div\n      *ngIf=\"shouldDisplayTranslationNotice\"\n      class=\"str-chat__translation-notice\"\n      data-testid=\"translation-notice\"\n    >\n      <button\n        *ngIf=\"displayedMessageTextContent === 'translation'\"\n        data-testid=\"see-original\"\n        translate\n        (click)=\"displayOriginalMessage()\"\n        (keyup.enter)=\"displayOriginalMessage()\"\n      >\n        streamChat.See original (automatically translated)\n      </button>\n      <button\n        *ngIf=\"displayedMessageTextContent === 'original'\"\n        data-testid=\"see-translation\"\n        translate\n        (click)=\"displayTranslatedMessage()\"\n        (keyup.enter)=\"displayTranslatedMessage()\"\n      >\n        streamChat.See translation\n      </button>\n    </div>\n    <ng-container\n      *ngIf=\"customTemplatesService.customMessageMetadataTemplate$ | async\"\n    >\n      <div class=\"str-chat__custom-message-metadata\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.customMessageMetadataTemplate$ | async)!;\n            context: getMessageMetadataContext()\n          \"\n        ></ng-container>\n      </div>\n    </ng-container>\n    <div\n      class=\"str-chat__message-data str-chat__message-simple-data str-chat__message-metadata\"\n    >\n      <ng-container *ngTemplateOutlet=\"messageStatus\"></ng-container>\n\n      <span\n        *ngIf=\"!isSentByCurrentUser\"\n        data-testid=\"sender\"\n        class=\"str-chat__message-simple-name str-chat__message-sender-name\"\n      >\n        {{ message?.user?.name ? message?.user?.name : message?.user?.id }}\n      </span>\n      <span\n        data-testid=\"date\"\n        class=\"str-chat__message-simple-timestamp str-chat__message-simple-time\"\n      >\n        {{ parsedDate }}\n      </span>\n      <ng-container *ngIf=\"message?.message_text_updated_at\">\n        <span\n          data-testid=\"edited-flag\"\n          class=\"str-chat__mesage-simple-edited\"\n          translate\n          >streamChat.Edited</span\n        >\n        <div\n          data-testid=\"edited-timestamp\"\n          class=\"str-chat__message-edited-timestamp\"\n          [ngClass]=\"{\n            'str-chat__message-edited-timestamp--open': isEditedFlagOpened,\n            'str-chat__message-edited-timestamp--collapsed': !isEditedFlagOpened\n          }\"\n        >\n          <span translate>streamChat.Edited</span>\n          <time\n            dateTime=\"{{ message?.message_text_updated_at }}\"\n            title=\"{{ message?.message_text_updated_at }}\"\n          >\n            {{ pasedEditedDate }}\n          </time>\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #messageStatus>\n  <ng-container\n    *ngIf=\"\n      isSentByCurrentUser &&\n      ((isLastSentMessage && message?.status === 'received') ||\n        message?.status === 'sending')\n    \"\n  >\n    <ng-container *ngIf=\"message?.status === 'sending'; else sentStatus\">\n      <ng-container *ngTemplateOutlet=\"sendingStatus\"></ng-container>\n    </ng-container>\n    <ng-template #sentStatus>\n      <ng-container\n        *ngIf=\"\n          mode === 'main' && isMessageDeliveredAndRead && canDisplayReadStatus;\n          else deliveredStatus\n        \"\n      >\n        <ng-container *ngTemplateOutlet=\"readStatus\"></ng-container>\n      </ng-container>\n    </ng-template>\n    <ng-template #deliveredStatus>\n      <ng-container\n        *ngTemplateOutlet=\"\n          (customTemplatesService.deliveredStatusTemplate$ | async) ||\n            defaultDeliveredStatus;\n          context: getDeliveredStatusContext()\n        \"\n      ></ng-container>\n    </ng-template>\n    <ng-template #defaultDeliveredStatus>\n      <span\n        *ngIf=\"mode === 'main'\"\n        class=\"str-chat__message-simple-status str-chat__message-simple-status-angular str-chat__message-status\"\n        data-testid=\"delivered-indicator\"\n        tabindex=\"0\"\n        [floatUiLoose]=\"floatingContent\"\n        loosePlacement=\"top\"\n        [looseTrigger]=\"hasTouchSupport ? 'click' : 'hover'\"\n        [disableAnimation]=\"true\"\n        [hideOnClickOutside]=\"true\"\n        [positionFixed]=\"true\"\n        [preventOverflow]=\"true\"\n      >\n        <float-ui-content #floatingContent>\n          <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n            {{ \"streamChat.Delivered\" | translate }}\n          </div>\n        </float-ui-content>\n        <stream-icon-placeholder\n          data-testid=\"delivered-icon\"\n          icon=\"delivered\"\n        ></stream-icon-placeholder>\n      </span>\n    </ng-template>\n    <ng-template #sendingStatus>\n      <ng-container\n        *ngTemplateOutlet=\"\n          (customTemplatesService.sendingStatusTemplate$ | async) ||\n            defaultSendingStatus;\n          context: getSendingStatusContext()\n        \"\n      ></ng-container>\n    </ng-template>\n    <ng-template #defaultSendingStatus>\n      <span\n        class=\"str-chat__message-simple-status str-chat__message-simple-status-angular str-chat__message-status\"\n        data-testid=\"sending-indicator\"\n        tabindex=\"0\"\n        [floatUiLoose]=\"floatingContent\"\n        loosePlacement=\"top\"\n        [looseTrigger]=\"hasTouchSupport ? 'click' : 'hover'\"\n        [disableAnimation]=\"true\"\n        [hideOnClickOutside]=\"true\"\n        [positionFixed]=\"true\"\n        [preventOverflow]=\"true\"\n      >\n        <float-ui-content #floatingContent>\n          <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n            {{ \"streamChat.Sending...\" | translate }}\n          </div>\n        </float-ui-content>\n        <stream-loading-indicator-placeholder\n          data-testid=\"loading-indicator\"\n        ></stream-loading-indicator-placeholder>\n      </span>\n    </ng-template>\n    <ng-template #readStatus>\n      <ng-container\n        *ngTemplateOutlet=\"\n          (customTemplatesService.readStatusTemplate$ | async) ||\n            defaultReadStatus;\n          context: getReadStatusContext()\n        \"\n      ></ng-container>\n    </ng-template>\n    <ng-template #defaultReadStatus let-readByText=\"readByText\">\n      <span\n        class=\"str-chat__message-simple-status str-chat__message-simple-status-angular str-chat__message-status\"\n        data-testid=\"read-indicator\"\n        tabindex=\"0\"\n        [floatUiLoose]=\"floatingContent\"\n        loosePlacement=\"top\"\n        [looseTrigger]=\"hasTouchSupport ? 'click' : 'hover'\"\n        [disableAnimation]=\"true\"\n        [hideOnClickOutside]=\"true\"\n        [positionFixed]=\"true\"\n        [preventOverflow]=\"true\"\n      >\n        <float-ui-content #floatingContent>\n          <div\n            class=\"str-chat__tooltip str-chat__tooltip-angular\"\n            data-testid=\"read-by-tooltip\"\n          >\n            {{ readByText }}\n          </div>\n        </float-ui-content>\n        <stream-icon-placeholder icon=\"read\"></stream-icon-placeholder>\n      </span>\n    </ng-template>\n  </ng-container>\n</ng-template>\n\n<ng-template #replyCountButton>\n  <div\n    class=\"str-chat__message-simple-reply-button str-chat__message-replies-count-button-wrapper\"\n  >\n    <ng-container *ngIf=\"shouldDisplayThreadLink\">\n      <ng-template\n        *ngTemplateOutlet=\"\n          (customTemplatesService.threadLinkButton$ | async) || defaultButton;\n          context: { message: message }\n        \"\n      ></ng-template>\n    </ng-container>\n    <ng-template #defaultButton let-message=\"message\">\n      <button\n        class=\"str-chat__message-replies-count-button\"\n        data-testid=\"reply-count-button\"\n        (click)=\"setAsActiveParentMessage()\"\n      >\n        {{message?.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}\n        replies' | translate:replyCountParam)}}\n      </button>\n    </ng-template>\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" }]
+            args: [{ selector: 'stream-message', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container\n  *ngIf=\"\n    message?.type === 'error' &&\n      (message?.moderation_details?.action ===\n        'MESSAGE_RESPONSE_ACTION_REMOVE' ||\n        message?.moderation?.action === 'remove');\n    else notBlockedMessage\n  \"\n>\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.messageBlockedTemplate$ | async) ||\n        defaultBlockedMessage;\n      context: getMessageBlockedContext()\n    \"\n  ></ng-container>\n  <ng-template #defaultBlockedMessage>\n    <stream-message-blocked\n      [message]=\"message\"\n      [isMyMessage]=\"isSentByCurrentUser\"\n    ></stream-message-blocked>\n  </ng-template>\n</ng-container>\n<ng-template #notBlockedMessage>\n  <div\n    data-testid=\"message-container\"\n    class=\"str-chat__message-simple str-chat__message str-chat__message--{{\n      message?.type\n    }} str-chat__message--{{ message?.status }} {{\n      message?.text ? 'str-chat__message--has-text' : 'has-no-text'\n    }} str-chat__message-menu-{{ areMessageOptionsOpen ? 'opened' : 'closed' }}\"\n    [class.str-chat__message--me]=\"isSentByCurrentUser\"\n    [class.str-chat__message--other]=\"!isSentByCurrentUser\"\n    [class.str-chat__message-simple--me]=\"isSentByCurrentUser\"\n    [class.str-chat__message--has-attachment]=\"hasAttachment\"\n    [class.str-chat__message--with-reactions]=\"hasReactions\"\n    [class.str-chat__message--highlighted]=\"isHighlighted\"\n    [class.str-chat__message-with-thread-link]=\"shouldDisplayThreadLink\"\n    [class.str-chat__message-send-can-be-retried]=\"\n      (message?.status === 'failed' && message?.errorStatusCode !== 403) ||\n      (message?.type === 'error' && message?.moderation_details)\n    \"\n    [class.str-chat__message-with-touch-support]=\"hasTouchSupport\"\n    [class.str-chat__message-without-touch-support]=\"!hasTouchSupport\"\n  >\n    <ng-container *ngIf=\"!message?.deleted_at; else deletedMessage\">\n      <ng-container *ngIf=\"message?.type !== 'system'; else systemMessage\">\n        <stream-avatar-placeholder\n          data-testid=\"avatar\"\n          class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n          type=\"user\"\n          location=\"message-sender\"\n          [imageUrl]=\"message?.user?.image\"\n          [name]=\"message?.user?.name || message?.user?.id\"\n          [user]=\"message?.user || undefined\"\n        ></stream-avatar-placeholder>\n        <div class=\"str-chat__message-inner\">\n          <div\n            *ngIf=\"!hasTouchSupport && areOptionsVisible\"\n            class=\"str-chat__message-simple__actions str-chat__message-options\"\n            data-testid=\"message-options\"\n            [class.str-chat__message-actions-open]=\"areMessageOptionsOpen\"\n          >\n            <div\n              #messageActionsToggle\n              data-testid=\"message-actions-container\"\n              class=\"str-chat__message-actions-container str-chat__message-simple__actions__action str-chat__message-simple__actions__action--options\"\n              [floatUiLoose]=\"messageMenuFloat\"\n              [looseTrigger]=\"\n                messageActionsService.customActionClickHandler\n                  ? 'none'\n                  : 'click'\n              \"\n              [hideOnScroll]=\"false\"\n              [hideOnClickOutside]=\"true\"\n              [hideOnMouseLeave]=\"false\"\n              [disableAnimation]=\"false\"\n              [preventOverflow]=\"true\"\n              [positionFixed]=\"true\"\n              (onSHown)=\"areMessageOptionsOpen = true\"\n              (onHidden)=\"areMessageOptionsOpen = false\"\n            >\n              <div\n                *ngIf=\"visibleMessageActionsCount > 0\"\n                class=\"str-chat__message-actions-box-button\"\n                data-testid=\"message-options-button\"\n                (click)=\"messageOptionsButtonClicked()\"\n                (keyup.enter)=\"messageOptionsButtonClicked()\"\n              >\n                <stream-icon-placeholder\n                  icon=\"action\"\n                  class=\"str-chat__message-action-icon\"\n                ></stream-icon-placeholder>\n              </div>\n            </div>\n          </div>\n          <ng-container\n            *ngIf=\"\n              customTemplatesService.customMessageMetadataInsideBubbleTemplate$\n                | async\n            \"\n          >\n            <ng-template\n              *ngTemplateOutlet=\"\n                (customTemplatesService.customMessageMetadataInsideBubbleTemplate$\n                  | async)!;\n                context: { message: message }\n              \"\n            ></ng-template>\n          </ng-container>\n          <div class=\"str-chat__message-reactions-host\">\n            <ng-template\n              #defaultMessageReactions\n              let-messageReactionCounts=\"messageReactionCounts\"\n              let-latestReactions=\"latestReactions\"\n              let-messageId=\"messageId\"\n              let-ownReactions=\"ownReactions\"\n              let-messageReactionGroups=\"messageReactionGroups\"\n            >\n              <stream-message-reactions\n                [messageReactionCounts]=\"messageReactionCounts\"\n                [latestReactions]=\"latestReactions\"\n                [messageId]=\"messageId\"\n                [ownReactions]=\"ownReactions\"\n                [messageReactionGroups]=\"messageReactionGroups\"\n              ></stream-message-reactions>\n            </ng-template>\n            <ng-container\n              *ngTemplateOutlet=\"\n                (customTemplatesService.messageReactionsTemplate$ | async) ||\n                  defaultMessageReactions;\n                context: getMessageReactionsContext()\n              \"\n            ></ng-container>\n          </div>\n          <float-ui-content #messageMenuFloat>\n            <ng-template\n              #defaultMessageActionsBox\n              let-isMine=\"isMine\"\n              let-messageInput=\"message\"\n              let-enabledActions=\"enabledActions\"\n              let-messageTextHtmlElement=\"messageTextHtmlElement\"\n            >\n              <stream-message-actions-box\n                [isMine]=\"isMine\"\n                [message]=\"messageInput\"\n                [enabledActions]=\"enabledActions\"\n                [messageTextHtmlElement]=\"messageTextHtmlElement\"\n              ></stream-message-actions-box>\n            </ng-template>\n            <ng-container>\n              <div\n                (click)=\"messageActionsBoxClicked(messageMenuFloat)\"\n                (keyup.enter)=\"messageActionsBoxClicked(messageMenuFloat)\"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    (customTemplatesService.messageActionsBoxTemplate$\n                      | async) || defaultMessageActionsBox;\n                    context: getMessageActionsBoxContext()\n                  \"\n                >\n                </ng-container>\n              </div>\n            </ng-container>\n          </float-ui-content>\n          <div\n            class=\"str-chat__message-bubble str-chat-angular__message-bubble\"\n            [class.str-chat-angular__message-bubble--attachment-modal-open]=\"\n              imageAttachmentModalState === 'opened'\n            \"\n            data-testid=\"message-bubble\"\n            [floatUiLoose]=\"messageMenuFloat\"\n            #messageMenuTrigger=\"floatUiLoose\"\n            #messageBubble\n            looseTrigger=\"none\"\n            [hideOnScroll]=\"false\"\n            [hideOnClickOutside]=\"true\"\n            [hideOnMouseLeave]=\"false\"\n            [disableAnimation]=\"true\"\n            [preventOverflow]=\"true\"\n            (onShown)=\"areMessageOptionsOpen = true\"\n            (onHidden)=\"areMessageOptionsOpen = false\"\n            [positionFixed]=\"true\"\n          >\n            <ng-container *ngIf=\"hasAttachment && !message?.quoted_message\">\n              <div class=\"str-chat__attachments-container\">\n                <ng-container\n                  *ngTemplateOutlet=\"attachmentsTemplate\"\n                ></ng-container>\n              </div>\n            </ng-container>\n            <div\n              *ngIf=\"\n                message?.text || (message?.quoted_message && hasAttachment)\n              \"\n              class=\"str-chat__message-text\"\n              tabindex=\"0\"\n              [class.str-chat__message-text--pointer-cursor]=\"\n                (message?.status === 'failed' &&\n                  message?.errorStatusCode !== 403) ||\n                (this.message?.type === 'error' &&\n                  this.message?.moderation_details) ||\n                message?.message_text_updated_at\n              \"\n              (click)=\"messageClicked()\"\n              (keyup.enter)=\"messageClicked()\"\n            >\n              <div\n                data-testid=\"inner-message\"\n                class=\"str-chat__message-text-inner str-chat__message-simple-text-inner\"\n                [class.str-chat__message-light-text-inner--has-attachment]=\"\n                  hasAttachment\n                \"\n              >\n                <ng-container *ngTemplateOutlet=\"quotedMessage\"></ng-container>\n                <ng-container *ngIf=\"hasAttachment && message?.quoted_message\">\n                  <ng-container\n                    *ngTemplateOutlet=\"attachmentsTemplate\"\n                  ></ng-container>\n                </ng-container>\n                <div\n                  *ngIf=\"message?.type === 'error'\"\n                  data-testid=\"client-error-message\"\n                  class=\"str-chat__simple-message--error-message str-chat__message--error-message\"\n                >\n                  <ng-container *ngIf=\"!message?.moderation_details\">{{\n                    \"streamChat.Error \u00B7 Unsent\" | translate\n                  }}</ng-container>\n                </div>\n                <div\n                  *ngIf=\"message?.status === 'failed'\"\n                  data-testid=\"error-message\"\n                  class=\"str-chat__simple-message--error-message str-chat__message--error-message\"\n                >\n                  {{\n                    (message?.errorStatusCode === 403\n                      ? \"streamChat.Message Failed \u00B7 Unauthorized\"\n                      : \"streamChat.Message Failed \u00B7 Click to try again\"\n                    ) | translate\n                  }}\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    (customTemplatesService.messageTextTemplate$ | async) ||\n                      defaultText;\n                    context: getMessageTextContext()\n                  \"\n                ></ng-container>\n                <ng-template\n                  #defaultText\n                  let-message=\"message\"\n                  let-isQuoted=\"isQuoted\"\n                  let-shouldTranslate=\"shouldTranslate\"\n                >\n                  <stream-message-text\n                    [message]=\"message\"\n                    [isQuoted]=\"isQuoted\"\n                    [shouldTranslate]=\"shouldTranslate\"\n                    data-testid=\"quoted-message-text\"\n                  ></stream-message-text>\n                </ng-template>\n              </div>\n            </div>\n            <stream-icon-placeholder\n              class=\"str-chat__message-error-icon\"\n              icon=\"error\"\n            ></stream-icon-placeholder>\n          </div>\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"replyCountButton; context: { message: message }\"\n        ></ng-container>\n\n        <ng-container *ngTemplateOutlet=\"messageDateAndSender\"></ng-container>\n      </ng-container>\n    </ng-container>\n  </div>\n\n  <ng-template #deletedMessage>\n    <div data-testid=\"message-deleted-component\">\n      <div class=\"str-chat__message--deleted-inner\" translate>\n        streamChat.This message was deleted...\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template #systemMessage>\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.systemMessageTemplate$ | async) ||\n          defaultSystemMessage;\n        context: getMessageContext()\n      \"\n    ></ng-container>\n    <ng-template #defaultSystemMessage let-messageInput=\"message\">\n      <div data-testid=\"system-message\" class=\"str-chat__message--system\">\n        <div class=\"str-chat__message--system__text\">\n          <div class=\"str-chat__message--system__line\"></div>\n          <p>{{ messageInput?.text }}</p>\n          <div class=\"str-chat__message--system__line\"></div>\n        </div>\n        <div class=\"str-chat__message--system__date\">\n          {{ parsedDate }}\n        </div>\n      </div>\n    </ng-template>\n  </ng-template>\n\n  <ng-template #quotedMessage>\n    <div\n      *ngIf=\"message?.quoted_message\"\n      class=\"quoted-message str-chat__quoted-message-preview\"\n      data-testid=\"quoted-message-container\"\n      [class.mine]=\"isSentByCurrentUser\"\n      (click)=\"\n        jumpToMessage(\n          (message?.quoted_message)!.id,\n          message?.quoted_message?.parent_id\n        )\n      \"\n      (keyup.enter)=\"\n        jumpToMessage(\n          (message?.quoted_message)!.id,\n          message?.quoted_message?.parent_id\n        )\n      \"\n    >\n      <stream-avatar-placeholder\n        data-testid=\"qouted-message-avatar\"\n        class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n        type=\"user\"\n        location=\"quoted-message-sender\"\n        [imageUrl]=\"message?.quoted_message?.user?.image\"\n        [name]=\"\n          message?.quoted_message?.user?.name ||\n          message?.quoted_message?.user?.id\n        \"\n        [user]=\"message?.quoted_message?.user || undefined\"\n      ></stream-avatar-placeholder>\n      <div class=\"quoted-message-inner str-chat__quoted-message-bubble\">\n        <ng-container\n          *ngIf=\"\n            message?.quoted_message?.attachments &&\n            message?.quoted_message?.attachments?.length\n          \"\n        >\n          <ng-template\n            #defaultAttachments\n            let-messageId=\"messageId\"\n            let-attachments=\"attachments\"\n            let-parentMessageId=\"parentMessageId\"\n            let-imageModalStateChangeHandler=\"imageModalStateChangeHandler\"\n          >\n            <stream-attachment-list\n              [messageId]=\"messageId\"\n              [attachments]=\"attachments\"\n              [parentMessageId]=\"parentMessageId\"\n              (imageModalStateChange)=\"imageModalStateChangeHandler($event)\"\n            ></stream-attachment-list>\n          </ng-template>\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.attachmentListTemplate$ | async) ||\n                defaultAttachments;\n              context: getQuotedMessageAttachmentListContext()\n            \"\n          ></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"message?.quoted_message\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.messageTextTemplate$ | async) ||\n                defaultText;\n              context: getQuotedMessageTextContext()\n            \"\n          ></ng-container>\n          <ng-template\n            #defaultText\n            let-message=\"message\"\n            let-isQuoted=\"isQuoted\"\n            let-shouldTranslate=\"shouldTranslate\"\n          >\n            <stream-message-text\n              [message]=\"message\"\n              [isQuoted]=\"isQuoted\"\n              [shouldTranslate]=\"shouldTranslate\"\n              data-testid=\"quoted-message-text\"\n            ></stream-message-text>\n          </ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template #messageDateAndSender>\n    <ng-container>\n      <div\n        *ngIf=\"shouldDisplayTranslationNotice\"\n        class=\"str-chat__translation-notice\"\n        data-testid=\"translation-notice\"\n      >\n        <button\n          *ngIf=\"displayedMessageTextContent === 'translation'\"\n          data-testid=\"see-original\"\n          translate\n          (click)=\"displayOriginalMessage()\"\n          (keyup.enter)=\"displayOriginalMessage()\"\n        >\n          streamChat.See original (automatically translated)\n        </button>\n        <button\n          *ngIf=\"displayedMessageTextContent === 'original'\"\n          data-testid=\"see-translation\"\n          translate\n          (click)=\"displayTranslatedMessage()\"\n          (keyup.enter)=\"displayTranslatedMessage()\"\n        >\n          streamChat.See translation\n        </button>\n      </div>\n      <ng-container\n        *ngIf=\"customTemplatesService.customMessageMetadataTemplate$ | async\"\n      >\n        <div class=\"str-chat__custom-message-metadata\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.customMessageMetadataTemplate$ | async)!;\n              context: getMessageMetadataContext()\n            \"\n          ></ng-container>\n        </div>\n      </ng-container>\n      <div\n        class=\"str-chat__message-data str-chat__message-simple-data str-chat__message-metadata\"\n      >\n        <ng-container *ngTemplateOutlet=\"messageStatus\"></ng-container>\n\n        <span\n          *ngIf=\"!isSentByCurrentUser\"\n          data-testid=\"sender\"\n          class=\"str-chat__message-simple-name str-chat__message-sender-name\"\n        >\n          {{ message?.user?.name ? message?.user?.name : message?.user?.id }}\n        </span>\n        <span\n          data-testid=\"date\"\n          class=\"str-chat__message-simple-timestamp str-chat__message-simple-time\"\n        >\n          {{ parsedDate }}\n        </span>\n        <ng-container *ngIf=\"message?.message_text_updated_at\">\n          <span\n            data-testid=\"edited-flag\"\n            class=\"str-chat__mesage-simple-edited\"\n            translate\n            >streamChat.Edited</span\n          >\n          <div\n            data-testid=\"edited-timestamp\"\n            class=\"str-chat__message-edited-timestamp\"\n            [ngClass]=\"{\n              'str-chat__message-edited-timestamp--open': isEditedFlagOpened,\n              'str-chat__message-edited-timestamp--collapsed':\n                !isEditedFlagOpened\n            }\"\n          >\n            <span translate>streamChat.Edited</span>\n            <time\n              dateTime=\"{{ message?.message_text_updated_at }}\"\n              title=\"{{ message?.message_text_updated_at }}\"\n            >\n              {{ pasedEditedDate }}\n            </time>\n          </div>\n        </ng-container>\n      </div>\n    </ng-container>\n  </ng-template>\n\n  <ng-template #messageStatus>\n    <ng-container\n      *ngIf=\"\n        isSentByCurrentUser &&\n        ((isLastSentMessage && message?.status === 'received') ||\n          message?.status === 'sending')\n      \"\n    >\n      <ng-container *ngIf=\"message?.status === 'sending'; else sentStatus\">\n        <ng-container *ngTemplateOutlet=\"sendingStatus\"></ng-container>\n      </ng-container>\n      <ng-template #sentStatus>\n        <ng-container\n          *ngIf=\"\n            mode === 'main' &&\n              isMessageDeliveredAndRead &&\n              canDisplayReadStatus;\n            else deliveredStatus\n          \"\n        >\n          <ng-container *ngTemplateOutlet=\"readStatus\"></ng-container>\n        </ng-container>\n      </ng-template>\n      <ng-template #deliveredStatus>\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.deliveredStatusTemplate$ | async) ||\n              defaultDeliveredStatus;\n            context: getDeliveredStatusContext()\n          \"\n        ></ng-container>\n      </ng-template>\n      <ng-template #defaultDeliveredStatus>\n        <span\n          *ngIf=\"mode === 'main'\"\n          class=\"str-chat__message-simple-status str-chat__message-simple-status-angular str-chat__message-status\"\n          data-testid=\"delivered-indicator\"\n          tabindex=\"0\"\n          [floatUiLoose]=\"floatingContent\"\n          loosePlacement=\"top\"\n          [looseTrigger]=\"hasTouchSupport ? 'click' : 'hover'\"\n          [disableAnimation]=\"true\"\n          [hideOnClickOutside]=\"true\"\n          [positionFixed]=\"true\"\n          [preventOverflow]=\"true\"\n        >\n          <float-ui-content #floatingContent>\n            <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n              {{ \"streamChat.Delivered\" | translate }}\n            </div>\n          </float-ui-content>\n          <stream-icon-placeholder\n            data-testid=\"delivered-icon\"\n            icon=\"delivered\"\n          ></stream-icon-placeholder>\n        </span>\n      </ng-template>\n      <ng-template #sendingStatus>\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.sendingStatusTemplate$ | async) ||\n              defaultSendingStatus;\n            context: getSendingStatusContext()\n          \"\n        ></ng-container>\n      </ng-template>\n      <ng-template #defaultSendingStatus>\n        <span\n          class=\"str-chat__message-simple-status str-chat__message-simple-status-angular str-chat__message-status\"\n          data-testid=\"sending-indicator\"\n          tabindex=\"0\"\n          [floatUiLoose]=\"floatingContent\"\n          loosePlacement=\"top\"\n          [looseTrigger]=\"hasTouchSupport ? 'click' : 'hover'\"\n          [disableAnimation]=\"true\"\n          [hideOnClickOutside]=\"true\"\n          [positionFixed]=\"true\"\n          [preventOverflow]=\"true\"\n        >\n          <float-ui-content #floatingContent>\n            <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n              {{ \"streamChat.Sending...\" | translate }}\n            </div>\n          </float-ui-content>\n          <stream-loading-indicator-placeholder\n            data-testid=\"loading-indicator\"\n          ></stream-loading-indicator-placeholder>\n        </span>\n      </ng-template>\n      <ng-template #readStatus>\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.readStatusTemplate$ | async) ||\n              defaultReadStatus;\n            context: getReadStatusContext()\n          \"\n        ></ng-container>\n      </ng-template>\n      <ng-template #defaultReadStatus let-readByText=\"readByText\">\n        <span\n          class=\"str-chat__message-simple-status str-chat__message-simple-status-angular str-chat__message-status\"\n          data-testid=\"read-indicator\"\n          tabindex=\"0\"\n          [floatUiLoose]=\"floatingContent\"\n          loosePlacement=\"top\"\n          [looseTrigger]=\"hasTouchSupport ? 'click' : 'hover'\"\n          [disableAnimation]=\"true\"\n          [hideOnClickOutside]=\"true\"\n          [positionFixed]=\"true\"\n          [preventOverflow]=\"true\"\n        >\n          <float-ui-content #floatingContent>\n            <div\n              class=\"str-chat__tooltip str-chat__tooltip-angular\"\n              data-testid=\"read-by-tooltip\"\n            >\n              {{ readByText }}\n            </div>\n          </float-ui-content>\n          <stream-icon-placeholder icon=\"read\"></stream-icon-placeholder>\n        </span>\n      </ng-template>\n    </ng-container>\n  </ng-template>\n\n  <ng-template #replyCountButton>\n    <div\n      class=\"str-chat__message-simple-reply-button str-chat__message-replies-count-button-wrapper\"\n    >\n      <ng-container *ngIf=\"shouldDisplayThreadLink\">\n        <ng-template\n          *ngTemplateOutlet=\"\n            (customTemplatesService.threadLinkButton$ | async) || defaultButton;\n            context: { message: message }\n          \"\n        ></ng-template>\n      </ng-container>\n      <ng-template #defaultButton let-message=\"message\">\n        <button\n          class=\"str-chat__message-replies-count-button\"\n          data-testid=\"reply-count-button\"\n          (click)=\"setAsActiveParentMessage()\"\n        >\n          {{message?.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}\n          replies' | translate:replyCountParam)}}\n        </button>\n      </ng-template>\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</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: ChatClientService }, { type: ChannelService }, { type: CustomTemplatesService }, { type: i0.ChangeDetectorRef }, { type: DateParserService }, { type: MessageActionsService }, { type: i0.NgZone }, { type: i6.TranslateService }]; }, propDecorators: { message: [{
                 type: Input
             }], enabledMessageActions: [{
@@ -8629,7 +8654,8 @@ StreamChatModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versio
         MessageReactionsSelectorComponent,
         UserListComponent,
         PaginatedListComponent,
-        MessageTextComponent], imports: [CommonModule,
+        MessageTextComponent,
+        MessageBlockedComponent], imports: [CommonModule,
         NgxFloatUiModule,
         StreamAvatarModule,
         TranslateModule,
@@ -8656,7 +8682,8 @@ StreamChatModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versio
         UserListComponent,
         PaginatedListComponent,
         IconModule,
-        MessageTextComponent] });
+        MessageTextComponent,
+        MessageBlockedComponent] });
 StreamChatModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: StreamChatModule, providers: [VoiceRecorderService], imports: [CommonModule,
         NgxFloatUiModule,
         StreamAvatarModule,
@@ -8690,6 +8717,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                         UserListComponent,
                         PaginatedListComponent,
                         MessageTextComponent,
+                        MessageBlockedComponent,
                     ],
                     imports: [
                         CommonModule,
@@ -8723,6 +8751,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                         PaginatedListComponent,
                         IconModule,
                         MessageTextComponent,
+                        MessageBlockedComponent,
                     ],
                     providers: [VoiceRecorderService],
                 }]
@@ -8970,5 +8999,5 @@ async function encodeWebmToMp3(blob, lameJs) {
  * Generated bundle index. Do not edit.
  */
 
-export { AmplitudeRecorderService, AttachmentConfigurationService, AttachmentListComponent, AttachmentPreviewListComponent, AttachmentService, AudioRecorderService, AutocompleteTextareaComponent, AvatarComponent, AvatarPlaceholderComponent, ChannelComponent, ChannelHeaderComponent, ChannelListComponent, ChannelPreviewComponent, ChannelQuery, ChannelService, ChatClientService, CustomTemplatesService, DEFAULT_AMPLITUDE_RECORDER_CONFIG, DateParserService, EmojiInputService, IconComponent, IconModule, IconPlaceholderComponent, LoadingIndicatorComponent, LoadingIndicatorPlaceholderComponent, MediaRecordingState, MessageActionsBoxComponent, MessageActionsService, MessageBouncePromptComponent, MessageComponent, MessageInputComponent, MessageInputConfigService, MessageListComponent, MessageReactionsComponent, MessageReactionsSelectorComponent, MessageReactionsService, MessageService, MessageTextComponent, ModalComponent, MultimediaRecorder, NotificationComponent, NotificationListComponent, NotificationService, PaginatedListComponent, StreamAutocompleteTextareaModule, StreamAvatarModule, StreamChatModule, StreamI18nService, StreamTextareaModule, TextareaComponent, TextareaDirective, ThemeService, ThreadComponent, TranscoderService, TransliterationService, UserListComponent, VirtualizedListService, VirtualizedMessageListService, VoiceRecorderComponent, VoiceRecorderModule, VoiceRecorderService, VoiceRecorderWavebarComponent, VoiceRecordingComponent, VoiceRecordingModule, VoiceRecordingWavebarComponent, createFileFromBlobs, createMessagePreview, createUriFromBlob, encodeWebmToMp3, formatDuration, getChannelDisplayText, getExtensionFromMimeType, getGroupStyles, getMessageTranslation, getReadBy, isImageAttachment, isImageFile, isOnSeparateDate, isSafari, listUsers, parseDate, readBlobAsArrayBuffer, textareaInjectionToken };
+export { AmplitudeRecorderService, AttachmentConfigurationService, AttachmentListComponent, AttachmentPreviewListComponent, AttachmentService, AudioRecorderService, AutocompleteTextareaComponent, AvatarComponent, AvatarPlaceholderComponent, ChannelComponent, ChannelHeaderComponent, ChannelListComponent, ChannelPreviewComponent, ChannelQuery, ChannelService, ChatClientService, CustomTemplatesService, DEFAULT_AMPLITUDE_RECORDER_CONFIG, DateParserService, EmojiInputService, IconComponent, IconModule, IconPlaceholderComponent, LoadingIndicatorComponent, LoadingIndicatorPlaceholderComponent, MediaRecordingState, MessageActionsBoxComponent, MessageActionsService, MessageBlockedComponent, MessageBouncePromptComponent, MessageComponent, MessageInputComponent, MessageInputConfigService, MessageListComponent, MessageReactionsComponent, MessageReactionsSelectorComponent, MessageReactionsService, MessageService, MessageTextComponent, ModalComponent, MultimediaRecorder, NotificationComponent, NotificationListComponent, NotificationService, PaginatedListComponent, StreamAutocompleteTextareaModule, StreamAvatarModule, StreamChatModule, StreamI18nService, StreamTextareaModule, TextareaComponent, TextareaDirective, ThemeService, ThreadComponent, TranscoderService, TransliterationService, UserListComponent, VirtualizedListService, VirtualizedMessageListService, VoiceRecorderComponent, VoiceRecorderModule, VoiceRecorderService, VoiceRecorderWavebarComponent, VoiceRecordingComponent, VoiceRecordingModule, VoiceRecordingWavebarComponent, createFileFromBlobs, createMessagePreview, createUriFromBlob, encodeWebmToMp3, formatDuration, getChannelDisplayText, getExtensionFromMimeType, getGroupStyles, getMessageTranslation, getReadBy, isImageAttachment, isImageFile, isOnSeparateDate, isSafari, listUsers, parseDate, readBlobAsArrayBuffer, textareaInjectionToken };
 //# sourceMappingURL=stream-chat-angular.mjs.map