npm - stream-chat-angular - Versions diffs - 5.3.1 → 5.4.0 - Mend

stream-chat-angular 5.3.1 → 5.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (91) hide show

package/esm2020/lib/message/message.component.mjs CHANGED Viewed

@@ -13,11 +13,11 @@ import * as i7 from "@angular/common";
 import * as i8 from "ngx-float-ui";
 import * as i9 from "../avatar-placeholder/avatar-placeholder.component";
 import * as i10 from "@ngx-translate/core";
-import * as i11 from "../message-actions-box/message-actions-box.component";
-import * as i12 from "../attachment-list/attachment-list.component";
-import * as i13 from "../message-reactions/message-reactions.component";
-import * as i14 from "../icon-placeholder/icon-placeholder.component";
-import * as i15 from "../loading-indicator-placeholder/loading-indicator-placeholder.component";
+import * as i11 from "../icon/icon-placeholder/icon-placeholder.component";
+import * as i12 from "../icon/loading-indicator-placeholder/loading-indicator-placeholder.component";
+import * as i13 from "../message-actions-box/message-actions-box.component";
+import * as i14 from "../attachment-list/attachment-list.component";
+import * as i15 from "../message-reactions/message-reactions.component";
 /**
  * The `Message` component displays a message with additional information such as sender and date, and enables [interaction with the message (i.e. edit or react)](../concepts/message-interactions.mdx).
  */
