stream-chat-angular 5.0.0 → 5.1.0

package/fesm2015/stream-chat-angular.mjs

@@ -1,7 +1,7 @@
 import { __awaiter } from 'tslib';
 import * as i0 from '@angular/core';
 import { Injectable, Component, Input, EventEmitter, Output, ViewChild, HostBinding, ChangeDetectionStrategy, InjectionToken, Directive, Inject, NgModule } from '@angular/core';
-import { BehaviorSubject, ReplaySubject, combineLatest, take as take$1, Subject, timer } from 'rxjs';
+import { BehaviorSubject, ReplaySubject, combineLatest, take as take$1, Subject, timer, merge, switchMap, distinctUntilChanged, pairwise, filter as filter$1, of, map as map$1 } from 'rxjs';
 import { StreamChat } from 'stream-chat';
 import { take, shareReplay, map, first, filter, tap, debounceTime, throttleTime } from 'rxjs/operators';
 import { v4 } from 'uuid';
@@ -20,7 +20,7 @@ import transliterate from '@stream-io/transliterate';
 import * as i8$1 from 'angular-mentions';
 import { MentionModule } from 'angular-mentions';
 
-const version = '5.0.0';
+const version = '5.1.0';
 
 /**
  * The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](../components/NotificationListComponent.mdx) component displays the currently active notifications.
@@ -437,6 +437,7 @@ class ChannelService {
         this.chatClientService = chatClientService;
         this.ngZone = ngZone;
         this.notificationService = notificationService;
+        this.messagePageSize = 25;
         this.channelsSubject = new BehaviorSubject(undefined);
         this.activeChannelSubject = new BehaviorSubject(undefined);
         this.activeChannelMessagesSubject = new BehaviorSubject([]);
@@ -448,7 +449,6 @@ class ChannelService {
         this.activeThreadMessagesSubject = new BehaviorSubject([]);
         this.jumpToMessageSubject = new BehaviorSubject({ id: undefined, parentId: undefined });
         this.latestMessageDateByUserByChannelsSubject = new BehaviorSubject({});
-        this.messagePageSize = 25;
         this.attachmentMaxSizeFallbackInMB = 100;
         this.messageToQuoteSubject = new BehaviorSubject(undefined);
         this.usersTypingInChannelSubject = new BehaviorSubject([]);
@@ -556,23 +556,6 @@ 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.
      */
@@ -1469,6 +1452,12 @@ class ChannelService {
     get activeChannelMessages() {
         return this.activeChannelMessagesSubject.getValue() || [];
     }
+    /**
+     * The current thread replies
+     */
+    get activeChannelThreadReplies() {
+        return this.activeThreadMessagesSubject.getValue() || [];
+    }
     /**
      * Get the last 1200 reactions of a message in the current active channel. If you need to fetch more reactions please use the [following endpoint](https://getstream.io/chat/docs/javascript/send_reaction/?language=javascript#paginating-reactions).
      * @param messageId
@@ -1556,7 +1545,7 @@ class ChannelService {
                 return;
             }
             const messageIndex = messages.findIndex((m) => { var _a; return m.id === ((_a = event === null || event === void 0 ? void 0 : event.message) === null || _a === void 0 ? void 0 : _a.id); });
-            if (messageIndex !== -1) {
+            if (messageIndex !== -1 || event.type === 'message.deleted') {
                 isThreadReply
                     ? this.activeThreadMessagesSubject.next([...messages])
                     : this.activeChannelMessagesSubject.next([...messages]);
@@ -1944,10 +1933,6 @@ class ChannelService {
         });
     }
 }
-/**
- * @internal
- */
-ChannelService.MAX_MESSAGE_COUNT_IN_MESSAGE_LIST = 250;
 /**
  * @internal
  */
@@ -2725,6 +2710,9 @@ class AvatarComponent {
             this.setFallbackChannelImage();
         }
     }
+    ngOnDestroy() {
+        this.subscriptions.forEach((s) => s.unsubscribe());
+    }
     setFallbackChannelImage() {
         if (this.type !== 'channel') {
             this.fallbackChannelImage = undefined;
@@ -3204,7 +3192,7 @@ class MessageActionsService {
                 actionHandler: (message) => {
                     void this.channelService.markMessageUnread(message.id);
                 },
-                isVisible: (enabledActions, isMine, message) => enabledActions.indexOf('read-events') !== -1 && !message.parent_id,
+                isVisible: (enabledActions, _, message) => enabledActions.indexOf('read-events') !== -1 && !message.parent_id,
             },
             {
                 actionName: 'quote',
@@ -3220,7 +3208,7 @@ class MessageActionsService {
                 actionHandler: (message) => {
                     void this.channelService.setAsActiveParentMessage(message);
                 },
-                isVisible: (enabledActions, isMine, message) => enabledActions.indexOf('send-reply') !== -1 && !message.parent_id,
+                isVisible: (enabledActions, _, message) => enabledActions.indexOf('send-reply') !== -1 && !message.parent_id,
             },
             {
                 actionName: 'pin',
@@ -3241,7 +3229,7 @@ class MessageActionsService {
                         yield this.chatClientService.flagMessage(message.id);
                         this.notificationService.addTemporaryNotification('streamChat.Message has been successfully flagged', 'success');
                     }
-                    catch (err) {
+                    catch (error) {
                         this.notificationService.addTemporaryNotification('streamChat.Error adding flag');
                     }
                 }),
@@ -4158,7 +4146,7 @@ class ChannelListComponent {
             this.isLoadingMoreChannels = false;
         });
     }
-    trackByChannelId(index, item) {
+    trackByChannelId(_, item) {
         return item.cid;
     }
 }
@@ -4408,7 +4396,7 @@ class VoiceRecordingComponent {
                     : this.audioElement.nativeElement.pause();
                 this.isError = false;
             }
-            catch (e) {
+            catch (error) {
                 this.isError = true;
             }
         });
@@ -6365,6 +6353,350 @@ const isOnSameDay = (date1, date2) => {
         date1.getDate() === date2.getDate());
 };
 
