@cloudflare/realtimekit-ui 1.0.9-staging.2 → 1.0.9-staging.4

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

@@ -1,4 +1,4 @@
-import { R as RtkChatMessage$1, d as defineCustomElement$1 } from './p-1d29b7c3.js';
+import { R as RtkChatMessage$1, d as defineCustomElement$1 } from './p-ee98bbaf.js';
 
 const RtkChatMessage = RtkChatMessage$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { R as RtkChatMessagesUiPaginated$1, d as defineCustomElement$1 } from './p-04aaec79.js';
+import { R as RtkChatMessagesUiPaginated$1, d as defineCustomElement$1 } from './p-94e867c2.js';
 
 const RtkChatMessagesUiPaginated = RtkChatMessagesUiPaginated$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,305 @@
-import { R as RtkChatMessagesUi$1, d as defineCustomElement$1 } from './p-0e07ea51.js';
+import { p as proxyCustomElement, H, d as createEvent, w as writeTask, h, e as Host } from './p-c3592601.js';
+import { e as defaultIconPack, h as useLanguage } from './p-7fc0dc2f.js';
+import { c as chatUnreadTimestamps } from './p-a83ccdbd.js';
+import { d as differenceInMinutes, f as formatDateTime, e as elapsedDuration } from './p-382270d8.js';
+import { s as smoothScrollToBottom } from './p-0752f2ba.js';
+import { S as SyncWithStore } from './p-47c25f64.js';
+import { d as defineCustomElement$e } from './p-f4e75ea9.js';
+import { d as defineCustomElement$d } from './p-1391bef0.js';
+import { d as defineCustomElement$c } from './p-0b4e526c.js';
+import { d as defineCustomElement$b } from './p-3b29dda1.js';
+import { d as defineCustomElement$a } from './p-63ef7ea4.js';
+import { d as defineCustomElement$9 } from './p-88bef213.js';
+import { d as defineCustomElement$8 } from './p-f8f5cb31.js';
+import { d as defineCustomElement$7 } from './p-a6296b02.js';
+import { d as defineCustomElement$6 } from './p-080acf18.js';
+import { d as defineCustomElement$5 } from './p-fe911889.js';
+import { d as defineCustomElement$4 } from './p-0a35a909.js';
+import { d as defineCustomElement$3 } from './p-a94b2e67.js';
+import { d as defineCustomElement$2 } from './p-fa8f6b4a.js';
+
+const rtkChatMessagesUiCss = ":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{position:relative;display:flex;flex-direction:column;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));word-break:break-word}.chat-container{box-sizing:border-box;display:flex;flex-direction:column;padding-top:var(--rtk-space-4, 16px);padding-bottom:var(--rtk-space-4, 16px);flex:1 0 0px;overflow-y:scroll}.chat-container .spacer{flex:1 1 auto}.chat-container .chat{flex:0 0 auto}.file-picker{display:none}.chat .head{margin-bottom:var(--rtk-space-2, 8px);display:flex;align-items:center}.chat .head .name{margin-right:var(--rtk-space-2, 8px);font-size:12px;font-weight:700}.chat .head .time{font-size:12px;color:rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76))}.chat .body{overflow-wrap:break-word;line-height:1.5}.chat .body .emoji{font-size:24px}p{margin:var(--rtk-space-0, 0px);line-height:1.5}rtk-message-view{margin-top:var(--rtk-space-2, 8px);display:block;padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px);color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));box-sizing:border-box}rtk-message-view::part(message){flex-grow:1}*[is-continued] rtk-message-view{margin-top:var(--rtk-space-1, 4px)}.pinned .message-wrapper{position:relative}.pinned .pin-button{position:absolute;right:var(--rtk-space-4, 16px);top:calc(var(--rtk-space-4, 16px) * -1);display:flex;border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.pinned .pin-button:hover rtk-button{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-600, 13 81 253) / var(--tw-bg-opacity))}.pinned rtk-message-view{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));padding-top:var(--rtk-space-1, 4px);padding-bottom:var(--rtk-space-1, 4px)}a{--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-text-opacity));text-decoration-line:none}a:hover{text-decoration-line:underline}.new-chat-marker{display:flex;width:100%;align-items:center;gap:var(--rtk-space-2, 8px);--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-text-opacity))}.new-chat-marker::before{content:'';height:1px;flex:1 1 0%;background-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / 0.5)}.show-new-messages-ctr{pointer-events:none;display:flex;justify-content:flex-end;padding:var(--rtk-space-3, 12px);z-index:0;margin-top:calc(var(--rtk-space-14, 56px) * -1)}.show-new-messages{pointer-events:auto;--tw-translate-y:var(--rtk-space-16, 64px);transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:0;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.show-new-messages.active{--tw-translate-y:var(--rtk-space-0, 0px);transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:1}";
+const RtkChatMessagesUiStyle0 = rtkChatMessagesUiCss;
+
+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 RtkChatMessagesUi$1 = /*@__PURE__*/ proxyCustomElement(class RtkChatMessagesUi extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.onPinMessage = createEvent(this, "pinMessage", 7);
+        this.stateUpdate = createEvent(this, "rtkStateUpdate", 7);
+        this.observingEl = [];
+        this.autoScrollEnabled = true;
+        /** Chat Messages */
+        this.messages = [];
+        /** Can current user pin/unpin messages */
+        this.canPinMessages = false;
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        this.now = new Date();
+        this.showLatestMessageButton = false;
+        this.onScroll = (e) => {
+            const target = e.target;
+            writeTask(() => {
+                const { scrollTop, clientHeight, scrollHeight } = target;
+                const fromTop = scrollTop + clientHeight;
+                if (fromTop + 10 >= scrollHeight) {
+                    // at bottom
+                    this.autoScrollEnabled = true;
+                    this.showLatestMessageButton = false;
+                }
+                else {
+                    // not at bottom
+                    this.autoScrollEnabled = false;
+                }
+            });
+        };
+        this.scrollToBottom = () => {
+            smoothScrollToBottom(this.$chat);
+        };
+        this.observeMessage = (el) => {
+            if (el) {
+                this.observingEl.push(el);
+            }
+            try {
+                this.intersectionObserver.observe(el);
+            }
+            catch (_a) { }
+        };
+        this.getMessageActions = (message) => {
+            const actions = [];
+            if (!message.pinned && this.canPinMessages) {
+                actions.push({
+                    id: 'pin_message',
+                    label: this.t('pin'),
+                    icon: this.iconPack.pin,
+                });
+            }
+            return actions;
+        };
+        this.onMessageActionHandler = (actionId, message) => {
+            switch (actionId) {
+                case 'pin_message':
+                    this.onPinMessage.emit(message);
+                    break;
+            }
+        };
+    }
+    connectedCallback() {
+        var _a;
+        this.lastReadTimestamp = (_a = chatUnreadTimestamps['everyone']) !== null && _a !== void 0 ? _a : new Date('0001-01-01T00:00:00Z');
+        this.intersectionObserver = new IntersectionObserver((entries) => {
+            if (!document.hasFocus())
+                return;
+            writeTask(() => {
+                for (const entry of entries) {
+                    if (entry.isIntersecting) {
+                        const currTimestamp = parseInt(entry.target.getAttribute('data-timestamp'));
+                        if (currTimestamp > this.lastReadTimestamp.getTime()) {
+                            // this.lastReadTimestamp = new Date();
+                            chatUnreadTimestamps[this.selectedGroup] = new Date();
+                        }
+                    }
+                }
+            });
+        });
+        // update current time every minute
+        const updateNow = () => {
+            this.now = new Date();
+            this.timeout = setTimeout(() => {
+                if (this.request != null) {
+                    this.request = requestAnimationFrame(updateNow);
+                }
+            }, 60 * 1000);
+        };
+        this.request = requestAnimationFrame(updateNow);
+        this.chatChanged(this.messages);
+    }
+    componentDidLoad() {
+        this.$chat.addEventListener('scroll', this.onScroll);
+        this.$chat.scrollTop = this.$chat.scrollHeight;
+    }
+    componentDidRender() {
+        if (this.autoScrollEnabled) {
+            smoothScrollToBottom(this.$chat);
+        }
+        else if (this.autoScrollEnabled == null) {
+            // scroll to bottom on first render
+            smoothScrollToBottom(this.$chat, false);
+        }
+    }
+    chatChanged(messages) {
+        if (this.$chat == null)
+            return;
+        if (this.autoScrollEnabled || this.$chat.clientHeight === this.$chat.scrollHeight)
+            return;
+        for (let i = messages.length - 1; i >= 0; i--) {
+            if (messages[i].message.time > this.lastReadTimestamp &&
+                messages[i].message.userId !== this.selfUserId) {
+                // show latest message button when you have new messages
+                // and chat container is scrollable and autoscroll is not enabled
+                this.showLatestMessageButton = true;
+                break;
+            }
+        }
+    }
+    selectedBucketChanged() {
+        this.autoScrollEnabled = undefined;
+        this.observingEl.forEach((el) => {
+            this.intersectionObserver.unobserve(el);
+        });
+        this.observingEl = [];
+    }
+    disconnectedCallback() {
+        this.$chat.removeEventListener('scroll', this.onScroll);
+        this.intersectionObserver.disconnect();
+        clearTimeout(this.timeout);
+        cancelAnimationFrame(this.request);
+    }
+    render() {
+        var _a;
+        let prevMessage = null;
+        let reachedFirstUnread = false;
+        return (h(Host, { key: '02149982e96642f42c8850f5d501c038874300f7' }, h("div", { key: 'bcc27f4f4c620175c5b6daead99d0a1b64e6bba8', class: "chat-container scrollbar", ref: (el) => (this.$chat = el), part: "container" }, h("div", { key: '4d4ba71a572095a28aa7c03e70a724521122e96d', class: "spacer", part: "spacer" }), h("div", { key: 'eca7d4406536b4e1b8d907bffe9a1ed6ad311dd4', class: "chat", part: "chat" }, (_a = this.messages) === null || _a === void 0 ? void 0 : _a.map((item) => {
+            if (item.type === 'chat') {
+                const { message } = item;
+                const isSelfMessage = message.userId === this.selfUserId;
+                const isUnread = !isSelfMessage &&
+                    !this.autoScrollEnabled &&
+                    !reachedFirstUnread &&
+                    message.time > this.lastReadTimestamp;
+                if (isUnread)
+                    reachedFirstUnread = isUnread;
+                const isContinued = !isUnread &&
+                    message.userId === (prevMessage === null || prevMessage === void 0 ? void 0 : prevMessage.userId) &&
+                    differenceInMinutes(message.time, prevMessage === null || prevMessage === void 0 ? void 0 : prevMessage.time) < 2;
+                prevMessage = message;
+                return (h("div", { "is-continued": isContinued, key: item.message.id, ref: this.observeMessage, "data-timestamp": message.time.getTime(), class: message.pinned ? 'pinned' : '' }, isUnread && (h("div", { class: "new-chat-marker", part: "new-chat-marker" }, this.t('chat.new'))), h("div", { class: "message-wrapper" }, h("rtk-message-view", { time: message.time, actions: this.getMessageActions(message), authorName: message.displayName, hideAuthorName: true, hideAvatar: true, hideMetadata: true, viewType: 'incoming', variant: "bubble", onAction: (event) => this.onMessageActionHandler(event.detail, message) }, !isContinued && (h("div", { class: "head" }, h("div", { class: "name" }, message.displayName), !!message.time && (h("div", { class: "time", title: formatDateTime(message.time) }, elapsedDuration(message.time, new Date(Date.now())))))), 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 });
+                    } })))), message.pinned && (h("div", { class: "pin-button", part: "pin-button" }, h("rtk-tooltip", { label: this.t('unpin') }, h("rtk-button", { kind: "icon", variant: "ghost", onClick: () => this.onMessageActionHandler('pin_message', message), disabled: !this.canPinMessages }, h("rtk-icon", { icon: this.iconPack.pin, size: "sm" }))))))));
+            }
+            return null;
+        }))), h("div", { key: '8cbfbb3eef3f8640ddd66f68d0287cff5ade6997', class: "show-new-messages-ctr" }, h("rtk-button", { key: 'c9d841cf2d557b766c4a642291779562b71d25a1', class: {
+                'show-new-messages': true,
+                active: this.showLatestMessageButton,
+            }, kind: "icon", part: "show-new-messages", onClick: this.scrollToBottom }, h("rtk-icon", { key: 'c579ffd1d28139fd82535c6cc0f661118b670a59', icon: this.iconPack.chevron_down })))));
+    }
+    static get watchers() { return {
+        "messages": ["chatChanged"],
+        "selectedGroup": ["selectedBucketChanged"]
+    }; }
+    static get style() { return RtkChatMessagesUiStyle0; }
+}, [1, "rtk-chat-messages-ui", {
+        "selectedGroup": [1, "selected-group"],
+        "messages": [16],
+        "selfUserId": [1, "self-user-id"],
+        "canPinMessages": [4, "can-pin-messages"],
+        "size": [513],
+        "iconPack": [16],
+        "t": [16],
+        "now": [32],
+        "showLatestMessageButton": [32]
+    }, undefined, {
+        "messages": ["chatChanged"],
+        "selectedGroup": ["selectedBucketChanged"]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkChatMessagesUi$1.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkChatMessagesUi$1.prototype, "t", void 0);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-chat-messages-ui", "rtk-avatar", "rtk-button", "rtk-file-message-view", "rtk-icon", "rtk-image-message-view", "rtk-markdown-view", "rtk-menu", "rtk-menu-item", "rtk-menu-list", "rtk-message-view", "rtk-spinner", "rtk-text-message-view", "rtk-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-chat-messages-ui":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkChatMessagesUi$1);
+            }
+            break;
+        case "rtk-avatar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "rtk-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "rtk-file-message-view":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "rtk-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "rtk-image-message-view":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "rtk-markdown-view":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "rtk-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "rtk-menu-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "rtk-menu-list":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "rtk-message-view":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "rtk-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "rtk-text-message-view":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "rtk-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
 
 const RtkChatMessagesUi = RtkChatMessagesUi$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-chat-search-results.js

