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

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

@@ -3,23 +3,23 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-05554ce6.js');
-const uiStore = require('./ui-store-6c2d680f.js');
+const uiStore = require('./ui-store-594688bf.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-5442bdba.js');
+const chat = require('./chat-90670f84.js');
 const file = require('./file-0b9afa34.js');
-const merge = require('./merge-c46cfa17.js');
+const merge = require('./merge-7ce7986a.js');
 const index$2 = require('./index-821d14b7.js');
-const config = require('./config-0a88d50b.js');
+const config = require('./config-60d594e2.js');
 const ResizeObserver_es = require('./ResizeObserver.es-ba961f16.js');
 const floatingUi_dom_esm = require('./floating-ui.dom.esm-705e65f3.js');
 const date = require('./date-61ffcd0a.js');
+const debounce = require('./debounce-677e65cb.js');
 
 const 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$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);
@@ -57,10 +57,10 @@ const RtkAvatar = class {
         return (index$1.h(index$1.Host, { key: 'd7d3a7b03a3807984dc6798b5e35cec4418e06e7' }, this.getAvatar(), index$1.h("slot", { key: '25aa9fe632a132c1e2f8ef88ac98043bb8ef085a' })));
     }
 };
-__decorate$h([
+__decorate$g([
     index.SyncWithStore()
 ], RtkAvatar.prototype, "iconPack", void 0);
-__decorate$h([
+__decorate$g([
     index.SyncWithStore()
 ], RtkAvatar.prototype, "t", void 0);
 RtkAvatar.style = RtkAvatarStyle0;
@@ -89,147 +89,7 @@ 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: '2c491dbe0ac19cb386f0880fff81f4501648a6ae' }, this.viewAs === 'list' && index$1.h("slot", { key: '0e87d59c7522543b19711813474738f75a0e02fe', name: "header" }), shouldShowDropdown && (index$1.h("div", { key: 'c60692c7f75aa9febd73c134cd79aab020f7c2a5', class: {
-                dropdown: this.viewAs === 'dropdown',
-                scrollbar: this.viewAs === 'dropdown',
-                list: this.viewAs === 'list',
-            } }, !this.disableSearch && (index$1.h("div", { key: '74c50b2fad4cba26a20278f87c77a1672a1d748d', class: "search-container", ref: (el) => (this.$searchEl = el) }, index$1.h("input", { key: 'ff22698874ed7df9d91e72cb485ec2901ddf2b3b', type: "text", placeholder: this.t('chat.search_conversations'), value: this.searchQuery, onInput: (e) => (this.searchQuery = e.target.value) }), index$1.h("rtk-icon", { key: '9c8a9dffc0cea5e56aeb828ee198d0582024f1fa', icon: this.iconPack.search }))), index$1.h("div", { key: '04607e8d3cd62f4e6ca10c2748d6e100a4df4039', 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: 'f710577dda08fe51f169c85318b9c51b89e765bb', class: "dropdown-trigger", onClick: this.toggleDropdown }, index$1.h("span", { key: '9bebec13a0bacb5651ef598ff47b96a2903ccf0f' }, index$1.h("rtk-icon", { key: '0ec4a41bcb7fa3086cdeacc0d6671c23c43a857f', icon: this.iconPack.participants }), this.selectedChannelId &&
-            `${this.t('to')} ${this.getChannelById(this.selectedChannelId).name}`, this.getTotalUnreads() > 0 && (index$1.h("div", { key: '043033c796d39c07a290350c5b7f92eafe03bbd2', class: "unread-count" }, this.getTotalUnreads()))), index$1.h("rtk-icon", { key: '12a2a92172d5741ac6ee99a39ee83158b98a8745', 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  max-height: 30vh;\n  width: 100%;\n  overflow: auto;\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;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}h3{margin:var(--rtk-space-0, 0px);display:flex;height:var(--rtk-space-12, 48px);align-items:center;justify-content:center;font-size:16px;font-weight:400;color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));text-align:center}#dropzone{position:absolute;top:var(--rtk-space-0, 0px);right:var(--rtk-space-0, 0px);bottom:var(--rtk-space-0, 0px);left:var(--rtk-space-0, 0px);z-index:10;display:none;flex-direction:column;align-items:center;justify-content:center;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}#dropzone.active{display:flex;animation:0.2s slide-up ease-in}rtk-chat-messages-ui,rtk-chat-messages-ui-paginated{flex:1 0 0}rtk-chat-composer-view{margin:var(--rtk-space-2, 8px)}.chat-container{display:flex;height:100%;width:100%;flex-direction:row;container-type:size;container-name:chatcontainer}.chat{display:flex;flex:1 1 0%;flex-direction:column}.banner{height:100%;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.view-chats-btn{margin-top:var(--rtk-space-4, 16px)}.selector-container{z-index:50;width:100%;max-width:var(--rtk-space-80, 320px);border-right:var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60))}.selector-container.hide{display:none}.mobile-close-btn{display:none}.selector-container.mobile{height:100%;width:100%;max-width:100%;position:absolute;top:var(--rtk-space-0, 0px);right:var(--rtk-space-0, 0px);bottom:var(--rtk-space-0, 0px);left:var(--rtk-space-0, 0px);background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / 0.6);display:flex}.selector-container.mobile .mobile-close-btn{margin-top:var(--rtk-space-4, 16px);margin-bottom:var(--rtk-space-4, 16px);margin-left:var(--rtk-space-6, 24px);margin-right:var(--rtk-space-6, 24px);display:block}.pinned-messages{position:relative;display:flex;flex-direction:column}.pinned-messages-header{display:flex;align-items:center;justify-content:space-between;gap:var(--rtk-space-2, 8px);padding:var(--rtk-space-4, 16px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));font-size:14px;cursor:pointer}.pinned-messages-header div{display:flex;flex-direction:row;align-items:center;gap:var(--rtk-space-2, 8px)}.pinned-messages-header rtk-icon{height:var(--rtk-space-3, 12px);width:var(--rtk-space-3, 12px)}.pinned-messages-content{--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));position:absolute;left:var(--rtk-space-0, 0px);top:100%;z-index:50;max-height:30vh;width:100%;overflow:auto}.pinned-message{display:flex;cursor:pointer;flex-direction:row;align-items:center;gap:var(--rtk-space-2, 8px);--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity));padding:var(--rtk-space-4, 16px);border-bottom-width:var(--rtk-border-width-sm, 1px);border-right-width:var(--rtk-border-width-none, 0);border-left-width:var(--rtk-border-width-none, 0);border-top-width:var(--rtk-border-width-none, 0);border-style:solid}.pinned-message-avatar{height:var(--rtk-space-6, 24px) !important;width:var(--rtk-space-6, 24px) !important}@keyframes swipe-in{from{transform:translateX(-100%)}to{transform:translateX(0)}}";
 const RtkChatStyle0 = rtkChatCss;
 
 var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -247,8 +107,6 @@ const RtkChat = class {
         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
@@ -299,15 +157,12 @@ const RtkChat = class {
         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;
@@ -335,23 +190,14 @@ const RtkChat = class {
             });
         };
         this.disconnectMeeting = (meeting) => {
-            var _a, _b, _c, _d, _e, _f;
+            var _a;
             if (this.isPrivateChatSupported()) {
                 meeting === null || meeting === void 0 ? void 0 : meeting.participants.joined.removeListener('participantJoined', this.onParticipantUpdate);
                 meeting === null || meeting === void 0 ? void 0 : meeting.participants.joined.removeListener('participantLeft', this.onParticipantUpdate);
             }
             (_a = meeting === null || meeting === void 0 ? void 0 : meeting.chat) === null || _a === void 0 ? void 0 : _a.removeListener('chatUpdate', this.chatUpdateListener);
-            (_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()
@@ -368,20 +214,6 @@ const RtkChat = class {
         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') {
                 // public chat
@@ -398,91 +230,9 @@ const RtkChat = class {
             // 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.isSendingMessage = true;
@@ -497,7 +247,7 @@ const RtkChat = class {
             var _a, _b;
             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, this.editingMessage.channelId));
+                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;
@@ -546,25 +296,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;
@@ -714,11 +445,7 @@ const RtkChat = class {
         }
         return peerIds;
     }
-    channelSwitchListener(e) {
-        this.onChannelChanged(e);
-    }
     renderComposerUI() {
-        var _a;
         if (this.chatRecipientId === 'everyone') {
             if (!this.canSendTextMessage && !this.canSendFiles)
                 return null;
@@ -730,21 +457,18 @@ 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, 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')))), this.renderPinnedMessagesHeader(), index$1.h("rtk-chat-messages-ui-paginated", { meeting: this.meeting, onPinMessage: this.onPinMessage, onEditMessage: this.onMessageEdit, onDeleteMessage: this.onDeleteMessage, size: this.size, iconPack: this.iconPack, t: this.t }), this.renderComposerUI()))));
     }
     get host() { return index$1.getElement(this); }
     static get watchers() { return {
@@ -991,26 +715,14 @@ const RtkChatMessagesUiPaginated = class {
         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);
-        };
+        // TODO: Implement the logic to mark messages as read. Old usages have been kept as-is.
+        this.maybeMarkChatAsRead = (_messages) => { };
         this.getChatMessages = async (timestamp, size, reversed) => {
-            const { messages } = await this.meeting.chat.getMessages(timestamp, size, reversed, undefined, this.selectedChannelId);
-            this.maybeMarkChannelAsRead(messages);
+            const { messages } = await this.meeting.chat.getMessages(timestamp, size, reversed, undefined);
+            this.maybeMarkChatAsRead(messages);
             return messages;
         };
         this.createChatNodes = (data) => {
@@ -1092,12 +804,9 @@ const RtkChatMessagesUiPaginated = class {
                 } }))))))));
         };
         this.chatUpdateListener = (data) => {
-            if (this.selectedChannelId && data.message.channelId !== this.selectedChannelId)
-                return;
             if (data.action === 'add') {
                 this.$paginatedListRef.onNewNode(data.message);
-                this.lastReadMessageIndex = -1;
-                this.maybeMarkChannelAsRead([data.message]);
+                this.maybeMarkChatAsRead([data.message]);
             }
             else if (data.action === 'delete') {
                 this.$paginatedListRef.onNodeDelete(data.message.id);
@@ -1131,16 +840,12 @@ const RtkChatMessagesUiPaginated = class {
         }
         this.permissionsUpdateListener();
     }
-    channelChanged() {
-        this.lastReadMessageIndex = -1;
-    }
     render() {
-        return (index$1.h(index$1.Host, { key: '1cbb364021b79bd756621987ac03c2e852acf3bd' }, index$1.h("rtk-paginated-list", { key: 'b7896890b5e3ea9a190bfa9c86c825233b635aa4', ref: (el) => (this.$paginatedListRef = el), pageSize: this.pageSize, pagesAllowed: 3, fetchData: this.getChatMessages, createNodes: this.createChatNodes, selectedItemId: this.selectedChannelId, emptyListLabel: this.t('chat.empty_channel') }, index$1.h("slot", { key: 'b1255713fc172c4e35385021809d391a5fdf9acc' }))));
+        return (index$1.h(index$1.Host, { key: 'a574f0d8e0c7b1249568db270c73f45ad81fd8e2' }, index$1.h("rtk-paginated-list", { key: '279cf0d1c114c93f009a03779f026f6a7bb6ddf4', ref: (el) => (this.$paginatedListRef = el), pageSize: this.pageSize, pagesAllowed: 3, fetchData: this.getChatMessages, createNodes: this.createChatNodes, emptyListLabel: this.t('chat.empty_chat') }, index$1.h("slot", { key: 'cf28a28970c38375cda7492518fa8ed17802580e' }))));
     }
     get host() { return index$1.getElement(this); }
     static get watchers() { return {
-        "meeting": ["meetingChanged"],
-        "selectedChannelId": ["channelChanged"]
+        "meeting": ["meetingChanged"]
     }; }
 };
 __decorate$d([
@@ -1208,7 +913,7 @@ 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: '5dc2f4f2904db3b33f3682f353010b7d5d3db2d5' }, index$1.h("div", { key: 'b10dfebd718959e55a18db4c31cded17af4fa9fd', class: "preview-overlay" }, index$1.h("div", { key: '3c4cff755b989547d7c348271ca8bd02618e50f5', class: "preview" }, index$1.h("rtk-tooltip", { key: '172e504a86963d269935a49da8b7a6c51da7dc71', label: this.t('chat.cancel_upload') }, index$1.h("rtk-button", { key: '421a172fd744cb65b066a4cb13f81d80e8fc7594', variant: "secondary", kind: "icon", onClick: this.onDeleteClickHandler }, index$1.h("rtk-icon", { key: '1b030c644ea7eec33cc760b947fbcc5d679a1abb', icon: this.iconPack.dismiss }))), this.attachment.type === 'image' ? (index$1.h("img", { class: "preview-image", src: this.filePreview })) : (index$1.h("div", { class: "preview-file" }, index$1.h("span", null, this.filePreview)))))));
     }
     static get watchers() { return {
         "attachment": ["onAttachmentChange"]
@@ -1293,7 +998,7 @@ 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: '13b76b472a4edf495e7bfdf5ac5d09c02c8c383c' }, index$1.h("div", { key: '7cc0a162ffce7699ba8a52a03503b47bb5cf99ef', class: 'close-parent' }, index$1.h("rtk-button", { key: '4f42ddea82a1e67e01a05cbb66aa6de0116a424b', variant: "ghost", kind: "icon", class: "close", onClick: () => { var _a; return (_a = this.pickerClose) === null || _a === void 0 ? void 0 : _a.emit(); }, "aria-label": this.t('close') }, index$1.h("rtk-icon", { key: '47931529abc70c2cc0799254f7012bc3d622df39', icon: this.iconPack.dismiss }))), index$1.h("div", { key: '91c1356be602e7d894c29793df4ea4f83cc3e2a7', class: 'emoji-parent' }, index$1.h("input", { key: '2e141a5bf7f4e9376f9d83d443937b39637e1caf', value: this.filterVal, onInput: (event) => this.handleInputChange(event.target), placeholder: this.t('search'), ref: (el) => (this.inputElement = el) }), this.mapEmojiList())));
     }
 };
 __decorate$b([
@@ -1326,7 +1031,7 @@ 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: '16b0af8b5d8bb121ebbeb80c2f6dd6bc5b53fc06', label: this.t('chat.send_emoji') }, index$1.h("rtk-button", { key: 'cb6d682ce5952173cbd2aceeaa9c20bbd7066c79', variant: "ghost", kind: "icon", class: { active: this.isActive }, title: this.t('chat.send_emoji') }, index$1.h("rtk-icon", { key: '2f414ed05d6cd4d00393fefbb7d4e745d49210a1', icon: this.iconPack.emoji_multiple }))));
     }
 };
 __decorate$a([
@@ -1357,7 +1062,7 @@ 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: '8b4778c0c9cff1d4fc5b45e446cd450d7b8b9156', class: "file" }, index$1.h("rtk-button", { key: '6c72f68880e3bba50e8e5ebe7abd6127de227178', variant: "secondary", kind: "icon", onClick: () => file.downloadFile(string.sanitizeLink(this.url), { name: this.name, fallbackName: 'file' }), part: "button" }, index$1.h("rtk-icon", { key: '62be4e65fc87ca1721b3ab1e3e634afb6d45f3b4', icon: this.iconPack.download })), index$1.h("div", { key: '407c9ca4a0f1be967f5d2cb08f3c15b814d425bb', class: "file-data" }, index$1.h("div", { key: '89fdb171090b4f0500db05bd1ee2908c9f393036', class: "name" }, this.name), index$1.h("div", { key: 'fafc637f7077925b9f25dc9615124a18c47ff684', class: "file-data-split" }, index$1.h("div", { key: '80f45099fbe958ac7d951af08334509d4bada1e0', class: "ext" }, file.getExtension(this.name)), index$1.h("span", { key: 'befbc0bc7065dbf3cc76c2c20091fa30c2f30a52', class: "divider" }), index$1.h("div", { key: '75a2ad121ac602c079eb7e08390a5379ec35f4d8', class: "size" }, file.getFileSize(this.size))))));
     }
 };
 __decorate$9([
@@ -1413,7 +1118,7 @@ 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: '9a4e6046f0ee0972678b64365e14ed1762a0a23a', label: label }, index$1.h("rtk-button", { key: 'e5cdac75458861a2e5258f4bf4af43f818ce599b', variant: "ghost", kind: "icon", onClick: () => this.uploadFile(), title: label }, index$1.h("rtk-icon", { key: '17407d82abb9352c64d37e26d1fc4fd407369703', icon: icon }))));
     }
 };
 __decorate$8([
@@ -1473,7 +1178,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: 'f74af6a1b2b3b93a7b267cda9e43d232c66ea520', class: { image: true, loaded: this.status === 'loaded' } }, index$1.h("img", { key: '779c07d162a10153753f646bca05a1af6f67a070', src: string.sanitizeLink(this.url), onLoad: () => {
                 this.status = 'loaded';
             }, onError: () => {
                 this.status = 'errored';
@@ -1481,9 +1186,9 @@ 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: 'c6bb6bf418436dabc1a73d65ad0975d37beb048b', class: "image-spinner", title: this.t('chat.img.loading'), "aria-label": this.t('chat.img.loading') }, index$1.h("rtk-spinner", { key: 'ead3419ec79f0593ea13f5093ae2abebd7179a71', iconPack: this.iconPack }))), this.status === 'errored' && (index$1.h("div", { key: '871faf9faeba4878c8056d1311773e6b0da5489a', class: "image-errored", title: this.t('chat.error.img_not_found'), "aria-label": this.t('chat.error.img_not_found') }, index$1.h("rtk-icon", { key: 'b800d614db9abdefd60bef87133b0ecccee80a5e', icon: this.iconPack.image_off }))), this.status === 'loaded' && (index$1.h("div", { key: '75656710da042f44d995f570a3a58d741933095c', class: "actions" }, index$1.h("rtk-button", { key: 'bf62519599d17503ebaa2046d932748ad2e0b68f', class: "action", variant: "secondary", kind: "icon", onClick: () => {
                 this.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: '200a6383f044f4744e575ac2bd65a9e6ecf26d4a', icon: this.iconPack.full_screen_maximize })), index$1.h("rtk-button", { key: 'ef63418289bf89db7f6ff8ab2a4f5cce44598d14', class: "action", variant: "secondary", kind: "icon", onClick: () => file.downloadFile(this.url, { fallbackName: 'image' }) }, index$1.h("rtk-icon", { key: '296f173d6cd72ec32181487ae74e7231212cd248', icon: this.iconPack.download }))))));
     }
 };
 __decorate$7([
@@ -1574,7 +1279,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: '8ec8d139843454330a7c2a6da1c46fa7c7a6c02f' }, withReply.length !== 0 && index$1.h("blockquote", { key: 'a2b2a90ee98f45f1ceb5c15cc327391150245567' }, this.renderMessage(withReply)), withoutReply.length !== 0 && this.renderMessage(withoutReply)));
     }
 };
 RtkMarkdownView.style = RtkMarkdownViewStyle0;
