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

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-7e90e964.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-9213c3fc.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-ad8282dc.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-ad8282dc.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-20T09:16:34",
   "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"
             }
           ]
         }

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;
@@ -11634,7 +11648,7 @@ const RtkChatMessagesUiPaginated = class {
         this.lastReadMessageIndex = -1;
     }
     render() {
-        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' }))));
+        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 {
@@ -12662,7 +12676,8 @@ const RtkPaginatedList = class {
             this.oldTS = node.timeMs + 1;
             this.loadPrevPage();
         }
-        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);
@@ -12711,10 +12726,21 @@ const RtkPaginatedList = class {
     }
     /**
      * 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$1(this.rerender.bind(this), 50, { maxWait: 200 });
     }
@@ -12765,6 +12791,8 @@ const RtkPaginatedList = class {
         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)
@@ -12792,6 +12820,7 @@ const RtkPaginatedList = class {
             this.isLoadingBottom = false;
             // no more new messages to load
             if (!data.length) {
+                this.maxTS = this.newTS;
                 this.showNewMessagesCTR = false;
                 this.shouldScrollToBottom = false;
                 break;
@@ -12887,10 +12916,10 @@ const RtkPaginatedList = class {
         /**
          * 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: () => {
+        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: '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: '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([

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

@@ -503,6 +503,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]);
@@ -687,14 +694,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 {
@@ -937,6 +951,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 */
@@ -987,22 +1002,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'),
@@ -1016,6 +1027,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;
@@ -1092,7 +1106,7 @@ const RtkChatMessagesUiPaginated = class {
         this.lastReadMessageIndex = -1;
     }
     render() {
-        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' }))));
+        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 {
@@ -2126,7 +2140,8 @@ const RtkPaginatedList = class {
             this.oldTS = node.timeMs + 1;
             this.loadPrevPage();
         }
-        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);
@@ -2175,10 +2190,21 @@ const RtkPaginatedList = class {
     }
     /**
      * 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 });
     }
@@ -2229,6 +2255,8 @@ const RtkPaginatedList = class {
         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)
@@ -2256,6 +2284,7 @@ const RtkPaginatedList = class {
             this.isLoadingBottom = false;
             // no more new messages to load
             if (!data.length) {
+                this.maxTS = this.newTS;
                 this.showNewMessagesCTR = false;
                 this.shouldScrollToBottom = false;
                 break;
@@ -2351,10 +2380,10 @@ const RtkPaginatedList = class {
         /**
          * 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: () => {
+        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: '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: '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([