@cloudflare/realtimekit-ui 1.1.0-staging.10 → 1.1.0-staging.12

package/dist/components/{p-e4888ccc.js → p-db5556c3.js}

@@ -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-9bdc24b8.js';
-import { d as defineCustomElement$c } from './p-1391bef0.js';
-import { d as defineCustomElement$b } from './p-43bf8953.js';
-import { d as defineCustomElement$a } from './p-73baf5ba.js';
-import { d as defineCustomElement$9 } from './p-282e8e83.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-7a27fdb5.js';
-import { d as defineCustomElement$3 } from './p-44a203bd.js';
-import { d as defineCustomElement$2 } from './p-e443d803.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-c9db1b82.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-7384c20c.js';
+import { d as defineCustomElement$8 } from './p-90420dc5.js';
+import { d as defineCustomElement$7 } from './p-e7b7abfe.js';
+import { d as defineCustomElement$6 } from './p-cd6f04ae.js';
+import { d as defineCustomElement$5 } from './p-8a66a347.js';
+import { d as defineCustomElement$4 } from './p-862ec1f9.js';
+import { d as defineCustomElement$3 } from './p-793f074d.js';
+import { d as defineCustomElement$2 } from './p-dfdbb665.js';
+import { d as defineCustomElement$1 } from './p-f5aecaad.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.fetchMessages({
+                    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
@@ -147,12 +158,18 @@ const RtkChatMessagesUiPaginated = /*@__PURE__*/ proxyCustomElement(class RtkCha
                 } }))))))));
         };
         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: '1cbb364021b79bd756621987ac03c2e852acf3bd' }, h("rtk-paginated-list", { key: 'b7896890b5e3ea9a190bfa9c86c825233b635aa4', 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: 'b1255713fc172c4e35385021809d391a5fdf9acc' }))));
+        return (h(Host, { key: 'efacd583cb3477a4aa9bc305d2e2d175f1f01492' }, h("rtk-paginated-list", { key: 'c0d100b90c426f9f57840008185510db1ad769eb', 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: 'f587f2644be8f00c31af09d46aa6d166ae7342fd' }))));
     }
     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-7c8096c2.js → p-dd8a892e.js}

@@ -1,8 +1,8 @@
-import { p as proxyCustomElement, H, h, e as Host } from './p-c3592601.js';
-import { e as defaultIconPack } from './p-e847fee9.js';
-import { S as SyncWithStore } from './p-6f7c46d2.js';
-import { d as defineCustomElement$2 } from './p-73baf5ba.js';
-import { d as defineCustomElement$1 } from './p-e443d803.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-fdad14c9.js';
+import { e as defaultIconPack } from './p-f19b4abc.js';
+import { S as SyncWithStore } from './p-e334e15c.js';
+import { d as defineCustomElement$2 } from './p-a3cc7425.js';
+import { d as defineCustomElement$1 } from './p-dfdbb665.js';
 
 const rtkControlbarButtonCss = ":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{--background-color:var(\n    --rtk-controlbar-button-background-color,\n    rgb(var(--rtk-colors-background-1000, 8 8 8))\n  );--icon-size:var(--rtk-controlbar-button-icon-size, var(--rtk-space-7, 28px));position:relative;box-sizing:border-box;display:inline-flex;height:100%;width:auto;min-width:var(--rtk-space-20, 80px);-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:var(--rtk-border-radius-md, 8px);transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;color:rgb(var(--rtk-colors-text-1000, 255 255 255));background-color:var(--background-color)}button{padding:var(--rtk-space-1, 4px)}:host(.red-icon) #icon{--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}:host([disabled]){color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52))}button{box-sizing:border-box;display:inline-flex;height:100%;width:100%;flex:1 1 0%;flex-direction:column;gap:var(--rtk-space-1, 4px);padding-left:var(--rtk-space-1, 4px);padding-right:var(--rtk-space-1, 4px);align-items:center;justify-content:center;cursor:pointer;border-radius:var(--rtk-border-radius-md, 8px);border-width:var(--rtk-border-width-none, 0);border-style:none;background-color:transparent;color:inherit;outline-offset:-2px;border:var(--rtk-border-width-md, 2px) solid transparent}.label{text-align:center;font-size:12px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}#warning-indicator{position:absolute;top:var(--rtk-space-1, 4px);right:var(--rtk-space-2, 8px);height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);--tw-text-opacity:1;color:rgba(var(--rtk-colors-warning, 255 205 7) / var(--tw-text-opacity))}:host([size='sm']) #warning-indicator{right:var(--rtk-space-0, 0px);top:var(--rtk-space-0, 0px);height:var(--rtk-space-3, 12px);width:var(--rtk-space-3, 12px)}:host(:hover) button{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}#icon{width:var(--icon-size);height:var(--icon-size)}:host(.leave:hover) button{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity));border:var(--rtk-border-width-md, 2px) solid rgb(var(--rtk-colors-danger, 255 45 45))}:host(.active) button{--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-400, 53 110 253) / var(--tw-text-opacity));border:var(--rtk-border-width-md, 2px) solid rgb(var(--rtk-colors-brand-400, 53 110 253))}button:focus-visible{outline:2px solid rgb(var(--rtk-colors-brand-400, 53 110 253))}:host(.active-livestream){--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}:host([size='sm']){min-width:var(--rtk-space-14, 56px)}:host([size='sm']) .label{display:none}:host([variant='horizontal']){width:100%}:host([variant='horizontal']) button{border-radius:7px;height:var(--rtk-space-12, 48px);width:100%;padding-left:var(--rtk-space-5, 20px);padding-right:var(--rtk-space-5, 20px);padding-top:var(--rtk-space-3, 12px);padding-bottom:var(--rtk-space-3, 12px);flex-direction:row;justify-content:flex-start;gap:var(--rtk-space-3, 12px)}:host([variant='horizontal']) #icon{width:var(--rtk-space-6, 24px)}:host([variant='horizontal']) .label{display:block;font-size:14px;line-height:1.25rem}:host([variant='horizontal']) #warning-indicator{right:auto;left:var(--rtk-space-4, 16px)}:host([brand-icon]) rtk-icon#icon{--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-text-opacity))}@media only screen and (max-device-height: 480px) and (orientation: landscape){:host .label{display:none}:slotted(rtk-icon){height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px)}}";
 const RtkControlbarButtonStyle0 = rtkControlbarButtonCss;

