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

package/dist/components/{p-c5dfd548.js → p-d37b8a32.js}

@@ -1,60 +1,30 @@
-import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, e as Host } from './p-c3592601.js';
-import { c as createDefaultConfig, e as defaultIconPack, h as useLanguage, K as FlagsmithFeatureFlags } from './p-037e572f.js';
-import { h as handleFilesDataTransfer, g as generateChatGroupKey, T as TEMPORARY_CHANNEL_PREFIX, i as isDirectMessageChannel, d as alphabeticalSorter, f as getDMComparator, s as stripOutReplyBlock, j as parseMessageForTarget } from './p-0abe4b8a.js';
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
+import { c as createDefaultConfig, e as defaultIconPack, h as useLanguage, K as FlagsmithFeatureFlags } from './p-7fc0dc2f.js';
+import { h as handleFilesDataTransfer, g as generateChatGroupKey, T as TEMPORARY_CHANNEL_PREFIX, i as isDirectMessageChannel, d as alphabeticalSorter, f as getDMComparator, j as parseMessageForTarget } from './p-dab9d3d6.js';
 import { c as chatUnreadTimestamps } from './p-a83ccdbd.js';
-import { S as SyncWithStore } from './p-af35ac31.js';
-import { d as defineCustomElement$Q } from './p-6fe2233b.js';
-import { d as defineCustomElement$P } from './p-e2e22bf8.js';
-import { d as defineCustomElement$O } from './p-aba9b612.js';
-import { d as defineCustomElement$N } from './p-fb46d041.js';
-import { d as defineCustomElement$M } from './p-511ed3f8.js';
-import { d as defineCustomElement$L } from './p-1391bef0.js';
-import { d as defineCustomElement$K } from './p-c9a7cf06.js';
-import { d as defineCustomElement$J } from './p-840ef7fe.js';
-import { d as defineCustomElement$I } from './p-0c11d195.js';
-import { d as defineCustomElement$H } from './p-22a734a8.js';
-import { d as defineCustomElement$G } from './p-3fe1bb0d.js';
-import { d as defineCustomElement$F } from './p-1d29b7c3.js';
-import { d as defineCustomElement$E } from './p-0e07ea51.js';
-import { d as defineCustomElement$D } from './p-04aaec79.js';
-import { d as defineCustomElement$C } from './p-6a47e2ee.js';
-import { d as defineCustomElement$B } from './p-f46a0782.js';
-import { d as defineCustomElement$A } from './p-9ea5df8f.js';
-import { d as defineCustomElement$z } from './p-4edd666b.js';
-import { d as defineCustomElement$y } from './p-6d49cf9f.js';
-import { d as defineCustomElement$x } from './p-ed8955d0.js';
-import { d as defineCustomElement$w } from './p-a5a40d7e.js';
-import { d as defineCustomElement$v } from './p-dc4b6fc4.js';
-import { d as defineCustomElement$u } from './p-40c5ca62.js';
-import { d as defineCustomElement$t } from './p-3042f998.js';
-import { d as defineCustomElement$s } from './p-00ebd1dc.js';
-import { d as defineCustomElement$r } from './p-fb427023.js';
-import { d as defineCustomElement$q } from './p-1a60f5b0.js';
-import { d as defineCustomElement$p } from './p-01a50790.js';
-import { d as defineCustomElement$o } from './p-f9faeffc.js';
-import { d as defineCustomElement$n } from './p-3df2211d.js';
-import { d as defineCustomElement$m } from './p-3b29dda1.js';
-import { d as defineCustomElement$l } from './p-a9d5d165.js';
-import { d as defineCustomElement$k } from './p-49967150.js';
-import { d as defineCustomElement$j } from './p-cc5ecd67.js';
-import { d as defineCustomElement$i } from './p-c663f9b1.js';
-import { d as defineCustomElement$h } from './p-03fe0979.js';
-import { d as defineCustomElement$g } from './p-f5f0b499.js';
-import { d as defineCustomElement$f } from './p-54dba22f.js';
-import { d as defineCustomElement$e } from './p-1986022b.js';
-import { d as defineCustomElement$d } from './p-26055088.js';
-import { d as defineCustomElement$c } from './p-c3582bf3.js';
-import { d as defineCustomElement$b } from './p-0a7f6a8a.js';
-import { d as defineCustomElement$a } from './p-91a9efcf.js';
-import { d as defineCustomElement$9 } from './p-7a336667.js';
-import { d as defineCustomElement$8 } from './p-d2c3870a.js';
-import { d as defineCustomElement$7 } from './p-4c8cff29.js';
-import { d as defineCustomElement$6 } from './p-17867774.js';
-import { d as defineCustomElement$5 } from './p-34b580c9.js';
-import { d as defineCustomElement$4 } from './p-bccc21f8.js';
-import { d as defineCustomElement$3 } from './p-731ee854.js';
-import { d as defineCustomElement$2 } from './p-93e1439e.js';
-import { d as defineCustomElement$1 } from './p-03bdc4c0.js';
+import { S as SyncWithStore } from './p-47c25f64.js';
+import { d as defineCustomElement$m } from './p-f4e75ea9.js';
+import { d as defineCustomElement$l } from './p-1391bef0.js';
+import { d as defineCustomElement$k } from './p-d4e2ac64.js';
+import { d as defineCustomElement$j } from './p-f47894a6.js';
+import { d as defineCustomElement$i } from './p-94e867c2.js';
+import { d as defineCustomElement$h } from './p-65cd2fe3.js';
+import { d as defineCustomElement$g } from './p-20290b0b.js';
+import { d as defineCustomElement$f } from './p-3da4880c.js';
+import { d as defineCustomElement$e } from './p-0b4e526c.js';
+import { d as defineCustomElement$d } from './p-e675729a.js';
+import { d as defineCustomElement$c } from './p-3b29dda1.js';
+import { d as defineCustomElement$b } from './p-63ef7ea4.js';
+import { d as defineCustomElement$a } from './p-88bef213.js';
+import { d as defineCustomElement$9 } from './p-f8f5cb31.js';
+import { d as defineCustomElement$8 } from './p-a6296b02.js';
+import { d as defineCustomElement$7 } from './p-080acf18.js';
+import { d as defineCustomElement$6 } from './p-fe911889.js';
+import { d as defineCustomElement$5 } from './p-a9540d93.js';
+import { d as defineCustomElement$4 } from './p-0a35a909.js';
+import { d as defineCustomElement$3 } from './p-d3de8b85.js';
+import { d as defineCustomElement$2 } from './p-a94b2e67.js';
+import { d as defineCustomElement$1 } from './p-fa8f6b4a.js';
 
 const rtkChatCss = ":host {\n  line-height: initial;\n  font-family: var(--rtk-font-family, sans-serif);\n\n  font-feature-settings: normal;\n  font-variation-settings: normal;\n}\n\np {\n  margin: var(--rtk-space-0, 0px);\n  padding: var(--rtk-space-0, 0px);\n}\n\n.scrollbar {\n  /* For Firefox */\n  scrollbar-width: thin;\n  scrollbar-color: var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n    var(--rtk-scrollbar-background, transparent);\n}\n\n/* For WebKit */\n.scrollbar::-webkit-scrollbar {\n  height: var(--rtk-space-1\\.5, 6px);\n  width: var(--rtk-space-1\\.5, 6px);\n  border-radius: 9999px;\n  background-color: var(--rtk-scrollbar-background, transparent);\n}\n\n.scrollbar::-webkit-scrollbar-thumb {\n  border-radius: 9999px;\n  background-color: var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)));\n}\n\n\n:host {\n  display: flex;\n  height: 100%;\n  width: 100%;\n  flex-direction: column;\n  font-size: 14px;\n  position: relative;\n  color: rgb(var(--rtk-colors-text-1000, 255 255 255));\n}\n\nh3 {\n  margin: var(--rtk-space-0, 0px);\n  display: flex;\n  height: var(--rtk-space-12, 48px);\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n  font-weight: 400;\n  color: rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));\n  text-align: center;\n}\n\n#dropzone {\n  position: absolute;\n  top: var(--rtk-space-0, 0px);\n  right: var(--rtk-space-0, 0px);\n  bottom: var(--rtk-space-0, 0px);\n  left: var(--rtk-space-0, 0px);\n  z-index: 10;\n  display: none;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));\n  color: rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64));\n}\n\n#dropzone.active {\n  display: flex;\n  animation: 0.2s slide-up ease-in;\n}\n\nrtk-chat-messages-ui,\nrtk-chat-messages-ui-paginated {\n  flex: 1 0 0;\n}\n\nrtk-chat-composer-view {\n  margin: var(--rtk-space-2, 8px);\n}\n\n.chat-container {\n  display: flex;\n  height: 100%;\n  width: 100%;\n  flex-direction: row;\n  container-type: size;\n  container-name: chatcontainer;\n}\n\n@container chatcontainer (height < 360px) {\n  rtk-channel-selector-view {\n    height: var(--rtk-space-8, 32px);\n    min-height: 24px;\n  }\n}\n\n.chat {\n  display: flex;\n  flex: 1 1 0%;\n  flex-direction: column;\n}\n\n.banner {\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n\n.banner .welcome-new-channel {\n  width: var(--rtk-space-48, 192px);\n}\n\n.banner .create-channel-illustration {\n  height: var(--rtk-space-40, 160px);\n  width: var(--rtk-space-40, 160px);\n}\n\n.channel-selector-header {\n  box-sizing: border-box;\n  height: var(--rtk-space-16, 64px);\n  padding: var(--rtk-space-4, 16px);\n  display: flex;\n  justify-content: space-between;\n  border-bottom: var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-700, 44 44 44));\n}\n\n.channel-selector-header .channel-create-btn {\n  width: var(--rtk-space-8, 32px);\n  justify-content: center;\n}\n\n.channel-selector-header .channel-create-btn:hover {\n  --tw-text-opacity: 1;\n  color: rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-text-opacity));\n}\n\n.view-chats-btn {\n  margin-top: var(--rtk-space-4, 16px);\n}\n\n.selector-container {\n  z-index: 50;\n  width: 100%;\n  max-width: var(--rtk-space-80, 320px);\n  border-right: var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60));\n}\n\n.selector-container.hide {\n  display: none;\n}\n\n.mobile-close-btn {\n  display: none;\n}\n\n.selector-container.mobile {\n  height: 100%;\n  width: 100%;\n  max-width: 100%;\n  position: absolute;\n  top: var(--rtk-space-0, 0px);\n  right: var(--rtk-space-0, 0px);\n  bottom: var(--rtk-space-0, 0px);\n  left: var(--rtk-space-0, 0px);\n  background-color: rgba(var(--rtk-colors-background-1000, 8 8 8) / 0.6);\n  display: flex;\n}\n\n.selector-container.mobile rtk-channel-selector-view {\n  max-width: var(--rtk-space-96, 384px);\n    animation: 0.3s swipe-in;\n}\n\n.selector-container.mobile .mobile-close-btn {\n  margin-top: var(--rtk-space-4, 16px);\n  margin-bottom: var(--rtk-space-4, 16px);\n  margin-left: var(--rtk-space-6, 24px);\n  margin-right: var(--rtk-space-6, 24px);\n  display: block;\n}\n\n.pinned-messages-header {\n  display: flex;\n  align-items: center;\n  gap: var(--rtk-space-2, 8px);\n  padding: var(--rtk-space-2, 8px);\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));\n  font-size: 12px;\n  cursor: pointer;\n}\n\n.pinned-messages-header rtk-icon {\n  height: var(--rtk-space-3, 12px);\n  width: var(--rtk-space-3, 12px);\n}\n\n.pinned-messages-header:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));\n}\n\n.pinned-messages-header.active {\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));\n}\n\n@keyframes swipe-in {\n  from {\n    transform: translateX(-100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n";
 const RtkChatStyle0 = rtkChatCss;
