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

package/dist/cjs/{rtk-avatar_23.cjs.entry.js → rtk-avatar_26.cjs.entry.js}

@@ -2,24 +2,24 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index$1 = require('./index-05554ce6.js');
-const uiStore = require('./ui-store-594688bf.js');
+const index$1 = require('./index-2e5758b6.js');
+const uiStore = require('./ui-store-d0e80f30.js');
 const string = require('./string-9bce3253.js');
-const index = require('./index-5442bdba.js');
-const chat = require('./chat-90670f84.js');
+const index = require('./index-92947ea7.js');
+const chat = require('./chat-f1a9fd6e.js');
 const file = require('./file-0b9afa34.js');
-const merge = require('./merge-7ce7986a.js');
-const index$2 = require('./index-821d14b7.js');
-const config = require('./config-60d594e2.js');
+const merge = require('./merge-bb096d88.js');
+const index$2 = require('./index-6f8c1928.js');
+const config = require('./config-86164f93.js');
 const ResizeObserver_es = require('./ResizeObserver.es-ba961f16.js');
 const floatingUi_dom_esm = require('./floating-ui.dom.esm-705e65f3.js');
 const date = require('./date-61ffcd0a.js');
-const debounce = require('./debounce-677e65cb.js');
+const debounce = require('./debounce-267777c1.js');
 
 const rtkAvatarCss = ":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:var(--rtk-space-32, 128px);width:var(--rtk-space-32, 128px);align-items:center;justify-content:center;font-size:28px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));overflow:clip;border-radius:9999px;-webkit-user-select:none;-moz-user-select:none;user-select:none}rtk-icon{height:50%;width:50%}.image-ctr{display:flex;height:100%;width:100%;align-items:center;justify-content:center;--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-600, 255 255 255 / 0.52))}img{height:var(--rtk-space-0, 0px);width:var(--rtk-space-0, 0px);-o-object-fit:cover;object-fit:cover}img.loaded{height:100%;width:100%}.initials{display:flex;height:100%;width:100%;align-items:center;justify-content:center;text-transform:uppercase}.image{display:flex;height:100%;width:100%;align-items:center;justify-content:center}.image img{display:none;height:100%;width:100%;-o-object-fit:cover;object-fit:cover}.image img.loaded{display:block}:host([variant='hexagon']){border-radius:var(--rtk-border-radius-none, 0);clip-path:polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%)}:host([variant='square']){border-radius:var(--rtk-border-radius-none, 0);clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)}:host([size='sm']){height:var(--rtk-space-14, 56px);width:var(--rtk-space-14, 56px);font-size:12px}:host([size='md']){height:var(--rtk-space-28, 112px);width:var(--rtk-space-28, 112px)}:host([size='lg']){height:var(--rtk-space-32, 128px);width:var(--rtk-space-32, 128px)}";
 const RtkAvatarStyle0 = rtkAvatarCss;
 
-var __decorate$g = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$i = (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);
@@ -57,10 +57,10 @@ const RtkAvatar = class {
         return (index$1.h(index$1.Host, { key: 'd7d3a7b03a3807984dc6798b5e35cec4418e06e7' }, this.getAvatar(), index$1.h("slot", { key: '25aa9fe632a132c1e2f8ef88ac98043bb8ef085a' })));
     }
 };
