npm - @cloudflare/realtimekit-ui - Versions diffs - 1.1.0-staging.9 → 1.1.1-staging.1 - Mend

@cloudflare/realtimekit-ui 1.1.0-staging.9 → 1.1.1-staging.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (781) hide show

package/dist/components/{p-c0db1a83.js → p-526870e9.js} RENAMED Viewed

@@ -1,19 +1,19 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
-import { e as defaultIconPack, i as useLanguage } from './p-e847fee9.js';
-import { S as SyncWithStore } from './p-6f7c46d2.js';
-import { d as defineCustomElement$d } from './p-241a8245.js';
-import { d as defineCustomElement$c } from './p-1391bef0.js';
-import { d as defineCustomElement$b } from './p-761c0e78.js';
-import { d as defineCustomElement$a } from './p-3b29dda1.js';
-import { d as defineCustomElement$9 } from './p-5669b6e7.js';
-import { d as defineCustomElement$8 } from './p-cf8f725b.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-0f2de0f8.js';
-import { d as defineCustomElement$3 } from './p-fbc02b1f.js';
-import { d as defineCustomElement$2 } from './p-4ebf9684.js';
-import { d as defineCustomElement$1 } from './p-6739a399.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-fdad14c9.js';
+import { e as defaultIconPack, i as useLanguage } from './p-f19b4abc.js';
+import { S as SyncWithStore } from './p-e334e15c.js';
+import { d as defineCustomElement$d } from './p-38ba07d0.js';
+import { d as defineCustomElement$c } from './p-e229128b.js';
+import { d as defineCustomElement$b } from './p-154bed23.js';
+import { d as defineCustomElement$a } from './p-a3cc7425.js';
+import { d as defineCustomElement$9 } from './p-d0eb78a2.js';
+import { d as defineCustomElement$8 } from './p-61dcdd44.js';
+import { d as defineCustomElement$7 } from './p-d70fbc37.js';
+import { d as defineCustomElement$6 } from './p-b1723439.js';
+import { d as defineCustomElement$5 } from './p-0f39e8ae.js';
+import { d as defineCustomElement$4 } from './p-a339a693.js';
+import { d as defineCustomElement$3 } from './p-4a8d69ae.js';
+import { d as defineCustomElement$2 } from './p-9cf41ab1.js';
+import { d as defineCustomElement$1 } from './p-8123217e.js';
 const rtkChatMessagesUiPaginatedCss = ":host{display:flex;flex-direction:column;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));flex:1 0 0px}";
 const RtkChatMessagesUiPaginatedStyle0 = rtkChatMessagesUiPaginatedCss;