@@ -188,11 +158,6 @@ const RtkChat = /*@__PURE__*/ proxyCustomElement(class RtkChat extends H {
                 this.chatRecipientId = this.selectedGroup = 'everyone';
             }
         };
-        this.usePaginatedChat = () => {
-            if (this.isGroupCall && this.showPinnedMessages)
-                return false;
-            return this.selectedGroup === 'everyone';
-        };
         this.updateUnreadCountGroups = (obj) => {
             this.unreadCountGroups = Object.assign(Object.assign({}, this.unreadCountGroups), obj);
         };
@@ -316,17 +281,7 @@ const RtkChat = /*@__PURE__*/ proxyCustomElement(class RtkChat extends H {
         };
         this.onNewMessageHandler = async (e) => {
             const message = e.detail;
-            if (this.isChatViewType) {
-                await this.meeting.chat.sendMessageToChannel(message, this.selectedChannelId, this.replyMessage
-                    ? {
-                        replyTo: this.replyMessage,
-                    }
-                    : {});
-                this.replyMessage = null;
-            }
-            else {
-                this.meeting.chat.sendMessage(message, this.getRecipientPeerIds());
-            }
+            this.meeting.chat.sendMessage(message, this.getRecipientPeerIds());
         };
         this.onEditMessageHandler = async (e) => {
             var _a, _b;
@@ -336,15 +291,6 @@ const RtkChat = /*@__PURE__*/ proxyCustomElement(class RtkChat extends H {
         this.onEditCancel = () => {
             this.editingMessage = null;
         };
-        this.onSearchHandler = async (e) => {
-            this.searchQuery = e.detail;
-        };
-        this.onSearchDismissed = () => {
-            this.searchQuery = '';
-        };
-        this.onChannelCreateClicked = () => {
-            this.stateUpdate.emit({ activeChannelCreator: true });
-        };
         this.onPinMessage = (event) => {
             const message = event.detail;
             if (message.pinned) {
@@ -358,23 +304,6 @@ const RtkChat = /*@__PURE__*/ proxyCustomElement(class RtkChat extends H {
             const message = event.detail;
             this.meeting.chat.deleteMessage(message.id);
         };
-        this.getChannelItems = () => {
-            return this.channels.map((channel) => {
-                const result = {
-                    id: channel.id,
-                    name: channel.displayName,
-                    avatarUrl: channel.displayPictureUrl,
-                };
-                if (channel.latestMessage) {
-                    result.latestMessage =
-                        channel.latestMessage.type === 'text'
-                            ? stripOutReplyBlock(channel.latestMessage.message)
-                            : '';
-                    result.latestMessageTime = channel.latestMessage.time;
-                }
-                return result;
-            });
-        };
         this.getPrivateChatRecipients = () => {
             const participants = this.getFilteredParticipants().map((participant) => {
                 const key = generateChatGroupKey([participant.userId, this.meeting.self.userId]);
@@ -449,31 +378,6 @@ const RtkChat = /*@__PURE__*/ proxyCustomElement(class RtkChat extends H {
             this.canPinMessages =
                 ((_e = meeting === null || meeting === void 0 ? void 0 : meeting.__internals__) === null || _e === void 0 ? void 0 : _e.features.hasFeature(FlagsmithFeatureFlags.PINNED_MESSAGES)) &&
                     meeting.self.permissions.pinParticipant;
-            this.isGroupCall = meeting.meta.viewType === 'GROUP_CALL';
-            this.isChatViewType = meeting.meta.viewType === 'CHAT';
-            if (this.isChatViewType) {
-                this.onChannelCreateOrUpdate();
-                const validChannels = this.channels.filter((channel) => !channel.id.includes(TEMPORARY_CHANNEL_PREFIX));
-                if (validChannels.length) {
-                    this.selectedChannelId = this.channels[0].id;
-                }
-                if (this.resizeObserver) {
-                    this.resizeObserver.disconnect();
-                }
-                this.resizeObserver = new ResizeObserver((entries) => {
-                    for (const entry of entries) {
-                        if (entry.contentBoxSize[0].inlineSize < 758) {
-                            this.selectorState = 'hide';
-                        }
-                        else {
-                            this.selectorState = 'desktop';
-                        }
-                    }
-                });
-                if (this.isChatViewType) {
-                    this.resizeObserver.observe(this.host);
-                }
-            }
             this.initializeChatGroups();
             // shallow copy to trigger render
             this.chatGroups = Object.assign({}, this.chatGroups);
@@ -484,12 +388,6 @@ const RtkChat = /*@__PURE__*/ proxyCustomElement(class RtkChat extends H {
                 meeting.participants.joined.addListener('participantJoined', this.onParticipantUpdate);
                 meeting.participants.joined.addListener('participantLeft', this.onParticipantUpdate);
             }
-            if (this.isChatViewType) {
-                meeting.chat.addListener('channelCreate', this.onChannelCreateOrUpdate);
-                meeting.chat.addListener('channelUpdate', this.onChannelCreateOrUpdate);
-                meeting.chat.addListener('channelMessageUpdate', this.onChannelCreateOrUpdate);
-                meeting.participants.all.addListener('participantsUpdate', this.onChannelCreateOrUpdate);
-            }
         }
     }
     chatGroupsChanged(chatGroups) {
@@ -565,17 +463,8 @@ const RtkChat = /*@__PURE__*/ proxyCustomElement(class RtkChat extends H {
     channelSwitchListener(e) {
         this.onChannelChanged(e);
     }
-    renderHeadlessComponents() {
-        return (h(Fragment, null, h("rtk-dialog-manager", { meeting: this.meeting }), h("rtk-notifications", { meeting: this.meeting })));
-    }
     renderComposerUI() {
         var _a, _b, _c;
-        if (this.isChatViewType && this.channels.length === 0)
-            return null;
-        if (this.isChatViewType && this.searchQuery !== '')
-            return null;
-        if (this.isChatViewType && !this.selectedChannelId)
-            return null;
         if (this.chatRecipientId === 'everyone') {
             if (!this.canSendTextMessage && !this.canSendFiles)
                 return null;
@@ -589,32 +478,16 @@ const RtkChat = /*@__PURE__*/ proxyCustomElement(class RtkChat extends H {
         const quotedMessage = this.replyMessage ? this.replyMessage.message : '';
         return (h("rtk-chat-composer-view", Object.assign({ message: message, storageKey: (_a = this.selectedChannelId) !== null && _a !== void 0 ? _a : `draft-${this.selectedChannelId}`, quotedMessage: quotedMessage, isEditing: !!this.editingMessage, canSendTextMessage: this.isTextMessagingAllowed(), canSendFiles: this.isFileMessagingAllowed(), disableEmojiPicker: !!((_c = (_b = this.meeting) === null || _b === void 0 ? void 0 : _b.__internals__) === null || _c === void 0 ? void 0 : _c.features.hasFeature(FlagsmithFeatureFlags.DISABLE_EMOJI_PICKER)), maxLength: this.meeting.chat.maxTextLimit, rateLimits: this.meeting.chat.rateLimits, inputTextPlaceholder: this.t('chat.message_placeholder'), onNewMessage: this.onNewMessageHandler, onEditMessage: this.onEditMessageHandler, onEditCancel: this.onEditCancel, onQuotedMessageDismiss: this.onQuotedMessageDismiss }, uiProps), h("slot", { name: "chat-addon", slot: "chat-addon" })));
     }
-    renderFullChat() {
-        if (this.creatingChannel) {
-            return (h("div", { class: "banner" }, h("rtk-spinner", { size: "lg" })));
-        }
-        if (this.channels.length === 0 || !this.selectedChannelId) {
-            return (h("div", { class: "banner" }, h("rtk-icon", { icon: this.iconPack.create_channel_illustration, slot: "start", class: 'create-channel-illustration' }), h("rtk-button", { kind: "wide", variant: "primary", size: "md", onClick: this.onChannelCreateClicked, class: "welcome-new-channel" }, h("rtk-icon", { icon: this.iconPack.add, slot: "start" }), h("span", null, this.t('chat.new_channel'))), (this.selectorState === 'mobile' || this.selectorState === 'hide') && (h("rtk-button", { kind: "button", variant: "secondary", size: "md", class: "view-chats-btn", onClick: () => {
-                    this.selectorState = 'mobile';
-                } }, h("rtk-icon", { icon: this.iconPack.chat, slot: "start" }), h("span", null, this.t('chat.view_chats'))))));
-        }
-        const selectedChannel = this.channels.find((channel) => channel.id === this.selectedChannelId);
-        return (h("div", { class: "chat" }, h("rtk-channel-header", { slot: "header", meeting: this.meeting, channel: selectedChannel, onSearch: this.onSearchHandler, onSearchDismissed: this.onSearchDismissed, showBackButton: this.selectorState === 'mobile' || this.selectorState === 'hide', onBack: () => {
-                this.selectorState = 'mobile';
-            } }), this.searchQuery !== '' && (h("rtk-chat-search-results", { meeting: this.meeting, query: this.searchQuery, channelId: this.selectedChannelId })), this.searchQuery === '' && (h("rtk-chat-messages-ui-paginated", { meeting: this.meeting, size: this.size, iconPack: this.iconPack, t: this.t, selectedChannelId: this.selectedChannelId, selectedChannel: selectedChannel }))));
-    }
     render() {
-        var _a, _b;
+        var _a;
         if (!this.meeting) {
             return null;
         }
-        const uiProps = { iconPack: this.iconPack, t: this.t, size: this.size };
-        const selfUserId = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.self.userId;
         let chatMessages = this.chatGroups[this.selectedGroup] || [];
         if (this.showPinnedMessages && this.meeting.chat.pinned.length !== 0) {
             chatMessages = chatMessages.filter((chat) => chat.type === 'chat' && chat.message.pinned);
         }
-        return (h(Host, null, this.isChatViewType && this.renderHeadlessComponents(), h("div", { class: "chat-container" }, this.isChatViewType && (h("div", { class: { 'selector-container': true, [this.selectorState]: true } }, h("rtk-channel-selector-view", { channels: this.getChannelItems(), selectedChannelId: this.selectedChannelId, onChannelChange: this.onChannelChanged, t: this.t }, h("div", { class: "channel-selector-header", slot: "header" }, h("rtk-logo", { meeting: this.meeting, config: this.config, t: this.t }), h("rtk-tooltip", { label: this.t('chat.new_channel') }, h("rtk-button", { kind: "button", variant: "ghost", size: "md", onClick: this.onChannelCreateClicked, class: "channel-create-btn" }, h("rtk-icon", { icon: this.iconPack.add }))))), h("rtk-button", { kind: "icon", variant: "ghost", class: "mobile-close-btn", onClick: () => (this.selectorState = 'hide') }, h("rtk-icon", { icon: this.iconPack.dismiss })))), h("div", { class: "chat" }, this.isFileMessagingAllowed() && (h("div", { id: "dropzone", class: { active: this.dropzoneActivated }, part: "dropzone" }, h("rtk-icon", { icon: this.iconPack.attach }), h("p", null, this.t('chat.send_attachment')))), this.renderPinnedMessagesHeader(), this.isPrivateChatSupported() && (h("rtk-channel-selector-view", { channels: this.getPrivateChatRecipients(), selectedChannelId: ((_b = this.selectedParticipant) === null || _b === void 0 ? void 0 : _b.userId) || 'everyone', onChannelChange: this.updateRecipients, t: this.t, viewAs: "dropdown" })), this.isChatViewType ? (this.renderFullChat()) : this.usePaginatedChat() ? (h("rtk-chat-messages-ui-paginated", { meeting: this.meeting, onPinMessage: this.onPinMessage, onDeleteMessage: this.onDeleteMessage, size: this.size, iconPack: this.iconPack, t: this.t })) : (h("rtk-chat-messages-ui", Object.assign({ messages: chatMessages, selfUserId: selfUserId, selectedGroup: this.selectedGroup, onPinMessage: this.onPinMessage, canPinMessages: this.canPinMessages }, uiProps))), this.renderComposerUI()))));
+        return (h(Host, null, h("div", { class: "chat-container" }, h("div", { class: "chat" }, this.isFileMessagingAllowed() && (h("div", { id: "dropzone", class: { active: this.dropzoneActivated }, part: "dropzone" }, h("rtk-icon", { icon: this.iconPack.attach }), h("p", null, this.t('chat.send_attachment')))), this.renderPinnedMessagesHeader(), this.isPrivateChatSupported() && (h("rtk-channel-selector-view", { channels: this.getPrivateChatRecipients(), selectedChannelId: ((_a = this.selectedParticipant) === null || _a === void 0 ? void 0 : _a.userId) || 'everyone', onChannelChange: this.updateRecipients, t: this.t, viewAs: "dropdown" })), h("rtk-chat-messages-ui-paginated", { meeting: this.meeting, onPinMessage: this.onPinMessage, onDeleteMessage: this.onDeleteMessage, size: this.size, iconPack: this.iconPack, t: this.t }), this.renderComposerUI()))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -678,7 +551,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["rtk-chat", "rtk-avatar", "rtk-breakout-room-manager", "rtk-breakout-room-participants", "rtk-breakout-rooms-manager", "rtk-broadcast-message-modal", "rtk-button", "rtk-channel-creator", "rtk-channel-details", "rtk-channel-header", "rtk-channel-selector-view", "rtk-chat-composer-view", "rtk-chat-message", "rtk-chat-messages-ui", "rtk-chat-messages-ui-paginated", "rtk-chat-search-results", "rtk-confirmation-modal", "rtk-counter", "rtk-debugger", "rtk-debugger-audio", "rtk-debugger-screenshare", "rtk-debugger-system", "rtk-debugger-video", "rtk-dialog", "rtk-dialog-manager", "rtk-draft-attachment-view", "rtk-emoji-picker", "rtk-emoji-picker-button", "rtk-file-message", "rtk-file-message-view", "rtk-file-picker-button", "rtk-icon", "rtk-image-message", "rtk-image-message-view", "rtk-join-stage", "rtk-leave-meeting", "rtk-logo", "rtk-markdown-view", "rtk-menu", "rtk-menu-item", "rtk-menu-list", "rtk-message-view", "rtk-mute-all-confirmation", "rtk-notification", "rtk-notifications", "rtk-overlay-modal", "rtk-paginated-list", "rtk-permissions-message", "rtk-spinner", "rtk-text-composer-view", "rtk-text-message", "rtk-text-message-view", "rtk-tooltip"];
+    const components = ["rtk-chat", "rtk-avatar", "rtk-button", "rtk-channel-selector-view", "rtk-chat-composer-view", "rtk-chat-messages-ui-paginated", "rtk-draft-attachment-view", "rtk-emoji-picker", "rtk-emoji-picker-button", "rtk-file-message-view", "rtk-file-picker-button", "rtk-icon", "rtk-image-message-view", "rtk-markdown-view", "rtk-menu", "rtk-menu-item", "rtk-menu-list", "rtk-message-view", "rtk-paginated-list", "rtk-spinner", "rtk-text-composer-view", "rtk-text-message-view", "rtk-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "rtk-chat":
             if (!customElements.get(tagName)) {
@@ -686,251 +559,101 @@ function defineCustomElement() {
             }
             break;
         case "rtk-avatar":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$Q();
-            }
-            break;
-        case "rtk-breakout-room-manager":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$P();
-            }
-            break;
-        case "rtk-breakout-room-participants":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$O();
-            }
-            break;
-        case "rtk-breakout-rooms-manager":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$N();
-            }
-            break;
-        case "rtk-broadcast-message-modal":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$M();
-            }
-            break;
-        case "rtk-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$L();
-            }
-            break;
-        case "rtk-channel-creator":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$K();
-            }
-            break;
-        case "rtk-channel-details":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$J();
-            }
-            break;
-        case "rtk-channel-header":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$I();
-            }
-            break;
-        case "rtk-channel-selector-view":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$H();
-            }
-            break;
-        case "rtk-chat-composer-view":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$G();
-            }
-            break;
-        case "rtk-chat-message":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$F();
-            }
-            break;
-        case "rtk-chat-messages-ui":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$E();
-            }
-            break;
-        case "rtk-chat-messages-ui-paginated":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$D();
-            }
-            break;
-        case "rtk-chat-search-results":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$C();
-            }
-            break;
-        case "rtk-confirmation-modal":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$B();
-            }
-            break;
-        case "rtk-counter":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$A();
-            }
-            break;
-        case "rtk-debugger":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$z();
-            }
-            break;
-        case "rtk-debugger-audio":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$y();
-            }
-            break;
-        case "rtk-debugger-screenshare":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$x();
-            }
-            break;
-        case "rtk-debugger-system":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$w();
-            }
-            break;
-        case "rtk-debugger-video":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$v();
-            }
-            break;
-        case "rtk-dialog":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$u();
-            }
-            break;
-        case "rtk-dialog-manager":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$t();
-            }
-            break;
-        case "rtk-draft-attachment-view":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$s();
-            }
-            break;
-        case "rtk-emoji-picker":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$r();
-            }
-            break;
-        case "rtk-emoji-picker-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$q();
-            }
-            break;
-        case "rtk-file-message":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$p();
-            }
-            break;
-        case "rtk-file-message-view":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$o();
-            }
-            break;
-        case "rtk-file-picker-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$n();
-            }
-            break;
-        case "rtk-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$m();
             }
             break;