@@ -1,4 +1,149 @@
-import { R as RtkChatSearchResults$1, d as defineCustomElement$1 } from './p-6a47e2ee.js';
+import { p as proxyCustomElement, H, h, e as Host } from './p-c3592601.js';
+import { e as defaultIconPack, h as useLanguage } from './p-7fc0dc2f.js';
+import './p-a83ccdbd.js';
+import { S as SyncWithStore } from './p-47c25f64.js';
+import { d as defineCustomElement$d } from './p-f4e75ea9.js';
+import { d as defineCustomElement$c } from './p-1391bef0.js';
+import { d as defineCustomElement$b } from './p-ee98bbaf.js';
+import { d as defineCustomElement$a } from './p-488d88a8.js';
+import { d as defineCustomElement$9 } from './p-3b29dda1.js';
+import { d as defineCustomElement$8 } from './p-190db142.js';
+import { d as defineCustomElement$7 } from './p-f8f5cb31.js';
+import { d as defineCustomElement$6 } from './p-a6296b02.js';
+import { d as defineCustomElement$5 } from './p-080acf18.js';
+import { d as defineCustomElement$4 } from './p-a9540d93.js';
+import { d as defineCustomElement$3 } from './p-0a35a909.js';
+import { d as defineCustomElement$2 } from './p-9889bee5.js';
+
+const rtkChatSearchResultsCss = ":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;height:100%;flex-direction:column;position:relative;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity))}";
+const RtkChatSearchResultsStyle0 = rtkChatSearchResultsCss;
+
+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 RtkChatSearchResults$1 = /*@__PURE__*/ proxyCustomElement(class RtkChatSearchResults extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        this.pageSize = 50;
+        this.searchMessages = async (timestamp, size, reversed) => {
+            return this.meeting.chat.searchMessages(this.query, {
+                channelId: this.channelId,
+                timestamp,
+                size,
+                reversed,
+            });
+        };
+        this.nodeRenderer = (messages) => {
+            return messages.map((message) => (h("rtk-chat-message", { key: message.id, message: message, disableControls: true })));
+        };
+    }
+    render() {
+        return (h(Host, { key: '226b9e52950fca3d296b041dbd93a6c060ad4abe' }, h("rtk-paginated-list", { key: '102af9de7e52317a5f9a8272e9e8a302f99268da', pageSize: this.pageSize, pagesAllowed: 3, fetchData: this.searchMessages, createNodes: this.nodeRenderer, selectedItemId: this.query })));
+    }
+    static get style() { return RtkChatSearchResultsStyle0; }
+}, [1, "rtk-chat-search-results", {
+        "meeting": [16],
+        "query": [1],
+        "channelId": [1, "channel-id"],
+        "iconPack": [16],
+        "t": [16]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkChatSearchResults$1.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkChatSearchResults$1.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkChatSearchResults$1.prototype, "t", void 0);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-chat-search-results", "rtk-avatar", "rtk-button", "rtk-chat-message", "rtk-file-message", "rtk-icon", "rtk-image-message", "rtk-menu", "rtk-menu-item", "rtk-menu-list", "rtk-paginated-list", "rtk-spinner", "rtk-text-message"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-chat-search-results":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkChatSearchResults$1);
+            }
+            break;
+        case "rtk-avatar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "rtk-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "rtk-chat-message":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "rtk-file-message":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "rtk-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "rtk-image-message":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "rtk-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "rtk-menu-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "rtk-menu-list":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "rtk-paginated-list":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "rtk-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "rtk-text-message":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
 
 const RtkChatSearchResults = RtkChatSearchResults$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-chat-selector-ui.js

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
-import { e as defaultIconPack, h as useLanguage } from './p-037e572f.js';
-import { g as generateChatGroupKey } from './p-0abe4b8a.js';
-import { S as SyncWithStore } from './p-af35ac31.js';
+import { e as defaultIconPack, h as useLanguage } from './p-7fc0dc2f.js';
+import { g as generateChatGroupKey } from './p-dab9d3d6.js';
+import { S as SyncWithStore } from './p-47c25f64.js';
 import { d as defineCustomElement$2 } from './p-3b29dda1.js';
 
 const rtkChatSelectorUiCss = ":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;flex-direction:column}.chat-scope-selector{position:relative;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));z-index:10}.chat-scope-selector button{width:100%;border-width:var(--rtk-border-width-none, 0);border-style:none;padding:var(--rtk-space-4, 16px);display:flex;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-1000, 255 255 255));font-size:14px;cursor:pointer;height:var(--rtk-space-12, 48px)}.chat-scope-selector button span{display:flex;align-items:center;justify-content:flex-start}.chat-scope-selector button rtk-icon{height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px)}.chat-scope-selector .search{position:sticky;box-sizing:border-box;display:flex;align-items:center;border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));margin-left:var(--rtk-space-3, 12px);margin-right:var(--rtk-space-3, 12px);margin-top:var(--rtk-space-3, 12px);margin-bottom:var(--rtk-space-0, 0px)}.chat-scope-selector .search rtk-icon{margin-left:var(--rtk-space-2, 8px);margin-right:var(--rtk-space-2, 8px);height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px);color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52))}.chat-scope-selector .search input{box-sizing:border-box;height:var(--rtk-space-9, 36px);width:100%;padding-right:var(--rtk-space-2, 8px);border-width:var(--rtk-border-width-none, 0);border-style:none;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255));outline:2px solid transparent;outline-offset:2px;border-radius:var(--rtk-border-radius-sm, 4px);font-size:14px}.chat-scope-selector .search input::-moz-placeholder{color:rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76))}.chat-scope-selector .search input::placeholder{color:rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76))}.chat-scope-selector .participants-container{position:absolute;width:100%;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));top:var(--rtk-space-12, 48px);animation:0.3s slide-down ease}@keyframes slide-down{from{transform:translateY(-50px)}to{transform:translateY(0%)}}.chat-scope-selector .scope-list{margin-top:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-0, 0px);list-style-type:none;padding-left:var(--rtk-space-0, 0px);padding-right:var(--rtk-space-0, 0px);overflow:auto;max-height:375px}.chat-scope-selector .scope-list .scope{position:relative;display:flex;flex-direction:row;align-items:center;padding-left:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-3, 12px);padding-top:var(--rtk-space-4, 16px);padding-bottom:var(--rtk-space-4, 16px)}.chat-scope-selector .scope-list .scope:hover{cursor:pointer;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity))}.chat-scope-selector .scope-list .scope-special{margin-top:var(--rtk-space-4, 16px);--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-text-opacity))}.chat-scope-selector .scope-list .everyone-icon>rtk-icon{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px);color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.chat-scope-selector .scope-list .everyone-icon{display:flex;height:100%;width:100%;align-items:center;justify-content:center;margin-right:var(--rtk-space-2, 8px);height:var(--rtk-space-8, 32px);width:var(--rtk-space-8, 32px);border-radius:9999px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));font-size:12px}.unread-count.selector{position:unset;margin-left:var(--rtk-space-2, 8px)}.unread-count{position:absolute;right:var(--rtk-space-3, 12px);box-sizing:border-box;padding:var(--rtk-space-0\\.5, 2px);-webkit-user-select:none;-moz-user-select:none;user-select:none;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));font-size:12px;color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));display:flex;height:var(--rtk-space-5, 20px);min-width:var(--rtk-space-5, 20px);align-items:center;justify-content:center;border-radius:9999px;z-index:1}rtk-avatar{height:var(--rtk-space-8, 32px);width:var(--rtk-space-8, 32px)}";

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

