stream-chat-angular 4.67.0 → 4.68.1

package/fesm2015/stream-chat-angular.js

@@ -3,7 +3,7 @@ import * as i0 from '@angular/core';
 import { Injectable, Component, Input, EventEmitter, Output, ViewChild, InjectionToken, Directive, HostBinding, Inject, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import { BehaviorSubject, ReplaySubject, combineLatest, Subject, timer } from 'rxjs';
 import { StreamChat } from 'stream-chat';
-import { take, shareReplay, map, first, filter, tap, distinctUntilChanged, debounceTime } from 'rxjs/operators';
+import { take, shareReplay, map, first, filter, tap, distinctUntilChanged, debounceTime, throttleTime } from 'rxjs/operators';
 import { v4 } from 'uuid';
 import * as i9 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
@@ -20,7 +20,7 @@ import transliterate from '@stream-io/transliterate';
 import * as i8$1 from 'angular-mentions';
 import { MentionModule } from 'angular-mentions';
 
-const version = '4.67.0';
+const version = '4.68.1';
 
 /**
  * The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](../components/NotificationListComponent.mdx) component displays the currently active notifications.
@@ -111,6 +111,7 @@ class ChatClientService {
         this.pendingInvitesSubject = new BehaviorSubject([]);
         this.userSubject = new ReplaySubject(1);
         this.subscriptions = [];
+        this.trackPendingChannelInvites = true;
         this.events$ = this.notificationSubject.asObservable();
         this.connectionState$ = this.connectionStateSubject.asObservable();
         this.appSettings$ = this.appSettingsSubject.asObservable();
@@ -130,21 +131,23 @@ class ChatClientService {
      * @param clientOptions Setting to provide to the Stream client instance
      */
     init(apiKey, userOrId, userTokenOrProvider, clientOptions) {
-        var _a;
+        var _a, _b;
         return __awaiter(this, void 0, void 0, function* () {
+            this.trackPendingChannelInvites =
+                (clientOptions === null || clientOptions === void 0 ? void 0 : clientOptions.trackPendingChannelInvites) !== false;
             this.chatClient = StreamChat.getInstance(apiKey, clientOptions);
             this.chatClient.recoverStateOnReconnect = false;
             this.chatClient.devToken;
             let result;
             yield this.ngZone.runOutsideAngular(() => __awaiter(this, void 0, void 0, function* () {
-                var _b;
+                var _c;
                 const user = typeof userOrId === 'string' ? { id: userOrId } : userOrId;
                 try {
-                    result = yield ((_b = {
+                    result = yield ((_c = {
                         guest: () => this.chatClient.setGuestUser(user),
                         anonymous: () => this.chatClient.connectAnonymousUser(),
                         // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-                    }[`${userTokenOrProvider}`]) !== null && _b !== void 0 ? _b : (() => this.chatClient.connectUser(user, userTokenOrProvider)))();
+                    }[`${userTokenOrProvider}`]) !== null && _c !== void 0 ? _c : (() => this.chatClient.connectUser(user, userTokenOrProvider)))();
                 }
                 catch (error) {
                     this.notificationService.addPermanentNotification('streamChat.Error connecting to chat, refresh the page to try again.', 'error');
@@ -156,9 +159,14 @@ class ChatClientService {
                     this.chatClient.setUserAgent(`${sdkPrefix}-${version}-${this.chatClient.getUserAgent()}`);
                 }
             }));
-            const channels = yield this.chatClient.queryChannels({ invite: 'pending' }, // TODO: find out why we need this typecast
-            {}, { user_id: (_a = this.chatClient.user) === null || _a === void 0 ? void 0 : _a.id });
-            this.pendingInvitesSubject.next(channels);
+            if (((_a = this.chatClient.user) === null || _a === void 0 ? void 0 : _a.id) && this.trackPendingChannelInvites) {
+                const channels = yield this.chatClient.queryChannels({
+                    invite: 'pending',
+                    members: { $in: [(_b = this.chatClient.user) === null || _b === void 0 ? void 0 : _b.id] },
+                } // TODO: find out why we need this typecast
+                );
+                this.pendingInvitesSubject.next(channels);
+            }
             this.appSettingsSubject.next(undefined);
             this.subscriptions.push(this.chatClient.on((e) => {
                 this.updateUser(e);
@@ -241,6 +249,9 @@ class ChatClientService {
     }
     updatePendingInvites(e) {
         var _a, _b, _c;
+        if (!this.trackPendingChannelInvites) {
+            return;
+        }
         if (((_b = (_a = e.member) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b.id) === ((_c = this.chatClient.user) === null || _c === void 0 ? void 0 : _c.id) && e.channel) {
             const pendingInvites = this.pendingInvitesSubject.getValue();
             if (e.type === 'notification.invited') {
@@ -436,6 +447,23 @@ class ChannelService {
             .asObservable()
             .pipe(shareReplay(1));
     }
+    /**
+     * internal
+     */
+    removeOldMessageFromMessageList() {
+        const channel = this.activeChannelSubject.getValue();
+        const channelMessages = channel === null || channel === void 0 ? void 0 : channel.state.latestMessages;
+        const targetLength = Math.ceil(ChannelService.MAX_MESSAGE_COUNT_IN_MESSAGE_LIST / 2);
+        if (!channel ||
+            !channelMessages ||
+            channelMessages !== (channel === null || channel === void 0 ? void 0 : channel.state.latestMessages) ||
+            channelMessages.length <= targetLength) {
+            return;
+        }
+        const messages = channelMessages;
+        messages.splice(0, messages.length - targetLength);
+        this.activeChannelMessagesSubject.next(messages);
+    }
     /**
      * If set to false, read events won't be sent as new messages are received. If set to true active channel (if any) will immediately be marked as read.
      */
@@ -1005,6 +1033,12 @@ class ChannelService {
             }
         });
     }
+    /**
+     * Clears the currently selected message to jump
+     */
+    clearMessageJump() {
+        this.jumpToMessageSubject.next({ id: undefined, parentId: undefined });
+    }
     /**
      * Pins the given message in the channel
      * @param message
@@ -1798,7 +1832,11 @@ class ChannelService {
     }
 }
 /**
- * internal
+ * @internal
+ */
+ChannelService.MAX_MESSAGE_COUNT_IN_MESSAGE_LIST = 250;
+/**
+ * @internal
  */
 ChannelService.MAX_MESSAGE_REACTIONS_TO_FETCH = 1200;
 ChannelService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelService, deps: [{ token: ChatClientService }, { token: i0.NgZone }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.Injectable });
@@ -6432,6 +6470,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;
+        /**
+         * @internal
+         */
+        this.limitNumberOfMessagesInList = true;
         this.emptyMainMessageListTemplate = null;
         this.emptyThreadMessageListTemplate = null;
         this.enabledMessageActions = [];
@@ -6447,6 +6489,8 @@ class MessageListComponent {
         this.isLatestMessageInList = true;
         this.parsedDates = new Map();
         this.isViewInited = false;
+        this.isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+        this.forceRepaintSubject = new Subject();
         this.messageNotificationJumpClicked = () => {
             this.jumpToFirstUnreadMessage();
             this.isUnreadNotificationVisible = false;
@@ -6461,6 +6505,9 @@ class MessageListComponent {
         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.subscriptions.push(this.forceRepaintSubject.pipe(throttleTime(1000)).subscribe(() => {
+            this.forceRepaint();
+        }));
         this.subscriptions.push(this.channelService.activeChannel$.subscribe((channel) => {
             var _a, _b, _c, _d, _e, _f, _g;
             (_b = (_a = this.chatClientService.chatClient) === null || _a === void 0 ? void 0 : _a.logger) === null || _b === void 0 ? void 0 : _b.call(_a, 'info', `${(channel === null || channel === void 0 ? void 0 : channel.cid) || 'undefined'} selected`, { tags: `message list ${this.mode}` });
@@ -6473,6 +6520,9 @@ class MessageListComponent {
                 this.isUnreadNotificationVisible = false;
                 (_e = (_d = (_c = this.chatClientService) === null || _c === void 0 ? void 0 : _c.chatClient) === null || _d === void 0 ? void 0 : _d.logger) === null || _e === void 0 ? void 0 : _e.call(_d, 'info', `new channel is different from prev channel, reseting scroll state`, { tags: `message list ${this.mode}` });
                 this.parsedDates = new Map();
+                if (this.messageRemoveTimeout) {
+                    clearTimeout(this.messageRemoveTimeout);
+                }
                 this.resetScrollState();
                 this.channelId = channel === null || channel === void 0 ? void 0 : channel.id;
                 if (this.isViewInited) {
@@ -6621,6 +6671,9 @@ class MessageListComponent {
             .subscribe((config) => {
             var _a, _b;
             let messageId = undefined;
+            if (this.messageRemoveTimeout) {
+                clearTimeout(this.messageRemoveTimeout);
+            }
             if (this.mode === 'main') {
                 messageId = config.parentId || config.id;
             }
@@ -6647,6 +6700,7 @@ class MessageListComponent {
                     }
                 }
             }
+            this.channelService.clearMessageJump();
         }));
         this.subscriptions.push(this.customTemplatesService.emptyMainMessageListPlaceholder$.subscribe((template) => {
             const isChanged = this.emptyMainMessageListTemplate !== template;
@@ -6730,7 +6784,7 @@ class MessageListComponent {
         }
     }
     ngOnDestroy() {
-        var _a;
+        var _a, _b;
         this.subscriptions.forEach((s) => s.unsubscribe());
         (_a = this.newMessageSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
         if (this.scrollEndTimeout) {
@@ -6742,6 +6796,10 @@ class MessageListComponent {
         if (this.jumpToLatestButtonVisibilityTimeout) {
             clearTimeout(this.jumpToLatestButtonVisibilityTimeout);
         }
+        if (this.messageRemoveTimeout) {
+            clearTimeout(this.messageRemoveTimeout);
+        }
+        (_b = this.removeOldMessagesSubscription) === null || _b === void 0 ? void 0 : _b.unsubscribe();
     }
     trackByMessageId(index, item) {
         return item.id;
@@ -6756,7 +6814,9 @@ class MessageListComponent {
     scrollToBottom() {
         this.scrollContainer.nativeElement.scrollTop =
             this.scrollContainer.nativeElement.scrollHeight + 0.1;
-        this.forceRepaint();
+        if (this.isSafari) {
+            this.forceRepaintSubject.next();
+        }
     }
     scrollToTop() {
         this.scrollContainer.nativeElement.scrollTop = 0;
@@ -6799,7 +6859,7 @@ class MessageListComponent {
         }
         if (this.shouldLoadMoreMessages(scrollPosition)) {
             this.ngZone.run(() => {
-                var _a, _b;
+                var _a, _b, _c;
                 this.containerHeight = this.scrollContainer.nativeElement.scrollHeight;
                 let direction;
                 if (this.direction === 'top-to-bottom') {
@@ -6814,6 +6874,9 @@ class MessageListComponent {
                 if (result) {
                     (_b = (_a = this.chatClientService.chatClient) === null || _a === void 0 ? void 0 : _a.logger) === null || _b === void 0 ? void 0 : _b.call(_a, 'info', `Displaying loading indicator`, { tags: `message list ${this.mode}` });
                     this.isLoading = true;
+                    (_c = result.catch) === null || _c === void 0 ? void 0 : _c.call(result, () => {
+                        this.isLoading = false;
+                    });
                 }
                 this.cdRef.detectChanges();
             });
@@ -6882,16 +6945,20 @@ class MessageListComponent {
             position = 'top';
         }
         else if (Math.ceil(this.scrollContainer.nativeElement.scrollTop) +
-            this.scrollContainer.nativeElement.clientHeight >=
+            this.scrollContainer.nativeElement.clientHeight +
+            1 >=
             this.scrollContainer.nativeElement.scrollHeight) {
             position = 'bottom';
         }
         return position;
     }
     shouldLoadMoreMessages(scrollPosition) {
-        return scrollPosition !== 'middle' && !this.highlightedMessageId;
+        return (scrollPosition !== 'middle' &&
+            !this.highlightedMessageId &&
+            !this.isLoading);
     }
     setMessages$() {
+        var _a;
         this.messages$ = (this.mode === 'main'
             ? this.channelService.activeChannelMessages$
             : this.channelService.activeThreadMessages$).pipe(tap((messages) => {
@@ -6955,7 +7022,40 @@ class MessageListComponent {
                 lastReadMessageId: this.lastReadMessageId,
             }));
             this.isNextMessageOnSeparateDate = messages.map((m, i) => this.checkIfOnSeparateDates(m, messages[i + 1]));
-        }));
+        }), shareReplay(1));
+        (_a = this.removeOldMessagesSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        this.removeOldMessagesSubscription = combineLatest([
+            this.channelService.jumpToMessage$,
+            this.messages$,
+        ]).subscribe(([jumpToMessage, messages]) => {
+            if (this.limitNumberOfMessagesInList &&
+                this.mode === 'main' &&
+                messages.length >
+                    ChannelService.MAX_MESSAGE_COUNT_IN_MESSAGE_LIST * 0.5 &&
+                !this.isUserScrolled &&
+                !(jumpToMessage === null || jumpToMessage === void 0 ? void 0 : jumpToMessage.id) &&
+                this.isLatestMessageInList) {
+                if (this.messageRemoveTimeout) {
+                    clearTimeout(this.messageRemoveTimeout);
+                }
+                if (messages.length >= ChannelService.MAX_MESSAGE_COUNT_IN_MESSAGE_LIST) {
+                    this.channelService.removeOldMessageFromMessageList();
+                }
+                else {
+                    this.messageRemoveTimeout = setTimeout(() => {
+                        if (this.limitNumberOfMessagesInList &&
+                            this.mode === 'main' &&
+                            messages.length >
+                                ChannelService.MAX_MESSAGE_COUNT_IN_MESSAGE_LIST * 0.5 &&
+                            !this.isUserScrolled &&
+                            !this.highlightedMessageId &&
+                            this.isLatestMessageInList) {
+                            this.channelService.removeOldMessageFromMessageList();
+                        }
+                    }, 1500);
+                }
+            }
+        });
     }
     resetScrollState() {
         this.isEmpty = true;
@@ -7038,7 +7138,7 @@ class MessageListComponent {
     }
 }
 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 }, { token: MessageActionsService }], 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", displayUnreadSeparator: "displayUnreadSeparator", dateSeparatorTextPos: "dateSeparatorTextPos", openMessageListAt: "openMessageListAt", hideUnreadCountForNotificationAndIndicator: "hideUnreadCountForNotificationAndIndicator", 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: "<ng-container\n  *ngIf=\"\n    lastReadMessageId &&\n    isUnreadNotificationVisible &&\n    openMessageListAt === 'last-message' &&\n    displayUnreadSeparator\n  \"\n>\n  <ng-container\n    *ngTemplateOutlet=\"\n      customnewMessagesNotificationTemplate ||\n        defaultUnreadMessagesNotification;\n      context: {\n        unreadCount: unreadCount,\n        onDismiss: messageNotificationDismissClicked,\n        onJump: messageNotificationJumpClicked\n      }\n    \"\n  ></ng-container>\n</ng-container>\n<ng-template\n  #defaultUnreadMessagesNotification\n  let-unreadCount=\"unreadCount\"\n  let-onDismiss=\"onDismiss\"\n  let-onJump=\"onJump\"\n>\n  <div\n    class=\"str-chat__unread-messages-notification\"\n    data-testid=\"unread-messages-notification\"\n  >\n    <button\n      data-testid=\"unread-messages-notification-jump-to-message\"\n      (click)=\"onJump()\"\n    >\n      <ng-container\n        *ngIf=\"\n          unreadCount > 0 && !hideUnreadCountForNotificationAndIndicator;\n          else noUnreadCount\n        \"\n      >\n        {{\n          (unreadCount === 1\n            ? \"streamChat.\\{\\{count\\}\\} unread message\"\n            : \"streamChat.\\{\\{count\\}\\} unread messages\"\n          ) | translate: { count: unreadCount }\n        }}\n      </ng-container>\n      <ng-template #noUnreadCount>\n        {{ \"streamChat.Unread messages\" | translate }}\n      </ng-template>\n    </button>\n    <button\n      data-testid=\"unread-messages-notification-dismiss\"\n      (click)=\"onDismiss()\"\n    >\n      <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n    </button>\n  </div>\n</ng-template>\n<div #scrollContainer data-testid=\"scroll-container\" class=\"str-chat__list\">\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                }\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                direction === 'bottom-to-top') ||\n              (direction === 'top-to-bottom' &&\n                lastReadMessageId === messages[i + 1]?.id)\n            \"\n          >\n            <li\n              *ngIf=\"displayUnreadSeparator\"\n              id=\"stream-chat-new-message-indicator\"\n              data-testid=\"new-messages-indicator\"\n              class=\"str-chat__li str-chat__unread-messages-separator-wrapper\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  customnewMessagesIndicatorTemplate ||\n                    defaultNewMessagesIndicator;\n                  context: { unreadCount: unreadCount }\n                \"\n              ></ng-container>\n            </li>\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                }\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 && isJumpToLatestButtonVisible\"\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=\"newMessageCountWhileBeingScrolled > 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      {{ newMessageCountWhileBeingScrolled }}\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: message?.id === highlightedMessageId,\n        customActions: customMessageActions\n      }\n    \"\n  ></ng-container>\n</ng-template>\n\n<ng-template #dateSeparator let-date=\"date\" let-parsedDate=\"parsedDate\">\n  <ng-container *ngIf=\"displayDateSeparator\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        customDateSeparatorTemplate || defaultDateSeparator;\n        context: {\n          date: date,\n          parsedDate: parsedDate\n        }\n      \"\n    ></ng-container>\n  </ng-container>\n\n  <ng-template\n    #defaultDateSeparator\n    let-date=\"date\"\n    let-parsedDate=\"parsedDate\"\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      </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 let-unreadCount=\"unreadCount\">\n  <div class=\"str-chat__unread-messages-separator\">\n    <ng-container\n      *ngIf=\"\n        unreadCount > 0 && !hideUnreadCountForNotificationAndIndicator;\n        else noUnreadCount\n      \"\n    >\n      {{\n        (unreadCount === 1\n          ? \"streamChat.\\{\\{count\\}\\} unread message\"\n          : \"streamChat.\\{\\{count\\}\\} unread messages\"\n        ) | translate: { count: unreadCount }\n      }}\n    </ng-container>\n    <ng-template #noUnreadCount>\n      {{ \"streamChat.Unread messages\" | translate }}\n    </ng-template>\n  </div>\n</ng-template>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { 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: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i9.TranslatePipe, "async": i8.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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", displayUnreadSeparator: "displayUnreadSeparator", dateSeparatorTextPos: "dateSeparatorTextPos", openMessageListAt: "openMessageListAt", hideUnreadCountForNotificationAndIndicator: "hideUnreadCountForNotificationAndIndicator", displayLoadingIndicator: "displayLoadingIndicator", limitNumberOfMessagesInList: "limitNumberOfMessagesInList" }, 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: "<ng-container\n  *ngIf=\"\n    lastReadMessageId &&\n    isUnreadNotificationVisible &&\n    openMessageListAt === 'last-message' &&\n    displayUnreadSeparator\n  \"\n>\n  <ng-container\n    *ngTemplateOutlet=\"\n      customnewMessagesNotificationTemplate ||\n        defaultUnreadMessagesNotification;\n      context: {\n        unreadCount: unreadCount,\n        onDismiss: messageNotificationDismissClicked,\n        onJump: messageNotificationJumpClicked\n      }\n    \"\n  ></ng-container>\n</ng-container>\n<ng-template\n  #defaultUnreadMessagesNotification\n  let-unreadCount=\"unreadCount\"\n  let-onDismiss=\"onDismiss\"\n  let-onJump=\"onJump\"\n>\n  <div\n    class=\"str-chat__unread-messages-notification\"\n    data-testid=\"unread-messages-notification\"\n  >\n    <button\n      data-testid=\"unread-messages-notification-jump-to-message\"\n      (click)=\"onJump()\"\n    >\n      <ng-container\n        *ngIf=\"\n          unreadCount > 0 && !hideUnreadCountForNotificationAndIndicator;\n          else noUnreadCount\n        \"\n      >\n        {{\n          (unreadCount === 1\n            ? \"streamChat.\\{\\{count\\}\\} unread message\"\n            : \"streamChat.\\{\\{count\\}\\} unread messages\"\n          ) | translate: { count: unreadCount }\n        }}\n      </ng-container>\n      <ng-template #noUnreadCount>\n        {{ \"streamChat.Unread messages\" | translate }}\n      </ng-template>\n    </button>\n    <button\n      data-testid=\"unread-messages-notification-dismiss\"\n      (click)=\"onDismiss()\"\n    >\n      <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n    </button>\n  </div>\n</ng-template>\n<div #scrollContainer data-testid=\"scroll-container\" class=\"str-chat__list\">\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                }\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                direction === 'bottom-to-top') ||\n              (direction === 'top-to-bottom' &&\n                lastReadMessageId === messages[i + 1]?.id)\n            \"\n          >\n            <li\n              *ngIf=\"displayUnreadSeparator\"\n              id=\"stream-chat-new-message-indicator\"\n              data-testid=\"new-messages-indicator\"\n              class=\"str-chat__li str-chat__unread-messages-separator-wrapper\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  customnewMessagesIndicatorTemplate ||\n                    defaultNewMessagesIndicator;\n                  context: { unreadCount: unreadCount }\n                \"\n              ></ng-container>\n            </li>\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                }\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 && isJumpToLatestButtonVisible\"\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=\"newMessageCountWhileBeingScrolled > 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      {{ newMessageCountWhileBeingScrolled }}\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: message?.id === highlightedMessageId,\n        customActions: customMessageActions\n      }\n    \"\n  ></ng-container>\n</ng-template>\n\n<ng-template #dateSeparator let-date=\"date\" let-parsedDate=\"parsedDate\">\n  <ng-container *ngIf=\"displayDateSeparator\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        customDateSeparatorTemplate || defaultDateSeparator;\n        context: {\n          date: date,\n          parsedDate: parsedDate\n        }\n      \"\n    ></ng-container>\n  </ng-container>\n\n  <ng-template\n    #defaultDateSeparator\n    let-date=\"date\"\n    let-parsedDate=\"parsedDate\"\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      </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 let-unreadCount=\"unreadCount\">\n  <div class=\"str-chat__unread-messages-separator\">\n    <ng-container\n      *ngIf=\"\n        unreadCount > 0 && !hideUnreadCountForNotificationAndIndicator;\n        else noUnreadCount\n      \"\n    >\n      {{\n        (unreadCount === 1\n          ? \"streamChat.\\{\\{count\\}\\} unread message\"\n          : \"streamChat.\\{\\{count\\}\\} unread messages\"\n        ) | translate: { count: unreadCount }\n      }}\n    </ng-container>\n    <ng-template #noUnreadCount>\n      {{ \"streamChat.Unread messages\" | translate }}\n    </ng-template>\n  </div>\n</ng-template>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { 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: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i9.TranslatePipe, "async": i8.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageListComponent, decorators: [{
             type: Component,
             args: [{
@@ -7069,6 +7169,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
                 type: Input
             }], displayLoadingIndicator: [{
                 type: Input
+            }], limitNumberOfMessagesInList: [{
+                type: Input
             }], scrollContainer: [{
                 type: ViewChild,
                 args: ['scrollContainer']