-        case "rtk-image-message":
+        case "rtk-button":
             if (!customElements.get(tagName)) {
                 defineCustomElement$l();
             }
             break;
-        case "rtk-image-message-view":
+        case "rtk-channel-selector-view":
             if (!customElements.get(tagName)) {
                 defineCustomElement$k();
             }
             break;
-        case "rtk-join-stage":
+        case "rtk-chat-composer-view":
             if (!customElements.get(tagName)) {
                 defineCustomElement$j();
             }
             break;
-        case "rtk-leave-meeting":
+        case "rtk-chat-messages-ui-paginated":
             if (!customElements.get(tagName)) {
                 defineCustomElement$i();
             }
             break;
-        case "rtk-logo":
+        case "rtk-draft-attachment-view":
             if (!customElements.get(tagName)) {
                 defineCustomElement$h();
             }
             break;
-        case "rtk-markdown-view":
+        case "rtk-emoji-picker":
             if (!customElements.get(tagName)) {
                 defineCustomElement$g();
             }
             break;
-        case "rtk-menu":
+        case "rtk-emoji-picker-button":
             if (!customElements.get(tagName)) {
                 defineCustomElement$f();
             }
             break;
-        case "rtk-menu-item":
+        case "rtk-file-message-view":
             if (!customElements.get(tagName)) {
                 defineCustomElement$e();
             }
             break;
