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

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 {
@@ -2121,12 +2135,18 @@ const RtkPaginatedList = class {
      * @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);
@@ -2135,14 +2155,25 @@ const RtkPaginatedList = class {
             }
             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
@@ -2150,7 +2181,6 @@ const RtkPaginatedList = class {
      * */
     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
@@ -2161,24 +2191,35 @@ const RtkPaginatedList = class {
             // 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 });
     }
@@ -2187,6 +2228,10 @@ const RtkPaginatedList = class {
         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();
                 }
@@ -2229,6 +2274,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)
@@ -2236,53 +2283,47 @@ const RtkPaginatedList = class {
     }
     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') {
@@ -2338,11 +2379,14 @@ const RtkPaginatedList = class {
         }
     }
     // 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;
@@ -2351,10 +2395,9 @@ 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: () => {
-                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) }))));
     }
 };
 __decorate$2([