-__decorate$g([
+__decorate$i([
     index.SyncWithStore()
 ], RtkAvatar.prototype, "iconPack", void 0);
-__decorate$g([
+__decorate$i([
     index.SyncWithStore()
 ], RtkAvatar.prototype, "t", void 0);
 RtkAvatar.style = RtkAvatarStyle0;
@@ -89,10 +89,10 @@ const RtkButton = class {
 };
 RtkButton.style = RtkButtonStyle0;
 
-const rtkChatCss = ":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;height:100%;width:100%;flex-direction:column;font-size:14px;position:relative;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}h3{margin:var(--rtk-space-0, 0px);display:flex;height:var(--rtk-space-12, 48px);align-items:center;justify-content:center;font-size:16px;font-weight:400;color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));text-align:center}#dropzone{position:absolute;top:var(--rtk-space-0, 0px);right:var(--rtk-space-0, 0px);bottom:var(--rtk-space-0, 0px);left:var(--rtk-space-0, 0px);z-index:10;display:none;flex-direction:column;align-items:center;justify-content:center;--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-700, 255 255 255 / 0.64))}#dropzone.active{display:flex;animation:0.2s slide-up ease-in}rtk-chat-messages-ui,rtk-chat-messages-ui-paginated{flex:1 0 0}rtk-chat-composer-view{margin:var(--rtk-space-2, 8px)}.chat-container{display:flex;height:100%;width:100%;flex-direction:row;container-type:size;container-name:chatcontainer}.chat{display:flex;flex:1 1 0%;flex-direction:column}.banner{height:100%;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.view-chats-btn{margin-top:var(--rtk-space-4, 16px)}.selector-container{z-index:50;width:100%;max-width:var(--rtk-space-80, 320px);border-right:var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60))}.selector-container.hide{display:none}.mobile-close-btn{display:none}.selector-container.mobile{height:100%;width:100%;max-width:100%;position:absolute;top:var(--rtk-space-0, 0px);right:var(--rtk-space-0, 0px);bottom:var(--rtk-space-0, 0px);left:var(--rtk-space-0, 0px);background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / 0.6);display:flex}.selector-container.mobile .mobile-close-btn{margin-top:var(--rtk-space-4, 16px);margin-bottom:var(--rtk-space-4, 16px);margin-left:var(--rtk-space-6, 24px);margin-right:var(--rtk-space-6, 24px);display:block}.pinned-messages{position:relative;display:flex;flex-direction:column}.pinned-messages-header{display:flex;align-items:center;justify-content:space-between;gap:var(--rtk-space-2, 8px);padding:var(--rtk-space-4, 16px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));font-size:14px;cursor:pointer}.pinned-messages-header div{display:flex;flex-direction:row;align-items:center;gap:var(--rtk-space-2, 8px)}.pinned-messages-header rtk-icon{height:var(--rtk-space-3, 12px);width:var(--rtk-space-3, 12px)}.pinned-messages-content{--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));position:absolute;left:var(--rtk-space-0, 0px);top:100%;z-index:50;max-height:30vh;width:100%;overflow:auto}.pinned-message{display:flex;cursor:pointer;flex-direction:row;align-items:center;gap:var(--rtk-space-2, 8px);--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity));padding:var(--rtk-space-4, 16px);border-bottom-width:var(--rtk-border-width-sm, 1px);border-right-width:var(--rtk-border-width-none, 0);border-left-width:var(--rtk-border-width-none, 0);border-top-width:var(--rtk-border-width-none, 0);border-style:solid}.pinned-message-avatar{height:var(--rtk-space-6, 24px) !important;width:var(--rtk-space-6, 24px) !important}@keyframes swipe-in{from{transform:translateX(-100%)}to{transform:translateX(0)}}";
+const rtkChatCss = ":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;height:100%;width:100%;flex-direction:column;font-size:14px;position:relative;box-sizing:border-box;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}h3{margin:var(--rtk-space-0, 0px);display:flex;height:var(--rtk-space-12, 48px);align-items:center;justify-content:center;font-size:16px;font-weight:400;color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));text-align:center}#dropzone{position:absolute;top:var(--rtk-space-0, 0px);right:var(--rtk-space-0, 0px);bottom:var(--rtk-space-0, 0px);left:var(--rtk-space-0, 0px);z-index:10;display:none;flex-direction:column;align-items:center;justify-content:center;--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-700, 255 255 255 / 0.64))}#dropzone.active{display:flex;animation:0.2s slide-up ease-in}rtk-chat-messages-ui,rtk-chat-messages-ui-paginated{flex:1 0 0}rtk-chat-composer-view{margin:var(--rtk-space-2, 8px)}.chat-container{display:flex;height:100%;width:100%;flex-direction:row;container-type:size;container-name:chatcontainer}.chat{box-sizing:border-box;display:flex;flex:1 1 0%;flex-direction:column}.banner{height:100%;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.view-chats-btn{margin-top:var(--rtk-space-4, 16px)}.selector-container{z-index:50;width:100%;max-width:var(--rtk-space-80, 320px);border-right:var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60))}.selector-container.hide{display:none}.mobile-close-btn{display:none}.selector-container.mobile{height:100%;width:100%;max-width:100%;position:absolute;top:var(--rtk-space-0, 0px);right:var(--rtk-space-0, 0px);bottom:var(--rtk-space-0, 0px);left:var(--rtk-space-0, 0px);background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / 0.6);display:flex}.selector-container.mobile .mobile-close-btn{margin-top:var(--rtk-space-4, 16px);margin-bottom:var(--rtk-space-4, 16px);margin-left:var(--rtk-space-6, 24px);margin-right:var(--rtk-space-6, 24px);display:block}.pinned-messages{position:relative;display:flex;flex-direction:column}.pinned-messages-header{display:flex;align-items:center;justify-content:space-between;gap:var(--rtk-space-2, 8px);padding:var(--rtk-space-4, 16px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));font-size:14px;cursor:pointer}.pinned-messages-header div{display:flex;flex-direction:row;align-items:center;gap:var(--rtk-space-2, 8px)}.pinned-messages-header rtk-icon{height:var(--rtk-space-3, 12px);width:var(--rtk-space-3, 12px)}.pinned-messages-content{--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));position:absolute;left:var(--rtk-space-0, 0px);top:100%;z-index:50;max-height:30vh;width:100%;overflow:auto}.pinned-message{display:flex;cursor:pointer;flex-direction:row;align-items:center;gap:var(--rtk-space-2, 8px);--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity));padding:var(--rtk-space-4, 16px);border-bottom-width:var(--rtk-border-width-sm, 1px);border-right-width:var(--rtk-border-width-none, 0);border-left-width:var(--rtk-border-width-none, 0);border-top-width:var(--rtk-border-width-none, 0);border-style:solid}.pinned-message-avatar{height:var(--rtk-space-6, 24px) !important;width:var(--rtk-space-6, 24px) !important}@keyframes swipe-in{from{transform:translateX(-100%)}to{transform:translateX(0)}}";
 const RtkChatStyle0 = rtkChatCss;
 
-var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$h = (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);
@@ -106,13 +106,6 @@ const RtkChat = class {
     constructor(hostRef) {
         index$1.registerInstance(this, hostRef);
         this.stateUpdate = index$1.createEvent(this, "rtkStateUpdate", 7);
-        this.chatUpdateListener = ({ message }) => {
-            if (!this.displayFilter || this.displayFilter(message)) {
-                this.addToChatGroup(message);
-                // shallow copy to trigger render
-                this.chatGroups = Object.assign({}, this.chatGroups);
-            }
-        };
         this.chatPermissionUpdateListener = () => {
             this.canSend = this.meeting.self.permissions.chatPublic.canSend;
             this.canSendTextMessage = this.meeting.self.permissions.chatPublic.text;
@@ -126,25 +119,8 @@ const RtkChat = class {
         this.t = uiStore.useLanguage();
         /** UI Overrides */
         this.overrides = uiStore.defaultOverrides;
-        /** disables private chat */
-        this.disablePrivateChat = false;
         /** Can current user pin/unpin messages */
         this.canPinMessages = false;
-        /**
-         * @deprecated
-         * Beta API, will change in future
-         * List of target presets allowed as private chat recipient
-         */
-        this.privatePresetFilter = [];
-        /**
-         * @deprecated
-         * Beta API, will change in future
-         * A filter function for messages to be displayed
-         */
-        this.displayFilter = undefined;
-        this.unreadCountGroups = {};
-        this.chatGroups = { everyone: [] };
-        this.selectedGroup = 'everyone';
         this.now = new Date();
         this.dropzoneActivated = false;
         this.showLatestMessageButton = false;
@@ -155,7 +131,6 @@ const RtkChat = class {
         this.canSendPrivateTexts = false;
         this.canSendPrivateFiles = false;
         this.emojiPickerEnabled = false;
-        this.chatRecipientId = 'everyone';
         this.participants = [];
         this.editingMessage = null;
         this.replyMessage = null;
@@ -190,32 +165,10 @@ const RtkChat = class {
             });
         };
         this.disconnectMeeting = (meeting) => {
-            var _a;
-            if (this.isPrivateChatSupported()) {
-                meeting === null || meeting === void 0 ? void 0 : meeting.participants.joined.removeListener('participantJoined', this.onParticipantUpdate);
-                meeting === null || meeting === void 0 ? void 0 : meeting.participants.joined.removeListener('participantLeft', this.onParticipantUpdate);
-            }
-            (_a = meeting === null || meeting === void 0 ? void 0 : meeting.chat) === null || _a === void 0 ? void 0 : _a.removeListener('chatUpdate', this.chatUpdateListener);
             meeting.self.permissions.removeListener('*', this.chatPermissionUpdateListener);
         };
-        this.onParticipantUpdate = () => {
-            this.participants = this.meeting.participants.joined
-                .toArray()
-                .filter((p) => this.privatePresetFilter.length === 0 || this.privatePresetFilter.includes(p.presetName));
-            // if selected participant leaves, reset state to everyone
-            if (this.selectedParticipant && !this.participants.includes(this.selectedParticipant)) {
-                this.selectedParticipant = null;
-                this.chatRecipientId = this.selectedGroup = 'everyone';
-            }
-        };
-        this.updateUnreadCountGroups = (obj) => {
-            this.unreadCountGroups = Object.assign(Object.assign({}, this.unreadCountGroups), obj);
-        };
-        this.isPrivateChatSupported = () => {
-            return this.canPrivateMessage && !this.disablePrivateChat;
-        };
         this.isTextMessagingAllowed = () => {
-            if (this.chatRecipientId === 'everyone') {
+            if (!this.selectedParticipant) {
                 // public chat
                 return this.canSend && this.canSendTextMessage;
             }
@@ -223,7 +176,7 @@ const RtkChat = class {
             return this.canPrivateMessage && this.canSendPrivateTexts;
         };
         this.isFileMessagingAllowed = () => {
-            if (this.chatRecipientId === 'everyone') {
+            if (!this.selectedParticipant) {
                 // public chat
                 return this.canSend && this.canSendFiles;
             }
@@ -296,26 +249,6 @@ const RtkChat = class {
             this.replyMessage = null;
             this.editingMessage = message;
         };
-        this.getPinnedMessageLabel = (message) => {
-            if (message.type === 'text')
-                return message.message;
-            if (message.type === 'image')
-                return 'Image';
-            if (message.type === 'file')
-                return 'File';
-            return '';
-        };
-        this.renderPinnedMessagesHeader = () => {
-            if (this.meeting.chat.pinned.length === 0)
-                return null;
-            /**
-             * We do not display a picture against the avatar because the chatMessage API does not provide it.
-             */
-            return (index$1.h("div", { class: "pinned-messages" }, index$1.h("div", { class: "pinned-messages-header", onClick: () => (this.showPinnedMessages = !this.showPinnedMessages) }, index$1.h("div", null, index$1.h("rtk-icon", { icon: this.iconPack.pin, size: "sm" }), this.t('chat.pinned_msgs'), ` (${this.meeting.chat.pinned.length})`), index$1.h("rtk-icon", { icon: this.showPinnedMessages ? this.iconPack.chevron_up : this.iconPack.chevron_down, size: "sm" })), this.showPinnedMessages && (index$1.h("div", { class: "pinned-messages-content scrollbar" }, this.meeting.chat.pinned.map((message) => {
-                const label = this.getPinnedMessageLabel(message);
-                return (index$1.h("div", { class: "pinned-message" }, index$1.h("rtk-avatar", { class: "pinned-message-avatar", participant: { name: message.displayName, picture: '' }, size: "sm" }), index$1.h("span", null, label.length > 20 ? `${label.substring(0, 20)}...` : label)));
-            })))));
-        };
     }
     connectedCallback() {
         if (!this.meeting)
@@ -338,6 +271,16 @@ const RtkChat = class {
             this.editingMessage = event.detail.payload;
         }
     }
+    onChatSelectorChange(event) {
+        var _a;
+        const selectedUser = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.selectedUser;
+        // Everyone
+        if (!selectedUser) {
+            this.selectedParticipant = null;
+            return;
+        }
+        this.selectedParticipant = selectedUser;
+    }
     disconnectedCallback() {
         var _a;
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
@@ -347,7 +290,7 @@ const RtkChat = class {
         this.host.removeEventListener('drop', this.onDrop);
     }
     meetingChanged(meeting, oldMeeting) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d;
         if (oldMeeting != undefined)
             this.disconnectMeeting(oldMeeting);
         if (meeting && !meeting.chat)
@@ -360,93 +303,16 @@ const RtkChat = class {
                 ((_b = meeting.self.permissions.chatPrivate) === null || _b === void 0 ? void 0 : _b.canReceive));
             this.canSendPrivateTexts = !!((_c = meeting.self.permissions.chatPrivate) === null || _c === void 0 ? void 0 : _c.text);
             this.canSendPrivateFiles = !!((_d = meeting.self.permissions.chatPrivate) === null || _d === void 0 ? void 0 : _d.files);
-            this.canPinMessages =
-                ((_e = meeting === null || meeting === void 0 ? void 0 : meeting.__internals__) === null || _e === void 0 ? void 0 : _e.features.hasFeature(uiStore.FlagsmithFeatureFlags.PINNED_MESSAGES)) &&
-                    meeting.self.permissions.pinParticipant;
-            this.initializeChatGroups();
-            // shallow copy to trigger render
-            this.chatGroups = Object.assign({}, this.chatGroups);
             meeting.self.permissions.on('*', this.chatPermissionUpdateListener);
-            this.onParticipantUpdate();
-            (_f = meeting.chat) === null || _f === void 0 ? void 0 : _f.addListener('chatUpdate', this.chatUpdateListener);
-            if (this.isPrivateChatSupported()) {
-                meeting.participants.joined.addListener('participantJoined', this.onParticipantUpdate);
-                meeting.participants.joined.addListener('participantLeft', this.onParticipantUpdate);
-            }
-        }
-    }
-    chatGroupsChanged(chatGroups) {
-        var _a, _b;
-        if (!this.isPrivateChatSupported()) {
-            return;
-        }
-        const unreadCounts = {};
-        for (const key in chatGroups) {
-            const lastReadTimestamp = (_a = uiStore.chatUnreadTimestamps[key]) !== null && _a !== void 0 ? _a : 0;
-            unreadCounts[key] = chatGroups[key].filter((c) => c.type == 'chat' &&
-                c.message.time > lastReadTimestamp &&
-                c.message.userId !== this.meeting.self.userId).length;
-            if (key ===
-                chat.generateChatGroupKey([this.meeting.self.userId, (_b = this.selectedParticipant) === null || _b === void 0 ? void 0 : _b.userId]) ||
-                (key === 'everyone' && this.selectedParticipant === null)) {
-                unreadCounts[key] = 0;
-                uiStore.chatUnreadTimestamps[key] = new Date();
-            }
-        }
-        this.updateUnreadCountGroups(unreadCounts);
-    }
-    initializeChatGroups() {
-        var _a;
-        (_a = this.meeting.chat) === null || _a === void 0 ? void 0 : _a.messages.forEach((message) => {
-            if (!this.displayFilter || this.displayFilter(message)) {
-                this.addToChatGroup(message);
-            }
-        });
-    }
-    onDisplayFilterChanged(newFilter, oldFilter) {
-        if (newFilter !== oldFilter) {
-            this.chatGroups = {};
-            this.initializeChatGroups();
-        }
-    }
-    addToChatGroup(message) {
-        var _a;
-        const parsedMessage = chat.parseMessageForTarget(message);
-        let key = 'everyone';
-        if (((_a = parsedMessage.targetUserIds) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-            const allParticipants = new Set([
-                parsedMessage.userId,
-                ...parsedMessage.targetUserIds,
-            ]);
-            key = chat.generateChatGroupKey(Array.from(allParticipants));
         }
-        if (this.chatGroups[key] === undefined)
-            this.chatGroups[key] = [];
-        let isEditedMessage = false;
-        let messages = [];
-        this.chatGroups[key].forEach((chat) => {
-            if (chat.type === 'chat' && chat.message.id === message.id) {
-                isEditedMessage = true;
-                messages.push({ type: 'chat', message: parsedMessage });
-            }
-            else {
-                messages.push(chat);
-            }
-        });
-        if (!isEditedMessage) {
-            messages.push({ type: 'chat', message: parsedMessage });
-        }
-        this.chatGroups[key] = messages;
     }
     getRecipientPeerIds() {
-        let peerIds = [];
-        if (this.chatRecipientId !== 'everyone') {
-            peerIds = [this.selectedParticipant.id];
-        }
-        return peerIds;
+        if (!this.selectedParticipant)
+            return [];
+        return [this.selectedParticipant.id];
     }
     renderComposerUI() {
-        if (this.chatRecipientId === 'everyone') {
+        if (!this.selectedParticipant) {
             if (!this.canSendTextMessage && !this.canSendFiles)
                 return null;
         }
@@ -468,28 +334,26 @@ const RtkChat = class {
         if (!this.meeting) {
             return null;
         }
-        return (index$1.h(index$1.Host, null, index$1.h("div", { class: "chat-container" }, index$1.h("div", { class: "chat" }, this.isFileMessagingAllowed() && (index$1.h("div", { id: "dropzone", class: { active: this.dropzoneActivated }, part: "dropzone" }, index$1.h("rtk-icon", { icon: this.iconPack.attach }), index$1.h("p", null, this.t('chat.send_attachment')))), this.renderPinnedMessagesHeader(), index$1.h("rtk-chat-messages-ui-paginated", { meeting: this.meeting, onPinMessage: this.onPinMessage, onEditMessage: this.onMessageEdit, onDeleteMessage: this.onDeleteMessage, size: this.size, iconPack: this.iconPack, t: this.t }), this.renderComposerUI()))));
+        return (index$1.h(index$1.Host, null, index$1.h("div", { class: "chat-container" }, index$1.h("div", { class: "chat" }, this.isFileMessagingAllowed() && (index$1.h("div", { id: "dropzone", class: { active: this.dropzoneActivated }, part: "dropzone" }, index$1.h("rtk-icon", { icon: this.iconPack.attach }), index$1.h("p", null, this.t('chat.send_attachment')))), index$1.h("rtk-chat-header", null), index$1.h("rtk-chat-messages-ui-paginated", { meeting: this.meeting, privateChatRecipient: this.selectedParticipant, onPinMessage: this.onPinMessage, onEditMessage: this.onMessageEdit, onDeleteMessage: this.onDeleteMessage, size: this.size, iconPack: this.iconPack, t: this.t }), this.renderComposerUI()))));
     }
     get host() { return index$1.getElement(this); }
     static get watchers() { return {
-        "meeting": ["meetingChanged"],
-        "chatGroups": ["chatGroupsChanged"],
-        "displayFilter": ["onDisplayFilterChanged"]
+        "meeting": ["meetingChanged"]
     }; }
 };
-__decorate$f([
+__decorate$h([
     index.SyncWithStore()
 ], RtkChat.prototype, "meeting", void 0);
-__decorate$f([
+__decorate$h([
     index.SyncWithStore()
 ], RtkChat.prototype, "config", void 0);
-__decorate$f([
+__decorate$h([
     index.SyncWithStore()
 ], RtkChat.prototype, "iconPack", void 0);
-__decorate$f([
+__decorate$h([
     index.SyncWithStore()
 ], RtkChat.prototype, "t", void 0);
-__decorate$f([
+__decorate$h([
     index.SyncWithStore()
 ], RtkChat.prototype, "overrides", void 0);
 RtkChat.style = RtkChatStyle0;
@@ -497,7 +361,7 @@ RtkChat.style = RtkChatStyle0;
 const rtkChatComposerViewCss = ":host {\n  display: flex;\n  flex-direction: column;\n  font-family: var(--rtk-font-family, sans-serif);\n  font-size: 14px;\n  position: relative;\n}\n\n.quoted-message-container {\n  margin-bottom: var(--rtk-space-2, 8px);\n  display: flex;\n  justify-content: space-between;\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-1000, 255 255 255));\n  border-radius: var(--rtk-border-radius-md, 8px);\n  border: var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60));\n}\n\n.quoted-message-container .quoted-message {\n  flex: 1 1 0%;\n  padding: var(--rtk-space-2, 8px);\n  border-radius: var(--rtk-border-radius-md, 8px);\n  max-height: var(--rtk-space-24, 96px);\n  overflow-y: auto;\n  word-break: break-all;\n}\n\n.quoted-message-container .quoted-message blockquote {\n  display: none;\n}\n\n.quoted-message-container rtk-icon.dismiss {\n  margin-left: auto;\n  height: var(--rtk-space-5, 20px);\n  width: var(--rtk-space-5, 20px);\n  padding: var(--rtk-space-2, 8px);\n  border-radius: var(--rtk-border-radius-md, 8px);\n  color: rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52));\n}\n\n.quoted-message-container rtk-icon.dismiss:hover {\n  cursor: pointer;\n  color: rgb(var(--rtk-colors-text-1000, 255 255 255));\n}\n\n.quoted-message-container rtk-icon.dismiss {\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.composer-container {\n  position: relative;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));\n  border-radius: var(--rtk-border-radius-md, 8px);\n  overflow: hidden;\n  border: var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60));\n}\n\n.composer-container > .composers {\n    min-height: 60px;\n  }\n\n@container chatcontainer (height < 360px) {\n    .composer-container > .composers {\n      min-height: 30px;\n    }\n}\n\n.chat-buttons {\n  padding: var(--rtk-space-3, 12px);\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-800, 30 30 30) / var(--tw-bg-opacity));\n  color: rgb(var(--rtk-colors-text-1000, 255 255 255));\n}\n\n.chat-buttons .right {\n  z-index: 10;\n}\n\n.chat-buttons .right .edit-buttons {\n  display: flex;\n  gap: var(--rtk-space-2, 8px);\n}\n\n.chat-buttons > div {\n  display: flex;\n  align-items: center;\n}\n\nrtk-emoji-picker {\n  z-index: 20;\n  position: absolute;\n  top: calc(var(--rtk-space-72, 288px) * -1);\n  border-top: var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60));\n  animation: 0.3s slide-up ease;\n}\n\n@keyframes slide-up {\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0%);\n  }\n}\n";
 const RtkChatComposerViewStyle0 = rtkChatComposerViewCss;
 
-var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$g = (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);
@@ -678,18 +542,43 @@ const RtkChatComposerView = class {
             } }, uiProps))), index$1.h("slot", { key: '31208ad279dec430da4527d22730de8e418bc722', name: "chat-buttons" })))), index$1.h("div", { key: '04fcdd3f690548cbf1e257ffb2982785e557726b', class: "right", part: "chat-buttons-right" }, !this.isEditing && (index$1.h("rtk-tooltip", { key: '367bf710673a0a2276f46d52289409abb77fe27b', variant: "primary", label: this.t('chat.send_msg'), delay: 2000 }, index$1.h("rtk-button", { key: 'c677e3026636c375ed7eee411c596f6d2a802794', kind: "icon", disabled: this.disableSendButton || this.isSending, onClick: () => this.handleSendMessage(), title: this.t('chat.send_msg') }, this.isSending ? (index$1.h("rtk-spinner", { size: "sm" })) : (index$1.h("rtk-icon", { icon: this.iconPack.send }))))), this.isEditing && (index$1.h("div", { key: '1e09e8868e4ae048b36bc8198b8aa1de92209a00', class: "edit-buttons" }, index$1.h("rtk-tooltip", { key: '29ff7a39bd168169fa7d104357b529a2c9efe0fd', variant: "secondary", label: this.t('cancel'), delay: 2000 }, index$1.h("rtk-button", { key: '27cf5353d0e8c2620fd8d4213994a9dcc83f83f3', kind: "icon", variant: "secondary", onClick: () => this.handleEditCancel(), title: this.t('cancel') }, index$1.h("rtk-icon", { key: 'aeb4c9df3993c6cebf952f64f6676eb8a3866bb0', icon: this.iconPack.dismiss }))), index$1.h("rtk-tooltip", { key: '835195d0f51a1db81e66a1b2d9076a71f2aaee4e', variant: "primary", label: this.t('chat.update_msg'), delay: 2000 }, index$1.h("rtk-button", { key: 'd524f01ba5d7ca52224d39e23e7f963972ad80c9', kind: "icon", onClick: () => this.handleEditMessage(), title: this.t('chat.send_msg') }, this.isSending ? (index$1.h("rtk-spinner", { size: "sm" })) : (index$1.h("rtk-icon", { icon: this.iconPack.checkmark })))))))))));
     }
 };
-__decorate$e([
+__decorate$g([
     index.SyncWithStore()
 ], RtkChatComposerView.prototype, "iconPack", void 0);
-__decorate$e([
+__decorate$g([
     index.SyncWithStore()
 ], RtkChatComposerView.prototype, "t", void 0);
 RtkChatComposerView.style = RtkChatComposerViewStyle0;
 
+const rtkChatHeaderCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}.scrollbar{scrollbar-width:thin;scrollbar-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n    var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar{height:var(--rtk-space-1\\.5, 6px);width:var(--rtk-space-1\\.5, 6px);border-radius:9999px;background-color:var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar-thumb{border-radius:9999px;background-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))}:host{display:flex;width:100%;flex-direction:column;gap:var(--rtk-space-2, 8px);font-size:14px;z-index:10;margin-bottom:var(--rtk-space-2, 8px);box-sizing:border-box;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.chat-header{position:relative;margin-left:var(--rtk-space-2, 8px);margin-right:var(--rtk-space-2, 8px);gap:var(--rtk-space-2, 8px);padding-left:var(--rtk-space-4, 16px);padding-right:var(--rtk-space-4, 16px);padding-top:var(--rtk-space-3, 12px);padding-bottom:var(--rtk-space-3, 12px);display:flex;flex-direction:row;align-items:center;justify-content:space-between;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52));border-radius:var(--rtk-border-radius-sm, 4px);overflow:hidden;border:var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60));cursor:pointer}.chat-header-label{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--rtk-space-2, 8px)}";
+const RtkChatHeaderStyle0 = rtkChatHeaderCss;
+
+const RtkChatHeader = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        this.onPinnedToggle = async (e) => {
+            var _a, _b, _c;
+            if ((_a = e.detail) === null || _a === void 0 ? void 0 : _a.open) {
+                await ((_c = (_b = this.$chatSelector) === null || _b === void 0 ? void 0 : _b.close) === null || _c === void 0 ? void 0 : _c.call(_b));
+            }
+        };
+        this.onChatToggle = async (e) => {
+            var _a, _b, _c;
+            if ((_a = e.detail) === null || _a === void 0 ? void 0 : _a.open) {
+                await ((_c = (_b = this.$pinnedSelector) === null || _b === void 0 ? void 0 : _b.close) === null || _c === void 0 ? void 0 : _c.call(_b));
+            }
+        };
+    }
+    render() {
+        return (index$1.h(index$1.Host, { key: 'af9956ff6e693f29fb63a6180ef773a0e64822e5' }, index$1.h("rtk-pinned-message-selector", { key: 'b0d9199d02d84453f8ee26c3a47e00c82047e4f6', ref: (el) => (this.$pinnedSelector = el), onRtkDropdownToggle: this.onPinnedToggle }), index$1.h("rtk-chat-selector", { key: '4d019562a85ebfeaf4ceae2e99d1b9c8c282127a', ref: (el) => (this.$chatSelector = el), onRtkDropdownToggle: this.onChatToggle })));
+    }
+};
+RtkChatHeader.style = RtkChatHeaderStyle0;
+
 const rtkChatMessagesUiPaginatedCss = ":host{display:flex;flex-direction:column;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));flex:1 0 0px}";
 const RtkChatMessagesUiPaginatedStyle0 = rtkChatMessagesUiPaginatedCss;
 
-var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$f = (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);
@@ -711,19 +600,37 @@ const RtkChatMessagesUiPaginated = class {
         this.iconPack = uiStore.defaultIconPack;
         /** Language */
         this.t = uiStore.useLanguage();
-        /** Whether to align chat bubbles to the left */
-        this.leftAlign = false;
         this.permissionsChanged = false;
         this.pageSize = 25;
         this.permissionsUpdateListener = () => {
             this.permissionsChanged = !this.permissionsChanged;
         };
-        // TODO: Implement the logic to mark messages as read. Old usages have been kept as-is.
-        this.maybeMarkChatAsRead = (_messages) => { };
         this.getChatMessages = async (timestamp, size, reversed) => {
-            const { messages } = await this.meeting.chat.getMessages(timestamp, size, reversed, undefined);
-            this.maybeMarkChatAsRead(messages);
-            return messages;
+            if (this.privateChatRecipient) {
+                try {
+                    const messages = await this.meeting.chat.fetchPrivateMessages({
+                        timestamp,
+                        limit: size,
+                        direction: reversed ? 'before' : 'after',
+                        userId: this.privateChatRecipient.userId,
+                    });
+                    return messages;
+                }
+                catch (err) {
+                    return [];
+                }
+            }
+            try {
+                const messages = await this.meeting.chat.fetchMessages({
+                    timestamp,
+                    limit: size,
+                    direction: reversed ? 'before' : 'after',
+                });
+                return messages;
+            }
+            catch (err) {
+                return [];
+            }
         };
         this.createChatNodes = (data) => {
             /**
@@ -731,8 +638,11 @@ const RtkChatMessagesUiPaginated = class {
              * will fail in current implementation
              */
             return data.map((message, idx) => {
-                var _a;
+                var _a, _b;
                 const isContinued = message.userId === ((_a = data[idx - 1]) === null || _a === void 0 ? void 0 : _a.userId);
+                // FIXME(ikabra): Socket sends private messages sent to the recipient as a part of public messages
+                if (!this.privateChatRecipient && ((_b = message.targetUserIds) === null || _b === void 0 ? void 0 : _b.length) > 0)
+                    return;
                 return this.createChatNode(message, isContinued);
             });
         };
@@ -742,13 +652,17 @@ const RtkChatMessagesUiPaginated = class {
             (_b = this.meeting) === null || _b === void 0 ? void 0 : _b.self.permissions.removeListener('permissionsUpdate', this.permissionsUpdateListener);
         };
         this.getMessageActions = (message) => {
+            var _a;
             const actions = [];
             const messageBelongsToSelf = message.userId === this.meeting.self.userId;
-            actions.push({
-                id: 'pin_message',
-                label: message.pinned ? this.t('unpin') : this.t('pin'),
-                icon: this.iconPack.pin,
-            });
+            const isPrivateMessage = ((_a = message.targetUserIds) === null || _a === void 0 ? void 0 : _a.length) > 0;
+            if (!isPrivateMessage) {
+                actions.push({
+                    id: 'pin_message',
+                    label: message.pinned ? this.t('unpin') : this.t('pin'),
+                    icon: this.iconPack.pin,
+                });
+            }
             if (messageBelongsToSelf) {
                 actions.push({
                     id: 'edit_message',
@@ -778,8 +692,6 @@ const RtkChatMessagesUiPaginated = class {
         };
         this.createChatNode = (message, isContinued) => {
             var _a, _b, _c, _d;
-            if (message.targetUserIds.length !== 0)
-                return null; // don't render private messages
             let displayPicture;
             if (this.meeting.meta.viewType === 'CHAT') {
                 displayPicture = (_a = this.meeting.participants.all
@@ -804,9 +716,18 @@ const RtkChatMessagesUiPaginated = class {
                 } }))))))));
         };
         this.chatUpdateListener = (data) => {
+            var _a, _b, _c;
+            // if private message and not for privateChatRecipient, ignore
+            // if private message and public chat selected, ignore
+            if (((_a = data.message.targetUserIds) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
+                !data.message.targetUserIds.includes((_b = this.privateChatRecipient) === null || _b === void 0 ? void 0 : _b.userId))
+                return;
+            // if public message and private chat selected, ignore
+            if (this.privateChatRecipient && ((_c = data.message.targetUserIds) === null || _c === void 0 ? void 0 : _c.length) === 0) {
+                return;
+            }
             if (data.action === 'add') {
                 this.$paginatedListRef.onNewNode(data.message);
-                this.maybeMarkChatAsRead([data.message]);
             }
             else if (data.action === 'delete') {
                 this.$paginatedListRef.onNodeDelete(data.message.id);
@@ -825,9 +746,20 @@ const RtkChatMessagesUiPaginated = class {
     connectedCallback() {
         this.meetingChanged(this.meeting);
     }
+    async onPinnedMessageSelect(event) {
+        var _a, _b;
+        const message = event.detail;
+        if (!message)
+            return;
+        await ((_b = (_a = this.$paginatedListRef) === null || _a === void 0 ? void 0 : _a.reset) === null || _b === void 0 ? void 0 : _b.call(_a, message.timeMs + 1));
+    }
     disconnectedCallback() {
         this.disconnectMeeting(this.meeting);
     }
+    privateChatRecipientChanged() {
+        var _a;
+        (_a = this.$paginatedListRef) === null || _a === void 0 ? void 0 : _a.reset();
+    }
     meetingChanged(meeting, oldMeeting) {
         var _a;
         if (oldMeeting != undefined)
@@ -841,28 +773,196 @@ const RtkChatMessagesUiPaginated = class {
         this.permissionsUpdateListener();
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'a574f0d8e0c7b1249568db270c73f45ad81fd8e2' }, index$1.h("rtk-paginated-list", { key: '279cf0d1c114c93f009a03779f026f6a7bb6ddf4', ref: (el) => (this.$paginatedListRef = el), pageSize: this.pageSize, pagesAllowed: 3, fetchData: this.getChatMessages, createNodes: this.createChatNodes, emptyListLabel: this.t('chat.empty_chat') }, index$1.h("slot", { key: 'cf28a28970c38375cda7492518fa8ed17802580e' }))));
+        return (index$1.h(index$1.Host, { key: 'efacd583cb3477a4aa9bc305d2e2d175f1f01492' }, index$1.h("rtk-paginated-list", { key: 'c0d100b90c426f9f57840008185510db1ad769eb', ref: (el) => (this.$paginatedListRef = el), pageSize: this.pageSize, pagesAllowed: 3, fetchData: this.getChatMessages, createNodes: this.createChatNodes, emptyListLabel: this.t('chat.empty_chat') }, index$1.h("slot", { key: 'f587f2644be8f00c31af09d46aa6d166ae7342fd' }))));
     }
     get host() { return index$1.getElement(this); }
     static get watchers() { return {
+        "privateChatRecipient": ["privateChatRecipientChanged"],
         "meeting": ["meetingChanged"]
     }; }
 };
-__decorate$d([
+__decorate$f([
     index.SyncWithStore()
 ], RtkChatMessagesUiPaginated.prototype, "meeting", void 0);
-__decorate$d([
+__decorate$f([
     index.SyncWithStore()
 ], RtkChatMessagesUiPaginated.prototype, "iconPack", void 0);
-__decorate$d([
+__decorate$f([
     index.SyncWithStore()
 ], RtkChatMessagesUiPaginated.prototype, "t", void 0);
 RtkChatMessagesUiPaginated.style = RtkChatMessagesUiPaginatedStyle0;
 
+const rtkChatSelectorCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}.scrollbar{scrollbar-width:thin;scrollbar-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n    var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar{height:var(--rtk-space-1\\.5, 6px);width:var(--rtk-space-1\\.5, 6px);border-radius:9999px;background-color:var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar-thumb{border-radius:9999px;background-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))}:host{display:flex;width:100%;flex-direction:column;font-size:14px;position:relative;box-sizing:border-box;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.chat-header{margin-left:var(--rtk-space-2, 8px);margin-right:var(--rtk-space-2, 8px);gap:var(--rtk-space-2, 8px);padding-left:var(--rtk-space-4, 16px);padding-right:var(--rtk-space-4, 16px);padding-top:var(--rtk-space-3, 12px);padding-bottom:var(--rtk-space-3, 12px);display:flex;flex-direction:row;align-items:center;justify-content:space-between;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52));cursor:pointer;border-radius:var(--rtk-border-radius-sm, 4px);border:var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60))}.chat-header-label{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--rtk-space-2, 8px)}.dropdown{position:absolute;top:100%;z-index:10;padding:var(--rtk-space-0, 0px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));opacity:0;overflow:hidden;pointer-events:none;border-bottom-right-radius:var(--rtk-border-radius-sm, 4px);border-bottom-left-radius:var(--rtk-border-radius-sm, 4px);left:var(--rtk-space-2, 8px);right:var(--rtk-space-2, 8px);max-width:calc(100vw - var(--rtk-space-4, 16px));box-sizing:border-box}.dropdown.open{display:flex;flex-direction:column;max-height:30vh;opacity:1;overflow:hidden;pointer-events:auto;border-width:1px;border-top-width:var(--rtk-border-width-none, 0);border-style:solid;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity))}.dropdown rtk-paginated-list{display:flex;max-height:30vh;min-height:12vh;flex-direction:column}.public-chat-group-label{display:flex;cursor:pointer;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--rtk-space-2, 8px);border-left-width:var(--rtk-border-width-none, 0);border-right-width:var(--rtk-border-width-none, 0);border-top-width:var(--rtk-border-width-none, 0);border-bottom-width:var(--rtk-border-width-none, 0);border-bottom-width:1px;border-style:solid;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity));padding-top:var(--rtk-space-4, 16px);padding-bottom:var(--rtk-space-4, 16px);padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px)}.public-chat-icon{display:flex;align-items:center;justify-content:center;padding:var(--rtk-space-1, 4px);border-radius:9999px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity))}";
+const RtkChatSelectorStyle0 = rtkChatSelectorCss;
+
+var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const RtkChatSelector = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        this.dropdownToggle = index$1.createEvent(this, "rtkDropdownToggle", 7);
+        this.chatSelectorChange = index$1.createEvent(this, "rtkChatSelectorChange", 7);
+        /** Config */
+        this.config = uiStore.createDefaultConfig();
+        /** Icon pack */
+        this.iconPack = uiStore.defaultIconPack;
+        /** Language */
+        this.t = uiStore.useLanguage();
+        /** UI Overrides */
+        this.overrides = uiStore.defaultOverrides;
+        this.isOpen = false;
+        this.showPrivateChat = false;
+        this.selectedUser = undefined;
+        //NOTE(ikabra): Fix this value once backend supports pagination for participants
+        this.pageSize = 100000;
+        this.pagesAllowed = 3;
+        this.disconnectMeeting = (meeting) => {
+            var _a, _b, _c;
+            const { self, participants } = meeting || {};
+            (_a = self === null || self === void 0 ? void 0 : self.permissions) === null || _a === void 0 ? void 0 : _a.off('*', this.chatPermissionUpdateListener);
+            (_b = participants === null || participants === void 0 ? void 0 : participants.joined) === null || _b === void 0 ? void 0 : _b.off('participantJoined', this.participantJoinedListener);
+            (_c = participants === null || participants === void 0 ? void 0 : participants.joined) === null || _c === void 0 ? void 0 : _c.off('participantLeft', this.participantLeftListener);
+        };
+        this.toggle = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.isOpen = !this.isOpen;
+            this.dropdownToggle.emit({ open: this.isOpen });
+        };
+        this.selectUser = async (user) => {
+            this.selectedUser = user;
+            this.chatSelectorChange.emit({ selectedUser: user });
+            await this.close();
+        };
+        this.chatPermissionUpdateListener = () => {
+            var _a, _b;
+            this.showPrivateChat = !!(((_a = this.meeting.self.permissions.chatPrivate) === null || _a === void 0 ? void 0 : _a.canSend) ||
+                ((_b = this.meeting.self.permissions.chatPrivate) === null || _b === void 0 ? void 0 : _b.canReceive));
+            if (!this.showPrivateChat) {
+                this.selectedUser = undefined;
+                this.chatSelectorChange.emit({ selectedUser: undefined });
+            }
+        };
+        this.onParticipantUpdate = () => {
+            var _a, _b, _c, _d;
+            if (!this.selectedUser)
+                return;
+            const participants = ((_d = (_c = (_b = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.participants) === null || _b === void 0 ? void 0 : _b.joined) === null || _c === void 0 ? void 0 : _c.toArray) === null || _d === void 0 ? void 0 : _d.call(_c)) || [];
+            if (!participants.some((p) => { var _a; return p.id === ((_a = this.selectedUser) === null || _a === void 0 ? void 0 : _a.id); })) {
+                this.selectedUser = undefined;
+                this.chatSelectorChange.emit({ selectedUser: undefined });
+            }
+        };
+        this.participantJoinedListener = (data) => {
+            this.$paginatedListRef.onNewNode(data);
+        };
+        this.participantLeftListener = (data) => {
+            this.$paginatedListRef.onNodeDelete(data.id);
+            this.onParticipantUpdate();
+        };
+        // @ts-ignore - unused params
+        this.getParticipants = async (timestamp, size, reversed) => {
+            const meeting = this.meeting;
+            if (!meeting)
+                return [];
+            /**
+             * FIXME(ikabra): This is a temporary hack in place to handle the initial load
+             * and not repeat participants when a user reaches the top of the list.
+             * This must be replaced by actual pagination APIs from backend for participants.
+             */
+            if (!timestamp)
+                return [];
+            const participants = meeting.participants.joined.toArray();
+            return participants;
+        };
+        this.createPaticipantNodes = (data) => {
+            return data.map((participant) => (index$1.h("div", { class: "private-chat-label", id: participant.id, onClick: () => this.selectUser(participant) }, index$1.h("rtk-avatar", { size: "sm", participant: participant }), index$1.h("span", null, participant.name))));
+        };
+    }
+    /** */
+    async close() {
+        if (!this.isOpen)
+            return;
+        this.isOpen = false;
+        this.dropdownToggle.emit({ open: false });
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+        this.overridesChanged(this.overrides);
+    }
+    disconnectedCallback() {
+        var _a, _b, _c;
+        if (!this.meeting)
+            return;
+        const { self, participants } = this.meeting;
+        (_a = self === null || self === void 0 ? void 0 : self.permissions) === null || _a === void 0 ? void 0 : _a.off('*', this.chatPermissionUpdateListener);
+        (_b = participants === null || participants === void 0 ? void 0 : participants.joined) === null || _b === void 0 ? void 0 : _b.off('participantJoined', this.participantJoinedListener);
+        (_c = participants === null || participants === void 0 ? void 0 : participants.joined) === null || _c === void 0 ? void 0 : _c.off('participantLeft', this.participantLeftListener);
+    }
+    overridesChanged(overrides) {
+        var _a, _b;
+        if (!this.meeting || this.meeting.self)
+            return;
+        this.showPrivateChat =
+            !!(((_a = this.meeting.self.permissions.chatPrivate) === null || _a === void 0 ? void 0 : _a.canSend) ||
+                ((_b = this.meeting.self.permissions.chatPrivate) === null || _b === void 0 ? void 0 : _b.canReceive)) && !overrides.disablePrivateChat;
+    }
+    meetingChanged(meeting, oldMeeting) {
+        var _a, _b, _c, _d, _e, _f;
+        if (oldMeeting)
+            this.disconnectMeeting(oldMeeting);
+        if (!meeting || !meeting.chat)
+            return;
+        this.showPrivateChat =
+            !!(((_a = meeting.self.permissions.chatPrivate) === null || _a === void 0 ? void 0 : _a.canSend) ||
+                ((_b = meeting.self.permissions.chatPrivate) === null || _b === void 0 ? void 0 : _b.canReceive)) && !this.overrides.disablePrivateChat;
+        this.onParticipantUpdate();
+        meeting.self.permissions.on('*', this.chatPermissionUpdateListener);
+        (_d = (_c = meeting === null || meeting === void 0 ? void 0 : meeting.participants) === null || _c === void 0 ? void 0 : _c.joined) === null || _d === void 0 ? void 0 : _d.on('participantJoined', this.participantJoinedListener);
+        (_f = (_e = meeting === null || meeting === void 0 ? void 0 : meeting.participants) === null || _e === void 0 ? void 0 : _e.joined) === null || _f === void 0 ? void 0 : _f.on('participantLeft', this.participantLeftListener);
+    }
+    render() {
+        if (!this.showPrivateChat)
+            return null;
+        return (index$1.h(index$1.Host, null, index$1.h("div", { class: "chat-header", onClick: this.toggle }, index$1.h("div", { class: "chat-header-label" }, index$1.h("rtk-icon", { icon: this.iconPack.participants, size: "sm" }), !this.selectedUser ? this.t('chat.everyone') : this.selectedUser.name), index$1.h("div", { class: "chevron" }, index$1.h("rtk-icon", { icon: this.isOpen ? this.iconPack.chevron_up : this.iconPack.chevron_down, size: "sm" }))), index$1.h("div", { class: { dropdown: true, open: this.isOpen, scrollbar: true } }, index$1.h("div", { class: "public-chat-group-label", onClick: () => this.selectUser(undefined) }, index$1.h("div", { class: "public-chat-icon" }, index$1.h("rtk-icon", { icon: this.iconPack.participants, size: "sm" })), this.t('chat.everyone')), index$1.h("rtk-paginated-list", { class: "chat-selector-paginated-list", ref: (el) => (this.$paginatedListRef = el), pageSize: this.pageSize, pagesAllowed: 3, fetchData: this.getParticipants, createNodes: this.createPaticipantNodes, emptyListLabel: this.t('participants.empty_list') }, index$1.h("slot", null)))));
+    }
+    static get watchers() { return {
+        "overrides": ["overridesChanged"],
+        "meeting": ["meetingChanged"]
+    }; }
+};
+__decorate$e([
+    index.SyncWithStore()
+], RtkChatSelector.prototype, "meeting", void 0);
+__decorate$e([
+    index.SyncWithStore()
+], RtkChatSelector.prototype, "states", void 0);
+__decorate$e([
+    index.SyncWithStore()
+], RtkChatSelector.prototype, "config", void 0);
+__decorate$e([
+    index.SyncWithStore()
+], RtkChatSelector.prototype, "iconPack", void 0);
+__decorate$e([
+    index.SyncWithStore()
+], RtkChatSelector.prototype, "t", void 0);
+__decorate$e([
+    index.SyncWithStore()
+], RtkChatSelector.prototype, "overrides", void 0);
+RtkChatSelector.style = RtkChatSelectorStyle0;
+
 const rtkDraftAttachmentViewCss = ":host{display:flex;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));border-top-left-radius:var(--rtk-border-radius-md, 8px);border-top-right-radius:var(--rtk-border-radius-md, 8px)}.preview-overlay{position:absolute;top:var(--rtk-space-0, 0px);right:var(--rtk-space-0, 0px);bottom:var(--rtk-space-0, 0px);left:var(--rtk-space-0, 0px);background-color:inherit}.preview{position:absolute;top:var(--rtk-space-4, 16px);left:var(--rtk-space-4, 16px);max-width:-moz-fit-content;max-width:fit-content;max-height:var(--rtk-space-20, 80px)}.preview:hover rtk-tooltip{display:block}.preview rtk-tooltip{position:absolute;top:calc(var(--rtk-space-1, 4px) * -1);left:calc(var(--rtk-space-1, 4px) * -1);display:none;margin-left:calc(var(--rtk-space-1, 4px) * -1);margin-top:calc(var(--rtk-space-1, 4px) * -1)}.preview rtk-button{display:flex;height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));border:1px solid rgb(var(--rtk-colors-text-1000, 255 255 255))}.preview rtk-icon{height:var(--rtk-space-3, 12px);width:var(--rtk-space-3, 12px);color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.preview-image{height:var(--rtk-space-16, 64px);width:var(--rtk-space-16, 64px);-o-object-fit:cover;object-fit:cover;max-height:100%;max-width:100%;overflow:clip;border-radius:var(--rtk-border-radius-md, 8px)}.preview-file{padding-left:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-3, 12px);padding-top:var(--rtk-space-2, 8px);padding-bottom:var(--rtk-space-2, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--rtk-border-radius-md, 8px);max-width:200px}";
 const RtkDraftAttachmentViewStyle0 = rtkDraftAttachmentViewCss;
 
