stream-chat-angular 4.67.0 → 4.68.1

package/assets/version.d.ts

@@ -1 +1 @@
-export declare const version = "4.67.0";
+export declare const version = "4.68.1";

package/bundles/stream-chat-angular.umd.js

@@ -356,7 +356,7 @@
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
-    var version = '4.67.0';
+    var 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.
@@ -453,6 +453,7 @@
             this.pendingInvitesSubject = new rxjs.BehaviorSubject([]);
             this.userSubject = new rxjs.ReplaySubject(1);
             this.subscriptions = [];
+            this.trackPendingChannelInvites = true;
             this.events$ = this.notificationSubject.asObservable();
             this.connectionState$ = this.connectionStateSubject.asObservable();
             this.appSettings$ = this.appSettingsSubject.asObservable();
@@ -472,18 +473,20 @@
          * @param clientOptions Setting to provide to the Stream client instance
          */
         ChatClientService.prototype.init = function (apiKey, userOrId, userTokenOrProvider, clientOptions) {
-            var _a;
+            var _a, _b;
             return __awaiter(this, void 0, void 0, function () {
                 var result, channels, removeNotification;
                 var _this = this;
                 return __generator(this, function (_d) {
                     switch (_d.label) {
                         case 0:
+                            this.trackPendingChannelInvites =
+                                (clientOptions === null || clientOptions === void 0 ? void 0 : clientOptions.trackPendingChannelInvites) !== false;
                             this.chatClient = streamChat.StreamChat.getInstance(apiKey, clientOptions);
                             this.chatClient.recoverStateOnReconnect = false;
                             this.chatClient.devToken;
                             return [4 /*yield*/, this.ngZone.runOutsideAngular(function () { return __awaiter(_this, void 0, void 0, function () {
-                                    var _b, user, error_1, sdkPrefix;
+                                    var _c, user, error_1, sdkPrefix;
                                     var _this = this;
                                     return __generator(this, function (_d) {
                                         switch (_d.label) {
@@ -492,11 +495,11 @@
                                                 _d.label = 1;
                                             case 1:
                                                 _d.trys.push([1, 3, , 4]);
-                                                return [4 /*yield*/, ((_b = {
+                                                return [4 /*yield*/, ((_c = {
                                                         guest: function () { return _this.chatClient.setGuestUser(user); },
                                                         anonymous: function () { return _this.chatClient.connectAnonymousUser(); },
                                                         // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-                                                    }["" + userTokenOrProvider]) !== null && _b !== void 0 ? _b : (function () { return _this.chatClient.connectUser(user, userTokenOrProvider); }))()];
+                                                    }["" + userTokenOrProvider]) !== null && _c !== void 0 ? _c : (function () { return _this.chatClient.connectUser(user, userTokenOrProvider); }))()];
                                             case 2:
                                                 result = _d.sent();
                                                 return [3 /*break*/, 4];
@@ -516,11 +519,17 @@
                                 }); })];
                         case 1:
                             _d.sent();
-                            return [4 /*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 })];
+                            if (!(((_a = this.chatClient.user) === null || _a === void 0 ? void 0 : _a.id) && this.trackPendingChannelInvites)) return [3 /*break*/, 3];
+                            return [4 /*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
+                                )];
                         case 2:
                             channels = _d.sent();
                             this.pendingInvitesSubject.next(channels);
+                            _d.label = 3;
+                        case 3:
                             this.appSettingsSubject.next(undefined);
                             this.subscriptions.push(this.chatClient.on(function (e) {
                                 _this.updateUser(e);
@@ -636,6 +645,9 @@
         };
         ChatClientService.prototype.updatePendingInvites = function (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) {
                 var pendingInvites = this.pendingInvitesSubject.getValue();
                 if (e.type === 'notification.invited') {
@@ -838,6 +850,23 @@
                 .asObservable()
                 .pipe(operators.shareReplay(1));
         }
+        /**
+         * internal
+         */
+        ChannelService.prototype.removeOldMessageFromMessageList = function () {
+            var channel = this.activeChannelSubject.getValue();
+            var channelMessages = channel === null || channel === void 0 ? void 0 : channel.state.latestMessages;
+            var 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;
+            }
+            var messages = channelMessages;
+            messages.splice(0, messages.length - targetLength);
+            this.activeChannelMessagesSubject.next(messages);
+        };
         Object.defineProperty(ChannelService.prototype, "shouldMarkActiveChannelAsRead", {
             /**
              * 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.
@@ -1557,6 +1586,12 @@
                 });
             });
         };
+        /**
+         * Clears the currently selected message to jump
+         */
+        ChannelService.prototype.clearMessageJump = function () {
+            this.jumpToMessageSubject.next({ id: undefined, parentId: undefined });
+        };
         /**
          * Pins the given message in the channel
          * @param message
@@ -2458,7 +2493,11 @@
         return ChannelService;
     }());
     /**
-     * internal
+     * @internal
+     */
+    ChannelService.MAX_MESSAGE_COUNT_IN_MESSAGE_LIST = 250;
+    /**
+     * @internal
      */
     ChannelService.MAX_MESSAGE_REACTIONS_TO_FETCH = 1200;
     ChannelService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelService, deps: [{ token: ChatClientService }, { token: i0__namespace.NgZone }, { token: NotificationService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
@@ -7426,6 +7465,10 @@
              * 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 = [];
@@ -7441,6 +7484,8 @@
             this.isLatestMessageInList = true;
             this.parsedDates = new Map();
             this.isViewInited = false;
+            this.isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+            this.forceRepaintSubject = new rxjs.Subject();
             this.messageNotificationJumpClicked = function () {
                 _this.jumpToFirstUnreadMessage();
                 _this.isUnreadNotificationVisible = false;
@@ -7460,6 +7505,9 @@
         });
         MessageListComponent.prototype.ngOnInit = function () {
             var _this = this;
+            this.subscriptions.push(this.forceRepaintSubject.pipe(operators.throttleTime(1000)).subscribe(function () {
+                _this.forceRepaint();
+            }));
             this.subscriptions.push(this.channelService.activeChannel$.subscribe(function (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 });
@@ -7472,6 +7520,9 @@
                     _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) {
@@ -7619,6 +7670,9 @@
                 .subscribe(function (config) {
                 var _a, _b;
                 var messageId = undefined;
+                if (_this.messageRemoveTimeout) {
+                    clearTimeout(_this.messageRemoveTimeout);
+                }
                 if (_this.mode === 'main') {
                     messageId = config.parentId || config.id;
                 }
@@ -7645,6 +7699,7 @@
                         }
                     }
                 }
+                _this.channelService.clearMessageJump();
             }));
             this.subscriptions.push(this.customTemplatesService.emptyMainMessageListPlaceholder$.subscribe(function (template) {
                 var isChanged = _this.emptyMainMessageListTemplate !== template;
@@ -7729,7 +7784,7 @@
             }
         };
         MessageListComponent.prototype.ngOnDestroy = function () {
-            var _a;
+            var _a, _b;
             this.subscriptions.forEach(function (s) { return s.unsubscribe(); });
             (_a = this.newMessageSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
             if (this.scrollEndTimeout) {
@@ -7741,6 +7796,10 @@
             if (this.jumpToLatestButtonVisibilityTimeout) {
                 clearTimeout(this.jumpToLatestButtonVisibilityTimeout);
             }
+            if (this.messageRemoveTimeout) {
+                clearTimeout(this.messageRemoveTimeout);
+            }
+            (_b = this.removeOldMessagesSubscription) === null || _b === void 0 ? void 0 : _b.unsubscribe();
         };
         MessageListComponent.prototype.trackByMessageId = function (index, item) {
             return item.id;
@@ -7755,7 +7814,9 @@
         MessageListComponent.prototype.scrollToBottom = function () {
             this.scrollContainer.nativeElement.scrollTop =
                 this.scrollContainer.nativeElement.scrollHeight + 0.1;
-            this.forceRepaint();
+            if (this.isSafari) {
+                this.forceRepaintSubject.next();
+            }
         };
         MessageListComponent.prototype.scrollToTop = function () {
             this.scrollContainer.nativeElement.scrollTop = 0;
@@ -7799,7 +7860,7 @@
             }
             if (this.shouldLoadMoreMessages(scrollPosition)) {
                 this.ngZone.run(function () {
-                    var _a, _b;
+                    var _a, _b, _c;
                     _this.containerHeight = _this.scrollContainer.nativeElement.scrollHeight;
                     var direction;
                     if (_this.direction === 'top-to-bottom') {
@@ -7814,6 +7875,9 @@
                     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, function () {
+                            _this.isLoading = false;
+                        });
                     }
                     _this.cdRef.detectChanges();
                 });
@@ -7890,17 +7954,21 @@
                 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;
         };
         MessageListComponent.prototype.shouldLoadMoreMessages = function (scrollPosition) {
-            return scrollPosition !== 'middle' && !this.highlightedMessageId;
+            return (scrollPosition !== 'middle' &&
+                !this.highlightedMessageId &&
+                !this.isLoading);
         };
         MessageListComponent.prototype.setMessages$ = function () {
             var _this = this;
+            var _a;
             this.messages$ = (this.mode === 'main'
                 ? this.channelService.activeChannelMessages$
                 : this.channelService.activeThreadMessages$).pipe(operators.tap(function (messages) {
@@ -7963,7 +8031,41 @@
                     lastReadMessageId: _this.lastReadMessageId,
                 }); });
                 _this.isNextMessageOnSeparateDate = messages.map(function (m, i) { return _this.checkIfOnSeparateDates(m, messages[i + 1]); });
-            }));
+            }), operators.shareReplay(1));
+            (_a = this.removeOldMessagesSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+            this.removeOldMessagesSubscription = rxjs.combineLatest([
+                this.channelService.jumpToMessage$,
+                this.messages$,
+            ]).subscribe(function (_k) {
+                var _l = __read(_k, 2), jumpToMessage = _l[0], messages = _l[1];
+                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(function () {
+                            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);
+                    }
+                }
+            });
         };
         MessageListComponent.prototype.resetScrollState = function () {
             this.isEmpty = true;
@@ -8055,7 +8157,7 @@
         return MessageListComponent;
     }());
     MessageListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageListComponent, deps: [{ token: ChannelService }, { token: ChatClientService }, { token: CustomTemplatesService }, { token: DateParserService }, { token: i0__namespace.NgZone }, { token: i0__namespace.ChangeDetectorRef }, { token: MessageActionsService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MessageListComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i9__namespace.TranslatePipe, "async": i8__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    MessageListComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i9__namespace.TranslatePipe, "async": i8__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageListComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -8086,6 +8188,8 @@
                     type: i0.Input
                 }], displayLoadingIndicator: [{
                     type: i0.Input
+                }], limitNumberOfMessagesInList: [{
+                    type: i0.Input
                 }], scrollContainer: [{
                     type: i0.ViewChild,
                     args: ['scrollContainer']