stream-chat-angular 4.46.0 → 4.47.0

package/fesm2015/stream-chat-angular.js

@@ -20,7 +20,7 @@ import transliterate from '@stream-io/transliterate';
 import * as i8 from 'angular-mentions';
 import { MentionModule } from 'angular-mentions';
 
-const version = '4.46.0';
+const version = '4.47.0';
 
 /**
  * The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](../components/NotificationListComponent.mdx) component displays the currently active notifications.
@@ -2574,6 +2574,14 @@ class CustomTemplatesService {
          * The template used to display the new messages indicator inside the [message list](../components/MessageListComponent.mdx)
          */
         this.newMessagesIndicatorTemplate$ = new BehaviorSubject(undefined);
+        /**
+         * The template to show if the main message list is empty
+         */
+        this.emptyMainMessageListPlaceholder$ = new BehaviorSubject(undefined);
+        /**
+         * The template to show if the thread message list is empty
+         */
+        this.emptyThreadMessageListPlaceholder$ = new BehaviorSubject(undefined);
     }
 }
 CustomTemplatesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: CustomTemplatesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -5271,12 +5279,13 @@ const isOnSameDay = (date1, date2) => {
  * The `MessageList` component renders a scrollable list of messages.
  */
 class MessageListComponent {
-    constructor(channelService, chatClientService, customTemplatesService, dateParser, ngZone) {
+    constructor(channelService, chatClientService, customTemplatesService, dateParser, ngZone, cdRef) {
         this.channelService = channelService;
         this.chatClientService = chatClientService;
         this.customTemplatesService = customTemplatesService;
         this.dateParser = dateParser;
         this.ngZone = ngZone;
+        this.cdRef = cdRef;
         /**
          * Determines if the message list should display channel messages or [thread messages](https://getstream.io/chat/docs/javascript/threads/?language=javascript).
          */
@@ -5316,8 +5325,10 @@ class MessageListComponent {
          * You can turn on and off the loading indicator that signals to users that more messages are being loaded to the message list
          */
         this.displayLoadingIndicator = true;
+        this.emptyMainMessageListTemplate = null;
+        this.emptyThreadMessageListTemplate = null;
         this.enabledMessageActions = [];
-        this.class = 'str-chat-angular__main-panel-inner str-chat-angular__message-list-host str-chat__main-panel-inner';
+        this.isEmpty = true;
         this.unreadMessageCount = 0;
         this.groupStyles = [];
         this.isNextMessageOnSeparateDate = [];
@@ -5384,6 +5395,9 @@ class MessageListComponent {
         this.usersTypingInChannel$ = this.channelService.usersTypingInChannel$;
         this.usersTypingInThread$ = this.channelService.usersTypingInThread$;
     }
+    get class() {
+        return `str-chat-angular__main-panel-inner str-chat-angular__message-list-host str-chat__main-panel-inner ${this.isEmpty ? 'str-chat-angular__message-list-host--empty' : ''}`;
+    }
     ngOnInit() {
         this.setMessages$();
     }
@@ -5424,6 +5438,20 @@ class MessageListComponent {
                 }
             }
         }));
+        this.subscriptions.push(this.customTemplatesService.emptyMainMessageListPlaceholder$.subscribe((template) => {
+            const isChanged = this.emptyMainMessageListTemplate !== template;
+            this.emptyMainMessageListTemplate = template || null;
+            if (isChanged) {
+                this.cdRef.detectChanges();
+            }
+        }));
+        this.subscriptions.push(this.customTemplatesService.emptyThreadMessageListPlaceholder$.subscribe((template) => {
+            const isChanged = this.emptyThreadMessageListTemplate !== template;
+            this.emptyThreadMessageListTemplate = template || null;
+            if (isChanged) {
+                this.cdRef.detectChanges();
+            }
+        }));
     }
     ngAfterViewChecked() {
         var _a, _b, _c, _d, _e, _f;
@@ -5565,6 +5593,11 @@ class MessageListComponent {
         var _a;
         return { replyCount: (_a = this.parentMessage) === null || _a === void 0 ? void 0 : _a.reply_count };
     }
+    get emptyListTemplate() {
+        return this.mode === 'main'
+            ? this.emptyMainMessageListTemplate
+            : this.emptyThreadMessageListTemplate;
+    }
     preserveScrollbarPosition() {
         this.scrollContainer.nativeElement.scrollTop =
             (this.prevScrollTop || 0) +
@@ -5609,6 +5642,10 @@ class MessageListComponent {
                 this.resetScrollState();
                 return;
             }
+            if (this.isEmpty) {
+                // cdRef.detectChanges() isn't enough here, test will fail
+                setTimeout(() => (this.isEmpty = false), 0);
+            }
             (_d = (_c = this.chatClientService.chatClient) === null || _c === void 0 ? void 0 : _c.logger) === null || _d === void 0 ? void 0 : _d.call(_c, 'info', `Received one or more messages`, {
                 tags: `message list ${this.mode}`,
             });
@@ -5654,6 +5691,7 @@ class MessageListComponent {
         }));
     }
     resetScrollState() {
+        this.isEmpty = true;
         this.latestMessage = undefined;
         this.hasNewMessages = true;
         this.isUserScrolled = false;
@@ -5726,8 +5764,8 @@ class MessageListComponent {
         return false;
     }
 }
-MessageListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageListComponent, deps: [{ token: ChannelService }, { token: ChatClientService }, { token: CustomTemplatesService }, { token: DateParserService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-MessageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageListComponent, selector: "stream-message-list", inputs: { mode: "mode", direction: "direction", messageOptionsTrigger: "messageOptionsTrigger", hideJumpToLatestButtonDuringScroll: "hideJumpToLatestButtonDuringScroll", customMessageActions: "customMessageActions", displayDateSeparator: "displayDateSeparator", dateSeparatorTextPos: "dateSeparatorTextPos", openMessageListAt: "openMessageListAt", displayLoadingIndicator: "displayLoadingIndicator" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "parentMessageElement", first: true, predicate: ["parentMessageElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #scrollContainer\n  data-testid=\"scroll-container\"\n  class=\"str-chat__list\"\n  style=\"overscroll-behavior: none\"\n>\n  <div class=\"str-chat__reverse-infinite-scroll str-chat__message-list-scroll\">\n    <ul\n      class=\"str-chat__ul\"\n      [class.str-chat__message-options-in-bubble]=\"\n        messageOptionsTrigger === 'message-bubble'\n      \"\n    >\n      <li\n        #parentMessageElement\n        *ngIf=\"mode === 'thread' && parentMessage\"\n        data-testid=\"parent-message\"\n        class=\"str-chat__parent-message-li\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            messageTemplateContainer;\n            context: { message: parentMessage, index: 'parent' }\n          \"\n        ></ng-container>\n        <div data-testid=\"reply-count\" class=\"str-chat__thread-start\">\n          {{parentMessage?.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}\n          replies' | translate:replyCountParam)}}\n        </div>\n      </li>\n      <stream-loading-indicator\n        data-testid=\"top-loading-indicator\"\n        *ngIf=\"\n          isLoading && direction === 'bottom-to-top' && displayLoadingIndicator\n        \"\n      ></stream-loading-indicator>\n      <ng-container *ngIf=\"messages$ | async as messages\">\n        <ng-container\n          *ngFor=\"\n            let message of messages;\n            let i = index;\n            let isFirst = first;\n            let isLast = last;\n            trackBy: trackByMessageId\n          \"\n        >\n          <ng-container *ngIf=\"isFirst\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                dateSeparator;\n                context: {\n                  date: message.created_at,\n                  parsedDate: parseDate(message.created_at),\n                  isNewMessage: false\n                }\n              \"\n            ></ng-container>\n          </ng-container>\n          <li\n            tabindex=\"0\"\n            data-testclass=\"message\"\n            class=\"str-chat__li str-chat__li--{{ groupStyles[i] }}\"\n            id=\"{{ message.id }}\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                messageTemplateContainer;\n                context: { message: message, index: i }\n              \"\n            ></ng-container>\n          </li>\n          <ng-container\n            *ngIf=\"\n              (lastReadMessageId === message.id &&\n                !isLast &&\n                direction === 'bottom-to-top' &&\n                !isSentByCurrentUser(messages[i + 1]) &&\n                (!displayDateSeparator || !isNextMessageOnSeparateDate[i])) ||\n              (direction === 'top-to-bottom' &&\n                !isLast &&\n                !isSentByCurrentUser(message) &&\n                lastReadMessageId === messages[i + 1].id)\n            \"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                customnewMessagesIndicatorTemplate ||\n                defaultNewMessagesIndicator\n              \"\n            ></ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"isNextMessageOnSeparateDate[i]\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                dateSeparator;\n                context: {\n                  date: messages[i + 1].created_at,\n                  parsedDate: parseDate(messages[i + 1].created_at),\n                  isNewMessage:\n                    (direction === 'bottom-to-top' &&\n                      message.id === lastReadMessageId &&\n                      !isSentByCurrentUser(messages[i + 1])) ||\n                    (direction === 'top-to-bottom' && false)\n                }\n              \"\n            ></ng-container>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n      <stream-loading-indicator\n        data-testid=\"bottom-loading-indicator\"\n        *ngIf=\"\n          isLoading && direction === 'top-to-bottom' && displayLoadingIndicator\n        \"\n      ></stream-loading-indicator>\n    </ul>\n    <ng-template #defaultTypingIndicator let-usersTyping$=\"usersTyping$\">\n      <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n      <ng-container *ngIf=\"$any(usersTyping$ | async) as users\">\n        <div\n          *ngIf=\"users.length > 0\"\n          data-testid=\"typing-indicator\"\n          class=\"str-chat__typing-indicator str-chat__typing-indicator--typing\"\n        >\n          <div class=\"str-chat__typing-indicator__dots\">\n            <span class=\"str-chat__typing-indicator__dot\"></span>\n            <span class=\"str-chat__typing-indicator__dot\"></span>\n            <span class=\"str-chat__typing-indicator__dot\"></span>\n          </div>\n          <div\n            data-testid=\"typing-users\"\n            class=\"str-chat__typing-indicator__users\"\n          >\n            {{\n              users.length === 1\n                ? (\"streamChat.user is typing\"\n                  | translate: { user: getTypingIndicatorText(users) })\n                : (\"streamChat.users are typing\"\n                  | translate: { users: getTypingIndicatorText(users) })\n            }}\n          </div>\n        </div>\n      </ng-container>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        typingIndicatorTemplate || defaultTypingIndicator;\n        context: getTypingIndicatorContext()\n      \"\n    ></ng-container>\n  </div>\n</div>\n<div class=\"str-chat__jump-to-latest-message\">\n  <button\n    data-testid=\"scroll-to-latest\"\n    *ngIf=\"isUserScrolled\"\n    class=\"\n      str-chat__message-notification-scroll-to-latest\n      str-chat__message-notification-scroll-to-latest-right\n      str-chat__circle-fab\n    \"\n    (keyup.enter)=\"jumpToLatestMessage()\"\n    (click)=\"jumpToLatestMessage()\"\n  >\n    <stream-icon\n      class=\"str-chat__jump-to-latest-icon str-chat__circle-fab-icon\"\n      [icon]=\"direction === 'bottom-to-top' ? 'arrow-down' : 'arrow-up'\"\n    ></stream-icon>\n    <div\n      *ngIf=\"unreadMessageCount > 0\"\n      class=\"\n        str-chat__message-notification\n        str-chat__message-notification-scroll-to-latest-unread-count\n        str-chat__jump-to-latest-unread-count\n      \"\n    >\n      {{ unreadMessageCount }}\n    </div>\n  </button>\n</div>\n\n<ng-template #messageTemplateContainer let-message=\"message\" let-index=\"index\">\n  <ng-template\n    #defaultMessageTemplate\n    let-messageInput=\"message\"\n    let-isLastSentMessage=\"isLastSentMessage\"\n    let-enabledMessageActions=\"enabledMessageActions\"\n    let-mode=\"mode\"\n    let-isHighlighted=\"isHighlighted\"\n    let-customActions=\"customActions\"\n  >\n    <stream-message\n      [message]=\"messageInput\"\n      [isLastSentMessage]=\"isLastSentMessage\"\n      [enabledMessageActions]=\"enabledMessageActions\"\n      [mode]=\"mode\"\n      [isHighlighted]=\"isHighlighted\"\n      [customActions]=\"customActions\"\n    ></stream-message>\n  </ng-template>\n  <ng-container\n    *ngTemplateOutlet=\"\n      messageTemplate || defaultMessageTemplate;\n      context: {\n        message: message,\n        isLastSentMessage: !!(\n          lastSentMessageId && message?.id === lastSentMessageId\n        ),\n        enabledMessageActions: enabledMessageActions,\n        mode: mode,\n        isHighlighted:\n          message?.id === highlightedMessageId &&\n          !isJumpingToLatestUnreadMessage,\n        customActions: customMessageActions\n      }\n    \"\n  ></ng-container>\n</ng-template>\n\n<ng-template\n  #dateSeparator\n  let-date=\"date\"\n  let-parsedDate=\"parsedDate\"\n  let-isNewMessage=\"isNewMessage\"\n>\n  <ng-container *ngIf=\"displayDateSeparator\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        customDateSeparatorTemplate || defaultDateSeparator;\n        context: {\n          date: date,\n          parsedDate: parsedDate,\n          isNewMessage: isNewMessage\n        }\n      \"\n    ></ng-container>\n  </ng-container>\n\n  <ng-template\n    #defaultDateSeparator\n    let-date=\"date\"\n    let-parsedDate=\"parsedDate\"\n    let-isNewMessage=\"isNewMessage\"\n  >\n    <div data-testid=\"date-separator\" class=\"str-chat__date-separator\">\n      <hr\n        *ngIf=\"\n          dateSeparatorTextPos === 'right' || dateSeparatorTextPos === 'center'\n        \"\n        class=\"str-chat__date-separator-line\"\n      />\n      <div class=\"str-chat__date-separator-date\">\n        {{ parsedDate }}\n        <span\n          *ngIf=\"isNewMessage\"\n          data-testid=\"new-messages-indicator-date-separator\"\n          >\u2022 {{ \"streamChat.New\" | translate }}</span\n        >\n      </div>\n      <hr\n        *ngIf=\"\n          dateSeparatorTextPos === 'left' || dateSeparatorTextPos === 'center'\n        \"\n        class=\"str-chat__date-separator-line\"\n      />\n    </div>\n  </ng-template>\n</ng-template>\n\n<ng-template #defaultNewMessagesIndicator>\n  <div data-testid=\"new-messages-indicator\" class=\"str-chat__date-separator\">\n    <hr\n      *ngIf=\"\n        dateSeparatorTextPos === 'right' || dateSeparatorTextPos === 'center'\n      \"\n      class=\"str-chat__date-separator-line\"\n    />\n    <div class=\"str-chat__date-separator-date\" translate>streamChat.New</div>\n    <hr\n      *ngIf=\"\n        dateSeparatorTextPos === 'left' || dateSeparatorTextPos === 'center'\n      \"\n      class=\"str-chat__date-separator-line\"\n    />\n  </div>\n</ng-template>\n", components: [{ type: LoadingIndicatorComponent, selector: "stream-loading-indicator", inputs: ["size", "color"] }, { type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: MessageComponent, selector: "stream-message", inputs: ["message", "enabledMessageActions", "isLastSentMessage", "mode", "isHighlighted", "customActions"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i9.TranslatePipe, "async": i5.AsyncPipe } });
+MessageListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageListComponent, deps: [{ token: ChannelService }, { token: ChatClientService }, { token: CustomTemplatesService }, { token: DateParserService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+MessageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageListComponent, selector: "stream-message-list", inputs: { mode: "mode", direction: "direction", messageOptionsTrigger: "messageOptionsTrigger", hideJumpToLatestButtonDuringScroll: "hideJumpToLatestButtonDuringScroll", customMessageActions: "customMessageActions", displayDateSeparator: "displayDateSeparator", dateSeparatorTextPos: "dateSeparatorTextPos", openMessageListAt: "openMessageListAt", displayLoadingIndicator: "displayLoadingIndicator" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "parentMessageElement", first: true, predicate: ["parentMessageElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #scrollContainer\n  data-testid=\"scroll-container\"\n  class=\"str-chat__list\"\n  style=\"overscroll-behavior: none\"\n>\n  <ng-container *ngIf=\"mode === 'main' && isEmpty && emptyListTemplate\">\n    <ng-container *ngTemplateOutlet=\"emptyListTemplate\"></ng-container>\n  </ng-container>\n  <div class=\"str-chat__reverse-infinite-scroll str-chat__message-list-scroll\">\n    <ul\n      class=\"str-chat__ul\"\n      [class.str-chat__message-options-in-bubble]=\"\n        messageOptionsTrigger === 'message-bubble'\n      \"\n    >\n      <li\n        #parentMessageElement\n        *ngIf=\"mode === 'thread' && parentMessage\"\n        data-testid=\"parent-message\"\n        class=\"str-chat__parent-message-li\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            messageTemplateContainer;\n            context: { message: parentMessage, index: 'parent' }\n          \"\n        ></ng-container>\n        <div data-testid=\"reply-count\" class=\"str-chat__thread-start\">\n          {{parentMessage?.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}\n          replies' | translate:replyCountParam)}}\n        </div>\n      </li>\n      <ng-container *ngIf=\"mode === 'thread' && isEmpty && emptyListTemplate\">\n        <ng-container *ngTemplateOutlet=\"emptyListTemplate\"></ng-container>\n      </ng-container>\n      <stream-loading-indicator\n        data-testid=\"top-loading-indicator\"\n        *ngIf=\"\n          isLoading && direction === 'bottom-to-top' && displayLoadingIndicator\n        \"\n      ></stream-loading-indicator>\n      <ng-container *ngIf=\"messages$ | async as messages\">\n        <ng-container\n          *ngFor=\"\n            let message of messages;\n            let i = index;\n            let isFirst = first;\n            let isLast = last;\n            trackBy: trackByMessageId\n          \"\n        >\n          <ng-container *ngIf=\"isFirst\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                dateSeparator;\n                context: {\n                  date: message.created_at,\n                  parsedDate: parseDate(message.created_at),\n                  isNewMessage: false\n                }\n              \"\n            ></ng-container>\n          </ng-container>\n          <li\n            tabindex=\"0\"\n            data-testclass=\"message\"\n            class=\"str-chat__li str-chat__li--{{ groupStyles[i] }}\"\n            id=\"{{ message.id }}\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                messageTemplateContainer;\n                context: { message: message, index: i }\n              \"\n            ></ng-container>\n          </li>\n          <ng-container\n            *ngIf=\"\n              (lastReadMessageId === message.id &&\n                !isLast &&\n                direction === 'bottom-to-top' &&\n                !isSentByCurrentUser(messages[i + 1]) &&\n                (!displayDateSeparator || !isNextMessageOnSeparateDate[i])) ||\n              (direction === 'top-to-bottom' &&\n                !isLast &&\n                !isSentByCurrentUser(message) &&\n                lastReadMessageId === messages[i + 1].id)\n            \"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                customnewMessagesIndicatorTemplate ||\n                defaultNewMessagesIndicator\n              \"\n            ></ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"isNextMessageOnSeparateDate[i]\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                dateSeparator;\n                context: {\n                  date: messages[i + 1].created_at,\n                  parsedDate: parseDate(messages[i + 1].created_at),\n                  isNewMessage:\n                    (direction === 'bottom-to-top' &&\n                      message.id === lastReadMessageId &&\n                      !isSentByCurrentUser(messages[i + 1])) ||\n                    (direction === 'top-to-bottom' && false)\n                }\n              \"\n            ></ng-container>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n      <stream-loading-indicator\n        data-testid=\"bottom-loading-indicator\"\n        *ngIf=\"\n          isLoading && direction === 'top-to-bottom' && displayLoadingIndicator\n        \"\n      ></stream-loading-indicator>\n    </ul>\n    <ng-template #defaultTypingIndicator let-usersTyping$=\"usersTyping$\">\n      <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n      <ng-container *ngIf=\"$any(usersTyping$ | async) as users\">\n        <div\n          *ngIf=\"users.length > 0\"\n          data-testid=\"typing-indicator\"\n          class=\"str-chat__typing-indicator str-chat__typing-indicator--typing\"\n        >\n          <div class=\"str-chat__typing-indicator__dots\">\n            <span class=\"str-chat__typing-indicator__dot\"></span>\n            <span class=\"str-chat__typing-indicator__dot\"></span>\n            <span class=\"str-chat__typing-indicator__dot\"></span>\n          </div>\n          <div\n            data-testid=\"typing-users\"\n            class=\"str-chat__typing-indicator__users\"\n          >\n            {{\n              users.length === 1\n                ? (\"streamChat.user is typing\"\n                  | translate: { user: getTypingIndicatorText(users) })\n                : (\"streamChat.users are typing\"\n                  | translate: { users: getTypingIndicatorText(users) })\n            }}\n          </div>\n        </div>\n      </ng-container>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        typingIndicatorTemplate || defaultTypingIndicator;\n        context: getTypingIndicatorContext()\n      \"\n    ></ng-container>\n  </div>\n</div>\n<div class=\"str-chat__jump-to-latest-message\">\n  <button\n    data-testid=\"scroll-to-latest\"\n    *ngIf=\"isUserScrolled\"\n    class=\"\n      str-chat__message-notification-scroll-to-latest\n      str-chat__message-notification-scroll-to-latest-right\n      str-chat__circle-fab\n    \"\n    (keyup.enter)=\"jumpToLatestMessage()\"\n    (click)=\"jumpToLatestMessage()\"\n  >\n    <stream-icon\n      class=\"str-chat__jump-to-latest-icon str-chat__circle-fab-icon\"\n      [icon]=\"direction === 'bottom-to-top' ? 'arrow-down' : 'arrow-up'\"\n    ></stream-icon>\n    <div\n      *ngIf=\"unreadMessageCount > 0\"\n      class=\"\n        str-chat__message-notification\n        str-chat__message-notification-scroll-to-latest-unread-count\n        str-chat__jump-to-latest-unread-count\n      \"\n    >\n      {{ unreadMessageCount }}\n    </div>\n  </button>\n</div>\n\n<ng-template #messageTemplateContainer let-message=\"message\" let-index=\"index\">\n  <ng-template\n    #defaultMessageTemplate\n    let-messageInput=\"message\"\n    let-isLastSentMessage=\"isLastSentMessage\"\n    let-enabledMessageActions=\"enabledMessageActions\"\n    let-mode=\"mode\"\n    let-isHighlighted=\"isHighlighted\"\n    let-customActions=\"customActions\"\n  >\n    <stream-message\n      [message]=\"messageInput\"\n      [isLastSentMessage]=\"isLastSentMessage\"\n      [enabledMessageActions]=\"enabledMessageActions\"\n      [mode]=\"mode\"\n      [isHighlighted]=\"isHighlighted\"\n      [customActions]=\"customActions\"\n    ></stream-message>\n  </ng-template>\n  <ng-container\n    *ngTemplateOutlet=\"\n      messageTemplate || defaultMessageTemplate;\n      context: {\n        message: message,\n        isLastSentMessage: !!(\n          lastSentMessageId && message?.id === lastSentMessageId\n        ),\n        enabledMessageActions: enabledMessageActions,\n        mode: mode,\n        isHighlighted:\n          message?.id === highlightedMessageId &&\n          !isJumpingToLatestUnreadMessage,\n        customActions: customMessageActions\n      }\n    \"\n  ></ng-container>\n</ng-template>\n\n<ng-template\n  #dateSeparator\n  let-date=\"date\"\n  let-parsedDate=\"parsedDate\"\n  let-isNewMessage=\"isNewMessage\"\n>\n  <ng-container *ngIf=\"displayDateSeparator\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        customDateSeparatorTemplate || defaultDateSeparator;\n        context: {\n          date: date,\n          parsedDate: parsedDate,\n          isNewMessage: isNewMessage\n        }\n      \"\n    ></ng-container>\n  </ng-container>\n\n  <ng-template\n    #defaultDateSeparator\n    let-date=\"date\"\n    let-parsedDate=\"parsedDate\"\n    let-isNewMessage=\"isNewMessage\"\n  >\n    <div data-testid=\"date-separator\" class=\"str-chat__date-separator\">\n      <hr\n        *ngIf=\"\n          dateSeparatorTextPos === 'right' || dateSeparatorTextPos === 'center'\n        \"\n        class=\"str-chat__date-separator-line\"\n      />\n      <div class=\"str-chat__date-separator-date\">\n        {{ parsedDate }}\n        <span\n          *ngIf=\"isNewMessage\"\n          data-testid=\"new-messages-indicator-date-separator\"\n          >\u2022 {{ \"streamChat.New\" | translate }}</span\n        >\n      </div>\n      <hr\n        *ngIf=\"\n          dateSeparatorTextPos === 'left' || dateSeparatorTextPos === 'center'\n        \"\n        class=\"str-chat__date-separator-line\"\n      />\n    </div>\n  </ng-template>\n</ng-template>\n\n<ng-template #defaultNewMessagesIndicator>\n  <div data-testid=\"new-messages-indicator\" class=\"str-chat__date-separator\">\n    <hr\n      *ngIf=\"\n        dateSeparatorTextPos === 'right' || dateSeparatorTextPos === 'center'\n      \"\n      class=\"str-chat__date-separator-line\"\n    />\n    <div class=\"str-chat__date-separator-date\" translate>streamChat.New</div>\n    <hr\n      *ngIf=\"\n        dateSeparatorTextPos === 'left' || dateSeparatorTextPos === 'center'\n      \"\n      class=\"str-chat__date-separator-line\"\n    />\n  </div>\n</ng-template>\n", components: [{ type: LoadingIndicatorComponent, selector: "stream-loading-indicator", inputs: ["size", "color"] }, { type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: MessageComponent, selector: "stream-message", inputs: ["message", "enabledMessageActions", "isLastSentMessage", "mode", "isHighlighted", "customActions"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i9.TranslatePipe, "async": i5.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageListComponent, decorators: [{
             type: Component,
             args: [{
@@ -5735,7 +5773,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
                     templateUrl: './message-list.component.html',
                     styles: [],
                 }]
-        }], ctorParameters: function () { return [{ type: ChannelService }, { type: ChatClientService }, { type: CustomTemplatesService }, { type: DateParserService }, { type: i0.NgZone }]; }, propDecorators: { mode: [{
+        }], ctorParameters: function () { return [{ type: ChannelService }, { type: ChatClientService }, { type: CustomTemplatesService }, { type: DateParserService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { mode: [{
                 type: Input
             }], direction: [{
                 type: Input
@@ -5753,15 +5791,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
                 type: Input
             }], displayLoadingIndicator: [{
                 type: Input
-            }], class: [{
-                type: HostBinding,
-                args: ['class']
             }], scrollContainer: [{
                 type: ViewChild,
                 args: ['scrollContainer']
             }], parentMessageElement: [{
                 type: ViewChild,
                 args: ['parentMessageElement']
+            }], class: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 
 /**