-var __decorate$c = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$d = (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);
@@ -913,16 +1013,16 @@ const RtkDraftAttachmentView = class {
         this.onAttachmentChange();
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '5dc2f4f2904db3b33f3682f353010b7d5d3db2d5' }, index$1.h("div", { key: 'b10dfebd718959e55a18db4c31cded17af4fa9fd', class: "preview-overlay" }, index$1.h("div", { key: '3c4cff755b989547d7c348271ca8bd02618e50f5', class: "preview" }, index$1.h("rtk-tooltip", { key: '172e504a86963d269935a49da8b7a6c51da7dc71', label: this.t('chat.cancel_upload') }, index$1.h("rtk-button", { key: '421a172fd744cb65b066a4cb13f81d80e8fc7594', variant: "secondary", kind: "icon", onClick: this.onDeleteClickHandler }, index$1.h("rtk-icon", { key: '1b030c644ea7eec33cc760b947fbcc5d679a1abb', icon: this.iconPack.dismiss }))), this.attachment.type === 'image' ? (index$1.h("img", { class: "preview-image", src: this.filePreview })) : (index$1.h("div", { class: "preview-file" }, index$1.h("span", null, this.filePreview)))))));
+        return (index$1.h(index$1.Host, { key: '51ac9914a6c3626f3abd63d8101dd33d956f0cb0' }, index$1.h("div", { key: '9520035fca81e905b7bcc3696ec9803ca127a370', class: "preview-overlay" }, index$1.h("div", { key: '6c8139ece3ce95836f7853a160c0a01e298c2892', class: "preview" }, index$1.h("rtk-tooltip", { key: 'd3379d7a4a3b09c15d75ec4fce8bc7c2e89b1df4', label: this.t('chat.cancel_upload') }, index$1.h("rtk-button", { key: 'd5badd1b4a2fce0f2958d8923adde9353562eb8a', variant: "secondary", kind: "icon", onClick: this.onDeleteClickHandler }, index$1.h("rtk-icon", { key: '4acde8f6352eab6e2277f6317ef226d22defe4e0', icon: this.iconPack.dismiss }))), this.attachment.type === 'image' ? (index$1.h("img", { class: "preview-image", src: this.filePreview })) : (index$1.h("div", { class: "preview-file" }, index$1.h("span", null, this.filePreview)))))));
     }
     static get watchers() { return {
         "attachment": ["onAttachmentChange"]
     }; }
 };