@@ -42,31 +42,37 @@ const RtkChatMessagesUiPaginated = /*@__PURE__*/ proxyCustomElement(class RtkCha
         this.iconPack = defaultIconPack;
         /** Language */
         this.t = useLanguage();
-        /** Whether to align chat bubbles to the left */
-        this.leftAlign = false;
         this.permissionsChanged = false;
         this.pageSize = 25;
-        this.lastReadMessageIndex = -1;
         this.permissionsUpdateListener = () => {
             this.permissionsChanged = !this.permissionsChanged;
         };
-        this.maybeMarkChannelAsRead = (messages) => {
-            if (!this.selectedChannelId)
-                return;
-            if (messages.length === 0)
-                return;
-            if (this.lastReadMessageIndex !== -1)
-                return;
-            const latestMsg = messages.at(0).time > messages.at(-1).time ? messages.at(0) : messages.at(-1);
-            if (!latestMsg.channelIndex)
-                return;
-            this.lastReadMessageIndex = parseInt(latestMsg.channelIndex, 10);
-            this.meeting.chat.markLastReadMessage(this.selectedChannelId, latestMsg);
-        };
         this.getChatMessages = async (timestamp, size, reversed) => {
-            const { messages } = await this.meeting.chat.getMessages(timestamp, size, reversed, undefined, this.selectedChannelId);
-            this.maybeMarkChannelAsRead(messages);
-            return messages;
+            if (this.privateChatRecipient) {
+                try {
+                    const messages = await this.meeting.chat.fetchPrivateMessages({
+                        timestamp,
+                        limit: size,
+                        direction: reversed ? 'before' : 'after',
+                        userId: this.privateChatRecipient.userId,
+                    });
+                    return messages;
+                }
+                catch (err) {
+                    return [];
+                }
+            }
+            try {
+                const messages = await this.meeting.chat.fetchPublicMessages({
+                    timestamp,
+                    limit: size,
+                    direction: reversed ? 'before' : 'after',
+                });
+                return messages;
+            }
+            catch (err) {
+                return [];
+            }
         };
         this.createChatNodes = (data) => {
             /**
@@ -74,8 +80,11 @@ const RtkChatMessagesUiPaginated = /*@__PURE__*/ proxyCustomElement(class RtkCha
              * will fail in current implementation
              */
             return data.map((message, idx) => {
-                var _a;
+                var _a, _b;
                 const isContinued = message.userId === ((_a = data[idx - 1]) === null || _a === void 0 ? void 0 : _a.userId);
+                // FIXME(ikabra): Socket sends private messages sent to the recipient as a part of public messages
+                if (!this.privateChatRecipient && ((_b = message.targetUserIds) === null || _b === void 0 ? void 0 : _b.length) > 0)
+                    return;
                 return this.createChatNode(message, isContinued);
             });
         };
@@ -85,13 +94,17 @@ const RtkChatMessagesUiPaginated = /*@__PURE__*/ proxyCustomElement(class RtkCha
             (_b = this.meeting) === null || _b === void 0 ? void 0 : _b.self.permissions.removeListener('permissionsUpdate', this.permissionsUpdateListener);
         };
         this.getMessageActions = (message) => {
+            var _a;
             const actions = [];
             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,
-            });
+            const isPrivateMessage = ((_a = message.targetUserIds) === null || _a === void 0 ? void 0 : _a.length) > 0;
+            if (!isPrivateMessage) {
+                actions.push({
+                    id: 'pin_message',
+                    label: message.pinned ? this.t('unpin') : this.t('pin'),
+                    icon: this.iconPack.pin,
+                });
+            }
             if (messageBelongsToSelf) {
                 actions.push({
                     id: 'edit_message',
@@ -121,8 +134,6 @@ const RtkChatMessagesUiPaginated = /*@__PURE__*/ proxyCustomElement(class RtkCha
         };
         this.createChatNode = (message, isContinued) => {
             var _a, _b, _c, _d;
-            if (message.targetUserIds.length !== 0)
-                return null; // don't render private messages
             let displayPicture;
             if (this.meeting.meta.viewType === 'CHAT') {
                 displayPicture = (_a = this.meeting.participants.all
@@ -142,17 +153,23 @@ 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", 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: () => {
+            return (h("div", null, h("div", { class: "message-wrapper", id: message.id }, h("rtk-message-view", { messageType: message.type, pinned: message.pinned, isEdited: message.isEdited, 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 });
                 } }))))))));
         };
         this.chatUpdateListener = (data) => {
-            if (this.selectedChannelId && data.message.channelId !== this.selectedChannelId)
+            var _a, _b, _c;
+            // if private message and not for privateChatRecipient, ignore
+            // if private message and public chat selected, ignore
+            if (((_a = data.message.targetUserIds) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
+                !data.message.targetUserIds.includes((_b = this.privateChatRecipient) === null || _b === void 0 ? void 0 : _b.userId))
+                return;
+            // if public message and private chat selected, ignore
+            if (this.privateChatRecipient && ((_c = data.message.targetUserIds) === null || _c === void 0 ? void 0 : _c.length) === 0) {
                 return;
+            }
             if (data.action === 'add') {
                 this.$paginatedListRef.onNewNode(data.message);
-                this.lastReadMessageIndex = -1;
-                this.maybeMarkChannelAsRead([data.message]);
             }
             else if (data.action === 'delete') {
                 this.$paginatedListRef.onNodeDelete(data.message.id);
@@ -171,9 +188,20 @@ const RtkChatMessagesUiPaginated = /*@__PURE__*/ proxyCustomElement(class RtkCha
     connectedCallback() {
         this.meetingChanged(this.meeting);
     }
+    async onPinnedMessageSelect(event) {
+        var _a, _b;
+        const message = event.detail;
+        if (!message)
+            return;
+        await ((_b = (_a = this.$paginatedListRef) === null || _a === void 0 ? void 0 : _a.reset) === null || _b === void 0 ? void 0 : _b.call(_a, message.timeMs + 1));
+    }
     disconnectedCallback() {
         this.disconnectMeeting(this.meeting);
     }
+    privateChatRecipientChanged() {
+        var _a;
+        (_a = this.$paginatedListRef) === null || _a === void 0 ? void 0 : _a.reset();
+    }
     meetingChanged(meeting, oldMeeting) {
         var _a;
         if (oldMeeting != undefined)
@@ -186,31 +214,26 @@ const RtkChatMessagesUiPaginated = /*@__PURE__*/ proxyCustomElement(class RtkCha
         }
         this.permissionsUpdateListener();
     }
-    channelChanged() {
-        this.lastReadMessageIndex = -1;
-    }
     render() {
-        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' }))));
+        return (h(Host, { key: '8062f966f4bc489a4fdadb2da59bb88473e45194' }, h("rtk-paginated-list", { key: '7f50458ee29cd7bd83bd123303e82db556230d67', ref: (el) => (this.$paginatedListRef = el), pageSize: this.pageSize, pagesAllowed: 3, fetchData: this.getChatMessages, createNodes: this.createChatNodes, emptyListLabel: this.t('chat.empty_chat') }, h("slot", { key: '69b0106558d9995b0bc24ed3d0d36f56febbf90f' }))));
     }
     get host() { return this; }
     static get watchers() { return {
-        "meeting": ["meetingChanged"],
-        "selectedChannelId": ["channelChanged"]
+        "privateChatRecipient": ["privateChatRecipientChanged"],
+        "meeting": ["meetingChanged"]
     }; }
     static get style() { return RtkChatMessagesUiPaginatedStyle0; }
 }, [1, "rtk-chat-messages-ui-paginated", {
         "meeting": [16],
-        "selectedChannel": [16],
-        "selectedChannelId": [1, "selected-channel-id"],
         "size": [513],
         "iconPack": [16],
         "t": [16],
-        "leftAlign": [4, "left-align"],
+        "privateChatRecipient": [16],
         "children": [32],
         "permissionsChanged": [32]
-    }, undefined, {
-        "meeting": ["meetingChanged"],
-        "selectedChannelId": ["channelChanged"]
+    }, [[8, "rtkPinnedMessageSelect", "onPinnedMessageSelect"]], {
+        "privateChatRecipient": ["privateChatRecipientChanged"],
+        "meeting": ["meetingChanged"]
     }]);
 __decorate([
     SyncWithStore()

package/dist/components/p-528cc24e.js ADDED Viewed

@@ -0,0 +1,260 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-fdad14c9.js';
+import { S as SyncWithStore } from './p-e334e15c.js';
+import { c as createDefaultConfig, e as defaultIconPack, i as useLanguage, f as defaultOverrides } from './p-f19b4abc.js';
+import './p-a83ccdbd.js';
+import { d as defineCustomElement$5 } from './p-38ba07d0.js';
+import { d as defineCustomElement$4 } from './p-e229128b.js';
+import { d as defineCustomElement$3 } from './p-a3cc7425.js';
+import { d as defineCustomElement$2 } from './p-4a8d69ae.js';
+import { d as defineCustomElement$1 } from './p-9cf41ab1.js';
+const rtkChatSelectorCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}.scrollbar{scrollbar-width:thin;scrollbar-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n    var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar{height:var(--rtk-space-1\\.5, 6px);width:var(--rtk-space-1\\.5, 6px);border-radius:9999px;background-color:var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar-thumb{border-radius:9999px;background-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))}:host{display:flex;width:100%;flex-direction:column;font-size:14px;position:relative;box-sizing:border-box;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.chat-header{margin-left:var(--rtk-space-2, 8px);margin-right:var(--rtk-space-2, 8px);gap:var(--rtk-space-2, 8px);padding-left:var(--rtk-space-4, 16px);padding-right:var(--rtk-space-4, 16px);padding-top:var(--rtk-space-3, 12px);padding-bottom:var(--rtk-space-3, 12px);display:flex;flex-direction:row;align-items:center;justify-content:space-between;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52));cursor:pointer;border-radius:var(--rtk-border-radius-sm, 4px);border:var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60))}.chat-header-label{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--rtk-space-2, 8px)}.dropdown{position:absolute;top:100%;z-index:10;padding:var(--rtk-space-0, 0px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));opacity:0;pointer-events:none;border-bottom-right-radius:var(--rtk-border-radius-sm, 4px);border-bottom-left-radius:var(--rtk-border-radius-sm, 4px);left:var(--rtk-space-2, 8px);right:var(--rtk-space-2, 8px);max-width:calc(100vw - var(--rtk-space-4, 16px));box-sizing:border-box}.dropdown.open{opacity:1;pointer-events:auto;border-width:1px;border-top-width:var(--rtk-border-width-none, 0);border-style:solid;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity))}.dropdown rtk-paginated-list{box-sizing:border-box;display:flex;height:30vh;flex-direction:column}.public-chat-group-label{display:flex;cursor:pointer;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--rtk-space-2, 8px);border-left-width:var(--rtk-border-width-none, 0);border-right-width:var(--rtk-border-width-none, 0);border-top-width:var(--rtk-border-width-none, 0);border-bottom-width:var(--rtk-border-width-none, 0);border-bottom-width:1px;border-style:solid;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity));padding-top:var(--rtk-space-4, 16px);padding-bottom:var(--rtk-space-4, 16px);padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px)}.public-chat-icon{display:flex;align-items:center;justify-content:center;padding:var(--rtk-space-1, 4px);border-radius:9999px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity))}.public-chat-icon rtk-icon{color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}";
+const RtkChatSelectorStyle0 = rtkChatSelectorCss;
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                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;
+};
+const RtkChatSelector = /*@__PURE__*/ proxyCustomElement(class RtkChatSelector extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.dropdownToggle = createEvent(this, "rtkDropdownToggle", 7);
+        this.chatSelectorChange = createEvent(this, "rtkChatSelectorChange", 7);
+        /** Config */
+        this.config = createDefaultConfig();
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        /** UI Overrides */
+        this.overrides = defaultOverrides;
+        this.isOpen = false;
+        this.showPrivateChat = false;
+        this.selectedUser = undefined;
+        //NOTE(ikabra): Fix this value once backend supports pagination for participants
+        this.pageSize = 100000;
+        this.pagesAllowed = 3;
+        this.unreadMap = new Map();
+        this.disconnectMeeting = (meeting) => {
+            var _a, _b, _c, _d;
+            const { self, participants } = meeting || {};
+            (_a = meeting.chat) === null || _a === void 0 ? void 0 : _a.off('chatUpdate', this.chatUpdateListener);
+            (_b = self === null || self === void 0 ? void 0 : self.permissions) === null || _b === void 0 ? void 0 : _b.off('*', this.chatPermissionUpdateListener);
+            (_c = participants === null || participants === void 0 ? void 0 : participants.joined) === null || _c === void 0 ? void 0 : _c.off('participantJoined', this.participantJoinedListener);
+            (_d = participants === null || participants === void 0 ? void 0 : participants.joined) === null || _d === void 0 ? void 0 : _d.off('participantLeft', this.participantLeftListener);
+        };
+        this.toggle = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.isOpen = !this.isOpen;
+            this.dropdownToggle.emit({ open: this.isOpen });
+        };
+        this.selectUser = async (user) => {
+            if (user === null || user === void 0 ? void 0 : user.userId) {
+                this.unreadMap.set(user.userId, false);
+                this.$paginatedListRef.rerenderList();
+            }
+            this.selectedUser = user;
+            this.chatSelectorChange.emit({ selectedUser: user });
+            await this.close();
+        };
+        this.chatPermissionUpdateListener = () => {
+            var _a, _b;
+            this.showPrivateChat = !!(((_a = this.meeting.self.permissions.chatPrivate) === null || _a === void 0 ? void 0 : _a.canSend) ||
+                ((_b = this.meeting.self.permissions.chatPrivate) === null || _b === void 0 ? void 0 : _b.canReceive));
+            if (!this.showPrivateChat) {
+                this.selectedUser = undefined;
+                this.chatSelectorChange.emit({ selectedUser: undefined });
+            }
+        };
+        this.onParticipantUpdate = () => {
+            var _a, _b, _c, _d;
+            if (!this.selectedUser)
+                return;
+            const participants = ((_d = (_c = (_b = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.participants) === null || _b === void 0 ? void 0 : _b.joined) === null || _c === void 0 ? void 0 : _c.toArray) === null || _d === void 0 ? void 0 : _d.call(_c)) || [];
+            if (!participants.some((p) => { var _a; return p.id === ((_a = this.selectedUser) === null || _a === void 0 ? void 0 : _a.id); })) {
+                this.selectedUser = undefined;
+                this.chatSelectorChange.emit({ selectedUser: undefined });
+            }
+        };
+        this.participantJoinedListener = (data) => {
+            this.$paginatedListRef.onNewNode(data);
+        };
+        this.participantLeftListener = (data) => {
+            this.$paginatedListRef.onNodeDelete(data.id);
+            this.onParticipantUpdate();
+        };
+        // @ts-ignore - unused params
+        this.getParticipants = async (timestamp, size, reversed) => {
+            const meeting = this.meeting;
+            if (!meeting)
+                return [];
+            /**
+             * FIXME(ikabra): This is a temporary hack in place to handle the initial load
+             * and not repeat participants when a user reaches the top of the list.
+             * This must be replaced by actual pagination APIs from backend for participants.
+             */
+            if (!timestamp)
+                return [];
+            const participants = meeting.participants.joined.toArray();
+            return participants;
+        };
+        this.createPaticipantNodes = (data) => {
+            return data.map((participant) => {
+                var _a;
+                return (h("div", { class: "private-chat-label", id: participant.id, onClick: () => this.selectUser(participant) }, h("rtk-avatar", { size: "sm", participant: participant }), h("span", null, (_a = participant.name) !== null && _a !== void 0 ? _a : this.t('participant')), this.unreadMap.get(participant.userId) ? (h("div", { class: "private-chat-unread-badge" })) : null));
+            });
+        };
+        this.chatUpdateListener = (data) => {
+            var _a;
+            if (data.action !== 'add')
+                return;
+            if (!((_a = data.message.targetUserIds) === null || _a === void 0 ? void 0 : _a.length))
+                return;
+            const selfUserId = this.meeting.self.userId;
+            const otherUserId = data.message.targetUserIds.find((id) => id !== selfUserId);
+            if (!otherUserId)
+                return;
+            this.unreadMap.set(otherUserId, true);
+            this.$paginatedListRef.rerenderList();
+        };
+    }
+    /** */
+    async close() {
+        if (!this.isOpen)
+            return;
+        this.isOpen = false;
+        this.dropdownToggle.emit({ open: false });
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+        this.overridesChanged(this.overrides);
+    }
+    disconnectedCallback() {
+        var _a, _b, _c;
+        if (!this.meeting)
+            return;
+        const { self, participants } = this.meeting;
+        (_a = self === null || self === void 0 ? void 0 : self.permissions) === null || _a === void 0 ? void 0 : _a.off('*', this.chatPermissionUpdateListener);
+        (_b = participants === null || participants === void 0 ? void 0 : participants.joined) === null || _b === void 0 ? void 0 : _b.off('participantJoined', this.participantJoinedListener);
+        (_c = participants === null || participants === void 0 ? void 0 : participants.joined) === null || _c === void 0 ? void 0 : _c.off('participantLeft', this.participantLeftListener);
+    }
+    overridesChanged(overrides) {
+        var _a, _b;
+        if (!this.meeting || this.meeting.self)
+            return;
+        this.showPrivateChat =
+            !!(((_a = this.meeting.self.permissions.chatPrivate) === null || _a === void 0 ? void 0 : _a.canSend) ||
+                ((_b = this.meeting.self.permissions.chatPrivate) === null || _b === void 0 ? void 0 : _b.canReceive)) && !overrides.disablePrivateChat;
+    }
+    meetingChanged(meeting, oldMeeting) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (oldMeeting)
+            this.disconnectMeeting(oldMeeting);
+        if (!meeting || !meeting.chat)
+            return;
+        this.showPrivateChat =
+            !!(((_a = meeting.self.permissions.chatPrivate) === null || _a === void 0 ? void 0 : _a.canSend) ||
+                ((_b = meeting.self.permissions.chatPrivate) === null || _b === void 0 ? void 0 : _b.canReceive)) && !this.overrides.disablePrivateChat;
+        this.onParticipantUpdate();
+        (_c = meeting.chat) === null || _c === void 0 ? void 0 : _c.on('chatUpdate', this.chatUpdateListener);
+        meeting.self.permissions.on('*', this.chatPermissionUpdateListener);
+        (_e = (_d = meeting === null || meeting === void 0 ? void 0 : meeting.participants) === null || _d === void 0 ? void 0 : _d.joined) === null || _e === void 0 ? void 0 : _e.on('participantJoined', this.participantJoinedListener);
+        (_g = (_f = meeting === null || meeting === void 0 ? void 0 : meeting.participants) === null || _f === void 0 ? void 0 : _f.joined) === null || _g === void 0 ? void 0 : _g.on('participantLeft', this.participantLeftListener);
+    }
+    render() {
+        if (!this.showPrivateChat)
+            return null;
+        return (h(Host, null, h("div", { class: "chat-header", onClick: this.toggle }, h("div", { class: "chat-header-label" }, this.selectedUser ? (h("rtk-icon", { icon: this.iconPack.people, size: "sm" })) : (h("rtk-icon", { icon: this.iconPack.participants, size: "sm" })), !this.selectedUser ? this.t('chat.everyone') : this.selectedUser.name), h("div", { class: "chevron" }, h("rtk-icon", { icon: this.isOpen ? this.iconPack.chevron_up : this.iconPack.chevron_down, size: "sm" }))), h("div", { class: { dropdown: true, open: this.isOpen, scrollbar: true } }, h("div", { class: "public-chat-group-label", onClick: () => this.selectUser(undefined) }, h("div", { class: "public-chat-icon" }, h("rtk-icon", { icon: this.iconPack.participants, size: "sm" })), this.t('chat.everyone')), h("rtk-paginated-list", { class: "chat-selector-paginated-list", ref: (el) => (this.$paginatedListRef = el), pageSize: this.pageSize, pagesAllowed: 3, fetchData: this.getParticipants, createNodes: this.createPaticipantNodes, emptyListLabel: this.t('participants.empty_list') }, h("slot", null)))));
+    }
+    static get watchers() { return {
+        "overrides": ["overridesChanged"],
+        "meeting": ["meetingChanged"]
+    }; }
+    static get style() { return RtkChatSelectorStyle0; }
+}, [1, "rtk-chat-selector", {
+        "meeting": [16],
+        "states": [16],
+        "config": [16],
+        "iconPack": [16],
+        "t": [16],
+        "overrides": [16],
+        "size": [513],
+        "isOpen": [32],
+        "showPrivateChat": [32],
+        "selectedUser": [32],
+        "pageSize": [32],
+        "pagesAllowed": [32],
+        "unreadMap": [32],
+        "close": [64]
+    }, undefined, {
+        "overrides": ["overridesChanged"],
+        "meeting": ["meetingChanged"]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkChatSelector.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkChatSelector.prototype, "states", void 0);
+__decorate([
+    SyncWithStore()
+], RtkChatSelector.prototype, "config", void 0);
+__decorate([
+    SyncWithStore()
+], RtkChatSelector.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkChatSelector.prototype, "t", void 0);
+__decorate([
+    SyncWithStore()
+], RtkChatSelector.prototype, "overrides", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-chat-selector", "rtk-avatar", "rtk-button", "rtk-icon", "rtk-paginated-list", "rtk-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-chat-selector":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkChatSelector);
+            }
+            break;
+        case "rtk-avatar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "rtk-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "rtk-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "rtk-paginated-list":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "rtk-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+export { RtkChatSelector as R, defineCustomElement as d };

package/dist/components/{p-da87cc71.js → p-583f9282.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { j as defineProperty, k as isArrayLike, l as isIndex, m as eq, n as getPrototype, o as baseAssignValue, p as copyObject, q as keysIn, r as isArray, s as isBuffer, t as isTypedArray, v as copyArray, w as cloneBuffer, x as cloneTypedArray, y as isArguments, z as isFunction, A as initCloneObject, S as Stack } from './p-e847fee9.js';
+import { j as defineProperty, k as isArrayLike, l as isIndex, m as eq, n as getPrototype, o as baseAssignValue, p as copyObject, q as keysIn, r as isArray, s as isBuffer, t as isTypedArray, v as copyArray, w as cloneBuffer, x as cloneTypedArray, y as isArguments, z as isFunction, A as initCloneObject, S as Stack } from './p-f19b4abc.js';
 import { i as isObject, a as isObjectLike, b as baseGetTag } from './p-632cbbe7.js';
 const spacingScale = [

package/dist/components/p-5c4de4b9.js ADDED Viewed

@@ -0,0 +1,86 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-fdad14c9.js';
+import { d as defineCustomElement$7 } from './p-38ba07d0.js';
+import { d as defineCustomElement$6 } from './p-e229128b.js';
+import { d as defineCustomElement$5 } from './p-528cc24e.js';
+import { d as defineCustomElement$4 } from './p-a3cc7425.js';
+import { d as defineCustomElement$3 } from './p-4a8d69ae.js';
+import { d as defineCustomElement$2 } from './p-6857797f.js';
+import { d as defineCustomElement$1 } from './p-9cf41ab1.js';
+const rtkChatHeaderCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}.scrollbar{scrollbar-width:thin;scrollbar-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n    var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar{height:var(--rtk-space-1\\.5, 6px);width:var(--rtk-space-1\\.5, 6px);border-radius:9999px;background-color:var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar-thumb{border-radius:9999px;background-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))}:host{display:flex;width:100%;flex-direction:column;gap:var(--rtk-space-2, 8px);font-size:14px;z-index:10;margin-bottom:var(--rtk-space-2, 8px);box-sizing:border-box;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.chat-header{position:relative;margin-left:var(--rtk-space-2, 8px);margin-right:var(--rtk-space-2, 8px);gap:var(--rtk-space-2, 8px);padding-left:var(--rtk-space-4, 16px);padding-right:var(--rtk-space-4, 16px);padding-top:var(--rtk-space-3, 12px);padding-bottom:var(--rtk-space-3, 12px);display:flex;flex-direction:row;align-items:center;justify-content:space-between;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52));border-radius:var(--rtk-border-radius-sm, 4px);overflow:hidden;border:var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60));cursor:pointer}.chat-header-label{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--rtk-space-2, 8px)}";
+const RtkChatHeaderStyle0 = rtkChatHeaderCss;
+const RtkChatHeader = /*@__PURE__*/ proxyCustomElement(class RtkChatHeader extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.onPinnedToggle = async (e) => {
+            var _a, _b, _c;
+            if ((_a = e.detail) === null || _a === void 0 ? void 0 : _a.open) {
+                await ((_c = (_b = this.$chatSelector) === null || _b === void 0 ? void 0 : _b.close) === null || _c === void 0 ? void 0 : _c.call(_b));
+            }
+        };
+        this.onChatToggle = async (e) => {
+            var _a, _b, _c;
+            if ((_a = e.detail) === null || _a === void 0 ? void 0 : _a.open) {
+                await ((_c = (_b = this.$pinnedSelector) === null || _b === void 0 ? void 0 : _b.close) === null || _c === void 0 ? void 0 : _c.call(_b));
+            }
+        };
+    }
+    render() {
+        return (h(Host, { key: 'af9956ff6e693f29fb63a6180ef773a0e64822e5' }, h("rtk-pinned-message-selector", { key: 'b0d9199d02d84453f8ee26c3a47e00c82047e4f6', ref: (el) => (this.$pinnedSelector = el), onRtkDropdownToggle: this.onPinnedToggle }), h("rtk-chat-selector", { key: '4d019562a85ebfeaf4ceae2e99d1b9c8c282127a', ref: (el) => (this.$chatSelector = el), onRtkDropdownToggle: this.onChatToggle })));
+    }
+    static get style() { return RtkChatHeaderStyle0; }
+}, [1, "rtk-chat-header"]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-chat-header", "rtk-avatar", "rtk-button", "rtk-chat-selector", "rtk-icon", "rtk-paginated-list", "rtk-pinned-message-selector", "rtk-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-chat-header":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkChatHeader);
+            }
+            break;
+        case "rtk-avatar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "rtk-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "rtk-chat-selector":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "rtk-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "rtk-paginated-list":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "rtk-pinned-message-selector":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "rtk-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+export { RtkChatHeader as R, defineCustomElement as d };

