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

package/dist/cjs/{rtk-avatar_24.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-6c2d680f.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-e4244d7d.js');
-const debounce = require('./debounce-b06b27ca.js');
-const chat = require('./chat-2ae6f058.js');
+const index = require('./index-92947ea7.js');
+const chat = require('./chat-f1a9fd6e.js');
 const file = require('./file-0b9afa34.js');
-const merge = require('./merge-c46cfa17.js');
-const index$2 = require('./index-821d14b7.js');
-const config = require('./config-0a88d50b.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-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$h = (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);
@@ -54,13 +54,13 @@ const RtkAvatar = class {
         };
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'c1a0be37edb75c40b275ad59af85cee7df3f1cdf' }, this.getAvatar(), index$1.h("slot", { key: '1cd71e7494a09d68a52051edc279911dc3168515' })));
+        return (index$1.h(index$1.Host, { key: 'd7d3a7b03a3807984dc6798b5e35cec4418e06e7' }, this.getAvatar(), index$1.h("slot", { key: '25aa9fe632a132c1e2f8ef88ac98043bb8ef085a' })));
     }
 };
-__decorate$h([
+__decorate$i([
     index.SyncWithStore()
 ], RtkAvatar.prototype, "iconPack", void 0);
-__decorate$h([
+__decorate$i([
     index.SyncWithStore()
 ], RtkAvatar.prototype, "t", void 0);
 RtkAvatar.style = RtkAvatarStyle0;
@@ -89,150 +89,10 @@ const RtkButton = class {
 };
 RtkButton.style = RtkButtonStyle0;
 
-const rtkChannelSelectorViewCss = ".scrollbar {\n  /* For Firefox */\n  scrollbar-width: thin;\n  scrollbar-color: var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n    var(--rtk-scrollbar-background, transparent);\n}\n\n/* For WebKit */\n.scrollbar::-webkit-scrollbar {\n  height: var(--rtk-space-1\\.5, 6px);\n  width: var(--rtk-space-1\\.5, 6px);\n  border-radius: 9999px;\n  background-color: var(--rtk-scrollbar-background, transparent);\n}\n\n.scrollbar::-webkit-scrollbar-thumb {\n  border-radius: 9999px;\n  background-color: var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)));\n}\n\n\n:host {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));\n  position: relative;\n  z-index: 10;\n  height: var(--rtk-space-12, 48px);\n  min-height: 48px;\n}\n\n.dropdown-trigger {\n  height: 100%;\n  width: 100%;\n  border-width: var(--rtk-border-width-none, 0);\n  border-style: none;\n  padding: var(--rtk-space-4, 16px);\n  padding-left: var(--rtk-space-3, 12px);\n  padding-right: 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-700, 44 44 44) / var(--tw-bg-opacity));\n  font-size: 14px;\n  color: rgb(var(--rtk-colors-text-1000, 255 255 255));\n  cursor: pointer;\n  position: absolute;\n  z-index: 20;\n}\n\n.dropdown-trigger span {\n  display: flex;\n  flex: 1 1 0%;\n  align-items: center;\n  justify-content: flex-start;\n  gap: var(--rtk-space-2, 8px);\n}\n\n.dropdown-trigger rtk-icon {\n  margin-left: var(--rtk-space-1, 4px);\n  height: var(--rtk-space-4, 16px);\n  width: var(--rtk-space-4, 16px);\n  flex-shrink: 0;\n}\n\n@container chatcontainer (height < 360px) {\n  .dropdown-trigger {\n    padding: var(--rtk-space-2, 8px);\n  }\n  .dropdown {\n    top: var(--rtk-space-8, 32px) !important;\n  }\n  .search-container {\n    padding-left: var(--rtk-space-0, 0px) !important;\n    padding-right: var(--rtk-space-0, 0px) !important;\n    padding-top: var(--rtk-space-0, 0px) !important;\n    padding-bottom: var(--rtk-space-0, 0px) !important;\n  }\n  input {\n    height: var(--rtk-space-8, 32px) !important;\n    border-radius: var(--rtk-border-radius-none, 0) !important;\n  }\n  .avatar-icon {\n    height: var(--rtk-space-3, 12px) !important;\n    width: var(--rtk-space-3, 12px) !important;\n    padding: var(--rtk-space-1, 4px) !important;\n  }\n}\n\n.dropdown {\n  position: absolute;\n  width: 100%;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));\n  border-bottom-width: var(--rtk-border-width-sm, 1px);\n  border-right-width: var(--rtk-border-width-none, 0);\n  border-left-width: var(--rtk-border-width-none, 0);\n  border-top-width: var(--rtk-border-width-none, 0);\n  border-style: solid;\n  --tw-border-opacity: 1;\n  border-color: rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity));\n  top: var(--rtk-space-12, 48px);\n  z-index: 10;\n  animation: 0.3s slide-down ease;\n}\n\n.dropdown .channels-container {\n  max-height: var(--rtk-space-80, 320px);\n}\n\n.list {\n  display: flex;\n  flex-direction: column;\n}\n\n.list .channel .channel-data {\n  align-items: flex-start;\n}\n\n.unread-count {\n  display: flex;\n  justify-content: center;\n  height: var(--rtk-space-5, 20px);\n  min-width: var(--rtk-space-3, 12px);\n  border-radius: 9999px;\n  padding-left: var(--rtk-space-1, 4px);\n  padding-right: var(--rtk-space-1, 4px);\n  font-size: 12px;\n  line-height: 1.25rem;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));\n  color: rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));\n}\n\ninput {\n  height: var(--rtk-space-9, 36px);\n  width: 100%;\n  padding-left: var(--rtk-space-3, 12px);\n  padding-right: var(--rtk-space-3, 12px);\n  box-sizing: border-box;\n  border-width: var(--rtk-border-width-none, 0);\n  border-style: none;\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n  border-radius: var(--rtk-border-radius-sm, 4px);\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));\n  color: rgb(var(--rtk-colors-text-1000, 255 255 255));\n}\n\n.search-container {\n  display: flex;\n  flex-shrink: 0;\n  flex-grow: 0;\n  flex-basis: auto;\n  align-items: center;\n  padding-top: var(--rtk-space-3, 12px);\n  padding-bottom: var(--rtk-space-3, 12px);\n  padding-left: var(--rtk-space-2, 8px);\n  padding-right: var(--rtk-space-2, 8px);\n  border-bottom: var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-700, 44 44 44));\n}\n\n.search-container rtk-icon {\n  margin-left: calc(var(--rtk-space-8, 32px) * -1);\n  height: var(--rtk-space-5, 20px);\n  width: var(--rtk-space-5, 20px);\n  color: rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76));\n}\n\n.channels-container {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  overflow-y: auto;\n}\n\nrtk-avatar {\n  height: var(--rtk-space-4, 16px) !important;\n  width: var(--rtk-space-4, 16px) !important;\n  overflow: clip;\n  border-radius: 9999px;\n  padding: var(--rtk-space-2, 8px);\n  font-size: 12px;\n}\n\n.channel {\n  flex-shrink: 0;\n  padding-top: var(--rtk-space-2, 8px);\n  padding-bottom: var(--rtk-space-2, 8px);\n  box-sizing: border-box;\n  border-width: var(--rtk-border-width-none, 0);\n  border-style: none;\n  background-color: transparent;\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--rtk-space-2, 8px);\n  width: 100%;\n  padding-left: var(--rtk-space-2, 8px);\n  padding-right: var(--rtk-space-3, 12px);\n  color: rgb(var(--rtk-colors-text-1000, 255 255 255));\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n\n.channel:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));\n}\n\n.channel .channel-data {\n  flex: 1 1 0%;\n  align-items: center;\n  justify-content: space-between;\n  display: flex;\n  gap: var(--rtk-space-2, 8px);\n}\n\n.channel .name {\n  font-size: 16px;\n}\n\n.channel .name, \n  .channel .last-message {\n  max-width: var(--rtk-space-40, 160px);\n  text-align: left;\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 1;\n}\n\n.channel .no-message {\n  font-style: italic;\n}\n\n.channel .avatar-icon {\n  height: var(--rtk-space-4, 16px);\n  width: var(--rtk-space-4, 16px);\n  padding: var(--rtk-space-2, 8px);\n  color: rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));\n  overflow: clip;\n  border-radius: 9999px;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));\n}\n\n.channel time, \n  .channel .last-message {\n  font-size: 12px;\n  color: rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76));\n}\n\n.channel.active {\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-bg-opacity));\n  color: rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));\n}\n\n.channel.active .unread-count {\n  background-color: rgb(var(--rtk-colors-text-on-brand-800, var(--rtk-colors-text-800, 255 255 255 / 0.76)));\n  --tw-text-opacity: 1;\n  color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-text-opacity));\n}\n\n.channel.active time {\n  color: rgb(var(--rtk-colors-text-on-brand-800, var(--rtk-colors-text-800, 255 255 255 / 0.76)));\n}\n\n.channel.active .last-message {\n  color: rgb(var(--rtk-colors-text-on-brand-700, var(--rtk-colors-text-700, 255 255 255 / 0.64)));\n}\n\n.channel.active rtk-avatar {\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));\n  color: rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));\n}\n\n.col {\n  gap: var(--rtk-space-1, 4px);\n  display: flex;\n  flex-direction: column;\n}\n\n.channel-meta {\n  flex-shrink: 0;\n  align-items: flex-end;\n}\n\n@keyframes slide-down {\n  from {\n    transform: translateY(-50px);\n  }\n  to {\n    transform: translateY(0%);\n  }\n}\n";
-const RtkChannelSelectorViewStyle0 = rtkChannelSelectorViewCss;
-
-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);
-    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 RtkChannelSelectorView = class {
-    constructor(hostRef) {
-        index$1.registerInstance(this, hostRef);
-        this.channelChange = index$1.createEvent(this, "channelChange", 7);
-        /** Disables search bar (default = false) */
-        this.disableSearch = false;
-        /** Hides avatar (default = false) */
-        this.hideAvatar = false;
-        /** Icon Pack */
-        this.iconPack = uiStore.defaultIconPack;
-        /** Language */
-        this.t = uiStore.useLanguage();
-        /** Render as dropdown or list (default = list) */
-        this.viewAs = 'list';
-        this.searchQuery = '';
-        this.showDropdown = false;
-        this.calculateListHeight = debounce.debounce(() => {
-            if (this.viewAs === 'list' && this.$listEl) {
-                let height = 0;
-                const slotEl = this.$el.shadowRoot.querySelector('slot[name="header"]');
-                if (slotEl) {
-                    slotEl.assignedElements().forEach((e) => (height += e.offsetHeight));
-                }
-                if (this.$searchEl) {
-                    height += this.$searchEl.offsetHeight;
-                }
-                this.$listEl.style.height = `${window.innerHeight - height - 16}px`;
-            }
-        }, 60);
-        this.getFilteredChannels = () => {
-            if (this.searchQuery.trim() === '') {
-                return this.channels;
-            }
-            return this.channels.filter((channel) => {
-                return channel['name'].toLowerCase().includes(this.searchQuery.toLowerCase());
-            });
-        };
-        this.toggleDropdown = () => {
-            this.showDropdown = !this.showDropdown;
-        };
-        this.getChannelById = (id) => {
-            return this.channels.find((channel) => channel.id === id);
-        };
-        this.getTotalUnreads = () => {
-            return this.channels.reduce((acc, curr) => {
-                return acc + curr.unreadCount;
-            }, 0);
-        };
-        this.onChannelClickHandler = (channel) => {
-            this.channelChange.emit(channel);
-            if (this.viewAs === 'dropdown') {
-                this.showDropdown = false;
-            }
-        };
-    }
-    connectedCallback() {
-        this.resizeObserver = new ResizeObserver(this.calculateListHeight);
-    }
-    componentDidLoad() {
-        this.resizeObserver.observe(this.$el);
-        this.calculateListHeight();
-    }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        this.calculateListHeight.cancel();
-    }
-    getTimeLabel(messageDate) {
-        const today = new Date();
-        const yesterday = new Date(today);
-        yesterday.setDate(today.getDate() - 1);
-        const firstDayOfWeek = new Date(today);
-        firstDayOfWeek.setDate(today.getDate() - today.getDay() - 1);
-        if (messageDate.toDateString() === today.toDateString()) {
-            return messageDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-        }
-        else if (messageDate.toDateString() === yesterday.toDateString()) {
-            return this.t('date.yesteday');
-        }
-        else if (messageDate > firstDayOfWeek) {
-            const weekdays = [
-                'date.sunday',
-                'date.monday',
-                'date.tuesday',
-                'date.wednesday',
-                'date.thursday',
-                'date.friday',
-                'date.saturday',
-            ];
-            return this.t(weekdays[messageDate.getDay()]);
-        }
-        else {
-            return Intl.DateTimeFormat([], {
-                day: '2-digit',
-                month: '2-digit',
-                year: '2-digit',
-            }).format(messageDate);
-        }
-    }
-    render() {
-        const filteredChannels = this.getFilteredChannels();
-        const shouldShowDropdown = this.viewAs === 'list' || (this.viewAs === 'dropdown' && this.showDropdown);
-        return (index$1.h(index$1.Host, { key: 'adc8ab4b9c8c865998588fbd9766296f18b3e48e' }, this.viewAs === 'list' && index$1.h("slot", { key: 'e5740725a4349472ca2eb1fb0816eb2311a99838', name: "header" }), shouldShowDropdown && (index$1.h("div", { key: '425adc920c28e0421e07bb0bd9f61b31c42fcda9', class: {
-                dropdown: this.viewAs === 'dropdown',
-                scrollbar: this.viewAs === 'dropdown',
-                list: this.viewAs === 'list',
-            } }, !this.disableSearch && (index$1.h("div", { key: '9fbbc48d8489f2a6490729fac1fecdef1838e84a', class: "search-container", ref: (el) => (this.$searchEl = el) }, index$1.h("input", { key: 'f7fb43662d50274f80380b735ef9f5fc0b215442', type: "text", placeholder: this.t('chat.search_conversations'), value: this.searchQuery, onInput: (e) => (this.searchQuery = e.target.value) }), index$1.h("rtk-icon", { key: 'af76e65a1397d2a6e557a28b687e26aef641c568', icon: this.iconPack.search }))), index$1.h("div", { key: '0711a9cfcc811269a5020dc41030c0daee5cc8bf', class: "channels-container scrollbar", ref: (el) => (this.$listEl = el) }, filteredChannels.map((channel) => {
-            return (index$1.h("button", { class: { channel: true, active: this.selectedChannelId === channel.id }, onClick: () => this.onChannelClickHandler(channel) }, !this.hideAvatar && (index$1.h("div", null, channel.icon ? (index$1.h("rtk-icon", { class: "avatar-icon", icon: this.iconPack[channel.icon] })) : (index$1.h("rtk-avatar", { participant: {
-                    name: channel.name,
-                    picture: channel.avatarUrl,
-                } })))), index$1.h("div", { class: "channel-data" }, index$1.h("div", { class: "col" }, index$1.h("div", { class: "name" }, channel.name), channel.latestMessage && (index$1.h("div", { class: {
-                    'last-message': true,
-                    'no-message': !channel.latestMessage,
-                } }, index$1.h("rtk-text-message-view", { isMarkdown: true, text: channel.latestMessage })))), index$1.h("div", { class: "col channel-meta" }, channel.latestMessageTime && (index$1.h("time", { class: "time" }, this.getTimeLabel(channel.latestMessageTime))), channel.unreadCount > 0 && (index$1.h("div", { class: "unread-count" }, channel.unreadCount))))));
-        })))), this.viewAs === 'dropdown' && (index$1.h("button", { key: '0c87f90d6d0fe22284995ab7259689f80a862829', class: "dropdown-trigger", onClick: this.toggleDropdown }, index$1.h("span", { key: 'd1a364f2c5c57d19702d0b8707ca661c1dc4c14f' }, index$1.h("rtk-icon", { key: 'a4a028e536459fab6de2884e25b0312d2a36bc32', icon: this.iconPack.participants }), this.selectedChannelId &&
-            `${this.t('to')} ${this.getChannelById(this.selectedChannelId).name}`, this.getTotalUnreads() > 0 && (index$1.h("div", { key: '83c8efae8daed7dce4c4fdb55b523876c71a9a85', class: "unread-count" }, this.getTotalUnreads()))), index$1.h("rtk-icon", { key: '855ff62e593c7c14f448bbd5b8cf898e13d5d391', icon: this.showDropdown ? this.iconPack.chevron_up : this.iconPack.chevron_down })))));
-    }
-    get $el() { return index$1.getElement(this); }
-};
-__decorate$g([
-    index.SyncWithStore()
-], RtkChannelSelectorView.prototype, "iconPack", void 0);
-__decorate$g([
-    index.SyncWithStore()
-], RtkChannelSelectorView.prototype, "t", void 0);
-RtkChannelSelectorView.style = RtkChannelSelectorViewStyle0;
-
-const rtkChatCss = ":host {\n  line-height: initial;\n  font-family: var(--rtk-font-family, sans-serif);\n\n  font-feature-settings: normal;\n  font-variation-settings: normal;\n}\n\np {\n  margin: var(--rtk-space-0, 0px);\n  padding: var(--rtk-space-0, 0px);\n}\n\n.scrollbar {\n  /* For Firefox */\n  scrollbar-width: thin;\n  scrollbar-color: var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n    var(--rtk-scrollbar-background, transparent);\n}\n\n/* For WebKit */\n.scrollbar::-webkit-scrollbar {\n  height: var(--rtk-space-1\\.5, 6px);\n  width: var(--rtk-space-1\\.5, 6px);\n  border-radius: 9999px;\n  background-color: var(--rtk-scrollbar-background, transparent);\n}\n\n.scrollbar::-webkit-scrollbar-thumb {\n  border-radius: 9999px;\n  background-color: var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)));\n}\n\n\n:host {\n  display: flex;\n  height: 100%;\n  width: 100%;\n  flex-direction: column;\n  font-size: 14px;\n  position: relative;\n  color: rgb(var(--rtk-colors-text-1000, 255 255 255));\n}\n\nh3 {\n  margin: var(--rtk-space-0, 0px);\n  display: flex;\n  height: var(--rtk-space-12, 48px);\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n  font-weight: 400;\n  color: rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));\n  text-align: center;\n}\n\n#dropzone {\n  position: absolute;\n  top: var(--rtk-space-0, 0px);\n  right: var(--rtk-space-0, 0px);\n  bottom: var(--rtk-space-0, 0px);\n  left: var(--rtk-space-0, 0px);\n  z-index: 10;\n  display: none;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));\n  color: rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64));\n}\n\n#dropzone.active {\n  display: flex;\n  animation: 0.2s slide-up ease-in;\n}\n\nrtk-chat-messages-ui,\nrtk-chat-messages-ui-paginated {\n  flex: 1 0 0;\n}\n\nrtk-chat-composer-view {\n  margin: var(--rtk-space-2, 8px);\n}\n\n.chat-container {\n  display: flex;\n  height: 100%;\n  width: 100%;\n  flex-direction: row;\n  container-type: size;\n  container-name: chatcontainer;\n}\n\n@container chatcontainer (height < 360px) {\n  rtk-channel-selector-view {\n    height: var(--rtk-space-8, 32px);\n    min-height: 24px;\n  }\n}\n\n.chat {\n  display: flex;\n  flex: 1 1 0%;\n  flex-direction: column;\n}\n\n.banner {\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n\n.banner .welcome-new-channel {\n  width: var(--rtk-space-48, 192px);\n}\n\n.banner .create-channel-illustration {\n  height: var(--rtk-space-40, 160px);\n  width: var(--rtk-space-40, 160px);\n}\n\n.channel-selector-header {\n  box-sizing: border-box;\n  height: var(--rtk-space-16, 64px);\n  padding: var(--rtk-space-4, 16px);\n  display: flex;\n  justify-content: space-between;\n  border-bottom: var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-700, 44 44 44));\n}\n\n.channel-selector-header .channel-create-btn {\n  width: var(--rtk-space-8, 32px);\n  justify-content: center;\n}\n\n.channel-selector-header .channel-create-btn:hover {\n  --tw-text-opacity: 1;\n  color: rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-text-opacity));\n}\n\n.view-chats-btn {\n  margin-top: var(--rtk-space-4, 16px);\n}\n\n.selector-container {\n  z-index: 50;\n  width: 100%;\n  max-width: var(--rtk-space-80, 320px);\n  border-right: var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60));\n}\n\n.selector-container.hide {\n  display: none;\n}\n\n.mobile-close-btn {\n  display: none;\n}\n\n.selector-container.mobile {\n  height: 100%;\n  width: 100%;\n  max-width: 100%;\n  position: absolute;\n  top: var(--rtk-space-0, 0px);\n  right: var(--rtk-space-0, 0px);\n  bottom: var(--rtk-space-0, 0px);\n  left: var(--rtk-space-0, 0px);\n  background-color: rgba(var(--rtk-colors-background-1000, 8 8 8) / 0.6);\n  display: flex;\n}\n\n.selector-container.mobile rtk-channel-selector-view {\n  max-width: var(--rtk-space-96, 384px);\n    animation: 0.3s swipe-in;\n}\n\n.selector-container.mobile .mobile-close-btn {\n  margin-top: var(--rtk-space-4, 16px);\n  margin-bottom: var(--rtk-space-4, 16px);\n  margin-left: var(--rtk-space-6, 24px);\n  margin-right: var(--rtk-space-6, 24px);\n  display: block;\n}\n\n.pinned-messages {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\n\n.pinned-messages-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--rtk-space-2, 8px);\n  padding: var(--rtk-space-4, 16px);\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));\n  font-size: 14px;\n  cursor: pointer;\n}\n\n.pinned-messages-header div {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--rtk-space-2, 8px);\n}\n\n.pinned-messages-header rtk-icon {\n  height: var(--rtk-space-3, 12px);\n  width: var(--rtk-space-3, 12px);\n}\n\n.pinned-messages-content {\n  --tw-border-opacity: 1;\n  border-color: rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity));\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));\n  position: absolute;\n  left: var(--rtk-space-0, 0px);\n  top: 100%;\n  z-index: 50;\n  width: 100%;\n}\n\n.pinned-message {\n  display: flex;\n  cursor: pointer;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--rtk-space-2, 8px);\n  --tw-border-opacity: 1;\n  border-color: rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity));\n  padding: var(--rtk-space-4, 16px);\n  border-bottom-width: var(--rtk-border-width-sm, 1px);\n  border-right-width: var(--rtk-border-width-none, 0);\n  border-left-width: var(--rtk-border-width-none, 0);\n  border-top-width: var(--rtk-border-width-none, 0);\n  border-style: solid;\n}\n\n.pinned-message-avatar {\n  height: var(--rtk-space-6, 24px) !important;\n  width: var(--rtk-space-6, 24px) !important;\n}\n\n@keyframes swipe-in {\n  from {\n    transform: translateX(-100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n";
+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);
@@ -246,15 +106,6 @@ const RtkChat = class {
     constructor(hostRef) {
         index$1.registerInstance(this, hostRef);
         this.stateUpdate = index$1.createEvent(this, "rtkStateUpdate", 7);
-        this.chatUpdateListener = ({ message }) => {
-            if (message.channelId)
-                return;
-            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;
@@ -268,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;
@@ -297,16 +131,13 @@ const RtkChat = class {
         this.canSendPrivateTexts = false;
         this.canSendPrivateFiles = false;
         this.emojiPickerEnabled = false;
-        this.chatRecipientId = 'everyone';
         this.participants = [];
-        this.channels = [];
         this.editingMessage = null;
         this.replyMessage = null;
         this.searchQuery = '';
         this.selectorState = 'hide';
-        this.creatingChannel = false;
+        this.isSendingMessage = false;
         this.showPinnedMessages = false;
-        this.channelMap = new Map();
         this.onDragOver = (e) => {
             e.preventDefault();
             this.dropzoneActivated = true;
@@ -334,55 +165,10 @@ const RtkChat = class {
             });
         };
         this.disconnectMeeting = (meeting) => {
-            var _a, _b, _c, _d, _e, _f;
-            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);
-            (_b = meeting === null || meeting === void 0 ? void 0 : meeting.chat) === null || _b === void 0 ? void 0 : _b.removeListener('channelCreate', this.onChannelCreateOrUpdate);
-            (_c = meeting === null || meeting === void 0 ? void 0 : meeting.chat) === null || _c === void 0 ? void 0 : _c.removeListener('channelUpdate', this.onChannelCreateOrUpdate);
-            (_d = meeting === null || meeting === void 0 ? void 0 : meeting.chat) === null || _d === void 0 ? void 0 : _d.removeListener('channelMessageUpdate', this.onChannelCreateOrUpdate);
-            (_f = (_e = meeting === null || meeting === void 0 ? void 0 : meeting.participants) === null || _e === void 0 ? void 0 : _e.all) === null || _f === void 0 ? void 0 : _f.removeListener('participantsUpdate', this.onChannelCreateOrUpdate);
             meeting.self.permissions.removeListener('*', this.chatPermissionUpdateListener);
         };
-        this.getFilteredParticipants = () => {
-            if (this.privatePresetFilter.length === 0)
-                return this.participants;
-            return this.participants.filter((p) => this.privatePresetFilter.includes(p.presetName));
-        };
-        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.updateRecipients = (event) => {
-            const { id } = event.detail;
-            this.chatRecipientId = id;
-            this.selectedParticipant = this.participants.find((p) => p.userId === id);
-            if (this.chatRecipientId !== 'everyone') {
-                const allParticipants = [this.chatRecipientId, this.meeting.self.userId];
-                const targetKey = chat.generateChatGroupKey(allParticipants);
-                this.selectedGroup = targetKey;
-            }
-            else {
-                this.selectedGroup = 'everyone';
-            }
-            this.updateUnreadCountGroups({ [this.selectedGroup]: 0 });
-        };
         this.isTextMessagingAllowed = () => {
-            if (this.chatRecipientId === 'everyone') {
+            if (!this.selectedParticipant) {
                 // public chat
                 return this.canSend && this.canSendTextMessage;
             }
@@ -390,106 +176,36 @@ const RtkChat = class {
             return this.canPrivateMessage && this.canSendPrivateTexts;
         };
         this.isFileMessagingAllowed = () => {
-            if (this.chatRecipientId === 'everyone') {
+            if (!this.selectedParticipant) {
                 // public chat
                 return this.canSend && this.canSendFiles;
             }
             // private chat
             return this.canPrivateMessage && this.canSendPrivateFiles;
         };
-        this.onChannelChanged = (e) => {
-            const channel = e.detail;
-            if (channel.id.includes(chat.TEMPORARY_CHANNEL_PREFIX)) {
-                this.createDMChannel(channel.id.replace(chat.TEMPORARY_CHANNEL_PREFIX, ''));
-            }
-            else {
-                this.selectedChannelId = channel.id;
-            }
-            this.cleanup();
-            if (this.selectorState !== 'desktop') {
-                this.selectorState = 'hide';
-            }
-        };
-        this.createDMChannel = async (memberId) => {
-            this.creatingChannel = true;
-            const newChannel = await this.meeting.chat.createChannel('Direct Message', [memberId], {
-                visibility: 'private',
-                isDirectMessage: true,
-            });
-            this.creatingChannel = false;
-            this.selectedChannelId = newChannel.id;
-        };
-        this.cleanup = () => {
-            this.editingMessage = null;
-            this.replyMessage = null;
-            this.searchQuery = '';
-        };
         this.onQuotedMessageDismiss = () => {
             this.replyMessage = null;
         };
-        this.onChannelCreateOrUpdate = (channel) => {
-            if (channel) {
-                this.channelMap.set(channel.id, channel);
-            }
-            else {
-                this.meeting.chat.channels.forEach((chan) => this.channelMap.set(chan.id, chan));
-            }
-            const allChannels = Array.from(this.channelMap.values());
-            const channels = allChannels
-                .filter((channel) => !chat.isDirectMessageChannel(channel))
-                .sort((a, b) => chat.alphabeticalSorter(a.displayName, b.displayName));
-            const membersWithChannel = allChannels.filter(chat.isDirectMessageChannel).map((channel) => {
-                return Object.assign(Object.assign({}, channel), { displayName: this.getMemberDisplayName(channel) });
-            });
-            const membersWithoutChannel = this.meeting.participants.all
-                .toArray()
-                .filter((member) => {
-                if (member.userId === this.meeting.self.userId)
-                    return false;
-                const matcher = chat.getDMComparator([this.meeting.self.userId, member.userId]);
-                return membersWithChannel.every((channel) => chat.getDMComparator(channel.memberIds) !== matcher);
-            })
-                .map((member) => {
-                return {
-                    id: `${chat.TEMPORARY_CHANNEL_PREFIX}${member.userId}`,
-                    displayName: member.name,
-                    displayPictureUrl: member.picture,
-                    isDirectMessage: true,
-                    unreadCount: 0,
-                };
-            });
-            const dms = [...membersWithChannel, ...membersWithoutChannel].sort((a, b) => chat.alphabeticalSorter(a.displayName, b.displayName));
-            this.channels = [...channels, ...dms];
-            // select channel only if it is created in db
-            const nonTemporaryChannel = [...channels, ...membersWithChannel];
-            if (!this.selectedChannelId && nonTemporaryChannel.length !== 0) {
-                this.selectedChannelId = nonTemporaryChannel[0].id;
-            }
-        };
-        this.getMemberDisplayName = (channel) => {
-            var _a;
-            let id;
-            if (channel.memberIds.length === 1) {
-                // channel with self
-                id = channel.memberIds[0];
-            }
-            else {
-                id =
-                    channel.memberIds[0] === this.meeting.self.userId
-                        ? channel.memberIds[1]
-                        : channel.memberIds[0];
-            }
-            const member = this.meeting.participants.all.toArray().find((member) => member.userId === id);
-            return (_a = member === null || member === void 0 ? void 0 : member.name) !== null && _a !== void 0 ? _a : id;
-        };
         this.onNewMessageHandler = async (e) => {
             const message = e.detail;
-            this.meeting.chat.sendMessage(message, this.getRecipientPeerIds());
+            this.isSendingMessage = true;
+            try {
+                await this.meeting.chat.sendMessage(message, this.getRecipientPeerIds());
+            }
+            finally {
+                this.isSendingMessage = false;
+            }
         };
         this.onEditMessageHandler = async (e) => {
             var _a, _b;
-            await ((_b = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.chat) === null || _b === void 0 ? void 0 : _b.editTextMessage(this.editingMessage.id, e.detail, this.editingMessage.channelId));
-            this.editingMessage = null;
+            this.isSendingMessage = true;
+            try {
+                await ((_b = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.chat) === null || _b === void 0 ? void 0 : _b.editTextMessage(this.editingMessage.id, e.detail));
+            }
+            finally {
+                this.isSendingMessage = false;
+                this.editingMessage = null;
+            }
         };
         this.onEditCancel = () => {
             this.editingMessage = null;
@@ -504,7 +220,26 @@ const RtkChat = class {
             }
         };
         this.onDeleteMessage = (event) => {
+            var _a;
             const message = event.detail;
+            if (((_a = this.editingMessage) === null || _a === void 0 ? void 0 : _a.id) === message.id) {
+                this.editingMessage = null;
+            }
+            try {
+                if (typeof localStorage !== 'undefined') {
+                    const keysToRemove = [];
+                    for (let i = 0; i < localStorage.length; i++) {
+                        const key = localStorage.key(i);
+                        if (key && key.startsWith('rtk-chat-edit-') && key.endsWith(`-${message.id}`)) {
+                            keysToRemove.push(key);
+                        }
+                    }
+                    keysToRemove.forEach((key) => localStorage.removeItem(key));
+                }
+            }
+            catch (_b) {
+                // ignore storage access errors
+            }
             this.meeting.chat.deleteMessage(message.id);
         };
         this.onMessageEdit = (event) => {
@@ -514,45 +249,6 @@ const RtkChat = class {
             this.replyMessage = null;
             this.editingMessage = message;
         };
-        this.getPrivateChatRecipients = () => {
-            const participants = this.getFilteredParticipants().map((participant) => {
-                const key = chat.generateChatGroupKey([participant.userId, this.meeting.self.userId]);
-                const result = {
-                    id: participant.userId,
-                    name: participant.name,
-                    avatarUrl: participant.picture,
-                    unreadCount: this.unreadCountGroups[key],
-                };
-                return result;
-            });
-            const everyone = {
-                id: 'everyone',
-                name: this.t('chat.everyone'),
-                icon: 'participants',
-                unreadCount: this.unreadCountGroups['everyone'],
-            };
-            return [everyone, ...participants];
-        };
-        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" }, 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)
@@ -575,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();
@@ -584,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)
@@ -597,97 +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;
-    }
-    channelSwitchListener(e) {
-        this.onChannelChanged(e);
+        if (!this.selectedParticipant)
+            return [];
+        return [this.selectedParticipant.id];
     }
     renderComposerUI() {
-        var _a;
-        if (this.chatRecipientId === 'everyone') {
+        if (!this.selectedParticipant) {
             if (!this.canSendTextMessage && !this.canSendFiles)
                 return null;
         }
@@ -698,42 +323,37 @@ const RtkChat = class {
         const uiProps = { iconPack: this.iconPack, t: this.t, size: this.size };
         const message = this.editingMessage ? this.editingMessage.message : '';
         const quotedMessage = this.replyMessage ? this.replyMessage.message : '';
-        const draftStorageKey = this.selectedChannelId
-            ? `rtk-chat-draft-${this.selectedChannelId}`
-            : 'rtk-chat-draft';
+        const draftStorageKey = 'rtk-chat-draft';
         const editStorageKey = this.editingMessage
-            ? `rtk-chat-edit-${(_a = this.selectedChannelId) !== null && _a !== void 0 ? _a : 'no-channel'}-${this.editingMessage.id}`
+            ? `rtk-chat-edit-${'no-channel'}-${this.editingMessage.id}`
             : 'rtk-chat-edit';
         const storageKey = this.editingMessage ? editStorageKey : draftStorageKey;
-        return (index$1.h("rtk-chat-composer-view", Object.assign({ message: message, storageKey: storageKey, quotedMessage: quotedMessage, isEditing: !!this.editingMessage, canSendTextMessage: this.isTextMessagingAllowed(), canSendFiles: this.isFileMessagingAllowed(), disableEmojiPicker: this.overrides.disableEmojiPicker, maxLength: this.meeting.chat.maxTextLimit, rateLimits: this.meeting.chat.rateLimits, inputTextPlaceholder: this.t('chat.message_placeholder'), onNewMessage: this.onNewMessageHandler, onEditMessage: this.onEditMessageHandler, onEditCancel: this.onEditCancel, onQuotedMessageDismiss: this.onQuotedMessageDismiss }, uiProps), index$1.h("slot", { name: "chat-addon", slot: "chat-addon" })));
+        return (index$1.h("rtk-chat-composer-view", Object.assign({ message: message, storageKey: storageKey, quotedMessage: quotedMessage, isEditing: !!this.editingMessage, isSending: this.isSendingMessage, canSendTextMessage: this.isTextMessagingAllowed(), canSendFiles: this.isFileMessagingAllowed(), disableEmojiPicker: this.overrides.disableEmojiPicker, maxLength: this.meeting.chat.maxTextLimit, rateLimits: this.meeting.chat.rateLimits, inputTextPlaceholder: this.t('chat.message_placeholder'), onNewMessage: this.onNewMessageHandler, onEditMessage: this.onEditMessageHandler, onEditCancel: this.onEditCancel, onQuotedMessageDismiss: this.onQuotedMessageDismiss }, uiProps), index$1.h("slot", { name: "chat-addon", slot: "chat-addon" })));
     }
     render() {
-        var _a;
         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(), this.isPrivateChatSupported() && (index$1.h("rtk-channel-selector-view", { channels: this.getPrivateChatRecipients(), selectedChannelId: ((_a = this.selectedParticipant) === null || _a === void 0 ? void 0 : _a.userId) || 'everyone', onChannelChange: this.updateRecipients, t: this.t, viewAs: "dropdown" })), 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;
@@ -741,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);
@@ -764,6 +384,7 @@ const RtkChatComposerView = class {
         this.onQuotedMessageDismiss = index$1.createEvent(this, "quotedMessageDismiss", 7);
         /** Whether user can send text messages */
         this.canSendTextMessage = true;
+        this.isSending = false;
         /** Whether user can send file messages */
         this.canSendFiles = true;
         /** Message to be pre-populated */
@@ -824,15 +445,7 @@ const RtkChatComposerView = class {
             messageLimits.messagesSent += 1;
             this.checkRateLimitBreached(currentTime);
             if (message.length > 0) {
-                if (this.quotedMessage.length !== 0) {
-                    this.onNewMessage.emit({
-                        type: 'text',
-                        message,
-                    });
-                }
-                else {
-                    this.onNewMessage.emit({ type: 'text', message });
-                }
+                this.onNewMessage.emit({ type: 'text', message });
                 this.cleanup();
             }
         };
@@ -916,31 +529,56 @@ const RtkChatComposerView = class {
     render() {
         var _a;
         const uiProps = { iconPack: this.iconPack, t: this.t };
-        return (index$1.h(index$1.Host, { key: '06455539e3067eb1c1c592b551d0ef99eba2f331' }, this.canSendTextMessage && this.isEmojiPickerOpen && (index$1.h("rtk-emoji-picker", Object.assign({ key: 'fe83b0ab9562cc0e1c61f89e4b441ef592edfa1a', part: "emoji-picker", onPickerClose: () => {
+        return (index$1.h(index$1.Host, { key: '2df23422579c855ced1cb6d24bb95786a1326baf' }, this.canSendTextMessage && this.isEmojiPickerOpen && (index$1.h("rtk-emoji-picker", Object.assign({ key: 'a7ed280a636d0207f58f0ad13f79c1eaed52ab9c', part: "emoji-picker", onPickerClose: () => {
                 this.isEmojiPickerOpen = false;
             }, onRtkEmojiClicked: (e) => {
                 this.textMessage += e.detail;
                 this.$textComposer.setText(this.textMessage, true);
-            } }, uiProps))), index$1.h("slot", { key: '8653c2e805e41adf5958941cc10ff01d43f97792', name: "chat-addon" }), this.quotedMessage && this.quotedMessage.length !== 0 && (index$1.h("div", { key: '82b9bf5203a799709e980d61ab827b9daf8292e6', class: "quoted-message-container", part: "quoted-message-container" }, index$1.h("div", { key: '4b9fe8f382da7075e815c329f2d7dca17ce0f694', class: "quoted-message scrollbar" }, index$1.h("rtk-text-message-view", { key: '7a16547e83d9bca43794e46e56c5a9c743a9929a', text: this.quotedMessage, isMarkdown: true })), index$1.h("div", { key: '5691b8d882016cda66cd2faf3858bc38cd53458c' }, index$1.h("rtk-icon", { key: '2d5b222bd5eaac6d46812b704674f52f86efdb92', "aria-label": this.t('dismiss'), class: "dismiss", icon: this.iconPack.dismiss, onClick: this.onQuotedMessageDismissHandler })))), index$1.h("div", { key: 'd7638411df9ae1b2cbef8cae66d0af2b7ad310e6', class: "composer-container" }, index$1.h("div", { key: 'ca1ee222584fdd27e53989d28b6ce583c6b0c400', class: "composers" }, this.fileToUpload && (index$1.h("rtk-draft-attachment-view", Object.assign({ key: 'd511c900c71a97f8f92640b73a7575dcd267de88' }, uiProps, { attachment: this.fileToUpload, onDeleteAttachment: () => (this.fileToUpload = null) }))), !this.fileToUpload && (index$1.h("rtk-text-composer-view", { key: '08f214184853dcedeccb5f07dac2a0a308269793', value: this.textMessage, placeholder: this.inputTextPlaceholder, onTextChange: this.onTextChangeHandler, keyDownHandler: this.onKeyDownHandler, maxLength: (_a = this.maxLength) !== null && _a !== void 0 ? _a : chat.MAX_TEXT_LENGTH, rateLimitBreached: this.rateLimitsBreached, t: this.t, iconPack: this.iconPack, ref: (el) => (this.$textComposer = el) }))), index$1.h("div", { key: '9b6cbe7cb8529c8e60f8cc9e13cc95ca64504efc', class: "chat-buttons", part: "chat-buttons" }, index$1.h("div", { key: '30e24e8edf58179ef20ccd436d3833ba177ebb0d', class: "left", part: "chat-buttons-left" }, !this.fileToUpload && !this.isEditing && (index$1.h("div", { key: '54ad294bedab1c0bc7c02a72c4f3f51bc10bba85' }, this.canSendFiles && [
-            index$1.h("rtk-file-picker-button", Object.assign({ key: '1a0760e05a183b6c8da2ff02e33ecd40bfdb6e97' }, uiProps, { onFileChange: (event) => this.onFileUploadHandler('file', event.detail) })),
-            index$1.h("rtk-file-picker-button", Object.assign({ key: '5d6cf1928c8edb6737b367807c93152ad62cea36', filter: "image/*", label: this.t('chat.send_img'), icon: "image", onFileChange: (event) => this.onFileUploadHandler('image', event.detail) }, uiProps)),
-        ], this.canSendTextMessage && !this.disableEmojiPicker && (index$1.h("rtk-emoji-picker-button", Object.assign({ key: '50f14152b8d15009104e9b1dd05ee5e1ec49ab16', isActive: this.isEmojiPickerOpen, onClick: () => {
+            } }, uiProps))), index$1.h("slot", { key: '759df2a2029fbba963cfc26cd871771881dd6c5e', name: "chat-addon" }), this.quotedMessage && this.quotedMessage.length !== 0 && (index$1.h("div", { key: '413be05a7374fc76f790ad3f6f5bef5a56a6ef97', class: "quoted-message-container", part: "quoted-message-container" }, index$1.h("div", { key: '7fb6b571103c675dca202b74bd07fd55062dab70', class: "quoted-message scrollbar" }, index$1.h("rtk-text-message-view", { key: '3997aa719a746234c5641e976dd0c27e68b69dae', text: this.quotedMessage, isMarkdown: true })), index$1.h("div", { key: 'f76ec54e3d67d6957d5d152b144b22d8cc122660' }, index$1.h("rtk-icon", { key: '897b52fc41814d2cb8beeb461c36c9843cb2869e', "aria-label": this.t('dismiss'), class: "dismiss", icon: this.iconPack.dismiss, onClick: this.onQuotedMessageDismissHandler })))), index$1.h("div", { key: '35447eb1fffffd372c231bc76ce741e483e7f26a', class: "composer-container" }, index$1.h("div", { key: '0f8f198df49fcc27f6c85b8d6909eb2a7c00e142', class: "composers" }, this.fileToUpload && (index$1.h("rtk-draft-attachment-view", Object.assign({ key: '9d325d05fecb12ecb41f02e54561d2e1b59b2c2f' }, uiProps, { attachment: this.fileToUpload, onDeleteAttachment: () => (this.fileToUpload = null) }))), !this.fileToUpload && (index$1.h("rtk-text-composer-view", { key: 'fbc870bb9d9c2418e528e64273edb67846e23e17', value: this.textMessage, placeholder: this.inputTextPlaceholder, onTextChange: this.onTextChangeHandler, keyDownHandler: this.onKeyDownHandler, maxLength: (_a = this.maxLength) !== null && _a !== void 0 ? _a : chat.MAX_TEXT_LENGTH, rateLimitBreached: this.rateLimitsBreached, t: this.t, iconPack: this.iconPack, ref: (el) => (this.$textComposer = el) }))), index$1.h("div", { key: '20191403531eb87bca86d13387c7937153a4c99e', class: "chat-buttons", part: "chat-buttons" }, index$1.h("div", { key: '4914a61fea3f502dc14778a237e9ce35a97e3afc', class: "left", part: "chat-buttons-left" }, !this.fileToUpload && !this.isEditing && (index$1.h("div", { key: '76c843588f2f7d90f5e60a1e44955309026eda27' }, this.canSendFiles && [
+            index$1.h("rtk-file-picker-button", Object.assign({ key: 'cbb6f17b22f10b48ada27a4b4da3c1d5b2c7e320' }, uiProps, { onFileChange: (event) => this.onFileUploadHandler('file', event.detail) })),
+            index$1.h("rtk-file-picker-button", Object.assign({ key: '0868162a2da021dd4175e977adf47d72ca54044a', filter: "image/*", label: this.t('chat.send_img'), icon: "image", onFileChange: (event) => this.onFileUploadHandler('image', event.detail) }, uiProps)),
+        ], this.canSendTextMessage && !this.disableEmojiPicker && (index$1.h("rtk-emoji-picker-button", Object.assign({ key: 'a73378b5495dc3bfcde7dba335f674292ee6a96c', isActive: this.isEmojiPickerOpen, onClick: () => {
                 this.isEmojiPickerOpen = !this.isEmojiPickerOpen;
-            } }, uiProps))), index$1.h("slot", { key: '1e1fe81e1e196fc8d679bfc2d6ed0c6402c74a4a', name: "chat-buttons" })))), index$1.h("div", { key: '272526b7c81ed1acd028beceb3869c584e94308f', class: "right", part: "chat-buttons-right" }, !this.isEditing && (index$1.h("rtk-tooltip", { key: '6750abf323b2f1c951661c44390eb97d3ec71544', variant: "primary", label: this.t('chat.send_msg'), delay: 2000 }, index$1.h("rtk-button", { key: 'a159fa6dcc1f8ede64085abd8286a69ad86b7002', kind: "icon", disabled: this.disableSendButton, onClick: () => this.handleSendMessage(), title: this.t('chat.send_msg') }, index$1.h("rtk-icon", { key: 'bb26a3a7954727859f5566ecc60d746ac6700b7b', icon: this.iconPack.send })))), this.isEditing && (index$1.h("div", { key: '5ef512e3fc236510a518e76ce027f0c8fc1c9a0c', class: "edit-buttons" }, index$1.h("rtk-tooltip", { key: 'e18ae7567350d32b18a70de8cb2c1af0830353bc', variant: "secondary", label: this.t('cancel'), delay: 2000 }, index$1.h("rtk-button", { key: '4f4aa2e44308a393314ab95244c87a3b8d4b282c', kind: "icon", variant: "secondary", onClick: () => this.handleEditCancel(), title: this.t('cancel') }, index$1.h("rtk-icon", { key: 'a4a99fe9ae34707cb63f63461a4728baf70e3e7a', icon: this.iconPack.dismiss }))), index$1.h("rtk-tooltip", { key: '789315dbf551ba74d004459981532fa9a467ac45', variant: "primary", label: this.t('chat.update_msg'), delay: 2000 }, index$1.h("rtk-button", { key: '61da43993c2da9b8bd00796544030e9b4cb45f12', kind: "icon", onClick: () => this.handleEditMessage(), title: this.t('chat.send_msg') }, index$1.h("rtk-icon", { key: 'e45aab29b0f6553ed2d7f370a8817bdccdabe42e', icon: this.iconPack.checkmark }))))))))));
+            } }, 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);
@@ -962,31 +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.lastReadMessageIndex = -1;
         this.permissionsUpdateListener = () => {
             this.permissionsChanged = !this.permissionsChanged;
         };
-        this.maybeMarkChannelAsRead = (messages) => {
-            if (!this.selectedChannelId)
-                return;
-            if (messages.length === 0)
-                return;
-            if (this.lastReadMessageIndex !== -1)
-                return;
-            const latestMsg = messages.at(0).time > messages.at(-1).time ? messages.at(0) : messages.at(-1);
-            if (!latestMsg.channelIndex)
-                return;
-            this.lastReadMessageIndex = parseInt(latestMsg.channelIndex, 10);
-            this.meeting.chat.markLastReadMessage(this.selectedChannelId, latestMsg);
-        };
         this.getChatMessages = async (timestamp, size, reversed) => {
-            const { messages } = await this.meeting.chat.getMessages(timestamp, size, reversed, undefined, this.selectedChannelId);
-            this.maybeMarkChannelAsRead(messages);
-            return messages;
+            if (this.privateChatRecipient) {
+                try {
+                    const messages = await this.meeting.chat.fetchPrivateMessages({
+                        timestamp,
+                        limit: size,
+                        direction: reversed ? 'before' : 'after',
+                        userId: this.privateChatRecipient.userId,
+                    });
+                    return messages;
+                }
+                catch (err) {
+                    return [];
+                }
+            }
+            try {
+                const messages = await this.meeting.chat.fetchPublicMessages({
+                    timestamp,
+                    limit: size,
+                    direction: reversed ? 'before' : 'after',
+                });
+                return messages;
+            }
+            catch (err) {
+                return [];
+            }
         };
         this.createChatNodes = (data) => {
             /**
@@ -994,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);
             });
         };
@@ -1005,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',
@@ -1041,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
@@ -1062,17 +711,23 @@ const RtkChatMessagesUiPaginated = class {
             }
             const isSelf = message.userId === this.meeting.self.userId;
             const viewType = isSelf ? 'outgoing' : 'incoming';
-            return (index$1.h("div", null, index$1.h("div", { class: "message-wrapper", id: message.id }, index$1.h("rtk-message-view", { pinned: message.pinned, time: message.time, actions: this.getMessageActions(message), authorName: message.displayName, isSelf: isSelf, avatarUrl: displayPicture, hideAuthorName: isContinued, viewType: viewType, variant: "bubble", onAction: (event) => this.onMessageActionHandler(event.detail, message) }, index$1.h("div", null, index$1.h("div", { class: "body" }, message.type === 'text' && (index$1.h("rtk-text-message-view", { text: message.message, isMarkdown: true })), message.type === 'file' && (index$1.h("rtk-file-message-view", { name: message.name, url: message.link, size: message.size })), message.type === 'image' && (index$1.h("rtk-image-message-view", { url: message.link, onPreview: () => {
+            return (index$1.h("div", null, index$1.h("div", { class: "message-wrapper", id: message.id }, index$1.h("rtk-message-view", { messageType: message.type, pinned: message.pinned, isEdited: message.isEdited, time: message.time, actions: this.getMessageActions(message), authorName: message.displayName, isSelf: isSelf, avatarUrl: displayPicture, hideAuthorName: isContinued, viewType: viewType, variant: "bubble", onAction: (event) => this.onMessageActionHandler(event.detail, message) }, index$1.h("div", null, index$1.h("div", { class: "body" }, message.type === 'text' && (index$1.h("rtk-text-message-view", { text: message.message, isMarkdown: true })), message.type === 'file' && (index$1.h("rtk-file-message-view", { name: message.name, url: message.link, size: message.size })), message.type === 'image' && (index$1.h("rtk-image-message-view", { url: message.link, onPreview: () => {
                     this.stateUpdate.emit({ image: message });
                 } }))))))));
         };
         this.chatUpdateListener = (data) => {
-            if (this.selectedChannelId && data.message.channelId !== this.selectedChannelId)
+            var _a, _b, _c;
+            // if private message and not for privateChatRecipient, ignore
+            // if private message and public chat selected, ignore
+            if (((_a = data.message.targetUserIds) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
+                !data.message.targetUserIds.includes((_b = this.privateChatRecipient) === null || _b === void 0 ? void 0 : _b.userId))
+                return;
+            // if public message and private chat selected, ignore
+            if (this.privateChatRecipient && ((_c = data.message.targetUserIds) === null || _c === void 0 ? void 0 : _c.length) === 0) {
                 return;
+            }
             if (data.action === 'add') {
                 this.$paginatedListRef.onNewNode(data.message);
-                this.lastReadMessageIndex = -1;
-                this.maybeMarkChannelAsRead([data.message]);
             }
             else if (data.action === 'delete') {
                 this.$paginatedListRef.onNodeDelete(data.message.id);
@@ -1091,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)
@@ -1106,33 +772,220 @@ const RtkChatMessagesUiPaginated = class {
         }
         this.permissionsUpdateListener();
     }
-    channelChanged() {
-        this.lastReadMessageIndex = -1;
-    }
     render() {
-        return (index$1.h(index$1.Host, { key: '55b594d1fad2c164a70b71e297f63273ece0bc4f' }, index$1.h("rtk-paginated-list", { key: '1554ee896643feec72a02672f156f95c988813ce', ref: (el) => (this.$paginatedListRef = el), pageSize: this.pageSize, pagesAllowed: 3, fetchData: this.getChatMessages, createNodes: this.createChatNodes, selectedItemId: this.selectedChannelId, emptyListLabel: this.t('chat.empty_channel') }, index$1.h("slot", { key: '03aeb2069b87cb217b9759cabd3835c9bac81f11' }))));
+        return (index$1.h(index$1.Host, { key: '8062f966f4bc489a4fdadb2da59bb88473e45194' }, index$1.h("rtk-paginated-list", { key: '7f50458ee29cd7bd83bd123303e82db556230d67', ref: (el) => (this.$paginatedListRef = el), pageSize: this.pageSize, pagesAllowed: 3, fetchData: this.getChatMessages, createNodes: this.createChatNodes, emptyListLabel: this.t('chat.empty_chat') }, index$1.h("slot", { key: '69b0106558d9995b0bc24ed3d0d36f56febbf90f' }))));
     }
     get host() { return index$1.getElement(this); }
     static get watchers() { return {
-        "meeting": ["meetingChanged"],
-        "selectedChannelId": ["channelChanged"]
+        "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-1000, 8 8 8) / var(--tw-bg-opacity));opacity:0;pointer-events:none;border-bottom-right-radius:var(--rtk-border-radius-sm, 4px);border-bottom-left-radius:var(--rtk-border-radius-sm, 4px);left:var(--rtk-space-2, 8px);right:var(--rtk-space-2, 8px);max-width:calc(100vw - var(--rtk-space-4, 16px));box-sizing:border-box}.dropdown.open{opacity:1;pointer-events:auto;border-width:1px;border-top-width:var(--rtk-border-width-none, 0);border-style:solid;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity))}.dropdown rtk-paginated-list{box-sizing:border-box;display:flex;height:30vh;flex-direction:column}.public-chat-group-label{display:flex;cursor:pointer;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--rtk-space-2, 8px);border-left-width:var(--rtk-border-width-none, 0);border-right-width:var(--rtk-border-width-none, 0);border-top-width:var(--rtk-border-width-none, 0);border-bottom-width:var(--rtk-border-width-none, 0);border-bottom-width:1px;border-style:solid;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity));padding-top:var(--rtk-space-4, 16px);padding-bottom:var(--rtk-space-4, 16px);padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px)}.public-chat-icon{display:flex;align-items:center;justify-content:center;padding:var(--rtk-space-1, 4px);border-radius:9999px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity))}.public-chat-icon rtk-icon{color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}";
+const RtkChatSelectorStyle0 = rtkChatSelectorCss;
+
+var __decorate$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.unreadMap = new Map();
+        this.disconnectMeeting = (meeting) => {
+            var _a, _b, _c, _d;
+            const { self, participants } = meeting || {};
+            (_a = meeting.chat) === null || _a === void 0 ? void 0 : _a.off('chatUpdate', this.chatUpdateListener);
+            (_b = self === null || self === void 0 ? void 0 : self.permissions) === null || _b === void 0 ? void 0 : _b.off('*', this.chatPermissionUpdateListener);
+            (_c = participants === null || participants === void 0 ? void 0 : participants.joined) === null || _c === void 0 ? void 0 : _c.off('participantJoined', this.participantJoinedListener);
+            (_d = participants === null || participants === void 0 ? void 0 : participants.joined) === null || _d === void 0 ? void 0 : _d.off('participantLeft', this.participantLeftListener);
+        };
+        this.toggle = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.isOpen = !this.isOpen;
+            this.dropdownToggle.emit({ open: this.isOpen });
+        };
+        this.selectUser = async (user) => {
+            if (user === null || user === void 0 ? void 0 : user.userId) {
+                this.unreadMap.set(user.userId, false);
+                this.$paginatedListRef.rerenderList();
+            }
+            this.selectedUser = user;
+            this.chatSelectorChange.emit({ selectedUser: user });
+            await this.close();
+        };
+        this.chatPermissionUpdateListener = () => {
+            var _a, _b;
+            this.showPrivateChat = !!(((_a = this.meeting.self.permissions.chatPrivate) === null || _a === void 0 ? void 0 : _a.canSend) ||
+                ((_b = this.meeting.self.permissions.chatPrivate) === null || _b === void 0 ? void 0 : _b.canReceive));
+            if (!this.showPrivateChat) {
+                this.selectedUser = undefined;
+                this.chatSelectorChange.emit({ selectedUser: undefined });
+            }
+        };
+        this.onParticipantUpdate = () => {
+            var _a, _b, _c, _d;
+            if (!this.selectedUser)
+                return;
+            const participants = ((_d = (_c = (_b = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.participants) === null || _b === void 0 ? void 0 : _b.joined) === null || _c === void 0 ? void 0 : _c.toArray) === null || _d === void 0 ? void 0 : _d.call(_c)) || [];
+            if (!participants.some((p) => { var _a; return p.id === ((_a = this.selectedUser) === null || _a === void 0 ? void 0 : _a.id); })) {
+                this.selectedUser = undefined;
+                this.chatSelectorChange.emit({ selectedUser: undefined });
+            }
+        };
+        this.participantJoinedListener = (data) => {
+            this.$paginatedListRef.onNewNode(data);
+        };
+        this.participantLeftListener = (data) => {
+            this.$paginatedListRef.onNodeDelete(data.id);
+            this.onParticipantUpdate();
+        };
+        // @ts-ignore - unused params
+        this.getParticipants = async (timestamp, size, reversed) => {
+            const meeting = this.meeting;
+            if (!meeting)
+                return [];
+            /**
+             * FIXME(ikabra): This is a temporary hack in place to handle the initial load
+             * and not repeat participants when a user reaches the top of the list.
+             * This must be replaced by actual pagination APIs from backend for participants.
+             */
+            if (!timestamp)
+                return [];
+            const participants = meeting.participants.joined.toArray();
+            return participants;
+        };
+        this.createPaticipantNodes = (data) => {
+            return data.map((participant) => {
+                var _a;
+                return (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, (_a = participant.name) !== null && _a !== void 0 ? _a : this.t('participant')), this.unreadMap.get(participant.userId) ? (index$1.h("div", { class: "private-chat-unread-badge" })) : null));
+            });
+        };
+        this.chatUpdateListener = (data) => {
+            var _a;
+            if (data.action !== 'add')
+                return;
+            if (!((_a = data.message.targetUserIds) === null || _a === void 0 ? void 0 : _a.length))
+                return;
+            const selfUserId = this.meeting.self.userId;
+            const otherUserId = data.message.targetUserIds.find((id) => id !== selfUserId);
+            if (!otherUserId)
+                return;
+            this.unreadMap.set(otherUserId, true);
+            this.$paginatedListRef.rerenderList();
+        };
+    }
+    /** */
+    async close() {
+        if (!this.isOpen)
+            return;
+        this.isOpen = false;
+        this.dropdownToggle.emit({ open: false });
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+        this.overridesChanged(this.overrides);
+    }
+    disconnectedCallback() {
+        var _a, _b, _c;
+        if (!this.meeting)
+            return;
+        const { self, participants } = this.meeting;
+        (_a = self === null || self === void 0 ? void 0 : self.permissions) === null || _a === void 0 ? void 0 : _a.off('*', this.chatPermissionUpdateListener);
+        (_b = participants === null || participants === void 0 ? void 0 : participants.joined) === null || _b === void 0 ? void 0 : _b.off('participantJoined', this.participantJoinedListener);
+        (_c = participants === null || participants === void 0 ? void 0 : participants.joined) === null || _c === void 0 ? void 0 : _c.off('participantLeft', this.participantLeftListener);
+    }
+    overridesChanged(overrides) {
+        var _a, _b;
+        if (!this.meeting || this.meeting.self)
+            return;
+        this.showPrivateChat =
+            !!(((_a = this.meeting.self.permissions.chatPrivate) === null || _a === void 0 ? void 0 : _a.canSend) ||
+                ((_b = this.meeting.self.permissions.chatPrivate) === null || _b === void 0 ? void 0 : _b.canReceive)) && !overrides.disablePrivateChat;
+    }
+    meetingChanged(meeting, oldMeeting) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (oldMeeting)
+            this.disconnectMeeting(oldMeeting);
+        if (!meeting || !meeting.chat)
+            return;
+        this.showPrivateChat =
+            !!(((_a = meeting.self.permissions.chatPrivate) === null || _a === void 0 ? void 0 : _a.canSend) ||
+                ((_b = meeting.self.permissions.chatPrivate) === null || _b === void 0 ? void 0 : _b.canReceive)) && !this.overrides.disablePrivateChat;
+        this.onParticipantUpdate();
+        (_c = meeting.chat) === null || _c === void 0 ? void 0 : _c.on('chatUpdate', this.chatUpdateListener);
+        meeting.self.permissions.on('*', this.chatPermissionUpdateListener);
+        (_e = (_d = meeting === null || meeting === void 0 ? void 0 : meeting.participants) === null || _d === void 0 ? void 0 : _d.joined) === null || _e === void 0 ? void 0 : _e.on('participantJoined', this.participantJoinedListener);
+        (_g = (_f = meeting === null || meeting === void 0 ? void 0 : meeting.participants) === null || _f === void 0 ? void 0 : _f.joined) === null || _g === void 0 ? void 0 : _g.on('participantLeft', this.participantLeftListener);
+    }
+    render() {
+        if (!this.showPrivateChat)
+            return null;
+        return (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" }, this.selectedUser ? (index$1.h("rtk-icon", { icon: this.iconPack.people, size: "sm" })) : (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);
@@ -1183,16 +1036,16 @@ const RtkDraftAttachmentView = class {
         this.onAttachmentChange();
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'f6ede093bcdf8100807baab4de2a296fc4960a07' }, index$1.h("div", { key: 'b19bbe9b2ea58ea4adccc2028a1b24ea6bc9f0a9', class: "preview-overlay" }, index$1.h("div", { key: 'cbb2bfcb3a50e6e7fbfd4109eb340ba51d6a162d', class: "preview" }, index$1.h("rtk-tooltip", { key: '15b50c547470b0fa22014e0992a1c7e26b234573', label: this.t('chat.cancel_upload') }, index$1.h("rtk-button", { key: '940332a51747af3368ffec497d5ef76fa64ecf75', variant: "secondary", kind: "icon", onClick: this.onDeleteClickHandler }, index$1.h("rtk-icon", { key: 'cc04b0ac70753e970ff638f187ad5f702dc3656b', 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;
@@ -1211,10 +1064,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);
@@ -1268,13 +1121,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: '6581d26d75a7b869d0ba00243ec74ee06b927e7d' }, index$1.h("div", { key: '3705d8c557ac3e05769171998e9176e7e40a232c', class: 'close-parent' }, index$1.h("rtk-button", { key: 'b437e579cb828a709de255ddfa6b751e4bdfbe51', 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: '7fac79a21c6be57156d17ceeff9ceb2834bbf709', icon: this.iconPack.dismiss }))), index$1.h("div", { key: '46cb2af6654ef36b7258baf47e3cd9e5bd60bf89', class: 'emoji-parent' }, index$1.h("input", { key: 'cfde33638d531f9bac1b1bf25d966a369f4dfb38', 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;
@@ -1282,7 +1135,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);
@@ -1301,13 +1154,13 @@ const RtkEmojiPickerButton = class {
         this.t = uiStore.useLanguage();
     }
     render() {
-        return (index$1.h("rtk-tooltip", { key: '45ef1f18da6d1ecc3c02882590cd22e930461562', label: this.t('chat.send_emoji') }, index$1.h("rtk-button", { key: '6504abab2f1c6537443699c53a8cbdcf13530cba', variant: "ghost", kind: "icon", class: { active: this.isActive }, title: this.t('chat.send_emoji') }, index$1.h("rtk-icon", { key: 'd730c81abce72d9c3226f1f666941e1136bee77f', 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;
@@ -1315,7 +1168,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);
@@ -1332,10 +1185,10 @@ const RtkFileMessageView = class {
         this.iconPack = uiStore.defaultIconPack;
     }
     render() {
-        return (index$1.h("div", { key: '5cc29b4780f581a2f8b045e5051bcc66f3fdaf55', class: "file" }, index$1.h("rtk-button", { key: '4100b47bc1d72f08ec5fe645291bfbb58e3a6486', variant: "secondary", kind: "icon", onClick: () => file.downloadFile(string.sanitizeLink(this.url), { name: this.name, fallbackName: 'file' }), part: "button" }, index$1.h("rtk-icon", { key: '52ae14abb7c27b89861d5ba4c907d606257628c9', icon: this.iconPack.download })), index$1.h("div", { key: '02c9ad8d173172a85cc474273a966607d456360e', class: "file-data" }, index$1.h("div", { key: '6ceca21685d04f175006ba35a6de194cc98879ad', class: "name" }, this.name), index$1.h("div", { key: 'b07d07bcaedee3fd6fbcfe81ce2f6bf757655b5f', class: "file-data-split" }, index$1.h("div", { key: '280635ef486de02bc68ca3e774be14fa5a461d1c', class: "ext" }, file.getExtension(this.name)), index$1.h("span", { key: '84f72d8b37b7d15c257faed036b76c737eec780b', class: "divider" }), index$1.h("div", { key: '1b88f48f51afe3fceb57920c3d17f586e848a25f', 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;
@@ -1343,7 +1196,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);
@@ -1388,13 +1241,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: '057a0a5a714dbbde228e3481e53adea4f88fb3ad', label: label }, index$1.h("rtk-button", { key: '04193df1053b14687fb9464a122b9158707bdda1', variant: "ghost", kind: "icon", onClick: () => this.uploadFile(), title: label }, index$1.h("rtk-icon", { key: 'ed2fce30b93dfce9dd6b967d5993c93496cf3388', 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;
@@ -1419,7 +1272,7 @@ const RtkIcon = class {
         this.size = 'lg';
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'fbacb1ee3dd4c1ca7aa612f08e938601df73036c' }, index$1.h("div", { key: '04c026967cb7aa3acb3fba09fcf5b0d33f45e2b0', class: "icon-wrapper", innerHTML: parseIcon(this.icon), part: "wrapper" })));
+        return (index$1.h(index$1.Host, { key: 'fdbe6fd9647bae7cfdf02ba6a250aa3c0c39ad85' }, index$1.h("div", { key: '114baca2f9ce9376e69073b40170473cc359915f', class: "icon-wrapper", innerHTML: parseIcon(this.icon), part: "wrapper" })));
     }
 };
 RtkIcon.style = RtkIconStyle0;
@@ -1427,7 +1280,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);
@@ -1448,7 +1301,7 @@ const RtkImageMessageView = class {
         this.status = 'loading';
     }
     render() {
-        return (index$1.h("div", { key: '066606e6ae62634b2466bb46b453e0c2d91b17ea', class: { image: true, loaded: this.status === 'loaded' } }, index$1.h("img", { key: 'f042e5d3c1a6341e9fc0845e6643016f1be5b5f7', 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';
@@ -1456,20 +1309,20 @@ const RtkImageMessageView = class {
                 if (this.status === 'loaded') {
                     this.onPreview.emit(this.url);
                 }
-            } }), this.status === 'loading' && (index$1.h("div", { key: 'd4a5030468fbf70afae62bd55ae4d0fa989e15c2', class: "image-spinner", title: this.t('chat.img.loading'), "aria-label": this.t('chat.img.loading') }, index$1.h("rtk-spinner", { key: '216aba361a46cc100e7d26cc2daf1ffb0948d695', iconPack: this.iconPack }))), this.status === 'errored' && (index$1.h("div", { key: '01f5da8f70872c9fa22dc9a9b70b046b0001d05b', 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: '0f7e6fed2730f6366d07fc6afddb2b247e9b7d3a', icon: this.iconPack.image_off }))), this.status === 'loaded' && (index$1.h("div", { key: '5ac0e61c65a88a8d6b9ee54c900b856854d1b84b', class: "actions" }, index$1.h("rtk-button", { key: 'fd83dfecd7b5d9c3976374c3c55731b1f026fc0a', 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: '3ca7384fa28e6716345acacf9225ae9471ff8d63', icon: this.iconPack.full_screen_maximize })), index$1.h("rtk-button", { key: '198787808c389e4df48d3609a53c2d27cf2e7fb3', class: "action", variant: "secondary", kind: "icon", onClick: () => file.downloadFile(this.url, { fallbackName: 'image' }) }, index$1.h("rtk-icon", { key: 'f38fe3da48d1fc854001c719164c95f0673808c5', 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;
 
-const rtkMarkdownViewCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{overflow-wrap:break-word}a{color:currentColor}.block-quote,blockquote{margin:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-3, 12px);--tw-border-spacing-x:1px;--tw-border-spacing-y:1px;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y);border-top-width:var(--rtk-border-width-none, 0);border-bottom-width:var(--rtk-border-width-none, 0);border-left-width:var(--rtk-border-width-md, 2px);border-right-width:var(--rtk-border-width-none, 0);border-style:solid;padding:var(--rtk-space-0\\.5, 2px);padding-left:var(--rtk-space-2, 8px);border-radius:var(--rtk-border-radius-sm, 4px);border-top-left-radius:var(--rtk-border-radius-none, 0);border-bottom-left-radius:var(--rtk-border-radius-none, 0)}pre{white-space:pre-wrap}";
+const rtkMarkdownViewCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{overflow-wrap:break-word}a{color:currentColor}.block-quote,blockquote{margin:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-3, 12px);--tw-border-spacing-x:1px;--tw-border-spacing-y:1px;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y);border-top-width:var(--rtk-border-width-none, 0);border-bottom-width:var(--rtk-border-width-none, 0);border-left-width:var(--rtk-border-width-md, 2px);border-right-width:var(--rtk-border-width-none, 0);border-style:solid;padding:var(--rtk-space-0\\.5, 2px);padding-left:var(--rtk-space-2, 8px);border-radius:var(--rtk-border-radius-sm, 4px);border-top-left-radius:var(--rtk-border-radius-none, 0);border-bottom-left-radius:var(--rtk-border-radius-none, 0)}pre{white-space:pre-wrap;width:300px;margin-right:var(--rtk-space-2, 8px)}.markdown-message{box-sizing:border-box}";
 const RtkMarkdownViewStyle0 = rtkMarkdownViewCss;
 
 const RtkMarkdownView = class {
@@ -1549,7 +1402,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: '787e6d3177f4faf1c8dcd7c73d83a6de9c57b42b' }, withReply.length !== 0 && index$1.h("blockquote", { key: '1c4b82fb870994e6707d35adcd5e6f2f0e65dd26' }, this.renderMessage(withReply)), withoutReply.length !== 0 && this.renderMessage(withoutReply)));
+        return (index$1.h("p", { key: '2c21b4c1dc9f18a17048f0827e552ffb8d595eee', class: "markdown-message" }, withReply.length !== 0 && index$1.h("blockquote", { key: 'f6ff3e02781136f2fb5f3e68dbbeac39430b6386' }, this.renderMessage(withReply)), withoutReply.length !== 0 && this.renderMessage(withoutReply)));
     }
 };
 RtkMarkdownView.style = RtkMarkdownViewStyle0;
@@ -1879,7 +1732,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);
@@ -1930,7 +1783,7 @@ const RtkMenu$1 = class {
         });
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '15461c803838be1651df6116a61598ce8ab988f9' }, index$1.h("span", { key: 'f36cdd2f1141f46a993daa880682382904a72509', 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';
@@ -1939,21 +1792,21 @@ const RtkMenu$1 = class {
                 else {
                     this.menuListEl.style.display = 'none';
                 }
-            } }, index$1.h("slot", { key: 'af622c9dbb3394cb46a6bb909a45c5e3248b1a09', name: "trigger" })), index$1.h("span", { key: '445258e31b4b775fbc22b268234fe15a33f809c9', part: "menu-list", id: "menu-list", ref: (el) => (this.menuListEl = el) }, index$1.h("slot", { key: '87396622c6078253736cbe43a1cac55c6f90754f' }))));
+            } }, 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);
@@ -1974,21 +1827,21 @@ const RtkMenuItem = class {
         this.t = uiStore.useLanguage();
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '8679dae05e846bb8b83a1dbc9580aa2dcad18ccd', class: { [this.menuVariant]: true } }, index$1.h("slot", { key: 'da53376b8188bfc47f904d348212fedff932b03a', name: "start" }), index$1.h("slot", { key: '4394a3afa13bd298880c1be5255f5a004c5ed42e' }), index$1.h("slot", { key: '2be62c70172912e6516ce207b571ea4794aa4f6c', 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);
@@ -2009,21 +1862,21 @@ const RtkMenuList = class {
         this.t = uiStore.useLanguage();
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'b743da0bae39c93cff7896968a64c84166b8a751', class: { [this.menuVariant]: true } }, index$1.h("slot", { key: '46ca973e68fccbf5c8c7544f61bb9745840d0054' })));
+        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;
 
-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-2, 8px);align-self:flex-end;font-size:11px;color:rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76))}.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 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-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.incoming .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);
@@ -2057,18 +1910,22 @@ const RtkMessageView = class {
         this.iconPack = uiStore.defaultIconPack;
     }
     renderActions() {
-        return (index$1.h("rtk-menu", { placement: this.isSelf ? 'bottom-start' : 'bottom-end', offset: 1 }, index$1.h("button", { slot: "trigger", class: "actions" }, index$1.h("rtk-icon", { icon: this.iconPack.chevron_down })), index$1.h("rtk-menu-list", { menuVariant: this.isSelf ? 'primary' : 'secondary' }, this.actions.map((action) => (index$1.h("rtk-menu-item", { menuVariant: this.isSelf ? 'primary' : 'secondary', onClick: () => this.onAction.emit(action.id) }, action.icon && index$1.h("rtk-icon", { icon: action.icon, slot: "start" }), action.label))))));
+        return (index$1.h("rtk-menu", { placement: this.isSelf ? 'bottom-start' : 'bottom-end', offset: 1 }, index$1.h("button", { slot: "trigger", class: "actions" }, index$1.h("rtk-icon", { icon: this.iconPack.chevron_down })), index$1.h("rtk-menu-list", { menuVariant: this.isSelf ? 'primary' : 'secondary' }, this.actions.map((action) => {
+            if (action.id === 'edit_message' && this.messageType !== 'text')
+                return;
+            return (index$1.h("rtk-menu-item", { menuVariant: this.isSelf ? 'primary' : 'secondary', onClick: () => this.onAction.emit(action.id) }, action.icon && index$1.h("rtk-icon", { icon: action.icon, slot: "start" }), action.label));
+        }))));
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '7a4f7b9cd801a12871077b56c96213d6c7f53685' }, index$1.h("div", { key: '2b1731b82f709cf90f6d7ab239a8a516886de227', class: { 'message-wrapper': true, [this.viewType]: true } }, !this.hideAvatar && (index$1.h("aside", { key: '9963f792a5475c74e8170c0baec328162828163d', class: "avatar", part: "avatar" }, index$1.h("rtk-avatar", { key: 'e09b73fbba38f108809e6444940e8053c71a0276', participant: { name: this.authorName, picture: this.avatarUrl }, size: "sm" }))), index$1.h("div", { key: 'cdd752fa1553c5977251dcb0a32ecc5b65984514', class: "message", part: "message" }, !this.hideAuthorName && (index$1.h("div", { key: 'd0a758ac727a0a9b1757e8a61caf57bfadc20d08', class: "header" }, this.authorName, " ", this.isSelf ? ' (You)' : '')), index$1.h("div", { key: '32687e9a0462eaad2d625eb93d82205a23f99f51', class: { body: true, bubble: this.variant === 'bubble' } }, index$1.h("slot", { key: 'ca2022939cb8becf5d81655a37e344ff930a3251' }), !this.hideMetadata && !!this.time && (index$1.h("div", { key: '11dec318a44909b3080dcd29b3a6c4074ce394e3', class: "metadata", title: date.formatDateTime(this.time) }, this.pinned && index$1.h("rtk-icon", { key: '7a68a35c7113407f3676ee09de42fcab50485f39', icon: this.iconPack.pin, size: "sm" }), date.elapsedDuration(this.time, new Date(Date.now())))), this.actions.length !== 0 && this.renderActions())))));
+        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}.private-chat-unread-badge{height:var(--rtk-space-2, 8px);width:var(--rtk-space-2, 8px);border-radius:9999px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity))}: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{box-sizing:border-box;display:flex;width:100%;cursor:pointer;flex-direction:row;overflow:hidden;border-radius:var(--rtk-border-radius-sm, 4px)}: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-container{display:flex;width:100%;flex-direction:row;align-items:flex-start;padding:var(--rtk-space-2, 8px)}:host(.pinned-message-selector-paginated-list) .pinned-message-content{margin-left:var(--rtk-space-2, 8px);margin-right:var(--rtk-space-2, 8px);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;
 
 /**
@@ -2097,7 +1954,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);
@@ -2110,6 +1967,12 @@ var __decorate$2 = (undefined && undefined.__decorate) || function (decorators,
 const RtkPaginatedList = class {
     constructor(hostRef) {
         index$1.registerInstance(this, hostRef);
+        // Timestamp pertaining to the oldest stored message
+        this.oldestPaginatedTimestamp = 0;
+        // Timestamp pertaining to the latest stored message
+        this.latestPaginatedTimestamp = null;
+        // Timestamp pertaining to the latest message stored in backend
+        this.latestMessageTimestamp = null;
         // the length of pages will always be pageSize + 2
         this.pages = [];
         // Controls whether to keep auto-scrolling when a new page load.
@@ -2134,6 +1997,12 @@ const RtkPaginatedList = class {
             return rect.top >= 0 && rect.bottom <= window.innerHeight;
         };
     }
+    /**
+     * Rerender paginated list
+     */
+    async rerenderList() {
+        this.rerenderBoolean = !this.rerenderBoolean;
+    }
     /**
      * Adds a new node to the beginning of the paginated list
      * @param {DataNode} node - The data node to add to the beginning of the list
@@ -2141,33 +2010,33 @@ const RtkPaginatedList = class {
     async onNewNode(node) {
         // if there are no pages, append to the first page
         if (this.pages.length < 1) {
-            this.oldTS = node.timeMs;
+            this.oldestPaginatedTimestamp = node.timeMs;
             this.pages.unshift([node]);
-            this.newTS = node.timeMs;
-            this.maxTS = node.timeMs;
+            this.latestPaginatedTimestamp = node.timeMs;
+            this.latestMessageTimestamp = node.timeMs;
             this.rerender();
             if (this.autoScroll)
                 this.$bottomRef.scrollIntoView({ behavior: 'smooth' });
         }
-        else if (this.maxTS === this.newTS) {
-            this.maxTS = node.timeMs;
+        else if (this.latestMessageTimestamp === this.latestPaginatedTimestamp) {
             // append messages to the page if page has not reached full capacity
             if (this.pages[0].length < this.pageSize) {
                 this.pages[0].unshift(node);
-                this.newTS = node.timeMs;
+                this.latestPaginatedTimestamp = node.timeMs;
+                this.latestMessageTimestamp = node.timeMs;
                 this.rerender();
             }
             else {
                 // if page is at full capacity, load next page
                 this.pages.unshift([node]);
-                this.newTS = node.timeMs;
+                this.latestPaginatedTimestamp = node.timeMs;
+                this.latestMessageTimestamp = node.timeMs;
                 // remove pages if out of bounds
                 if (this.pages.length > this.pagesAllowed)
                     this.pages.pop();
                 // update timestamps
                 const lastPage = this.pages[this.pages.length - 1];
-                this.oldTS = lastPage[lastPage.length - 1].timeMs;
-                this.newTS = this.pages[0][0].timeMs;
+                this.oldestPaginatedTimestamp = lastPage[lastPage.length - 1].timeMs;
                 this.rerender();
             }
             if (this.autoScroll)
@@ -2198,11 +2067,11 @@ const RtkPaginatedList = class {
             // update timestamps
             const firstPage = this.pages[0];
             const lastPage = this.pages[this.pages.length - 1];
-            this.newTS = (_a = firstPage === null || firstPage === void 0 ? void 0 : firstPage[0]) === null || _a === void 0 ? void 0 : _a.timeMs;
-            this.oldTS = (_b = lastPage === null || lastPage === void 0 ? void 0 : lastPage[lastPage.length - 1]) === null || _b === void 0 ? void 0 : _b.timeMs;
-            // if I have deleted the latest message, update maxTS
+            this.latestPaginatedTimestamp = (_a = firstPage === null || firstPage === void 0 ? void 0 : firstPage[0]) === null || _a === void 0 ? void 0 : _a.timeMs;
+            this.oldestPaginatedTimestamp = (_b = lastPage === null || lastPage === void 0 ? void 0 : lastPage[lastPage.length - 1]) === null || _b === void 0 ? void 0 : _b.timeMs;
+            // if I have deleted the latest message, update latestMessageTimestamp
             if (index === 0 && i === 0)
-                this.maxTS = this.newTS;
+                this.latestMessageTimestamp = this.latestPaginatedTimestamp;
             this.rerender();
             break;
         }
@@ -2219,11 +2088,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 });
     }
@@ -2236,7 +2125,8 @@ const RtkPaginatedList = class {
                 if (this.shouldScrollToBottom)
                     return;
                 // handle top and bottom scroll
-                if (this.isInView(this.$bottomRef)) {
+                if (this.isInView(this.$bottomRef) &&
+                    this.latestMessageTimestamp > this.latestPaginatedTimestamp) {
                     await this.loadNextPage();
                 }
                 else if (this.isInView(this.$topRef)) {
@@ -2257,13 +2147,13 @@ 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.oldTS)
-            this.oldTS = new Date().getTime();
+        // 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;
         this.isLoadingTop = true;
-        const data = await this.fetchData(this.oldTS - 1, this.pageSize, true);
+        const data = await this.fetchData(this.oldestPaginatedTimestamp - 1, this.pageSize, true);
         this.isLoading = false;
         this.isLoadingTop = false;
         // no more old messages to show, we are at the top of the page
@@ -2276,10 +2166,10 @@ const RtkPaginatedList = class {
             this.pages.shift();
         // update timestamps
         const lastPage = this.pages[this.pages.length - 1];
-        this.oldTS = lastPage[lastPage.length - 1].timeMs;
-        this.newTS = this.pages[0][0].timeMs;
-        if (!this.maxTS)
-            this.maxTS = this.newTS;
+        this.oldestPaginatedTimestamp = lastPage[lastPage.length - 1].timeMs;
+        this.latestPaginatedTimestamp = this.pages[0][0].timeMs;
+        if (!this.latestMessageTimestamp)
+            this.latestMessageTimestamp = this.latestPaginatedTimestamp;
         this.rerender();
         // fix scroll position
         if (scrollAnchor)
@@ -2289,19 +2179,19 @@ const RtkPaginatedList = class {
         if (this.isLoading)
             return [];
         // Do nothing. New timestamp needs to be assigned by loadPrevPage method
-        if (!this.newTS) {
+        if (!this.latestPaginatedTimestamp) {
             this.showNewMessagesCTR = false;
             return [];
         }
         this.isLoading = true;
         this.isLoadingBottom = true;
         const scrollAnchor = this.getScrollAnchor('bottom');
-        const data = await this.fetchData(this.newTS + 1, this.pageSize, false);
+        const data = await this.fetchData(this.latestPaginatedTimestamp + 1, this.pageSize, false);
         this.isLoading = false;
         this.isLoadingBottom = false;
         // no more new messages to load
         if (!data.length) {
-            this.maxTS = this.newTS;
+            this.latestMessageTimestamp = this.latestPaginatedTimestamp;
             this.showNewMessagesCTR = false;
             return [];
         }
@@ -2323,8 +2213,8 @@ const RtkPaginatedList = class {
             this.pages.pop();
         // update timestamps
         const lastPage = this.pages[this.pages.length - 1];
-        this.oldTS = lastPage[lastPage.length - 1].timeMs;
-        this.newTS = this.pages[0][0].timeMs;
+        this.oldestPaginatedTimestamp = lastPage[lastPage.length - 1].timeMs;
+        this.latestPaginatedTimestamp = this.pages[0][0].timeMs;
         this.rerender();
         this.pendingScrollAnchor = scrollAnchor;
         return data;
@@ -2396,22 +2286,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: '3e7a77a4254ea0c75513edeaf72a5a77cee0e913' }, index$1.h("div", { key: 'f61e72e7a447048fe17ed8321a077841f991bfc5', class: "scrollbar container", part: "container", ref: (el) => (this.$containerRef = el) }, index$1.h("div", { key: '9efd0543b48b5ad5e147a763d258f7ef1a5024c5', class: { 'show-new-messages-ctr': true, active: this.showNewMessagesCTR } }, index$1.h("rtk-button", { key: '4b9bfda38538ceb89f31f317ddcb15d24f75ae8e', class: "show-new-messages", kind: "icon", variant: "secondary", part: "show-new-messages", onClick: () => {
+        return (index$1.h(index$1.Host, { key: 'bff4fc91b737334c5764e690fbf2adafa1444408' }, index$1.h("div", { key: 'f4efa98ef0bd178602ee03718d35fcb833487909', class: "scrollbar container", part: "container", ref: (el) => (this.$containerRef = el) }, index$1.h("div", { key: '37403f6462812a6662efa9577ae9ed43d27f63d6', class: { 'show-new-messages-ctr': true, active: this.showNewMessagesCTR } }, index$1.h("rtk-button", { key: 'ee7e04e6281370dddb1b1e10b753e96dc602d42a', class: "show-new-messages", kind: "icon", variant: "secondary", part: "show-new-messages", onClick: () => {
                 this.scrollToBottom();
-            } }, index$1.h("rtk-icon", { key: 'fbcbc895940c8046916a2382806fb403e83a0a53', icon: this.iconPack.chevron_down }))), index$1.h("div", { key: 'fe2e51385216cba1905c75db783f037953e4831e', class: "smallest-dom-element", id: "bottom-scroll", ref: (el) => (this.$bottomRef = el) }), this.isLoadingBottom && this.pages.length > 0 && index$1.h("rtk-spinner", { key: '548899e797bbf139526208df3c7696b5859cc884', size: "sm" }), this.isLoading && this.pages.length < 1 && index$1.h("rtk-spinner", { key: '6353d5970e284369c274c28fc3c774d03fd555cc', 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: 'ff7b4e80f27610c0b73b63ea32fa5331b0cf4630', size: "sm" }), index$1.h("div", { key: '8729bf082cde39f7b154fa5816a70b6fb2c7f7df', 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: '91bcdadd2518313fa06306a172575f5acc786596', class: "smallest-dom-element", id: "bottom-scroll", ref: (el) => (this.$bottomRef = el) }), this.isLoadingBottom && this.pages.length > 0 && index$1.h("rtk-spinner", { key: '932af19af69c3ecd5af22dd3051a5eea5cb25e7a', size: "sm" }), this.isLoading && this.pages.length < 1 && index$1.h("rtk-spinner", { key: '9fa60fb784a09800a32a3accdc81d940476330d2', 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: '73103f58338bdb89be69f9f6dc742e3cdd2c95d8', size: "sm" }), index$1.h("div", { key: '9c4c43ffb6442d58040448fe1b2d7332505fc81e', 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-1000, 8 8 8) / var(--tw-bg-opacity));opacity:0;pointer-events:none;border-bottom-right-radius:var(--rtk-border-radius-sm, 4px);border-bottom-left-radius:var(--rtk-border-radius-sm, 4px);left:var(--rtk-space-2, 8px);right:var(--rtk-space-2, 8px);max-width:calc(100vw - var(--rtk-space-4, 16px));box-sizing:border-box}.dropdown.open{opacity:1;pointer-events:auto;border-width:1px;border-top-width:var(--rtk-border-width-none, 0);border-style:solid;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity))}.dropdown rtk-paginated-list{box-sizing:border-box;display:flex;height:30vh;flex-direction:column}";
+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("div", { class: "pinned-message-container" }, 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;
 
@@ -2434,7 +2480,7 @@ const RtkSpinner = class {
         this.size = 'md';
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'c042cbd31d8fa9e58c0cbbc5646575a3172fc824' }, index$1.h("rtk-icon", { key: '0171ba3d5f7506e2c67eb813c5ad5b263352088d', 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([
@@ -2512,7 +2558,7 @@ const RtkTextComposerView = class {
         }
     }
     render() {
-        return (index$1.h("div", { key: 'e5f7fa2bd4a2386ff5185001981477ccacf24556', class: "chat-input", part: "chat-input-container" }, this.maxLengthBreached > 0 && (index$1.h("div", { key: '4c06c853ddc7bebafe45fdb2e2c5c9e1c20021fe', class: 'text-error ' + (this.maxLengthBreached === this.maxLength ? 'breached' : '') }, index$1.h("rtk-icon", { key: '524037dc257f0aea206fbc3503d1fe1cb03449be', 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: 'cf975664f367f2621593239ab1cf2e73f5acdb45', class: 'text-error breached' }, index$1.h("rtk-icon", { key: '70a6555f1fa9752f91951181b46e0ed0e7eb8679', id: "warning-indicator", icon: this.iconPack.warning, part: "warning-indicator" }), ' ', this.t('chat.rate_limit_error'))), index$1.h("textarea", { key: '7fc7280dd143cd701d5037e04c2b36c3ea8ec023', 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([
@@ -2533,7 +2579,7 @@ const RtkTextMessageView = class {
         this.isMarkdown = false;
     }
     render() {
-        return (index$1.h("p", { key: 'b4cbabb44d32f96a23cd72f108d6a36b05491c97', 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;
@@ -2639,7 +2685,7 @@ const RtkMenu = class {
         });
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '5278137bc9b99d9fe9ffeb0fc30bd887d600494d' }, index$1.h("span", { key: 'cbefda068a15340dad76668c3696a10bd94cb8e9', part: "trigger", id: "trigger", ref: (el) => (this.triggerEl = el) }, index$1.h("slot", { key: 'f160cf29ece64145e795a9a11459bd458482c446' })), index$1.h("div", { key: '1056b2bbc8cbacd3c32280d334d9f703a578b5ef', part: "tooltip", class: "tooltip", id: "tooltip", role: "tooltip", ref: (el) => (this.tooltipEl = el) }, index$1.h("div", { key: '6c6816fa1b18d49fa22ab6ffb600aaa23c5b9ec5', id: "arrow", ref: (el) => (this.arrowEl = el), part: "arrow" }), this.label, index$1.h("slot", { key: '3c2d3425b2e8b4d810de2ce40394491c4698aede', name: "tooltip" }))));
+        return (index$1.h(index$1.Host, { key: 'ce9cb2211743e50c83b7f572b2e9dc5b02fa3ac8' }, index$1.h("span", { key: '74f73894f5a62519b3bf8c03a83e7102092ccd5c', part: "trigger", id: "trigger", ref: (el) => (this.triggerEl = el) }, index$1.h("slot", { key: '4551b2a438b1c57ca68e4a2973529186063a13c2' })), index$1.h("div", { key: 'e3dd196c6ee225cb363bcf54d35836ff17ed5969', part: "tooltip", class: "tooltip", id: "tooltip", role: "tooltip", ref: (el) => (this.tooltipEl = el) }, index$1.h("div", { key: '4eb8bb3af588160018ef9d8899afc09edf4b195d', id: "arrow", ref: (el) => (this.arrowEl = el), part: "arrow" }), this.label, index$1.h("slot", { key: 'c427ef3ef9953b764f9b1adcb4a8b7eee1fe91cd', name: "tooltip" }))));
     }
     static get watchers() { return {
         "open": ["openChanged"]
@@ -2649,10 +2695,11 @@ RtkMenu.style = RtkTooltipStyle0;
 
 exports.rtk_avatar = RtkAvatar;
 exports.rtk_button = RtkButton;
-exports.rtk_channel_selector_view = RtkChannelSelectorView;
 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;
@@ -2667,6 +2714,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;