-__decorate$c([
+__decorate$d([
     index.SyncWithStore()
 ], RtkDraftAttachmentView.prototype, "iconPack", void 0);
-__decorate$c([
+__decorate$d([
     index.SyncWithStore()
 ], RtkDraftAttachmentView.prototype, "t", void 0);
 RtkDraftAttachmentView.style = RtkDraftAttachmentViewStyle0;
@@ -941,10 +1041,10 @@ const fetchEmojis = async () => {
     return cachedEmojis;
 };
 
-const rtkEmojiPickerCss = ":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{width:100%}.emoji-parent{box-sizing:border-box;display:inline-flex;height:var(--rtk-space-64, 256px);width:100%;max-width:640px;flex-direction:column;padding:var(--rtk-space-2, 8px);padding-bottom:var(--rtk-space-0, 0px);-webkit-user-select:none;-moz-user-select:none;user-select:none;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;--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))}.close-parent{display:flex;flex:1 1 0%;justify-content:flex-end;padding:var(--rtk-space-0, 0px);--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))}#emoji-grid{margin-top:var(--rtk-space-2, 8px);box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;overflow-x:hidden;overflow-y:scroll;height:100%;grid-auto-rows:minmax(min-content, max-content)}#loader{display:flex;height:100%;width:100%;align-items:center;justify-content:center}input{display:block;height:var(--rtk-space-8, 32px);padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px);font-size:14px;border-width:var(--rtk-border-width-none, 0);border-style:solid;border-style:none;border-color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64));--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-900, 255 255 255 / 0.88))}input::-moz-placeholder{color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}input::placeholder{color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}input{border-radius:var(--rtk-border-radius-sm, 4px);outline:2px solid transparent;outline-offset:2px;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;border:var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60))}input:focus{--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-border-opacity));--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);--tw-ring-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-ring-opacity));--tw-ring-opacity:0.3}.emoji{height:var(--rtk-space-10, 40px);width:var(--rtk-space-10, 40px);font-size:20px;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}";
+const rtkEmojiPickerCss = ":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{width:100%}.emoji-parent{box-sizing:border-box;display:inline-flex;height:var(--rtk-space-64, 256px);width:100%;max-width:640px;flex-direction:column;padding:var(--rtk-space-2, 8px);padding-bottom:var(--rtk-space-0, 0px);-webkit-user-select:none;-moz-user-select:none;user-select:none;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;--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))}.close-parent{display:flex;flex:1 1 0%;justify-content:flex-end;padding:var(--rtk-space-0, 0px);--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))}#emoji-grid{margin-top:var(--rtk-space-2, 8px);box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;overflow-x:hidden;overflow-y:scroll;height:100%;grid-auto-rows:minmax(min-content, max-content)}#loader{display:flex;height:100%;width:100%;align-items:center;justify-content:center}input{display:block;height:var(--rtk-space-8, 32px);padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px);font-size:14px;border-width:var(--rtk-border-width-none, 0);border-style:solid;border-style:none;border-color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64));--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-900, 255 255 255 / 0.88))}input::-moz-placeholder{color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}input::placeholder{color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}input{border-radius:var(--rtk-border-radius-sm, 4px);outline:2px solid transparent;outline-offset:2px;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;border:var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60))}input:focus{--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-border-opacity));--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);--tw-ring-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-ring-opacity));--tw-ring-opacity:0.3}.emoji{height:var(--rtk-space-10, 40px);width:var(--rtk-space-10, 40px);font-size:20px;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}";
 const RtkEmojiPickerStyle0 = rtkEmojiPickerCss;
 
-var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$c = (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);
@@ -998,13 +1098,13 @@ const RtkEmojiPicker = class {
         return (index$1.h("div", { id: "emoji-grid", class: "scrollbar max-w-40" }, this.filteredEmojis.map((e) => (index$1.h("rtk-button", { key: `emoji-button-${e.name}`, class: "emoji", variant: "ghost", kind: "icon", title: e.name, onClick: () => this.handleEmojiClick(e.emoji) }, e.emoji)))));
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '13b76b472a4edf495e7bfdf5ac5d09c02c8c383c' }, index$1.h("div", { key: '7cc0a162ffce7699ba8a52a03503b47bb5cf99ef', class: 'close-parent' }, index$1.h("rtk-button", { key: '4f42ddea82a1e67e01a05cbb66aa6de0116a424b', variant: "ghost", kind: "icon", class: "close", onClick: () => { var _a; return (_a = this.pickerClose) === null || _a === void 0 ? void 0 : _a.emit(); }, "aria-label": this.t('close') }, index$1.h("rtk-icon", { key: '47931529abc70c2cc0799254f7012bc3d622df39', icon: this.iconPack.dismiss }))), index$1.h("div", { key: '91c1356be602e7d894c29793df4ea4f83cc3e2a7', class: 'emoji-parent' }, index$1.h("input", { key: '2e141a5bf7f4e9376f9d83d443937b39637e1caf', value: this.filterVal, onInput: (event) => this.handleInputChange(event.target), placeholder: this.t('search'), ref: (el) => (this.inputElement = el) }), this.mapEmojiList())));
+        return (index$1.h(index$1.Host, { key: 'db0bbe8c8af774ca199ac800fb2a0fba9ef7ab6d' }, index$1.h("div", { key: '3e51dd2b14a87ebc0c65ee406ec67f92722296ab', class: 'close-parent' }, index$1.h("rtk-button", { key: 'a8697bf95723f0598de3e2b6f88729562466ed81', variant: "ghost", kind: "icon", class: "close", onClick: () => { var _a; return (_a = this.pickerClose) === null || _a === void 0 ? void 0 : _a.emit(); }, "aria-label": this.t('close') }, index$1.h("rtk-icon", { key: 'dc787e4ccf8a6f170ccd1f0954602a08a85b12ad', icon: this.iconPack.dismiss }))), index$1.h("div", { key: '77f7377f40708c4f5fa3e531621660bf68f01b4b', class: 'emoji-parent' }, index$1.h("input", { key: '7db399dc58c0c6863db8ed1c80ac313417eab8c9', value: this.filterVal, onInput: (event) => this.handleInputChange(event.target), placeholder: this.t('search'), ref: (el) => (this.inputElement = el) }), this.mapEmojiList())));
     }
 };