package/dist/components/{p-8d6b21d5.js → p-5cce54f2.js} RENAMED Viewed

@@ -1,12 +1,12 @@
-import { p as proxyCustomElement, H, h } from './p-c3592601.js';
-import { c as createDefaultConfig, e as defaultIconPack, i as useLanguage } from './p-e847fee9.js';
+import { p as proxyCustomElement, H, h } from './p-fdad14c9.js';
+import { c as createDefaultConfig, e as defaultIconPack, i as useLanguage } from './p-f19b4abc.js';
 import './p-a83ccdbd.js';
-import { S as SyncWithStore } from './p-6f7c46d2.js';
-import { d as defineCustomElement$5 } from './p-241a8245.js';
-import { d as defineCustomElement$4 } from './p-1391bef0.js';
-import { d as defineCustomElement$3 } from './p-3b29dda1.js';
-import { d as defineCustomElement$2 } from './p-4ebf9684.js';
-import { d as defineCustomElement$1 } from './p-fb836f65.js';
+import { S as SyncWithStore } from './p-e334e15c.js';
+import { d as defineCustomElement$5 } from './p-38ba07d0.js';
+import { d as defineCustomElement$4 } from './p-e229128b.js';
+import { d as defineCustomElement$3 } from './p-a3cc7425.js';
+import { d as defineCustomElement$2 } from './p-9cf41ab1.js';
+import { d as defineCustomElement$1 } from './p-15156a2c.js';
 const rtkParticipantsStageQueueCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{margin-top:var(--rtk-space-2, 8px);display:flex;width:100%;flex-direction:column;font-size:14px}.stage-requested-participants{margin-bottom:var(--rtk-space-8, 32px)}.stage-requested-participants .bulk-actions{display:flex;gap:var(--rtk-space-2, 8px)}.stage-requested-participants .bulk-actions .accept-all-button{--tw-text-opacity:1;color:rgba(var(--rtk-colors-success, 98 165 4) / var(--tw-text-opacity))}.stage-requested-participants .bulk-actions rtk-button{flex:1 1 0%}h3,.heading-count{margin:var(--rtk-space-0, 0px);display:flex;align-items:center;justify-content:center;padding:var(--rtk-space-0, 0px);font-size:16px;font-weight:400;color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));text-align:center}.heading-count{font-size:14px}.participants{margin-top:var(--rtk-space-2, 8px);padding:var(--rtk-space-0, 0px)}.waiting-participant{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-2, 8px);display:flex;align-items:center}.waiting-participant .participant-details{margin-right:auto;display:flex;align-items:center}.waiting-participant .participant-details rtk-avatar{margin-right:var(--rtk-space-2, 8px);height:var(--rtk-space-8, 32px);width:var(--rtk-space-8, 32px);flex-shrink:0;font-size:14px}.waiting-participant .participant-details .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}@media (min-width: 1080px){.waiting-participant .participant-details .name{max-width:var(--rtk-space-40, 160px)}}.waiting-participant .waitlist-controls{display:flex}.waiting-participant .waitlist-controls rtk-button{margin-left:var(--rtk-space-2, 8px);cursor:pointer;border-radius:var(--rtk-border-radius-sm, 4px)}.waiting-participant .waitlist-controls rtk-icon.accept{--tw-text-opacity:1;color:rgba(var(--rtk-colors-success, 98 165 4) / var(--tw-text-opacity))}.waiting-participant .waitlist-controls rtk-icon.deny{--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}";
 const RtkParticipantsStageQueueStyle0 = rtkParticipantsStageQueueCss;

