@cloudflare/realtimekit-ui 1.1.0-staging.5 → 1.1.0-staging.7

package/dist/cjs/rtk-avatar_24.cjs.entry.js

@@ -1048,7 +1048,7 @@ const RtkChatMessagesUiPaginated = class {
             }
             const isSelf = message.userId === this.meeting.self.userId;
             const viewType = isSelf ? 'outgoing' : 'incoming';
-            return (index$1.h("div", null, index$1.h("div", { class: "message-wrapper" }, index$1.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) }, index$1.h("div", null, index$1.h("div", { class: "body" }, message.type === 'text' && (index$1.h("rtk-text-message-view", { text: message.message, isMarkdown: true })), message.type === 'file' && (index$1.h("rtk-file-message-view", { name: message.name, url: message.link, size: message.size })), message.type === 'image' && (index$1.h("rtk-image-message-view", { url: message.link, onPreview: () => {
+            return (index$1.h("div", null, index$1.h("div", { class: "message-wrapper", id: message.id }, index$1.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) }, index$1.h("div", null, index$1.h("div", { class: "body" }, message.type === 'text' && (index$1.h("rtk-text-message-view", { text: message.message, isMarkdown: true })), message.type === 'file' && (index$1.h("rtk-file-message-view", { name: message.name, url: message.link, size: message.size })), message.type === 'image' && (index$1.h("rtk-image-message-view", { url: message.link, onPreview: () => {
                     this.stateUpdate.emit({ image: message });
                 } }))))))));
         };
@@ -1096,7 +1096,7 @@ const RtkChatMessagesUiPaginated = class {
         this.lastReadMessageIndex = -1;
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '012b7189dfbdccfd8017cc9023263e6a7e9afd44' }, index$1.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') }, index$1.h("slot", { key: '53cb197b6d9319f470e87fe73d7ca0d158778e3f' }))));
+        return (index$1.h(index$1.Host, { key: 'c710da6e2fda420146905a2ed75d3444dd6d2c0b' }, index$1.h("rtk-paginated-list", { key: '51a36437e38e9c0242cca34bfda39f6d8309bee3', 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') }, index$1.h("slot", { key: '69b54a41263510b425ce3e39af055321c4e2deb8' }))));
     }
     get host() { return index$1.getElement(this); }
     static get watchers() { return {
@@ -2058,32 +2058,30 @@ const rtkPaginatedListCss = ".scrollbar{scrollbar-width:thin;scrollbar-color:var
 const RtkPaginatedListStyle0 = rtkPaginatedListCss;
 
 /**
- * HOW INFINITE SCROLL WORKS:
+ * NOTE(ikabra): INFINITE SCROLL IMPLEMENTATION:
  *
- * We use intersectionObserver to scroll up.
- * We use scrollEnd listener to scroll down.
+ * Uses scrollend listener for 2way scrolling.
+ * Empty divs ($topRef, $bottomRef) act as scroll triggers to fetch new messages.
  *
- * Why?
- * intersectionObserver doesn't work reliably for 2 way scrolling but has great ux,
- * so we use it to smoothly scroll up.
+ * 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
  *
- * 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,
+ * 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
  *
- * 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).
+ * 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
  *
- * 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.
- *
- * If we have exceeded our page allowance we delete old pages.
- *
- * 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 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -2098,43 +2096,27 @@ var __decorate$2 = (undefined && undefined.__decorate) || function (decorators,
 const RtkPaginatedList = class {
     constructor(hostRef) {
         index$1.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 = uiStore.defaultIconPack;
         /** Language */
         this.t = uiStore.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;
         };
     }
@@ -2143,10 +2125,12 @@ 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) {
+            this.oldTS = node.timeMs + 1;
+            this.loadPrevPage();
+        }
+        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);
@@ -2158,49 +2142,40 @@ const RtkPaginatedList = class {
                 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 (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
@@ -2208,146 +2183,182 @@ const RtkPaginatedList = class {
      * @param {DataNode} _node - The updated data node
      * */
     async onNodeUpdate(_id, _node) { }
-    rerender() {
-        this.rerenderBoolean = !this.rerenderBoolean;
-    }
     connectedCallback() {
         this.rerender = debounce.debounce(this.rerender.bind(this), 50, { maxWait: 200 });
-        this.intersectionObserver = new IntersectionObserver((entries) => {
-            index$1.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;
         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.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++;
+        }
+    }
+    // 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 };
+                }
+            }
         }
-        if (this.pages.length > this.pagesAllowed) {
-            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;
         }
-        // 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();
+        else {
+            const newOffsetBottom = containerRect.bottom - rect.bottom;
+            this.$containerRef.scrollTop += anchor.offsetBottom - newOffsetBottom;
         }
-        // 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();
+    }
+    // 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 (index$1.h(index$1.Host, { key: '91ac7d0ca3fb720259945ffaa97f465b34c694fa' }, index$1.h("div", { key: '33896c19ecc4359ae163c65b5c71b9f17673e765', class: "scrollbar container", part: "container", ref: (el) => (this.$containerRef = el) }, index$1.h("div", { key: 'e26a5ef3979ec132277b9598afc17ea65683f6c8', class: { 'show-new-messages-ctr': true, active: this.showNewMessagesCTR } }, index$1.h("rtk-button", { key: 'e769a8f54a298af456552733dc9de27d059e5138', class: "show-new-messages", kind: "icon", variant: "secondary", part: "show-new-messages", onClick: () => {
+        return (index$1.h(index$1.Host, { key: 'e0f806cccdcba162d0c834476863b34630cb1a1e' }, index$1.h("div", { key: '6d54d50ed703a59df8d26399499533e3cb0d70fe', class: "scrollbar container", part: "container", ref: (el) => (this.$containerRef = el) }, index$1.h("div", { key: '4e9fcbed725fb55d9fbb67eca94b0e770662d51b', class: { 'show-new-messages-ctr': true, active: this.showNewMessagesCTR } }, index$1.h("rtk-button", { key: '7db0236d35db3fb9856fea7a4f62c1fbd421829e', class: "show-new-messages", kind: "icon", variant: "secondary", part: "show-new-messages", onClick: () => {
                 this.shouldScrollToBottom = true;
                 this.scrollToBottom();
-            } }, index$1.h("rtk-icon", { key: '6fb4cbc2247eb971004a94926b95ebd0f90ab0fd', icon: this.iconPack.chevron_down }))), index$1.h("div", { key: 'e91dd8f25012e4509e0ff3cb4d6b65aa9467d427', class: "smallest-dom-element", id: "bottom-scroll", ref: (el) => (this.$bottomRef = el) }), this.isLoadingBottom && this.pages.length > 0 && index$1.h("rtk-spinner", { key: '199c0ccffd57716bd5a05dcef8610113d3c58d3d', size: "sm" }), this.isLoading && this.pages.length < 1 && index$1.h("rtk-spinner", { key: 'b8a3e08a25b2bc1d50b5a9b1b2deda802ae5eb28', size: "lg" }), !this.isLoading && this.pages.flat().length === 0 ? (index$1.h("div", { class: "empty-list" }, this.t('list.empty'))) : (index$1.h("div", { class: "page-wrapper" }, this.pages.map((page, pageIndex) => (index$1.h("div", { class: "page", "data-page-index": pageIndex }, this.createNodes([...page].reverse())))))), this.isLoadingTop && this.pages.length > 0 && index$1.h("rtk-spinner", { key: '2cb56b4f70d37548fd9aa71b961559b43c54a922', size: "sm" }), index$1.h("div", { key: '4b183c49bfe60fd63af40e02b9b46215c08bb484', class: "smallest-dom-element", id: "top-scroll", ref: (el) => (this.$topRef = el) }))));
+            } }, index$1.h("rtk-icon", { key: '6e247e86029560601080e0b4d6dcfccbd90fcdd6', icon: this.iconPack.chevron_down }))), index$1.h("div", { key: '01d1ba7eacc67ece70b805fb2dfb493cdf1c9d23', class: "smallest-dom-element", id: "bottom-scroll", ref: (el) => (this.$bottomRef = el) }), this.isLoadingBottom && this.pages.length > 0 && index$1.h("rtk-spinner", { key: '24391bfc34914675cbfd0c287332bfdf3f5f5000', size: "sm" }), this.isLoading && this.pages.length < 1 && index$1.h("rtk-spinner", { key: 'e6c2cb44fce52ca54c9f1e543d91a29648745408', size: "lg" }), !this.isLoading && this.pages.flat().length === 0 ? (index$1.h("div", { class: "empty-list" }, this.t('list.empty'))) : (index$1.h("div", { class: "page-wrapper" }, this.pages.map((page, pageIndex) => (index$1.h("div", { class: "page", "data-page-index": pageIndex }, this.createNodes([...page].reverse())))))), this.isLoadingTop && this.pages.length > 0 && index$1.h("rtk-spinner", { key: 'd90a15494bcd7ec6c9c7ffc5e9a55054252a4258', size: "sm" }), index$1.h("div", { key: '2a65f98c3c4e6f2510c6cf1b4e2bcf1e607a7552', class: "smallest-dom-element", id: "top-scroll", ref: (el) => (this.$topRef = el) }))));
     }
 };
 __decorate$2([

package/dist/cjs/rtk-chat-toggle.cjs.entry.js

@@ -94,9 +94,9 @@ const RtkChatToggle = class {
         const { messages } = await chat.getMessages(new Date().getTime(), this.pageSize, true);
         const meetingStartedTimeMs = (_b = (_a = this.meeting.meta) === null || _a === void 0 ? void 0 : _a.meetingStartedTimestamp.getTime()) !== null && _b !== void 0 ? _b : 0;
         const newMessages = messages.filter((m) => m.timeMs > meetingStartedTimeMs);
-        if (newMessages.length === messages.length && messages.length > 0) {
+        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;

package/dist/cjs/rtk-notifications.cjs.entry.js

@@ -232,7 +232,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 = chat.parseMessageForTarget(message);
             if (parsedMessage != null) {
                 if (parsedMessage.userId === meeting.self.userId) {

package/dist/collection/components/rtk-chat-messages-ui-paginated/rtk-chat-messages-ui-paginated.js

@@ -121,7 +121,7 @@ export class RtkChatMessagesUiPaginated {
             }
             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 });
                 } }))))))));
         };
@@ -169,7 +169,7 @@ export class RtkChatMessagesUiPaginated {
         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: 'c710da6e2fda420146905a2ed75d3444dd6d2c0b' }, h("rtk-paginated-list", { key: '51a36437e38e9c0242cca34bfda39f6d8309bee3', 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: '69b54a41263510b425ce3e39af055321c4e2deb8' }))));
     }
     static get is() { return "rtk-chat-messages-ui-paginated"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-chat-toggle/rtk-chat-toggle.js

@@ -96,9 +96,9 @@ export class RtkChatToggle {
         const { messages } = await chat.getMessages(new Date().getTime(), this.pageSize, true);
         const meetingStartedTimeMs = (_b = (_a = this.meeting.meta) === null || _a === void 0 ? void 0 : _a.meetingStartedTimestamp.getTime()) !== null && _b !== void 0 ? _b : 0;
         const newMessages = messages.filter((m) => m.timeMs > meetingStartedTimeMs);
-        if (newMessages.length === messages.length && messages.length > 0) {
+        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;

package/dist/collection/components/rtk-notifications/rtk-notifications.js

@@ -197,7 +197,10 @@ export class RtkNotifications {
         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) {