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

package/dist/components/{p-7f8d9afc.js → p-fbc02b1f.js}

@@ -79,12 +79,18 @@ const RtkPaginatedList = /*@__PURE__*/ proxyCustomElement(class RtkPaginatedList
      * @param {DataNode} node - The data node to add to the beginning of the list
      */
     async onNewNode(node) {
-        // if there are no pages, load the first page
+        // if there are no pages, append to the first page
         if (this.pages.length < 1) {
-            this.oldTS = node.timeMs + 1;
-            this.loadPrevPage();
+            this.oldTS = node.timeMs;
+            this.pages.unshift([node]);
+            this.newTS = node.timeMs;
+            this.maxTS = node.timeMs;
+            this.rerender();
+            if (this.autoScroll)
+                this.$bottomRef.scrollIntoView({ behavior: 'smooth' });
         }
-        else {
+        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);
@@ -93,14 +99,25 @@ const RtkPaginatedList = /*@__PURE__*/ proxyCustomElement(class RtkPaginatedList
             }
             else {
                 // if page is at full capacity, load next page
-                this.loadNextPage();
+                this.pages.unshift([node]);
+                this.newTS = node.timeMs;
+                // 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();
             }
+            if (this.autoScroll)
+                this.$bottomRef.scrollIntoView({ behavior: 'smooth' });
         }
-        // If autoscroll is enabled, scroll to the bottom
-        if (this.autoScroll) {
-            this.shouldScrollToBottom = true;
-            this.scrollToBottom();
+        else {
+            if (this.autoScroll)
+                this.scrollToBottom();
         }
+        this.pendingScrollAnchor = null;
     }
     /**
      * Deletes a node anywhere from the list
@@ -108,7 +125,6 @@ const RtkPaginatedList = /*@__PURE__*/ proxyCustomElement(class RtkPaginatedList
      * */
     async onNodeDelete(id) {
         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);
             // if message not found, move on
@@ -119,24 +135,35 @@ const RtkPaginatedList = /*@__PURE__*/ proxyCustomElement(class RtkPaginatedList
             // if page is empty, delete it
             if (this.pages[i].length === 0)
                 this.pages.splice(i, 1);
-            didDelete = true;
+            // 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;
+            // if I have deleted the latest message, update maxTS
+            if (index === 0 && i === 0)
+                this.maxTS = this.newTS;
+            this.rerender();
             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) { }
+    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(this.rerender.bind(this), 50, { maxWait: 200 });
     }
@@ -145,6 +172,10 @@ const RtkPaginatedList = /*@__PURE__*/ proxyCustomElement(class RtkPaginatedList
         this.loadPrevPage();
         if (this.$containerRef) {
             this.$containerRef.onscrollend = async () => {
+                // do not do anything if we are scrolling to bottom
+                if (this.shouldScrollToBottom)
+                    return;
+                // handle top and bottom scroll
                 if (this.isInView(this.$bottomRef)) {
                     await this.loadNextPage();
                 }
@@ -187,6 +218,8 @@ const RtkPaginatedList = /*@__PURE__*/ proxyCustomElement(class RtkPaginatedList
         const lastPage = this.pages[this.pages.length - 1];
         this.oldTS = lastPage[lastPage.length - 1].timeMs;
         this.newTS = this.pages[0][0].timeMs;
+        if (!this.maxTS)
+            this.maxTS = this.newTS;
         this.rerender();
         // fix scroll position
         if (scrollAnchor)
@@ -194,53 +227,47 @@ const RtkPaginatedList = /*@__PURE__*/ proxyCustomElement(class RtkPaginatedList
     }
     async loadNextPage() {
         if (this.isLoading)
-            return;
+            return [];
         // Do nothing. New timestamp needs to be assigned by loadPrevPage method
         if (!this.newTS) {
             this.showNewMessagesCTR = false;
-            this.shouldScrollToBottom = false;
-            return;
+            return [];
         }
-        // for autoscroll or scroll to bottom button
-        const maxAutoLoads = 200;
-        let loads = 0;
-        let prevNewTS = this.newTS;
         this.isLoading = true;
         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++;
+        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;
+            return [];
         }
+        // load new messages and append to the start
+        const incoming = [...data].reverse();
+        if (this.pages.length === 0)
+            this.pages.unshift([]);
+        const firstPage = this.pages[0];
+        const spaceInFirstPage = this.pageSize - firstPage.length;
+        if (spaceInFirstPage > 0) {
+            const toFill = incoming.splice(0, spaceInFirstPage);
+            firstPage.unshift(...toFill);
+        }
+        while (incoming.length > 0) {
+            this.pages.unshift(incoming.splice(0, this.pageSize));
+        }
+        // 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;
+        return data;
     }
     // Find the element that is closest to the top/bottom of the container
     getScrollAnchor(edge = 'top') {
@@ -296,11 +323,14 @@ const RtkPaginatedList = /*@__PURE__*/ proxyCustomElement(class RtkPaginatedList
         }
     }
     // this method is called recursively based on shouldScrollToBottom (see loadNextPage)
-    scrollToBottom() {
-        this.$bottomRef.scrollIntoView({ behavior: 'smooth' });
-    }
-    waitForNextFrame() {
-        return new Promise((resolve) => requestAnimationFrame(() => resolve()));
+    async scrollToBottom() {
+        this.shouldScrollToBottom = true;
+        while (this.shouldScrollToBottom) {
+            const response = await this.loadNextPage();
+            this.$bottomRef.scrollIntoView({ behavior: 'smooth' });
+            if (response.length === 0)
+                this.shouldScrollToBottom = false;
+        }
     }
     rerender() {
         this.rerenderBoolean = !this.rerenderBoolean;
@@ -309,10 +339,9 @@ const RtkPaginatedList = /*@__PURE__*/ proxyCustomElement(class RtkPaginatedList
         /**
          * div.container is flex=column-reversewhich is why div#bottom-scroll comes before div#top-scroll
          */
-        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;
+        return (h(Host, { key: '3e7a77a4254ea0c75513edeaf72a5a77cee0e913' }, h("div", { key: 'f61e72e7a447048fe17ed8321a077841f991bfc5', class: "scrollbar container", part: "container", ref: (el) => (this.$containerRef = el) }, h("div", { key: '9efd0543b48b5ad5e147a763d258f7ef1a5024c5', class: { 'show-new-messages-ctr': true, active: this.showNewMessagesCTR } }, h("rtk-button", { key: '4b9bfda38538ceb89f31f317ddcb15d24f75ae8e', class: "show-new-messages", kind: "icon", variant: "secondary", part: "show-new-messages", onClick: () => {
                 this.scrollToBottom();
-            } }, 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) }))));
+            } }, h("rtk-icon", { key: 'fbcbc895940c8046916a2382806fb403e83a0a53', icon: this.iconPack.chevron_down }))), h("div", { key: 'fe2e51385216cba1905c75db783f037953e4831e', class: "smallest-dom-element", id: "bottom-scroll", ref: (el) => (this.$bottomRef = el) }), this.isLoadingBottom && this.pages.length > 0 && h("rtk-spinner", { key: '548899e797bbf139526208df3c7696b5859cc884', size: "sm" }), this.isLoading && this.pages.length < 1 && h("rtk-spinner", { key: '6353d5970e284369c274c28fc3c774d03fd555cc', 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: 'ff7b4e80f27610c0b73b63ea32fa5331b0cf4630', size: "sm" }), h("div", { key: '8729bf082cde39f7b154fa5816a70b6fb2c7f7df', class: "smallest-dom-element", id: "top-scroll", ref: (el) => (this.$topRef = el) }))));
     }
     static get style() { return RtkPaginatedListStyle0; }
 }, [1, "rtk-paginated-list", {

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

@@ -1,4 +1,4 @@
-import { R as RtkChatMessagesUiPaginated$1, d as defineCustomElement$1 } from './p-7be71567.js';
+import { R as RtkChatMessagesUiPaginated$1, d as defineCustomElement$1 } from './p-c0db1a83.js';
 
 const RtkChatMessagesUiPaginated = RtkChatMessagesUiPaginated$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-chat-search-results.js

@@ -11,7 +11,7 @@ import { d as defineCustomElement$8 } from './p-fa476519.js';
 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-7f8d9afc.js';
+import { d as defineCustomElement$4 } from './p-fbc02b1f.js';
 import { d as defineCustomElement$3 } from './p-4ebf9684.js';
 import { d as defineCustomElement$2 } from './p-46d99dd9.js';
 

package/dist/components/rtk-chat.js

@@ -1,4 +1,4 @@
-import { R as RtkChat$1, d as defineCustomElement$1 } from './p-1d16490e.js';
+import { R as RtkChat$1, d as defineCustomElement$1 } from './p-b64798ac.js';
 
 const RtkChat = RtkChat$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-meeting.js

@@ -8,9 +8,9 @@ import { i as index } from './p-f47d4fe8.js';
 import { d as defineCustomElement$o } from './p-241a8245.js';
 import { d as defineCustomElement$n } from './p-1391bef0.js';
 import { d as defineCustomElement$m } from './p-a73665b4.js';
-import { d as defineCustomElement$l } from './p-1d16490e.js';
+import { d as defineCustomElement$l } from './p-b64798ac.js';
 import { d as defineCustomElement$k } from './p-28170a8d.js';
-import { d as defineCustomElement$j } from './p-7be71567.js';
+import { d as defineCustomElement$j } from './p-c0db1a83.js';
 import { d as defineCustomElement$i } from './p-1f5a4682.js';
 import { d as defineCustomElement$h } from './p-598dc3f2.js';
 import { d as defineCustomElement$g } from './p-0e5cc539.js';
@@ -23,7 +23,7 @@ import { d as defineCustomElement$a } from './p-2447a26f.js';
 import { d as defineCustomElement$9 } from './p-819cb785.js';
 import { d as defineCustomElement$8 } from './p-7148ec6a.js';
 import { d as defineCustomElement$7 } from './p-0f2de0f8.js';
-import { d as defineCustomElement$6 } from './p-7f8d9afc.js';
+import { d as defineCustomElement$6 } from './p-fbc02b1f.js';
 import { d as defineCustomElement$5 } from './p-4ebf9684.js';
 import { d as defineCustomElement$4 } from './p-4902c5cf.js';
 import { d as defineCustomElement$3 } from './p-6739a399.js';

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

@@ -1,4 +1,4 @@
-import { R as RtkPaginatedList$1, d as defineCustomElement$1 } from './p-7f8d9afc.js';
+import { R as RtkPaginatedList$1, d as defineCustomElement$1 } from './p-fbc02b1f.js';
 
 const RtkPaginatedList = RtkPaginatedList$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/docs/docs-components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-01-20T04:51:21",
+  "timestamp": "2026-01-21T08:07:19",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.27.2",
@@ -50500,6 +50500,26 @@
           "docs": "Event emitted when a message is deleted",
           "docsTags": []
         },
+        {
+          "event": "editMessage",
+          "detail": "CustomMessage | FileMessage | ImageMessage | TextMessage",
+          "bubbles": true,
+          "complexType": {
+            "original": "Message",
+            "resolved": "CustomMessage | FileMessage | ImageMessage | TextMessage",
+            "references": {
+              "Message": {
+                "location": "import",
+                "path": "@cloudflare/realtimekit",
+                "id": "node_modules::Message"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Event emitted when a message is edited",
+          "docsTags": []
+        },
         {
           "event": "editMessageInit",
           "detail": "{ payload: TextMessage; flags: { isReply?: boolean; isEdit?: boolean; }; }",
@@ -151082,15 +151102,15 @@
             "docs": ""
           },
           "complexType": {
-            "signature": "(_id: string, _node: DataNode) => Promise<void>",
+            "signature": "(id: string, node: DataNode) => Promise<void>",
             "parameters": [
               {
-                "name": "_id",
+                "name": "id",
                 "type": "string",
                 "docs": "- The id of the node to update"
               },
               {
-                "name": "_node",
+                "name": "node",
                 "type": "DataNode",
                 "docs": "- The updated data node"
               }
@@ -151108,15 +151128,15 @@
             },
             "return": "Promise<void>"
           },
-          "signature": "onNodeUpdate(_id: string, _node: DataNode) => Promise<void>",
+          "signature": "onNodeUpdate(id: string, node: DataNode) => Promise<void>",
           "parameters": [
             {
-              "name": "_id",
+              "name": "id",
               "type": "string",
               "docs": "- The id of the node to update"
             },
             {
-              "name": "_node",
+              "name": "node",
               "type": "DataNode",
               "docs": "- The updated data node"
             }
@@ -151125,11 +151145,11 @@
           "docsTags": [
             {
               "name": "param",
-              "text": "_id - The id of the node to update"
+              "text": "id - The id of the node to update"
             },
             {
               "name": "param",
-              "text": "_node - The updated data node"
+              "text": "node - The updated data node"
             }
           ]
         }