+/**
+ * The `VirtualizedListService` removes items from a list that are not currently displayed. This is a high-level overview of how it works:
+ * - Create a new instance for each list that needs virtualization
+ * - Input: Provide a reactive stream that emits all items in the list
+ * - Input: Provide a reactive stream that emit the current scroll position (top, middle or bottom)
+ * - Input: maximum number of items that are allowed in the list (in practice the service can make the virtualized list half this number, you should take this into account when choosing the value)
+ * - Output: The service will emit the current list of displayed items via the virtualized items reactive stream
+ * - For simplicity, the service won't track the height of the items, nor it needs an exact scroll location -> this is how removing items work:
+ *   - If scroll location is bottom/top items around the current bottom/top item will be emitted in the virtualized items stream
+ *   - If scroll location is middle, the service won't remove items, if new items are received, those will be appended to the virtualized list  (this means that in theory the list can grow very big if a lot of new items are received while the user is scrolled somewhere, this is a trade-off for the simplicity of no height tracking)
+ *   - Since there is no height tracking, you should make sure to provide a maximum number that is big enough to fill the biggest expected screen size twice
+ * - If the user scrolls to the bottom/top and there are no more local items to show, the service will trigger a query to load more items
+ *   - Input: you should provide the page size to use, in order for the service to determine if loading is necessary
+ *
+ * The `VirtualizedMessageListService` provides an implementation for the message list component.
+ */
+class VirtualizedListService {
+    constructor(allItems$, scrollPosition$, jumpToItem$, pageSize = 25, maxItemCount = pageSize * 4) {
+        this.allItems$ = allItems$;
+        this.scrollPosition$ = scrollPosition$;
+        this.jumpToItem$ = jumpToItem$;
+        this.pageSize = pageSize;
+        this.maxItemCount = maxItemCount;
+        this.queryStateSubject = new BehaviorSubject({
+            state: 'success',
+        });
+        this.bufferOnTop = 0;
+        this.bufferOnBottom = 0;
+        this.loadFromBuffer$ = new Subject();
+        this.virtualizedItemsSubject = new BehaviorSubject([]);
+        this.subscriptions = [];
+        this.virtualizedItems$ = this.virtualizedItemsSubject.asObservable();
+        this.queryState$ = this.queryStateSubject.asObservable();
+        this.subscriptions.push(this.virtualizedItems$.subscribe((virtaluzedItems) => {
+            this.allItems$.pipe(take$1(1)).subscribe((allItems) => {
+                if (virtaluzedItems.length === allItems.length) {
+                    this.bufferOnTop = 0;
+                    this.bufferOnBottom = 0;
+                }
+                else if (virtaluzedItems.length === 0) {
+                    this.bufferOnTop = allItems.length;
+                    this.bufferOnBottom = 0;
+                }
+                else {
+                    this.bufferOnTop = allItems.indexOf(virtaluzedItems[0]);
+                    this.bufferOnBottom =
+                        allItems.length -
+                            allItems.indexOf(virtaluzedItems[virtaluzedItems.length - 1]) -
+                            1;
+                }
+            });
+        }));
+        this.subscriptions.push(merge(this.allItems$, this.loadFromBuffer$)
+            .pipe(switchMap(() => {
+            return combineLatest([
+                this.allItems$.pipe(take$1(1)),
+                this.scrollPosition$.pipe(take$1(1)),
+            ]);
+        }))
+            .subscribe(([items, scrollPosition]) => {
+            if (scrollPosition === 'middle') {
+                return;
+            }
+            const currentItems = this.virtualizedItemsSubject.getValue();
+            if (items.length <= this.maxItemCount) {
+                this.virtualizedItemsSubject.next(items);
+            }
+            else {
+                let startIndex = 0;
+                let endIndex = undefined;
+                const numberOfItemsToRemove = items.length - Math.round(this.maxItemCount / 2);
+                const numberOfItemsAfterRemove = items.length - numberOfItemsToRemove;
+                switch (scrollPosition) {
+                    case 'top':
+                        if (currentItems.length > 0) {
+                            const middleIndex = items.findIndex((i) => this.isEqual(i, currentItems[0]));
+                            if (middleIndex !== -1) {
+                                startIndex = Math.max(0, middleIndex - Math.ceil(numberOfItemsAfterRemove / 2));
+                                endIndex = startIndex + numberOfItemsAfterRemove;
+                            }
+                        }
+                        else {
+                            endIndex = numberOfItemsAfterRemove;
+                        }
+                        break;
+                    case 'bottom':
+                        if (currentItems.length > 0) {
+                            const middleIndex = items.findIndex((i) => this.isEqual(i, currentItems[currentItems.length - 1]));
+                            if (middleIndex !== -1) {
+                                endIndex = Math.min(items.length, middleIndex + Math.floor(numberOfItemsAfterRemove / 2) + 1);
+                                startIndex = endIndex - numberOfItemsAfterRemove;
+                            }
+                        }
+                        else {
+                            startIndex = items.length - numberOfItemsAfterRemove;
+                        }
+                        break;
+                }
+                const virtualizedItems = items.slice(startIndex, endIndex);
+                this.virtualizedItemsSubject.next(virtualizedItems);
+            }
+        }));
+        this.subscriptions.push(this.scrollPosition$
+            .pipe(distinctUntilChanged())
+            .subscribe((position) => {
+            if (this.queryStateSubject.getValue().state === `loading-${position}`) {
+                return;
+            }
+            if (position === 'top') {
+                if (this.bufferOnTop < this.pageSize) {
+                    void this.loadMore(position);
+                }
+                else {
+                    this.loadMoreFromBuffer('top');
+                }
+            }
+            else if (position === 'bottom') {
+                if (this.bufferOnBottom < this.pageSize) {
+                    void this.loadMore(position);
+                }
+                else {
+                    this.loadMoreFromBuffer('bottom');
+                }
+            }
+        }));
+        this.subscriptions.push(this.allItems$
+            .pipe(pairwise(), filter$1(() => {
+            let scrollPosition;
+            this.scrollPosition$
+                .pipe(take$1(1))
+                .subscribe((s) => (scrollPosition = s));
+            return scrollPosition === 'middle';
+        }))
+            .subscribe(([prevItems, currentItems]) => {
+            if (currentItems.length < this.maxItemCount ||
+                this.virtualizedItems.length === 0) {
+                this.virtualizedItemsSubject.next(currentItems);
+            }
+            else {
+                const currentFirstItem = this.virtualizedItems[0];
+                const currentLastItem = this.virtualizedItems[this.virtualizedItems.length - 1];
+                const prevStartIndex = prevItems.findIndex((i) => this.isEqual(i, currentFirstItem));
+                const prevEndIndex = prevItems.findIndex((i) => this.isEqual(i, currentLastItem));
+                const isStartRemainedSame = currentItems[prevStartIndex]
+                    ? this.isEqual(currentItems[prevStartIndex], currentFirstItem)
+                    : false;
+                const isEndRemainedSame = currentItems[prevEndIndex]
+                    ? this.isEqual(currentItems[prevEndIndex], currentLastItem)
+                    : false;
+                const hasNewItemsBottom = prevEndIndex === prevItems.length - 1 && isEndRemainedSame
+                    ? prevItems.length !== currentItems.length
+                    : false;
+                if (isStartRemainedSame && isEndRemainedSame) {
+                    const endIndex = hasNewItemsBottom ? undefined : prevEndIndex + 1;
+                    this.virtualizedItemsSubject.next(currentItems.slice(prevStartIndex, endIndex));
+                }
+                let currentStartIndex = isStartRemainedSame ? prevStartIndex : -1;
+                let currentEndIndex = isEndRemainedSame ? prevEndIndex : -1;
+                if (!isStartRemainedSame) {
+                    currentStartIndex = currentItems.findIndex((i) => this.isEqual(i, currentFirstItem));
+                }
+                if (!isEndRemainedSame) {
+                    currentEndIndex = currentItems.findIndex((i) => this.isEqual(i, currentLastItem));
+                }
+                const hasNewItemsTop = prevStartIndex === 0 && !isStartRemainedSame
+                    ? currentStartIndex !== 0
+                    : false;
+                if (currentStartIndex !== -1 && currentEndIndex !== -1) {
+                    const startIndex = hasNewItemsTop ? 0 : currentStartIndex;
+                    this.virtualizedItemsSubject.next(currentItems.slice(startIndex, currentEndIndex + 1));
+                }
+                else {
+                    if (currentStartIndex === -1 && currentEndIndex !== -1) {
+                        currentStartIndex = Math.max(0, currentEndIndex - (prevEndIndex - prevStartIndex));
+                    }
+                    if (currentEndIndex === -1 && currentStartIndex !== -1) {
+                        currentEndIndex = Math.min(currentItems.length - 1, currentStartIndex + (prevEndIndex - prevStartIndex));
+                    }
+                    this.virtualizedItemsSubject.next(currentItems.slice(currentStartIndex, currentEndIndex + 1));
+                }
+            }
+        }));
+        if (this.jumpToItem$) {
+            this.subscriptions.push(this.jumpToItem$
+                .pipe(switchMap((jumpToItem) => combineLatest([this.allItems$.pipe(take$1(1)), of(jumpToItem)])))
+                .subscribe(([allItems, jumpToItem]) => {
+                if (jumpToItem.item) {
+                    if (allItems.length < this.maxItemCount) {
+                        this.virtualizedItemsSubject.next(allItems);
+                    }
+                    else {
+                        const itemIndex = allItems.findIndex((i) => 
+                        // @ts-expect-error TODO: do we know a better typing here?
+                        this.isEqual(i, jumpToItem.item));
+                        if (itemIndex === -1) {
+                            return;
+                        }
+                        else {
+                            const position = jumpToItem.position || 'middle';
+                            const numberOfItemsToRemove = allItems.length - Math.round(this.maxItemCount / 2);
+                            const numberOfItemsAfterRemove = allItems.length - numberOfItemsToRemove;
+                            let startIndex = -1;
+                            let endIndex = -1;
+                            switch (position) {
+                                case 'top':
+                                    startIndex = itemIndex;
+                                    endIndex = Math.min(allItems.length, startIndex + numberOfItemsAfterRemove);
+                                    break;
+                                case 'bottom':
+                                    endIndex = itemIndex + 1;
+                                    startIndex = Math.max(0, endIndex - numberOfItemsAfterRemove);
+                                    break;
+                                case 'middle': {
+                                    const itemsOnTop = itemIndex;
+                                    const itemsOnBottom = allItems.length - itemIndex;
+                                    if (itemsOnTop < Math.ceil(numberOfItemsAfterRemove / 2)) {
+                                        startIndex = 0;
+                                    }
+                                    if (itemsOnBottom <
+                                        Math.floor(numberOfItemsAfterRemove / 2) + 1) {
+                                        endIndex = allItems.length;
+                                    }
+                                    if (startIndex === -1) {
+                                        if (endIndex !== -1) {
+                                            startIndex = endIndex - numberOfItemsAfterRemove;
+                                        }
+                                        else {
+                                            startIndex =
+                                                itemIndex - Math.ceil(numberOfItemsAfterRemove / 2);
+                                        }
+                                    }
+                                    if (endIndex === -1) {
+                                        endIndex = startIndex + numberOfItemsAfterRemove;
+                                    }
+                                }
+                            }
+                            this.virtualizedItemsSubject.next(allItems.slice(startIndex, endIndex));
+                        }
+                    }
+                }
+            }));
+        }
+    }
+    /**
+     * The current value of virtualized items
+     */
+    get virtualizedItems() {
+        return this.virtualizedItemsSubject.getValue();
+    }
+    /**
+     * Remove all subscriptions, call this once you're done using an instance of this service
+     */
+    dispose() {
+        this.subscriptions.forEach((s) => s.unsubscribe());
+    }
+    loadMoreFromBuffer(_) {
+        this.loadFromBuffer$.next();
+    }
+    loadMore(direction) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.queryStateSubject.next({ state: `loading-${direction}` });
+            try {
+                yield this.query(direction);
+                this.queryStateSubject.next({ state: 'success' });
+            }
+            catch (e) {
+                this.queryStateSubject.next({ state: 'error', error: e });
+            }
+        });
+    }
+}
+
+/**
+ * The `VirtualizedMessageListService` removes messages from the message list that are currently not in view
+ */
+class VirtualizedMessageListService extends VirtualizedListService {
+    constructor(mode, scrollPosition$, channelService) {
+        const jumpToMessage$ = channelService.jumpToMessage$.pipe(map$1((jumpToMessage) => {
+            var _a;
+            let result = {
+                item: undefined,
+            };
+            let targetMessageId;
+            if (mode === 'main') {
+                targetMessageId = jumpToMessage.parentId
+                    ? jumpToMessage.parentId
+                    : jumpToMessage.id;
+            }
+            else {
+                targetMessageId = jumpToMessage.parentId
+                    ? jumpToMessage.id
+                    : undefined;
+            }
+            if (targetMessageId) {
+                const messages = mode === 'main'
+                    ? channelService.activeChannelMessages
+                    : channelService.activeChannelThreadReplies;
+                const id = targetMessageId === 'latest'
+                    ? (_a = messages[messages.length - 1]) === null || _a === void 0 ? void 0 : _a.id
+                    : targetMessageId;
+                if (id) {
+                    result = {
+                        item: { id },
+                        position: jumpToMessage.id === 'latest' ? 'bottom' : 'middle',
+                    };
+                }
+                channelService.clearMessageJump();
+            }
+            return result;
+        }));
+        const messages$ = mode === 'main'
+            ? channelService.activeChannelMessages$
+            : channelService.activeThreadMessages$;
+        super(messages$, scrollPosition$, jumpToMessage$, channelService.messagePageSize);
+        this.mode = mode;
+        this.channelService = channelService;
+        this.isEqual = (t1, t2) => t1.id === t2.id;
+        this.query = (direction) => {
+            const request = this.mode === 'main'
+                ? (direction) => this.channelService.loadMoreMessages(direction)
+                : (direction) => this.channelService.loadMoreThreadReplies(direction);
+            const result = request(direction === 'top' ? 'older' : 'newer');
+            if (result) {
+                return result;
+            }
+            else {
+                this.queryStateSubject.next({ state: 'success' });
+                if ((direction === 'top' && this.bufferOnTop > 0) ||
+                    (direction === 'bottom' && this.bufferOnBottom > 0)) {
+                    this.loadFromBuffer$.next();
+                }
+                return Promise.resolve();
+            }
+        };
+    }
+    loadMoreFromBuffer(direction) {
+        this.queryStateSubject.next({ state: `loading-${direction}` });
+        setTimeout(() => {
+            this.loadFromBuffer$.next();
+            this.queryStateSubject.next({ state: 'success' });
+        });
+    }
+}
+
 /**
  * The `MessageList` component renders a scrollable list of messages.
  */