-__decorate$b([
+__decorate$c([
     index.SyncWithStore()
 ], RtkEmojiPicker.prototype, "iconPack", void 0);
-__decorate$b([
+__decorate$c([
     index.SyncWithStore()
 ], RtkEmojiPicker.prototype, "t", void 0);
 RtkEmojiPicker.style = RtkEmojiPickerStyle0;
@@ -1012,7 +1112,7 @@ RtkEmojiPicker.style = RtkEmojiPickerStyle0;
 const rtkEmojiPickerButtonCss = ":host{}";
 const RtkEmojiPickerButtonStyle0 = rtkEmojiPickerButtonCss;
 
-var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$b = (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);
@@ -1031,13 +1131,13 @@ const RtkEmojiPickerButton = class {
         this.t = uiStore.useLanguage();
     }
     render() {
-        return (index$1.h("rtk-tooltip", { key: '16b0af8b5d8bb121ebbeb80c2f6dd6bc5b53fc06', label: this.t('chat.send_emoji') }, index$1.h("rtk-button", { key: 'cb6d682ce5952173cbd2aceeaa9c20bbd7066c79', variant: "ghost", kind: "icon", class: { active: this.isActive }, title: this.t('chat.send_emoji') }, index$1.h("rtk-icon", { key: '2f414ed05d6cd4d00393fefbb7d4e745d49210a1', icon: this.iconPack.emoji_multiple }))));
+        return (index$1.h("rtk-tooltip", { key: '82c39530cddfd5cab8672cc5f7f590587749f9cc', label: this.t('chat.send_emoji') }, index$1.h("rtk-button", { key: '8e7ee7dbe901b78482ad3f828bb28bda1fdc36b7', variant: "ghost", kind: "icon", class: { active: this.isActive }, title: this.t('chat.send_emoji') }, index$1.h("rtk-icon", { key: 'a83691903dae86b3cb7c8cf17fb488e4da13090b', icon: this.iconPack.emoji_multiple }))));
     }
 };
-__decorate$a([
+__decorate$b([
     index.SyncWithStore()
 ], RtkEmojiPickerButton.prototype, "iconPack", void 0);
-__decorate$a([
+__decorate$b([
     index.SyncWithStore()
 ], RtkEmojiPickerButton.prototype, "t", void 0);
 RtkEmojiPickerButton.style = RtkEmojiPickerButtonStyle0;
@@ -1045,7 +1145,7 @@ RtkEmojiPickerButton.style = RtkEmojiPickerButtonStyle0;
 const rtkFileMessageViewCss = ":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)}.file{display:flex;align-items:center;gap:var(--rtk-space-1, 4px);padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px);padding-top:var(--rtk-space-1, 4px);padding-bottom:var(--rtk-space-1, 4px);min-width:var(--rtk-space-40, 160px);max-width:var(--rtk-space-64, 256px);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));color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}.file .file-data{margin-left:var(--rtk-space-1, 4px);flex:1 1 0%}.file .file-data .name{word-break:break-all;color:rgb(var(--rtk-colors-text-1000, 255 255 255));overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.file .file-data .file-data-split{margin-top:var(--rtk-space-0\\.5, 2px);display:flex;align-items:center;font-size:12px}.file .file-data .file-data-split .ext{margin-right:var(--rtk-space-2, 8px);text-transform:uppercase;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.file .file-data .file-data-split .divider{height:var(--rtk-space-4, 16px);width:var(--rtk-space-0\\.5, 2px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.file .file-data .file-data-split .size{margin-left:var(--rtk-space-2, 8px)}";
 const RtkFileMessageViewStyle0 = rtkFileMessageViewCss;
 
-var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$a = (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);
@@ -1062,10 +1162,10 @@ const RtkFileMessageView = class {
         this.iconPack = uiStore.defaultIconPack;
     }
     render() {
-        return (index$1.h("div", { key: '8b4778c0c9cff1d4fc5b45e446cd450d7b8b9156', class: "file" }, index$1.h("rtk-button", { key: '6c72f68880e3bba50e8e5ebe7abd6127de227178', variant: "secondary", kind: "icon", onClick: () => file.downloadFile(string.sanitizeLink(this.url), { name: this.name, fallbackName: 'file' }), part: "button" }, index$1.h("rtk-icon", { key: '62be4e65fc87ca1721b3ab1e3e634afb6d45f3b4', icon: this.iconPack.download })), index$1.h("div", { key: '407c9ca4a0f1be967f5d2cb08f3c15b814d425bb', class: "file-data" }, index$1.h("div", { key: '89fdb171090b4f0500db05bd1ee2908c9f393036', class: "name" }, this.name), index$1.h("div", { key: 'fafc637f7077925b9f25dc9615124a18c47ff684', class: "file-data-split" }, index$1.h("div", { key: '80f45099fbe958ac7d951af08334509d4bada1e0', class: "ext" }, file.getExtension(this.name)), index$1.h("span", { key: 'befbc0bc7065dbf3cc76c2c20091fa30c2f30a52', class: "divider" }), index$1.h("div", { key: '75a2ad121ac602c079eb7e08390a5379ec35f4d8', class: "size" }, file.getFileSize(this.size))))));
+        return (index$1.h("div", { key: '9fce348979b0354484f0deeddc6e55007ef70ae5', class: "file" }, index$1.h("rtk-button", { key: '22bc5f6cdff07ec4f9cdb1b588b64e5e604d0029', variant: "secondary", kind: "icon", onClick: () => file.downloadFile(string.sanitizeLink(this.url), { name: this.name, fallbackName: 'file' }), part: "button" }, index$1.h("rtk-icon", { key: '3d46920c69604896bba651ae8205d3a761ffdeb7', icon: this.iconPack.download })), index$1.h("div", { key: 'c42a4c9bdd415d4d307efcb4f375f575220e473a', class: "file-data" }, index$1.h("div", { key: 'fe9bd86c88ce3184ed0b38dfe312bf7ac0207551', class: "name" }, this.name), index$1.h("div", { key: '93aa6bf4c3933b292c59a1522b8398e96938aba3', class: "file-data-split" }, index$1.h("div", { key: '2807cbf9844af17617ec76db10689fc6dcb80e0e', class: "ext" }, file.getExtension(this.name)), index$1.h("span", { key: 'fa0a03cf79b2f4dee34a11fb0a0bf82a608ca3c1', class: "divider" }), index$1.h("div", { key: '0fd5d15e43aca15ffd3ae2fc6b176c0455ea5db3', class: "size" }, file.getFileSize(this.size))))));
     }
 };
-__decorate$9([
+__decorate$a([
     index.SyncWithStore()
 ], RtkFileMessageView.prototype, "iconPack", void 0);
 RtkFileMessageView.style = RtkFileMessageViewStyle0;
@@ -1073,7 +1173,7 @@ RtkFileMessageView.style = RtkFileMessageViewStyle0;
 const rtkFilePickerButtonCss = ":host{}";
 const RtkFilePickerButtonStyle0 = rtkFilePickerButtonCss;
 
-var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$9 = (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);
@@ -1118,13 +1218,13 @@ const RtkFilePickerButton = class {
     render() {
         const label = this.label || this.t('chat.send_file');
         const icon = this.iconPack[this.icon];
-        return (index$1.h("rtk-tooltip", { key: '9a4e6046f0ee0972678b64365e14ed1762a0a23a', label: label }, index$1.h("rtk-button", { key: 'e5cdac75458861a2e5258f4bf4af43f818ce599b', variant: "ghost", kind: "icon", onClick: () => this.uploadFile(), title: label }, index$1.h("rtk-icon", { key: '17407d82abb9352c64d37e26d1fc4fd407369703', icon: icon }))));
+        return (index$1.h("rtk-tooltip", { key: 'c97c7e1e106e14f2443dd405fd6657a14d9d315c', label: label }, index$1.h("rtk-button", { key: 'cffa7ef14cc7fe0285e642ca76b658b6c70d4b42', variant: "ghost", kind: "icon", onClick: () => this.uploadFile(), title: label }, index$1.h("rtk-icon", { key: '47133f919946ce2a63e4f2b64977f1127a4eae7c', icon: icon }))));
     }
 };
-__decorate$8([
+__decorate$9([
     index.SyncWithStore()
 ], RtkFilePickerButton.prototype, "iconPack", void 0);
-__decorate$8([
+__decorate$9([
     index.SyncWithStore()
 ], RtkFilePickerButton.prototype, "t", void 0);
 RtkFilePickerButton.style = RtkFilePickerButtonStyle0;
@@ -1157,7 +1257,7 @@ RtkIcon.style = RtkIconStyle0;
 const rtkImageMessageViewCss = ":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)}.image-spinner{cursor:wait}.image-errored{cursor:not-allowed}.image{display:block;font-family:var(--rtk-font-family, sans-serif);color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));position:relative;height:var(--rtk-space-40, 160px);max-width:var(--rtk-space-64, 256px);cursor:pointer}.image img{display:none;height:100%;width:100%;border-radius:var(--rtk-border-radius-sm, 4px);-o-object-fit:cover;object-fit:cover}.image .image-spinner{display:flex;height:100%;width:100%;flex-direction:column;align-items:center;justify-content:center;border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}.image .image-spinner rtk-spinner{--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-text-opacity))}.image .image-errored{display:flex;height:100%;width:100%;flex-direction:column;align-items:center;justify-content:center;border-radius:var(--rtk-border-radius-sm, 4px);background-color:rgba(var(--rtk-colors-danger, 255 45 45) / 0.1);--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}.image .actions{display:none;height:var(--rtk-space-8, 32px);align-items:center;position:absolute;top:var(--rtk-space-2, 8px);right:var(--rtk-space-2, 8px);border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255));overflow:hidden;--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.image .actions .action{height:var(--rtk-space-8, 32px);width:var(--rtk-space-8, 32px);border-radius:var(--rtk-border-radius-none, 0);border-width:var(--rtk-border-width-none, 0);border-style:none;background-color:transparent;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.image .actions .action:hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.image.loaded img{display:block}.image.loaded .image-spinner{display:none}.image:hover .actions,.image:focus .actions{display:flex}";
 const RtkImageMessageViewStyle0 = rtkImageMessageViewCss;
 
-var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$8 = (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);
@@ -1178,7 +1278,7 @@ const RtkImageMessageView = class {
         this.status = 'loading';
     }
     render() {
-        return (index$1.h("div", { key: 'f74af6a1b2b3b93a7b267cda9e43d232c66ea520', class: { image: true, loaded: this.status === 'loaded' } }, index$1.h("img", { key: '779c07d162a10153753f646bca05a1af6f67a070', src: string.sanitizeLink(this.url), onLoad: () => {
+        return (index$1.h("div", { key: '5fd48d25a86c8a1f3084ff4c27ba95ddca04482f', class: { image: true, loaded: this.status === 'loaded' } }, index$1.h("img", { key: '99d019ebaf2e4deb2f6f9f8541f1bd67bc089fee', src: string.sanitizeLink(this.url), onLoad: () => {
                 this.status = 'loaded';
             }, onError: () => {
                 this.status = 'errored';
@@ -1186,15 +1286,15 @@ const RtkImageMessageView = class {
                 if (this.status === 'loaded') {
                     this.onPreview.emit(this.url);
                 }
-            } }), this.status === 'loading' && (index$1.h("div", { key: 'c6bb6bf418436dabc1a73d65ad0975d37beb048b', class: "image-spinner", title: this.t('chat.img.loading'), "aria-label": this.t('chat.img.loading') }, index$1.h("rtk-spinner", { key: 'ead3419ec79f0593ea13f5093ae2abebd7179a71', iconPack: this.iconPack }))), this.status === 'errored' && (index$1.h("div", { key: '871faf9faeba4878c8056d1311773e6b0da5489a', class: "image-errored", title: this.t('chat.error.img_not_found'), "aria-label": this.t('chat.error.img_not_found') }, index$1.h("rtk-icon", { key: 'b800d614db9abdefd60bef87133b0ecccee80a5e', icon: this.iconPack.image_off }))), this.status === 'loaded' && (index$1.h("div", { key: '75656710da042f44d995f570a3a58d741933095c', class: "actions" }, index$1.h("rtk-button", { key: 'bf62519599d17503ebaa2046d932748ad2e0b68f', class: "action", variant: "secondary", kind: "icon", onClick: () => {
+            } }), this.status === 'loading' && (index$1.h("div", { key: '9e0eba0b06ee2039d0a36f598e2b55b79c6d4151', class: "image-spinner", title: this.t('chat.img.loading'), "aria-label": this.t('chat.img.loading') }, index$1.h("rtk-spinner", { key: '0488df56c74ff7fbcb30ae7a16f77eca57cdd50a', iconPack: this.iconPack }))), this.status === 'errored' && (index$1.h("div", { key: 'd4f2cc45d94be0a4519d93169e337522f30949cf', class: "image-errored", title: this.t('chat.error.img_not_found'), "aria-label": this.t('chat.error.img_not_found') }, index$1.h("rtk-icon", { key: 'a633902737fe1a4690f349092fedb6d0c7a18bbf', icon: this.iconPack.image_off }))), this.status === 'loaded' && (index$1.h("div", { key: 'bfb0b8f3f130315e1691dd87f9be6de211d669cd', class: "actions" }, index$1.h("rtk-button", { key: 'c0e200f62e7896b11f0cb1717e15db96223b2b45', class: "action", variant: "secondary", kind: "icon", onClick: () => {
                 this.onPreview.emit(this.url);
-            } }, index$1.h("rtk-icon", { key: '200a6383f044f4744e575ac2bd65a9e6ecf26d4a', icon: this.iconPack.full_screen_maximize })), index$1.h("rtk-button", { key: 'ef63418289bf89db7f6ff8ab2a4f5cce44598d14', class: "action", variant: "secondary", kind: "icon", onClick: () => file.downloadFile(this.url, { fallbackName: 'image' }) }, index$1.h("rtk-icon", { key: '296f173d6cd72ec32181487ae74e7231212cd248', icon: this.iconPack.download }))))));
+            } }, index$1.h("rtk-icon", { key: '2527495fac5a7760c7a320c7f3fc769b4321dd66', icon: this.iconPack.full_screen_maximize })), index$1.h("rtk-button", { key: '80f46436895374dc43f9a3fb1adf2472c82c328b', class: "action", variant: "secondary", kind: "icon", onClick: () => file.downloadFile(this.url, { fallbackName: 'image' }) }, index$1.h("rtk-icon", { key: '5650cc2537980b244b31b937a5d367a800d0b0f9', icon: this.iconPack.download }))))));
     }
 };
-__decorate$7([
+__decorate$8([
     index.SyncWithStore()
 ], RtkImageMessageView.prototype, "iconPack", void 0);
-__decorate$7([
+__decorate$8([
     index.SyncWithStore()
 ], RtkImageMessageView.prototype, "t", void 0);
 RtkImageMessageView.style = RtkImageMessageViewStyle0;
@@ -1279,7 +1379,7 @@ const RtkMarkdownView = class {
         const slicedMessage = this.text.slice(0, this.maxLength);
         const withReply = chat.extractReplyBlock(slicedMessage, true);
         const withoutReply = chat.stripOutReplyBlock(slicedMessage);
-        return (index$1.h("p", { key: '8ec8d139843454330a7c2a6da1c46fa7c7a6c02f' }, withReply.length !== 0 && index$1.h("blockquote", { key: 'a2b2a90ee98f45f1ceb5c15cc327391150245567' }, this.renderMessage(withReply)), withoutReply.length !== 0 && this.renderMessage(withoutReply)));
+        return (index$1.h("p", { key: '8c05acbe5bf3ac4a006d572bf77739cf14bc3588' }, withReply.length !== 0 && index$1.h("blockquote", { key: '47f95aad469fd001f78dccf1caf5224f639c2d9e' }, this.renderMessage(withReply)), withoutReply.length !== 0 && this.renderMessage(withoutReply)));
     }
 };
 RtkMarkdownView.style = RtkMarkdownViewStyle0;
@@ -1609,7 +1709,7 @@ RtkMeeting.style = RtkMeetingStyle0;
 const rtkMenuCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{position:relative;display:inline-block;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}#menu-list{position:absolute;z-index:20;display:none}";
 const RtkMenuStyle0 = rtkMenuCss;
 
-var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$7 = (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);
@@ -1660,7 +1760,7 @@ const RtkMenu$1 = class {
         });
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'c5de1fb710d48142e20c3ea8144cffb807d56c63' }, index$1.h("span", { key: '07cf0464bc09c7e6ab1d05c17ba4b4219e5a229f', id: "trigger", ref: (el) => (this.triggerEl = el), onClick: () => {
+        return (index$1.h(index$1.Host, { key: '98d1a73c1fdd151945433a13dc1d9f11cfaaeb05' }, index$1.h("span", { key: '5cb225dca906f51ea4f9cfe999840af35cbbf865', id: "trigger", ref: (el) => (this.triggerEl = el), onClick: () => {
                 this.clickedThis = true;
                 if (this.menuListEl.style.display !== 'block') {
                     this.menuListEl.style.display = 'block';
@@ -1669,21 +1769,21 @@ const RtkMenu$1 = class {
                 else {
                     this.menuListEl.style.display = 'none';
                 }
-            } }, index$1.h("slot", { key: 'ee7b8769fa9dd5b8408332c4d467b03962dc396c', name: "trigger" })), index$1.h("span", { key: 'ba37ce9d08b3aadc54db3bbb5c397021e8fe7395', part: "menu-list", id: "menu-list", ref: (el) => (this.menuListEl = el) }, index$1.h("slot", { key: '22200083796195d51f175f0ffdeab023e732c9e0' }))));
+            } }, index$1.h("slot", { key: '75146b82e06b27ec57e85d741f42b6112d740334', name: "trigger" })), index$1.h("span", { key: 'ef16bf3d6197fd16fa7fb9dca36bc97f9cafec52', part: "menu-list", id: "menu-list", ref: (el) => (this.menuListEl = el) }, index$1.h("slot", { key: 'fa8644e4eff65fa5832d80cd53a70e626ea0b1e9' }))));
     }
 };
-__decorate$6([
+__decorate$7([
     index.SyncWithStore()
 ], RtkMenu$1.prototype, "iconPack", void 0);
-__decorate$6([
+__decorate$7([
     index.SyncWithStore()
 ], RtkMenu$1.prototype, "t", void 0);
 RtkMenu$1.style = RtkMenuStyle0;
 
-const rtkMenuItemCss = ":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;align-items:center;padding-left:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-3, 12px);padding-top:var(--rtk-space-2, 8px);padding-bottom:var(--rtk-space-2, 8px);cursor:pointer;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;color:rgb(var(--rtk-colors-text-1000, 255 255 255));font-size:14px}::slotted([slot='start']){margin-right:var(--rtk-space-2, 8px)}::slotted([slot='end']){margin-left:var(--rtk-space-2, 8px)}:host(:hover){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity))}:host(.primary:hover){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-bg-opacity))}:host(.red){--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}";
+const rtkMenuItemCss = ":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;align-items:center;padding-left:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-3, 12px);padding-top:var(--rtk-space-2, 8px);padding-bottom:var(--rtk-space-2, 8px);cursor:pointer;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;color:rgb(var(--rtk-colors-text-1000, 255 255 255));font-size:14px}::slotted([slot='start']){margin-right:var(--rtk-space-2, 8px)}::slotted([slot='end']){margin-left:var(--rtk-space-2, 8px)}:host(:hover){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity))}:host(.primary:hover){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-400, 53 110 253) / var(--tw-bg-opacity))}:host(.red){--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}";
 const RtkMenuItemStyle0 = rtkMenuItemCss;
 
-var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$6 = (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);
@@ -1704,21 +1804,21 @@ const RtkMenuItem = class {
         this.t = uiStore.useLanguage();
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '613d2db512a5ccbdd1c8c9e1da6a15487e3f6811', class: { [this.menuVariant]: true } }, index$1.h("slot", { key: '3bb27b46542ed03a01ff77efe1dc69554f9188db', name: "start" }), index$1.h("slot", { key: 'efe49fe8df4b2c1e1e3c2d1b87ee0ec9e8380a29' }), index$1.h("slot", { key: '83491fef2a3f1ebc846081893b20f2a6e6cb12c9', name: "end" })));
+        return (index$1.h(index$1.Host, { key: 'd9b20b45e47b9fe8ab36a87a66eac6386b4c678c', class: { [this.menuVariant]: true } }, index$1.h("slot", { key: '639bd9af7b8ecd614ea87a21906e250023889a1c', name: "start" }), index$1.h("slot", { key: '9b6aa572707a1f78c8f82873b40132ec09290404' }), index$1.h("slot", { key: '02c7034af853977922e5cf3ac30f88e5f0148d75', name: "end" })));
     }
 };
-__decorate$5([
+__decorate$6([
     index.SyncWithStore()
 ], RtkMenuItem.prototype, "iconPack", void 0);
-__decorate$5([
+__decorate$6([
     index.SyncWithStore()
 ], RtkMenuItem.prototype, "t", void 0);
 RtkMenuItem.style = RtkMenuItemStyle0;
 
-const rtkMenuListCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{display:flex;width:-moz-max-content;width:max-content;flex-direction:column;padding:var(--rtk-space-0, 0px);color:rgb(var(--rtk-colors-text-1000, 255 255 255));border-width:1px;border-style:solid;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));overflow:hidden;border-radius:var(--rtk-border-radius-sm, 4px);--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);-webkit-backdrop-filter:blur(60px);backdrop-filter:blur(60px)}:host(.primary){--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-brand-600, 13 81 253) / var(--tw-border-opacity));background-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / 0.3)}";
+const rtkMenuListCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{display:flex;width:-moz-max-content;width:max-content;flex-direction:column;padding:var(--rtk-space-0, 0px);color:rgb(var(--rtk-colors-text-1000, 255 255 255));border-width:1px;border-style:solid;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));overflow:hidden;border-radius:var(--rtk-border-radius-sm, 4px);--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);backdrop-filter:blur(60px)}:host(.primary){--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-brand-600, 13 81 253) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-bg-opacity))}";
 const RtkMenuListStyle0 = rtkMenuListCss;
 
-var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$5 = (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);
@@ -1739,13 +1839,13 @@ const RtkMenuList = class {
         this.t = uiStore.useLanguage();
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'e7b720a26e59508951d35ef90f1b5d4e0cbd4b14', class: { [this.menuVariant]: true } }, index$1.h("slot", { key: '344410259db395ccafd311ee00a7575f0c2c746a' })));
+        return (index$1.h(index$1.Host, { key: '0ac5ed2be7991106090b3ca0aa5a66a59f0e8250', class: { [this.menuVariant]: true } }, index$1.h("slot", { key: 'cd8312cfd2de7eeb7d590e4189f482d620f59ef8' })));
     }
 };