@@ -1955,7 +1660,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: 'c5de1fb710d48142e20c3ea8144cffb807d56c63' }, index$1.h("span", { key: '07cf0464bc09c7e6ab1d05c17ba4b4219e5a229f', id: "trigger", ref: (el) => (this.triggerEl = el), onClick: () => {
                 this.clickedThis = true;
                 if (this.menuListEl.style.display !== 'block') {
                     this.menuListEl.style.display = 'block';
@@ -1964,7 +1669,7 @@ 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: 'ee7b8769fa9dd5b8408332c4d467b03962dc396c', name: "trigger" })), index$1.h("span", { key: 'ba37ce9d08b3aadc54db3bbb5c397021e8fe7395', part: "menu-list", id: "menu-list", ref: (el) => (this.menuListEl = el) }, index$1.h("slot", { key: '22200083796195d51f175f0ffdeab023e732c9e0' }))));
     }
 };
 __decorate$6([
@@ -1999,7 +1704,7 @@ 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: '613d2db512a5ccbdd1c8c9e1da6a15487e3f6811', class: { [this.menuVariant]: true } }, index$1.h("slot", { key: '3bb27b46542ed03a01ff77efe1dc69554f9188db', name: "start" }), index$1.h("slot", { key: 'efe49fe8df4b2c1e1e3c2d1b87ee0ec9e8380a29' }), index$1.h("slot", { key: '83491fef2a3f1ebc846081893b20f2a6e6cb12c9', name: "end" })));
     }
 };
 __decorate$5([
@@ -2034,7 +1739,7 @@ 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: 'e7b720a26e59508951d35ef90f1b5d4e0cbd4b14', class: { [this.menuVariant]: true } }, index$1.h("slot", { key: '344410259db395ccafd311ee00a7575f0c2c746a' })));
     }
 };
 __decorate$4([
@@ -2089,7 +1794,7 @@ const RtkMessageView = class {
         }))));
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '4ea54e7662406a5a3897295972506c043d54598c' }, index$1.h("div", { key: 'e8734f99436b9bd16b8c7a801dfb018eb5e07f20', class: { 'message-wrapper': true, [this.viewType]: true } }, !this.hideAvatar && (index$1.h("aside", { key: 'ad92c5ee28a635070e5fe2517dd2c01185082f88', class: "avatar", part: "avatar" }, index$1.h("rtk-avatar", { key: '7da7496c3613a2280dc5fb1ba383790eb7efacf5', participant: { name: this.authorName, picture: this.avatarUrl }, size: "sm" }))), index$1.h("div", { key: '969bc1103c403ea477147d34cd0992114a713d70', class: "message", part: "message" }, !this.hideAuthorName && (index$1.h("div", { key: 'b99ea9217f1b641e67e509bba4c56d936e2af7b0', class: "header" }, this.authorName, " ", this.isSelf ? ' (You)' : '')), index$1.h("div", { key: '2dad045ba207872c932a38ab4c52e3b0e25af024', class: { body: true, bubble: this.variant === 'bubble' } }, index$1.h("slot", { key: '64e80b06045b8e624df64090b5104e828ccc130e' }), !this.hideMetadata && !!this.time && (index$1.h("div", { key: 'b362dd31d38f3729da45be1150c34a1cea2cd394', class: "metadata", title: date.formatDateTime(this.time) }, this.pinned && (index$1.h("span", { key: '70940e475a08ba64a53300516c64f23549a0b856', class: "metadata-content" }, index$1.h("rtk-icon", { key: 'be9561043f9c0814ae38d9eeadf2ff1c5ccae52c', icon: this.iconPack.pin, size: "sm" }), " \u2022")), this.isEdited && (index$1.h("span", { key: '0abe565d472751a6a341ca6beaf9fc6d50f2f3e0', class: "metadata-content" }, index$1.h("span", { key: 'e89ebd6a787ad2c1d7961209f9052e31e374eec3' }, "Edited"), " \u2022")), 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([
@@ -2435,9 +2140,9 @@ const RtkPaginatedList = class {
         /**
          * div.container is flex=column-reversewhich is why div#bottom-scroll comes before div#top-scroll
          */
-        return (index$1.h(index$1.Host, { key: 'd3a69c210794a552e1a45d0d184b16657cbfde79' }, index$1.h("div", { key: 'c9cdb45d5cea872660bc8e2170c3d94c9331a861', class: "scrollbar container", part: "container", ref: (el) => (this.$containerRef = el) }, index$1.h("div", { key: '1bacf2a627e8a7f11f75e0ecbda873609cd347b9', class: { 'show-new-messages-ctr': true, active: this.showNewMessagesCTR } }, index$1.h("rtk-button", { key: '0c4e3f79e2a7447f1195e03aa026d0f228d09f90', class: "show-new-messages", kind: "icon", variant: "secondary", part: "show-new-messages", onClick: () => {
+        return (index$1.h(index$1.Host, { key: '90112894b4d06b91240bcf4c1dfadad784097ec4' }, index$1.h("div", { key: '339f02629a39ce0f7d2552325b9f6a7c82ffa036', class: "scrollbar container", part: "container", ref: (el) => (this.$containerRef = el) }, index$1.h("div", { key: '10de785a969cac74d840e0311087b85b67e97fb6', class: { 'show-new-messages-ctr': true, active: this.showNewMessagesCTR } }, index$1.h("rtk-button", { key: '68991f70a24417ca79d6583cca50f2dd9f55892d', class: "show-new-messages", kind: "icon", variant: "secondary", part: "show-new-messages", onClick: () => {
                 this.scrollToBottom();
-            } }, this.shouldScrollToBottom ? (index$1.h("rtk-spinner", { size: "sm" })) : (index$1.h("rtk-icon", { icon: this.iconPack.chevron_down })))), index$1.h("div", { key: '439f9e943266f60c933812771682bc414b86d418', class: "smallest-dom-element", id: "bottom-scroll", ref: (el) => (this.$bottomRef = el) }), this.isLoadingBottom && this.pages.length > 0 && index$1.h("rtk-spinner", { key: 'd79aa2e74a62b14a456c8437362bb01a9df933e1', size: "sm" }), this.isLoading && this.pages.length < 1 && index$1.h("rtk-spinner", { key: '7ccfd41966d0337a8abe9a3086ca3f07fe051dc0', 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: '1c6c11863adba0205d0dd2ce649f3bdf51c9df60', size: "sm" }), index$1.h("div", { key: '413506236882f6d516967db0f642f5db63c7971f', 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: '24098a445c1a9b1a3ef77436988c36c8f2a8c205', class: "smallest-dom-element", id: "bottom-scroll", ref: (el) => (this.$bottomRef = el) }), this.isLoadingBottom && this.pages.length > 0 && index$1.h("rtk-spinner", { key: '93c029599cf61fb61ae57651064f4f0a8c7ac39b', size: "sm" }), this.isLoading && this.pages.length < 1 && index$1.h("rtk-spinner", { key: 'd49e8bbbf34036bb6559b5b0e5c54d32513f6bc6', size: "lg" }), !this.isLoading && this.pages.flat().length === 0 ? (index$1.h("div", { class: "empty-list" }, this.t('list.empty'))) : (index$1.h("div", { class: "page-wrapper" }, this.pages.map((page, pageIndex) => (index$1.h("div", { class: "page", "data-page-index": pageIndex }, this.createNodes([...page].reverse())))))), this.isLoadingTop && this.pages.length > 0 && index$1.h("rtk-spinner", { key: '067d8da823c27e3c5fb18f138c58eb537a4b67f5', size: "sm" }), index$1.h("div", { key: '16fef008d5831bd5f6b4136e2a58cccc34e08064', class: "smallest-dom-element", id: "top-scroll", ref: (el) => (this.$topRef = el) }))));
     }
 };
 __decorate$2([
@@ -2470,7 +2175,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: '5f6172eb684feb1d2a1bfa4933c4f3763534d479' }, index$1.h("rtk-icon", { key: '32a8707e5447a9e85e42c2aa57b55a46d0208f7e', class: "spinner", icon: this.iconPack.spinner })));
     }
 };
 __decorate$1([
@@ -2548,7 +2253,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: '3a49d368b3b798a6e423323905c4ca7f18493fd0', class: "chat-input", part: "chat-input-container" }, this.maxLengthBreached > 0 && (index$1.h("div", { key: '83c0c1c71fc5cc6f7a6bf1e6bc961665cb989104', class: 'text-error ' + (this.maxLengthBreached === this.maxLength ? 'breached' : '') }, index$1.h("rtk-icon", { key: '9fc1147d057011699bbd2ca6cf8240ed6c653e1f', id: "warning-indicator", icon: this.iconPack.warning, part: "warning-indicator" }), ' ', this.maxLengthBreached, " / ", this.maxLength, " ", this.t('chat.max_limit_warning'))), this.rateLimitBreached && (index$1.h("div", { key: '82599c564d95896d6b541f98f8167a0c193f4cf5', class: 'text-error breached' }, index$1.h("rtk-icon", { key: 'fc8984d07b8ac4aafd16d4f2388b4e93ab8feb69', id: "warning-indicator", icon: this.iconPack.warning, part: "warning-indicator" }), ' ', this.t('chat.rate_limit_error'))), index$1.h("textarea", { key: '62c972fdd2b54cf7ccfacadc32cacc8e7ceae1ca', ref: (el) => (this.$textArea = el), placeholder: this.placeholder, disabled: this.disabled, onInput: this.onInputHandler, onKeyDown: this.keyDownHandler, part: "chat-input", value: this.value })));
     }
 };
 __decorate([
@@ -2569,7 +2274,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: 'c10685a8a0339c3b8509fed80b46900c551924e6', class: { text: true, emoji: string.hasOnlyEmojis(this.text) } }, this.isMarkdown ? index$1.h("rtk-markdown-view", { text: this.text }) : this.text));
     }
 };
 RtkTextMessageView.style = RtkTextMessageViewStyle0;
@@ -2675,7 +2380,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"]
@@ -2685,7 +2390,6 @@ 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_messages_ui_paginated = RtkChatMessagesUiPaginated;