-        case "rtk-menu-list":
+        case "rtk-file-picker-button":
             if (!customElements.get(tagName)) {
                 defineCustomElement$d();
             }
             break;
-        case "rtk-message-view":
+        case "rtk-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$c();
             }
             break;
-        case "rtk-mute-all-confirmation":
+        case "rtk-image-message-view":
             if (!customElements.get(tagName)) {
                 defineCustomElement$b();
             }
             break;
-        case "rtk-notification":
+        case "rtk-markdown-view":
             if (!customElements.get(tagName)) {
                 defineCustomElement$a();
             }
             break;
-        case "rtk-notifications":
+        case "rtk-menu":
             if (!customElements.get(tagName)) {
                 defineCustomElement$9();
             }
             break;
-        case "rtk-overlay-modal":
+        case "rtk-menu-item":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }
             break;
-        case "rtk-paginated-list":
+        case "rtk-menu-list":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "rtk-permissions-message":
+        case "rtk-message-view":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }
             break;
-        case "rtk-spinner":
+        case "rtk-paginated-list":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
-        case "rtk-text-composer-view":
+        case "rtk-spinner":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
-        case "rtk-text-message":
+        case "rtk-text-composer-view":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }

package/dist/components/{p-bccc21f8.js → p-d3de8b85.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, d as createEvent, h } from './p-c3592601.js';
-import { S as SyncWithStore } from './p-af35ac31.js';
-import { e as defaultIconPack, h as useLanguage } from './p-037e572f.js';
+import { S as SyncWithStore } from './p-47c25f64.js';
+import { e as defaultIconPack, h as useLanguage } from './p-7fc0dc2f.js';
 import './p-a83ccdbd.js';
 import { d as defineCustomElement$1 } from './p-3b29dda1.js';
 