@@ -1,10 +1,10 @@
 import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
-import { e as defaultIconPack, h as useLanguage } from './p-037e572f.js';
-import { c as canViewChat } from './p-df25c2a7.js';
-import { S as SyncWithStore } from './p-af35ac31.js';
-import { d as defineCustomElement$4 } from './p-9730c398.js';
+import { e as defaultIconPack, h as useLanguage } from './p-7fc0dc2f.js';
+import { c as canViewChat } from './p-6f340109.js';
+import { S as SyncWithStore } from './p-47c25f64.js';
+import { d as defineCustomElement$4 } from './p-6c2cfa0d.js';
 import { d as defineCustomElement$3 } from './p-3b29dda1.js';
-import { d as defineCustomElement$2 } from './p-34b580c9.js';
+import { d as defineCustomElement$2 } from './p-0a35a909.js';
 
 const rtkChatToggleCss = ":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:block}:host([data-hidden]){display:none}.unread-count{position:absolute;right:var(--rtk-space-3, 12px);box-sizing:border-box;padding:var(--rtk-space-0\\.5, 2px);-webkit-user-select:none;-moz-user-select:none;user-select:none;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));font-size:12px;color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));display:flex;height:var(--rtk-space-5, 20px);min-width:var(--rtk-space-5, 20px);align-items:center;justify-content:center;border-radius:9999px;z-index:1}.unread-count-dot{position:absolute;right:var(--rtk-space-3, 12px);z-index:10;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));border-radius:50%;display:flex;height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);align-items:center;justify-content:center}:host([variant='horizontal']) .unread-count{right:var(--rtk-space-4, 16px);top:50%;transform:translateY(-50%)}";
 const RtkChatToggleStyle0 = rtkChatToggleCss;

