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

package/dist/esm/rtk-avatar_24.entry.js

@@ -0,0 +1,2541 @@
+import { r as registerInstance, h, H as Host, c as createEvent, a as getElement, w as writeTask } from './index-c1fb98bb.js';
+import { e as defaultIconPack, h as useLanguage, c as createDefaultConfig, H as FlagsmithFeatureFlags, G as chatUnreadTimestamps, I as gracefulStorage, u as uiStore, b as createPeerStore } from './ui-store-9e486e1b.js';
+import { f as formatName, g as getInitials, s as sanitizeLink, h as hasOnlyEmojis } from './string-068ce30a.js';
+import { S as SyncWithStore } from './index-e65afca5.js';
+import { d as debounce } from './debounce-3ea4df36.js';
+import { h as handleFilesDataTransfer, g as generateChatGroupKey, T as TEMPORARY_CHANNEL_PREFIX, i as isDirectMessageChannel, d as alphabeticalSorter, e as getDMComparator, p as parseMessageForTarget, M as MAX_TEXT_LENGTH, f as parseRichText, j as extractReplyBlock, s as stripOutReplyBlock } from './chat-ff185374.js';
+import { g as getExtension, a as getFileSize, d as downloadFile } from './file-6114f1a9.js';
+import { p as provideRtkDesignSystem, d as deepMerge } from './merge-7ffc04b3.js';
+import { R as Render } from './index-d31a2e33.js';
+import { g as generateConfig } from './config-e684aa4d.js';
+import { i as index } from './ResizeObserver.es-02979d4e.js';
+import { c as computePosition, o as offset, f as flip, s as shift, a as arrow } from './floating-ui.dom.esm-21c3d54e.js';
+import { f as formatDateTime, e as elapsedDuration } from './date-b1f78dea.js';
+import { s as smoothScrollToBottom } from './scroll-2d8e810c.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 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 RtkAvatar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** Avatar type */
+        this.variant = 'circular';
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        this.imageState = 'loading';
+        this.getAvatar = () => {
+            var _a;
+            const name = formatName(((_a = this.participant) === null || _a === void 0 ? void 0 : _a.name) || '');
+            let picture;
+            if (this.participant != null && 'picture' in this.participant) {
+                picture = this.participant.picture;
+            }
+            if (picture && picture.length > 0 && this.imageState !== 'errored') {
+                return (h("div", { class: "image-ctr" }, this.imageState === 'loading' && h("rtk-spinner", { iconPack: this.iconPack }), h("img", { src: picture, class: { loaded: this.imageState === 'loaded' }, loading: "lazy", title: name, onLoad: () => (this.imageState = 'loaded'), onError: () => (this.imageState = 'errored'), part: "image" })));
+            }
+            const initials = getInitials(name);
+            return (h("div", { class: "initials", title: name, part: "initials" }, initials));
+        };
+    }
+    render() {
+        return (h(Host, { key: 'c1a0be37edb75c40b275ad59af85cee7df3f1cdf' }, this.getAvatar(), h("slot", { key: '1cd71e7494a09d68a52051edc279911dc3168515' })));
+    }
+};
+__decorate$h([
+    SyncWithStore()
+], RtkAvatar.prototype, "iconPack", void 0);
+__decorate$h([
+    SyncWithStore()
+], RtkAvatar.prototype, "t", void 0);
+RtkAvatar.style = RtkAvatarStyle0;
+
+const rtkButtonCss = ":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{--icon-size:var(--rtk-button-icon-size, var(--rtk-space-5, 20px));--transition-property:var(--rtk-transition-property, all);--transition-duration:100ms;display:inline-flex;height:var(--rtk-space-8, 32px);cursor:pointer;--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-1000, 255 255 255));font-size:14px;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:var(--rtk-border-radius-sm, 4px);transition-property:var(--transition-property);transition-duration:var(--transition-duration)}button{box-sizing:border-box;background-color:transparent;color:inherit;border:var(--rtk-border-width-sm, 1px) solid transparent;padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px);display:inline-flex;flex-grow:1;justify-content:center;vertical-align:baseline;gap:var(--rtk-space-1, 4px);transition-property:var(--transition-property);transition-duration:var(--transition-duration);outline:none;height:inherit;border-radius:inherit;fill:inherit;cursor:inherit;font-weight:inherit;font-family:inherit;font-size:inherit;line-height:inherit}.start,.content,.end{align-self:center}::slotted(rtk-icon),::slotted(rtk-spinner){height:var(--icon-size);width:var(--icon-size)}:host([variant='primary']){color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}:host(:hover){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-600, 13 81 253) / var(--tw-bg-opacity))}button:focus-visible{border-color:rgb(var(--rtk-colors-text-1000, 255 255 255))}:host(:active){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-700, 2 70 253) / var(--tw-bg-opacity))}:host([disabled]:not([disabled='false'])){cursor:not-allowed;opacity:0.6}:host([variant='secondary']){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}:host([variant='secondary']:hover){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}:host([variant='secondary']:active){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity))}:host([variant='danger']){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-bg-opacity))}:host([variant='danger']:hover){background-color:rgba(var(--rtk-colors-danger, 255 45 45) / 0.7)}:host([variant='danger']:active){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-bg-opacity))}:host([variant='ghost']){background-color:transparent;color:inherit}:host([variant='ghost'].active){--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-text-opacity))}:host([variant='ghost']:hover){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}:host([variant='ghost']:active){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity))}:host([kind='icon']){--icon-size:var(--rtk-space-5, 20px);width:var(--rtk-space-8, 32px)}:host([kind='icon']) button{padding-left:var(--rtk-space-0, 0px);padding-right:var(--rtk-space-0, 0px)}:host([kind='wide']){width:100%}:host([size='lg']){--icon-size:var(--rtk-space-5, 20px);height:var(--rtk-space-10, 40px);font-size:16px}:host([size='lg'][kind='icon']){--icon-size:var(--rtk-space-6, 24px);height:var(--rtk-space-10, 40px);width:var(--rtk-space-10, 40px)}:host([size='sm']){--icon-size:var(--rtk-space-4, 16px);height:var(--rtk-space-6, 24px);font-size:12px}:host([size='sm'][kind='icon']){height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px)}";
+const RtkButtonStyle0 = rtkButtonCss;
+
+const RtkButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** Button variant */
+        this.variant = 'primary';
+        /** Button type */
+        this.kind = 'button';
+        /** Whether to reverse order of children */
+        this.reverse = false;
+        /** Where the button is disabled or not */
+        this.disabled = false;
+        /** Button type */
+        this.type = 'button';
+    }
+    render() {
+        return (h(Host, { key: '0f96cef4ae77a2be8013fa5d62d39626734eeced' }, h("button", { key: '8c06d5f5cc71779b8d56f31d2dd77b8d35e8b280', part: "button", type: this.type, disabled: this.disabled }, h("span", { key: 'ae741ddf8cc914f9493c26330b1f322541f64223', class: "start" }, h("slot", { key: '18275dab42a4dd38b5a59463ffca227e4a6df3c8', name: "start" })), h("span", { key: 'c2b912515b6edc2966c4cdb282c89022aa05c13f', class: "content", part: "content" }, h("slot", { key: '5d87993198e16a3b5f38e62979fa2ee5637a059d' })), h("span", { key: '0bc907da23ea362f8ae0b3fdf88452b1c3881078', class: "end" }, h("slot", { key: '0862eeefcfa5765ce605b99a04aab88222ed6e68', name: "end" })))));
+    }
+    static get delegatesFocus() { return true; }
+};
+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-900, 26 26 26) / var(--tw-bg-opacity));\n  position: relative;\n  z-index: 10;\n  height: var(--rtk-space-12, 48px);\n  min-height: 48px;\n}\n\n.dropdown-trigger {\n  height: 100%;\n  width: 100%;\n  border-width: var(--rtk-border-width-none, 0);\n  border-style: none;\n  padding: var(--rtk-space-4, 16px);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));\n  font-size: 14px;\n  color: rgb(var(--rtk-colors-text-1000, 255 255 255));\n  cursor: pointer;\n  position: absolute;\n  z-index: 20;\n}\n\n.dropdown-trigger span {\n  display: flex;\n  flex: 1 1 0%;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.dropdown-trigger rtk-icon {\n  margin-left: var(--rtk-space-1, 4px);\n  height: var(--rtk-space-5, 20px);\n  width: var(--rtk-space-5, 20px);\n  flex-shrink: 0;\n}\n\n@container chatcontainer (height < 360px) {\n  .dropdown-trigger {\n    padding: var(--rtk-space-2, 8px);\n  }\n  .dropdown {\n    top: var(--rtk-space-8, 32px) !important;\n  }\n  .search-container {\n    padding-left: var(--rtk-space-0, 0px) !important;\n    padding-right: var(--rtk-space-0, 0px) !important;\n    padding-top: var(--rtk-space-0, 0px) !important;\n    padding-bottom: var(--rtk-space-0, 0px) !important;\n  }\n  input {\n    height: var(--rtk-space-8, 32px) !important;\n    border-radius: var(--rtk-border-radius-none, 0) !important;\n  }\n  .channel {\n    height: var(--rtk-space-8, 32px) !important;\n    border-radius: var(--rtk-border-radius-sm, 4px) !important;\n  }\n  .avatar-icon {\n    height: var(--rtk-space-3, 12px) !important;\n    width: var(--rtk-space-3, 12px) !important;\n    padding: var(--rtk-space-1, 4px) !important;\n  }\n\n  rtk-avatar {\n    height: var(--rtk-space-5, 20px) !important;\n    width: var(--rtk-space-5, 20px) !important;\n  }\n}\n\n.dropdown {\n  position: absolute;\n  width: 100%;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));\n  top: var(--rtk-space-12, 48px);\n  z-index: 10;\n  animation: 0.3s slide-down ease;\n}\n\n.dropdown .channels-container {\n  max-height: var(--rtk-space-80, 320px);\n}\n\n.list {\n  display: flex;\n  flex-direction: column;\n}\n\n.list .channel .channel-data {\n  align-items: flex-start;\n}\n\n.unread-count {\n  display: flex;\n  justify-content: center;\n  height: var(--rtk-space-5, 20px);\n  min-width: var(--rtk-space-3, 12px);\n  border-radius: 9999px;\n  padding-left: var(--rtk-space-1, 4px);\n  padding-right: var(--rtk-space-1, 4px);\n  font-size: 12px;\n  line-height: 1.25rem;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));\n  color: rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));\n}\n\ninput {\n  height: var(--rtk-space-9, 36px);\n  width: 100%;\n  padding-left: var(--rtk-space-3, 12px);\n  padding-right: var(--rtk-space-3, 12px);\n  box-sizing: border-box;\n  border-width: var(--rtk-border-width-none, 0);\n  border-style: none;\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n  border-radius: var(--rtk-border-radius-sm, 4px);\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));\n  color: rgb(var(--rtk-colors-text-1000, 255 255 255));\n}\n\n.search-container {\n  display: flex;\n  flex-shrink: 0;\n  flex-grow: 0;\n  flex-basis: auto;\n  align-items: center;\n  padding-top: var(--rtk-space-3, 12px);\n  padding-bottom: var(--rtk-space-3, 12px);\n  padding-left: var(--rtk-space-2, 8px);\n  padding-right: var(--rtk-space-2, 8px);\n  border-bottom: var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-700, 44 44 44));\n}\n\n.search-container rtk-icon {\n  margin-left: calc(var(--rtk-space-8, 32px) * -1);\n  height: var(--rtk-space-5, 20px);\n  width: var(--rtk-space-5, 20px);\n  color: rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76));\n}\n\n.channels-container {\n  display: flex;\n  flex-direction: column;\n  gap: var(--rtk-space-1, 4px);\n  padding: var(--rtk-space-2, 8px);\n  flex: 1 1 auto;\n  overflow-y: auto;\n}\n\n.channel {\n  flex-shrink: 0;\n  box-sizing: border-box;\n  border-width: var(--rtk-border-width-none, 0);\n  border-style: none;\n  background-color: transparent;\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n  cursor: pointer;\n  border-radius: var(--rtk-border-radius-md, 8px);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--rtk-space-2, 8px);\n  height: var(--rtk-space-16, 64px);\n  width: 100%;\n  padding-left: var(--rtk-space-2, 8px);\n  padding-right: var(--rtk-space-3, 12px);\n  color: rgb(var(--rtk-colors-text-1000, 255 255 255));\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n\n.channel:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));\n}\n\n.channel .channel-data {\n  flex: 1 1 0%;\n  align-items: center;\n  justify-content: space-between;\n  display: flex;\n  gap: var(--rtk-space-2, 8px);\n}\n\n.channel .name {\n  font-size: 16px;\n}\n\n.channel .name, \n  .channel .last-message {\n  max-width: var(--rtk-space-40, 160px);\n  text-align: left;\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 1;\n}\n\n.channel .no-message {\n  font-style: italic;\n}\n\n.channel rtk-avatar {\n  height: var(--rtk-space-12, 48px);\n  width: var(--rtk-space-12, 48px);\n  overflow: clip;\n  border-radius: 9999px;\n  font-size: 14px;\n}\n\n.channel .avatar-icon {\n  height: var(--rtk-space-6, 24px);\n  width: var(--rtk-space-6, 24px);\n  padding: var(--rtk-space-3, 12px);\n  color: rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));\n  overflow: clip;\n  border-radius: 9999px;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));\n}\n\n.channel time, \n  .channel .last-message {\n  font-size: 12px;\n  color: rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76));\n}\n\n.channel.active {\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-bg-opacity));\n  color: rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));\n}\n\n.channel.active .unread-count {\n  background-color: rgb(var(--rtk-colors-text-on-brand-800, var(--rtk-colors-text-800, 255 255 255 / 0.76)));\n  --tw-text-opacity: 1;\n  color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-text-opacity));\n}\n\n.channel.active time {\n  color: rgb(var(--rtk-colors-text-on-brand-800, var(--rtk-colors-text-800, 255 255 255 / 0.76)));\n}\n\n.channel.active .last-message {\n  color: rgb(var(--rtk-colors-text-on-brand-700, var(--rtk-colors-text-700, 255 255 255 / 0.64)));\n}\n\n.channel.active rtk-avatar {\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));\n  color: rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));\n}\n\n.col {\n  gap: var(--rtk-space-1, 4px);\n  display: flex;\n  flex-direction: column;\n}\n\n.channel-meta {\n  flex-shrink: 0;\n  align-items: flex-end;\n}\n\n@keyframes slide-down {\n  from {\n    transform: translateY(-50px);\n  }\n  to {\n    transform: translateY(0%);\n  }\n}\n";
+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) {
+        registerInstance(this, hostRef);
+        this.channelChange = createEvent(this, "channelChange", 7);
+        /** Disables search bar (default = false) */
+        this.disableSearch = false;
+        /** Hides avatar (default = false) */
+        this.hideAvatar = false;
+        /** Icon Pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        /** Render as dropdown or list (default = list) */
+        this.viewAs = 'list';
+        this.searchQuery = '';
+        this.showDropdown = false;
+        this.calculateListHeight = 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 (h(Host, { key: 'adc8ab4b9c8c865998588fbd9766296f18b3e48e' }, this.viewAs === 'list' && h("slot", { key: 'e5740725a4349472ca2eb1fb0816eb2311a99838', name: "header" }), shouldShowDropdown && (h("div", { key: '425adc920c28e0421e07bb0bd9f61b31c42fcda9', class: {
+                dropdown: this.viewAs === 'dropdown',
+                scrollbar: this.viewAs === 'dropdown',
+                list: this.viewAs === 'list',
+            } }, !this.disableSearch && (h("div", { key: '9fbbc48d8489f2a6490729fac1fecdef1838e84a', class: "search-container", ref: (el) => (this.$searchEl = el) }, h("input", { key: 'f7fb43662d50274f80380b735ef9f5fc0b215442', type: "text", placeholder: this.t('chat.search_conversations'), value: this.searchQuery, onInput: (e) => (this.searchQuery = e.target.value) }), h("rtk-icon", { key: 'af76e65a1397d2a6e557a28b687e26aef641c568', icon: this.iconPack.search }))), h("div", { key: '0711a9cfcc811269a5020dc41030c0daee5cc8bf', class: "channels-container scrollbar", ref: (el) => (this.$listEl = el) }, filteredChannels.map((channel) => {
+            return (h("button", { class: { channel: true, active: this.selectedChannelId === channel.id }, onClick: () => this.onChannelClickHandler(channel) }, !this.hideAvatar && (h("div", null, channel.icon ? (h("rtk-icon", { class: "avatar-icon", icon: this.iconPack[channel.icon] })) : (h("rtk-avatar", { participant: {
+                    name: channel.name,
+                    picture: channel.avatarUrl,
+                } })))), h("div", { class: "channel-data" }, h("div", { class: "col" }, h("div", { class: "name" }, channel.name), channel.latestMessage && (h("div", { class: {
+                    'last-message': true,
+                    'no-message': !channel.latestMessage,
+                } }, h("rtk-text-message-view", { isMarkdown: true, text: channel.latestMessage })))), h("div", { class: "col channel-meta" }, channel.latestMessageTime && (h("time", { class: "time" }, this.getTimeLabel(channel.latestMessageTime))), channel.unreadCount > 0 && (h("div", { class: "unread-count" }, channel.unreadCount))))));
+        })))), this.viewAs === 'dropdown' && (h("button", { key: '0c87f90d6d0fe22284995ab7259689f80a862829', class: "dropdown-trigger", onClick: this.toggleDropdown }, h("span", { key: 'd1a364f2c5c57d19702d0b8707ca661c1dc4c14f' }, this.selectedChannelId &&
+            `${this.t('to')} ${this.getChannelById(this.selectedChannelId).name}`, this.getTotalUnreads() > 0 && (h("div", { key: 'bf789f9df82851825bc6ea12a19a5f37ab74aefe', class: "unread-count" }, this.getTotalUnreads()))), h("rtk-icon", { key: 'c0d03f883f4c46b2698be0f197751fc0470717ea', icon: this.showDropdown ? this.iconPack.chevron_up : this.iconPack.chevron_down })))));
+    }
+    get $el() { return getElement(this); }
+};
+__decorate$g([
+    SyncWithStore()
+], RtkChannelSelectorView.prototype, "iconPack", void 0);
+__decorate$g([
+    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-header {\n  display: flex;\n  align-items: center;\n  gap: var(--rtk-space-2, 8px);\n  padding: var(--rtk-space-2, 8px);\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));\n  font-size: 12px;\n  cursor: pointer;\n}\n\n.pinned-messages-header rtk-icon {\n  height: var(--rtk-space-3, 12px);\n  width: var(--rtk-space-3, 12px);\n}\n\n.pinned-messages-header:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));\n}\n\n.pinned-messages-header.active {\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));\n}\n\n@keyframes swipe-in {\n  from {\n    transform: translateX(-100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n";
+const RtkChatStyle0 = rtkChatCss;
+
+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);
+    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 RtkChat = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.stateUpdate = 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;
+            this.canSendFiles = this.meeting.self.permissions.chatPublic.files;
+        };
+        /** Config */
+        this.config = createDefaultConfig();
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        /** 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;
+        this.canSend = false;
+        this.canSendTextMessage = false;
+        this.canSendFiles = false;
+        this.canPrivateMessage = false;
+        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.showPinnedMessages = false;
+        this.channelMap = new Map();
+        this.onDragOver = (e) => {
+            e.preventDefault();
+            this.dropzoneActivated = true;
+        };
+        this.onDragLeave = () => {
+            this.dropzoneActivated = false;
+        };
+        this.onDrop = (e) => {
+            e.preventDefault();
+            this.dropzoneActivated = false;
+            handleFilesDataTransfer(e.dataTransfer.items, (type, file) => {
+                var _a, _b, _c, _d;
+                switch (type) {
+                    case 'image':
+                        if (this.isFileMessagingAllowed()) {
+                            (_b = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.chat) === null || _b === void 0 ? void 0 : _b.sendImageMessage(file, this.getRecipientPeerIds());
+                        }
+                        break;
+                    case 'file':
+                        if (this.isFileMessagingAllowed()) {
+                            (_d = (_c = this.meeting) === null || _c === void 0 ? void 0 : _c.chat) === null || _d === void 0 ? void 0 : _d.sendFileMessage(file, this.getRecipientPeerIds());
+                        }
+                        break;
+                }
+            });
+        };
+        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 = generateChatGroupKey(allParticipants);
+                this.selectedGroup = targetKey;
+            }
+            else {
+                this.selectedGroup = 'everyone';
+            }
+            this.updateUnreadCountGroups({ [this.selectedGroup]: 0 });
+        };
+        this.isTextMessagingAllowed = () => {
+            if (this.chatRecipientId === 'everyone') {
+                // public chat
+                return this.canSend && this.canSendTextMessage;
+            }
+            // private chat
+            return this.canPrivateMessage && this.canSendPrivateTexts;
+        };
+        this.isFileMessagingAllowed = () => {
+            if (this.chatRecipientId === 'everyone') {
+                // 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(TEMPORARY_CHANNEL_PREFIX)) {
+                this.createDMChannel(channel.id.replace(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) => !isDirectMessageChannel(channel))
+                .sort((a, b) => alphabeticalSorter(a.displayName, b.displayName));
+            const membersWithChannel = allChannels.filter(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 = getDMComparator([this.meeting.self.userId, member.userId]);
+                return membersWithChannel.every((channel) => getDMComparator(channel.memberIds) !== matcher);
+            })
+                .map((member) => {
+                return {
+                    id: `${TEMPORARY_CHANNEL_PREFIX}${member.userId}`,
+                    displayName: member.name,
+                    displayPictureUrl: member.picture,
+                    isDirectMessage: true,
+                    unreadCount: 0,
+                };
+            });
+            const dms = [...membersWithChannel, ...membersWithoutChannel].sort((a, b) => 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.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.onEditCancel = () => {
+            this.editingMessage = null;
+        };
+        this.onPinMessage = (event) => {
+            const message = event.detail;
+            if (message.pinned) {
+                this.meeting.chat.unpin(message.id);
+            }
+            else {
+                this.meeting.chat.pin(message.id);
+            }
+        };
+        this.onDeleteMessage = (event) => {
+            const message = event.detail;
+            this.meeting.chat.deleteMessage(message.id);
+        };
+        this.getPrivateChatRecipients = () => {
+            const participants = this.getFilteredParticipants().map((participant) => {
+                const key = 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.onTogglePinnedMessages = () => {
+            this.showPinnedMessages = !this.showPinnedMessages;
+        };
+        this.renderPinnedMessagesHeader = () => {
+            if (this.meeting.chat.pinned.length === 0)
+                return null;
+            return (h("rtk-tooltip", { label: this.t('chat.toggle_pinned_msgs') }, h("div", { class: { 'pinned-messages-header': true, active: this.showPinnedMessages }, onClick: this.onTogglePinnedMessages }, h("rtk-icon", { icon: this.iconPack.pin }), this.t('chat.pinned_msgs'), ` (${this.meeting.chat.pinned.length})`)));
+        };
+    }
+    connectedCallback() {
+        if (!this.meeting)
+            return;
+        this.meetingChanged(this.meeting);
+        if (this.meeting && !this.meeting.chat) {
+            return;
+        }
+        if (this.isFileMessagingAllowed()) {
+            this.host.addEventListener('dragover', this.onDragOver);
+            this.host.addEventListener('dragleave', this.onDragLeave);
+            this.host.addEventListener('drop', this.onDrop);
+        }
+    }
+    onEditMessageInit(event) {
+        if (event.detail.flags.isReply) {
+            this.replyMessage = event.detail.payload;
+        }
+        else if (event.detail.flags.isEdit) {
+            this.editingMessage = event.detail.payload;
+        }
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.disconnectMeeting(this.meeting);
+        this.host.removeEventListener('dragover', this.onDragOver);
+        this.host.removeEventListener('dragleave', this.onDragLeave);
+        this.host.removeEventListener('drop', this.onDrop);
+    }
+    meetingChanged(meeting, oldMeeting) {
+        var _a, _b, _c, _d, _e, _f;
+        if (oldMeeting != undefined)
+            this.disconnectMeeting(oldMeeting);
+        if (meeting && !meeting.chat)
+            return;
+        if (meeting != null) {
+            this.canSend = meeting.self.permissions.chatPublic.canSend;
+            this.canSendTextMessage = meeting.self.permissions.chatPublic.text;
+            this.canSendFiles = meeting.self.permissions.chatPublic.files;
+            this.canPrivateMessage = !!(((_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.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(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 = 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 ===
+                generateChatGroupKey([this.meeting.self.userId, (_b = this.selectedParticipant) === null || _b === void 0 ? void 0 : _b.userId]) ||
+                (key === 'everyone' && this.selectedParticipant === null)) {
+                unreadCounts[key] = 0;
+                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 = 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 = 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);
+    }
+    renderComposerUI() {
+        var _a, _b, _c;
+        if (this.chatRecipientId === 'everyone') {
+            if (!this.canSendTextMessage && !this.canSendFiles)
+                return null;
+        }
+        else {
+            if (!this.canSendPrivateTexts && !this.canSendPrivateFiles)
+                return null;
+        }
+        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 : '';
+        return (h("rtk-chat-composer-view", Object.assign({ message: message, storageKey: (_a = this.selectedChannelId) !== null && _a !== void 0 ? _a : `draft-${this.selectedChannelId}`, quotedMessage: quotedMessage, isEditing: !!this.editingMessage, canSendTextMessage: this.isTextMessagingAllowed(), canSendFiles: this.isFileMessagingAllowed(), disableEmojiPicker: !!((_c = (_b = this.meeting) === null || _b === void 0 ? void 0 : _b.__internals__) === null || _c === void 0 ? void 0 : _c.features.hasFeature(FlagsmithFeatureFlags.DISABLE_EMOJI_PICKER)), maxLength: this.meeting.chat.maxTextLimit, rateLimits: this.meeting.chat.rateLimits, inputTextPlaceholder: this.t('chat.message_placeholder'), onNewMessage: this.onNewMessageHandler, onEditMessage: this.onEditMessageHandler, onEditCancel: this.onEditCancel, onQuotedMessageDismiss: this.onQuotedMessageDismiss }, uiProps), h("slot", { name: "chat-addon", slot: "chat-addon" })));
+    }
+    render() {
+        var _a;
+        if (!this.meeting) {
+            return null;
+        }
+        let chatMessages = this.chatGroups[this.selectedGroup] || [];
+        if (this.showPinnedMessages && this.meeting.chat.pinned.length !== 0) {
+            chatMessages = chatMessages.filter((chat) => chat.type === 'chat' && chat.message.pinned);
+        }
+        return (h(Host, null, h("div", { class: "chat-container" }, h("div", { class: "chat" }, this.isFileMessagingAllowed() && (h("div", { id: "dropzone", class: { active: this.dropzoneActivated }, part: "dropzone" }, h("rtk-icon", { icon: this.iconPack.attach }), h("p", null, this.t('chat.send_attachment')))), this.renderPinnedMessagesHeader(), this.isPrivateChatSupported() && (h("rtk-channel-selector-view", { channels: this.getPrivateChatRecipients(), selectedChannelId: ((_a = this.selectedParticipant) === null || _a === void 0 ? void 0 : _a.userId) || 'everyone', onChannelChange: this.updateRecipients, t: this.t, viewAs: "dropdown" })), h("rtk-chat-messages-ui-paginated", { meeting: this.meeting, onPinMessage: this.onPinMessage, onDeleteMessage: this.onDeleteMessage, size: this.size, iconPack: this.iconPack, t: this.t }), this.renderComposerUI()))));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"],
+        "chatGroups": ["chatGroupsChanged"],
+        "displayFilter": ["onDisplayFilterChanged"]
+    }; }
+};
+__decorate$f([
+    SyncWithStore()
+], RtkChat.prototype, "meeting", void 0);
+__decorate$f([
+    SyncWithStore()
+], RtkChat.prototype, "config", void 0);
+__decorate$f([
+    SyncWithStore()
+], RtkChat.prototype, "iconPack", void 0);
+__decorate$f([
+    SyncWithStore()
+], RtkChat.prototype, "t", void 0);
+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 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 messageLimits = {
+    messagesSent: 0,
+    startTime: 0,
+};
+const RtkChatComposerView = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.onNewMessage = createEvent(this, "newMessage", 7);
+        this.onEditMessage = createEvent(this, "editMessage", 7);
+        this.onEditCancel = createEvent(this, "editCancel", 7);
+        this.onQuotedMessageDismiss = createEvent(this, "quotedMessageDismiss", 7);
+        /** Whether user can send text messages */
+        this.canSendTextMessage = true;
+        /** Whether user can send file messages */
+        this.canSendFiles = true;
+        /** Message to be pre-populated */
+        this.message = '';
+        /** Quote message to be displayed */
+        this.quotedMessage = '';
+        /** Key for storing message in localStorage */
+        this.storageKey = 'rtk-text-message';
+        /** Placeholder for text input */
+        this.inputTextPlaceholder = 'Enter your message';
+        /** Sets composer to edit mode */
+        this.isEditing = false;
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        /** Whether to show emoji picker */
+        this.disableEmojiPicker = false;
+        /** Rate limits */
+        this.rateLimits = {
+            period: 60,
+            maxInvocations: 60,
+        };
+        this.fileToUpload = null;
+        this.isEmojiPickerOpen = false;
+        this.disableSendButton = false;
+        this.rateLimitsBreached = false;
+        this.textMessage = '';
+        this.sendFile = () => {
+            if (!this.canSendFiles) {
+                return;
+            }
+            if (this.fileToUpload.type === 'image') {
+                this.onNewMessage.emit({
+                    type: 'image',
+                    image: this.fileToUpload.file,
+                });
+            }
+            else {
+                this.onNewMessage.emit({ type: 'file', file: this.fileToUpload.file });
+            }
+            this.fileToUpload = null;
+        };
+        this.handleSendMessage = () => {
+            if (!this.canSendTextMessage || this.rateLimitsBreached) {
+                return;
+            }
+            if (this.fileToUpload !== null) {
+                this.sendFile();
+                return;
+            }
+            const message = this.textMessage;
+            const currentTime = Date.now();
+            if (currentTime - messageLimits.startTime > this.rateLimits.period * 1000) {
+                messageLimits.startTime = currentTime;
+                messageLimits.messagesSent = 0;
+            }
+            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.cleanup();
+            }
+        };
+        this.handleEditMessage = () => {
+            this.onEditMessage.emit(this.textMessage);
+            this.cleanup();
+        };
+        this.handleEditCancel = () => {
+            this.onEditCancel.emit();
+            this.cleanup();
+        };
+        this.onTextChangeHandler = (event) => {
+            var _a;
+            this.textMessage = event.detail;
+            if (this.textMessage.length >= ((_a = this.maxLength) !== null && _a !== void 0 ? _a : MAX_TEXT_LENGTH)) {
+                this.disableSendButton = true;
+            }
+            else if (this.disableSendButton) {
+                this.disableSendButton = false;
+            }
+            gracefulStorage.setItem(this.storageKey, event.detail);
+        };
+        this.onKeyDownHandler = (event) => {
+            if (event.key === 'Enter' && event.shiftKey) {
+                return;
+            }
+            if (this.disableSendButton) {
+                return;
+            }
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                if (this.isEditing) {
+                    this.handleEditMessage();
+                }
+                else {
+                    this.handleSendMessage();
+                }
+            }
+        };
+        this.onFileUploadHandler = (type, file) => {
+            this.fileToUpload = { type, file };
+        };
+        this.onQuotedMessageDismissHandler = () => {
+            this.onQuotedMessageDismiss.emit();
+        };
+        this.cleanup = () => {
+            this.textMessage = '';
+            this.fileToUpload = null;
+            gracefulStorage.setItem(this.storageKey, '');
+            this.$textComposer.setText('', true);
+            this.isEmojiPickerOpen = false;
+        };
+        this.onKeyDownHandler = this.onKeyDownHandler.bind(this);
+    }
+    connectedCallback() {
+        this.textMessage = this.message || gracefulStorage.getItem(this.storageKey) || '';
+        this.checkRateLimitBreached(Date.now());
+    }
+    componentWillUpdate() {
+        this.textMessage = this.message || gracefulStorage.getItem(this.storageKey) || '';
+    }
+    componentDidLoad() {
+        if (this.message) {
+            writeTask(() => this.$textComposer.setText(this.message, true));
+        }
+    }
+    checkRateLimitBreached(currentTime) {
+        // Check if the function call is within limits
+        if (messageLimits.messagesSent >= this.rateLimits.maxInvocations) {
+            this.disableSendButton = true;
+            this.rateLimitsBreached = true;
+            const timeRemainingForReset = currentTime - messageLimits.startTime + this.rateLimits.period * 1000;
+            setTimeout(() => {
+                messageLimits.messagesSent = 0;
+                messageLimits.startTime = Date.now();
+                this.disableSendButton = false;
+                this.rateLimitsBreached = false;
+            }, timeRemainingForReset);
+        }
+    }
+    render() {
+        var _a;
+        const uiProps = { iconPack: this.iconPack, t: this.t };
+        return (h(Host, { key: '06455539e3067eb1c1c592b551d0ef99eba2f331' }, this.canSendTextMessage && this.isEmojiPickerOpen && (h("rtk-emoji-picker", Object.assign({ key: 'fe83b0ab9562cc0e1c61f89e4b441ef592edfa1a', part: "emoji-picker", onPickerClose: () => {
+                this.isEmojiPickerOpen = false;
+            }, onRtkEmojiClicked: (e) => {
+                this.textMessage += e.detail;
+                this.$textComposer.setText(this.textMessage, true);
+            } }, uiProps))), h("slot", { key: '8653c2e805e41adf5958941cc10ff01d43f97792', name: "chat-addon" }), this.quotedMessage && this.quotedMessage.length !== 0 && (h("div", { key: '82b9bf5203a799709e980d61ab827b9daf8292e6', class: "quoted-message-container", part: "quoted-message-container" }, h("div", { key: '4b9fe8f382da7075e815c329f2d7dca17ce0f694', class: "quoted-message scrollbar" }, h("rtk-text-message-view", { key: '7a16547e83d9bca43794e46e56c5a9c743a9929a', text: this.quotedMessage, isMarkdown: true })), h("div", { key: '5691b8d882016cda66cd2faf3858bc38cd53458c' }, h("rtk-icon", { key: '2d5b222bd5eaac6d46812b704674f52f86efdb92', "aria-label": this.t('dismiss'), class: "dismiss", icon: this.iconPack.dismiss, onClick: this.onQuotedMessageDismissHandler })))), h("div", { key: 'd7638411df9ae1b2cbef8cae66d0af2b7ad310e6', class: "composer-container" }, h("div", { key: 'ca1ee222584fdd27e53989d28b6ce583c6b0c400', class: "composers" }, this.fileToUpload && (h("rtk-draft-attachment-view", Object.assign({ key: 'd511c900c71a97f8f92640b73a7575dcd267de88' }, uiProps, { attachment: this.fileToUpload, onDeleteAttachment: () => (this.fileToUpload = null) }))), !this.fileToUpload && (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 : MAX_TEXT_LENGTH, rateLimitBreached: this.rateLimitsBreached, t: this.t, iconPack: this.iconPack, ref: (el) => (this.$textComposer = el) }))), h("div", { key: '9b6cbe7cb8529c8e60f8cc9e13cc95ca64504efc', class: "chat-buttons", part: "chat-buttons" }, h("div", { key: '30e24e8edf58179ef20ccd436d3833ba177ebb0d', class: "left", part: "chat-buttons-left" }, !this.fileToUpload && !this.isEditing && (h("div", { key: '54ad294bedab1c0bc7c02a72c4f3f51bc10bba85' }, this.canSendFiles && [
+            h("rtk-file-picker-button", Object.assign({ key: '1a0760e05a183b6c8da2ff02e33ecd40bfdb6e97' }, uiProps, { onFileChange: (event) => this.onFileUploadHandler('file', event.detail) })),
+            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 && (h("rtk-emoji-picker-button", Object.assign({ key: '50f14152b8d15009104e9b1dd05ee5e1ec49ab16', isActive: this.isEmojiPickerOpen, onClick: () => {
+                this.isEmojiPickerOpen = !this.isEmojiPickerOpen;
+            } }, uiProps))), h("slot", { key: '1e1fe81e1e196fc8d679bfc2d6ed0c6402c74a4a', name: "chat-buttons" })))), h("div", { key: '272526b7c81ed1acd028beceb3869c584e94308f', class: "right", part: "chat-buttons-right" }, !this.isEditing && (h("rtk-tooltip", { key: '6750abf323b2f1c951661c44390eb97d3ec71544', variant: "primary", label: this.t('chat.send_msg'), delay: 2000 }, h("rtk-button", { key: 'a159fa6dcc1f8ede64085abd8286a69ad86b7002', kind: "icon", disabled: this.disableSendButton, onClick: () => this.handleSendMessage(), title: this.t('chat.send_msg') }, h("rtk-icon", { key: 'bb26a3a7954727859f5566ecc60d746ac6700b7b', icon: this.iconPack.send })))), this.isEditing && (h("div", { key: '5ef512e3fc236510a518e76ce027f0c8fc1c9a0c', class: "edit-buttons" }, h("rtk-tooltip", { key: 'e18ae7567350d32b18a70de8cb2c1af0830353bc', variant: "secondary", label: this.t('cancel'), delay: 2000 }, h("rtk-button", { key: '4f4aa2e44308a393314ab95244c87a3b8d4b282c', kind: "icon", variant: "secondary", onClick: () => this.handleEditCancel(), title: this.t('cancel') }, h("rtk-icon", { key: 'a4a99fe9ae34707cb63f63461a4728baf70e3e7a', icon: this.iconPack.dismiss }))), h("rtk-tooltip", { key: '789315dbf551ba74d004459981532fa9a467ac45', variant: "primary", label: this.t('chat.update_msg'), delay: 2000 }, h("rtk-button", { key: '61da43993c2da9b8bd00796544030e9b4cb45f12', kind: "icon", onClick: () => this.handleEditMessage(), title: this.t('chat.send_msg') }, h("rtk-icon", { key: 'e45aab29b0f6553ed2d7f370a8817bdccdabe42e', icon: this.iconPack.checkmark }))))))))));
+    }
+};
+__decorate$e([
+    SyncWithStore()
+], RtkChatComposerView.prototype, "iconPack", void 0);
+__decorate$e([
+    SyncWithStore()
+], RtkChatComposerView.prototype, "t", void 0);
+RtkChatComposerView.style = RtkChatComposerViewStyle0;
+
+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 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 RtkChatMessagesUiPaginated = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.editMessageInit = createEvent(this, "editMessageInit", 7);
+        this.onPinMessage = createEvent(this, "pinMessage", 7);
+        this.onDeleteMessage = createEvent(this, "deleteMessage", 7);
+        this.stateUpdate = createEvent(this, "rtkStateUpdate", 7);
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = 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;
+        };
+        this.createChatNodes = (data) => {
+            /**
+             * NOTE(callmetarush): When between pages the message's isContinued
+             * will fail in current implementation
+             */
+            return data.map((message, idx) => {
+                var _a;
+                const isContinued = message.userId === ((_a = data[idx - 1]) === null || _a === void 0 ? void 0 : _a.userId);
+                return this.createChatNode(message, isContinued);
+            });
+        };
+        this.disconnectMeeting = (meeting) => {
+            var _a, _b;
+            (_a = meeting === null || meeting === void 0 ? void 0 : meeting.chat) === null || _a === void 0 ? void 0 : _a.removeListener('chatUpdate', this.chatUpdateListener);
+            (_b = this.meeting) === null || _b === void 0 ? void 0 : _b.self.permissions.removeListener('permissionsUpdate', this.permissionsUpdateListener);
+        };
+        this.getMessageActions = (message) => {
+            const actions = [];
+            // const isSelf = this.meeting.self.userId === message.userId;
+            // const chatMessagePermissions = this.meeting.self.permissions?.chatMessage;
+            // const canEdit =
+            //   chatMessagePermissions === undefined
+            //     ? isSelf
+            //     : chatMessagePermissions.canEdit === 'ALL' ||
+            //       (chatMessagePermissions.canEdit === 'SELF' && isSelf);
+            // const canDelete =
+            //   chatMessagePermissions === undefined
+            //     ? isSelf
+            //     : chatMessagePermissions.canDelete === 'ALL' ||
+            //       (chatMessagePermissions.canDelete === 'SELF' && isSelf);
+            if (this.meeting.self.permissions.pinParticipant) {
+                actions.push({
+                    id: 'pin_message',
+                    label: message.pinned ? this.t('unpin') : this.t('pin'),
+                    icon: this.iconPack.pin,
+                });
+            }
+            // if (canDelete) {
+            //   actions.push({
+            //     id: 'delete_message',
+            //     label: this.t('chat.delete_msg'),
+            //     icon: this.iconPack.delete,
+            //   });
+            // }
+            return actions;
+        };
+        this.onMessageActionHandler = (actionId, message) => {
+            switch (actionId) {
+                case 'pin_message':
+                    this.onPinMessage.emit(message);
+                    break;
+                case 'delete_message':
+                    this.onDeleteMessage.emit(message);
+                    break;
+            }
+        };
+        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
+                    .toArray()
+                    .find((p) => p.userId === message.userId)) === null || _a === void 0 ? void 0 : _a.picture;
+            }
+            else {
+                if (this.meeting.self.userId === message.userId) {
+                    displayPicture = this.meeting.self.picture;
+                }
+                else {
+                    displayPicture =
+                        (_c = (_b = this.meeting.participants.joined
+                            .toArray()
+                            .find((member) => member.userId === message.userId)) === null || _b === void 0 ? void 0 : _b.picture) !== null && _c !== void 0 ? _c : (_d = this.meeting.participants.waitlisted.toArray().find((p) => p.userId === message.userId)) === null || _d === void 0 ? void 0 : _d.picture;
+                }
+            }
+            const isSelf = message.userId === this.meeting.self.userId;
+            const viewType = isSelf ? 'outgoing' : 'incoming';
+            return (h("div", { class: { pinned: message.pinned } }, h("div", { class: "message-wrapper" }, h("rtk-message-view", { 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) }, h("div", null, h("div", { class: "body" }, message.type === 'text' && (h("rtk-text-message-view", { text: message.message, isMarkdown: true })), message.type === 'file' && (h("rtk-file-message-view", { name: message.name, url: message.link, size: message.size })), message.type === 'image' && (h("rtk-image-message-view", { url: message.link, onPreview: () => {
+                    this.stateUpdate.emit({ image: message });
+                } }))), message.pinned && (h("div", { class: "pin-icon", part: "pin-icon" }, h("rtk-icon", { icon: this.iconPack.pin, size: "sm" }))))))));
+        };
+        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]);
+            }
+            else if (data.action === 'delete') {
+                this.$paginatedListRef.onNodeDelete(data.message.id);
+            }
+            else if (data.action === 'edit') {
+                this.$paginatedListRef.onNodeUpdate(data.message.id, data.message);
+            }
+        };
+    }
+    componentDidLoad() {
+        const slotted = this.host.shadowRoot.querySelector('slot');
+        if (!slotted)
+            return;
+        this.children = slotted.assignedElements()[0];
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+    }
+    disconnectedCallback() {
+        this.disconnectMeeting(this.meeting);
+    }
+    meetingChanged(meeting, oldMeeting) {
+        var _a;
+        if (oldMeeting != undefined)
+            this.disconnectMeeting(oldMeeting);
+        if (meeting && !meeting.chat)
+            return;
+        if (meeting != null) {
+            (_a = meeting.chat) === null || _a === void 0 ? void 0 : _a.addListener('chatUpdate', this.chatUpdateListener);
+            meeting.self.permissions.addListener('permissionsUpdate', this.permissionsUpdateListener);
+        }
+        this.permissionsUpdateListener();
+    }
+    channelChanged() {
+        this.lastReadMessageIndex = -1;
+    }
+    render() {
+        return (h(Host, { key: '9716b4db0dbae3308a056693341635d93c0d1227' }, h("rtk-paginated-list", { key: '4b540e565aa0d7031ad8c84f35cadb07d207abfe', 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') }, h("slot", { key: '41ffb56aea7e02f3c20f8ea261638d6fd9d80232' }))));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"],
+        "selectedChannelId": ["channelChanged"]
+    }; }
+};
+__decorate$d([
+    SyncWithStore()
+], RtkChatMessagesUiPaginated.prototype, "meeting", void 0);
+__decorate$d([
+    SyncWithStore()
+], RtkChatMessagesUiPaginated.prototype, "iconPack", void 0);
+__decorate$d([
+    SyncWithStore()
+], RtkChatMessagesUiPaginated.prototype, "t", void 0);
+RtkChatMessagesUiPaginated.style = RtkChatMessagesUiPaginatedStyle0;
+
+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 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 RtkDraftAttachmentView = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.onDeleteAttachment = createEvent(this, "deleteAttachment", 7);
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        /** Attachment to display */
+        this.attachment = null;
+        this.filePreview = null;
+        this.fileReader = new FileReader();
+        this.generatePreview = () => {
+            if (this.attachment.type === 'image') {
+                this.fileReader.readAsDataURL(this.attachment.file);
+            }
+            else if (this.attachment.type === 'file') {
+                this.filePreview = this.attachment.file.name;
+            }
+        };
+        this.onDeleteClickHandler = () => {
+            this.filePreview = null;
+            this.onDeleteAttachment.emit();
+        };
+    }
+    onAttachmentChange() {
+        this.generatePreview();
+    }
+    connectedCallback() {
+        this.fileReader.onload = (e) => {
+            if (typeof e.target.result === 'string') {
+                this.filePreview = e.target.result;
+            }
+        };
+        // this.fileReader.onloadstart = () => {};
+        // this.fileReader.onloadend = () => {};
+    }
+    componentWillLoad() {
+        this.onAttachmentChange();
+    }
+    render() {
+        return (h(Host, { key: '22c8ff3317b6247dc6a0fa2088f28dc293de9738' }, h("div", { key: '317c0e6a06849af0af42d81353dc0002b82185a5', class: "preview-overlay" }, h("div", { key: '94d0d35a3696725b59341303760212cf6e01c8a7', class: "preview" }, h("rtk-tooltip", { key: '3171acf60f22a80cbcbf9d3d6f8cf5ac61b67b67', label: this.t('chat.cancel_upload') }, h("rtk-button", { key: '37d1055de9d59318c0f7f612dee3304838142968', variant: "secondary", kind: "icon", onClick: this.onDeleteClickHandler }, h("rtk-icon", { key: '9988b389300e0c6bd404d02440d7b3d323f384dd', icon: this.iconPack.dismiss }))), this.attachment.type === 'image' ? (h("img", { class: "preview-image", src: this.filePreview })) : (h("div", { class: "preview-file" }, h("span", null, this.filePreview)))))));
+    }
+    static get watchers() { return {
+        "attachment": ["onAttachmentChange"]
+    }; }
+};
+__decorate$c([
+    SyncWithStore()
+], RtkDraftAttachmentView.prototype, "iconPack", void 0);
+__decorate$c([
+    SyncWithStore()
+], RtkDraftAttachmentView.prototype, "t", void 0);
+RtkDraftAttachmentView.style = RtkDraftAttachmentViewStyle0;
+
+const EMOJI_ASSET_URL = 'https://rtk-assets.realtime.cloudflare.com/assets/emojis-data.json';
+let cachedEmojis;
+/**
+ * fetches the latest emoji list from CDN
+ * @returns list of emojis
+ */
+const fetchEmojis = async () => {
+    if (!cachedEmojis) {
+        const emojis = await fetch(EMOJI_ASSET_URL);
+        cachedEmojis = emojis.json();
+    }
+    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 RtkEmojiPickerStyle0 = rtkEmojiPickerCss;
+
+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);
+    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 RtkEmojiPicker = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.pickerClose = createEvent(this, "pickerClose", 7);
+        this.emojiClicked = createEvent(this, "rtkEmojiClicked", 7);
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        /** Controls whether or not to focus on mount */
+        this.focusWhenOpened = true;
+        this.filterVal = '';
+        this.filteredEmojis = [];
+    }
+    componentWillLoad() {
+        // Don't use async here as it will block the render
+        fetchEmojis().then((e) => {
+            this.emojiList = e;
+            this.handleInputChange(this.inputElement);
+        });
+    }
+    componentDidLoad() {
+        if (this.focusWhenOpened) {
+            this.inputElement.focus();
+        }
+    }
+    handleInputChange(target) {
+        this.filterVal = target.value;
+        const regex = new RegExp(`([^,]*?${this.filterVal}[^,]*):(\\d+)`, 'g');
+        this.filteredEmojis = Array.from(this.emojiList['search'].matchAll(regex)).map((m) => {
+            return { name: m[1], emoji: this.emojiList['emojis'][m[2]] };
+        });
+    }
+    handleEmojiClick(emoji) {
+        this.emojiClicked.emit(emoji);
+    }
+    mapEmojiList() {
+        var _a;
+        if (((_a = this.emojiList) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            return (h("div", { id: "loader" }, h("rtk-spinner", { iconPack: this.iconPack })));
+        }
+        return (h("div", { id: "emoji-grid", class: "scrollbar max-w-40" }, this.filteredEmojis.map((e) => (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 (h(Host, { key: '48f4159ff5232b9d03fdcabf2d39e4375ca4fa14' }, h("div", { key: '20f86592a9dc47231c0c6cf33484af981533e21d', class: 'close-parent' }, h("rtk-button", { key: 'cff61f9c8fa0c1e0a8b6dc9433abedf914f9ded0', 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') }, h("rtk-icon", { key: '56a12d4cc55b80ea026c92906466ebb10bf6cd6e', icon: this.iconPack.dismiss }))), h("div", { key: 'b48a1933b33f9886f39955ecbd046ffff370719b', class: 'emoji-parent' }, h("input", { key: '40d0f74a160358c3214b810de0f2ee6f286f1af7', value: this.filterVal, onInput: (event) => this.handleInputChange(event.target), placeholder: this.t('search'), ref: (el) => (this.inputElement = el) }), this.mapEmojiList())));
+    }
+};
+__decorate$b([
+    SyncWithStore()
+], RtkEmojiPicker.prototype, "iconPack", void 0);
+__decorate$b([
+    SyncWithStore()
+], RtkEmojiPicker.prototype, "t", void 0);
+RtkEmojiPicker.style = RtkEmojiPickerStyle0;
+
+const rtkEmojiPickerButtonCss = ":host{}";
+const RtkEmojiPickerButtonStyle0 = rtkEmojiPickerButtonCss;
+
+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);
+    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 RtkEmojiPickerButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+    }
+    render() {
+        return (h("rtk-tooltip", { key: '9826128cb78d2cb79a21b4dcb877ecc1ab020090', label: this.t('chat.send_emoji') }, h("rtk-button", { key: '07fd6bcc6ffdb58278c843748f771a2597f8edcd', variant: "ghost", kind: "icon", class: { active: this.isActive }, title: this.t('chat.send_emoji') }, h("rtk-icon", { key: '30f352d18771bd542d9ca4ff1a4615ef5958ec7d', icon: this.iconPack.emoji_multiple }))));
+    }
+};
+__decorate$a([
+    SyncWithStore()
+], RtkEmojiPickerButton.prototype, "iconPack", void 0);
+__decorate$a([
+    SyncWithStore()
+], RtkEmojiPickerButton.prototype, "t", void 0);
+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 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 RtkFileMessageView = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+    }
+    render() {
+        return (h("div", { key: 'd2cbeddc138f81c05da1656ee7f59c170e83bd1e', class: "file" }, h("rtk-button", { key: 'b0ee90c3493c24e938b6ea88a317c642e4afc003', variant: "secondary", kind: "icon", onClick: () => downloadFile(sanitizeLink(this.url), { name: this.name, fallbackName: 'file' }), part: "button" }, h("rtk-icon", { key: 'c1b25c655b5c87bf95948abfa461f8b58ff79195', icon: this.iconPack.download })), h("div", { key: 'c961a8ce93d4ff4405590787a88b5a9bbdbf56ab', class: "file-data" }, h("div", { key: 'bd178354d166c7816d6fabb72f7bba70fd711415', class: "name" }, this.name), h("div", { key: '59a791ae9f94a13b4005a0d8f79d09687fe3fc4c', class: "file-data-split" }, h("div", { key: 'b31421fdf786d92eed0decec9d3b247530413aa9', class: "ext" }, getExtension(this.name)), h("span", { key: '7a0a2a188b3e0b6bee0cf54d3afe29c2454788bb', class: "divider" }), h("div", { key: 'b217b87fa0737732aae10662b82d337d7258e6d7', class: "size" }, getFileSize(this.size))))));
+    }
+};
+__decorate$9([
+    SyncWithStore()
+], RtkFileMessageView.prototype, "iconPack", void 0);
+RtkFileMessageView.style = RtkFileMessageViewStyle0;
+
+const rtkFilePickerButtonCss = ":host{}";
+const RtkFilePickerButtonStyle0 = rtkFilePickerButtonCss;
+
+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);
+    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 RtkFilePickerButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.onFileChange = createEvent(this, "fileChange", 7);
+        /** Icon */
+        this.icon = 'attach';
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        this.uploadFile = () => {
+            const input = this.fileInputField;
+            input.type = 'file';
+            if (this.filter) {
+                input.accept = this.filter;
+            }
+            input.onchange = (e) => {
+                const { validity, files: [file], } = e.target;
+                if (validity.valid) {
+                    this.onFileChange.emit(file);
+                }
+            };
+            input.click();
+        };
+    }
+    connectedCallback() {
+        this.fileInputField = document.createElement('input');
+    }
+    disconnectedCallback() {
+        // For GC
+        this.fileInputField = undefined;
+    }
+    render() {
+        const label = this.label || this.t('chat.send_file');
+        const icon = this.iconPack[this.icon];
+        return (h("rtk-tooltip", { key: '90e405f39792f7ea0430c55e9b5ba0da72ce2a4a', label: label }, h("rtk-button", { key: 'f0957e7a9668afd9e25e866ea2acbb6891123bbe', variant: "ghost", kind: "icon", onClick: () => this.uploadFile(), title: label }, h("rtk-icon", { key: '1955f524343683974831b28629291428637aa8fc', icon: icon }))));
+    }
+};
+__decorate$8([
+    SyncWithStore()
+], RtkFilePickerButton.prototype, "iconPack", void 0);
+__decorate$8([
+    SyncWithStore()
+], RtkFilePickerButton.prototype, "t", void 0);
+RtkFilePickerButton.style = RtkFilePickerButtonStyle0;
+
+const rtkIconCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{display:block;height:var(--rtk-space-10, 40px);outline:2px solid transparent;outline-offset:2px}:host .icon-wrapper{display:flex;height:100%;width:100%;flex-direction:column;align-items:center}:host svg{height:100%;width:100%;outline:2px solid transparent;outline-offset:2px}:host([size='xl']){box-sizing:border-box;display:block;height:var(--rtk-space-16, 64px) !important;width:var(--rtk-space-16, 64px) !important;--rtk-spinner-color:currentColor}:host([size='md']){box-sizing:border-box;display:block;height:var(--rtk-space-6, 24px) !important;width:var(--rtk-space-6, 24px) !important;--rtk-spinner-color:currentColor}:host([size='sm']){box-sizing:border-box;display:block;height:var(--rtk-space-4, 16px) !important;width:var(--rtk-space-4, 16px) !important;--rtk-spinner-color:currentColor}:host([variant='secondary']) .icon-wrapper{--tw-text-opacity:1;color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-text-opacity))}:host([variant='danger']) .icon-wrapper{--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}";
+const RtkIconStyle0 = rtkIconCss;
+
+const parseIcon = (icon) => {
+    try {
+        return JSON.parse(icon);
+    }
+    catch (e) {
+        return icon;
+    }
+};
+const RtkIcon = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** Icon variant */
+        this.variant = 'primary';
+        /** Size */
+        this.size = 'lg';
+    }
+    render() {
+        return (h(Host, { key: 'fbacb1ee3dd4c1ca7aa612f08e938601df73036c' }, h("div", { key: '04c026967cb7aa3acb3fba09fcf5b0d33f45e2b0', class: "icon-wrapper", innerHTML: parseIcon(this.icon), part: "wrapper" })));
+    }
+};
+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 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 RtkImageMessageView = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.onPreview = createEvent(this, "preview", 7);
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        this.status = 'loading';
+    }
+    render() {
+        return (h("div", { key: '259bdc1102c6026dd10388ae759f67608c777b5f', class: { image: true, loaded: this.status === 'loaded' } }, h("img", { key: 'dbcb8d497fee3710f4474ec3ac0ce9a9b4f1bb49', src: sanitizeLink(this.url), onLoad: () => {
+                this.status = 'loaded';
+            }, onError: () => {
+                this.status = 'errored';
+            }, onClick: () => {
+                if (this.status === 'loaded') {
+                    this.onPreview.emit(this.url);
+                }
+            } }), this.status === 'loading' && (h("div", { key: 'b0ecfada4428e1cb8c3625cc4ce3d2a5bae058ab', class: "image-spinner", title: this.t('chat.img.loading'), "aria-label": this.t('chat.img.loading') }, h("rtk-spinner", { key: 'fff61c6522d8bcb7de1345bb6505721ee6c6325e', iconPack: this.iconPack }))), this.status === 'errored' && (h("div", { key: 'c07e2cf6e9a94d375802c974e519d859ab48aa9b', class: "image-errored", title: this.t('chat.error.img_not_found'), "aria-label": this.t('chat.error.img_not_found') }, h("rtk-icon", { key: '83108f4f0396d77778463601a4f18d8593b0ffe7', icon: this.iconPack.image_off }))), this.status === 'loaded' && (h("div", { key: '96b5aafbd94eec920ae1cad14f09ab4a44571bd7', class: "actions" }, h("rtk-button", { key: 'a87ec11cc8de472aeb356689b49b6b366bd67f28', class: "action", variant: "secondary", kind: "icon", onClick: () => {
+                this.onPreview.emit(this.url);
+            } }, h("rtk-icon", { key: '543478c786b709ac477d4482874608c0b394b27c', icon: this.iconPack.full_screen_maximize })), h("rtk-button", { key: '6ce6d94a965688c7ec6ee64f79a4d13dda9651e3', class: "action", variant: "secondary", kind: "icon", onClick: () => downloadFile(this.url, { fallbackName: 'image' }) }, h("rtk-icon", { key: '3b1d67fbdd667e0d006e342c37f6e78c90fd2e34', icon: this.iconPack.download }))))));
+    }
+};
+__decorate$7([
+    SyncWithStore()
+], RtkImageMessageView.prototype, "iconPack", void 0);
+__decorate$7([
+    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 RtkMarkdownViewStyle0 = rtkMarkdownViewCss;
+
+const RtkMarkdownView = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** max length of text to render as markdown */
+        this.maxLength = MAX_TEXT_LENGTH;
+        this.restoreEmpty = (content, tag, renderCallback) => {
+            return content.trim().length === 0 ? `${tag}${content}${tag}` : renderCallback(content);
+        };
+        this.renderLink = (content) => {
+            return (h("a", { class: "link", href: content, target: "_blank", rel: "noopener noreferrer" }, content));
+        };
+        this.renderBold = (content) => {
+            if (typeof content === 'string') {
+                return this.restoreEmpty(content, '*', (c) => h("b", null, c));
+            }
+            return h("b", null, this.renderTokens(content));
+        };
+        this.renderItalic = (content) => {
+            if (typeof content === 'string') {
+                return this.restoreEmpty(content, '_', (c) => h("i", null, c));
+            }
+            return h("i", null, this.renderTokens(content));
+        };
+        this.renderStrikethrough = (content) => {
+            if (typeof content === 'string') {
+                return this.restoreEmpty(content, '~', (c) => h("s", null, c));
+            }
+            return h("b", null, this.renderTokens(content));
+        };
+        this.renderPlainText = (content) => {
+            if (typeof content === 'string') {
+                return content;
+            }
+            return h("p", null, this.renderTokens(content));
+        };
+        this.renderTokens = (tokens) => {
+            return tokens.map((token) => {
+                switch (token.type) {
+                    case 'a':
+                        if (typeof token.content === 'string') {
+                            return this.renderLink(token.content);
+                        }
+                    case 'b':
+                        return this.renderBold(token.content);
+                    case 'i':
+                        return this.renderItalic(token.content);
+                    case 's':
+                        return this.renderStrikethrough(token.content);
+                    case 'q':
+                        return h("span", { class: "block-quote" });
+                    case 'plain_text':
+                    default:
+                        return this.renderPlainText(token.content);
+                }
+            });
+        };
+    }
+    renderMessage(text) {
+        let lines = text.split('\n');
+        let isCodeBlock = false;
+        if (lines[0] === '```' && lines[lines.length - 1] === '```') {
+            isCodeBlock = true;
+            lines = lines.slice(1, -1);
+        }
+        const message = lines.map((line) => {
+            const tokens = parseRichText(line);
+            return h("p", null, this.renderTokens(tokens));
+        });
+        if (isCodeBlock) {
+            return h("pre", { style: { whiteSpace: 'pre', overflow: 'scroll' } }, lines.join('\n'));
+        }
+        return message;
+    }
+    render() {
+        const slicedMessage = this.text.slice(0, this.maxLength);
+        const withReply = extractReplyBlock(slicedMessage, true);
+        const withoutReply = stripOutReplyBlock(slicedMessage);
+        return (h("p", { key: '9544292f118f2c6975a807d6bcc2d307c70b2940' }, withReply.length !== 0 && h("blockquote", { key: '294bca9889738148fd51ecd8487d2d98b5adee4b' }, this.renderMessage(withReply)), withoutReply.length !== 0 && this.renderMessage(withoutReply)));
+    }
+};
+RtkMarkdownView.style = RtkMarkdownViewStyle0;
+
+const sm = 640;
+const md = 768;
+const lg = 1080;
+const xl = 2160;
+const breakpoints = {
+	sm: sm,
+	md: md,
+	lg: lg,
+	xl: xl
+};
+
+/**
+ * Get the screen breakpoint from a given width
+ * @param width The width of the container
+ * @returns The screen breakpoint value
+ */
+const getSize = (width) => {
+    if (width >= breakpoints.lg)
+        return 'lg';
+    else if (width >= breakpoints.md)
+        return 'md';
+    else
+        return 'sm';
+};
+
+const rtkMeetingCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{box-sizing:border-box;display:flex;flex-direction:column;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));overflow:hidden;position:fixed;top:var(--rtk-space-0, 0px);right:var(--rtk-space-0, 0px);bottom:var(--rtk-space-0, 0px);left:var(--rtk-space-0, 0px);height:100%;width:100%}:host([mode='fill']){position:relative}";
+const RtkMeetingStyle0 = rtkMeetingCss;
+
+const RtkMeeting = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.statesUpdate = createEvent(this, "rtkStatesUpdate", 7);
+        /** Since RtkMeeting by design works as a provider for component, to be in sync with other providers, added provider id */
+        this.providerId = 'provider-' + Math.floor(Math.random() * 100);
+        this.roomJoinedListener = () => {
+            this.updateStates({ meeting: 'joined' });
+        };
+        this.waitlistedListener = () => {
+            this.updateStates({ meeting: 'waiting' });
+        };
+        this.roomLeftListener = ({ state }) => {
+            // Let socketConnectionUpdate listener handle this case.
+            if (state === 'disconnected' || state === 'failed')
+                return;
+            this.updateStates({ meeting: 'ended', roomLeftState: state });
+        };
+        this.mediaPermissionUpdateListener = ({ kind, message }) => {
+            if (['audio', 'video'].includes(kind)) {
+                if ((message === 'DENIED' || message === 'SYSTEM_DENIED') &&
+                    (this.peerStore || uiStore).state.states.activeDebugger !== true) {
+                    const permissionModalSettings = {
+                        enabled: true,
+                        kind,
+                    };
+                    this.updateStates({ activePermissionsMessage: permissionModalSettings });
+                }
+            }
+        };
+        this.socketConnectionUpdateListener = ({ state }) => {
+            if (state === 'failed') {
+                setTimeout(() => {
+                    this.meeting.leave('disconnected');
+                }, this.leaveRoomTimer);
+            }
+        };
+        this.peerStore = null; // peer specific store for this meeting peer instance
+        /** Whether to load config from preset */
+        this.loadConfigFromPreset = false;
+        /** Whether to apply the design system on the document root from config */
+        this.applyDesignSystem = false;
+        /** Fill type */
+        this.mode = 'fixed';
+        /** Whether participant should leave when this component gets unmounted */
+        this.leaveOnUnmount = false;
+        /** Language */
+        this.t = useLanguage();
+        /** UI Config */
+        this.config = createDefaultConfig();
+        /** Grid layout */
+        this.gridLayout = 'row';
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        this.handleChangingMeeting = (destinationMeetingId) => {
+            const currentStates = (this.peerStore || uiStore).state.states;
+            this.updateStates({
+                activeBreakoutRoomsManager: Object.assign(Object.assign({}, currentStates.activeBreakoutRoomsManager), { destinationMeetingId }),
+            });
+        };
+    }
+    connectedCallback() {
+        var _a;
+        if (typeof window !== 'undefined') {
+            this.authErrorListener = (ev) => {
+                if (ev.detail.message.includes('401')) {
+                    this.updateStates({ meeting: 'ended', roomLeftState: 'unauthorized' });
+                }
+            };
+            window.addEventListener('rtkError', this.authErrorListener);
+        }
+        // Initialize default values
+        this.leaveRoomTimer = 10000;
+        this.loadConfigFromPreset = true;
+        this.applyDesignSystem = true;
+        // Setup event listeners
+        this.setupStoreRequestListener();
+        this.setupStateUpdateListener();
+        this.meetingChanged(this.meeting);
+        this.iconPackChanged(this.iconPack);
+        this.tChanged(this.t);
+        this.configChanged(this.config);
+        this.resizeObserver = new index(() => this.handleResize());
+        this.resizeObserver.observe(this.host);
+        if (this.applyDesignSystem &&
+            ((_a = this.config) === null || _a === void 0 ? void 0 : _a.designTokens) != null &&
+            typeof document !== 'undefined' &&
+            (this.peerStore || uiStore).state.states.activeDebugger !== true) {
+            provideRtkDesignSystem(document.documentElement, this.config.designTokens);
+        }
+    }
+    disconnectedCallback() {
+        var _a;
+        if (this.leaveOnUnmount) {
+            (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.leaveRoom();
+        }
+        this.resizeObserver.disconnect();
+        window.removeEventListener('rtkError', this.authErrorListener);
+        // Remove event listeners
+        if (this.storeRequestListener) {
+            this.host.removeEventListener('rtkRequestStore', this.storeRequestListener);
+            this.storeRequestListener = null;
+        }
+        if (this.stateUpdateListener) {
+            this.host.removeEventListener('rtkStateUpdate', this.stateUpdateListener);
+            this.stateUpdateListener = null;
+        }
+        // Clear meeting listeners
+        if (this.meeting) {
+            this.clearListeners(this.meeting);
+        }
+    }
+    setupStoreRequestListener() {
+        // Remove existing listener if any
+        if (this.storeRequestListener) {
+            this.host.removeEventListener('rtkRequestStore', this.storeRequestListener);
+        }
+        // Listen for store requests from child components
+        this.storeRequestListener = (event) => {
+            // Provide peer specific store if available, otherwise fall back to global store
+            if (!this.peerStore)
+                return;
+            const storeToProvide = this.peerStore;
+            const responseEvent = new CustomEvent('rtkProvideStore', {
+                detail: { store: storeToProvide, requestId: event.detail.requestId },
+            });
+            document.dispatchEvent(responseEvent);
+            // Stop the event from bubbling further to prevent other meetings from handling it
+            event.stopPropagation();
+        };
+        this.host.addEventListener('rtkRequestStore', this.storeRequestListener);
+    }
+    setupStateUpdateListener() {
+        if (this.stateUpdateListener) {
+            this.host.removeEventListener('rtkStateUpdate', this.stateUpdateListener);
+        }
+        this.stateUpdateListener = (event) => {
+            const eventTarget = event.target;
+            if (!this.host.contains(eventTarget)) {
+                return;
+            }
+            this.updateStates(event.detail);
+        };
+        this.host.addEventListener('rtkStateUpdate', this.stateUpdateListener);
+    }
+    clearListeners(meeting) {
+        if (!meeting)
+            return;
+        meeting.self.removeListener('roomLeft', this.roomLeftListener);
+        meeting.self.removeListener('roomJoined', this.roomJoinedListener);
+        meeting.self.removeListener('waitlisted', this.waitlistedListener);
+        meeting.self.removeListener('mediaPermissionUpdate', this.mediaPermissionUpdateListener);
+        meeting.meta.removeListener('socketConnectionUpdate', this.socketConnectionUpdateListener);
+    }
+    meetingChanged(meeting) {
+        var _a, _b;
+        if (!meeting)
+            return;
+        // Create peer specific store for this meeting peer instance
+        if (meeting) {
+            this.peerStore = createPeerStore({
+                meeting,
+                config: this.config,
+                iconPack: this.iconPack,
+                t: this.t,
+                providerId: this.providerId,
+            });
+            // Notify components that peer specific store is now available
+            document.dispatchEvent(new CustomEvent('rtkPeerStoreReady', {
+                detail: {
+                    peerId: meeting.self.id,
+                },
+            }));
+        }
+        else {
+            this.peerStore = null;
+        }
+        this.updateStates({ viewType: meeting.meta.viewType });
+        if (this.loadConfigFromPreset && meeting.self.config != null) {
+            const theme = meeting.self.config;
+            const { config, data } = generateConfig(theme, meeting);
+            this.config = config;
+            if (this.showSetupScreen == null) {
+                this.showSetupScreen = data.showSetupScreen;
+            }
+            if (meeting.connectedMeetings.supportsConnectedMeetings &&
+                ((_a = (this.peerStore || uiStore).state.states.activeBreakoutRoomsManager) === null || _a === void 0 ? void 0 : _a.destinationMeetingId)) {
+                this.showSetupScreen = false;
+            }
+        }
+        if (this.applyDesignSystem &&
+            ((_b = this.config) === null || _b === void 0 ? void 0 : _b.designTokens) != null &&
+            typeof document !== 'undefined' &&
+            (this.peerStore || uiStore).state.states.activeDebugger !== true) {
+            provideRtkDesignSystem(document.documentElement, this.config.designTokens);
+        }
+        meeting.self.addListener('roomJoined', this.roomJoinedListener);
+        meeting.self.addListener('waitlisted', this.waitlistedListener);
+        meeting.self.addListener('roomLeft', this.roomLeftListener);
+        meeting.self.addListener('mediaPermissionUpdate', this.mediaPermissionUpdateListener);
+        meeting.meta.addListener('socketConnectionUpdate', this.socketConnectionUpdateListener);
+        if (meeting.connectedMeetings.supportsConnectedMeetings) {
+            meeting.connectedMeetings.once('changingMeeting', this.handleChangingMeeting);
+        }
+        if (meeting.self.roomJoined) {
+            this.updateStates({ meeting: 'joined' });
+        }
+        else {
+            if (this.showSetupScreen) {
+                this.updateStates({ meeting: 'setup' });
+            }
+            else {
+                meeting.joinRoom();
+            }
+        }
+        window.removeEventListener('rtkError', this.authErrorListener);
+    }
+    iconPackChanged(newIconPack) {
+        if (this.peerStore) {
+            this.peerStore.state.iconPack = newIconPack;
+        }
+    }
+    tChanged(newT) {
+        if (this.peerStore) {
+            this.peerStore.state.t = newT;
+        }
+    }
+    configChanged(config) {
+        if (this.peerStore) {
+            this.peerStore.state.config = config;
+        }
+        if ((config === null || config === void 0 ? void 0 : config.designTokens) &&
+            typeof document !== 'undefined' &&
+            (this.peerStore || uiStore).state.states.activeDebugger !== true) {
+            provideRtkDesignSystem(document.documentElement, config.designTokens);
+        }
+    }
+    handleResize() {
+        this.size = getSize(this.host.clientWidth);
+    }
+    updateStates(states) {
+        // Use peer specific store if available, otherwise fall back to global store
+        const targetStore = this.peerStore || uiStore;
+        const newStates = Object.assign({}, targetStore.state.states);
+        targetStore.state.states = deepMerge(newStates, states);
+        // Emit unscoped event for backward compatibility
+        this.statesUpdate.emit(targetStore.state.states);
+        // Also emit a scoped event that only this meeting's components should listen to
+        const scopedEvent = new CustomEvent('rtkStatesUpdate', {
+            detail: targetStore.state.states,
+            bubbles: true,
+            composed: true,
+        });
+        this.host.dispatchEvent(scopedEvent);
+    }
+    render() {
+        const defaults = {
+            meeting: this.meeting,
+            size: this.size,
+            states: (this.peerStore || uiStore).state.states,
+            config: this.config || createDefaultConfig(),
+            iconPack: this.iconPack,
+            t: this.t,
+        };
+        if ((this.peerStore || uiStore).state.states.viewType === 'CHAT') {
+            return h("rtk-chat", Object.assign({}, defaults));
+        }
+        const elementProps = {
+            'rtk-grid': {
+                layout: this.gridLayout,
+            },
+        };
+        return h(Render, { element: "rtk-meeting", defaults: defaults, asHost: true, elementProps: elementProps });
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"],
+        "iconPack": ["iconPackChanged"],
+        "t": ["tChanged"],
+        "config": ["configChanged"]
+    }; }
+};
+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 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 RtkMenu$1 = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.clickedThis = false;
+        /** Placement of menu */
+        this.placement = 'bottom-end';
+        /** Offset in px */
+        this.offset = 10;
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        this.handleOutsideClick = () => {
+            // handles clicking on other menu triggers
+            if (!this.clickedThis) {
+                // if other trigger is clicked, hide this menu-list
+                this.menuListEl.style.display = 'none';
+            }
+            // reset the value
+            this.clickedThis = false;
+        };
+    }
+    componentDidLoad() {
+        document.addEventListener('click', this.handleOutsideClick);
+        this.update();
+    }
+    disconnectedCallback() {
+        document.removeEventListener('click', this.handleOutsideClick);
+    }
+    update() {
+        computePosition(this.triggerEl, this.menuListEl, {
+            placement: this.placement,
+            middleware: [offset(this.offset), flip(), shift({ padding: 5 })],
+        }).then(({ x, y }) => {
+            Object.assign(this.menuListEl.style, {
+                left: `${x}px`,
+                top: `${y}px`,
+            });
+        });
+    }
+    render() {
+        return (h(Host, { key: 'a814ea3dde902a15cb6fb0db8a9c2409c240537f' }, h("span", { key: 'de2447524c6a1787a6b9442ccb9c3d56a33e9f4f', id: "trigger", ref: (el) => (this.triggerEl = el), onClick: () => {
+                this.clickedThis = true;
+                if (this.menuListEl.style.display !== 'block') {
+                    this.menuListEl.style.display = 'block';
+                    this.update();
+                }
+                else {
+                    this.menuListEl.style.display = 'none';
+                }
+            } }, h("slot", { key: 'fb566f431ceca452fad8b564cfb777bc90411a02', name: "trigger" })), h("span", { key: '50b030d301e54677d19cc21dadcec53f566b14cf', part: "menu-list", id: "menu-list", ref: (el) => (this.menuListEl = el) }, h("slot", { key: '59ce6c30c39155fec448114fd25752585d95c87d' }))));
+    }
+};
+__decorate$6([
+    SyncWithStore()
+], RtkMenu$1.prototype, "iconPack", void 0);
+__decorate$6([
+    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-600, 60 60 60) / 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 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 RtkMenuItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+    }
+    render() {
+        return (h(Host, { key: 'f0316fee5ac5fd2124ee26ac2664172007ad1c54' }, h("slot", { key: '994a3a27f743462a3ae0a4c95bc5de672119fdb6', name: "start" }), h("slot", { key: '24594ecaffb46a4b0458032596570fee37e6ae00' }), h("slot", { key: '4ede22267a24a37c508591b0148a1e1b2c391fc9', name: "end" })));
+    }
+};
+__decorate$5([
+    SyncWithStore()
+], RtkMenuItem.prototype, "iconPack", void 0);
+__decorate$5([
+    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-top:var(--rtk-space-2, 8px);padding-bottom:var(--rtk-space-2, 8px);--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));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)}";
+const RtkMenuListStyle0 = rtkMenuListCss;
+
+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);
+    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 RtkMenuList = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+    }
+    render() {
+        return (h(Host, { key: 'c0974bc340294b197aa8310e5a9913126ac22c48' }, h("slot", { key: '1a660db36c713285203569957959663497803c5e' })));
+    }
+};
+__decorate$4([
+    SyncWithStore()
+], RtkMenuList.prototype, "iconPack", void 0);
+__decorate$4([
+    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);align-self:flex-end;font-size:10px;color:rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76))}.avatar{display:none}rtk-menu{position:absolute;right:var(--rtk-space-0, 0px);top:var(--rtk-space-0, 0px);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;padding-left:var(--rtk-space-2, 8px);padding-bottom:var(--rtk-space-2, 8px);padding-top:var(--rtk-space-1, 4px);padding-right:var(--rtk-space-1, 4px);border-radius:var(--rtk-border-radius-md, 8px);border-width:var(--rtk-border-width-none, 0);border-style:none;background:radial-gradient(\n    at top right,\n    rgb(var(--rtk-colors-brand-300, 73 124 253)) 60%,\n    rgba(255, 255, 255, 0) 80%\n  )}.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 .actions{background:radial-gradient(\n      at top right,\n      rgb(var(--rtk-colors-background-800, 30 30 30)) 60%,\n      rgba(255, 255, 255, 0) 80%\n    )}.incoming .actions rtk-icon{color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}.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))}@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 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 RtkMessageView = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.onAction = createEvent(this, "action", 7);
+        /** List of actions to show in menu */
+        this.actions = [];
+        /** Appearance */
+        this.variant = 'bubble';
+        /** Render */
+        this.viewType = 'outgoing';
+        /** Hides avatar */
+        this.hideAvatar = false;
+        /** Is the message sent by the current user */
+        this.isSelf = false;
+        /** Hides author display label */
+        this.hideAuthorName = false;
+        /** Hides metadata (time) */
+        this.hideMetadata = false;
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+    }
+    renderActions() {
+        return (h("rtk-menu", { placement: "top-end", offset: 1 }, h("button", { slot: "trigger", class: "actions" }, h("rtk-icon", { icon: this.iconPack.chevron_down })), h("rtk-menu-list", null, this.actions.map((action) => (h("rtk-menu-item", { onClick: () => this.onAction.emit(action.id) }, action.icon && h("rtk-icon", { icon: action.icon, slot: "start" }), action.label))))));
+    }
+    render() {
+        return (h(Host, { key: '61882011f477f816296277a4f2d5622d224e47f0' }, h("div", { key: 'ae21bfc0c499879da6a2167f0cad5203475de696', class: { 'message-wrapper': true, [this.viewType]: true } }, !this.hideAvatar && (h("aside", { key: '73b10ebb1dccdc4e2c9258f185eb14f07d11d542', class: "avatar", part: "avatar" }, h("rtk-avatar", { key: 'e07971bf9d7738fb2dcc015d339a13d5dca7c6f7', participant: { name: this.authorName, picture: this.avatarUrl }, size: "sm" }))), h("div", { key: '1e24801f717589e598c4160bea7ab10a59acfcc2', class: "message", part: "message" }, !this.hideAuthorName && (h("div", { key: '3178f750ad798b7d83508f82ead36ee5407fee4c', class: "header" }, this.authorName, " ", this.isSelf ? ' (You)' : '')), h("div", { key: '056445ef0c557d7d756330df5778ad8bc2d41e60', class: { body: true, bubble: this.variant === 'bubble' } }, h("slot", { key: '6d5486666ce2238e4387c2621d562b24704a9317' }), !this.hideMetadata && !!this.time && (h("div", { key: '1d4b9bdbb3aaf288dce4b43a31354df3d413b2b4', class: "metadata", title: formatDateTime(this.time) }, elapsedDuration(this.time, new Date(Date.now())))), this.actions.length !== 0 && this.renderActions())))));
+    }
+};
+__decorate$3([
+    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)}#bottom-scroll{transform:translateY(-20vh)}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{pointer-events:none;position:absolute;bottom:var(--rtk-space-2, 8px);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));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)}.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)}";
+const RtkPaginatedListStyle0 = rtkPaginatedListCss;
+
+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 RtkPaginatedList = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        /** label to show when empty */
+        this.emptyListLabel = null;
+        this.isLoading = false;
+        this.rerenderBoolean = false;
+        /**
+         * This gets disabled when the user scrolls up and the bottom node
+         * is not visible anymore.
+         */
+        this.shouldRenderNewNodes = true;
+        /**
+         * This gets disabled when the user scrolls up and the bottom node
+         * is not visible anymore.
+         */
+        this.hasNewNodesToRender = false;
+        this.showEmptyListLabel = false;
+        /**
+         * This is a private variable not a state
+         * since we want to debounce rerenders
+         *
+         * A list of pages where each page contains a number of Nodes
+         * [
+         *  [Node 1, Node 2, Node 3.... Node N],
+         *  [Node 1, Node 2, Node 3.... Node N],
+         * ]
+         */
+        this.pagesToRender = [[]];
+        this.currentTime = () => {
+            return new Date().getTime();
+        };
+        this.observe = (el) => {
+            if (!el)
+                return;
+            this.intersectionObserver.observe(el);
+        };
+    }
+    /**
+     * On a new node created
+     */
+    async onNewNode(node) {
+        if (!this.shouldRenderNewNodes) {
+            this.hasNewNodesToRender = true;
+            return;
+        }
+        this.addNodeToRender(node, false);
+        this.rerender();
+    }
+    /**
+     * On node deleted
+     */
+    async onNodeDelete(key) {
+        const oldLength = this.pagesToRender.flat().length;
+        this.pagesToRender = this.pagesToRender.map((page) => page.filter((item) => item.id !== key));
+        if (oldLength !== this.pagesToRender.flat().length) {
+            this.rerender();
+        }
+    }
+    /**
+     * On node updated
+     */
+    async onNodeUpdate(key, newItem) {
+        let shouldRerender = false;
+        this.pagesToRender = this.pagesToRender.map((page) => page.map((item) => {
+            if (item.id === key) {
+                shouldRerender = true;
+                return newItem;
+            }
+            return item;
+        }));
+        if (shouldRerender)
+            this.rerender();
+    }
+    onItemChanged(newItemId, oldItemId) {
+        if (newItemId !== oldItemId) {
+            this.pagesToRender = [[]];
+            this.loadFirstPage().then(() => this.rerender());
+        }
+    }
+    connectedCallback() {
+        this.rerender = debounce(this.rerender.bind(this), 50, { maxWait: 200 });
+        this.autoScroll = true;
+        this.intersectionObserver = new IntersectionObserver((entries) => {
+            writeTask(() => {
+                for (const entry of entries) {
+                    if (entry.target.id === 'bottom-scroll') {
+                        if (entry.isIntersecting)
+                            this.loadBottom();
+                        else
+                            this.shouldRenderNewNodes = false;
+                    }
+                    if (entry.target.id === 'top-scroll' && entry.isIntersecting) {
+                        this.loadTop();
+                    }
+                }
+            });
+        });
+    }
+    disconnectedCallback() {
+        this.intersectionObserver.disconnect();
+    }
+    componentDidLoad() {
+        /**
+         * Adding observes here so that on the first render we scroll down
+         * and shouldRenderNewNodes remains true
+         */
+        this.loadFirstPage();
+        this.observe(this.$topRef);
+        this.observe(this.$bottomRef);
+    }
+    componentDidRender() {
+        if (this.shouldRenderNewNodes && this.autoScroll)
+            smoothScrollToBottom(this.$paginatedList);
+    }
+    loadFirstPage() {
+        return this.loadPage(this.currentTime(), this.pageSize, true, (data) => {
+            if (data.length === 0) {
+                this.showEmptyListLabel = true;
+            }
+        });
+    }
+    loadTop() {
+        /**
+         * If there is only one unfilled page or no page, no need to check
+         * for top since it will be empty
+         */
+        if (this.pagesToRender.length === 0)
+            return;
+        if (this.pagesToRender.length === 1 && this.pagesToRender[0].length < this.pageSize)
+            return;
+        /**
+         * TODO: Make this more flexible currently this only works with chat
+         */
+        const oldestVNode = this.pagesToRender[0][0];
+        const oldestTimestamp = oldestVNode.timeMs;
+        // TODO: scrollIntoView
+        const onPageRendered = () => { }; // oldestVNode.$elm$?.scrollIntoView();
+        this.loadPage(oldestTimestamp - 1, this.pageSize, true, onPageRendered);
+    }
+    loadBottom() {
+        /**
+         * If there is only one unfilled page or no page, no need to check
+         * for top since it will be empty
+         */
+        if (this.pagesToRender.length === 0) {
+            this.shouldRenderNewNodes = true;
+            return;
+        }
+        if (this.pagesToRender.length === 1 && this.pagesToRender[0].length < this.pageSize) {
+            this.shouldRenderNewNodes = true;
+            return;
+        }
+        const newestVNode = this.pagesToRender.at(-1).at(-1);
+        const newestTimestamp = newestVNode.timeMs;
+        // TODO: scrollIntoView
+        const onPageRendered = () => smoothScrollToBottom(this.$paginatedList);
+        this.loadPage(newestTimestamp + 1, this.pageSize, false, onPageRendered);
+    }
+    addNodeToRender(node, addToStart) {
+        if (addToStart) {
+            const firstPage = this.pagesToRender[0];
+            if (firstPage && (firstPage === null || firstPage === void 0 ? void 0 : firstPage.length) < this.pageSize) {
+                /**
+                 * If first page is not full then just add to that page
+                 */
+                firstPage.unshift(node);
+            }
+            else {
+                /**
+                 * If first page is full then add a new page to the start
+                 */
+                const newPage = [node];
+                this.pagesToRender.unshift(newPage);
+                this.removeLastPageIfNeeded(false);
+            }
+        }
+        else {
+            const [lastPage] = this.pagesToRender.slice(-1);
+            if (lastPage && (lastPage === null || lastPage === void 0 ? void 0 : lastPage.length) < this.pageSize) {
+                /**
+                 * If last page is not full then just add it
+                 */
+                lastPage.push(node);
+            }
+            else {
+                /**
+                 * If last page is full add a new page with just
+                 * this node
+                 */
+                const newPage = [node];
+                this.pagesToRender.push(newPage);
+                this.removeLastPageIfNeeded(true);
+            }
+        }
+    }
+    /**
+     * @param start
+     * @param end
+     * @param reversed Defines whether to add the page at the beginning or the end
+     * @param onPageLoaded Callback for when all new nodes are rendered
+     */
+    async loadPage(timestamp, size, reversed, onPageRendered = () => { }) {
+        this.isLoading = true;
+        const data = (await this.fetchData(timestamp, size, reversed));
+        this.isLoading = false;
+        if (!(data === null || data === void 0 ? void 0 : data.length)) {
+            /**
+             * While scrolling down if there were no new items found
+             * then start rendering new nodes;
+             */
+            if (!reversed) {
+                this.hasNewNodesToRender = false;
+                this.shouldRenderNewNodes = true;
+            }
+            onPageRendered([]);
+            return;
+        }
+        data.forEach((node) => this.addNodeToRender(node, reversed));
+        this.rerender();
+        onPageRendered(data);
+    }
+    rerender() {
+        this.rerenderBoolean = !this.rerenderBoolean;
+    }
+    removeLastPageIfNeeded(removeFromStart) {
+        if (this.pagesToRender.length > this.pagesAllowed) {
+            if (removeFromStart)
+                this.pagesToRender.shift();
+            else
+                this.pagesToRender.pop();
+        }
+    }
+    onDownArrowClicked() {
+        /**
+         * Load the freshest pages
+         */
+        this.loadBottom();
+    }
+    render() {
+        var _a;
+        /**
+         * div.container is flex=column-reverse
+         * which is why div#bottom-scroll comes before div#top-scroll
+         * div.page-wrapper prevents reversal of messages
+         */
+        return (h(Host, { key: 'bb4971c301060a02d6a9ad536fb633c0c87519c4' }, h("div", { key: '92a9524264d790fff447aefb7cc20a9da6958687', class: "scrollbar container", part: "container", ref: (el) => (this.$paginatedList = el) }, h("div", { key: 'e64bd91ea1e869b9a1f5e861959ee78306c17bee', class: { 'show-new-messages-ctr': true, active: !this.shouldRenderNewNodes } }, h("rtk-button", { key: '2471e6614616aa33c9ecd5d0c1f47d09fa00b481', class: "show-new-messages", kind: "icon", variant: "secondary", part: "show-new-messages", onClick: () => this.onDownArrowClicked() }, h("rtk-icon", { key: 'ed0b255c69fbaeecc883c0492fd5b810b8d429b8', icon: this.iconPack.chevron_down }))), h("div", { key: '509aa620d47e853fd4e73d5b6c30433156b0f1da', class: "smallest-dom-element", id: "bottom-scroll", ref: (el) => (this.$bottomRef = el) }), this.isLoading && this.pagesToRender.flat().length === 0 && h("rtk-spinner", { key: '47e60a2fcb103200d763b9af257babfca5ee6e3c', size: "lg" }), this.pagesToRender.flat().length === 0 && this.showEmptyListLabel ? (h("div", { class: "empty-list" }, (_a = this.emptyListLabel) !== null && _a !== void 0 ? _a : this.t('list.empty'))) : (h("div", { class: "page-wrapper" }, this.pagesToRender.map((page) => this.createNodes(page)))), h("div", { key: '64ab66547b004130f9f3d0b0976c27c5aeeb720e', class: "smallest-dom-element", id: "top-scroll", ref: (el) => (this.$topRef = el) }))));
+    }
+    static get watchers() { return {
+        "selectedItemId": ["onItemChanged"]
+    }; }
+};
+__decorate$2([
+    SyncWithStore()
+], RtkPaginatedList.prototype, "iconPack", void 0);
+__decorate$2([
+    SyncWithStore()
+], RtkPaginatedList.prototype, "t", void 0);
+RtkPaginatedList.style = RtkPaginatedListStyle0;
+
+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;
+
+var __decorate$1 = (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 RtkSpinner = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Size */
+        this.size = 'md';
+    }
+    render() {
+        return (h(Host, { key: '896d7e13900a390f5c03df4e2af45163d61f6d09' }, h("rtk-icon", { key: 'dd05bbbb3eb9db982d85db131b82c2bcaf253a94', class: "spinner", icon: this.iconPack.spinner })));
+    }
+};
+__decorate$1([
+    SyncWithStore()
+], RtkSpinner.prototype, "iconPack", void 0);
+RtkSpinner.style = RtkSpinnerStyle0;
+
+const rtkTextComposerViewCss = ".chat-input {\n  position: relative;\n  z-index: 10;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  border-top-left-radius: var(--rtk-border-radius-md, 8px);\n  border-top-right-radius: var(--rtk-border-radius-md, 8px)\n}\n\n  .chat-input textarea {\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));\n  box-sizing: border-box;\n  padding: var(--rtk-space-3, 12px);\n  color: rgb(var(--rtk-colors-text-1000, 255 255 255))\n}\n\n  .chat-input textarea::-moz-placeholder {\n  color: rgb(var(--rtk-colors-text-1000, 255 255 255))\n}\n\n  .chat-input textarea::placeholder {\n  color: rgb(var(--rtk-colors-text-1000, 255 255 255))\n}\n\n  .chat-input textarea {\n  font-family: var(--rtk-font-family, sans-serif);\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n  resize: none;\n  overflow-y: auto;\n  border-width: var(--rtk-border-width-none, 0);\n  border-style: none;\n  min-height: 60px;\n  font-size: 14px\n}\n\n@container chatcontainer (height < 360px) {\n  textarea {\n    height: 30px !important;\n    min-height: 30px !important\n  }\n}\n\n.text-error {\n  left: var(--rtk-space-0, 0px);\n  z-index: 10;\n  margin-top: var(--rtk-space-1, 4px);\n  margin-left: var(--rtk-space-1, 4px);\n  display: flex;\n  width: -moz-fit-content;\n  width: fit-content;\n  align-items: center;\n  justify-content: flex-start;\n  border-radius: var(--rtk-border-radius-sm, 4px);\n  --tw-border-opacity: 1;\n  border-color: rgba(var(--rtk-colors-warning, 255 205 7) / var(--tw-border-opacity));\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));\n  padding-left: var(--rtk-space-2, 8px);\n  padding-right: var(--rtk-space-2, 8px);\n  font-size: 12px;\n  font-weight: 600;\n  --tw-text-opacity: 1;\n  color: rgba(var(--rtk-colors-warning, 255 205 7) / var(--tw-text-opacity));\n  border: 1px solid\n}\n\n#warning-indicator {\n  margin-right: var(--rtk-space-1, 4px);\n  height: var(--rtk-space-3, 12px);\n  width: var(--rtk-space-3, 12px)\n}\n\n.text-error.breached {\n  --tw-border-opacity: 1;\n  border-color: rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-border-opacity));\n  --tw-text-opacity: 1;\n  color: rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))\n}";
+const RtkTextComposerViewStyle0 = rtkTextComposerViewCss;
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const RtkTextComposerView = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.onTextChange = createEvent(this, "textChange", 7);
+        /** Disable the text input (default = false) */
+        this.disabled = false;
+        /** Boolean to indicate if rate limit is breached */
+        this.rateLimitBreached = false;
+        /** Keydown event handler function */
+        this.keyDownHandler = () => { };
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        this.maxLengthBreached = 0;
+        this.onInputHandler = () => {
+            const text = this.$textArea.value.trim();
+            this.maybeResize(text);
+            this.checkLength(text);
+            this.onTextChange.emit(text);
+        };
+        this.maybeResize = (text) => {
+            const newLines = [...text.matchAll(/\n/g)].length;
+            this.$textArea.style.height = `${Math.min(200, 60 + 20 * newLines)}px`;
+        };
+    }
+    componentDidLoad() {
+        if (this.maxLength) {
+            this.$textArea.maxLength = this.maxLength;
+        }
+        const text = this.$textArea.value.trim();
+        if (text !== '') {
+            this.maybeResize(text);
+        }
+        this.$textArea.focus();
+    }
+    /** Sets value of the text input */
+    async setText(text, focus = false) {
+        this.$textArea.value = text;
+        this.maybeResize(text);
+        if (focus) {
+            this.$textArea.focus();
+        }
+        this.checkLength(text);
+        this.onTextChange.emit(text);
+    }
+    checkLength(text) {
+        // unicode code length
+        const textLen = text.length;
+        if (textLen + 10 >= this.maxLength) {
+            this.maxLengthBreached = text.length;
+        }
+        else if (textLen + 10 < this.maxLength && this.maxLengthBreached > 0) {
+            this.maxLengthBreached = 0;
+        }
+    }
+    render() {
+        return (h("div", { key: '16cc81323e6fb16e4d4a6622895ed7edc80f2db9', class: "chat-input", part: "chat-input-container" }, this.maxLengthBreached > 0 && (h("div", { key: '05fde7b4f3e084e464fcc3276f0ce1e0d909e6a7', class: 'text-error ' + (this.maxLengthBreached === this.maxLength ? 'breached' : '') }, h("rtk-icon", { key: 'd4101bf8933a9873605e88fbb617d8ae38bb56a1', id: "warning-indicator", icon: this.iconPack.warning, part: "warning-indicator" }), ' ', this.maxLengthBreached, " / ", this.maxLength, " ", this.t('chat.max_limit_warning'))), this.rateLimitBreached && (h("div", { key: '779a1c58114de2cce65a13ee3ea8cb308f7cd68a', class: 'text-error breached' }, h("rtk-icon", { key: '9dedd14d826b1437f434d92c985659ecc3bc1842', id: "warning-indicator", icon: this.iconPack.warning, part: "warning-indicator" }), ' ', this.t('chat.rate_limit_error'))), h("textarea", { key: 'f45f8f812ad668a86d2d0a22926bf437be44cbc9', ref: (el) => (this.$textArea = el), placeholder: this.placeholder, disabled: this.disabled, onInput: this.onInputHandler, onKeyDown: this.keyDownHandler, part: "chat-input", value: this.value })));
+    }
+};
+__decorate([
+    SyncWithStore()
+], RtkTextComposerView.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkTextComposerView.prototype, "t", void 0);
+RtkTextComposerView.style = RtkTextComposerViewStyle0;
+
+const rtkTextMessageViewCss = ":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)}.text{word-break:break-word;display:block;overflow-wrap:break-word;line-height:1.375}.text.emoji{font-size:24px}";
+const RtkTextMessageViewStyle0 = rtkTextMessageViewCss;
+
+const RtkTextMessageView = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** Renders text as markdown (default = true) */
+        this.isMarkdown = false;
+    }
+    render() {
+        return (h("p", { key: '3a9c21d67487ea40760163f0dd69152454049063', class: { text: true, emoji: hasOnlyEmojis(this.text) } }, this.isMarkdown ? h("rtk-markdown-view", { text: this.text }) : this.text));
+    }
+};
+RtkTextMessageView.style = RtkTextMessageViewStyle0;
+
+const rtkTooltipCss = ":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{--background-color:var(--rtk-tooltip-background-color, rgb(var(--rtk-colors-background-600, 60 60 60)));--color:var(--rtk-tooltip-color, rgb(var(--rtk-colors-text-1000, 255 255 255)));display:inline-flex}#trigger{display:block;width:100%;flex:1 1 0%}.tooltip{max-width:var(--rtk-space-64, 256px);position:fixed;z-index:20;display:none;width:-moz-max-content;width:max-content;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);border-radius:var(--rtk-border-radius-sm, 4px);--tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);font-size:12px}.tooltip,#arrow{position:absolute;background-color:var(--background-color);color:var(--color)}#arrow{position:absolute;height:var(--rtk-space-2, 8px);width:var(--rtk-space-2, 8px);transform:rotate(45deg)}:host([variant='primary']){--background-color:rgb(var(--rtk-colors-brand-500, 33 96 253));--color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}:host([kind='block']){display:block}";
+const RtkTooltipStyle0 = rtkTooltipCss;
+
+const RtkMenu = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.openChange = createEvent(this, "rtkOpenChange", 7);
+        /** Tooltip label */
+        this.label = '';
+        /** Tooltip variant */
+        this.variant = 'secondary';
+        /** Disabled */
+        this.disabled = false;
+        /** Open */
+        this.open = false;
+        /** Tooltip kind */
+        this.kind = 'inline';
+        /** Placement of menu */
+        this.placement = 'top';
+        /** Delay before showing the tooltip */
+        this.delay = 0;
+        this.isInFocus = false;
+        this.showMenu = () => {
+            if (this.disabled)
+                return;
+            this.isInFocus = true;
+            setTimeout(() => {
+                if (this.isInFocus) {
+                    this.tooltipEl.style.display = 'block';
+                    this.update();
+                    this.openChange.emit(true);
+                    if (this.size === 'sm') {
+                        setTimeout(() => {
+                            if (this.isInFocus) {
+                                this.hideMenu();
+                            }
+                        }, 1000);
+                    }
+                }
+            }, this.delay);
+        };
+        this.hideMenu = () => {
+            if (this.open || this.disabled)
+                return;
+            this.isInFocus = false;
+            this.tooltipEl.style.display = 'none';
+            this.openChange.emit(false);
+        };
+    }
+    componentDidLoad() {
+        this.triggerEl.addEventListener('focusin', this.showMenu);
+        this.triggerEl.addEventListener('mouseenter', this.showMenu);
+        this.triggerEl.addEventListener('focusout', this.hideMenu);
+        this.triggerEl.addEventListener('mouseleave', this.hideMenu);
+        writeTask(() => {
+            this.openChanged(this.open);
+        });
+    }
+    disconnectedCallback() {
+        if (!this.triggerEl)
+            return;
+        this.triggerEl.removeEventListener('focusin', this.showMenu);
+        this.triggerEl.removeEventListener('mouseenter', this.showMenu);
+        this.triggerEl.removeEventListener('focusout', this.hideMenu);
+        this.triggerEl.removeEventListener('mouseleave', this.hideMenu);
+        this.triggerEl = undefined;
+    }
+    openChanged(open) {
+        if (open) {
+            this.showMenu();
+        }
+        else {
+            this.hideMenu();
+        }
+    }
+    update() {
+        computePosition(this.triggerEl, this.tooltipEl, {
+            placement: this.placement,
+            middleware: [offset(8), flip(), shift({ padding: 5 }), arrow({ element: this.arrowEl })],
+        }).then(({ x, y, placement, middlewareData }) => {
+            Object.assign(this.tooltipEl.style, {
+                left: `${x}px`,
+                top: `${y}px`,
+            });
+            const { x: arrowX, y: arrowY } = middlewareData.arrow;
+            const staticSide = {
+                top: 'bottom',
+                right: 'left',
+                bottom: 'top',
+                left: 'right',
+            }[placement.split('-')[0]];
+            Object.assign(this.arrowEl.style, {
+                left: arrowX != null ? `${arrowX}px` : '',
+                top: arrowY != null ? `${arrowY}px` : '',
+                right: '',
+                bottom: '',
+                [staticSide]: '-4px',
+            });
+        });
+    }
+    render() {
+        return (h(Host, { key: 'cee2142cb6afa3e002b614bd3dd18b710b749ac1' }, h("span", { key: '4ba5b4777592afc8eb0ae14b50e5ebbfbb43bd1f', part: "trigger", id: "trigger", ref: (el) => (this.triggerEl = el) }, h("slot", { key: 'fa1ecc3998424e21444324bf4b5c90d6891ab03f' })), h("div", { key: '39306bb13f784942525e0b8b203406512253be3d', part: "tooltip", class: "tooltip", id: "tooltip", role: "tooltip", ref: (el) => (this.tooltipEl = el) }, h("div", { key: 'd5bd2ca0781605c1ffe4cbeb1ade65430aed6691', id: "arrow", ref: (el) => (this.arrowEl = el), part: "arrow" }), this.label, h("slot", { key: 'c80c860e2c9cdcbe3c0e0ec97b8f4cd9c99abb78', name: "tooltip" }))));
+    }
+    static get watchers() { return {
+        "open": ["openChanged"]
+    }; }
+};
+RtkMenu.style = RtkTooltipStyle0;
+
+export { RtkAvatar as rtk_avatar, RtkButton as rtk_button, RtkChannelSelectorView as rtk_channel_selector_view, RtkChat as rtk_chat, RtkChatComposerView as rtk_chat_composer_view, RtkChatMessagesUiPaginated as rtk_chat_messages_ui_paginated, RtkDraftAttachmentView as rtk_draft_attachment_view, RtkEmojiPicker as rtk_emoji_picker, RtkEmojiPickerButton as rtk_emoji_picker_button, RtkFileMessageView as rtk_file_message_view, RtkFilePickerButton as rtk_file_picker_button, RtkIcon as rtk_icon, RtkImageMessageView as rtk_image_message_view, RtkMarkdownView as rtk_markdown_view, RtkMeeting as rtk_meeting, RtkMenu$1 as rtk_menu, RtkMenuItem as rtk_menu_item, RtkMenuList as rtk_menu_list, RtkMessageView as rtk_message_view, RtkPaginatedList as rtk_paginated_list, RtkSpinner as rtk_spinner, RtkTextComposerView as rtk_text_composer_view, RtkTextMessageView as rtk_text_message_view, RtkMenu as rtk_tooltip };