@@ -76,7 +76,7 @@ const RtkTextComposerView = /*@__PURE__*/ proxyCustomElement(class RtkTextCompos
         }
     }
     render() {
-        return (h("div", { key: '16cc81323e6fb16e4d4a6622895ed7edc80f2db9', class: "chat-input", part: "chat-input-container" }, this.maxLengthBreached > 0 && (h("div", { key: '05fde7b4f3e084e464fcc3276f0ce1e0d909e6a7', class: 'text-error ' + (this.maxLengthBreached === this.maxLength ? 'breached' : '') }, h("rtk-icon", { key: 'd4101bf8933a9873605e88fbb617d8ae38bb56a1', id: "warning-indicator", icon: this.iconPack.warning, part: "warning-indicator" }), ' ', this.maxLengthBreached, " / ", this.maxLength, " ", this.t('chat.max_limit_warning'))), this.rateLimitBreached && (h("div", { key: '779a1c58114de2cce65a13ee3ea8cb308f7cd68a', class: 'text-error breached' }, h("rtk-icon", { key: '9dedd14d826b1437f434d92c985659ecc3bc1842', id: "warning-indicator", icon: this.iconPack.warning, part: "warning-indicator" }), ' ', this.t('chat.rate_limit_error'))), h("textarea", { key: 'f45f8f812ad668a86d2d0a22926bf437be44cbc9', ref: (el) => (this.$textArea = el), placeholder: this.placeholder, disabled: this.disabled, onInput: this.onInputHandler, onKeyDown: this.keyDownHandler, part: "chat-input", value: this.value })));
+        return (h("div", { key: '1b51f7d6ffbe8069172a5dc51f291988000c898a', class: "chat-input", part: "chat-input-container" }, this.maxLengthBreached > 0 && (h("div", { key: 'fe75f8333a7643458d5077fec968464327e65ca3', class: 'text-error ' + (this.maxLengthBreached === this.maxLength ? 'breached' : '') }, h("rtk-icon", { key: '669066f9983f226d96baeebdfa10ffb1fc8001b7', id: "warning-indicator", icon: this.iconPack.warning, part: "warning-indicator" }), ' ', this.maxLengthBreached, " / ", this.maxLength, " ", this.t('chat.max_limit_warning'))), this.rateLimitBreached && (h("div", { key: '0024d3b4e8d5eda5f94ff2fe9d8aa18cfb9297a7', class: 'text-error breached' }, h("rtk-icon", { key: 'bc3a0417a81de43b67595cde79dfe7aba21a6601', id: "warning-indicator", icon: this.iconPack.warning, part: "warning-indicator" }), ' ', this.t('chat.rate_limit_error'))), h("textarea", { key: 'c6077b3128eeea4be2358ab557062df322a8ffa9', ref: (el) => (this.$textArea = el), placeholder: this.placeholder, disabled: this.disabled, onInput: this.onInputHandler, onKeyDown: this.keyDownHandler, part: "chat-input", value: this.value })));
     }
     static get style() { return RtkTextComposerViewStyle0; }
 }, [1, "rtk-text-composer-view", {

package/dist/components/{p-22a734a8.js → p-d4e2ac64.js}

@@ -1,12 +1,12 @@
 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 { e as defaultIconPack, h as useLanguage } from './p-7fc0dc2f.js';
 import './p-a83ccdbd.js';
-import { S as SyncWithStore } from './p-af35ac31.js';
-import { d as defineCustomElement$5 } from './p-6fe2233b.js';
+import { S as SyncWithStore } from './p-47c25f64.js';
+import { d as defineCustomElement$5 } from './p-f4e75ea9.js';
 import { d as defineCustomElement$4 } from './p-3b29dda1.js';
-import { d as defineCustomElement$3 } from './p-f5f0b499.js';
-import { d as defineCustomElement$2 } from './p-34b580c9.js';
-import { d as defineCustomElement$1 } from './p-93e1439e.js';
+import { d as defineCustomElement$3 } from './p-88bef213.js';
+import { d as defineCustomElement$2 } from './p-0a35a909.js';
+import { d as defineCustomElement$1 } from './p-a94b2e67.js';
 import { d as debounce } from './p-1dca17d1.js';
 
 const rtkChannelSelectorViewCss = ".scrollbar {\n  /* For Firefox */\n  scrollbar-width: thin;\n  scrollbar-color: var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n    var(--rtk-scrollbar-background, transparent);\n}\n\n/* For WebKit */\n.scrollbar::-webkit-scrollbar {\n  height: var(--rtk-space-1\\.5, 6px);\n  width: var(--rtk-space-1\\.5, 6px);\n  border-radius: 9999px;\n  background-color: var(--rtk-scrollbar-background, transparent);\n}\n\n.scrollbar::-webkit-scrollbar-thumb {\n  border-radius: 9999px;\n  background-color: var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)));\n}\n\n\n:host {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));\n  position: relative;\n  z-index: 10;\n  height: var(--rtk-space-12, 48px);\n  min-height: 48px;\n}\n\n.dropdown-trigger {\n  height: 100%;\n  width: 100%;\n  border-width: var(--rtk-border-width-none, 0);\n  border-style: none;\n  padding: var(--rtk-space-4, 16px);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));\n  font-size: 14px;\n  color: rgb(var(--rtk-colors-text-1000, 255 255 255));\n  cursor: pointer;\n  position: absolute;\n  z-index: 20;\n}\n\n.dropdown-trigger span {\n  display: flex;\n  flex: 1 1 0%;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.dropdown-trigger rtk-icon {\n  margin-left: var(--rtk-space-1, 4px);\n  height: var(--rtk-space-5, 20px);\n  width: var(--rtk-space-5, 20px);\n  flex-shrink: 0;\n}\n\n@container chatcontainer (height < 360px) {\n  .dropdown-trigger {\n    padding: var(--rtk-space-2, 8px);\n  }\n  .dropdown {\n    top: var(--rtk-space-8, 32px) !important;\n  }\n  .search-container {\n    padding-left: var(--rtk-space-0, 0px) !important;\n    padding-right: var(--rtk-space-0, 0px) !important;\n    padding-top: var(--rtk-space-0, 0px) !important;\n    padding-bottom: var(--rtk-space-0, 0px) !important;\n  }\n  input {\n    height: var(--rtk-space-8, 32px) !important;\n    border-radius: var(--rtk-border-radius-none, 0) !important;\n  }\n  .channel {\n    height: var(--rtk-space-8, 32px) !important;\n    border-radius: var(--rtk-border-radius-sm, 4px) !important;\n  }\n  .avatar-icon {\n    height: var(--rtk-space-3, 12px) !important;\n    width: var(--rtk-space-3, 12px) !important;\n    padding: var(--rtk-space-1, 4px) !important;\n  }\n\n  rtk-avatar {\n    height: var(--rtk-space-5, 20px) !important;\n    width: var(--rtk-space-5, 20px) !important;\n  }\n}\n\n.dropdown {\n  position: absolute;\n  width: 100%;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));\n  top: var(--rtk-space-12, 48px);\n  z-index: 10;\n  animation: 0.3s slide-down ease;\n}\n\n.dropdown .channels-container {\n  max-height: var(--rtk-space-80, 320px);\n}\n\n.list {\n  display: flex;\n  flex-direction: column;\n}\n\n.list .channel .channel-data {\n  align-items: flex-start;\n}\n\n.unread-count {\n  display: flex;\n  justify-content: center;\n  height: var(--rtk-space-5, 20px);\n  min-width: var(--rtk-space-3, 12px);\n  border-radius: 9999px;\n  padding-left: var(--rtk-space-1, 4px);\n  padding-right: var(--rtk-space-1, 4px);\n  font-size: 12px;\n  line-height: 1.25rem;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));\n  color: rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));\n}\n\ninput {\n  height: var(--rtk-space-9, 36px);\n  width: 100%;\n  padding-left: var(--rtk-space-3, 12px);\n  padding-right: var(--rtk-space-3, 12px);\n  box-sizing: border-box;\n  border-width: var(--rtk-border-width-none, 0);\n  border-style: none;\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n  border-radius: var(--rtk-border-radius-sm, 4px);\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));\n  color: rgb(var(--rtk-colors-text-1000, 255 255 255));\n}\n\n.search-container {\n  display: flex;\n  flex-shrink: 0;\n  flex-grow: 0;\n  flex-basis: auto;\n  align-items: center;\n  padding-top: var(--rtk-space-3, 12px);\n  padding-bottom: var(--rtk-space-3, 12px);\n  padding-left: var(--rtk-space-2, 8px);\n  padding-right: var(--rtk-space-2, 8px);\n  border-bottom: var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-700, 44 44 44));\n}\n\n.search-container rtk-icon {\n  margin-left: calc(var(--rtk-space-8, 32px) * -1);\n  height: var(--rtk-space-5, 20px);\n  width: var(--rtk-space-5, 20px);\n  color: rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76));\n}\n\n.channels-container {\n  display: flex;\n  flex-direction: column;\n  gap: var(--rtk-space-1, 4px);\n  padding: var(--rtk-space-2, 8px);\n  flex: 1 1 auto;\n  overflow-y: auto;\n}\n\n.channel {\n  flex-shrink: 0;\n  box-sizing: border-box;\n  border-width: var(--rtk-border-width-none, 0);\n  border-style: none;\n  background-color: transparent;\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n  cursor: pointer;\n  border-radius: var(--rtk-border-radius-md, 8px);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--rtk-space-2, 8px);\n  height: var(--rtk-space-16, 64px);\n  width: 100%;\n  padding-left: var(--rtk-space-2, 8px);\n  padding-right: var(--rtk-space-3, 12px);\n  color: rgb(var(--rtk-colors-text-1000, 255 255 255));\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n\n.channel:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));\n}\n\n.channel .channel-data {\n  flex: 1 1 0%;\n  align-items: center;\n  justify-content: space-between;\n  display: flex;\n  gap: var(--rtk-space-2, 8px);\n}\n\n.channel .name {\n  font-size: 16px;\n}\n\n.channel .name, \n  .channel .last-message {\n  max-width: var(--rtk-space-40, 160px);\n  text-align: left;\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 1;\n}\n\n.channel .no-message {\n  font-style: italic;\n}\n\n.channel rtk-avatar {\n  height: var(--rtk-space-12, 48px);\n  width: var(--rtk-space-12, 48px);\n  overflow: clip;\n  border-radius: 9999px;\n  font-size: 14px;\n}\n\n.channel .avatar-icon {\n  height: var(--rtk-space-6, 24px);\n  width: var(--rtk-space-6, 24px);\n  padding: var(--rtk-space-3, 12px);\n  color: rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));\n  overflow: clip;\n  border-radius: 9999px;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));\n}\n\n.channel time, \n  .channel .last-message {\n  font-size: 12px;\n  color: rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76));\n}\n\n.channel.active {\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-bg-opacity));\n  color: rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));\n}\n\n.channel.active .unread-count {\n  background-color: rgb(var(--rtk-colors-text-on-brand-800, var(--rtk-colors-text-800, 255 255 255 / 0.76)));\n  --tw-text-opacity: 1;\n  color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-text-opacity));\n}\n\n.channel.active time {\n  color: rgb(var(--rtk-colors-text-on-brand-800, var(--rtk-colors-text-800, 255 255 255 / 0.76)));\n}\n\n.channel.active .last-message {\n  color: rgb(var(--rtk-colors-text-on-brand-700, var(--rtk-colors-text-700, 255 255 255 / 0.64)));\n}\n\n.channel.active rtk-avatar {\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));\n  color: rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));\n}\n\n.col {\n  gap: var(--rtk-space-1, 4px);\n  display: flex;\n  flex-direction: column;\n}\n\n.channel-meta {\n  flex-shrink: 0;\n  align-items: flex-end;\n}\n\n@keyframes slide-down {\n  from {\n    transform: translateY(-50px);\n  }\n  to {\n    transform: translateY(0%);\n  }\n}\n";

package/dist/components/{p-0abe4b8a.js → p-dab9d3d6.js}

@@ -21,7 +21,7 @@ function alphabeticalSorter(a, b) {
     return a.localeCompare(b);
 }
 /**
- * Generate a unique chat group key used in `<rtk-chat-messages-ui />`
+ * Generate a unique chat group key used in `<rtk-chat /> and <rtk-chat-selector-ui />`
  * @param ids An array of user ids
  * @returns A unique key from the user ids
  */

package/dist/components/{p-52b090fc.js → p-dbfc9151.js}

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, h, e as Host } from './p-c3592601.js';
-import { e as defaultIconPack, h as useLanguage } from './p-037e572f.js';
-import { S as SyncWithStore } from './p-af35ac31.js';
+import { e as defaultIconPack, h as useLanguage } from './p-7fc0dc2f.js';
+import { S as SyncWithStore } from './p-47c25f64.js';
 import { d as defineCustomElement$2 } from './p-3b29dda1.js';
-import { d as defineCustomElement$1 } from './p-03bdc4c0.js';
+import { d as defineCustomElement$1 } from './p-fa8f6b4a.js';
 
 const rtkSpotlightIndicatorCss = ":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{font-size:12px}#sync-button{flex-direction:row;border-radius:var(--rtk-border-radius-sm, 4px);padding-left:var(--rtk-space-1, 4px);display:flex;align-items:center;justify-content:center;margin-bottom:var(--rtk-space-1, 4px);font-size:12px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity))}:host([size='sm']) rtk-tooltip,:host([size='md']) rtk-tooltip{width:100%}:host([size='sm'])>#sync-button{height:var(--rtk-space-8, 32px);width:var(--rtk-space-16, 64px);padding-left:var(--rtk-space-0, 0px)}:host([size='md'])>#sync-button{height:var(--rtk-space-8, 32px);width:var(--rtk-space-16, 64px)}:host([size='lg'])>#sync-button{flex-direction:row;height:var(--rtk-space-8, 32px);width:var(--rtk-space-16, 64px)}@media (orientation: portrait){:host([size='lg']) #sync-button{flex-direction:column-reverse;height:var(--rtk-space-16, 64px);width:var(--rtk-space-16, 64px)}:host([size='md']) #sync-button{height:var(--rtk-space-16, 64px);width:var(--rtk-space-16, 64px)}:host([size='sm']) #sync-button{height:var(--rtk-space-10, 40px);width:var(--rtk-space-16, 64px);flex-direction:row}}#sync-button>rtk-icon{max-height:14px}#sync-button rtk-icon{--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}:host([size='sm']) #sync-button>rtk-icon{width:auto}#sync-button.active rtk-icon{color:rgb(var(--rtk-colors-text-1000, 255 255 255))}div{align-content:center;line-height:2rem}rtk-icon{height:var(--rtk-space-6, 24px);width:var(--rtk-space-8, 32px)}#sync-button.active{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-success, 98 165 4) / var(--tw-bg-opacity))}";
 const RtkSpotlightIndicatorStyle0 = rtkSpotlightIndicatorCss;