@@ -6415,10 +6747,6 @@ 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 = [];
@@ -6426,17 +6754,20 @@ class MessageListComponent {
         this.newMessageCountWhileBeingScrolled = 0;
         this.groupStyles = [];
         this.isNextMessageOnSeparateDate = [];
-        this.isLoading = false;
+        this.loadingState = 'idle';
         this.isUnreadNotificationVisible = true;
         this.isJumpingToLatestUnreadMessage = false;
         this.isJumpToLatestButtonVisible = true;
+        this.isJumpingToMessage = false;
         this.scroll$ = new Subject();
+        this.isNewMessageSentByUser = false;
         this.subscriptions = [];
         this.isLatestMessageInList = true;
         this.parsedDates = new Map();
         this.isViewInited = false;
         this.isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
         this.forceRepaintSubject = new Subject();
+        this.scrollPosition$ = new BehaviorSubject('bottom');
         this.messageNotificationJumpClicked = () => {
             this.jumpToFirstUnreadMessage();
             this.isUnreadNotificationVisible = false;
@@ -6455,8 +6786,7 @@ class MessageListComponent {
             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}` });
+            var _a, _b;
             let isNewChannel = false;
             if (this.channelId !== (channel === null || channel === void 0 ? void 0 : channel.id)) {
                 isNewChannel = true;
@@ -6464,12 +6794,9 @@ class MessageListComponent {
                     clearTimeout(this.checkIfUnreadNotificationIsVisibleTimeout);
                 }
                 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.setMessages$();
                 this.channelId = channel === null || channel === void 0 ? void 0 : channel.id;
                 if (this.isViewInited) {
                     this.cdRef.detectChanges();
@@ -6516,7 +6843,7 @@ class MessageListComponent {
                     this.cdRef.detectChanges();
                 }
             }
-            const capabilites = (_f = channel === null || channel === void 0 ? void 0 : channel.data) === null || _f === void 0 ? void 0 : _f.own_capabilities;
+            const capabilites = (_a = channel === null || channel === void 0 ? void 0 : channel.data) === null || _a === void 0 ? void 0 : _a.own_capabilities;
             const capabilitesString = [...(capabilites || [])].sort().join('');
             const enabledActionsString = [...(this.enabledMessageActions || [])]
                 .sort()
@@ -6527,20 +6854,15 @@ class MessageListComponent {
                     this.cdRef.detectChanges();
                 }
             }
-            (_g = this.newMessageSubscription) === null || _g === void 0 ? void 0 : _g.unsubscribe();
+            (_b = this.newMessageSubscription) === null || _b === void 0 ? void 0 : _b.unsubscribe();
             if (channel) {
                 this.newMessageSubscription = channel.on('message.new', (event) => {
-                    // If we display main channel messages and we're switched to an older message set -> use message.new event to update unread count and detect new messages sent by current user
-                    if (!event.message ||
-                        channel.state.messages === channel.state.latestMessages ||
-                        this.mode === 'thread') {
+                    if (!event.message) {
                         return;
                     }
-                    this.newMessageReceived({
-                        id: event.message.id,
-                        user: event.message.user,
-                        created_at: new Date(event.message.created_at || ''),
-                    });
+                    else {
+                        this.newMessageReceived(event.message);
+                    }
                 });
             }
         }));
@@ -6550,6 +6872,7 @@ class MessageListComponent {
                 message.id !== this.parentMessage.id &&
                 this.mode === 'thread') {
                 this.resetScrollState();
+                this.setMessages$();
             }
             if (this.parentMessage === message) {
                 return;
@@ -6604,42 +6927,6 @@ class MessageListComponent {
                 this.cdRef.detectChanges();
             }
         }));
-        this.subscriptions.push(this.channelService.jumpToMessage$
-            .pipe(filter((config) => !!config.id))
-            .subscribe((config) => {
-            var _a, _b;
-            let messageId = undefined;
-            if (this.messageRemoveTimeout) {
-                clearTimeout(this.messageRemoveTimeout);
-            }
-            if (this.mode === 'main') {
-                messageId = config.parentId || config.id;
-            }
-            else if (config.parentId) {
-                messageId = config.id;
-            }
-            (_b = (_a = this.chatClientService.chatClient) === null || _a === void 0 ? void 0 : _a.logger) === null || _b === void 0 ? void 0 : _b.call(_a, 'info', `Jumping to ${messageId || ''}`, { tags: `message list ${this.mode}` });
-            if (messageId) {
-                if (messageId === 'latest') {
-                    this.scrollToLatestMessage();
-                    if (this.isViewInited) {
-                        this.cdRef.detectChanges();
-                    }
-                }
-                else {
-                    if (this.isJumpingToLatestUnreadMessage) {
-                        this.scrollMessageIntoView(this.firstUnreadMessageId || messageId);
-                        this.highlightedMessageId =
-                            this.firstUnreadMessageId || messageId;
-                    }
-                    else {
-                        this.scrollMessageIntoView(messageId);
-                        this.highlightedMessageId = messageId;
-                    }
-                }
-            }
-            this.channelService.clearMessageJump();
-        }));
         this.subscriptions.push(this.customTemplatesService.emptyMainMessageListPlaceholder$.subscribe((template) => {
             const isChanged = this.emptyMainMessageListTemplate !== template;
             this.emptyMainMessageListTemplate = template || null;
@@ -6659,6 +6946,7 @@ class MessageListComponent {
     ngOnChanges(changes) {
         var _a;
         if (changes.mode || changes.direction) {
+            this.resetScrollState();
             this.setMessages$();
         }
         if (changes.direction) {
@@ -6670,56 +6958,33 @@ class MessageListComponent {
     ngAfterViewInit() {
         this.isViewInited = true;
         this.ngZone.runOutsideAngular(() => {
-            this.scrollContainer.nativeElement.addEventListener('scroll', () => this.scrolled());
+            var _a, _b;
+            (_b = (_a = this.scrollContainer) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.addEventListener('scroll', () => this.scrolled());
         });
     }
     ngAfterViewChecked() {
-        var _a, _b, _c, _d, _e, _f;
-        if (this.highlightedMessageId) {
-            // Turn off programatic scroll adjustments while jump to message is in progress
-            this.hasNewMessages = false;
-            this.olderMassagesLoaded = false;
+        var _a, _b;
+        if (this.isJumpingToMessage) {
+            this.isNewMessageSentByUser = false;
+            this.messageIdToAnchorTo = undefined;
+            this.anchorMessageTopOffset = undefined;
+            return;
         }
-        if (this.direction === 'top-to-bottom') {
-            if (this.hasNewMessages &&
-                (this.isNewMessageSentByUser || !this.isUserScrolled)) {
-                this.isLatestMessageInList
-                    ? this.scrollToTop()
-                    : this.jumpToLatestMessage();
-                this.hasNewMessages = false;
-                this.containerHeight = this.scrollContainer.nativeElement.scrollHeight;
-            }
+        if (this.messageIdToAnchorTo && this.loadingState === 'idle') {
+            this.preserveScrollbarPosition();
         }
-        else {
-            if (this.hasNewMessages) {
-                if (!this.isUserScrolled || this.isNewMessageSentByUser) {
-                    (_b = (_a = this.chatClientService.chatClient) === null || _a === void 0 ? void 0 : _a.logger) === null || _b === void 0 ? void 0 : _b.call(_a, 'info', `User has new messages, and not scrolled or sent new messages, therefore we ${this.isLatestMessageInList ? 'scroll' : 'jump'} to latest message`, { tags: `message list ${this.mode}` });
-                    this.isLatestMessageInList
-                        ? this.scrollToBottom()
-                        : this.jumpToLatestMessage();
-                }
-                this.hasNewMessages = false;
-                this.containerHeight = this.scrollContainer.nativeElement.scrollHeight;
-            }
-            else if (this.olderMassagesLoaded) {
-                (_d = (_c = this.chatClientService.chatClient) === null || _c === void 0 ? void 0 : _c.logger) === null || _d === void 0 ? void 0 : _d.call(_c, 'info', `Older messages are loaded, we preserve the scroll position`, { tags: `message list ${this.mode}` });
-                this.preserveScrollbarPosition();
-                this.containerHeight = this.scrollContainer.nativeElement.scrollHeight;
-                this.olderMassagesLoaded = false;
-            }
-            else if (this.getScrollPosition() !== 'bottom' &&
-                !this.isUserScrolled &&
-                !this.highlightedMessageId) {
-                (_f = (_e = this.chatClientService.chatClient) === null || _e === void 0 ? void 0 : _e.logger) === null || _f === void 0 ? void 0 : _f.call(_e, 'info', `Container grew and user didn't scroll therefore we ${this.isLatestMessageInList ? 'scroll' : 'jump'} to latest message`, { tags: `message list ${this.mode}` });
-                this.isLatestMessageInList
-                    ? this.scrollToBottom()
-                    : this.jumpToLatestMessage();
-                this.containerHeight = this.scrollContainer.nativeElement.scrollHeight;
-            }
+        else if ((!this.isUserScrolled &&
+            ((_a = this.scrollContainer.nativeElement) === null || _a === void 0 ? void 0 : _a.scrollHeight) >
+                ((_b = this.scrollContainer) === null || _b === void 0 ? void 0 : _b.nativeElement.clientHeight) &&
+            this.getScrollPosition() !==
+                (this.direction === 'bottom-to-top' ? 'bottom' : 'top')) ||
+            (this.isUserScrolled && this.isNewMessageSentByUser)) {
+            this.isNewMessageSentByUser = false;
+            this.jumpToLatestMessage();
         }
     }
     ngOnDestroy() {
-        var _a, _b;
+        var _a;
         this.subscriptions.forEach((s) => s.unsubscribe());
         (_a = this.newMessageSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
         if (this.scrollEndTimeout) {
@@ -6731,20 +6996,24 @@ 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();
+        this.disposeVirtualizedList();
     }
-    trackByMessageId(index, item) {
+    trackByMessageId(_, item) {
         return item.id;
     }
-    trackByUserId(index, user) {
+    trackByUserId(_, user) {
         return user.id;
     }
     jumpToLatestMessage() {
         var _a;
-        void this.channelService.jumpToMessage('latest', this.mode === 'thread' ? (_a = this.parentMessage) === null || _a === void 0 ? void 0 : _a.id : undefined);
+        if (this.isLatestMessageInList) {
+            this.direction === 'bottom-to-top'
+                ? this.scrollToBottom()
+                : this.scrollToTop();
+        }
+        else {
+            void this.channelService.jumpToMessage('latest', this.mode === 'thread' ? (_a = this.parentMessage) === null || _a === void 0 ? void 0 : _a.id : undefined);
+        }
     }
     scrollToBottom() {
         this.scrollContainer.nativeElement.scrollTop =
@@ -6757,7 +7026,7 @@ class MessageListComponent {
         this.scrollContainer.nativeElement.scrollTop = 0;
     }
     scrolled() {
-        var _a, _b;
+        var _a;
         if (this.scrollContainer.nativeElement.scrollHeight ===
             this.scrollContainer.nativeElement.clientHeight) {
             if (this.isJumpToLatestButtonVisible) {
@@ -6768,8 +7037,7 @@ class MessageListComponent {
             return;
         }
         this.scroll$.next();
-        const scrollPosition = this.getScrollPosition();
-        (_b = (_a = this.chatClientService.chatClient) === null || _a === void 0 ? void 0 : _a.logger) === null || _b === void 0 ? void 0 : _b.call(_a, 'info', `Scrolled - scroll position: ${scrollPosition}, container height: ${this.scrollContainer.nativeElement.scrollHeight}`, { tags: `message list ${this.mode}` });
+        let scrollPosition = this.getScrollPosition();
         const isUserScrolled = (this.direction === 'bottom-to-top'
             ? scrollPosition !== 'bottom'
             : scrollPosition !== 'top') || !this.isLatestMessageInList;
@@ -6798,31 +7066,31 @@ class MessageListComponent {
                 }
             }, 100);
         }
-        if (this.shouldLoadMoreMessages(scrollPosition)) {
+        const prevScrollPosition = this.scrollPosition$.getValue();
+        if (this.direction === 'top-to-bottom') {
+            if (scrollPosition === 'top') {
+                scrollPosition = 'bottom';
+            }
+            else if (scrollPosition === 'bottom') {
+                scrollPosition = 'top';
+            }
+        }
+        if (prevScrollPosition !== scrollPosition && !this.isJumpingToMessage) {
+            if (scrollPosition === 'top' || scrollPosition === 'bottom') {
+                (_a = this.virtualizedList) === null || _a === void 0 ? void 0 : _a.virtualizedItems$.pipe(take(1)).subscribe((items) => {
+                    var _a, _b, _c, _d;
+                    this.messageIdToAnchorTo =
+                        scrollPosition === 'top'
+                            ? (_a = items[0]) === null || _a === void 0 ? void 0 : _a.id
+                            : (_b = items[items.length - 1]) === null || _b === void 0 ? void 0 : _b.id;
+                    this.anchorMessageTopOffset = (_d = (_c = document
+                        .getElementById(this.messageIdToAnchorTo)) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect()) === null || _d === void 0 ? void 0 : _d.top;
+                });
+            }
             this.ngZone.run(() => {
-                var _a, _b, _c;
-                this.containerHeight = this.scrollContainer.nativeElement.scrollHeight;
-                let direction;
-                if (this.direction === 'top-to-bottom') {
-                    direction = scrollPosition === 'top' ? 'newer' : 'older';
-                }
-                else {
-                    direction = scrollPosition === 'top' ? 'older' : 'newer';
-                }
-                const result = this.mode === 'main'
-                    ? this.channelService.loadMoreMessages(direction)
-                    : this.channelService.loadMoreThreadReplies(direction);
-                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();
+                this.scrollPosition$.next(scrollPosition);
             });
         }
-        this.prevScrollTop = this.scrollContainer.nativeElement.scrollTop;
     }
     jumpToFirstUnreadMessage() {
         if (!this.lastReadMessageId) {
@@ -6865,9 +7133,19 @@ class MessageListComponent {
             : this.emptyThreadMessageListTemplate;
     }
     preserveScrollbarPosition() {
-        this.scrollContainer.nativeElement.scrollTop =
-            (this.prevScrollTop || 0) +
-                (this.scrollContainer.nativeElement.scrollHeight - this.containerHeight);
+        var _a;
+        if (!this.messageIdToAnchorTo) {
+            return;
+        }
+        const messageToAlignTo = document.getElementById(this.messageIdToAnchorTo);
+        this.messageIdToAnchorTo = undefined;
+        this.scrollContainer.nativeElement.scrollTop +=
+            (((_a = messageToAlignTo === null || messageToAlignTo === void 0 ? void 0 : messageToAlignTo.getBoundingClientRect()) === null || _a === void 0 ? void 0 : _a.top) || 0) -
+                (this.anchorMessageTopOffset || 0);
+        this.anchorMessageTopOffset = undefined;
+        if (this.isSafari) {
+            this.forceRepaintSubject.next();
+        }
     }
     forceRepaint() {
         // Solves the issue of empty screen on Safari when scrolling
@@ -6876,13 +7154,10 @@ class MessageListComponent {
         this.scrollContainer.nativeElement.style.display = '';
     }
     getScrollPosition() {
-        var _a, _b;
+        var _a;
         let position = 'middle';
         if (Math.floor(this.scrollContainer.nativeElement.scrollTop) <=
-            (((_a = this.parentMessageElement) === null || _a === void 0 ? void 0 : _a.nativeElement.clientHeight) || 0) &&
-            (this.prevScrollTop === undefined ||
-                this.prevScrollTop >
-                    (((_b = this.parentMessageElement) === null || _b === void 0 ? void 0 : _b.nativeElement.clientHeight) || 0))) {
+            (((_a = this.parentMessageElement) === null || _a === void 0 ? void 0 : _a.nativeElement.clientHeight) || 0)) {
             position = 'top';
         }
         else if (Math.ceil(this.scrollContainer.nativeElement.scrollTop) +
@@ -6893,24 +7168,24 @@ class MessageListComponent {
         }
         return position;
     }
-    shouldLoadMoreMessages(scrollPosition) {
-        return (scrollPosition !== 'middle' &&
-            !this.highlightedMessageId &&
-            !this.isLoading);
-    }
     setMessages$() {
         var _a;
-        this.messages$ = (this.mode === 'main'
-            ? this.channelService.activeChannelMessages$
-            : this.channelService.activeThreadMessages$).pipe(tap((messages) => {
-            var _a, _b, _c, _d;
-            if (this.isLoading) {
-                this.isLoading = false;
+        this.disposeVirtualizedList();
+        this.virtualizedList = new VirtualizedMessageListService(this.mode, this.scrollPosition$, this.channelService);
+        this.queryStateSubscription = this.virtualizedList.queryState$.subscribe((queryState) => {
+            let mappedState = 'idle';
+            if (queryState.state.includes('loading')) {
+                mappedState = queryState.state || 'loading-bottom';
+            }
+            if (mappedState !== this.loadingState) {
+                this.loadingState = mappedState;
+                if (this.isViewInited) {
+                    this.cdRef.detectChanges();
+                }
             }
+        });
+        this.messages$ = this.virtualizedList.virtualizedItems$.pipe(tap((messages) => {
             if (messages.length === 0) {
-                (_b = (_a = this.chatClientService.chatClient) === null || _a === void 0 ? void 0 : _a.logger) === null || _b === void 0 ? void 0 : _b.call(_a, 'info', `Empty messages array, reseting scroll state`, {
-                    tags: `message list ${this.mode}`,
-                });
                 this.resetScrollState();
                 return;
             }
@@ -6918,21 +7193,6 @@ class MessageListComponent {
                 // 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}`,
-            });
-            const currentLatestMessageInState = messages[messages.length - 1];
-            this.newMessageReceived(currentLatestMessageInState);
-            const currentOldestMessage = messages[0];
-            if (!this.oldestMessage ||
-                !messages.find((m) => m.id === this.oldestMessage.id)) {
-                this.oldestMessage = currentOldestMessage;
-            }
-            else if (this.oldestMessage.created_at.getTime() >
-                currentOldestMessage.created_at.getTime()) {
-                this.oldestMessage = currentOldestMessage;
-                this.olderMassagesLoaded = true;
-            }
         }), tap((messages) => {
             var _a;
             if (this.isJumpingToLatestUnreadMessage &&
@@ -6952,82 +7212,101 @@ class MessageListComponent {
                     m.status !== 'sending';
             })) === null || _a === void 0 ? void 0 : _a.id);
         }), tap((messages) => {
+            var _a, _b;
+            const latestMessageInList = messages[messages.length - 1];
+            const channel = this.channelService.activeChannel;
+            const messagesFromState = (this.mode === 'main'
+                ? channel === null || channel === void 0 ? void 0 : channel.state.latestMessages
+                : channel === null || channel === void 0 ? void 0 : channel.state.threads[((_a = this.parentMessage) === null || _a === void 0 ? void 0 : _a.id) || '']) || [];
             this.isLatestMessageInList =
-                !this.latestMessage ||
-                    messages.length === 0 ||
-                    messages[messages.length - 1].id === this.latestMessage.id ||
-                    this.mode === 'thread';
+                !latestMessageInList ||
+                    latestMessageInList.cid !== (channel === null || channel === void 0 ? void 0 : channel.cid) ||
+                    (latestMessageInList === null || latestMessageInList === void 0 ? void 0 : latestMessageInList.id) ===
+                        ((_b = messagesFromState[messagesFromState.length - 1]) === null || _b === void 0 ? void 0 : _b.id);
             if (!this.isLatestMessageInList) {
                 this.isUserScrolled = true;
             }
-        }), map((messages) => this.direction === 'bottom-to-top' ? messages : [...messages].reverse()), tap((messages) => {
+        }), map((messages) => {
+            return this.direction === 'bottom-to-top'
+                ? messages
+                : [...messages].reverse();
+        }), tap((messages) => {
             this.groupStyles = messages.map((m, i) => getGroupStyles(m, messages[i - 1], messages[i + 1], {
                 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);
+        if ((_a = this.virtualizedList) === null || _a === void 0 ? void 0 : _a.jumpToItem$) {
+            this.jumpToItemSubscription = this.virtualizedList.jumpToItem$
+                .pipe(filter((jumpToMessage) => { var _a; return !!((_a = jumpToMessage.item) === null || _a === void 0 ? void 0 : _a.id); }))
+                .subscribe((jumpToMessage) => {
+                var _a;
+                let messageId = (_a = jumpToMessage.item) === null || _a === void 0 ? void 0 : _a.id;
+                if (messageId) {
+                    if (this.isJumpingToLatestUnreadMessage) {
+                        messageId = this.firstUnreadMessageId || messageId;
+                    }
+                    if (jumpToMessage.position !== 'bottom') {
+                        this.highlightedMessageId = messageId;
+                    }
+                    else if (this.direction === 'top-to-bottom') {
+                        jumpToMessage.position = 'top';
+                    }
+                    this.isJumpingToMessage = true;
+                    this.scrollMessageIntoView({
+                        messageId: this.firstUnreadMessageId || messageId,
+                        position: jumpToMessage.position || 'middle',
+                    });
                 }
-            }
-        });
+            });
+        }
     }
     resetScrollState() {
         this.isEmpty = true;
-        this.latestMessage = undefined;
-        this.hasNewMessages = true;
         this.isUserScrolled = false;
-        this.containerHeight = undefined;
-        this.olderMassagesLoaded = false;
-        this.oldestMessage = undefined;
+        this.messageIdToAnchorTo = undefined;
+        this.anchorMessageTopOffset = undefined;
         this.newMessageCountWhileBeingScrolled = 0;
-        this.prevScrollTop = undefined;
-        this.isNewMessageSentByUser = undefined;
+        this.isNewMessageSentByUser = false;
         this.isLatestMessageInList = true;
+        this.isJumpingToMessage = false;
+        this.scrollPosition$.next('bottom');
+        this.loadingState = 'idle';
+    }
+    disposeVirtualizedList() {
+        var _a, _b, _c;
+        (_a = this.virtualizedList) === null || _a === void 0 ? void 0 : _a.dispose();
+        (_b = this.jumpToItemSubscription) === null || _b === void 0 ? void 0 : _b.unsubscribe();
+        (_c = this.queryStateSubscription) === null || _c === void 0 ? void 0 : _c.unsubscribe();
     }
     get usersTyping$() {
         return this.mode === 'thread'
             ? this.usersTypingInThread$
             : this.usersTypingInChannel$;
     }
-    scrollMessageIntoView(messageId, withRetry = true) {
-        const element = document.getElementById(messageId);
+    scrollMessageIntoView(options, withRetry = true) {
+        const element = document.getElementById(options.messageId);
         if (!element && withRetry) {
             // If the message was newly inserted into activeChannelMessages$, the message will be rendered after the current change detection cycle -> wait for this cycle to complete
-            setTimeout(() => this.scrollMessageIntoView(messageId, false));
+            setTimeout(() => this.scrollMessageIntoView(options, false));
         }
         else if (element) {
+            const blockMapping = {
+                top: 'start',
+                bottom: 'end',
+                middle: 'center',
+            };
             element.scrollIntoView({
-                block: 'center',
+                block: blockMapping[options.position],
             });
+            if (options.position !== 'middle') {
+                options.position === 'bottom'
+                    ? this.scrollToBottom()
+                    : this.scrollToTop();
+            }
+            setTimeout(() => {
+                this.isJumpingToMessage = false;
+            }, 0);
             setTimeout(() => {
                 this.highlightedMessageId = undefined;
                 this.firstUnreadMessageId = undefined;
@@ -7036,40 +7315,27 @@ class MessageListComponent {
             }, 1000);
         }
     }
-    scrollToLatestMessage(withRetry = true) {
-        if (document.getElementById(this.latestMessage.id)) {
-            this.direction === 'bottom-to-top'
-                ? this.scrollToBottom()
-                : this.scrollToTop();
+    newMessageReceived(message) {
+        var _a, _b, _c, _d;
+        if ((this.mode === 'main' && message.parent_id) ||
+            (this.mode === 'thread' && message.parent_id !== ((_a = this.parentMessage) === null || _a === void 0 ? void 0 : _a.id))) {
+            return;
         }
-        else if (withRetry) {
-            // If the message was newly inserted into activeChannelMessages$, the message will be rendered after the current change detection cycle -> wait for this cycle to complete
-            setTimeout(() => this.scrollToLatestMessage(false), 0);
+        const isNewMessageSentByCurrentUser = ((_b = message.user) === null || _b === void 0 ? void 0 : _b.id) === ((_d = (_c = this.chatClientService.chatClient) === null || _c === void 0 ? void 0 : _c.user) === null || _d === void 0 ? void 0 : _d.id);
+        let shouldDetectChanges = false;
+        if (!this.isNewMessageSentByUser && isNewMessageSentByCurrentUser) {
+            this.isNewMessageSentByUser = true;
+            shouldDetectChanges = true;
         }
-    }
-    newMessageReceived(message) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        const latestMessages = (_b = (_a = this.channelService.activeChannel) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.latestMessages;
-        if (!this.latestMessage ||
-            ((_c = this.latestMessage.created_at) === null || _c === void 0 ? void 0 : _c.getTime()) < message.created_at.getTime() ||
-            (this.mode === 'main' &&
-                latestMessages &&
-                this.latestMessage &&
-                ((_d = latestMessages[latestMessages.length - 1]) === null || _d === void 0 ? void 0 : _d.id) !== this.latestMessage.id)) {
-            (_f = (_e = this.chatClientService.chatClient) === null || _e === void 0 ? void 0 : _e.logger) === null || _f === void 0 ? void 0 : _f.call(_e, 'info', `Received new message`, { tags: `message list ${this.mode}` });
-            const isNewChannel = !this.latestMessage;
-            this.latestMessage = message;
-            this.hasNewMessages = true;
-            this.isNewMessageSentByUser =
-                ((_g = message.user) === null || _g === void 0 ? void 0 : _g.id) === ((_j = (_h = this.chatClientService.chatClient) === null || _h === void 0 ? void 0 : _h.user) === null || _j === void 0 ? void 0 : _j.id);
-            if (this.isUserScrolled) {
-                this.newMessageCountWhileBeingScrolled++;
-            }
-            if (!this.isNewMessageSentByUser &&
-                this.unreadCount !== undefined &&
-                !isNewChannel) {
-                this.unreadCount++;
-            }
+        if (this.isUserScrolled) {
+            this.newMessageCountWhileBeingScrolled++;
+            shouldDetectChanges = true;
+        }
+        if (!this.isNewMessageSentByUser && this.unreadCount !== undefined) {
+            this.unreadCount++;
+            shouldDetectChanges = true;
+        }
+        if (shouldDetectChanges && this.isViewInited) {
             this.cdRef.detectChanges();
         }
     }
@@ -7081,10 +7347,10 @@ class MessageListComponent {
     }
 }
 MessageListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", 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: "14.0.0", version: "15.0.4", type: MessageListComponent, selector: "stream-message-list", inputs: { mode: "mode", direction: "direction", hideJumpToLatestButtonDuringScroll: "hideJumpToLatestButtonDuringScroll", 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 class=\"str-chat__ul\">\n      <li\n        *ngIf=\"mode === 'thread' && parentMessage\"\n        #parentMessageElement\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        *ngIf=\"\n          isLoading && direction === 'bottom-to-top' && displayLoadingIndicator\n        \"\n        data-testid=\"top-loading-indicator\"\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        *ngIf=\"\n          isLoading && direction === 'top-to-bottom' && displayLoadingIndicator\n        \"\n        data-testid=\"bottom-loading-indicator\"\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    *ngIf=\"isUserScrolled && isJumpToLatestButtonVisible\"\n    data-testid=\"scroll-to-latest\"\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-scroll$=\"scroll$\"\n  >\n    <stream-message\n      [message]=\"messageInput\"\n      [isLastSentMessage]=\"isLastSentMessage\"\n      [enabledMessageActions]=\"enabledMessageActions\"\n      [mode]=\"mode\"\n      [isHighlighted]=\"isHighlighted\"\n      [scroll$]=\"scroll$\"\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        scroll$: scroll$\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", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MessageComponent, selector: "stream-message", inputs: ["message", "enabledMessageActions", "isLastSentMessage", "mode", "isHighlighted", "scroll$"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "stream-loading-indicator" }, { kind: "component", type: IconComponent, selector: "stream-icon", inputs: ["icon"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MessageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MessageListComponent, selector: "stream-message-list", inputs: { mode: "mode", direction: "direction", hideJumpToLatestButtonDuringScroll: "hideJumpToLatestButtonDuringScroll", 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\n  #scrollContainer\n  data-testid=\"scroll-container\"\n  class=\"str-chat__list\"\n  style=\"overscroll-behavior-y: 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 class=\"str-chat__ul\">\n      <li\n        *ngIf=\"mode === 'thread' && parentMessage\"\n        #parentMessageElement\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-placeholder\n        *ngIf=\"\n          ((loadingState === 'loading-top' && direction === 'bottom-to-top') ||\n            (loadingState === 'loading-bottom' &&\n              direction === 'top-to-bottom')) &&\n            displayLoadingIndicator;\n          else loadingIndicatorPlaceholder\n        \"\n        data-testid=\"top-loading-indicator\"\n      ></stream-loading-indicator-placeholder>\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-placeholder\n        *ngIf=\"\n          ((loadingState === 'loading-bottom' &&\n            direction === 'bottom-to-top') ||\n            (loadingState === 'loading-top' &&\n              direction === 'top-to-bottom')) &&\n            displayLoadingIndicator;\n          else loadingIndicatorPlaceholder\n        \"\n        data-testid=\"bottom-loading-indicator\"\n      ></stream-loading-indicator-placeholder>\n      <ng-template #loadingIndicatorPlaceholder>\n        <div class=\"str-chat__loading-indicator-placeholder\"></div>\n      </ng-template>\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    *ngIf=\"isUserScrolled && isJumpToLatestButtonVisible\"\n    data-testid=\"scroll-to-latest\"\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-scroll$=\"scroll$\"\n  >\n    <stream-message\n      [message]=\"messageInput\"\n      [isLastSentMessage]=\"isLastSentMessage\"\n      [enabledMessageActions]=\"enabledMessageActions\"\n      [mode]=\"mode\"\n      [isHighlighted]=\"isHighlighted\"\n      [scroll$]=\"scroll$\"\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        scroll$: scroll$\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", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MessageComponent, selector: "stream-message", inputs: ["message", "enabledMessageActions", "isLastSentMessage", "mode", "isHighlighted", "scroll$"] }, { kind: "component", type: IconComponent, selector: "stream-icon", inputs: ["icon"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "component", type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-message-list', changeDetection: ChangeDetectionStrategy.OnPush, 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 class=\"str-chat__ul\">\n      <li\n        *ngIf=\"mode === 'thread' && parentMessage\"\n        #parentMessageElement\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        *ngIf=\"\n          isLoading && direction === 'bottom-to-top' && displayLoadingIndicator\n        \"\n        data-testid=\"top-loading-indicator\"\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        *ngIf=\"\n          isLoading && direction === 'top-to-bottom' && displayLoadingIndicator\n        \"\n        data-testid=\"bottom-loading-indicator\"\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    *ngIf=\"isUserScrolled && isJumpToLatestButtonVisible\"\n    data-testid=\"scroll-to-latest\"\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-scroll$=\"scroll$\"\n  >\n    <stream-message\n      [message]=\"messageInput\"\n      [isLastSentMessage]=\"isLastSentMessage\"\n      [enabledMessageActions]=\"enabledMessageActions\"\n      [mode]=\"mode\"\n      [isHighlighted]=\"isHighlighted\"\n      [scroll$]=\"scroll$\"\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        scroll$: scroll$\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" }]
+            args: [{ selector: 'stream-message-list', changeDetection: ChangeDetectionStrategy.OnPush, 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\n  #scrollContainer\n  data-testid=\"scroll-container\"\n  class=\"str-chat__list\"\n  style=\"overscroll-behavior-y: 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 class=\"str-chat__ul\">\n      <li\n        *ngIf=\"mode === 'thread' && parentMessage\"\n        #parentMessageElement\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-placeholder\n        *ngIf=\"\n          ((loadingState === 'loading-top' && direction === 'bottom-to-top') ||\n            (loadingState === 'loading-bottom' &&\n              direction === 'top-to-bottom')) &&\n            displayLoadingIndicator;\n          else loadingIndicatorPlaceholder\n        \"\n        data-testid=\"top-loading-indicator\"\n      ></stream-loading-indicator-placeholder>\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-placeholder\n        *ngIf=\"\n          ((loadingState === 'loading-bottom' &&\n            direction === 'bottom-to-top') ||\n            (loadingState === 'loading-top' &&\n              direction === 'top-to-bottom')) &&\n            displayLoadingIndicator;\n          else loadingIndicatorPlaceholder\n        \"\n        data-testid=\"bottom-loading-indicator\"\n      ></stream-loading-indicator-placeholder>\n      <ng-template #loadingIndicatorPlaceholder>\n        <div class=\"str-chat__loading-indicator-placeholder\"></div>\n      </ng-template>\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    *ngIf=\"isUserScrolled && isJumpToLatestButtonVisible\"\n    data-testid=\"scroll-to-latest\"\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-scroll$=\"scroll$\"\n  >\n    <stream-message\n      [message]=\"messageInput\"\n      [isLastSentMessage]=\"isLastSentMessage\"\n      [enabledMessageActions]=\"enabledMessageActions\"\n      [mode]=\"mode\"\n      [isHighlighted]=\"isHighlighted\"\n      [scroll$]=\"scroll$\"\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        scroll$: scroll$\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" }]
         }], ctorParameters: function () { return [{ type: ChannelService }, { type: ChatClientService }, { type: CustomTemplatesService }, { type: DateParserService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { mode: [{
                 type: Input
             }], direction: [{
@@ -7103,8 +7369,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], displayLoadingIndicator: [{
                 type: Input
-            }], limitNumberOfMessagesInList: [{
-                type: Input
             }], scrollContainer: [{
                 type: ViewChild,
                 args: ['scrollContainer']
@@ -7351,5 +7615,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AttachmentConfigurationService, AttachmentListComponent, AttachmentPreviewListComponent, AttachmentService, AutocompleteTextareaComponent, AvatarComponent, AvatarPlaceholderComponent, ChannelComponent, ChannelHeaderComponent, ChannelListComponent, ChannelPreviewComponent, ChannelQuery, ChannelService, ChatClientService, CustomTemplatesService, DateParserService, EmojiInputService, IconComponent, IconPlaceholderComponent, LoadingIndicatorComponent, LoadingIndicatorPlaceholderComponent, MessageActionsBoxComponent, MessageActionsService, MessageBouncePromptComponent, MessageComponent, MessageInputComponent, MessageInputConfigService, MessageListComponent, MessageReactionsComponent, MessageReactionsSelectorComponent, MessageReactionsService, MessageService, ModalComponent, NotificationComponent, NotificationListComponent, NotificationService, StreamAutocompleteTextareaModule, StreamAvatarModule, StreamChatModule, StreamI18nService, StreamTextareaModule, TextareaComponent, TextareaDirective, ThemeService, ThreadComponent, TransliterationService, VoiceRecordingComponent, VoiceRecordingWavebarComponent, createMessagePreview, getChannelDisplayText, getGroupStyles, getMessageTranslation, getReadBy, isImageAttachment, isImageFile, isOnSeparateDate, listUsers, parseDate, textareaInjectionToken };
+export { AttachmentConfigurationService, AttachmentListComponent, AttachmentPreviewListComponent, AttachmentService, AutocompleteTextareaComponent, AvatarComponent, AvatarPlaceholderComponent, ChannelComponent, ChannelHeaderComponent, ChannelListComponent, ChannelPreviewComponent, ChannelQuery, ChannelService, ChatClientService, CustomTemplatesService, DateParserService, EmojiInputService, IconComponent, IconPlaceholderComponent, LoadingIndicatorComponent, LoadingIndicatorPlaceholderComponent, MessageActionsBoxComponent, MessageActionsService, MessageBouncePromptComponent, MessageComponent, MessageInputComponent, MessageInputConfigService, MessageListComponent, MessageReactionsComponent, MessageReactionsSelectorComponent, MessageReactionsService, MessageService, ModalComponent, NotificationComponent, NotificationListComponent, NotificationService, StreamAutocompleteTextareaModule, StreamAvatarModule, StreamChatModule, StreamI18nService, StreamTextareaModule, TextareaComponent, TextareaDirective, ThemeService, ThreadComponent, TransliterationService, VirtualizedListService, VirtualizedMessageListService, VoiceRecordingComponent, VoiceRecordingWavebarComponent, createMessagePreview, getChannelDisplayText, getGroupStyles, getMessageTranslation, getReadBy, isImageAttachment, isImageFile, isOnSeparateDate, listUsers, parseDate, textareaInjectionToken };
 //# sourceMappingURL=stream-chat-angular.mjs.map