package/dist/components/{p-e443d803.js → p-dfdbb665.js}

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, h, e as Host } from './p-c3592601.js';
-import { e as defaultIconPack } from './p-e847fee9.js';
-import { S as SyncWithStore } from './p-6f7c46d2.js';
-import { d as defineCustomElement$1 } from './p-73baf5ba.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-fdad14c9.js';
+import { e as defaultIconPack } from './p-f19b4abc.js';
+import { S as SyncWithStore } from './p-e334e15c.js';
+import { d as defineCustomElement$1 } from './p-a3cc7425.js';
 
 const rtkSpinnerCss = ":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{box-sizing:border-box;display:block;height:var(--rtk-space-10, 40px);width:var(--rtk-space-10, 40px);--rtk-spinner-color:currentColor}.spinner{height:100%;width:100%}@keyframes spin{to{transform:rotate(360deg)}}.spinner{animation:spin 1s linear infinite;border-radius:9999px;background-color:transparent;animation-duration:1.3s}:host([size='md']){height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px)}:host([size='sm']){height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px)}";
 const RtkSpinnerStyle0 = rtkSpinnerCss;
@@ -27,7 +27,7 @@ const RtkSpinner = /*@__PURE__*/ proxyCustomElement(class RtkSpinner extends H {
         this.size = 'md';
     }
     render() {
-        return (h(Host, { key: 'c042cbd31d8fa9e58c0cbbc5646575a3172fc824' }, h("rtk-icon", { key: '0171ba3d5f7506e2c67eb813c5ad5b263352088d', class: "spinner", icon: this.iconPack.spinner })));
+        return (h(Host, { key: 'f9f0f938827fb04712fb9f406fb07d48c398865a' }, h("rtk-icon", { key: 'a2daa23191ea94007c8a980f221409c6dfe35d03', class: "spinner", icon: this.iconPack.spinner })));
     }
     static get style() { return RtkSpinnerStyle0; }
 }, [1, "rtk-spinner", {

package/dist/components/{p-524d7900.js → p-e0ef3893.js}

@@ -1,10 +1,10 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
-import { S as SyncWithStore } from './p-6f7c46d2.js';
-import { e as defaultIconPack, i as useLanguage } from './p-e847fee9.js';
+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 { e as defaultIconPack, i as useLanguage } from './p-f19b4abc.js';
 import './p-a83ccdbd.js';
-import { d as defineCustomElement$3 } from './p-1391bef0.js';
-import { d as defineCustomElement$2 } from './p-73baf5ba.js';
-import { d as defineCustomElement$1 } from './p-fb836f65.js';
+import { d as defineCustomElement$3 } from './p-e229128b.js';
+import { d as defineCustomElement$2 } from './p-a3cc7425.js';
+import { d as defineCustomElement$1 } from './p-15156a2c.js';
 
 const rtkDraftAttachmentViewCss = ":host{display:flex;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));border-top-left-radius:var(--rtk-border-radius-md, 8px);border-top-right-radius:var(--rtk-border-radius-md, 8px)}.preview-overlay{position:absolute;top:var(--rtk-space-0, 0px);right:var(--rtk-space-0, 0px);bottom:var(--rtk-space-0, 0px);left:var(--rtk-space-0, 0px);background-color:inherit}.preview{position:absolute;top:var(--rtk-space-4, 16px);left:var(--rtk-space-4, 16px);max-width:-moz-fit-content;max-width:fit-content;max-height:var(--rtk-space-20, 80px)}.preview:hover rtk-tooltip{display:block}.preview rtk-tooltip{position:absolute;top:calc(var(--rtk-space-1, 4px) * -1);left:calc(var(--rtk-space-1, 4px) * -1);display:none;margin-left:calc(var(--rtk-space-1, 4px) * -1);margin-top:calc(var(--rtk-space-1, 4px) * -1)}.preview rtk-button{display:flex;height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));border:1px solid rgb(var(--rtk-colors-text-1000, 255 255 255))}.preview rtk-icon{height:var(--rtk-space-3, 12px);width:var(--rtk-space-3, 12px);color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.preview-image{height:var(--rtk-space-16, 64px);width:var(--rtk-space-16, 64px);-o-object-fit:cover;object-fit:cover;max-height:100%;max-width:100%;overflow:clip;border-radius:var(--rtk-border-radius-md, 8px)}.preview-file{padding-left:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-3, 12px);padding-top:var(--rtk-space-2, 8px);padding-bottom:var(--rtk-space-2, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--rtk-border-radius-md, 8px);max-width:200px}";
 const RtkDraftAttachmentViewStyle0 = rtkDraftAttachmentViewCss;
@@ -62,7 +62,7 @@ const RtkDraftAttachmentView = /*@__PURE__*/ proxyCustomElement(class RtkDraftAt
         this.onAttachmentChange();
     }
     render() {
-        return (h(Host, { key: 'f6ede093bcdf8100807baab4de2a296fc4960a07' }, h("div", { key: 'b19bbe9b2ea58ea4adccc2028a1b24ea6bc9f0a9', class: "preview-overlay" }, h("div", { key: 'cbb2bfcb3a50e6e7fbfd4109eb340ba51d6a162d', class: "preview" }, h("rtk-tooltip", { key: '15b50c547470b0fa22014e0992a1c7e26b234573', label: this.t('chat.cancel_upload') }, h("rtk-button", { key: '940332a51747af3368ffec497d5ef76fa64ecf75', variant: "secondary", kind: "icon", onClick: this.onDeleteClickHandler }, h("rtk-icon", { key: 'cc04b0ac70753e970ff638f187ad5f702dc3656b', icon: this.iconPack.dismiss }))), this.attachment.type === 'image' ? (h("img", { class: "preview-image", src: this.filePreview })) : (h("div", { class: "preview-file" }, h("span", null, this.filePreview)))))));
+        return (h(Host, { key: '51ac9914a6c3626f3abd63d8101dd33d956f0cb0' }, h("div", { key: '9520035fca81e905b7bcc3696ec9803ca127a370', class: "preview-overlay" }, h("div", { key: '6c8139ece3ce95836f7853a160c0a01e298c2892', class: "preview" }, h("rtk-tooltip", { key: 'd3379d7a4a3b09c15d75ec4fce8bc7c2e89b1df4', label: this.t('chat.cancel_upload') }, h("rtk-button", { key: 'd5badd1b4a2fce0f2958d8923adde9353562eb8a', variant: "secondary", kind: "icon", onClick: this.onDeleteClickHandler }, h("rtk-icon", { key: '4acde8f6352eab6e2277f6317ef226d22defe4e0', icon: this.iconPack.dismiss }))), this.attachment.type === 'image' ? (h("img", { class: "preview-image", src: this.filePreview })) : (h("div", { class: "preview-file" }, h("span", null, this.filePreview)))))));
     }
     static get watchers() { return {
         "attachment": ["onAttachmentChange"]

package/dist/components/{p-1391bef0.js → p-e229128b.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, e as Host } from './p-c3592601.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-fdad14c9.js';
 
 const rtkButtonCss = ":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{--icon-size:var(--rtk-button-icon-size, var(--rtk-space-5, 20px));--transition-property:var(--rtk-transition-property, all);--transition-duration:100ms;display:inline-flex;height:var(--rtk-space-8, 32px);cursor:pointer;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255));font-size:14px;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:var(--rtk-border-radius-sm, 4px);transition-property:var(--transition-property);transition-duration:var(--transition-duration)}button{box-sizing:border-box;background-color:transparent;color:inherit;border:var(--rtk-border-width-sm, 1px) solid transparent;padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px);display:inline-flex;flex-grow:1;justify-content:center;vertical-align:baseline;gap:var(--rtk-space-1, 4px);transition-property:var(--transition-property);transition-duration:var(--transition-duration);outline:none;height:inherit;border-radius:inherit;fill:inherit;cursor:inherit;font-weight:inherit;font-family:inherit;font-size:inherit;line-height:inherit}.start,.content,.end{align-self:center}::slotted(rtk-icon),::slotted(rtk-spinner){height:var(--icon-size);width:var(--icon-size)}:host([variant='primary']){color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}:host(:hover){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-600, 13 81 253) / var(--tw-bg-opacity))}button:focus-visible{border-color:rgb(var(--rtk-colors-text-1000, 255 255 255))}:host(:active){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-700, 2 70 253) / var(--tw-bg-opacity))}:host([disabled]:not([disabled='false'])){cursor:not-allowed;opacity:0.6}:host([variant='secondary']){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}:host([variant='secondary']:hover){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}:host([variant='secondary']:active){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity))}:host([variant='danger']){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-bg-opacity))}:host([variant='danger']:hover){background-color:rgba(var(--rtk-colors-danger, 255 45 45) / 0.7)}:host([variant='danger']:active){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-bg-opacity))}:host([variant='ghost']){background-color:transparent;color:inherit}:host([variant='ghost'].active){--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-text-opacity))}:host([variant='ghost']:hover){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}:host([variant='ghost']:active){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity))}:host([kind='icon']){--icon-size:var(--rtk-space-5, 20px);width:var(--rtk-space-8, 32px)}:host([kind='icon']) button{padding-left:var(--rtk-space-0, 0px);padding-right:var(--rtk-space-0, 0px)}:host([kind='wide']){width:100%}:host([size='lg']){--icon-size:var(--rtk-space-5, 20px);height:var(--rtk-space-10, 40px);font-size:16px}:host([size='lg'][kind='icon']){--icon-size:var(--rtk-space-6, 24px);height:var(--rtk-space-10, 40px);width:var(--rtk-space-10, 40px)}:host([size='sm']){--icon-size:var(--rtk-space-4, 16px);height:var(--rtk-space-6, 24px);font-size:12px}:host([size='sm'][kind='icon']){height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px)}";
 const RtkButtonStyle0 = rtkButtonCss;

package/dist/components/{p-6f7c46d2.js → p-e334e15c.js}

@@ -1,5 +1,5 @@
-import { i as getElement } from './p-c3592601.js';
-import { u as uiStore, E as appendElement, F as removeElement } from './p-e847fee9.js';
+import { e as getElement } from './p-fdad14c9.js';
+import { u as uiStore, E as appendElement, F as removeElement } from './p-f19b4abc.js';
 
 function SyncWithStore() {
     return function (proto, propName) {

package/dist/components/{p-5476e3f3.js → p-e544a590.js}

@@ -1,9 +1,9 @@
-import { p as proxyCustomElement, H, h, e as Host } from './p-c3592601.js';
-import { c as createDefaultConfig, e as defaultIconPack, i as useLanguage } from './p-e847fee9.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-fdad14c9.js';
+import { c as createDefaultConfig, e as defaultIconPack, i as useLanguage } from './p-f19b4abc.js';
 import './p-a83ccdbd.js';
-import { R as Render } from './p-60fdbd75.js';
-import { S as SyncWithStore } from './p-6f7c46d2.js';
-import { d as defineCustomElement$1 } from './p-dc3143c0.js';
+import { R as Render } from './p-f3c261ec.js';
+import { S as SyncWithStore } from './p-e334e15c.js';
+import { d as defineCustomElement$1 } from './p-d0f54eea.js';
 
 const rtkParticipantsStageListCss = ":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{display:flex;width:100%;flex-direction:column;font-size:14px}.participants-container{margin-bottom:var(--rtk-space-4, 16px);height:100%;width:100%}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);margin-bottom:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}.empty-stage-list{margin-top:var(--rtk-space-4, 16px);margin-bottom:var(--rtk-space-4, 16px);text-align:center;font-size:12px;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}rtk-participant{width:100%}";
 const RtkParticipantsStageListStyle0 = rtkParticipantsStageListCss;
@@ -108,7 +108,7 @@ const RtkParticipants = /*@__PURE__*/ proxyCustomElement(class RtkParticipants e
         }
     }
     render() {
-        return (h(Host, { key: 'd9102eb22990f801c354c45ee0ff46f4a13fef60' }, h("div", { key: '58644b83e1b580f2ffd41a61319e88cfb1aae584', class: "participants-container" }, !this.hideHeader && (h("div", { key: '4063fc5e4322b723f02d40fe80522236a7ae728d', class: "heading-count", part: "heading-count" }, this.t('participants'), " (", this.participants.length, ")")), h("rtk-virtualized-participant-list", { key: '45a95caaa31437c03679394305115045fa6a016f', items: this.participants, renderItem: this.createParticipantNode, part: "participants", class: "participants", emptyListElement: h("div", { class: "empty-stage-list" }, this.search.length > 0 ? this.t('search.could_not_find') : this.t('search.empty')) }))));
+        return (h(Host, { key: 'ecc05db9075b4b8a70c3255c27958fc20bcf87cf' }, h("div", { key: '2bdf1aa213682d4ea175e10ccd2f87e437ace5c9', class: "participants-container" }, !this.hideHeader && (h("div", { key: '239593a2d551ab92d5cda3bcc3105d642b0c9c21', class: "heading-count", part: "heading-count" }, this.t('participants'), " (", this.participants.length, ")")), h("rtk-virtualized-participant-list", { key: '8ade637f0728fceb723370c8c7dd6e675eac0678', items: this.participants, renderItem: this.createParticipantNode, part: "participants", class: "participants", emptyListElement: h("div", { class: "empty-stage-list" }, this.search.length > 0 ? this.t('search.could_not_find') : this.t('search.empty')) }))));
     }
     static get watchers() { return {
         "meeting": ["meetingChanged"],

package/dist/components/{p-2447a26f.js → p-e7b7abfe.js}

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, h, e as Host } from './p-c3592601.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-fdad14c9.js';
 import { c as computePosition, o as offset, f as flip, s as shift } from './p-769bb885.js';
-import { e as defaultIconPack, i as useLanguage } from './p-e847fee9.js';
-import { S as SyncWithStore } from './p-6f7c46d2.js';
+import { e as defaultIconPack, i as useLanguage } from './p-f19b4abc.js';
+import { S as SyncWithStore } from './p-e334e15c.js';
 
 const rtkMenuCss = ":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{position:relative;display:inline-block;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}#menu-list{position:absolute;z-index:20;display:none}";
 const RtkMenuStyle0 = rtkMenuCss;
@@ -59,7 +59,7 @@ const RtkMenu = /*@__PURE__*/ proxyCustomElement(class RtkMenu extends H {
         });
     }
     render() {
-        return (h(Host, { key: '15461c803838be1651df6116a61598ce8ab988f9' }, h("span", { key: 'f36cdd2f1141f46a993daa880682382904a72509', id: "trigger", ref: (el) => (this.triggerEl = el), onClick: () => {
+        return (h(Host, { key: '98d1a73c1fdd151945433a13dc1d9f11cfaaeb05' }, h("span", { key: '5cb225dca906f51ea4f9cfe999840af35cbbf865', id: "trigger", ref: (el) => (this.triggerEl = el), onClick: () => {
                 this.clickedThis = true;
                 if (this.menuListEl.style.display !== 'block') {
                     this.menuListEl.style.display = 'block';
@@ -68,7 +68,7 @@ const RtkMenu = /*@__PURE__*/ proxyCustomElement(class RtkMenu extends H {
                 else {
                     this.menuListEl.style.display = 'none';
                 }
-            } }, h("slot", { key: 'af622c9dbb3394cb46a6bb909a45c5e3248b1a09', name: "trigger" })), h("span", { key: '445258e31b4b775fbc22b268234fe15a33f809c9', part: "menu-list", id: "menu-list", ref: (el) => (this.menuListEl = el) }, h("slot", { key: '87396622c6078253736cbe43a1cac55c6f90754f' }))));
+            } }, h("slot", { key: '75146b82e06b27ec57e85d741f42b6112d740334', name: "trigger" })), h("span", { key: 'ef16bf3d6197fd16fa7fb9dca36bc97f9cafec52', part: "menu-list", id: "menu-list", ref: (el) => (this.menuListEl = el) }, h("slot", { key: 'fa8644e4eff65fa5832d80cd53a70e626ea0b1e9' }))));
     }
     static get style() { return RtkMenuStyle0; }
 }, [1, "rtk-menu", {

package/dist/components/{p-45b4f6a1.js → p-ecbb4e46.js}

@@ -1,9 +1,9 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
-import { c as createDefaultConfig, e as defaultIconPack, i as useLanguage } from './p-e847fee9.js';
-import { R as Render } from './p-60fdbd75.js';
-import { S as SyncWithStore } from './p-6f7c46d2.js';
-import { d as defineCustomElement$2 } from './p-1391bef0.js';
-import { d as defineCustomElement$1 } from './p-73baf5ba.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-fdad14c9.js';
+import { c as createDefaultConfig, e as defaultIconPack, i as useLanguage } from './p-f19b4abc.js';
+import { R as Render } from './p-f3c261ec.js';
+import { S as SyncWithStore } from './p-e334e15c.js';
+import { d as defineCustomElement$2 } from './p-e229128b.js';
+import { d as defineCustomElement$1 } from './p-a3cc7425.js';
 
 const rtkJoinStageCss = ":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::-webkit-scrollbar{width:var(--rtk-space-1\\.5, 6px);border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity))}:host::-webkit-scrollbar-thumb{border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity))}:host(.stage){box-sizing:border-box;display:block;width:512px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));padding:var(--rtk-space-6, 24px);-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:auto;border-radius:var(--rtk-border-radius-md, 8px);line-height:1.25}:host(.stage) rtk-participant-setup{display:flex;flex:1 1 0%;align-items:center;justify-content:space-around;margin-left:auto;margin-right:auto}:host(.stage) .container rtk-button{flex-grow:1;padding:var(--rtk-space-1, 4px);width:50%}:host(.stage) .container rtk-button:nth-child(1){margin-right:var(--rtk-space-1\\.5, 6px)}:host(.stage) .container rtk-button:nth-child(2){margin-left:var(--rtk-space-1\\.5, 6px)}:host(.stage) h2{font-size:24px;font-weight:500;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}:host(.stage) header{padding-left:var(--rtk-space-4, 16px);padding-right:var(--rtk-space-4, 16px)}:host(.stage) .summary{padding:var(--rtk-space-4, 16px)}.deny-access{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity))}.container{width:100%;max-width:1080px;display:flex;flex:1 1 0%;align-items:center;justify-content:space-around}header{display:flex;align-items:center;justify-content:space-between}";
 const RtkJoinStageStyle0 = rtkJoinStageCss;
@@ -53,7 +53,7 @@ const RtkJoinStage = /*@__PURE__*/ proxyCustomElement(class RtkJoinStage extends
             iconPack: this.iconPack,
             t: this.t,
         };
-        return (h(Host, { key: 'fc0ab6fcff6f85476a7e5fb7008a49bbcc867e28', class: { stage: true } }, h("header", { key: '2aaabd2a9fc9c8832fc46a083fe3cd45a0ceda2e' }, h("h2", { key: '1d13dfa46fd17e3e93f575bf10fd47a8d4df8bd8' }, this.dataConfig.title)), h(Render, { key: 'b775f6f82ececa810239f1174b58e921e61cb867', element: "rtk-participant-setup", defaults: defaults, props: { participant: (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.self, size: 'md' }, childProps: { participant: (_b = this.meeting) === null || _b === void 0 ? void 0 : _b.self, size: 'md' }, deepProps: true }), h("div", { key: '495c56a71ae7e7e18c395187847d32b5b4d38557', class: "summary" }, this.dataConfig.description), h("div", { key: '659312085e47fa2cd3813f4d1d2155fa277b48e6', class: "container" }, h("rtk-button", { key: '12f385cc6218672bb50b3ecd0746b259c75ae6fe', variant: "secondary", onClick: () => this.leaveStage.emit(), title: this.dataConfig.label.reject }, this.dataConfig.label.reject), h("rtk-button", { key: '663ed3768179983c248ce0948f2075c71d6eda35', onClick: () => {
+        return (h(Host, { key: '2000c74c7b15b8ad8cc8d7b2940ee1c47c504111', class: { stage: true } }, h("header", { key: '1be2b7c17338f42472bd47c761e8a972d960eb45' }, h("h2", { key: '8a2d2e49eb154fc58f121f26c067519473007aa1' }, this.dataConfig.title)), h(Render, { key: '17476c475c67d3eedfce7e66a2dc1829211e6f7b', element: "rtk-participant-setup", defaults: defaults, props: { participant: (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.self, size: 'md' }, childProps: { participant: (_b = this.meeting) === null || _b === void 0 ? void 0 : _b.self, size: 'md' }, deepProps: true }), h("div", { key: '708a514d2f5c903c5e01161a374455134f9c5fde', class: "summary" }, this.dataConfig.description), h("div", { key: '690c062b55469b6d2757628cf9c841db05cb50dd', class: "container" }, h("rtk-button", { key: '3c840601730f7c31da94f58fcc7a36fa7f2e98ac', variant: "secondary", onClick: () => this.leaveStage.emit(), title: this.dataConfig.label.reject }, this.dataConfig.label.reject), h("rtk-button", { key: 'd4838af3f9b36c6d91ce04d9862840ee838111de', onClick: () => {
                 if (this.isLoading)
                     return;
                 this.isLoading = true;

package/dist/components/{p-6f361314.js → p-eff3c856.js}

@@ -1,10 +1,10 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
-import { c as createDefaultConfig, e as defaultIconPack, i as useLanguage } from './p-e847fee9.js';
-import { S as SyncWithStore } from './p-6f7c46d2.js';
-import { d as defineCustomElement$2 } from './p-1391bef0.js';
-import { d as defineCustomElement$1 } from './p-73baf5ba.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-fdad14c9.js';
+import { c as createDefaultConfig, e as defaultIconPack, i as useLanguage } from './p-f19b4abc.js';
+import { S as SyncWithStore } from './p-e334e15c.js';
+import { d as defineCustomElement$2 } from './p-e229128b.js';
+import { d as defineCustomElement$1 } from './p-a3cc7425.js';
 
-const rtkDialogCss = ":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{word-wrap:break-word;overflow-wrap:break-word}#dialog{position:relative;max-height:100%;max-width:100%;padding:var(--rtk-space-0, 0px);border-width:var(--rtk-border-width-none, 0);border-style:none;background-color:transparent;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}#dialog::backdrop{background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / 0.5);-webkit-backdrop-filter:blur(12px) saturate(180%);backdrop-filter:blur(12px) saturate(180%)}#dismiss-btn{position:absolute;top:var(--rtk-space-3, 12px);right:var(--rtk-space-3, 12px);z-index:50}::slotted(*){max-width:100%;height:auto;min-height:-moz-fit-content;min-height:fit-content}";
+const rtkDialogCss = ":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{word-wrap:break-word;overflow-wrap:break-word}#dialog{position:relative;max-height:100%;max-width:100%;padding:var(--rtk-space-0, 0px);border-width:var(--rtk-border-width-none, 0);border-style:none;background-color:transparent;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}#dialog::backdrop{background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / 0.5);backdrop-filter:blur(12px) saturate(180%)}#dismiss-btn{position:absolute;top:var(--rtk-space-3, 12px);right:var(--rtk-space-3, 12px);z-index:50}::slotted(*){max-width:100%;height:auto;min-height:-moz-fit-content;min-height:fit-content}";
 const RtkDialogStyle0 = rtkDialogCss;
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {