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

package/dist/collection/components/rtk-paginated-list/rtk-paginated-list.js

@@ -1,30 +1,28 @@
 /**
- * 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 = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -36,50 +34,34 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
                 r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Host, h, writeTask } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import { defaultIconPack } from "../../lib/icons";
 import { useLanguage } from "../../lib/lang";
 import { SyncWithStore } from "../../utils/sync-with-store";
 import { debounce } from "lodash-es";
 export class RtkPaginatedList {
     constructor() {
-        /**
-         * 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;
         };
     }
@@ -88,77 +70,57 @@ export class RtkPaginatedList {
      * @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 {
+            // 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
@@ -166,146 +128,182 @@ export class RtkPaginatedList {
      * @param {DataNode} _node - The updated data node
      * */
     async onNodeUpdate(_id, _node) { }
-    rerender() {
-        this.rerenderBoolean = !this.rerenderBoolean;
-    }
     connectedCallback() {
         this.rerender = debounce(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;
         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++;
         }
-        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: 'e0f806cccdcba162d0c834476863b34630cb1a1e' }, h("div", { key: '6d54d50ed703a59df8d26399499533e3cb0d70fe', class: "scrollbar container", part: "container", ref: (el) => (this.$containerRef = el) }, h("div", { key: '4e9fcbed725fb55d9fbb67eca94b0e770662d51b', class: { 'show-new-messages-ctr': true, active: this.showNewMessagesCTR } }, h("rtk-button", { key: '7db0236d35db3fb9856fea7a4f62c1fbd421829e', 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: '6e247e86029560601080e0b4d6dcfccbd90fcdd6', icon: this.iconPack.chevron_down }))), h("div", { key: '01d1ba7eacc67ece70b805fb2dfb493cdf1c9d23', class: "smallest-dom-element", id: "bottom-scroll", ref: (el) => (this.$bottomRef = el) }), this.isLoadingBottom && this.pages.length > 0 && h("rtk-spinner", { key: '24391bfc34914675cbfd0c287332bfdf3f5f5000', size: "sm" }), this.isLoading && this.pages.length < 1 && h("rtk-spinner", { key: 'e6c2cb44fce52ca54c9f1e543d91a29648745408', 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: 'd90a15494bcd7ec6c9c7ffc5e9a55054252a4258', size: "sm" }), h("div", { key: '2a65f98c3c4e6f2510c6cf1b4e2bcf1e607a7552', class: "smallest-dom-element", id: "top-scroll", ref: (el) => (this.$topRef = el) }))));
     }
     static get is() { return "rtk-paginated-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/{p-85872241.js → p-1d16490e.js}

@@ -7,7 +7,7 @@ import { d as defineCustomElement$m } from './p-241a8245.js';
 import { d as defineCustomElement$l } from './p-1391bef0.js';
 import { d as defineCustomElement$k } from './p-a73665b4.js';
 import { d as defineCustomElement$j } from './p-28170a8d.js';
-import { d as defineCustomElement$i } from './p-b6781e91.js';
+import { d as defineCustomElement$i } from './p-7be71567.js';
 import { d as defineCustomElement$h } from './p-1f5a4682.js';
 import { d as defineCustomElement$g } from './p-598dc3f2.js';
 import { d as defineCustomElement$f } from './p-0e5cc539.js';
@@ -20,7 +20,7 @@ import { d as defineCustomElement$9 } from './p-2447a26f.js';
 import { d as defineCustomElement$8 } from './p-819cb785.js';
 import { d as defineCustomElement$7 } from './p-7148ec6a.js';
 import { d as defineCustomElement$6 } from './p-0f2de0f8.js';
-import { d as defineCustomElement$5 } from './p-e7e2156a.js';
+import { d as defineCustomElement$5 } from './p-7f8d9afc.js';
 import { d as defineCustomElement$4 } from './p-4ebf9684.js';
 import { d as defineCustomElement$3 } from './p-4902c5cf.js';
 import { d as defineCustomElement$2 } from './p-6739a399.js';

package/dist/components/{p-b6781e91.js → p-7be71567.js}

@@ -11,7 +11,7 @@ import { d as defineCustomElement$7 } from './p-2447a26f.js';
 import { d as defineCustomElement$6 } from './p-819cb785.js';
 import { d as defineCustomElement$5 } from './p-7148ec6a.js';
 import { d as defineCustomElement$4 } from './p-0f2de0f8.js';
-import { d as defineCustomElement$3 } from './p-e7e2156a.js';
+import { d as defineCustomElement$3 } from './p-7f8d9afc.js';
 import { d as defineCustomElement$2 } from './p-4ebf9684.js';
 import { d as defineCustomElement$1 } from './p-6739a399.js';
 
@@ -142,7 +142,7 @@ const RtkChatMessagesUiPaginated = /*@__PURE__*/ proxyCustomElement(class RtkCha
             }
             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 });
                 } }))))))));
         };
@@ -190,7 +190,7 @@ const RtkChatMessagesUiPaginated = /*@__PURE__*/ proxyCustomElement(class RtkCha
         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' }))));
     }
     get host() { return this; }
     static get watchers() { return {