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

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

@@ -232,7 +232,10 @@ const RtkNotifications = class {
         this.waitlistedParticipantLeftListener = (participant) => {
             this.remove(`${participant.id}-joined-waitlist`);
         };
-        this.chatUpdateListener = ({ message }) => {
+        this.chatUpdateListener = ({ message, action }) => {
+            // NOTE(ikabra): we only want notifications for new messages
+            if (action !== 'add')
+                return;
             const parsedMessage = chat.parseMessageForTarget(message);
             if (parsedMessage != null) {
                 if (parsedMessage.userId === meeting.self.userId) {

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

@@ -283,6 +283,13 @@ export class RtkChat {
             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]);
@@ -467,14 +474,21 @@ export class RtkChat {
         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()))));
     }
     static get is() { return "rtk-chat"; }
     static get encapsulation() { return "shadow"; }

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

@@ -62,22 +62,18 @@ export class RtkChatMessagesUiPaginated {
         };
         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'),
@@ -91,6 +87,9 @@ export class RtkChatMessagesUiPaginated {
                 case 'pin_message':
                     this.onPinMessage.emit(message);
                     break;
+                case 'edit_message':
+                    this.onEditMessage.emit(message);
+                    break;
                 case 'delete_message':
                     this.onDeleteMessage.emit(message);
                     break;
@@ -121,7 +120,7 @@ export class RtkChatMessagesUiPaginated {
             }
             const isSelf = message.userId === this.meeting.self.userId;
             const viewType = isSelf ? 'outgoing' : 'incoming';
-            return (h("div", null, h("div", { class: "message-wrapper" }, h("rtk-message-view", { pinned: message.pinned, time: message.time, actions: this.getMessageActions(message), authorName: message.displayName, isSelf: isSelf, avatarUrl: displayPicture, hideAuthorName: isContinued, viewType: viewType, variant: "bubble", onAction: (event) => this.onMessageActionHandler(event.detail, message) }, h("div", null, h("div", { class: "body" }, message.type === 'text' && (h("rtk-text-message-view", { text: message.message, isMarkdown: true })), message.type === 'file' && (h("rtk-file-message-view", { name: message.name, url: message.link, size: message.size })), message.type === 'image' && (h("rtk-image-message-view", { url: message.link, onPreview: () => {
+            return (h("div", null, h("div", { class: "message-wrapper", id: message.id }, h("rtk-message-view", { pinned: message.pinned, time: message.time, actions: this.getMessageActions(message), authorName: message.displayName, isSelf: isSelf, avatarUrl: displayPicture, hideAuthorName: isContinued, viewType: viewType, variant: "bubble", onAction: (event) => this.onMessageActionHandler(event.detail, message) }, h("div", null, h("div", { class: "body" }, message.type === 'text' && (h("rtk-text-message-view", { text: message.message, isMarkdown: true })), message.type === 'file' && (h("rtk-file-message-view", { name: message.name, url: message.link, size: message.size })), message.type === 'image' && (h("rtk-image-message-view", { url: message.link, onPreview: () => {
                     this.stateUpdate.emit({ image: message });
                 } }))))))));
         };
@@ -169,7 +168,7 @@ export class RtkChatMessagesUiPaginated {
         this.lastReadMessageIndex = -1;
     }
     render() {
-        return (h(Host, { key: '012b7189dfbdccfd8017cc9023263e6a7e9afd44' }, h("rtk-paginated-list", { key: '0ea37ee880fda0acdd7460b6da5f03e11ac304bf', ref: (el) => (this.$paginatedListRef = el), pageSize: this.pageSize, pagesAllowed: 3, fetchData: this.getChatMessages, createNodes: this.createChatNodes, selectedItemId: this.selectedChannelId, emptyListLabel: this.t('chat.empty_channel') }, h("slot", { key: '53cb197b6d9319f470e87fe73d7ca0d158778e3f' }))));
+        return (h(Host, { key: '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' }))));
     }
     static get is() { return "rtk-chat-messages-ui-paginated"; }
     static get encapsulation() { return "shadow"; }
@@ -394,6 +393,27 @@ export class RtkChatMessagesUiPaginated {
                         }
                     }
                 }
+            }, {
+                "method": "onEditMessage",
+                "name": "editMessage",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when a message is edited"
+                },
+                "complexType": {
+                    "original": "Message",
+                    "resolved": "CustomMessage | FileMessage | ImageMessage | TextMessage",
+                    "references": {
+                        "Message": {
+                            "location": "import",
+                            "path": "@cloudflare/realtimekit",
+                            "id": "node_modules::Message"
+                        }
+                    }
+                }
             }, {
                 "method": "onDeleteMessage",
                 "name": "deleteMessage",

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

@@ -98,7 +98,7 @@ export class RtkChatToggle {
         const newMessages = messages.filter((m) => m.timeMs > meetingStartedTimeMs);
         if (newMessages.length === this.pageSize && newMessages.length > 0) {
             // all messages are new, so we can't know the exact count, but we know there are at least pageSize - 1 new messages
-            this.unreadMessageCount = this.pageSize - 1;
+            this.unreadMessageCount = newMessages.length;
         }
         else {
             this.unreadMessageCount = newMessages.length;

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

@@ -197,7 +197,10 @@ export class RtkNotifications {
         this.waitlistedParticipantLeftListener = (participant) => {
             this.remove(`${participant.id}-joined-waitlist`);
         };
-        this.chatUpdateListener = ({ message }) => {
+        this.chatUpdateListener = ({ message, action }) => {
+            // NOTE(ikabra): we only want notifications for new messages
+            if (action !== 'add')
+                return;
             const parsedMessage = parseMessageForTarget(message);
             if (parsedMessage != null) {
                 if (parsedMessage.userId === meeting.self.userId) {