-__decorate$4([
+__decorate$5([
     index.SyncWithStore()
 ], RtkMenuList.prototype, "iconPack", void 0);
-__decorate$4([
+__decorate$5([
     index.SyncWithStore()
 ], RtkMenuList.prototype, "t", void 0);
 RtkMenuList.style = RtkMenuListStyle0;
@@ -1753,7 +1853,7 @@ RtkMenuList.style = RtkMenuListStyle0;
 const rtkMessageViewCss = ":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{max-width:var(--rtk-space-96, 384px)}.message-wrapper{display:flex;flex-direction:row-reverse;align-items:flex-start;gap:var(--rtk-space-2, 8px)}.message-wrapper.incoming{flex-direction:row}.message{display:flex;flex-direction:column;align-items:flex-end}.incoming .message{display:flex;flex-direction:column;align-items:flex-start}.header{margin-top:var(--rtk-space-1, 4px);margin-bottom:var(--rtk-space-1, 4px);align-self:flex-end;color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));font-size:12px;font-weight:600}.incoming .header{align-self:flex-start}.body{display:flex;flex-direction:column;min-width:var(--rtk-space-24, 96px);font-family:var(--rtk-font-family, sans-serif);color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));font-size:14px;line-height:1.375;position:relative}.bubble{max-width:90%;padding:var(--rtk-space-2, 8px);border-width:1px;border-style:solid;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-brand-600, 13 81 253) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));border-radius:var(--rtk-border-radius-md, 8px)}.incoming .bubble{--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity));--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-900, 255 255 255 / 0.88))}.metadata{margin-top:var(--rtk-space-2, 8px);display:flex;flex-direction:row;align-items:center;gap:var(--rtk-space-1, 4px);align-self:flex-end;font-size:11px;color:rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76))}.metadata-content{display:flex;flex-direction:row;align-items:center;gap:var(--rtk-space-1, 4px)}.avatar{display:none}rtk-menu{position:absolute;right:var(--rtk-space-1, 4px);top:var(--rtk-space-1, 4px);border-radius:var(--rtk-border-radius-lg, 12px)}rtk-menu rtk-icon{height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);cursor:pointer}.actions{display:flex;align-items:center;justify-content:center;border-width:1px;border-style:solid;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-brand-600, 13 81 253) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-bg-opacity));padding:var(--rtk-space-1, 4px);border-radius:var(--rtk-border-radius-md, 8px);border-width:var(--rtk-border-width-none, 0);border-style:none}.actions rtk-icon{height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.incoming rtk-avatar{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}.incoming .actions{--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity))}@media (min-width: 400px){.avatar{display:flex;width:var(--rtk-space-6, 24px)}.avatar rtk-avatar{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px);font-size:10px;overflow:clip;border-radius:9999px}}@media (hover: hover){rtk-menu{visibility:hidden}.body:hover rtk-menu{visibility:visible}}";
 const RtkMessageViewStyle0 = rtkMessageViewCss;
 
-var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$4 = (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);
@@ -1797,12 +1897,12 @@ const RtkMessageView = class {
         return (index$1.h(index$1.Host, { key: '3d53fc59bda6a82e4c4753e34f915c8f62611f6b' }, index$1.h("div", { key: '1f9cbd79c9e5526645fafd0c4436b91c6c612f08', class: { 'message-wrapper': true, [this.viewType]: true } }, !this.hideAvatar && (index$1.h("aside", { key: '23071b4dff9dd4ecc1385be9a1610ffbab98a9e9', class: "avatar", part: "avatar" }, index$1.h("rtk-avatar", { key: '9a4596ea3636188ef391e65f86d6a608b3aa02d5', participant: { name: this.authorName, picture: this.avatarUrl }, size: "sm" }))), index$1.h("div", { key: 'eefe1bf5803e371266a0b8ee230dd2f42a193dc2', class: "message", part: "message" }, !this.hideAuthorName && (index$1.h("div", { key: '45ba437f7a3ba2b253f22a1885d7e5be954a387e', class: "header" }, this.authorName, " ", this.isSelf ? ' (You)' : '')), index$1.h("div", { key: 'e9636fb45358423d5cc4e8144b6b47cf065117cc', class: { body: true, bubble: this.variant === 'bubble' } }, index$1.h("slot", { key: '1d6cd92eb8d4514b7ae4266fae8cd060a56ac1e3' }), !this.hideMetadata && !!this.time && (index$1.h("div", { key: '77b29974a960e4b4809025305ce005aeab8edebc', class: "metadata", title: date.formatDateTime(this.time) }, this.pinned && (index$1.h("span", { key: 'e6b99085f2cbcbc9505c20e5407a98c382306614', class: "metadata-content" }, index$1.h("rtk-icon", { key: '45ad875ef38b1db0105c85659cf938cc9bd792d8', icon: this.iconPack.pin, size: "sm" }), " \u2022")), this.isEdited && (index$1.h("span", { key: '48d5ecd659fe2308d8c33e94a2216049a2bea5ef', class: "metadata-content" }, index$1.h("span", { key: '9203ff6d3f65b81b875f5bc17231fd2c65c1c2c2' }, "Edited"), " \u2022")), date.elapsedDuration(this.time, new Date(Date.now())))), this.actions.length !== 0 && this.renderActions())))));
     }
 };
-__decorate$3([
+__decorate$4([
     index.SyncWithStore()
 ], RtkMessageView.prototype, "iconPack", void 0);
 RtkMessageView.style = RtkMessageViewStyle0;
 
-const rtkPaginatedListCss = ".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;flex:1}.container{box-sizing:border-box;display:flex;flex-direction:column-reverse;padding-top:var(--rtk-space-4, 16px);padding-bottom:var(--rtk-space-4, 16px);padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px);flex:1 0 0px;overflow-y:scroll}.file-picker{display:none}.chat *:first-child{margin-top:var(--rtk-space-0, 0px)}.chat .head{display:flex;align-items:center}.chat .head .name{margin-right:var(--rtk-space-4, 16px);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{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-2, 8px);overflow-wrap:break-word;font-size:14px;line-height:1.375}.chat .body .emoji{font-size:24px}p{margin-top:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-3, 12px)}rtk-text-message,rtk-image-message,rtk-file-message{margin-top:var(--rtk-space-4, 16px);display:block;padding-left:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-3, 12px);font-family:var(--rtk-font-family, sans-serif);color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));box-sizing:border-box}*[is-continued]{margin-top:var(--rtk-space-3, 12px)}rtk-text-message[is-continued]{margin-top:var(--rtk-space-2, 8px)}.chat .image{position:relative;height:var(--rtk-space-40, 160px);max-width:var(--rtk-space-64, 256px);cursor:pointer}.chat .image img{display:none;height:100%;width:100%;border-radius:var(--rtk-border-radius-sm, 4px);-o-object-fit:cover;object-fit:cover}.chat .image .image-spinner{display:flex;height:100%;width:100%;flex-direction:column;align-items:center;justify-content:center;border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}.chat .image .image-spinner rtk-spinner{--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-text-opacity))}.chat .image .image-errored{display:flex;height:100%;width:100%;flex-direction:column;align-items:center;justify-content:center;border-radius:var(--rtk-border-radius-sm, 4px);background-color:rgba(var(--rtk-colors-danger, 255 45 45) / 0.1);--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}.chat .image .actions{display:none;height:var(--rtk-space-8, 32px);align-items:center;position:absolute;top:var(--rtk-space-2, 8px);right:var(--rtk-space-2, 8px);border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255));overflow:hidden;--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.chat .image .actions .action{height:var(--rtk-space-8, 32px);width:var(--rtk-space-8, 32px);border-radius:var(--rtk-border-radius-none, 0);border-width:var(--rtk-border-width-none, 0);border-style:none;background-color:transparent;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.chat .image .actions .action:hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.image.loaded img{display:block}.image.loaded .image-spinner{display:none}.image:hover .actions,.image:focus .actions{display:flex}.chat .file{display:flex;align-items:center;gap:var(--rtk-space-1, 4px);padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px);padding-top:var(--rtk-space-1\\.5, 6px);padding-bottom:var(--rtk-space-1\\.5, 6px);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));color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}.chat .file .file-data{flex:1 1 0%}.chat .file .file-data .name{word-break:break-all;color:rgb(var(--rtk-colors-text-1000, 255 255 255));overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.chat .file .file-data .file-data-split{margin-top:var(--rtk-space-0\\.5, 2px);display:flex;align-items:center;font-size:12px}.chat .file .file-data .file-data-split .ext{margin-right:var(--rtk-space-2, 8px);text-transform:uppercase;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.chat .file .file-data .file-data-split .divider{height:var(--rtk-space-4, 16px);width:var(--rtk-space-0\\.5, 2px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.chat .file .file-data .file-data-split .size{margin-left:var(--rtk-space-2, 8px)}.smallest-dom-element{width:1px}#top-scroll{transform:translateY(20vh);transform:translateY(20px)}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}.show-new-messages-ctr{position:absolute;bottom:var(--rtk-space-4, 16px);right:var(--rtk-space-4, 16px);z-index:10;margin-top:calc(var(--rtk-space-14, 56px) * -1);--tw-translate-y:var(--rtk-space-28, 112px);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-ctr.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));cursor:pointer;opacity:1}.show-new-messages{pointer-events:auto;border-radius:9999px}.show-new-messages:hover{border-radius:9999px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-ring-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}rtk-spinner,.empty-list{margin:auto}.page-wrapper{margin-left:var(--rtk-space-1, 4px);margin-right:var(--rtk-space-1, 4px);display:flex;flex-direction:column-reverse}.message-wrapper{margin-bottom:var(--rtk-space-2, 8px)}.pinned .message-wrapper{position:relative}.pinned .pin-icon{position:absolute;right:calc(var(--rtk-space-1, 4px) * -1);top:calc(var(--rtk-space-1, 4px) * -1);display:flex;border-radius:var(--rtk-border-radius-sm, 4px)}.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)}.load-more-on-top-container{pointer-events:none;position:absolute;top:var(--rtk-space-2, 8px);right:var(--rtk-space-4, 16px);z-index:10}.load-more-icon{pointer-events:auto;border-radius:9999px}.load-more-icon:hover{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-ring-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}";
+const rtkPaginatedListCss = ".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;flex:1}:host(.chat-selector-paginated-list) .container{box-sizing:border-box;display:flex;flex-direction:column;padding:var(--rtk-space-2, 8px);flex:1 0 0px;overflow-y:scroll}:host(.chat-selector-paginated-list) .private-chat-label{display:flex;width:100%;cursor:pointer;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--rtk-space-2, 8px);padding-top:var(--rtk-space-3, 12px);padding-bottom:var(--rtk-space-3, 12px)}:host(.chat-selector-paginated-list) .private-chat-label rtk-avatar{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px)}:host(.chat-selector-paginated-list) .show-new-messages-ctr.active{display:none}:host(.pinned-message-selector-paginated-list) .container{box-sizing:border-box;display:flex;flex-direction:column-reverse;padding:var(--rtk-space-2, 8px);flex:1 0 0px;overflow-y:scroll}:host(.pinned-message-selector-paginated-list) .page{position:relative;box-sizing:border-box}:host(.pinned-message-selector-paginated-list) .pinned-message{display:flex;width:100%;cursor:pointer;flex-direction:row;align-items:flex-start;gap:var(--rtk-space-2, 8px);border-radius:var(--rtk-border-radius-sm, 4px);padding-top:var(--rtk-space-2, 8px);padding-bottom:var(--rtk-space-2, 8px)}:host(.pinned-message-selector-paginated-list) .pinned-message:hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}:host(.pinned-message-selector-paginated-list) .pinned-message-content{display:flex;min-width:var(--rtk-space-0, 0px);flex:1 1 0%;flex-direction:column}:host(.pinned-message-selector-paginated-list) .pinned-message-time{font-size:12px;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}:host(.pinned-message-selector-paginated-list) .pinned-message-preview{margin-bottom:var(--rtk-space-2, 8px);word-break:break-all;color:rgb(var(--rtk-colors-text-1000, 255 255 255));overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}:host(.pinned-message-selector-paginated-list) rtk-avatar{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px)}.container{box-sizing:border-box;display:flex;flex-direction:column-reverse;padding-top:var(--rtk-space-4, 16px);padding-bottom:var(--rtk-space-4, 16px);padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px);flex:1 0 0px;overflow-y:scroll}.file-picker{display:none}.chat *:first-child{margin-top:var(--rtk-space-0, 0px)}.chat .head{display:flex;align-items:center}.chat .head .name{margin-right:var(--rtk-space-4, 16px);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{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-2, 8px);overflow-wrap:break-word;font-size:14px;line-height:1.375}.chat .body .emoji{font-size:24px}p{margin-top:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-3, 12px)}rtk-text-message,rtk-image-message,rtk-file-message{margin-top:var(--rtk-space-4, 16px);display:block;padding-left:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-3, 12px);font-family:var(--rtk-font-family, sans-serif);color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));box-sizing:border-box}*[is-continued]{margin-top:var(--rtk-space-3, 12px)}rtk-text-message[is-continued]{margin-top:var(--rtk-space-2, 8px)}.chat .image{position:relative;height:var(--rtk-space-40, 160px);max-width:var(--rtk-space-64, 256px);cursor:pointer}.chat .image img{display:none;height:100%;width:100%;border-radius:var(--rtk-border-radius-sm, 4px);-o-object-fit:cover;object-fit:cover}.chat .image .image-spinner{display:flex;height:100%;width:100%;flex-direction:column;align-items:center;justify-content:center;border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}.chat .image .image-spinner rtk-spinner{--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-text-opacity))}.chat .image .image-errored{display:flex;height:100%;width:100%;flex-direction:column;align-items:center;justify-content:center;border-radius:var(--rtk-border-radius-sm, 4px);background-color:rgba(var(--rtk-colors-danger, 255 45 45) / 0.1);--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}.chat .image .actions{display:none;height:var(--rtk-space-8, 32px);align-items:center;position:absolute;top:var(--rtk-space-2, 8px);right:var(--rtk-space-2, 8px);border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255));overflow:hidden;--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.chat .image .actions .action{height:var(--rtk-space-8, 32px);width:var(--rtk-space-8, 32px);border-radius:var(--rtk-border-radius-none, 0);border-width:var(--rtk-border-width-none, 0);border-style:none;background-color:transparent;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.chat .image .actions .action:hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.image.loaded img{display:block}.image.loaded .image-spinner{display:none}.image:hover .actions,.image:focus .actions{display:flex}.chat .file{display:flex;align-items:center;gap:var(--rtk-space-1, 4px);padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px);padding-top:var(--rtk-space-1\\.5, 6px);padding-bottom:var(--rtk-space-1\\.5, 6px);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));color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}.chat .file .file-data{flex:1 1 0%}.chat .file .file-data .name{word-break:break-all;color:rgb(var(--rtk-colors-text-1000, 255 255 255));overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.chat .file .file-data .file-data-split{margin-top:var(--rtk-space-0\\.5, 2px);display:flex;align-items:center;font-size:12px}.chat .file .file-data .file-data-split .ext{margin-right:var(--rtk-space-2, 8px);text-transform:uppercase;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.chat .file .file-data .file-data-split .divider{height:var(--rtk-space-4, 16px);width:var(--rtk-space-0\\.5, 2px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.chat .file .file-data .file-data-split .size{margin-left:var(--rtk-space-2, 8px)}.smallest-dom-element{width:1px}#top-scroll{transform:translateY(20vh);transform:translateY(20px)}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}.show-new-messages-ctr{position:absolute;bottom:var(--rtk-space-4, 16px);right:var(--rtk-space-4, 16px);z-index:10;margin-top:calc(var(--rtk-space-14, 56px) * -1);--tw-translate-y:var(--rtk-space-28, 112px);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, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.show-new-messages-ctr.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));cursor:pointer;opacity:1}.show-new-messages{pointer-events:auto;border-radius:9999px}.show-new-messages:hover{border-radius:9999px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-ring-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}rtk-spinner,.empty-list{margin:auto}.page-wrapper{margin-left:var(--rtk-space-1, 4px);margin-right:var(--rtk-space-1, 4px);display:flex;flex-direction:column-reverse}.message-wrapper{margin-bottom:var(--rtk-space-2, 8px)}.pinned .message-wrapper{position:relative}.pinned .pin-icon{position:absolute;right:calc(var(--rtk-space-1, 4px) * -1);top:calc(var(--rtk-space-1, 4px) * -1);display:flex;border-radius:var(--rtk-border-radius-sm, 4px)}.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)}.load-more-on-top-container{pointer-events:none;position:absolute;top:var(--rtk-space-2, 8px);right:var(--rtk-space-4, 16px);z-index:10}.load-more-icon{pointer-events:auto;border-radius:9999px}.load-more-icon:hover{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-ring-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}";
 const RtkPaginatedListStyle0 = rtkPaginatedListCss;
 
 /**
@@ -1831,7 +1931,7 @@ const RtkPaginatedListStyle0 = rtkPaginatedListCss;
  * - If page is empty, delete it
  * - Update timestamp curors
  */
-var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$3 = (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);
@@ -1845,7 +1945,7 @@ const RtkPaginatedList = class {
     constructor(hostRef) {
         index$1.registerInstance(this, hostRef);
         // Timestamp pertaining to the oldest stored message
-        this.oldestPaginatedTimestamp = null;
+        this.oldestPaginatedTimestamp = 0;
         // Timestamp pertaining to the latest stored message
         this.latestPaginatedTimestamp = null;
         // Timestamp pertaining to the latest message stored in backend
@@ -1959,11 +2059,31 @@ const RtkPaginatedList = class {
             if (index === -1)
                 continue;
             // edit message
-            this.pages[i][index] = node;
+            this.pages[i][index] = Object.assign(Object.assign({}, this.pages[i][index]), node);
             this.rerender();
             break;
         }
     }
+    /**
+     * Resets the paginated list to a given timestamp
+     */
+    async reset(timestamp = 0) {
+        this.oldestPaginatedTimestamp = timestamp;
+        this.latestPaginatedTimestamp = null;
+        this.pages = [];
+        this.shouldScrollToBottom = false;
+        this.showNewMessagesCTR = false;
+        this.pendingScrollAnchor = null;
+        this.isLoading = false;
+        this.isLoadingTop = false;
+        this.isLoadingBottom = false;
+        if (timestamp === 0) {
+            // preserve latestMessageTimestamp if reseting to a particular message
+            this.latestMessageTimestamp = null;
+        }
+        this.rerender();
+        await this.loadPrevPage();
+    }
     connectedCallback() {
         this.rerender = debounce.debounce(this.rerender.bind(this), 50, { maxWait: 200 });
     }
@@ -1998,8 +2118,8 @@ const RtkPaginatedList = class {
         if (this.isLoading)
             return;
         const scrollAnchor = this.getScrollAnchor('top');
-        // if no old timestamp, it means we are at initial state
-        if (!this.oldestPaginatedTimestamp)
+        // if old timestamp is 0, it means we are at initial state
+        if (this.oldestPaginatedTimestamp === 0)
             this.oldestPaginatedTimestamp = new Date().getTime();
         // load data
         this.isLoading = true;
@@ -2137,22 +2257,178 @@ const RtkPaginatedList = class {
         this.rerenderBoolean = !this.rerenderBoolean;
     }
     render() {
+        var _a;
         /**
          * div.container is flex=column-reversewhich is why div#bottom-scroll comes before div#top-scroll
          */
-        return (index$1.h(index$1.Host, { key: '90112894b4d06b91240bcf4c1dfadad784097ec4' }, index$1.h("div", { key: '339f02629a39ce0f7d2552325b9f6a7c82ffa036', class: "scrollbar container", part: "container", ref: (el) => (this.$containerRef = el) }, index$1.h("div", { key: '10de785a969cac74d840e0311087b85b67e97fb6', class: { 'show-new-messages-ctr': true, active: this.showNewMessagesCTR } }, index$1.h("rtk-button", { key: '68991f70a24417ca79d6583cca50f2dd9f55892d', class: "show-new-messages", kind: "icon", variant: "secondary", part: "show-new-messages", onClick: () => {
+        return (index$1.h(index$1.Host, { key: '95cfa5ec1e7a023288f23f0c81bdf2e060198f0a' }, index$1.h("div", { key: '6ade1151ec1dd66845f96f336df2f0c5c075706f', class: "scrollbar container", part: "container", ref: (el) => (this.$containerRef = el) }, index$1.h("div", { key: 'befdd4a7c3d30089bd9b6f27dc0b71166cad812f', class: { 'show-new-messages-ctr': true, active: this.showNewMessagesCTR } }, index$1.h("rtk-button", { key: '961b397875ce257acab29cccb38c8bcbcb32a4b5', class: "show-new-messages", kind: "icon", variant: "secondary", part: "show-new-messages", onClick: () => {
                 this.scrollToBottom();
-            } }, this.shouldScrollToBottom ? (index$1.h("rtk-spinner", { size: "sm" })) : (index$1.h("rtk-icon", { icon: this.iconPack.chevron_down })))), index$1.h("div", { key: '24098a445c1a9b1a3ef77436988c36c8f2a8c205', class: "smallest-dom-element", id: "bottom-scroll", ref: (el) => (this.$bottomRef = el) }), this.isLoadingBottom && this.pages.length > 0 && index$1.h("rtk-spinner", { key: '93c029599cf61fb61ae57651064f4f0a8c7ac39b', size: "sm" }), this.isLoading && this.pages.length < 1 && index$1.h("rtk-spinner", { key: 'd49e8bbbf34036bb6559b5b0e5c54d32513f6bc6', size: "lg" }), !this.isLoading && this.pages.flat().length === 0 ? (index$1.h("div", { class: "empty-list" }, this.t('list.empty'))) : (index$1.h("div", { class: "page-wrapper" }, this.pages.map((page, pageIndex) => (index$1.h("div", { class: "page", "data-page-index": pageIndex }, this.createNodes([...page].reverse())))))), this.isLoadingTop && this.pages.length > 0 && index$1.h("rtk-spinner", { key: '067d8da823c27e3c5fb18f138c58eb537a4b67f5', size: "sm" }), index$1.h("div", { key: '16fef008d5831bd5f6b4136e2a58cccc34e08064', class: "smallest-dom-element", id: "top-scroll", ref: (el) => (this.$topRef = el) }))));
+            } }, this.shouldScrollToBottom ? (index$1.h("rtk-spinner", { size: "sm" })) : (index$1.h("rtk-icon", { icon: this.iconPack.chevron_down })))), index$1.h("div", { key: '9ca7ccbab4fd320e028b46086a451a8205186710', class: "smallest-dom-element", id: "bottom-scroll", ref: (el) => (this.$bottomRef = el) }), this.isLoadingBottom && this.pages.length > 0 && index$1.h("rtk-spinner", { key: 'c0857b46087f6ec587801eed1706c903f3376c9d', size: "sm" }), this.isLoading && this.pages.length < 1 && index$1.h("rtk-spinner", { key: 'abf37d818f2d96be450e85e92b4b31e9146c4bc5', size: "lg" }), !this.isLoading && this.pages.flat().length === 0 ? (index$1.h("div", { class: "empty-list" }, (_a = this.emptyListLabel) !== null && _a !== void 0 ? _a : this.t('list.empty'))) : (index$1.h("div", { class: "page-wrapper" }, this.pages.map((page, pageIndex) => (index$1.h("div", { class: "page", "data-page-index": pageIndex }, this.createNodes([...page].reverse())))))), this.isLoadingTop && this.pages.length > 0 && index$1.h("rtk-spinner", { key: '926124b839832299b8e8a5cb9336fa62b3a21516', size: "sm" }), index$1.h("div", { key: 'de2ecfae0a8e27c1afb0b03fe803f7bcd3b187f1', class: "smallest-dom-element", id: "top-scroll", ref: (el) => (this.$topRef = el) }))));
     }
 };
-__decorate$2([
+__decorate$3([
     index.SyncWithStore()
 ], RtkPaginatedList.prototype, "iconPack", void 0);
-__decorate$2([
+__decorate$3([
     index.SyncWithStore()
 ], RtkPaginatedList.prototype, "t", void 0);
 RtkPaginatedList.style = RtkPaginatedListStyle0;
 
+const rtkPinnedMessageSelectorCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}.scrollbar{scrollbar-width:thin;scrollbar-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n    var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar{height:var(--rtk-space-1\\.5, 6px);width:var(--rtk-space-1\\.5, 6px);border-radius:9999px;background-color:var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar-thumb{border-radius:9999px;background-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))}:host{display:flex;width:100%;flex-direction:column;font-size:14px;position:relative;box-sizing:border-box;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.chat-header{position:relative;margin-left:var(--rtk-space-2, 8px);margin-right:var(--rtk-space-2, 8px);cursor:pointer;gap:var(--rtk-space-2, 8px);padding-left:var(--rtk-space-4, 16px);padding-right:var(--rtk-space-4, 16px);padding-top:var(--rtk-space-3, 12px);padding-bottom:var(--rtk-space-3, 12px);display:flex;flex-direction:row;align-items:center;justify-content:space-between;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52));border-radius:var(--rtk-border-radius-sm, 4px);border:var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60))}.chat-header-label{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--rtk-space-2, 8px)}.dropdown{position:absolute;top:100%;z-index:10;padding:var(--rtk-space-0, 0px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));max-height:var(--rtk-space-0, 0px);opacity:0;overflow:hidden;pointer-events:none;border-bottom-right-radius:var(--rtk-border-radius-sm, 4px);border-bottom-left-radius:var(--rtk-border-radius-sm, 4px);left:var(--rtk-space-2, 8px);right:var(--rtk-space-2, 8px);max-width:calc(100vw - var(--rtk-space-4, 16px));box-sizing:border-box}.dropdown.open{max-height:50vh;opacity:1;overflow:auto;pointer-events:auto;border-width:1px;border-top-width:var(--rtk-border-width-none, 0);border-style:solid;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity))}.dropdown rtk-paginated-list{box-sizing:border-box;display:flex;max-height:50vh;min-height:30vh;flex-direction:column}";
+const RtkPinnedMessageSelectorStyle0 = rtkPinnedMessageSelectorCss;
+
+var __decorate$2 = (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 RtkPinnedMessageSelector = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        this.dropdownToggle = index$1.createEvent(this, "rtkDropdownToggle", 7);
+        this.pinnedMessageSelect = index$1.createEvent(this, "rtkPinnedMessageSelect", 7);
+        this.isOpen = false;
+        /** Icon pack */
+        this.iconPack = uiStore.defaultIconPack;
+        /** Language */
+        this.t = uiStore.useLanguage();
+        //NOTE(ikabra): Fix this value once backend supports pagination for participants
+        this.pageSize = 25;
+        this.pagesAllowed = 3;
+        this.showPinnedMessages = true;
+        this.toggle = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.isOpen = !this.isOpen;
+            this.dropdownToggle.emit({ open: this.isOpen });
+        };
+        this.getPinnedChatMessages = async (timestamp, size, reversed) => {
+            const localMeeting = this.meeting;
+            if (!localMeeting)
+                return [];
+            try {
+                const messages = await localMeeting.chat.fetchPinnedMessages({
+                    timestamp,
+                    limit: size,
+                    direction: reversed ? 'before' : 'after',
+                });
+                return messages;
+            }
+            catch (err) {
+                return [];
+            }
+        };
+        this.createPinnedChatNodes = (messages) => {
+            return messages.map((message) => {
+                const preview = message.type === 'text'
+                    ? (message.message || '').replace(/\s+/g, ' ').trim()
+                    : message.type === 'file'
+                        ? 'File Attachment'
+                        : message.type === 'image'
+                            ? 'Image Attachment'
+                            : '';
+                return (index$1.h("div", { class: "pinned-message", id: message.id, onClick: () => {
+                        this.pinnedMessageSelect.emit(message);
+                        this.close();
+                    } }, index$1.h("rtk-avatar", { size: "sm", participant: {
+                        name: message.displayName,
+                        picture: '',
+                    } }), index$1.h("div", { class: "pinned-message-content" }, index$1.h("div", { class: "pinned-message-preview", title: preview }, preview), index$1.h("div", { class: "pinned-message-meta" }, index$1.h("span", { class: "pinned-message-time" }, date.elapsedDuration(message.time, new Date(Date.now())))))));
+            });
+        };
+        this.pinChatListener = (data) => {
+            var _a, _b;
+            if (((_a = data.message.targetUserIds) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                // pinned messages are not supported for private chat
+                return;
+            }
+            /**
+             * FIXME(ikabra): This is a temporary hack to refresh the list when a new message is pinned.
+             * This is done to avoid duplicate messages in the list.
+             * Fix is being implemented by socket where they are updating the `updatedAt` timestamp when the message is pinned.
+             */
+            (_b = this.$paginatedListRef) === null || _b === void 0 ? void 0 : _b.reset();
+        };
+        this.unpinChatListener = async (data) => {
+            var _a, _b;
+            if (((_a = data.message.targetUserIds) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                // pinned messages are not supported for private chat
+                return;
+            }
+            (_b = this.$paginatedListRef) === null || _b === void 0 ? void 0 : _b.onNodeDelete(data.message.id);
+        };
+        this.chatUpdateListener = async (data) => {
+            if (data.action !== 'delete')
+                return;
+            this.unpinChatListener(data);
+        };
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+    }
+    disconnectedCallback() {
+        this.disconnectMeeting(this.meeting);
+    }
+    disconnectMeeting(meeting) {
+        var _a, _b, _c;
+        (_a = meeting.chat) === null || _a === void 0 ? void 0 : _a.removeListener('pinMessage', this.pinChatListener);
+        (_b = meeting.chat) === null || _b === void 0 ? void 0 : _b.removeListener('unpinMessage', this.unpinChatListener);
+        (_c = meeting.chat) === null || _c === void 0 ? void 0 : _c.removeListener('chatUpdate', this.chatUpdateListener);
+    }
+    meetingChanged(meeting, oldMeeting) {
+        var _a, _b, _c, _d;
+        if (oldMeeting)
+            this.disconnectMeeting(oldMeeting);
+        if (!meeting)
+            return;
+        (_a = this.$paginatedListRef) === null || _a === void 0 ? void 0 : _a.reset();
+        (_b = meeting.chat) === null || _b === void 0 ? void 0 : _b.addListener('pinMessage', this.pinChatListener);
+        (_c = meeting.chat) === null || _c === void 0 ? void 0 : _c.addListener('unpinMessage', this.unpinChatListener);
+        (_d = meeting.chat) === null || _d === void 0 ? void 0 : _d.addListener('chatUpdate', this.chatUpdateListener);
+    }
+    /** */
+    async close() {
+        if (!this.isOpen)
+            return;
+        this.isOpen = false;
+        this.dropdownToggle.emit({ open: false });
+    }
+    async onChatSelectorChange(event) {
+        var _a;
+        const selectedUser = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.selectedUser;
+        // Everyone
+        if (!selectedUser) {
+            this.showPinnedMessages = true;
+        }
+        else {
+            this.showPinnedMessages = false;
+        }
+    }
+    render() {
+        if (!this.showPinnedMessages)
+            return null;
+        return (index$1.h(index$1.Host, null, index$1.h("div", { class: "chat-header", onClick: this.toggle }, index$1.h("div", { class: "chat-header-label" }, index$1.h("rtk-icon", { icon: this.iconPack.pin, size: "sm" }), this.t('chat.pinned_msgs')), index$1.h("div", { class: "chevron" }, index$1.h("rtk-icon", { icon: this.isOpen ? this.iconPack.chevron_up : this.iconPack.chevron_down, size: "sm" }))), index$1.h("div", { class: { dropdown: true, open: this.isOpen, scrollbar: true } }, index$1.h("rtk-paginated-list", { class: "pinned-message-selector-paginated-list", ref: (el) => (this.$paginatedListRef = el), pageSize: this.pageSize, pagesAllowed: 3, fetchData: this.getPinnedChatMessages, createNodes: this.createPinnedChatNodes, emptyListLabel: this.t('chat.empty_search') }, index$1.h("slot", null)))));
+    }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"]
+    }; }
+};
+__decorate$2([
+    index.SyncWithStore()
+], RtkPinnedMessageSelector.prototype, "meeting", void 0);
+__decorate$2([
+    index.SyncWithStore()
+], RtkPinnedMessageSelector.prototype, "iconPack", void 0);
+__decorate$2([
+    index.SyncWithStore()
+], RtkPinnedMessageSelector.prototype, "t", void 0);
+RtkPinnedMessageSelector.style = RtkPinnedMessageSelectorStyle0;
+
 const rtkSpinnerCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{box-sizing:border-box;display:block;height:var(--rtk-space-10, 40px);width:var(--rtk-space-10, 40px);--rtk-spinner-color:currentColor}.spinner{height:100%;width:100%}@keyframes spin{to{transform:rotate(360deg)}}.spinner{animation:spin 1s linear infinite;border-radius:9999px;background-color:transparent;animation-duration:1.3s}:host([size='md']){height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px)}:host([size='sm']){height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px)}";
 const RtkSpinnerStyle0 = rtkSpinnerCss;
 