@@ -490,7 +490,7 @@ export class MessageComponent {
     }
 }
 MessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageComponent, deps: [{ token: i1.ChatClientService }, { token: i2.ChannelService }, { token: i3.CustomTemplatesService }, { token: i0.ChangeDetectorRef }, { token: i4.DateParserService }, { token: i5.MessageService }, { token: i6.MessageActionsService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-MessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MessageComponent, selector: "stream-message", inputs: { message: "message", enabledMessageActions: "enabledMessageActions", isLastSentMessage: "isLastSentMessage", mode: "mode", isHighlighted: "isHighlighted", scroll$: "scroll$" }, viewQueries: [{ propertyName: "messageMenuTrigger", first: true, predicate: ["messageMenuTrigger"], descendants: true }, { propertyName: "messageMenuFloat", first: true, predicate: ["messageMenuFloat"], descendants: true }, { propertyName: "messageTextElement", first: true, predicate: ["messageTextElement"], descendants: true }, { propertyName: "messageBubble", first: true, predicate: ["messageBubble"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #container\n  data-testid=\"message-container\"\n  class=\"str-chat__message-simple str-chat__message str-chat__message--{{\n    message?.type\n  }} str-chat__message--{{ message?.status }} {{\n    message?.text ? 'str-chat__message--has-text' : 'has-no-text'\n  }} str-chat__message-menu-{{ areMessageOptionsOpen ? 'opened' : 'closed' }}\"\n  [class.str-chat__message--me]=\"isSentByCurrentUser\"\n  [class.str-chat__message--other]=\"!isSentByCurrentUser\"\n  [class.str-chat__message-simple--me]=\"isSentByCurrentUser\"\n  [class.str-chat__message--has-attachment]=\"hasAttachment\"\n  [class.str-chat__message--with-reactions]=\"hasReactions\"\n  [class.str-chat__message--highlighted]=\"isHighlighted\"\n  [class.str-chat__message-with-thread-link]=\"shouldDisplayThreadLink\"\n  [class.str-chat__message-send-can-be-retried]=\"\n    (message?.status === 'failed' && message?.errorStatusCode !== 403) ||\n    (message?.type === 'error' && message?.moderation_details)\n  \"\n  [class.str-chat__message-with-touch-support]=\"hasTouchSupport\"\n  [class.str-chat__message-without-touch-support]=\"!hasTouchSupport\"\n>\n  <ng-container *ngIf=\"!message?.deleted_at; else deletedMessage\">\n    <ng-container *ngIf=\"message?.type !== 'system'; else systemMessage\">\n      <stream-avatar-placeholder\n        data-testid=\"avatar\"\n        class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n        type=\"user\"\n        location=\"message-sender\"\n        [imageUrl]=\"message?.user?.image\"\n        [name]=\"message?.user?.name || message?.user?.id\"\n        [user]=\"message?.user || undefined\"\n      ></stream-avatar-placeholder>\n      <div class=\"str-chat__message-inner\">\n        <div\n          *ngIf=\"!hasTouchSupport && areOptionsVisible\"\n          class=\"str-chat__message-simple__actions str-chat__message-options\"\n          data-testid=\"message-options\"\n          [class.str-chat__message-actions-open]=\"areMessageOptionsOpen\"\n        >\n          <div\n            #messageActionsToggle\n            data-testid=\"message-actions-container\"\n            class=\"str-chat__message-actions-container str-chat__message-simple__actions__action str-chat__message-simple__actions__action--options\"\n            [floatUiLoose]=\"messageMenuFloat\"\n            [looseTrigger]=\"\n              messageActionsService.customActionClickHandler ? 'none' : 'click'\n            \"\n            [hideOnScroll]=\"false\"\n            [hideOnClickOutside]=\"true\"\n            [hideOnMouseLeave]=\"false\"\n            [disableAnimation]=\"false\"\n            [preventOverflow]=\"true\"\n            [positionFixed]=\"true\"\n            (onSHown)=\"areMessageOptionsOpen = true\"\n            (onHidden)=\"areMessageOptionsOpen = false\"\n          >\n            <div\n              *ngIf=\"visibleMessageActionsCount > 0\"\n              class=\"str-chat__message-actions-box-button\"\n              data-testid=\"message-options-button\"\n              (click)=\"messageOptionsButtonClicked()\"\n              (keyup.enter)=\"messageOptionsButtonClicked()\"\n            >\n              <stream-icon-placeholder\n                icon=\"action\"\n                class=\"str-chat__message-action-icon\"\n              ></stream-icon-placeholder>\n            </div>\n          </div>\n        </div>\n        <div class=\"str-chat__message-reactions-host\">\n          <ng-template\n            #defaultMessageReactions\n            let-messageReactionCounts=\"messageReactionCounts\"\n            let-latestReactions=\"latestReactions\"\n            let-messageId=\"messageId\"\n            let-ownReactions=\"ownReactions\"\n            let-messageReactionGroups=\"messageReactionGroups\"\n          >\n            <stream-message-reactions\n              [messageReactionCounts]=\"messageReactionCounts\"\n              [latestReactions]=\"latestReactions\"\n              [messageId]=\"messageId\"\n              [ownReactions]=\"ownReactions\"\n              [messageReactionGroups]=\"messageReactionGroups\"\n            ></stream-message-reactions>\n          </ng-template>\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.messageReactionsTemplate$ | async) ||\n                defaultMessageReactions;\n              context: getMessageReactionsContext()\n            \"\n          ></ng-container>\n        </div>\n        <float-ui-content #messageMenuFloat>\n          <ng-template\n            #defaultMessageActionsBox\n            let-isMine=\"isMine\"\n            let-messageInput=\"message\"\n            let-enabledActions=\"enabledActions\"\n            let-messageTextHtmlElement=\"messageTextHtmlElement\"\n          >\n            <stream-message-actions-box\n              [isMine]=\"isMine\"\n              [message]=\"messageInput\"\n              [enabledActions]=\"enabledActions\"\n              [messageTextHtmlElement]=\"messageTextHtmlElement\"\n              (click)=\"messageActionsBoxClicked(messageMenuFloat)\"\n            ></stream-message-actions-box>\n          </ng-template>\n          <ng-container>\n            <ng-container\n              *ngTemplateOutlet=\"\n                (customTemplatesService.messageActionsBoxTemplate$ | async) ||\n                  defaultMessageActionsBox;\n                context: getMessageActionsBoxContext()\n              \"\n            >\n            </ng-container>\n          </ng-container>\n        </float-ui-content>\n        <div\n          class=\"str-chat__message-bubble str-chat-angular__message-bubble\"\n          [class.str-chat-angular__message-bubble--attachment-modal-open]=\"\n            imageAttachmentModalState === 'opened'\n          \"\n          data-testid=\"message-bubble\"\n          [floatUiLoose]=\"messageMenuFloat\"\n          #messageMenuTrigger=\"floatUiLoose\"\n          #messageBubble\n          looseTrigger=\"none\"\n          [hideOnScroll]=\"false\"\n          [hideOnClickOutside]=\"true\"\n          [hideOnMouseLeave]=\"false\"\n          [disableAnimation]=\"true\"\n          [preventOverflow]=\"true\"\n          (onShown)=\"areMessageOptionsOpen = true\"\n          (onHidden)=\"areMessageOptionsOpen = false\"\n          [positionFixed]=\"true\"\n        >\n          <ng-container *ngIf=\"hasAttachment && !message?.quoted_message\">\n            <div class=\"str-chat__attachments-container\">\n              <ng-container\n                *ngTemplateOutlet=\"attachmentsTemplate\"\n              ></ng-container>\n            </div>\n          </ng-container>\n          <div\n            *ngIf=\"message?.text || (message?.quoted_message && hasAttachment)\"\n            class=\"str-chat__message-text\"\n            tabindex=\"0\"\n            [class.str-chat__message-text--pointer-cursor]=\"\n              (message?.status === 'failed' &&\n                message?.errorStatusCode !== 403) ||\n              (this.message?.type === 'error' &&\n                this.message?.moderation_details) ||\n              message?.message_text_updated_at\n            \"\n            (click)=\"messageClicked()\"\n            (keyup.enter)=\"messageClicked()\"\n          >\n            <div\n              data-testid=\"inner-message\"\n              class=\"str-chat__message-text-inner str-chat__message-simple-text-inner\"\n              [class.str-chat__message-light-text-inner--has-attachment]=\"\n                hasAttachment\n              \"\n            >\n              <ng-container *ngTemplateOutlet=\"quotedMessage\"></ng-container>\n              <ng-container *ngIf=\"hasAttachment && message?.quoted_message\">\n                <ng-container\n                  *ngTemplateOutlet=\"attachmentsTemplate\"\n                ></ng-container>\n              </ng-container>\n              <div\n                *ngIf=\"message?.type === 'error'\"\n                data-testid=\"client-error-message\"\n                class=\"str-chat__simple-message--error-message str-chat__message--error-message\"\n              >\n                <ng-container *ngIf=\"!message?.moderation_details\">{{\n                  \"streamChat.Error \u00B7 Unsent\" | translate\n                }}</ng-container>\n              </div>\n              <div\n                *ngIf=\"message?.status === 'failed'\"\n                data-testid=\"error-message\"\n                class=\"str-chat__simple-message--error-message str-chat__message--error-message\"\n              >\n                {{\n                  (message?.errorStatusCode === 403\n                    ? \"streamChat.Message Failed \u00B7 Unauthorized\"\n                    : \"streamChat.Message Failed \u00B7 Click to try again\"\n                  ) | translate\n                }}\n              </div>\n              <div #messageTextElement data-testid=\"text\">\n                <p>\n                  <ng-container *ngIf=\"messageTextParts; else defaultContent\">\n                    <!-- eslint-disable-next-line @angular-eslint/template/use-track-by-function -->\n                    <ng-container *ngFor=\"let part of messageTextParts\">\n                      <span\n                        *ngIf=\"part.type === 'text'; else mention\"\n                        [innerHTML]=\"part.content\"\n                      ></span>\n                      <ng-template #mention>\n                        <ng-template #defaultMention let-content=\"content\">\n                          <span class=\"str-chat__message-mention\">{{\n                            content\n                          }}</span>\n                        </ng-template>\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            (customTemplatesService.mentionTemplate$ | async) ||\n                              defaultMention;\n                            context: getMentionContext(part)\n                          \"\n                        ></ng-container>\n                      </ng-template>\n                    </ng-container>\n                  </ng-container>\n                  <ng-template #defaultContent>\n                    <ng-container *ngIf=\"displayAs === 'text'; else asHTML\">\n                      {{ messageText || \"\" }}\n                    </ng-container>\n                    <ng-template #asHTML\n                      ><span\n                        data-testid=\"html-content\"\n                        [innerHTML]=\"messageText\"\n                      ></span\n                    ></ng-template>\n                  </ng-template>\n                </p>\n              </div>\n            </div>\n          </div>\n          <stream-icon-placeholder\n            class=\"str-chat__message-error-icon\"\n            icon=\"error\"\n          ></stream-icon-placeholder>\n        </div>\n      </div>\n      <ng-container\n        *ngTemplateOutlet=\"replyCountButton; context: { message: message }\"\n      ></ng-container>\n\n      <ng-container *ngTemplateOutlet=\"messageDateAndSender\"></ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n\n<ng-template #deletedMessage>\n  <div data-testid=\"message-deleted-component\">\n    <div class=\"str-chat__message--deleted-inner\" translate>\n      streamChat.This message was deleted...\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #systemMessage>\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.systemMessageTemplate$ | async) ||\n        defaultSystemMessage;\n      context: getMessageContext()\n    \"\n  ></ng-container>\n  <ng-template #defaultSystemMessage let-messageInput=\"message\">\n    <div data-testid=\"system-message\" class=\"str-chat__message--system\">\n      <div class=\"str-chat__message--system__text\">\n        <div class=\"str-chat__message--system__line\"></div>\n        <p>{{ messageInput?.text }}</p>\n        <div class=\"str-chat__message--system__line\"></div>\n      </div>\n      <div class=\"str-chat__message--system__date\">\n        {{ parsedDate }}\n      </div>\n    </div>\n  </ng-template>\n</ng-template>\n\n<ng-template #quotedMessage>\n  <div\n    *ngIf=\"message?.quoted_message\"\n    class=\"quoted-message str-chat__quoted-message-preview\"\n    data-testid=\"quoted-message-container\"\n    [class.mine]=\"isSentByCurrentUser\"\n    (click)=\"\n      jumpToMessage(\n        (message?.quoted_message)!.id,\n        message?.quoted_message?.parent_id\n      )\n    \"\n    (keyup.enter)=\"\n      jumpToMessage(\n        (message?.quoted_message)!.id,\n        message?.quoted_message?.parent_id\n      )\n    \"\n  >\n    <stream-avatar-placeholder\n      data-testid=\"qouted-message-avatar\"\n      class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n      type=\"user\"\n      location=\"quoted-message-sender\"\n      [imageUrl]=\"message?.quoted_message?.user?.image\"\n      [name]=\"\n        message?.quoted_message?.user?.name || message?.quoted_message?.user?.id\n      \"\n      [user]=\"message?.quoted_message?.user || undefined\"\n    ></stream-avatar-placeholder>\n    <div class=\"quoted-message-inner str-chat__quoted-message-bubble\">\n      <ng-container\n        *ngIf=\"\n          message?.quoted_message?.attachments &&\n          message?.quoted_message?.attachments?.length\n        \"\n      >\n        <ng-template\n          #defaultAttachments\n          let-messageId=\"messageId\"\n          let-attachments=\"attachments\"\n          let-parentMessageId=\"parentMessageId\"\n          let-imageModalStateChangeHandler=\"imageModalStateChangeHandler\"\n        >\n          <stream-attachment-list\n            [messageId]=\"messageId\"\n            [attachments]=\"attachments\"\n            [parentMessageId]=\"parentMessageId\"\n            (imageModalStateChange)=\"imageModalStateChangeHandler($event)\"\n          ></stream-attachment-list>\n        </ng-template>\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.attachmentListTemplate$ | async) ||\n              defaultAttachments;\n            context: getQuotedMessageAttachmentListContext()\n          \"\n        ></ng-container>\n      </ng-container>\n      <div\n        data-testid=\"quoted-message-text\"\n        [innerHTML]=\"\n          message?.quoted_message?.translation ||\n          message?.quoted_message?.html ||\n          message?.quoted_message?.text\n        \"\n      ></div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #messageDateAndSender>\n  <ng-container>\n    <div\n      *ngIf=\"shouldDisplayTranslationNotice\"\n      class=\"str-chat__translation-notice\"\n      data-testid=\"translation-notice\"\n    >\n      <button\n        *ngIf=\"displayedMessageTextContent === 'translation'\"\n        data-testid=\"see-original\"\n        translate\n        (click)=\"displayOriginalMessage()\"\n        (keyup.enter)=\"displayOriginalMessage()\"\n      >\n        streamChat.See original (automatically translated)\n      </button>\n      <button\n        *ngIf=\"displayedMessageTextContent === 'original'\"\n        data-testid=\"see-translation\"\n        translate\n        (click)=\"displayTranslatedMessage()\"\n        (keyup.enter)=\"displayTranslatedMessage()\"\n      >\n        streamChat.See translation\n      </button>\n    </div>\n    <ng-container\n      *ngIf=\"customTemplatesService.customMessageMetadataTemplate$ | async\"\n    >\n      <div class=\"str-chat__custom-message-metadata\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.customMessageMetadataTemplate$ | async)!;\n            context: getMessageMetadataContext()\n          \"\n        ></ng-container>\n      </div>\n    </ng-container>\n    <div\n      class=\"str-chat__message-data str-chat__message-simple-data str-chat__message-metadata\"\n    >\n      <ng-container *ngTemplateOutlet=\"messageStatus\"></ng-container>\n\n      <span\n        *ngIf=\"!isSentByCurrentUser\"\n        data-testid=\"sender\"\n        class=\"str-chat__message-simple-name str-chat__message-sender-name\"\n      >\n        {{ message?.user?.name ? message?.user?.name : message?.user?.id }}\n      </span>\n      <span\n        data-testid=\"date\"\n        class=\"str-chat__message-simple-timestamp str-chat__message-simple-time\"\n      >\n        {{ parsedDate }}\n      </span>\n      <ng-container *ngIf=\"message?.message_text_updated_at\">\n        <span\n          data-testid=\"edited-flag\"\n          class=\"str-chat__mesage-simple-edited\"\n          translate\n          >streamChat.Edited</span\n        >\n        <div\n          data-testid=\"edited-timestamp\"\n          class=\"str-chat__message-edited-timestamp\"\n          [ngClass]=\"{\n            'str-chat__message-edited-timestamp--open': isEditedFlagOpened,\n            'str-chat__message-edited-timestamp--collapsed': !isEditedFlagOpened\n          }\"\n        >\n          <span translate>streamChat.Edited</span>\n          <time\n            dateTime=\"{{ message?.message_text_updated_at }}\"\n            title=\"{{ message?.message_text_updated_at }}\"\n          >\n            {{ pasedEditedDate }}\n          </time>\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #messageStatus>\n  <ng-container\n    *ngIf=\"\n      isSentByCurrentUser &&\n      ((isLastSentMessage && message?.status === 'received') ||\n        message?.status === 'sending')\n    \"\n  >\n    <ng-container *ngIf=\"message?.status === 'sending'; else sentStatus\">\n      <ng-container *ngTemplateOutlet=\"sendingStatus\"></ng-container>\n    </ng-container>\n    <ng-template #sentStatus>\n      <ng-container\n        *ngIf=\"\n          mode === 'main' && isMessageDeliveredAndRead && canDisplayReadStatus;\n          else deliveredStatus\n        \"\n      >\n        <ng-container *ngTemplateOutlet=\"readStatus\"></ng-container>\n      </ng-container>\n    </ng-template>\n    <ng-template #deliveredStatus>\n      <ng-container\n        *ngTemplateOutlet=\"\n          (customTemplatesService.deliveredStatusTemplate$ | async) ||\n            defaultDeliveredStatus;\n          context: getDeliveredStatusContext()\n        \"\n      ></ng-container>\n    </ng-template>\n    <ng-template #defaultDeliveredStatus>\n      <span\n        *ngIf=\"mode === 'main'\"\n        class=\"str-chat__message-simple-status str-chat__message-simple-status-angular str-chat__message-status\"\n        data-testid=\"delivered-indicator\"\n        tabindex=\"0\"\n        [floatUiLoose]=\"floatingContent\"\n        loosePlacement=\"top\"\n        [looseTrigger]=\"hasTouchSupport ? 'click' : 'hover'\"\n        [disableAnimation]=\"true\"\n        [hideOnClickOutside]=\"true\"\n        [positionFixed]=\"true\"\n        [preventOverflow]=\"true\"\n      >\n        <float-ui-content #floatingContent>\n          <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n            {{ \"streamChat.Delivered\" | translate }}\n          </div>\n        </float-ui-content>\n        <stream-icon-placeholder\n          data-testid=\"delivered-icon\"\n          icon=\"delivered\"\n        ></stream-icon-placeholder>\n      </span>\n    </ng-template>\n    <ng-template #sendingStatus>\n      <ng-container\n        *ngTemplateOutlet=\"\n          (customTemplatesService.sendingStatusTemplate$ | async) ||\n            defaultSendingStatus;\n          context: getSendingStatusContext()\n        \"\n      ></ng-container>\n    </ng-template>\n    <ng-template #defaultSendingStatus>\n      <span\n        class=\"str-chat__message-simple-status str-chat__message-simple-status-angular str-chat__message-status\"\n        data-testid=\"sending-indicator\"\n        tabindex=\"0\"\n        [floatUiLoose]=\"floatingContent\"\n        loosePlacement=\"top\"\n        [looseTrigger]=\"hasTouchSupport ? 'click' : 'hover'\"\n        [disableAnimation]=\"true\"\n        [hideOnClickOutside]=\"true\"\n        [positionFixed]=\"true\"\n        [preventOverflow]=\"true\"\n      >\n        <float-ui-content #floatingContent>\n          <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n            {{ \"streamChat.Sending...\" | translate }}\n          </div>\n        </float-ui-content>\n        <stream-loading-indicator-placeholder\n          data-testid=\"loading-indicator\"\n        ></stream-loading-indicator-placeholder>\n      </span>\n    </ng-template>\n    <ng-template #readStatus>\n      <ng-container\n        *ngTemplateOutlet=\"\n          (customTemplatesService.readStatusTemplate$ | async) ||\n            defaultReadStatus;\n          context: getReadStatusContext()\n        \"\n      ></ng-container>\n    </ng-template>\n    <ng-template #defaultReadStatus let-readByText=\"readByText\">\n      <span\n        class=\"str-chat__message-simple-status str-chat__message-simple-status-angular str-chat__message-status\"\n        data-testid=\"read-indicator\"\n        tabindex=\"0\"\n        [floatUiLoose]=\"floatingContent\"\n        loosePlacement=\"top\"\n        [looseTrigger]=\"hasTouchSupport ? 'click' : 'hover'\"\n        [disableAnimation]=\"true\"\n        [hideOnClickOutside]=\"true\"\n        [positionFixed]=\"true\"\n        [preventOverflow]=\"true\"\n      >\n        <float-ui-content #floatingContent>\n          <div\n            class=\"str-chat__tooltip str-chat__tooltip-angular\"\n            data-testid=\"read-by-tooltip\"\n          >\n            {{ readByText }}\n          </div>\n        </float-ui-content>\n        <stream-icon-placeholder icon=\"read\"></stream-icon-placeholder>\n      </span>\n    </ng-template>\n  </ng-container>\n</ng-template>\n\n<ng-template #replyCountButton>\n  <div\n    class=\"str-chat__message-simple-reply-button str-chat__message-replies-count-button-wrapper\"\n  >\n    <button\n      *ngIf=\"shouldDisplayThreadLink\"\n      class=\"str-chat__message-replies-count-button\"\n      data-testid=\"reply-count-button\"\n      (click)=\"setAsActiveParentMessage()\"\n    >\n      {{message?.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}\n      replies' | translate:replyCountParam)}}\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #attachmentsTemplate>\n  <ng-template\n    #defaultAttachments\n    let-messageId=\"messageId\"\n    let-attachments=\"attachments\"\n    let-parentMessageId=\"parentMessageId\"\n    let-imageModalStateChangeHandler=\"imageModalStateChangeHandler\"\n  >\n    <stream-attachment-list\n      [messageId]=\"messageId\"\n      [attachments]=\"attachments\"\n      [parentMessageId]=\"parentMessageId\"\n      (imageModalStateChange)=\"imageModalStateChangeHandler($event)\"\n    ></stream-attachment-list>\n  </ng-template>\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.attachmentListTemplate$ | async) ||\n        defaultAttachments;\n      context: getAttachmentListContext()\n    \"\n  ></ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.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: i9.AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { kind: "directive", type: i10.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i11.MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: ["isMine", "message", "messageTextHtmlElement", "enabledActions"] }, { kind: "component", type: i12.AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "parentMessageId", "attachments"], outputs: ["imageModalStateChange"] }, { kind: "component", type: i13.MessageReactionsComponent, selector: "stream-message-reactions", inputs: ["messageId", "messageReactionGroups", "messageReactionCounts", "latestReactions", "ownReactions"] }, { kind: "component", type: i14.IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "component", type: i15.LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder" }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MessageComponent, selector: "stream-message", inputs: { message: "message", enabledMessageActions: "enabledMessageActions", isLastSentMessage: "isLastSentMessage", mode: "mode", isHighlighted: "isHighlighted", scroll$: "scroll$" }, viewQueries: [{ propertyName: "messageMenuTrigger", first: true, predicate: ["messageMenuTrigger"], descendants: true }, { propertyName: "messageMenuFloat", first: true, predicate: ["messageMenuFloat"], descendants: true }, { propertyName: "messageTextElement", first: true, predicate: ["messageTextElement"], descendants: true }, { propertyName: "messageBubble", first: true, predicate: ["messageBubble"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #container\n  data-testid=\"message-container\"\n  class=\"str-chat__message-simple str-chat__message str-chat__message--{{\n    message?.type\n  }} str-chat__message--{{ message?.status }} {{\n    message?.text ? 'str-chat__message--has-text' : 'has-no-text'\n  }} str-chat__message-menu-{{ areMessageOptionsOpen ? 'opened' : 'closed' }}\"\n  [class.str-chat__message--me]=\"isSentByCurrentUser\"\n  [class.str-chat__message--other]=\"!isSentByCurrentUser\"\n  [class.str-chat__message-simple--me]=\"isSentByCurrentUser\"\n  [class.str-chat__message--has-attachment]=\"hasAttachment\"\n  [class.str-chat__message--with-reactions]=\"hasReactions\"\n  [class.str-chat__message--highlighted]=\"isHighlighted\"\n  [class.str-chat__message-with-thread-link]=\"shouldDisplayThreadLink\"\n  [class.str-chat__message-send-can-be-retried]=\"\n    (message?.status === 'failed' && message?.errorStatusCode !== 403) ||\n    (message?.type === 'error' && message?.moderation_details)\n  \"\n  [class.str-chat__message-with-touch-support]=\"hasTouchSupport\"\n  [class.str-chat__message-without-touch-support]=\"!hasTouchSupport\"\n>\n  <ng-container *ngIf=\"!message?.deleted_at; else deletedMessage\">\n    <ng-container *ngIf=\"message?.type !== 'system'; else systemMessage\">\n      <stream-avatar-placeholder\n        data-testid=\"avatar\"\n        class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n        type=\"user\"\n        location=\"message-sender\"\n        [imageUrl]=\"message?.user?.image\"\n        [name]=\"message?.user?.name || message?.user?.id\"\n        [user]=\"message?.user || undefined\"\n      ></stream-avatar-placeholder>\n      <div class=\"str-chat__message-inner\">\n        <div\n          *ngIf=\"!hasTouchSupport && areOptionsVisible\"\n          class=\"str-chat__message-simple__actions str-chat__message-options\"\n          data-testid=\"message-options\"\n          [class.str-chat__message-actions-open]=\"areMessageOptionsOpen\"\n        >\n          <div\n            #messageActionsToggle\n            data-testid=\"message-actions-container\"\n            class=\"str-chat__message-actions-container str-chat__message-simple__actions__action str-chat__message-simple__actions__action--options\"\n            [floatUiLoose]=\"messageMenuFloat\"\n            [looseTrigger]=\"\n              messageActionsService.customActionClickHandler ? 'none' : 'click'\n            \"\n            [hideOnScroll]=\"false\"\n            [hideOnClickOutside]=\"true\"\n            [hideOnMouseLeave]=\"false\"\n            [disableAnimation]=\"false\"\n            [preventOverflow]=\"true\"\n            [positionFixed]=\"true\"\n            (onSHown)=\"areMessageOptionsOpen = true\"\n            (onHidden)=\"areMessageOptionsOpen = false\"\n          >\n            <div\n              *ngIf=\"visibleMessageActionsCount > 0\"\n              class=\"str-chat__message-actions-box-button\"\n              data-testid=\"message-options-button\"\n              (click)=\"messageOptionsButtonClicked()\"\n              (keyup.enter)=\"messageOptionsButtonClicked()\"\n            >\n              <stream-icon-placeholder\n                icon=\"action\"\n                class=\"str-chat__message-action-icon\"\n              ></stream-icon-placeholder>\n            </div>\n          </div>\n        </div>\n        <div class=\"str-chat__message-reactions-host\">\n          <ng-template\n            #defaultMessageReactions\n            let-messageReactionCounts=\"messageReactionCounts\"\n            let-latestReactions=\"latestReactions\"\n            let-messageId=\"messageId\"\n            let-ownReactions=\"ownReactions\"\n            let-messageReactionGroups=\"messageReactionGroups\"\n          >\n            <stream-message-reactions\n              [messageReactionCounts]=\"messageReactionCounts\"\n              [latestReactions]=\"latestReactions\"\n              [messageId]=\"messageId\"\n              [ownReactions]=\"ownReactions\"\n              [messageReactionGroups]=\"messageReactionGroups\"\n            ></stream-message-reactions>\n          </ng-template>\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.messageReactionsTemplate$ | async) ||\n                defaultMessageReactions;\n              context: getMessageReactionsContext()\n            \"\n          ></ng-container>\n        </div>\n        <float-ui-content #messageMenuFloat>\n          <ng-template\n            #defaultMessageActionsBox\n            let-isMine=\"isMine\"\n            let-messageInput=\"message\"\n            let-enabledActions=\"enabledActions\"\n            let-messageTextHtmlElement=\"messageTextHtmlElement\"\n          >\n            <stream-message-actions-box\n              [isMine]=\"isMine\"\n              [message]=\"messageInput\"\n              [enabledActions]=\"enabledActions\"\n              [messageTextHtmlElement]=\"messageTextHtmlElement\"\n              (click)=\"messageActionsBoxClicked(messageMenuFloat)\"\n            ></stream-message-actions-box>\n          </ng-template>\n          <ng-container>\n            <ng-container\n              *ngTemplateOutlet=\"\n                (customTemplatesService.messageActionsBoxTemplate$ | async) ||\n                  defaultMessageActionsBox;\n                context: getMessageActionsBoxContext()\n              \"\n            >\n            </ng-container>\n          </ng-container>\n        </float-ui-content>\n        <div\n          class=\"str-chat__message-bubble str-chat-angular__message-bubble\"\n          [class.str-chat-angular__message-bubble--attachment-modal-open]=\"\n            imageAttachmentModalState === 'opened'\n          \"\n          data-testid=\"message-bubble\"\n          [floatUiLoose]=\"messageMenuFloat\"\n          #messageMenuTrigger=\"floatUiLoose\"\n          #messageBubble\n          looseTrigger=\"none\"\n          [hideOnScroll]=\"false\"\n          [hideOnClickOutside]=\"true\"\n          [hideOnMouseLeave]=\"false\"\n          [disableAnimation]=\"true\"\n          [preventOverflow]=\"true\"\n          (onShown)=\"areMessageOptionsOpen = true\"\n          (onHidden)=\"areMessageOptionsOpen = false\"\n          [positionFixed]=\"true\"\n        >\n          <ng-container *ngIf=\"hasAttachment && !message?.quoted_message\">\n            <div class=\"str-chat__attachments-container\">\n              <ng-container\n                *ngTemplateOutlet=\"attachmentsTemplate\"\n              ></ng-container>\n            </div>\n          </ng-container>\n          <div\n            *ngIf=\"message?.text || (message?.quoted_message && hasAttachment)\"\n            class=\"str-chat__message-text\"\n            tabindex=\"0\"\n            [class.str-chat__message-text--pointer-cursor]=\"\n              (message?.status === 'failed' &&\n                message?.errorStatusCode !== 403) ||\n              (this.message?.type === 'error' &&\n                this.message?.moderation_details) ||\n              message?.message_text_updated_at\n            \"\n            (click)=\"messageClicked()\"\n            (keyup.enter)=\"messageClicked()\"\n          >\n            <div\n              data-testid=\"inner-message\"\n              class=\"str-chat__message-text-inner str-chat__message-simple-text-inner\"\n              [class.str-chat__message-light-text-inner--has-attachment]=\"\n                hasAttachment\n              \"\n            >\n              <ng-container *ngTemplateOutlet=\"quotedMessage\"></ng-container>\n              <ng-container *ngIf=\"hasAttachment && message?.quoted_message\">\n                <ng-container\n                  *ngTemplateOutlet=\"attachmentsTemplate\"\n                ></ng-container>\n              </ng-container>\n              <div\n                *ngIf=\"message?.type === 'error'\"\n                data-testid=\"client-error-message\"\n                class=\"str-chat__simple-message--error-message str-chat__message--error-message\"\n              >\n                <ng-container *ngIf=\"!message?.moderation_details\">{{\n                  \"streamChat.Error \u00B7 Unsent\" | translate\n                }}</ng-container>\n              </div>\n              <div\n                *ngIf=\"message?.status === 'failed'\"\n                data-testid=\"error-message\"\n                class=\"str-chat__simple-message--error-message str-chat__message--error-message\"\n              >\n                {{\n                  (message?.errorStatusCode === 403\n                    ? \"streamChat.Message Failed \u00B7 Unauthorized\"\n                    : \"streamChat.Message Failed \u00B7 Click to try again\"\n                  ) | translate\n                }}\n              </div>\n              <div #messageTextElement data-testid=\"text\">\n                <p>\n                  <ng-container *ngIf=\"messageTextParts; else defaultContent\">\n                    <!-- eslint-disable-next-line @angular-eslint/template/use-track-by-function -->\n                    <ng-container *ngFor=\"let part of messageTextParts\">\n                      <span\n                        *ngIf=\"part.type === 'text'; else mention\"\n                        [innerHTML]=\"part.content\"\n                      ></span>\n                      <ng-template #mention>\n                        <ng-template #defaultMention let-content=\"content\">\n                          <span class=\"str-chat__message-mention\">{{\n                            content\n                          }}</span>\n                        </ng-template>\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            (customTemplatesService.mentionTemplate$ | async) ||\n                              defaultMention;\n                            context: getMentionContext(part)\n                          \"\n                        ></ng-container>\n                      </ng-template>\n                    </ng-container>\n                  </ng-container>\n                  <ng-template #defaultContent>\n                    <ng-container *ngIf=\"displayAs === 'text'; else asHTML\">\n                      {{ messageText || \"\" }}\n                    </ng-container>\n                    <ng-template #asHTML\n                      ><span\n                        data-testid=\"html-content\"\n                        [innerHTML]=\"messageText\"\n                      ></span\n                    ></ng-template>\n                  </ng-template>\n                </p>\n              </div>\n            </div>\n          </div>\n          <stream-icon-placeholder\n            class=\"str-chat__message-error-icon\"\n            icon=\"error\"\n          ></stream-icon-placeholder>\n        </div>\n      </div>\n      <ng-container\n        *ngTemplateOutlet=\"replyCountButton; context: { message: message }\"\n      ></ng-container>\n\n      <ng-container *ngTemplateOutlet=\"messageDateAndSender\"></ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n\n<ng-template #deletedMessage>\n  <div data-testid=\"message-deleted-component\">\n    <div class=\"str-chat__message--deleted-inner\" translate>\n      streamChat.This message was deleted...\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #systemMessage>\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.systemMessageTemplate$ | async) ||\n        defaultSystemMessage;\n      context: getMessageContext()\n    \"\n  ></ng-container>\n  <ng-template #defaultSystemMessage let-messageInput=\"message\">\n    <div data-testid=\"system-message\" class=\"str-chat__message--system\">\n      <div class=\"str-chat__message--system__text\">\n        <div class=\"str-chat__message--system__line\"></div>\n        <p>{{ messageInput?.text }}</p>\n        <div class=\"str-chat__message--system__line\"></div>\n      </div>\n      <div class=\"str-chat__message--system__date\">\n        {{ parsedDate }}\n      </div>\n    </div>\n  </ng-template>\n</ng-template>\n\n<ng-template #quotedMessage>\n  <div\n    *ngIf=\"message?.quoted_message\"\n    class=\"quoted-message str-chat__quoted-message-preview\"\n    data-testid=\"quoted-message-container\"\n    [class.mine]=\"isSentByCurrentUser\"\n    (click)=\"\n      jumpToMessage(\n        (message?.quoted_message)!.id,\n        message?.quoted_message?.parent_id\n      )\n    \"\n    (keyup.enter)=\"\n      jumpToMessage(\n        (message?.quoted_message)!.id,\n        message?.quoted_message?.parent_id\n      )\n    \"\n  >\n    <stream-avatar-placeholder\n      data-testid=\"qouted-message-avatar\"\n      class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n      type=\"user\"\n      location=\"quoted-message-sender\"\n      [imageUrl]=\"message?.quoted_message?.user?.image\"\n      [name]=\"\n        message?.quoted_message?.user?.name || message?.quoted_message?.user?.id\n      \"\n      [user]=\"message?.quoted_message?.user || undefined\"\n    ></stream-avatar-placeholder>\n    <div class=\"quoted-message-inner str-chat__quoted-message-bubble\">\n      <ng-container\n        *ngIf=\"\n          message?.quoted_message?.attachments &&\n          message?.quoted_message?.attachments?.length\n        \"\n      >\n        <ng-template\n          #defaultAttachments\n          let-messageId=\"messageId\"\n          let-attachments=\"attachments\"\n          let-parentMessageId=\"parentMessageId\"\n          let-imageModalStateChangeHandler=\"imageModalStateChangeHandler\"\n        >\n          <stream-attachment-list\n            [messageId]=\"messageId\"\n            [attachments]=\"attachments\"\n            [parentMessageId]=\"parentMessageId\"\n            (imageModalStateChange)=\"imageModalStateChangeHandler($event)\"\n          ></stream-attachment-list>\n        </ng-template>\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.attachmentListTemplate$ | async) ||\n              defaultAttachments;\n            context: getQuotedMessageAttachmentListContext()\n          \"\n        ></ng-container>\n      </ng-container>\n      <div\n        data-testid=\"quoted-message-text\"\n        [innerHTML]=\"\n          message?.quoted_message?.translation ||\n          message?.quoted_message?.html ||\n          message?.quoted_message?.text\n        \"\n      ></div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #messageDateAndSender>\n  <ng-container>\n    <div\n      *ngIf=\"shouldDisplayTranslationNotice\"\n      class=\"str-chat__translation-notice\"\n      data-testid=\"translation-notice\"\n    >\n      <button\n        *ngIf=\"displayedMessageTextContent === 'translation'\"\n        data-testid=\"see-original\"\n        translate\n        (click)=\"displayOriginalMessage()\"\n        (keyup.enter)=\"displayOriginalMessage()\"\n      >\n        streamChat.See original (automatically translated)\n      </button>\n      <button\n        *ngIf=\"displayedMessageTextContent === 'original'\"\n        data-testid=\"see-translation\"\n        translate\n        (click)=\"displayTranslatedMessage()\"\n        (keyup.enter)=\"displayTranslatedMessage()\"\n      >\n        streamChat.See translation\n      </button>\n    </div>\n    <ng-container\n      *ngIf=\"customTemplatesService.customMessageMetadataTemplate$ | async\"\n    >\n      <div class=\"str-chat__custom-message-metadata\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.customMessageMetadataTemplate$ | async)!;\n            context: getMessageMetadataContext()\n          \"\n        ></ng-container>\n      </div>\n    </ng-container>\n    <div\n      class=\"str-chat__message-data str-chat__message-simple-data str-chat__message-metadata\"\n    >\n      <ng-container *ngTemplateOutlet=\"messageStatus\"></ng-container>\n\n      <span\n        *ngIf=\"!isSentByCurrentUser\"\n        data-testid=\"sender\"\n        class=\"str-chat__message-simple-name str-chat__message-sender-name\"\n      >\n        {{ message?.user?.name ? message?.user?.name : message?.user?.id }}\n      </span>\n      <span\n        data-testid=\"date\"\n        class=\"str-chat__message-simple-timestamp str-chat__message-simple-time\"\n      >\n        {{ parsedDate }}\n      </span>\n      <ng-container *ngIf=\"message?.message_text_updated_at\">\n        <span\n          data-testid=\"edited-flag\"\n          class=\"str-chat__mesage-simple-edited\"\n          translate\n          >streamChat.Edited</span\n        >\n        <div\n          data-testid=\"edited-timestamp\"\n          class=\"str-chat__message-edited-timestamp\"\n          [ngClass]=\"{\n            'str-chat__message-edited-timestamp--open': isEditedFlagOpened,\n            'str-chat__message-edited-timestamp--collapsed': !isEditedFlagOpened\n          }\"\n        >\n          <span translate>streamChat.Edited</span>\n          <time\n            dateTime=\"{{ message?.message_text_updated_at }}\"\n            title=\"{{ message?.message_text_updated_at }}\"\n          >\n            {{ pasedEditedDate }}\n          </time>\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #messageStatus>\n  <ng-container\n    *ngIf=\"\n      isSentByCurrentUser &&\n      ((isLastSentMessage && message?.status === 'received') ||\n        message?.status === 'sending')\n    \"\n  >\n    <ng-container *ngIf=\"message?.status === 'sending'; else sentStatus\">\n      <ng-container *ngTemplateOutlet=\"sendingStatus\"></ng-container>\n    </ng-container>\n    <ng-template #sentStatus>\n      <ng-container\n        *ngIf=\"\n          mode === 'main' && isMessageDeliveredAndRead && canDisplayReadStatus;\n          else deliveredStatus\n        \"\n      >\n        <ng-container *ngTemplateOutlet=\"readStatus\"></ng-container>\n      </ng-container>\n    </ng-template>\n    <ng-template #deliveredStatus>\n      <ng-container\n        *ngTemplateOutlet=\"\n          (customTemplatesService.deliveredStatusTemplate$ | async) ||\n            defaultDeliveredStatus;\n          context: getDeliveredStatusContext()\n        \"\n      ></ng-container>\n    </ng-template>\n    <ng-template #defaultDeliveredStatus>\n      <span\n        *ngIf=\"mode === 'main'\"\n        class=\"str-chat__message-simple-status str-chat__message-simple-status-angular str-chat__message-status\"\n        data-testid=\"delivered-indicator\"\n        tabindex=\"0\"\n        [floatUiLoose]=\"floatingContent\"\n        loosePlacement=\"top\"\n        [looseTrigger]=\"hasTouchSupport ? 'click' : 'hover'\"\n        [disableAnimation]=\"true\"\n        [hideOnClickOutside]=\"true\"\n        [positionFixed]=\"true\"\n        [preventOverflow]=\"true\"\n      >\n        <float-ui-content #floatingContent>\n          <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n            {{ \"streamChat.Delivered\" | translate }}\n          </div>\n        </float-ui-content>\n        <stream-icon-placeholder\n          data-testid=\"delivered-icon\"\n          icon=\"delivered\"\n        ></stream-icon-placeholder>\n      </span>\n    </ng-template>\n    <ng-template #sendingStatus>\n      <ng-container\n        *ngTemplateOutlet=\"\n          (customTemplatesService.sendingStatusTemplate$ | async) ||\n            defaultSendingStatus;\n          context: getSendingStatusContext()\n        \"\n      ></ng-container>\n    </ng-template>\n    <ng-template #defaultSendingStatus>\n      <span\n        class=\"str-chat__message-simple-status str-chat__message-simple-status-angular str-chat__message-status\"\n        data-testid=\"sending-indicator\"\n        tabindex=\"0\"\n        [floatUiLoose]=\"floatingContent\"\n        loosePlacement=\"top\"\n        [looseTrigger]=\"hasTouchSupport ? 'click' : 'hover'\"\n        [disableAnimation]=\"true\"\n        [hideOnClickOutside]=\"true\"\n        [positionFixed]=\"true\"\n        [preventOverflow]=\"true\"\n      >\n        <float-ui-content #floatingContent>\n          <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n            {{ \"streamChat.Sending...\" | translate }}\n          </div>\n        </float-ui-content>\n        <stream-loading-indicator-placeholder\n          data-testid=\"loading-indicator\"\n        ></stream-loading-indicator-placeholder>\n      </span>\n    </ng-template>\n    <ng-template #readStatus>\n      <ng-container\n        *ngTemplateOutlet=\"\n          (customTemplatesService.readStatusTemplate$ | async) ||\n            defaultReadStatus;\n          context: getReadStatusContext()\n        \"\n      ></ng-container>\n    </ng-template>\n    <ng-template #defaultReadStatus let-readByText=\"readByText\">\n      <span\n        class=\"str-chat__message-simple-status str-chat__message-simple-status-angular str-chat__message-status\"\n        data-testid=\"read-indicator\"\n        tabindex=\"0\"\n        [floatUiLoose]=\"floatingContent\"\n        loosePlacement=\"top\"\n        [looseTrigger]=\"hasTouchSupport ? 'click' : 'hover'\"\n        [disableAnimation]=\"true\"\n        [hideOnClickOutside]=\"true\"\n        [positionFixed]=\"true\"\n        [preventOverflow]=\"true\"\n      >\n        <float-ui-content #floatingContent>\n          <div\n            class=\"str-chat__tooltip str-chat__tooltip-angular\"\n            data-testid=\"read-by-tooltip\"\n          >\n            {{ readByText }}\n          </div>\n        </float-ui-content>\n        <stream-icon-placeholder icon=\"read\"></stream-icon-placeholder>\n      </span>\n    </ng-template>\n  </ng-container>\n</ng-template>\n\n<ng-template #replyCountButton>\n  <div\n    class=\"str-chat__message-simple-reply-button str-chat__message-replies-count-button-wrapper\"\n  >\n    <button\n      *ngIf=\"shouldDisplayThreadLink\"\n      class=\"str-chat__message-replies-count-button\"\n      data-testid=\"reply-count-button\"\n      (click)=\"setAsActiveParentMessage()\"\n    >\n      {{message?.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}\n      replies' | translate:replyCountParam)}}\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #attachmentsTemplate>\n  <ng-template\n    #defaultAttachments\n    let-messageId=\"messageId\"\n    let-attachments=\"attachments\"\n    let-parentMessageId=\"parentMessageId\"\n    let-imageModalStateChangeHandler=\"imageModalStateChangeHandler\"\n  >\n    <stream-attachment-list\n      [messageId]=\"messageId\"\n      [attachments]=\"attachments\"\n      [parentMessageId]=\"parentMessageId\"\n      (imageModalStateChange)=\"imageModalStateChangeHandler($event)\"\n    ></stream-attachment-list>\n  </ng-template>\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.attachmentListTemplate$ | async) ||\n        defaultAttachments;\n      context: getAttachmentListContext()\n    \"\n  ></ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.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: i9.AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { kind: "directive", type: i10.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i11.IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "component", type: i12.LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder" }, { kind: "component", type: i13.MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: ["isMine", "message", "messageTextHtmlElement", "enabledActions"] }, { kind: "component", type: i14.AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "parentMessageId", "attachments"], outputs: ["imageModalStateChange"] }, { kind: "component", type: i15.MessageReactionsComponent, selector: "stream-message-reactions", inputs: ["messageId", "messageReactionGroups", "messageReactionCounts", "latestReactions", "ownReactions"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'stream-message', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  #container\n  data-testid=\"message-container\"\n  class=\"str-chat__message-simple str-chat__message str-chat__message--{{\n    message?.type\n  }} str-chat__message--{{ message?.status }} {{\n    message?.text ? 'str-chat__message--has-text' : 'has-no-text'\n  }} str-chat__message-menu-{{ areMessageOptionsOpen ? 'opened' : 'closed' }}\"\n  [class.str-chat__message--me]=\"isSentByCurrentUser\"\n  [class.str-chat__message--other]=\"!isSentByCurrentUser\"\n  [class.str-chat__message-simple--me]=\"isSentByCurrentUser\"\n  [class.str-chat__message--has-attachment]=\"hasAttachment\"\n  [class.str-chat__message--with-reactions]=\"hasReactions\"\n  [class.str-chat__message--highlighted]=\"isHighlighted\"\n  [class.str-chat__message-with-thread-link]=\"shouldDisplayThreadLink\"\n  [class.str-chat__message-send-can-be-retried]=\"\n    (message?.status === 'failed' && message?.errorStatusCode !== 403) ||\n    (message?.type === 'error' && message?.moderation_details)\n  \"\n  [class.str-chat__message-with-touch-support]=\"hasTouchSupport\"\n  [class.str-chat__message-without-touch-support]=\"!hasTouchSupport\"\n>\n  <ng-container *ngIf=\"!message?.deleted_at; else deletedMessage\">\n    <ng-container *ngIf=\"message?.type !== 'system'; else systemMessage\">\n      <stream-avatar-placeholder\n        data-testid=\"avatar\"\n        class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n        type=\"user\"\n        location=\"message-sender\"\n        [imageUrl]=\"message?.user?.image\"\n        [name]=\"message?.user?.name || message?.user?.id\"\n        [user]=\"message?.user || undefined\"\n      ></stream-avatar-placeholder>\n      <div class=\"str-chat__message-inner\">\n        <div\n          *ngIf=\"!hasTouchSupport && areOptionsVisible\"\n          class=\"str-chat__message-simple__actions str-chat__message-options\"\n          data-testid=\"message-options\"\n          [class.str-chat__message-actions-open]=\"areMessageOptionsOpen\"\n        >\n          <div\n            #messageActionsToggle\n            data-testid=\"message-actions-container\"\n            class=\"str-chat__message-actions-container str-chat__message-simple__actions__action str-chat__message-simple__actions__action--options\"\n            [floatUiLoose]=\"messageMenuFloat\"\n            [looseTrigger]=\"\n              messageActionsService.customActionClickHandler ? 'none' : 'click'\n            \"\n            [hideOnScroll]=\"false\"\n            [hideOnClickOutside]=\"true\"\n            [hideOnMouseLeave]=\"false\"\n            [disableAnimation]=\"false\"\n            [preventOverflow]=\"true\"\n            [positionFixed]=\"true\"\n            (onSHown)=\"areMessageOptionsOpen = true\"\n            (onHidden)=\"areMessageOptionsOpen = false\"\n          >\n            <div\n              *ngIf=\"visibleMessageActionsCount > 0\"\n              class=\"str-chat__message-actions-box-button\"\n              data-testid=\"message-options-button\"\n              (click)=\"messageOptionsButtonClicked()\"\n              (keyup.enter)=\"messageOptionsButtonClicked()\"\n            >\n              <stream-icon-placeholder\n                icon=\"action\"\n                class=\"str-chat__message-action-icon\"\n              ></stream-icon-placeholder>\n            </div>\n          </div>\n        </div>\n        <div class=\"str-chat__message-reactions-host\">\n          <ng-template\n            #defaultMessageReactions\n            let-messageReactionCounts=\"messageReactionCounts\"\n            let-latestReactions=\"latestReactions\"\n            let-messageId=\"messageId\"\n            let-ownReactions=\"ownReactions\"\n            let-messageReactionGroups=\"messageReactionGroups\"\n          >\n            <stream-message-reactions\n              [messageReactionCounts]=\"messageReactionCounts\"\n              [latestReactions]=\"latestReactions\"\n              [messageId]=\"messageId\"\n              [ownReactions]=\"ownReactions\"\n              [messageReactionGroups]=\"messageReactionGroups\"\n            ></stream-message-reactions>\n          </ng-template>\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.messageReactionsTemplate$ | async) ||\n                defaultMessageReactions;\n              context: getMessageReactionsContext()\n            \"\n          ></ng-container>\n        </div>\n        <float-ui-content #messageMenuFloat>\n          <ng-template\n            #defaultMessageActionsBox\n            let-isMine=\"isMine\"\n            let-messageInput=\"message\"\n            let-enabledActions=\"enabledActions\"\n            let-messageTextHtmlElement=\"messageTextHtmlElement\"\n          >\n            <stream-message-actions-box\n              [isMine]=\"isMine\"\n              [message]=\"messageInput\"\n              [enabledActions]=\"enabledActions\"\n              [messageTextHtmlElement]=\"messageTextHtmlElement\"\n              (click)=\"messageActionsBoxClicked(messageMenuFloat)\"\n            ></stream-message-actions-box>\n          </ng-template>\n          <ng-container>\n            <ng-container\n              *ngTemplateOutlet=\"\n                (customTemplatesService.messageActionsBoxTemplate$ | async) ||\n                  defaultMessageActionsBox;\n                context: getMessageActionsBoxContext()\n              \"\n            >\n            </ng-container>\n          </ng-container>\n        </float-ui-content>\n        <div\n          class=\"str-chat__message-bubble str-chat-angular__message-bubble\"\n          [class.str-chat-angular__message-bubble--attachment-modal-open]=\"\n            imageAttachmentModalState === 'opened'\n          \"\n          data-testid=\"message-bubble\"\n          [floatUiLoose]=\"messageMenuFloat\"\n          #messageMenuTrigger=\"floatUiLoose\"\n          #messageBubble\n          looseTrigger=\"none\"\n          [hideOnScroll]=\"false\"\n          [hideOnClickOutside]=\"true\"\n          [hideOnMouseLeave]=\"false\"\n          [disableAnimation]=\"true\"\n          [preventOverflow]=\"true\"\n          (onShown)=\"areMessageOptionsOpen = true\"\n          (onHidden)=\"areMessageOptionsOpen = false\"\n          [positionFixed]=\"true\"\n        >\n          <ng-container *ngIf=\"hasAttachment && !message?.quoted_message\">\n            <div class=\"str-chat__attachments-container\">\n              <ng-container\n                *ngTemplateOutlet=\"attachmentsTemplate\"\n              ></ng-container>\n            </div>\n          </ng-container>\n          <div\n            *ngIf=\"message?.text || (message?.quoted_message && hasAttachment)\"\n            class=\"str-chat__message-text\"\n            tabindex=\"0\"\n            [class.str-chat__message-text--pointer-cursor]=\"\n              (message?.status === 'failed' &&\n                message?.errorStatusCode !== 403) ||\n              (this.message?.type === 'error' &&\n                this.message?.moderation_details) ||\n              message?.message_text_updated_at\n            \"\n            (click)=\"messageClicked()\"\n            (keyup.enter)=\"messageClicked()\"\n          >\n            <div\n              data-testid=\"inner-message\"\n              class=\"str-chat__message-text-inner str-chat__message-simple-text-inner\"\n              [class.str-chat__message-light-text-inner--has-attachment]=\"\n                hasAttachment\n              \"\n            >\n              <ng-container *ngTemplateOutlet=\"quotedMessage\"></ng-container>\n              <ng-container *ngIf=\"hasAttachment && message?.quoted_message\">\n                <ng-container\n                  *ngTemplateOutlet=\"attachmentsTemplate\"\n                ></ng-container>\n              </ng-container>\n              <div\n                *ngIf=\"message?.type === 'error'\"\n                data-testid=\"client-error-message\"\n                class=\"str-chat__simple-message--error-message str-chat__message--error-message\"\n              >\n                <ng-container *ngIf=\"!message?.moderation_details\">{{\n                  \"streamChat.Error \u00B7 Unsent\" | translate\n                }}</ng-container>\n              </div>\n              <div\n                *ngIf=\"message?.status === 'failed'\"\n                data-testid=\"error-message\"\n                class=\"str-chat__simple-message--error-message str-chat__message--error-message\"\n              >\n                {{\n                  (message?.errorStatusCode === 403\n                    ? \"streamChat.Message Failed \u00B7 Unauthorized\"\n                    : \"streamChat.Message Failed \u00B7 Click to try again\"\n                  ) | translate\n                }}\n              </div>\n              <div #messageTextElement data-testid=\"text\">\n                <p>\n                  <ng-container *ngIf=\"messageTextParts; else defaultContent\">\n                    <!-- eslint-disable-next-line @angular-eslint/template/use-track-by-function -->\n                    <ng-container *ngFor=\"let part of messageTextParts\">\n                      <span\n                        *ngIf=\"part.type === 'text'; else mention\"\n                        [innerHTML]=\"part.content\"\n                      ></span>\n                      <ng-template #mention>\n                        <ng-template #defaultMention let-content=\"content\">\n                          <span class=\"str-chat__message-mention\">{{\n                            content\n                          }}</span>\n                        </ng-template>\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            (customTemplatesService.mentionTemplate$ | async) ||\n                              defaultMention;\n                            context: getMentionContext(part)\n                          \"\n                        ></ng-container>\n                      </ng-template>\n                    </ng-container>\n                  </ng-container>\n                  <ng-template #defaultContent>\n                    <ng-container *ngIf=\"displayAs === 'text'; else asHTML\">\n                      {{ messageText || \"\" }}\n                    </ng-container>\n                    <ng-template #asHTML\n                      ><span\n                        data-testid=\"html-content\"\n                        [innerHTML]=\"messageText\"\n                      ></span\n                    ></ng-template>\n                  </ng-template>\n                </p>\n              </div>\n            </div>\n          </div>\n          <stream-icon-placeholder\n            class=\"str-chat__message-error-icon\"\n            icon=\"error\"\n          ></stream-icon-placeholder>\n        </div>\n      </div>\n      <ng-container\n        *ngTemplateOutlet=\"replyCountButton; context: { message: message }\"\n      ></ng-container>\n\n      <ng-container *ngTemplateOutlet=\"messageDateAndSender\"></ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n\n<ng-template #deletedMessage>\n  <div data-testid=\"message-deleted-component\">\n    <div class=\"str-chat__message--deleted-inner\" translate>\n      streamChat.This message was deleted...\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #systemMessage>\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.systemMessageTemplate$ | async) ||\n        defaultSystemMessage;\n      context: getMessageContext()\n    \"\n  ></ng-container>\n  <ng-template #defaultSystemMessage let-messageInput=\"message\">\n    <div data-testid=\"system-message\" class=\"str-chat__message--system\">\n      <div class=\"str-chat__message--system__text\">\n        <div class=\"str-chat__message--system__line\"></div>\n        <p>{{ messageInput?.text }}</p>\n        <div class=\"str-chat__message--system__line\"></div>\n      </div>\n      <div class=\"str-chat__message--system__date\">\n        {{ parsedDate }}\n      </div>\n    </div>\n  </ng-template>\n</ng-template>\n\n<ng-template #quotedMessage>\n  <div\n    *ngIf=\"message?.quoted_message\"\n    class=\"quoted-message str-chat__quoted-message-preview\"\n    data-testid=\"quoted-message-container\"\n    [class.mine]=\"isSentByCurrentUser\"\n    (click)=\"\n      jumpToMessage(\n        (message?.quoted_message)!.id,\n        message?.quoted_message?.parent_id\n      )\n    \"\n    (keyup.enter)=\"\n      jumpToMessage(\n        (message?.quoted_message)!.id,\n        message?.quoted_message?.parent_id\n      )\n    \"\n  >\n    <stream-avatar-placeholder\n      data-testid=\"qouted-message-avatar\"\n      class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n      type=\"user\"\n      location=\"quoted-message-sender\"\n      [imageUrl]=\"message?.quoted_message?.user?.image\"\n      [name]=\"\n        message?.quoted_message?.user?.name || message?.quoted_message?.user?.id\n      \"\n      [user]=\"message?.quoted_message?.user || undefined\"\n    ></stream-avatar-placeholder>\n    <div class=\"quoted-message-inner str-chat__quoted-message-bubble\">\n      <ng-container\n        *ngIf=\"\n          message?.quoted_message?.attachments &&\n          message?.quoted_message?.attachments?.length\n        \"\n      >\n        <ng-template\n          #defaultAttachments\n          let-messageId=\"messageId\"\n          let-attachments=\"attachments\"\n          let-parentMessageId=\"parentMessageId\"\n          let-imageModalStateChangeHandler=\"imageModalStateChangeHandler\"\n        >\n          <stream-attachment-list\n            [messageId]=\"messageId\"\n            [attachments]=\"attachments\"\n            [parentMessageId]=\"parentMessageId\"\n            (imageModalStateChange)=\"imageModalStateChangeHandler($event)\"\n          ></stream-attachment-list>\n        </ng-template>\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.attachmentListTemplate$ | async) ||\n              defaultAttachments;\n            context: getQuotedMessageAttachmentListContext()\n          \"\n        ></ng-container>\n      </ng-container>\n      <div\n        data-testid=\"quoted-message-text\"\n        [innerHTML]=\"\n          message?.quoted_message?.translation ||\n          message?.quoted_message?.html ||\n          message?.quoted_message?.text\n        \"\n      ></div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #messageDateAndSender>\n  <ng-container>\n    <div\n      *ngIf=\"shouldDisplayTranslationNotice\"\n      class=\"str-chat__translation-notice\"\n      data-testid=\"translation-notice\"\n    >\n      <button\n        *ngIf=\"displayedMessageTextContent === 'translation'\"\n        data-testid=\"see-original\"\n        translate\n        (click)=\"displayOriginalMessage()\"\n        (keyup.enter)=\"displayOriginalMessage()\"\n      >\n        streamChat.See original (automatically translated)\n      </button>\n      <button\n        *ngIf=\"displayedMessageTextContent === 'original'\"\n        data-testid=\"see-translation\"\n        translate\n        (click)=\"displayTranslatedMessage()\"\n        (keyup.enter)=\"displayTranslatedMessage()\"\n      >\n        streamChat.See translation\n      </button>\n    </div>\n    <ng-container\n      *ngIf=\"customTemplatesService.customMessageMetadataTemplate$ | async\"\n    >\n      <div class=\"str-chat__custom-message-metadata\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.customMessageMetadataTemplate$ | async)!;\n            context: getMessageMetadataContext()\n          \"\n        ></ng-container>\n      </div>\n    </ng-container>\n    <div\n      class=\"str-chat__message-data str-chat__message-simple-data str-chat__message-metadata\"\n    >\n      <ng-container *ngTemplateOutlet=\"messageStatus\"></ng-container>\n\n      <span\n        *ngIf=\"!isSentByCurrentUser\"\n        data-testid=\"sender\"\n        class=\"str-chat__message-simple-name str-chat__message-sender-name\"\n      >\n        {{ message?.user?.name ? message?.user?.name : message?.user?.id }}\n      </span>\n      <span\n        data-testid=\"date\"\n        class=\"str-chat__message-simple-timestamp str-chat__message-simple-time\"\n      >\n        {{ parsedDate }}\n      </span>\n      <ng-container *ngIf=\"message?.message_text_updated_at\">\n        <span\n          data-testid=\"edited-flag\"\n          class=\"str-chat__mesage-simple-edited\"\n          translate\n          >streamChat.Edited</span\n        >\n        <div\n          data-testid=\"edited-timestamp\"\n          class=\"str-chat__message-edited-timestamp\"\n          [ngClass]=\"{\n            'str-chat__message-edited-timestamp--open': isEditedFlagOpened,\n            'str-chat__message-edited-timestamp--collapsed': !isEditedFlagOpened\n          }\"\n        >\n          <span translate>streamChat.Edited</span>\n          <time\n            dateTime=\"{{ message?.message_text_updated_at }}\"\n            title=\"{{ message?.message_text_updated_at }}\"\n          >\n            {{ pasedEditedDate }}\n          </time>\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #messageStatus>\n  <ng-container\n    *ngIf=\"\n      isSentByCurrentUser &&\n      ((isLastSentMessage && message?.status === 'received') ||\n        message?.status === 'sending')\n    \"\n  >\n    <ng-container *ngIf=\"message?.status === 'sending'; else sentStatus\">\n      <ng-container *ngTemplateOutlet=\"sendingStatus\"></ng-container>\n    </ng-container>\n    <ng-template #sentStatus>\n      <ng-container\n        *ngIf=\"\n          mode === 'main' && isMessageDeliveredAndRead && canDisplayReadStatus;\n          else deliveredStatus\n        \"\n      >\n        <ng-container *ngTemplateOutlet=\"readStatus\"></ng-container>\n      </ng-container>\n    </ng-template>\n    <ng-template #deliveredStatus>\n      <ng-container\n        *ngTemplateOutlet=\"\n          (customTemplatesService.deliveredStatusTemplate$ | async) ||\n            defaultDeliveredStatus;\n          context: getDeliveredStatusContext()\n        \"\n      ></ng-container>\n    </ng-template>\n    <ng-template #defaultDeliveredStatus>\n      <span\n        *ngIf=\"mode === 'main'\"\n        class=\"str-chat__message-simple-status str-chat__message-simple-status-angular str-chat__message-status\"\n        data-testid=\"delivered-indicator\"\n        tabindex=\"0\"\n        [floatUiLoose]=\"floatingContent\"\n        loosePlacement=\"top\"\n        [looseTrigger]=\"hasTouchSupport ? 'click' : 'hover'\"\n        [disableAnimation]=\"true\"\n        [hideOnClickOutside]=\"true\"\n        [positionFixed]=\"true\"\n        [preventOverflow]=\"true\"\n      >\n        <float-ui-content #floatingContent>\n          <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n            {{ \"streamChat.Delivered\" | translate }}\n          </div>\n        </float-ui-content>\n        <stream-icon-placeholder\n          data-testid=\"delivered-icon\"\n          icon=\"delivered\"\n        ></stream-icon-placeholder>\n      </span>\n    </ng-template>\n    <ng-template #sendingStatus>\n      <ng-container\n        *ngTemplateOutlet=\"\n          (customTemplatesService.sendingStatusTemplate$ | async) ||\n            defaultSendingStatus;\n          context: getSendingStatusContext()\n        \"\n      ></ng-container>\n    </ng-template>\n    <ng-template #defaultSendingStatus>\n      <span\n        class=\"str-chat__message-simple-status str-chat__message-simple-status-angular str-chat__message-status\"\n        data-testid=\"sending-indicator\"\n        tabindex=\"0\"\n        [floatUiLoose]=\"floatingContent\"\n        loosePlacement=\"top\"\n        [looseTrigger]=\"hasTouchSupport ? 'click' : 'hover'\"\n        [disableAnimation]=\"true\"\n        [hideOnClickOutside]=\"true\"\n        [positionFixed]=\"true\"\n        [preventOverflow]=\"true\"\n      >\n        <float-ui-content #floatingContent>\n          <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n            {{ \"streamChat.Sending...\" | translate }}\n          </div>\n        </float-ui-content>\n        <stream-loading-indicator-placeholder\n          data-testid=\"loading-indicator\"\n        ></stream-loading-indicator-placeholder>\n      </span>\n    </ng-template>\n    <ng-template #readStatus>\n      <ng-container\n        *ngTemplateOutlet=\"\n          (customTemplatesService.readStatusTemplate$ | async) ||\n            defaultReadStatus;\n          context: getReadStatusContext()\n        \"\n      ></ng-container>\n    </ng-template>\n    <ng-template #defaultReadStatus let-readByText=\"readByText\">\n      <span\n        class=\"str-chat__message-simple-status str-chat__message-simple-status-angular str-chat__message-status\"\n        data-testid=\"read-indicator\"\n        tabindex=\"0\"\n        [floatUiLoose]=\"floatingContent\"\n        loosePlacement=\"top\"\n        [looseTrigger]=\"hasTouchSupport ? 'click' : 'hover'\"\n        [disableAnimation]=\"true\"\n        [hideOnClickOutside]=\"true\"\n        [positionFixed]=\"true\"\n        [preventOverflow]=\"true\"\n      >\n        <float-ui-content #floatingContent>\n          <div\n            class=\"str-chat__tooltip str-chat__tooltip-angular\"\n            data-testid=\"read-by-tooltip\"\n          >\n            {{ readByText }}\n          </div>\n        </float-ui-content>\n        <stream-icon-placeholder icon=\"read\"></stream-icon-placeholder>\n      </span>\n    </ng-template>\n  </ng-container>\n</ng-template>\n\n<ng-template #replyCountButton>\n  <div\n    class=\"str-chat__message-simple-reply-button str-chat__message-replies-count-button-wrapper\"\n  >\n    <button\n      *ngIf=\"shouldDisplayThreadLink\"\n      class=\"str-chat__message-replies-count-button\"\n      data-testid=\"reply-count-button\"\n      (click)=\"setAsActiveParentMessage()\"\n    >\n      {{message?.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}\n      replies' | translate:replyCountParam)}}\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #attachmentsTemplate>\n  <ng-template\n    #defaultAttachments\n    let-messageId=\"messageId\"\n    let-attachments=\"attachments\"\n    let-parentMessageId=\"parentMessageId\"\n    let-imageModalStateChangeHandler=\"imageModalStateChangeHandler\"\n  >\n    <stream-attachment-list\n      [messageId]=\"messageId\"\n      [attachments]=\"attachments\"\n      [parentMessageId]=\"parentMessageId\"\n      (imageModalStateChange)=\"imageModalStateChangeHandler($event)\"\n    ></stream-attachment-list>\n  </ng-template>\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.attachmentListTemplate$ | async) ||\n        defaultAttachments;\n      context: getAttachmentListContext()\n    \"\n  ></ng-container>\n</ng-template>\n" }]

package/esm2020/lib/message-input/message-input-config.service.mjs CHANGED Viewed

@@ -25,6 +25,11 @@ export class MessageInputConfigService {
          * In `desktop` mode the `Enter` key will trigger message sending, in `mobile` mode the `Enter` key will insert a new line to the message input.
          */
         this.inputMode = 'desktop';
+        /**
+         * If `true` the recording will be sent as a message immediately after the recording is completed.
+         * If `false`, the recording will added to the attachment preview, and users can continue composing the message.
+         */
+        this.sendVoiceRecordingImmediately = true;
     }
 }
 MessageInputConfigService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageInputConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -35,4 +40,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                     providedIn: 'root',
                 }]
         }], ctorParameters: function () { return []; } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVzc2FnZS1pbnB1dC1jb25maWcuc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3N0cmVhbS1jaGF0LWFuZ3VsYXIvc3JjL2xpYi9tZXNzYWdlLWlucHV0L21lc3NhZ2UtaW5wdXQtY29uZmlnLnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7QUFFM0M7O0dBRUc7QUFJSCxNQUFNLE9BQU8seUJBQXlCO0lBdUJwQztRQXRCQTs7V0FFRztRQUNILHdCQUFtQixHQUF3QixJQUFJLENBQUM7UUFDaEQ7O1dBRUc7UUFDSCx1QkFBa0IsR0FBd0IsSUFBSSxDQUFDO1FBQy9DOztXQUVHO1FBQ0gsZ0NBQTJCLEdBQXdCLElBQUksQ0FBQztRQUN4RDs7V0FFRztRQUNILGlCQUFZLEdBQTBDLFNBQVMsQ0FBQztRQUVoRTs7V0FFRztRQUNILGNBQVMsR0FBeUIsU0FBUyxDQUFDO0lBRTdCLENBQUM7O3NIQXZCTCx5QkFBeUI7MEhBQXpCLHlCQUF5QixjQUZ4QixNQUFNOzJGQUVQLHlCQUF5QjtrQkFIckMsVUFBVTttQkFBQztvQkFDVixVQUFVLEVBQUUsTUFBTTtpQkFDbkIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJbmplY3RhYmxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbi8qKlxuICogVGhlIGBNZXNzYWdlSW5wdXRDb25maWdTZXJ2aWNlYCBpcyB1c2VkIHRvIGtlZXAgYSBjb25zaXN0ZW50IGNvbmZpZ3VyYXRpb24gYW1vbmcgdGhlIGRpZmZlcmVudCBbYE1lc3NhZ2VJbnB1dGBdKC4uL2NvbXBvbmVudHMvTWVzc2FnZUlucHV0Q29tcG9uZW50Lm1keCkgY29tcG9uZW50cyBpZiB5b3VyIFVJIGhhcyBtb3JlIHRoYW4gb25lIGlucHV0IGNvbXBvbmVudC5cbiAqL1xuQEluamVjdGFibGUoe1xuICBwcm92aWRlZEluOiAncm9vdCcsXG59KVxuZXhwb3J0IGNsYXNzIE1lc3NhZ2VJbnB1dENvbmZpZ1NlcnZpY2Uge1xuICAvKipcbiAgICogSWYgZmlsZSB1cGxvYWQgaXMgZW5hYmxlZCwgdGhlIHVzZXIgY2FuIG9wZW4gYSBmaWxlIHNlbGVjdG9yIGZyb20gdGhlIGlucHV0LiBQbGVhc2Ugbm90ZSB0aGF0IHRoZSB1c2VyIGFsc28gbmVlZHMgdG8gaGF2ZSB0aGUgbmVjZXNzYXJ5IFtjaGFubmVsIGNhcGFiaWxpdHldKGh0dHBzOi8vZ2V0c3RyZWFtLmlvL2NoYXQvZG9jcy9qYXZhc2NyaXB0L2NoYW5uZWxfY2FwYWJpbGl0aWVzLz9sYW5ndWFnZT1qYXZhc2NyaXB0KS5cbiAgICovXG4gIGlzRmlsZVVwbG9hZEVuYWJsZWQ6IGJvb2xlYW4gfCB1bmRlZmluZWQgPSB0cnVlO1xuICAvKipcbiAgICogSWYgdHJ1ZSwgdXNlcnMgY2FuIG1lbnRpb24gb3RoZXIgdXNlcnMgaW4gbWVzc2FnZXMuIFlvdSBhbHNvIFtuZWVkIHRvIHVzZSB0aGUgYEF1dG9jb21wbGV0ZVRleHRhcmVhYF0oLi4vY29uY2VwdHMvb3B0LWluLWFyY2hpdGVjdHVyZS5tZHgpIGZvciB0aGlzIGZlYXR1cmUgdG8gd29yay5cbiAgICovXG4gIGFyZU1lbnRpb25zRW5hYmxlZDogYm9vbGVhbiB8IHVuZGVmaW5lZCA9IHRydWU7XG4gIC8qKlxuICAgKiBJZiBgZmFsc2VgLCB1c2VycyBjYW4gb25seSB1cGxvYWQgb25lIGF0dGFjaG1lbnQgcGVyIG1lc3NhZ2VcbiAgICovXG4gIGlzTXVsdGlwbGVGaWxlVXBsb2FkRW5hYmxlZDogYm9vbGVhbiB8IHVuZGVmaW5lZCA9IHRydWU7XG4gIC8qKlxuICAgKiBUaGUgc2NvcGUgZm9yIHVzZXIgbWVudGlvbnMsIGVpdGhlciBtZW1iZXJzIG9mIHRoZSBjdXJyZW50IGNoYW5uZWwgb2YgbWVtYmVycyBvZiB0aGUgYXBwbGljYXRpb25cbiAgICovXG4gIG1lbnRpb25TY29wZTogJ2NoYW5uZWwnIHwgJ2FwcGxpY2F0aW9uJyB8IHVuZGVmaW5lZCA9ICdjaGFubmVsJztcblxuICAvKipcbiAgICogSW4gYGRlc2t0b3BgIG1vZGUgdGhlIGBFbnRlcmAga2V5IHdpbGwgdHJpZ2dlciBtZXNzYWdlIHNlbmRpbmcsIGluIGBtb2JpbGVgIG1vZGUgdGhlIGBFbnRlcmAga2V5IHdpbGwgaW5zZXJ0IGEgbmV3IGxpbmUgdG8gdGhlIG1lc3NhZ2UgaW5wdXQuXG4gICAqL1xuICBpbnB1dE1vZGU6ICdkZXNrdG9wJyB8ICdtb2JpbGUnID0gJ2Rlc2t0b3AnO1xuXG4gIGNvbnN0cnVjdG9yKCkge31cbn1cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVzc2FnZS1pbnB1dC1jb25maWcuc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3N0cmVhbS1jaGF0LWFuZ3VsYXIvc3JjL2xpYi9tZXNzYWdlLWlucHV0L21lc3NhZ2UtaW5wdXQtY29uZmlnLnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7QUFFM0M7O0dBRUc7QUFJSCxNQUFNLE9BQU8seUJBQXlCO0lBMkJwQztRQTFCQTs7V0FFRztRQUNILHdCQUFtQixHQUF3QixJQUFJLENBQUM7UUFDaEQ7O1dBRUc7UUFDSCx1QkFBa0IsR0FBd0IsSUFBSSxDQUFDO1FBQy9DOztXQUVHO1FBQ0gsZ0NBQTJCLEdBQXdCLElBQUksQ0FBQztRQUN4RDs7V0FFRztRQUNILGlCQUFZLEdBQTBDLFNBQVMsQ0FBQztRQUNoRTs7V0FFRztRQUNILGNBQVMsR0FBeUIsU0FBUyxDQUFDO1FBQzVDOzs7V0FHRztRQUNILGtDQUE2QixHQUFHLElBQUksQ0FBQztJQUV0QixDQUFDOztzSEEzQkwseUJBQXlCOzBIQUF6Qix5QkFBeUIsY0FGeEIsTUFBTTsyRkFFUCx5QkFBeUI7a0JBSHJDLFVBQVU7bUJBQUM7b0JBQ1YsVUFBVSxFQUFFLE1BQU07aUJBQ25CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSW5qZWN0YWJsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG4vKipcbiAqIFRoZSBgTWVzc2FnZUlucHV0Q29uZmlnU2VydmljZWAgaXMgdXNlZCB0byBrZWVwIGEgY29uc2lzdGVudCBjb25maWd1cmF0aW9uIGFtb25nIHRoZSBkaWZmZXJlbnQgW2BNZXNzYWdlSW5wdXRgXSguLi9jb21wb25lbnRzL01lc3NhZ2VJbnB1dENvbXBvbmVudC5tZHgpIGNvbXBvbmVudHMgaWYgeW91ciBVSSBoYXMgbW9yZSB0aGFuIG9uZSBpbnB1dCBjb21wb25lbnQuXG4gKi9cbkBJbmplY3RhYmxlKHtcbiAgcHJvdmlkZWRJbjogJ3Jvb3QnLFxufSlcbmV4cG9ydCBjbGFzcyBNZXNzYWdlSW5wdXRDb25maWdTZXJ2aWNlIHtcbiAgLyoqXG4gICAqIElmIGZpbGUgdXBsb2FkIGlzIGVuYWJsZWQsIHRoZSB1c2VyIGNhbiBvcGVuIGEgZmlsZSBzZWxlY3RvciBmcm9tIHRoZSBpbnB1dC4gUGxlYXNlIG5vdGUgdGhhdCB0aGUgdXNlciBhbHNvIG5lZWRzIHRvIGhhdmUgdGhlIG5lY2Vzc2FyeSBbY2hhbm5lbCBjYXBhYmlsaXR5XShodHRwczovL2dldHN0cmVhbS5pby9jaGF0L2RvY3MvamF2YXNjcmlwdC9jaGFubmVsX2NhcGFiaWxpdGllcy8/bGFuZ3VhZ2U9amF2YXNjcmlwdCkuXG4gICAqL1xuICBpc0ZpbGVVcGxvYWRFbmFibGVkOiBib29sZWFuIHwgdW5kZWZpbmVkID0gdHJ1ZTtcbiAgLyoqXG4gICAqIElmIHRydWUsIHVzZXJzIGNhbiBtZW50aW9uIG90aGVyIHVzZXJzIGluIG1lc3NhZ2VzLiBZb3UgYWxzbyBbbmVlZCB0byB1c2UgdGhlIGBBdXRvY29tcGxldGVUZXh0YXJlYWBdKC4uL2NvbmNlcHRzL29wdC1pbi1hcmNoaXRlY3R1cmUubWR4KSBmb3IgdGhpcyBmZWF0dXJlIHRvIHdvcmsuXG4gICAqL1xuICBhcmVNZW50aW9uc0VuYWJsZWQ6IGJvb2xlYW4gfCB1bmRlZmluZWQgPSB0cnVlO1xuICAvKipcbiAgICogSWYgYGZhbHNlYCwgdXNlcnMgY2FuIG9ubHkgdXBsb2FkIG9uZSBhdHRhY2htZW50IHBlciBtZXNzYWdlXG4gICAqL1xuICBpc011bHRpcGxlRmlsZVVwbG9hZEVuYWJsZWQ6IGJvb2xlYW4gfCB1bmRlZmluZWQgPSB0cnVlO1xuICAvKipcbiAgICogVGhlIHNjb3BlIGZvciB1c2VyIG1lbnRpb25zLCBlaXRoZXIgbWVtYmVycyBvZiB0aGUgY3VycmVudCBjaGFubmVsIG9mIG1lbWJlcnMgb2YgdGhlIGFwcGxpY2F0aW9uXG4gICAqL1xuICBtZW50aW9uU2NvcGU6ICdjaGFubmVsJyB8ICdhcHBsaWNhdGlvbicgfCB1bmRlZmluZWQgPSAnY2hhbm5lbCc7XG4gIC8qKlxuICAgKiBJbiBgZGVza3RvcGAgbW9kZSB0aGUgYEVudGVyYCBrZXkgd2lsbCB0cmlnZ2VyIG1lc3NhZ2Ugc2VuZGluZywgaW4gYG1vYmlsZWAgbW9kZSB0aGUgYEVudGVyYCBrZXkgd2lsbCBpbnNlcnQgYSBuZXcgbGluZSB0byB0aGUgbWVzc2FnZSBpbnB1dC5cbiAgICovXG4gIGlucHV0TW9kZTogJ2Rlc2t0b3AnIHwgJ21vYmlsZScgPSAnZGVza3RvcCc7XG4gIC8qKlxuICAgKiBJZiBgdHJ1ZWAgdGhlIHJlY29yZGluZyB3aWxsIGJlIHNlbnQgYXMgYSBtZXNzYWdlIGltbWVkaWF0ZWx5IGFmdGVyIHRoZSByZWNvcmRpbmcgaXMgY29tcGxldGVkLlxuICAgKiBJZiBgZmFsc2VgLCB0aGUgcmVjb3JkaW5nIHdpbGwgYWRkZWQgdG8gdGhlIGF0dGFjaG1lbnQgcHJldmlldywgYW5kIHVzZXJzIGNhbiBjb250aW51ZSBjb21wb3NpbmcgdGhlIG1lc3NhZ2UuXG4gICAqL1xuICBzZW5kVm9pY2VSZWNvcmRpbmdJbW1lZGlhdGVseSA9IHRydWU7XG5cbiAgY29uc3RydWN0b3IoKSB7fVxufVxuIl19