@cloudflare/realtimekit-ui 1.1.0-staging.6 → 1.1.0-staging.8

package/dist/esm/loader.js

@@ -11045,6 +11045,13 @@ const RtkChat = class {
             const message = event.detail;
             this.meeting.chat.deleteMessage(message.id);
         };
+        this.onMessageEdit = (event) => {
+            const message = event.detail;
+            if (message.type !== 'text')
+                return;
+            this.replyMessage = null;
+            this.editingMessage = message;
+        };
         this.getPrivateChatRecipients = () => {
             const participants = this.getFilteredParticipants().map((participant) => {
                 const key = generateChatGroupKey([participant.userId, this.meeting.self.userId]);
@@ -11229,14 +11236,21 @@ const RtkChat = class {
         const uiProps = { iconPack: this.iconPack, t: this.t, size: this.size };
         const message = this.editingMessage ? this.editingMessage.message : '';
         const quotedMessage = this.replyMessage ? this.replyMessage.message : '';
-        return (h("rtk-chat-composer-view", Object.assign({ message: message, storageKey: (_a = this.selectedChannelId) !== null && _a !== void 0 ? _a : `draft-${this.selectedChannelId}`, quotedMessage: quotedMessage, isEditing: !!this.editingMessage, canSendTextMessage: this.isTextMessagingAllowed(), canSendFiles: this.isFileMessagingAllowed(), disableEmojiPicker: this.overrides.disableEmojiPicker, maxLength: this.meeting.chat.maxTextLimit, rateLimits: this.meeting.chat.rateLimits, inputTextPlaceholder: this.t('chat.message_placeholder'), onNewMessage: this.onNewMessageHandler, onEditMessage: this.onEditMessageHandler, onEditCancel: this.onEditCancel, onQuotedMessageDismiss: this.onQuotedMessageDismiss }, uiProps), h("slot", { name: "chat-addon", slot: "chat-addon" })));
+        const draftStorageKey = this.selectedChannelId
+            ? `rtk-chat-draft-${this.selectedChannelId}`
+            : 'rtk-chat-draft';
+        const editStorageKey = this.editingMessage
+            ? `rtk-chat-edit-${(_a = this.selectedChannelId) !== null && _a !== void 0 ? _a : 'no-channel'}-${this.editingMessage.id}`
+            : 'rtk-chat-edit';
+        const storageKey = this.editingMessage ? editStorageKey : draftStorageKey;
+        return (h("rtk-chat-composer-view", Object.assign({ message: message, storageKey: storageKey, quotedMessage: quotedMessage, isEditing: !!this.editingMessage, canSendTextMessage: this.isTextMessagingAllowed(), canSendFiles: this.isFileMessagingAllowed(), disableEmojiPicker: this.overrides.disableEmojiPicker, maxLength: this.meeting.chat.maxTextLimit, rateLimits: this.meeting.chat.rateLimits, inputTextPlaceholder: this.t('chat.message_placeholder'), onNewMessage: this.onNewMessageHandler, onEditMessage: this.onEditMessageHandler, onEditCancel: this.onEditCancel, onQuotedMessageDismiss: this.onQuotedMessageDismiss }, uiProps), h("slot", { name: "chat-addon", slot: "chat-addon" })));
     }
     render() {
         var _a;
         if (!this.meeting) {
             return null;
         }
-        return (h(Host, null, h("div", { class: "chat-container" }, h("div", { class: "chat" }, this.isFileMessagingAllowed() && (h("div", { id: "dropzone", class: { active: this.dropzoneActivated }, part: "dropzone" }, h("rtk-icon", { icon: this.iconPack.attach }), h("p", null, this.t('chat.send_attachment')))), this.renderPinnedMessagesHeader(), this.isPrivateChatSupported() && (h("rtk-channel-selector-view", { channels: this.getPrivateChatRecipients(), selectedChannelId: ((_a = this.selectedParticipant) === null || _a === void 0 ? void 0 : _a.userId) || 'everyone', onChannelChange: this.updateRecipients, t: this.t, viewAs: "dropdown" })), h("rtk-chat-messages-ui-paginated", { meeting: this.meeting, onPinMessage: this.onPinMessage, onDeleteMessage: this.onDeleteMessage, size: this.size, iconPack: this.iconPack, t: this.t }), this.renderComposerUI()))));
+        return (h(Host, null, h("div", { class: "chat-container" }, h("div", { class: "chat" }, this.isFileMessagingAllowed() && (h("div", { id: "dropzone", class: { active: this.dropzoneActivated }, part: "dropzone" }, h("rtk-icon", { icon: this.iconPack.attach }), h("p", null, this.t('chat.send_attachment')))), this.renderPinnedMessagesHeader(), this.isPrivateChatSupported() && (h("rtk-channel-selector-view", { channels: this.getPrivateChatRecipients(), selectedChannelId: ((_a = this.selectedParticipant) === null || _a === void 0 ? void 0 : _a.userId) || 'everyone', onChannelChange: this.updateRecipients, t: this.t, viewAs: "dropdown" })), h("rtk-chat-messages-ui-paginated", { meeting: this.meeting, onPinMessage: this.onPinMessage, onEditMessage: this.onMessageEdit, onDeleteMessage: this.onDeleteMessage, size: this.size, iconPack: this.iconPack, t: this.t }), this.renderComposerUI()))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -11479,6 +11493,7 @@ const RtkChatMessagesUiPaginated = class {
         registerInstance(this, hostRef);
         this.editMessageInit = createEvent(this, "editMessageInit", 7);
         this.onPinMessage = createEvent(this, "pinMessage", 7);
+        this.onEditMessage = createEvent(this, "editMessage", 7);
         this.onDeleteMessage = createEvent(this, "deleteMessage", 7);
         this.stateUpdate = createEvent(this, "rtkStateUpdate", 7);
         /** Icon pack */
@@ -11529,22 +11544,18 @@ const RtkChatMessagesUiPaginated = class {
         };
         this.getMessageActions = (message) => {
             const actions = [];
-            // const isSelf = this.meeting.self.userId === message.userId;
-            // const chatMessagePermissions = this.meeting.self.permissions?.chatMessage;
-            // const canEdit =
-            //   chatMessagePermissions === undefined
-            //     ? isSelf
-            //     : chatMessagePermissions.canEdit === 'ALL' ||
-            //       (chatMessagePermissions.canEdit === 'SELF' && isSelf);
-            const canDelete = message.userId === this.meeting.self.userId;
-            if (this.meeting.self.permissions.pinParticipant) {
+            const messageBelongsToSelf = message.userId === this.meeting.self.userId;
+            actions.push({
+                id: 'pin_message',
+                label: message.pinned ? this.t('unpin') : this.t('pin'),
+                icon: this.iconPack.pin,
+            });
+            if (messageBelongsToSelf) {
                 actions.push({
-                    id: 'pin_message',
-                    label: message.pinned ? this.t('unpin') : this.t('pin'),
-                    icon: this.iconPack.pin,
+                    id: 'edit_message',
+                    label: this.t('chat.edit_msg'),
+                    icon: this.iconPack.edit,
                 });
-            }
-            if (canDelete) {
                 actions.push({
                     id: 'delete_message',
                     label: this.t('chat.delete_msg'),
@@ -11558,6 +11569,9 @@ const RtkChatMessagesUiPaginated = class {
                 case 'pin_message':
                     this.onPinMessage.emit(message);
                     break;
+                case 'edit_message':
+                    this.onEditMessage.emit(message);
+                    break;
                 case 'delete_message':
                     this.onDeleteMessage.emit(message);
                     break;
@@ -11586,7 +11600,7 @@ const RtkChatMessagesUiPaginated = class {
             }
             const isSelf = message.userId === this.meeting.self.userId;
             const viewType = isSelf ? 'outgoing' : 'incoming';
-            return (h("div", null, h("div", { class: "message-wrapper" }, h("rtk-message-view", { pinned: message.pinned, time: message.time, actions: this.getMessageActions(message), authorName: message.displayName, isSelf: isSelf, avatarUrl: displayPicture, hideAuthorName: isContinued, viewType: viewType, variant: "bubble", onAction: (event) => this.onMessageActionHandler(event.detail, message) }, h("div", null, h("div", { class: "body" }, message.type === 'text' && (h("rtk-text-message-view", { text: message.message, isMarkdown: true })), message.type === 'file' && (h("rtk-file-message-view", { name: message.name, url: message.link, size: message.size })), message.type === 'image' && (h("rtk-image-message-view", { url: message.link, onPreview: () => {
+            return (h("div", null, h("div", { class: "message-wrapper", id: message.id }, h("rtk-message-view", { pinned: message.pinned, time: message.time, actions: this.getMessageActions(message), authorName: message.displayName, isSelf: isSelf, avatarUrl: displayPicture, hideAuthorName: isContinued, viewType: viewType, variant: "bubble", onAction: (event) => this.onMessageActionHandler(event.detail, message) }, h("div", null, h("div", { class: "body" }, message.type === 'text' && (h("rtk-text-message-view", { text: message.message, isMarkdown: true })), message.type === 'file' && (h("rtk-file-message-view", { name: message.name, url: message.link, size: message.size })), message.type === 'image' && (h("rtk-image-message-view", { url: message.link, onPreview: () => {
                     this.stateUpdate.emit({ image: message });
                 } }))))))));
         };
@@ -11634,7 +11648,7 @@ const RtkChatMessagesUiPaginated = class {
         this.lastReadMessageIndex = -1;
     }
     render() {
-        return (h(Host, { key: '012b7189dfbdccfd8017cc9023263e6a7e9afd44' }, h("rtk-paginated-list", { key: '0ea37ee880fda0acdd7460b6da5f03e11ac304bf', ref: (el) => (this.$paginatedListRef = el), pageSize: this.pageSize, pagesAllowed: 3, fetchData: this.getChatMessages, createNodes: this.createChatNodes, selectedItemId: this.selectedChannelId, emptyListLabel: this.t('chat.empty_channel') }, h("slot", { key: '53cb197b6d9319f470e87fe73d7ca0d158778e3f' }))));
+        return (h(Host, { key: '55b594d1fad2c164a70b71e297f63273ece0bc4f' }, h("rtk-paginated-list", { key: '1554ee896643feec72a02672f156f95c988813ce', ref: (el) => (this.$paginatedListRef = el), pageSize: this.pageSize, pagesAllowed: 3, fetchData: this.getChatMessages, createNodes: this.createChatNodes, selectedItemId: this.selectedChannelId, emptyListLabel: this.t('chat.empty_channel') }, h("slot", { key: '03aeb2069b87cb217b9759cabd3835c9bac81f11' }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -12590,32 +12604,30 @@ const rtkPaginatedListCss = ".scrollbar{scrollbar-width:thin;scrollbar-color:var
 const RtkPaginatedListStyle0 = rtkPaginatedListCss;
 
 /**
- * HOW INFINITE SCROLL WORKS:
- *
- * We use intersectionObserver to scroll up.
- * We use scrollEnd listener to scroll down.
- *
- * Why?
- * intersectionObserver doesn't work reliably for 2 way scrolling but has great ux,
- * so we use it to smoothly scroll up.
+ * NOTE(ikabra): INFINITE SCROLL IMPLEMENTATION:
  *
- * We have empty divs at the top and bottom ($topRef, $bottomRef)
- * which act as triggers to tell that we have reached the top or end of our messages and need to fetch new messages,
+ * Uses scrollend listener for 2way scrolling.
+ * Empty divs ($topRef, $bottomRef) act as scroll triggers to fetch new messages.
  *
- * When scrolling up, we can't remove pages as intersectionObserver relies on
- * the index of dom elements to work properly.
- * So instead, we fetch older messages and push them to the end of the 2d array
- * if length exceeds pagesAllowed, we free up the pages and keep the first empty index in memory (firstEmptyIndex).
+ * UPWARD SCROLLING:
+ * - Fetch top anchor (element currently visible to the user near top)
+ * - Fetch older messages, push to end of 2D array
+ * - When exceeding pagesAllowed, delete pages and scroll back to anchor
  *
- * For scrolling down, when scroll ends we see if the bottomRef is in view.
- * If yes, we fetch the new page and insert it at the firstEmptyIndex.
- * We update timestamps & firstEmptyIndex, then we rerender.
+ * DOWNWARD SCROLLING:
+ * - Fetch bottom anchor (element currently visible to the user near bottom)
+ * - Fetch new page, insert at the start
+ * - Update timestamps & firstEmptyIndex, then rerender
+ * - When exceeding pagesAllowed, delete pages and scroll back to anchor
  *
- * If we have exceeded our page allowance we delete old pages.
+ * ADDING NEW NODES:
+ * - If no pages exist, load old page
+ * - If on 1st page, append messages till page size is full and then load new page
  *
- * In this case deleting pages is okay as we are not relying on the index of dom elements to detect page end.
- *
- * This also simplifies the code because when a user scrolls up we do not need to manage a lastEmptyIndex.
+ * DELETE NODE:
+ * - If deleting the only available node, reset to initial state
+ * - If page is empty, delete it
+ * - Update timestamp curors
  */
 var __decorate$2$8 = function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -12630,43 +12642,27 @@ var __decorate$2$8 = function (decorators, target, key, desc) {
 const RtkPaginatedList = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        /**
-         * when scrolling up, we can't remove pages as intersectionObserver relies on
-         * the index of dom elements to stay stable.
-         * So, instead we free up the pages and keep the last empty index in memory.
-         */
-        this.firstEmptyIndex = -1;
-        this.maxTS = 0;
         // the length of pages will always be pageSize + 2
         this.pages = [];
+        // Controls whether to keep auto-scrolling when a new page load.
+        this.shouldScrollToBottom = false;
+        // Shows "scroll to bottom" button when new nodes arrive and autoscroll is off.
+        this.showNewMessagesCTR = false;
         /** label to show when empty */
         this.emptyListLabel = null;
-        this.rerenderBoolean = false;
-        this.showEmptyListLabel = false;
         /** Icon pack */
         this.iconPack = defaultIconPack;
         /** Language */
         this.t = useLanguage();
+        this.rerenderBoolean = false;
+        this.showEmptyListLabel = false;
         this.isLoading = false;
         this.isLoadingTop = false;
         this.isLoadingBottom = false;
-        /**
-         * Even when auto scroll is enabled, we only want to scroll if a new realtime message has arrived.
-         * This variable tells us if we should respect auto scroll after a new page has been loaded.
-         * It is also used by the scroll to bottom button.
-         *  */
-        this.shouldScrollToBottom = false;
-        /** UI Indicator for the "scroll to bottom" button.
-         * Toggles on when a new node is added and autoscroll is disabled.
-         * Toggles off when all nodes are loaded */
-        this.showNewMessagesCTR = false;
-        this.observe = (el) => {
-            if (!el)
-                return;
-            this.intersectionObserver.observe(el);
-        };
-        this.isAtBottom = () => {
-            const rect = this.$bottomRef.getBoundingClientRect();
+        // Tells us if we need to scroll to a specific anchor after a rerender
+        this.pendingScrollAnchor = null;
+        this.isInView = (el) => {
+            const rect = el.getBoundingClientRect();
             return rect.top >= 0 && rect.bottom <= window.innerHeight;
         };
     }
@@ -12675,224 +12671,255 @@ const RtkPaginatedList = class {
      * @param {DataNode} node - The data node to add to the beginning of the list
      */
     async onNewNode(node) {
-        // Always update the maxTS. New messages will load on scroll till the end cursor (newTS) reaches this value.
-        this.maxTS = Math.max(this.maxTS, node.timeMs);
-        // if we are at the bottom of the page
-        if (this.firstEmptyIndex === -1) {
-            // if there are no pages, load the first page
-            if (this.pages.length < 1) {
-                // update old timer to 1ms ahead of the latest message as we subtract this value to avoid loading duplicate messages when scrolling
-                this.oldTS = node.timeMs + 1;
-                this.loadPrevPage();
+        // if there are no pages, load the first page
+        if (this.pages.length < 1) {
+            this.oldTS = node.timeMs + 1;
+            this.loadPrevPage();
+        }
+        else if (this.maxTS === this.newTS) {
+            this.maxTS = node.timeMs;
+            // append messages to the page if page has not reached full capacity
+            if (this.pages[0].length < this.pageSize) {
+                this.pages[0].unshift(node);
+                this.newTS = node.timeMs;
+                this.rerender();
             }
             else {
-                // append messages to the page if page has not reached full capacity
-                if (this.pages[0].length < this.pageSize) {
-                    this.pages[0].unshift(node);
-                    this.newTS = node.timeMs;
-                    this.rerender();
-                }
-                else {
-                    // if page is at full capacity, load next page
-                    this.loadNextPage();
-                }
+                // if page is at full capacity, load next page
+                this.loadNextPage();
             }
         }
-        // If autoscroll is enabled, this method will scroll to the bottom
+        // If autoscroll is enabled, scroll to the bottom
         if (this.autoScroll) {
             this.shouldScrollToBottom = true;
             this.scrollToBottom();
         }
-        else {
-            this.showNewMessagesCTR = true;
-        }
-    }
-    // this method is called recursively based on shouldScrollToBottom (see scrollEnd listener)
-    scrollToBottom() {
-        this.$bottomRef.scrollIntoView({ behavior: 'smooth' });
     }
     /**
      * Deletes a node anywhere from the list
      * @param {string} id - The id of the node to delete
      * */
     async onNodeDelete(id) {
-        // Iterate only over pages that have content (not empty)
-        for (let i = this.pages.length - 1; i > this.firstEmptyIndex; i--) {
+        var _a, _b;
+        let didDelete = false;
+        for (let i = this.pages.length - 1; i >= 0; i--) {
             const index = this.pages[i].findIndex((node) => node.id === id);
-            // message in view
-            if (index !== -1) {
-                // delete message
-                this.pages[i].splice(index, 1);
-                // if we are on the first page and it's now empty, we need to go back to initial state
-                if (i === 0 && this.pages[i].length === 0) {
-                    this.pages.shift();
-                    this.firstEmptyIndex = -1;
-                }
-                else if (i === this.firstEmptyIndex + 1) {
-                    //  if newest page is empty, update first empty index
-                    if (this.pages[i].length === 0)
-                        this.firstEmptyIndex++;
-                    // update timestamp, first empty index could be -1, so we need to cap it at 0
-                    this.newTS = this.pages[Math.max(this.firstEmptyIndex, 0)][0].timeMs;
-                }
-                else if (i === this.firstEmptyIndex + this.pagesAllowed) {
-                    //  if oldest page is empty, remove it
-                    if (this.pages[i].length === 0)
-                        this.pages.pop();
-                    // update timestamp
-                    const lastPage = this.pages[this.firstEmptyIndex + this.pagesAllowed];
-                    this.oldTS = lastPage[lastPage.length - 1].timeMs;
-                }
-                this.rerender();
-            }
+            // if message not found, move on
+            if (index === -1)
+                continue;
+            // delete message
+            this.pages[i].splice(index, 1);
+            // if page is empty, delete it
+            if (this.pages[i].length === 0)
+                this.pages.splice(i, 1);
+            didDelete = true;
+            break;
         }
+        if (!didDelete)
+            return;
+        // update timestamps
+        const firstPage = this.pages[0];
+        const lastPage = this.pages[this.pages.length - 1];
+        this.newTS = (_a = firstPage === null || firstPage === void 0 ? void 0 : firstPage[0]) === null || _a === void 0 ? void 0 : _a.timeMs;
+        this.oldTS = (_b = lastPage === null || lastPage === void 0 ? void 0 : lastPage[lastPage.length - 1]) === null || _b === void 0 ? void 0 : _b.timeMs;
+        this.rerender();
     }
     /**
      * Updates a new node anywhere in the list
-     * @param {string} _id - The id of the node to update
-     * @param {DataNode} _node - The updated data node
+     * @param {string} id - The id of the node to update
+     * @param {DataNode} node - The updated data node
      * */
-    async onNodeUpdate(_id, _node) { }
-    rerender() {
-        this.rerenderBoolean = !this.rerenderBoolean;
+    async onNodeUpdate(id, node) {
+        for (let i = this.pages.length - 1; i >= 0; i--) {
+            const index = this.pages[i].findIndex((node) => node.id === id);
+            // if message not found, move on
+            if (index === -1)
+                continue;
+            // edit message
+            this.pages[i][index] = node;
+            this.rerender();
+            break;
+        }
     }
     connectedCallback() {
         this.rerender = debounce$1(this.rerender.bind(this), 50, { maxWait: 200 });
-        this.intersectionObserver = new IntersectionObserver((entries) => {
-            writeTask(async () => {
-                for (const entry of entries) {
-                    if (entry.target.id === 'top-scroll' && entry.isIntersecting) {
-                        this.isLoadingTop = true;
-                        await this.loadPrevPage();
-                        this.isLoadingTop = false;
-                    }
-                }
-            });
-        });
     }
     componentDidLoad() {
-        this.observe(this.$topRef);
+        // initial load
+        this.loadPrevPage();
         if (this.$containerRef) {
             this.$containerRef.onscrollend = async () => {
-                /**
-                 * Load new page if:
-                 * if there are nodes to load at the bottom (maxTS > newTS)
-                 * or if there are pages to fill at the bottom (firstEmptyIndex > -1)
-                 */
-                if (this.isAtBottom() && (this.maxTS > this.newTS || this.firstEmptyIndex > -1)) {
-                    this.isLoadingBottom = true;
+                if (this.isInView(this.$bottomRef)) {
                     await this.loadNextPage();
-                    this.isLoadingBottom = false;
-                    if (this.shouldScrollToBottom)
-                        this.scrollToBottom();
+                }
+                else if (this.isInView(this.$topRef)) {
+                    this.showNewMessagesCTR = true;
+                    await this.loadPrevPage();
                 }
             };
         }
     }
+    componentDidRender() {
+        if (!this.pendingScrollAnchor)
+            return;
+        const anchor = this.pendingScrollAnchor;
+        this.pendingScrollAnchor = null;
+        this.restoreScrollToAnchor(anchor);
+    }
     async loadPrevPage() {
         if (this.isLoading)
             return;
-        /**
-         * NOTE(ikabra): this case also runs on initial load
-         * if scrolling up ->
-         * fetch older messages and push to the end of the array
-         * cleanup 1st non empty page from the array if length exceeds pagesAllowed
-         */
+        const scrollAnchor = this.getScrollAnchor('top');
         // if no old timestamp, it means we are at initial state
         if (!this.oldTS)
             this.oldTS = new Date().getTime();
         // load data
         this.isLoading = true;
+        this.isLoadingTop = true;
         const data = await this.fetchData(this.oldTS - 1, this.pageSize, true);
         this.isLoading = false;
+        this.isLoadingTop = false;
         // no more old messages to show, we are at the top of the page
         if (!data.length)
             return;
         // add old data to the end of the array
         this.pages.push(data);
         // clear old pages when we reach the limit
-        if (this.pages.length > this.pagesAllowed) {
-            this.pages[this.pages.length - this.pagesAllowed - 1] = [];
-            /**
-             * find last non empty page in range (this.pages.length, this.firstEmptyIndex)
-             * we are doing this because any of the middle pages in the currently rendered pages
-             * could be empty as we allow deleting messages.
-             * This helps us set the first empty index correctly.
-             */
-            for (let i = this.firstEmptyIndex + 1; i < this.pages.length; i++) {
-                if (this.pages[i].length > 0)
-                    break;
-                this.firstEmptyIndex = i;
-            }
-        }
-        // update the old timestamp
+        if (this.pages.length > this.pagesAllowed)
+            this.pages.shift();
+        // update timestamps
         const lastPage = this.pages[this.pages.length - 1];
         this.oldTS = lastPage[lastPage.length - 1].timeMs;
-        // update the new timestamp
-        this.newTS = this.pages[this.firstEmptyIndex + 1][0].timeMs;
+        this.newTS = this.pages[0][0].timeMs;
+        if (!this.maxTS)
+            this.maxTS = this.newTS;
         this.rerender();
+        // fix scroll position
+        if (scrollAnchor)
+            this.pendingScrollAnchor = scrollAnchor;
     }
     async loadNextPage() {
         if (this.isLoading)
             return;
-        // new timestamp needs to be assigned by loadPrevPage method
+        // Do nothing. New timestamp needs to be assigned by loadPrevPage method
         if (!this.newTS) {
             this.showNewMessagesCTR = false;
             this.shouldScrollToBottom = false;
             return;
         }
-        // load data
+        // for autoscroll or scroll to bottom button
+        const maxAutoLoads = 200;
+        let loads = 0;
+        let prevNewTS = this.newTS;
         this.isLoading = true;
-        const data = await this.fetchData(this.newTS + 1, this.pageSize, false);
-        this.isLoading = false;
-        // no more new messages to load
-        if (!data.length) {
-            this.showNewMessagesCTR = false;
-            this.shouldScrollToBottom = false;
-            // remove extra pages from the start if any (could be due to users deleting messages)
-            this.pages = this.pages.filter((page) => page.length > 0);
-            this.firstEmptyIndex = -1;
-            return;
-        }
-        // when filling empty pages
-        if (this.firstEmptyIndex > -1) {
-            this.pages[this.firstEmptyIndex] = data.reverse();
-        }
-        else {
-            // when already at the bottom and loading messages in realtime
+        this.isLoadingBottom = true;
+        while (loads < maxAutoLoads) {
+            const scrollAnchor = this.getScrollAnchor('bottom');
+            const data = await this.fetchData(this.newTS + 1, this.pageSize, false);
+            this.isLoading = false;
+            this.isLoadingBottom = false;
+            // no more new messages to load
+            if (!data.length) {
+                this.maxTS = this.newTS;
+                this.showNewMessagesCTR = false;
+                this.shouldScrollToBottom = false;
+                break;
+            }
+            // load new messages and append to the start
             this.pages.unshift(data.reverse());
+            // remove pages if out of bounds
+            if (this.pages.length > this.pagesAllowed)
+                this.pages.pop();
+            // update timestamps
+            const lastPage = this.pages[this.pages.length - 1];
+            this.oldTS = lastPage[lastPage.length - 1].timeMs;
+            this.newTS = this.pages[0][0].timeMs;
+            this.rerender();
+            this.pendingScrollAnchor = scrollAnchor;
+            if (!this.shouldScrollToBottom)
+                break;
+            // if should scroll to bottom then retrigger
+            await this.waitForNextFrame();
+            this.scrollToBottom();
+            await this.waitForNextFrame();
+            // if no new messages, break
+            if (this.newTS === prevNewTS)
+                break;
+            prevNewTS = this.newTS;
+            loads++;
         }
-        if (this.pages.length > this.pagesAllowed) {
-            this.pages.pop();
+    }
+    // Find the element that is closest to the top/bottom of the container
+    getScrollAnchor(edge = 'top') {
+        if (!this.$containerRef)
+            return null;
+        const containerRect = this.$containerRef.getBoundingClientRect();
+        const candidates = Array.from(this.$containerRef.querySelectorAll('[id]')).filter((el) => el.id !== 'top-scroll' && el.id !== 'bottom-scroll');
+        let best = null;
+        for (const el of candidates) {
+            const rect = el.getBoundingClientRect();
+            const isVisibleInContainer = rect.bottom > containerRect.top && rect.top < containerRect.bottom;
+            if (!isVisibleInContainer)
+                continue;
+            if (edge === 'top') {
+                const offsetTop = rect.top - containerRect.top;
+                if (best == null || (best.edge === 'top' && offsetTop < best.offsetTop)) {
+                    best = { id: el.id, edge: 'top', offsetTop };
+                }
+            }
+            else {
+                const offsetBottom = containerRect.bottom - rect.bottom;
+                if (best == null || (best.edge === 'bottom' && offsetBottom < best.offsetBottom)) {
+                    best = { id: el.id, edge: 'bottom', offsetBottom };
+                }
+            }
         }
-        // smallest value for firstEmptyIndex can be -1, so we cap the index at 0
-        this.newTS = this.pages[Math.max(0, this.firstEmptyIndex)][0].timeMs;
-        // remove all empty pages from the end
-        for (let i = this.pages.length - 1; i > this.firstEmptyIndex; i--) {
-            if (this.pages[i].length > 0)
-                break;
-            // if page is empty, remove it
-            this.pages.pop();
+        return best;
+    }
+    //instant scroll to anchor to make sure we are at the same position after a rerender
+    restoreScrollToAnchor(anchor) {
+        if (!this.$containerRef)
+            return;
+        // make element id safe to use inside a CSS selector
+        const escapeId = (id) => {
+            var _a;
+            const cssEscape = (_a = globalThis.CSS) === null || _a === void 0 ? void 0 : _a.escape;
+            return typeof cssEscape === 'function'
+                ? cssEscape(id)
+                : id.replace(/[^a-zA-Z0-9_-]/g, '\\$&');
+        };
+        const el = this.$containerRef.querySelector(`#${escapeId(anchor.id)}`);
+        if (!el)
+            return;
+        const containerRect = this.$containerRef.getBoundingClientRect();
+        const rect = el.getBoundingClientRect();
+        if (anchor.edge === 'top') {
+            const newOffsetTop = rect.top - containerRect.top;
+            this.$containerRef.scrollTop += newOffsetTop - anchor.offsetTop;
         }
-        // update the old timestamp
-        const lastPage = this.pages[this.pages.length - 1];
-        this.oldTS = lastPage[lastPage.length - 1].timeMs;
-        // when scrolling too fast scroll a bit to the top to be able to load new messages when you scroll down
-        if (this.$containerRef.scrollTop === 0)
-            this.$containerRef.scrollTop = -60;
-        // smallest value for this index can be -1 (indicates we are at the bottom of the page).
-        this.firstEmptyIndex = Math.max(-1, this.firstEmptyIndex - 1);
-        this.rerender();
+        else {
+            const newOffsetBottom = containerRect.bottom - rect.bottom;
+            this.$containerRef.scrollTop += anchor.offsetBottom - newOffsetBottom;
+        }
+    }
+    // this method is called recursively based on shouldScrollToBottom (see loadNextPage)
+    scrollToBottom() {
+        this.$bottomRef.scrollIntoView({ behavior: 'smooth' });
+    }
+    waitForNextFrame() {
+        return new Promise((resolve) => requestAnimationFrame(() => resolve()));
+    }
+    rerender() {
+        this.rerenderBoolean = !this.rerenderBoolean;
     }
     render() {
         /**
-         * div.container is flex=column-reverse
-         * which is why div#bottom-scroll comes before div#top-scroll
+         * div.container is flex=column-reversewhich is why div#bottom-scroll comes before div#top-scroll
          */
-        return (h(Host, { key: '9bf695bccf42f2dd43b04725a855b6b77a4062fd' }, h("div", { key: '7c6805ed8b5e831ea6d932cfb5dc3ecf3d312775', class: "scrollbar container", part: "container", ref: (el) => (this.$containerRef = el) }, h("div", { key: 'eb6c68f97385b5a14a94ab2dc0abff4836f016f3', class: { 'show-new-messages-ctr': true, active: this.showNewMessagesCTR } }, h("rtk-button", { key: 'd1f04db290a9e4128ca58c9bd20b2146a7fc8f12', class: "show-new-messages", kind: "icon", variant: "secondary", part: "show-new-messages", onClick: () => {
+        return (h(Host, { key: '5f036ac16ace127734d5ee172d537c64baeab415' }, h("div", { key: 'b6d8cf3019a72350f7a3a5b4d020b6ab39793f53', class: "scrollbar container", part: "container", ref: (el) => (this.$containerRef = el) }, h("div", { key: '5c63462ffd995a3e266652bba4e3377636c5f9ca', class: { 'show-new-messages-ctr': true, active: this.showNewMessagesCTR } }, h("rtk-button", { key: 'c1fc4f2759d5be662047245b0dae3eb6f65a9b50', class: "show-new-messages", kind: "icon", variant: "secondary", part: "show-new-messages", onClick: () => {
                 this.shouldScrollToBottom = true;
                 this.scrollToBottom();
-            } }, h("rtk-icon", { key: '71d8a85911513bb4069578a63ae45f21ac53554c', icon: this.iconPack.chevron_down }))), h("div", { key: 'b1aa46b8163431df6060163d7c5a87eb1ebcffa3', class: "smallest-dom-element", id: "bottom-scroll", ref: (el) => (this.$bottomRef = el) }), this.isLoadingBottom && this.pages.length > 0 && h("rtk-spinner", { key: 'a3de0e7b8ca1ac505a596d86c0b8ecafee5fabba', size: "sm" }), this.isLoading && this.pages.length < 1 && h("rtk-spinner", { key: '21fa3a4091d3f1311f5d575c277859602718338c', size: "lg" }), !this.isLoading && this.pages.flat().length === 0 ? (h("div", { class: "empty-list" }, this.t('list.empty'))) : (h("div", { class: "page-wrapper" }, this.pages.map((page, pageIndex) => (h("div", { class: "page", "data-page-index": pageIndex }, this.createNodes([...page].reverse())))))), this.isLoadingTop && this.pages.length > 0 && h("rtk-spinner", { key: '7e018af534e7cd0be3345ca9ad9c8f0a7ab7cc3f', size: "sm" }), h("div", { key: '6c877368fc03c884338402bbcd878929cd4034fb', class: "smallest-dom-element", id: "top-scroll", ref: (el) => (this.$topRef = el) }))));
+            } }, h("rtk-icon", { key: '96b19395a2ca8e87ca5004f675cf79f8d58f036c', icon: this.iconPack.chevron_down }))), h("div", { key: '84789a3d0fa4645be711a87cda1e109e4f7d0db2', class: "smallest-dom-element", id: "bottom-scroll", ref: (el) => (this.$bottomRef = el) }), this.isLoadingBottom && this.pages.length > 0 && h("rtk-spinner", { key: 'd17f28cc01695220ed6e705d528e8f555b77e8ea', size: "sm" }), this.isLoading && this.pages.length < 1 && h("rtk-spinner", { key: '4ee308d335cdc1f86e2bfdcc20611f50a51ef816', size: "lg" }), !this.isLoading && this.pages.flat().length === 0 ? (h("div", { class: "empty-list" }, this.t('list.empty'))) : (h("div", { class: "page-wrapper" }, this.pages.map((page, pageIndex) => (h("div", { class: "page", "data-page-index": pageIndex }, this.createNodes([...page].reverse())))))), this.isLoadingTop && this.pages.length > 0 && h("rtk-spinner", { key: 'c07c4dd4c4ed0adf01d2fc224b7196a0f86243fd', size: "sm" }), h("div", { key: '52161ac30062c2262f1cdbcded50f2716f6ed20e', class: "smallest-dom-element", id: "top-scroll", ref: (el) => (this.$topRef = el) }))));
     }
 };
 __decorate$2$8([
@@ -15418,7 +15445,7 @@ const RtkChatToggle = class {
         const newMessages = messages.filter((m) => m.timeMs > meetingStartedTimeMs);
         if (newMessages.length === this.pageSize && newMessages.length > 0) {
             // all messages are new, so we can't know the exact count, but we know there are at least pageSize - 1 new messages
-            this.unreadMessageCount = this.pageSize - 1;
+            this.unreadMessageCount = newMessages.length;
         }
         else {
             this.unreadMessageCount = newMessages.length;
@@ -18708,7 +18735,10 @@ const RtkNotifications = class {
         this.waitlistedParticipantLeftListener = (participant) => {
             this.remove(`${participant.id}-joined-waitlist`);
         };
-        this.chatUpdateListener = ({ message }) => {
+        this.chatUpdateListener = ({ message, action }) => {
+            // NOTE(ikabra): we only want notifications for new messages
+            if (action !== 'add')
+                return;
             const parsedMessage = parseMessageForTarget(message);
             if (parsedMessage != null) {
                 if (parsedMessage.userId === meeting.self.userId) {