@@ -2175,7 +2451,7 @@ const RtkSpinner = class {
         this.size = 'md';
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '5f6172eb684feb1d2a1bfa4933c4f3763534d479' }, index$1.h("rtk-icon", { key: '32a8707e5447a9e85e42c2aa57b55a46d0208f7e', class: "spinner", icon: this.iconPack.spinner })));
+        return (index$1.h(index$1.Host, { key: 'f9f0f938827fb04712fb9f406fb07d48c398865a' }, index$1.h("rtk-icon", { key: 'a2daa23191ea94007c8a980f221409c6dfe35d03', class: "spinner", icon: this.iconPack.spinner })));
     }
 };
 __decorate$1([
@@ -2253,7 +2529,7 @@ const RtkTextComposerView = class {
         }
     }
     render() {
-        return (index$1.h("div", { key: '3a49d368b3b798a6e423323905c4ca7f18493fd0', class: "chat-input", part: "chat-input-container" }, this.maxLengthBreached > 0 && (index$1.h("div", { key: '83c0c1c71fc5cc6f7a6bf1e6bc961665cb989104', class: 'text-error ' + (this.maxLengthBreached === this.maxLength ? 'breached' : '') }, index$1.h("rtk-icon", { key: '9fc1147d057011699bbd2ca6cf8240ed6c653e1f', id: "warning-indicator", icon: this.iconPack.warning, part: "warning-indicator" }), ' ', this.maxLengthBreached, " / ", this.maxLength, " ", this.t('chat.max_limit_warning'))), this.rateLimitBreached && (index$1.h("div", { key: '82599c564d95896d6b541f98f8167a0c193f4cf5', class: 'text-error breached' }, index$1.h("rtk-icon", { key: 'fc8984d07b8ac4aafd16d4f2388b4e93ab8feb69', id: "warning-indicator", icon: this.iconPack.warning, part: "warning-indicator" }), ' ', this.t('chat.rate_limit_error'))), index$1.h("textarea", { key: '62c972fdd2b54cf7ccfacadc32cacc8e7ceae1ca', ref: (el) => (this.$textArea = el), placeholder: this.placeholder, disabled: this.disabled, onInput: this.onInputHandler, onKeyDown: this.keyDownHandler, part: "chat-input", value: this.value })));
+        return (index$1.h("div", { key: '38a6c64bb92fd72f76109e0d55c04c00a77bb43a', class: "chat-input", part: "chat-input-container" }, this.maxLengthBreached > 0 && (index$1.h("div", { key: 'b3d3ed9cd0694edf05cb7ccda50dc8f6157315ef', class: 'text-error ' + (this.maxLengthBreached === this.maxLength ? 'breached' : '') }, index$1.h("rtk-icon", { key: 'c5cd3e9887e90970729dc808413997bc17835ae6', id: "warning-indicator", icon: this.iconPack.warning, part: "warning-indicator" }), ' ', this.maxLengthBreached, " / ", this.maxLength, " ", this.t('chat.max_limit_warning'))), this.rateLimitBreached && (index$1.h("div", { key: 'fd2c53dc324defba567638782d2fafd66f9be11b', class: 'text-error breached' }, index$1.h("rtk-icon", { key: '7f60d2b74f45a7c4e4cbe422066803ff750fa5ef', id: "warning-indicator", icon: this.iconPack.warning, part: "warning-indicator" }), ' ', this.t('chat.rate_limit_error'))), index$1.h("textarea", { key: 'd60bd094237e82a8a66e5afd6be464a242f43afa', ref: (el) => (this.$textArea = el), placeholder: this.placeholder, disabled: this.disabled, onInput: this.onInputHandler, onKeyDown: this.keyDownHandler, part: "chat-input", value: this.value })));
     }
 };
 __decorate([
@@ -2274,7 +2550,7 @@ const RtkTextMessageView = class {
         this.isMarkdown = false;
     }
     render() {
-        return (index$1.h("p", { key: 'c10685a8a0339c3b8509fed80b46900c551924e6', class: { text: true, emoji: string.hasOnlyEmojis(this.text) } }, this.isMarkdown ? index$1.h("rtk-markdown-view", { text: this.text }) : this.text));
+        return (index$1.h("p", { key: '415dec939e8fa149f006a5c3afc4bafc11f911af', class: { text: true, emoji: string.hasOnlyEmojis(this.text) } }, this.isMarkdown ? index$1.h("rtk-markdown-view", { text: this.text }) : this.text));
     }
 };
 RtkTextMessageView.style = RtkTextMessageViewStyle0;
@@ -2392,7 +2668,9 @@ exports.rtk_avatar = RtkAvatar;
 exports.rtk_button = RtkButton;
 exports.rtk_chat = RtkChat;
 exports.rtk_chat_composer_view = RtkChatComposerView;
+exports.rtk_chat_header = RtkChatHeader;
 exports.rtk_chat_messages_ui_paginated = RtkChatMessagesUiPaginated;
+exports.rtk_chat_selector = RtkChatSelector;
 exports.rtk_draft_attachment_view = RtkDraftAttachmentView;
 exports.rtk_emoji_picker = RtkEmojiPicker;
 exports.rtk_emoji_picker_button = RtkEmojiPickerButton;
@@ -2407,6 +2685,7 @@ exports.rtk_menu_item = RtkMenuItem;
 exports.rtk_menu_list = RtkMenuList;
 exports.rtk_message_view = RtkMessageView;
 exports.rtk_paginated_list = RtkPaginatedList;
+exports.rtk_pinned_message_selector = RtkPinnedMessageSelector;
 exports.rtk_spinner = RtkSpinner;
 exports.rtk_text_composer_view = RtkTextComposerView;
 exports.rtk_text_message_view = RtkTextMessageView;