package/dist/components/rtk-chat.js

@@ -1,4 +1,4 @@
-import { R as RtkChat$1, d as defineCustomElement$1 } from './p-c5dfd548.js';
+import { R as RtkChat$1, d as defineCustomElement$1 } from './p-d37b8a32.js';
 
 const RtkChat = RtkChat$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-clock.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, e as Host } from './p-c3592601.js';
-import { e as defaultIconPack } from './p-037e572f.js';
-import { S as SyncWithStore } from './p-af35ac31.js';
+import { e as defaultIconPack } from './p-7fc0dc2f.js';
+import { S as SyncWithStore } from './p-47c25f64.js';
 import { d as defineCustomElement$2 } from './p-3b29dda1.js';
 
 const rtkClockCss = ":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:inline-flex;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;font-size:14px;color:rgb(var(--rtk-colors-text-1000, 255 255 255));font-variant-numeric:tabular-nums}:host([data-hidden]){display:none}:host([size='sm']){font-size:12px}rtk-icon{margin-right:var(--rtk-space-1, 4px);height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px)}:host([size='sm']) rtk-icon{height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px)}";
@@ -76,9 +76,9 @@ const RtkClock$1 = /*@__PURE__*/ proxyCustomElement(class RtkClock extends H {
     }
     render() {
         const showClock = this.startedTime !== undefined;
-        return (h(Host, { key: '23a8a2e6c14a8c1d1dd70dce26df45f1a302f085', "data-hidden": !showClock, tabIndex: 0, role: "timer", "aria-live": "off" }, this.startedTime !== undefined && [
-            h("rtk-icon", { key: '914bd75f8e3a14df602bbb58b2c2d75b26f7cb27', icon: this.iconPack.clock, "aria-hidden": true, tabIndex: -1, part: "icon" }),
-            h("span", { key: 'abb38cd4d3dbb3a6be06d1bf98b082c42551af2c', part: "text" }, this.getFormattedTime()),
+        return (h(Host, { key: '6e6b7a331666cd98cb100dca5c2869a8b5688553', "data-hidden": !showClock, tabIndex: 0, role: "timer", "aria-live": "off" }, this.startedTime !== undefined && [
+            h("rtk-icon", { key: '91cd9140d88447cd6662e08f4d2ed4c0df62858b', icon: this.iconPack.clock, "aria-hidden": true, tabIndex: -1, part: "icon" }),
+            h("span", { key: 'eba0772ccc8f0cc14c9c4dd7c11574dcc368b443', part: "text" }, this.getFormattedTime()),
         ]));
     }
     static get watchers() { return {

package/dist/components/rtk-confirmation-modal.js

@@ -1,4 +1,4 @@
-import { R as RtkConfirmationModal$1, d as defineCustomElement$1 } from './p-f46a0782.js';
+import { R as RtkConfirmationModal$1, d as defineCustomElement$1 } from './p-8d25843a.js';
 
 const RtkConfirmationModal = RtkConfirmationModal$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-controlbar-button.js

@@ -1,4 +1,4 @@
-import { R as RtkControlbarButton$1, d as defineCustomElement$1 } from './p-9730c398.js';
+import { R as RtkControlbarButton$1, d as defineCustomElement$1 } from './p-6c2cfa0d.js';
 
 const RtkControlbarButton = RtkControlbarButton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-controlbar.js

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, h, e as Host } from './p-c3592601.js';
-import { c as createDefaultConfig, e as defaultIconPack, h as useLanguage } from './p-037e572f.js';
+import { c as createDefaultConfig, e as defaultIconPack, h as useLanguage } from './p-7fc0dc2f.js';
 import './p-a83ccdbd.js';
 import { R as Render } from './p-60fdbd75.js';
-import { S as SyncWithStore } from './p-af35ac31.js';
+import { S as SyncWithStore } from './p-47c25f64.js';
 
 const rtkControlbarCss = ":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:flex;align-items:center;gap:var(--rtk-space-0\\.5, 2px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));padding-left:var(--rtk-space-4, 16px);padding-right:var(--rtk-space-4, 16px);position:relative;z-index:10}@media only screen and (max-device-height: 480px) and (orientation: landscape){:host{padding-top:var(--rtk-space-0, 0px) !important}}";
 const RtkControlbarStyle0 = rtkControlbarCss;
@@ -42,7 +42,7 @@ const RtkControlbar$1 = /*@__PURE__*/ proxyCustomElement(class RtkControlbar ext
             iconPack: this.iconPack,
             size: this.size,
         };
-        return (h(Host, { key: '65680394a70e60ccdb25b0a872ab433610e1b8b7' }, !this.disableRender && (h(Render, { key: '244f8d28e5a18483193a8a62fabd7550c06c110d', element: "rtk-controlbar", defaults: defaults, onlyChildren: true })), h("slot", { key: 'e77d170e9292b6b1c0962c196ea9232ea4372294' })));
+        return (h(Host, { key: 'f4fee1168f1b057865a0c615c563158df7f7e2fd' }, !this.disableRender && (h(Render, { key: '58945391fb15e670a385f12e3d5861b03597ed61', element: "rtk-controlbar", defaults: defaults, onlyChildren: true })), h("slot", { key: 'df55eba453868617350ec45fc0437ecb11e03597' })));
     }
     static get style() { return RtkControlbarStyle0; }
 }, [1, "rtk-controlbar", {

package/dist/components/rtk-counter.js

@@ -1,4 +1,4 @@
-import { R as RtkCounter$1, d as defineCustomElement$1 } from './p-9ea5df8f.js';
+import { R as RtkCounter$1, d as defineCustomElement$1 } from './p-b34865c7.js';
 
 const RtkCounter = RtkCounter$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-debugger-audio.js

@@ -1,4 +1,4 @@
-import { R as RtkDebuggerAudio$1, d as defineCustomElement$1 } from './p-6d49cf9f.js';
+import { R as RtkDebuggerAudio$1, d as defineCustomElement$1 } from './p-84e5b453.js';
 
 const RtkDebuggerAudio = RtkDebuggerAudio$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-debugger-screenshare.js

@@ -1,4 +1,4 @@
-import { R as RtkDebuggerScreenShare, d as defineCustomElement$1 } from './p-ed8955d0.js';
+import { R as RtkDebuggerScreenShare, d as defineCustomElement$1 } from './p-5f26bba3.js';
 
 const RtkDebuggerScreenshare = RtkDebuggerScreenShare;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-debugger-system.js

@@ -1,4 +1,4 @@
-import { R as RtkDebuggerSystem$1, d as defineCustomElement$1 } from './p-a5a40d7e.js';
+import { R as RtkDebuggerSystem$1, d as defineCustomElement$1 } from './p-102b6df8.js';
 
 const RtkDebuggerSystem = RtkDebuggerSystem$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-debugger-toggle.js

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
-import { h as useLanguage, e as defaultIconPack } from './p-037e572f.js';
-import { S as SyncWithStore } from './p-af35ac31.js';
-import { d as defineCustomElement$4 } from './p-9730c398.js';
+import { h as useLanguage, e as defaultIconPack } from './p-7fc0dc2f.js';
+import { S as SyncWithStore } from './p-47c25f64.js';
+import { d as defineCustomElement$4 } from './p-6c2cfa0d.js';
 import { d as defineCustomElement$3 } from './p-3b29dda1.js';
-import { d as defineCustomElement$2 } from './p-34b580c9.js';
+import { d as defineCustomElement$2 } from './p-0a35a909.js';
 
 const rtkDebuggerToggleCss = ":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:block}";
 const RtkDebuggerToggleStyle0 = rtkDebuggerToggleCss;
@@ -39,7 +39,7 @@ const RtkDebuggerToggle$1 = /*@__PURE__*/ proxyCustomElement(class RtkDebuggerTo
         });
     }
     render() {
-        return (h(Host, { key: '5675d28a2da23df6c54e79827b0adf37ef128cd9', title: this.t('Troubleshooting') }, h("rtk-controlbar-button", { key: 'b8e16bbfb77fe9c4d50e872ed4eaecf351816a98', size: this.size, iconPack: this.iconPack, onClick: () => this.toggleDebugger(), icon: this.iconPack.debug, label: this.t('Troubleshooting'), variant: this.variant })));
+        return (h(Host, { key: 'cc9ec6cade76093abba3a48502d12a82868a875a', title: this.t('Troubleshooting') }, h("rtk-controlbar-button", { key: '6b8bcf2e363dfcdfb8e0f90c8602d95cdf338544', size: this.size, iconPack: this.iconPack, onClick: () => this.toggleDebugger(), icon: this.iconPack.debug, label: this.t('Troubleshooting'), variant: this.variant })));
     }
     static get style() { return RtkDebuggerToggleStyle0; }
 }, [1, "rtk-debugger-toggle", {

package/dist/components/rtk-debugger-video.js

@@ -1,4 +1,4 @@
-import { R as RtkDebuggerVideo$1, d as defineCustomElement$1 } from './p-dc4b6fc4.js';
+import { R as RtkDebuggerVideo$1, d as defineCustomElement$1 } from './p-9e87b2c9.js';
 
 const RtkDebuggerVideo = RtkDebuggerVideo$1;
 const defineCustomElement = defineCustomElement$1;