package/dist/components/{p-cf8f725b.js → p-61dcdd44.js} RENAMED Viewed

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, h } from './p-c3592601.js';
-import { M as MAX_TEXT_LENGTH, p as parseRichText, e as extractReplyBlock, s as stripOutReplyBlock } from './p-dab9d3d6.js';
+import { p as proxyCustomElement, H, h } from './p-fdad14c9.js';
+import { M as MAX_TEXT_LENGTH, p as parseRichText, e as extractReplyBlock, s as stripOutReplyBlock } from './p-0db812c2.js';
-const rtkMarkdownViewCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{overflow-wrap:break-word}a{color:currentColor}.block-quote,blockquote{margin:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-3, 12px);--tw-border-spacing-x:1px;--tw-border-spacing-y:1px;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y);border-top-width:var(--rtk-border-width-none, 0);border-bottom-width:var(--rtk-border-width-none, 0);border-left-width:var(--rtk-border-width-md, 2px);border-right-width:var(--rtk-border-width-none, 0);border-style:solid;padding:var(--rtk-space-0\\.5, 2px);padding-left:var(--rtk-space-2, 8px);border-radius:var(--rtk-border-radius-sm, 4px);border-top-left-radius:var(--rtk-border-radius-none, 0);border-bottom-left-radius:var(--rtk-border-radius-none, 0)}pre{white-space:pre-wrap}";
+const rtkMarkdownViewCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{overflow-wrap:break-word}a{color:currentColor}.block-quote,blockquote{margin:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-3, 12px);--tw-border-spacing-x:1px;--tw-border-spacing-y:1px;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y);border-top-width:var(--rtk-border-width-none, 0);border-bottom-width:var(--rtk-border-width-none, 0);border-left-width:var(--rtk-border-width-md, 2px);border-right-width:var(--rtk-border-width-none, 0);border-style:solid;padding:var(--rtk-space-0\\.5, 2px);padding-left:var(--rtk-space-2, 8px);border-radius:var(--rtk-border-radius-sm, 4px);border-top-left-radius:var(--rtk-border-radius-none, 0);border-bottom-left-radius:var(--rtk-border-radius-none, 0)}pre{white-space:pre-wrap;width:300px;margin-right:var(--rtk-space-2, 8px)}.markdown-message{box-sizing:border-box}";
 const RtkMarkdownViewStyle0 = rtkMarkdownViewCss;
 const RtkMarkdownView = /*@__PURE__*/ proxyCustomElement(class RtkMarkdownView extends H {
@@ -83,7 +83,7 @@ const RtkMarkdownView = /*@__PURE__*/ proxyCustomElement(class RtkMarkdownView e
         const slicedMessage = this.text.slice(0, this.maxLength);
         const withReply = extractReplyBlock(slicedMessage, true);
         const withoutReply = stripOutReplyBlock(slicedMessage);
-        return (h("p", { key: '787e6d3177f4faf1c8dcd7c73d83a6de9c57b42b' }, withReply.length !== 0 && h("blockquote", { key: '1c4b82fb870994e6707d35adcd5e6f2f0e65dd26' }, this.renderMessage(withReply)), withoutReply.length !== 0 && this.renderMessage(withoutReply)));
+        return (h("p", { key: 'b4114b74658b0311835f31ea387e47ef9323ef4f', class: "markdown-message" }, withReply.length !== 0 && h("blockquote", { key: 'cc726294f8b71999f6fa48442b40419f17e3c049' }, this.renderMessage(withReply)), withoutReply.length !== 0 && this.renderMessage(withoutReply)));
     }
     static get style() { return RtkMarkdownViewStyle0; }
 }, [1, "rtk-markdown-view", {