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

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

@@ -1,17 +1,16 @@
 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 { e as defaultIconPack, i as useLanguage, c as createDefaultConfig, f as defaultOverrides, I as FlagsmithFeatureFlags, H as chatUnreadTimestamps, J as gracefulStorage, u as uiStore, b as createPeerStore } from './ui-store-12132d9c.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 { S as SyncWithStore } from './index-6eb882e7.js';
+import { d as debounce } from './debounce-3139f9e3.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-b2bea75f.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 { p as provideRtkDesignSystem, d as deepMerge } from './merge-bc2a0775.js';
 import { R as Render } from './index-d31a2e33.js';
-import { g as generateConfig } from './config-e684aa4d.js';
+import { g as generateConfig } from './config-325caca3.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;
@@ -51,7 +50,7 @@ const RtkAvatar = class {
         };
     }
     render() {
-        return (h(Host, { key: 'c1a0be37edb75c40b275ad59af85cee7df3f1cdf' }, this.getAvatar(), h("slot", { key: '1cd71e7494a09d68a52051edc279911dc3168515' })));
+        return (h(Host, { key: 'd7d3a7b03a3807984dc6798b5e35cec4418e06e7' }, this.getAvatar(), h("slot", { key: '25aa9fe632a132c1e2f8ef88ac98043bb8ef085a' })));
     }
 };
 __decorate$h([
@@ -86,7 +85,7 @@ const RtkButton = class {
 };
 RtkButton.style = RtkButtonStyle0;
 
-const rtkChannelSelectorViewCss = ".scrollbar {\n  /* For Firefox */\n  scrollbar-width: thin;\n  scrollbar-color: var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n    var(--rtk-scrollbar-background, transparent);\n}\n\n/* For WebKit */\n.scrollbar::-webkit-scrollbar {\n  height: var(--rtk-space-1\\.5, 6px);\n  width: var(--rtk-space-1\\.5, 6px);\n  border-radius: 9999px;\n  background-color: var(--rtk-scrollbar-background, transparent);\n}\n\n.scrollbar::-webkit-scrollbar-thumb {\n  border-radius: 9999px;\n  background-color: var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)));\n}\n\n\n:host {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-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 rtkChannelSelectorViewCss = ".scrollbar {\n  /* For Firefox */\n  scrollbar-width: thin;\n  scrollbar-color: var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n    var(--rtk-scrollbar-background, transparent);\n}\n\n/* For WebKit */\n.scrollbar::-webkit-scrollbar {\n  height: var(--rtk-space-1\\.5, 6px);\n  width: var(--rtk-space-1\\.5, 6px);\n  border-radius: 9999px;\n  background-color: var(--rtk-scrollbar-background, transparent);\n}\n\n.scrollbar::-webkit-scrollbar-thumb {\n  border-radius: 9999px;\n  background-color: var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)));\n}\n\n\n:host {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));\n  position: relative;\n  z-index: 10;\n  height: var(--rtk-space-12, 48px);\n  min-height: 48px;\n}\n\n.dropdown-trigger {\n  height: 100%;\n  width: 100%;\n  border-width: var(--rtk-border-width-none, 0);\n  border-style: none;\n  padding: var(--rtk-space-4, 16px);\n  padding-left: var(--rtk-space-3, 12px);\n  padding-right: var(--rtk-space-3, 12px);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));\n  font-size: 14px;\n  color: rgb(var(--rtk-colors-text-1000, 255 255 255));\n  cursor: pointer;\n  position: absolute;\n  z-index: 20;\n}\n\n.dropdown-trigger span {\n  display: flex;\n  flex: 1 1 0%;\n  align-items: center;\n  justify-content: flex-start;\n  gap: var(--rtk-space-2, 8px);\n}\n\n.dropdown-trigger rtk-icon {\n  margin-left: var(--rtk-space-1, 4px);\n  height: var(--rtk-space-4, 16px);\n  width: var(--rtk-space-4, 16px);\n  flex-shrink: 0;\n}\n\n@container chatcontainer (height < 360px) {\n  .dropdown-trigger {\n    padding: var(--rtk-space-2, 8px);\n  }\n  .dropdown {\n    top: var(--rtk-space-8, 32px) !important;\n  }\n  .search-container {\n    padding-left: var(--rtk-space-0, 0px) !important;\n    padding-right: var(--rtk-space-0, 0px) !important;\n    padding-top: var(--rtk-space-0, 0px) !important;\n    padding-bottom: var(--rtk-space-0, 0px) !important;\n  }\n  input {\n    height: var(--rtk-space-8, 32px) !important;\n    border-radius: var(--rtk-border-radius-none, 0) !important;\n  }\n  .avatar-icon {\n    height: var(--rtk-space-3, 12px) !important;\n    width: var(--rtk-space-3, 12px) !important;\n    padding: var(--rtk-space-1, 4px) !important;\n  }\n}\n\n.dropdown {\n  position: absolute;\n  width: 100%;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));\n  border-bottom-width: var(--rtk-border-width-sm, 1px);\n  border-right-width: var(--rtk-border-width-none, 0);\n  border-left-width: var(--rtk-border-width-none, 0);\n  border-top-width: var(--rtk-border-width-none, 0);\n  border-style: solid;\n  --tw-border-opacity: 1;\n  border-color: rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity));\n  top: var(--rtk-space-12, 48px);\n  z-index: 10;\n  animation: 0.3s slide-down ease;\n}\n\n.dropdown .channels-container {\n  max-height: var(--rtk-space-80, 320px);\n}\n\n.list {\n  display: flex;\n  flex-direction: column;\n}\n\n.list .channel .channel-data {\n  align-items: flex-start;\n}\n\n.unread-count {\n  display: flex;\n  justify-content: center;\n  height: var(--rtk-space-5, 20px);\n  min-width: var(--rtk-space-3, 12px);\n  border-radius: 9999px;\n  padding-left: var(--rtk-space-1, 4px);\n  padding-right: var(--rtk-space-1, 4px);\n  font-size: 12px;\n  line-height: 1.25rem;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));\n  color: rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));\n}\n\ninput {\n  height: var(--rtk-space-9, 36px);\n  width: 100%;\n  padding-left: var(--rtk-space-3, 12px);\n  padding-right: var(--rtk-space-3, 12px);\n  box-sizing: border-box;\n  border-width: var(--rtk-border-width-none, 0);\n  border-style: none;\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n  border-radius: var(--rtk-border-radius-sm, 4px);\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));\n  color: rgb(var(--rtk-colors-text-1000, 255 255 255));\n}\n\n.search-container {\n  display: flex;\n  flex-shrink: 0;\n  flex-grow: 0;\n  flex-basis: auto;\n  align-items: center;\n  padding-top: var(--rtk-space-3, 12px);\n  padding-bottom: var(--rtk-space-3, 12px);\n  padding-left: var(--rtk-space-2, 8px);\n  padding-right: var(--rtk-space-2, 8px);\n  border-bottom: var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-700, 44 44 44));\n}\n\n.search-container rtk-icon {\n  margin-left: calc(var(--rtk-space-8, 32px) * -1);\n  height: var(--rtk-space-5, 20px);\n  width: var(--rtk-space-5, 20px);\n  color: rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76));\n}\n\n.channels-container {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  overflow-y: auto;\n}\n\nrtk-avatar {\n  height: var(--rtk-space-4, 16px) !important;\n  width: var(--rtk-space-4, 16px) !important;\n  overflow: clip;\n  border-radius: 9999px;\n  padding: var(--rtk-space-2, 8px);\n  font-size: 12px;\n}\n\n.channel {\n  flex-shrink: 0;\n  padding-top: var(--rtk-space-2, 8px);\n  padding-bottom: var(--rtk-space-2, 8px);\n  box-sizing: border-box;\n  border-width: var(--rtk-border-width-none, 0);\n  border-style: none;\n  background-color: transparent;\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--rtk-space-2, 8px);\n  width: 100%;\n  padding-left: var(--rtk-space-2, 8px);\n  padding-right: var(--rtk-space-3, 12px);\n  color: rgb(var(--rtk-colors-text-1000, 255 255 255));\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n\n.channel:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));\n}\n\n.channel .channel-data {\n  flex: 1 1 0%;\n  align-items: center;\n  justify-content: space-between;\n  display: flex;\n  gap: var(--rtk-space-2, 8px);\n}\n\n.channel .name {\n  font-size: 16px;\n}\n\n.channel .name, \n  .channel .last-message {\n  max-width: var(--rtk-space-40, 160px);\n  text-align: left;\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 1;\n}\n\n.channel .no-message {\n  font-style: italic;\n}\n\n.channel .avatar-icon {\n  height: var(--rtk-space-4, 16px);\n  width: var(--rtk-space-4, 16px);\n  padding: var(--rtk-space-2, 8px);\n  color: rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));\n  overflow: clip;\n  border-radius: 9999px;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));\n}\n\n.channel time, \n  .channel .last-message {\n  font-size: 12px;\n  color: rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76));\n}\n\n.channel.active {\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-bg-opacity));\n  color: rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));\n}\n\n.channel.active .unread-count {\n  background-color: rgb(var(--rtk-colors-text-on-brand-800, var(--rtk-colors-text-800, 255 255 255 / 0.76)));\n  --tw-text-opacity: 1;\n  color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-text-opacity));\n}\n\n.channel.active time {\n  color: rgb(var(--rtk-colors-text-on-brand-800, var(--rtk-colors-text-800, 255 255 255 / 0.76)));\n}\n\n.channel.active .last-message {\n  color: rgb(var(--rtk-colors-text-on-brand-700, var(--rtk-colors-text-700, 255 255 255 / 0.64)));\n}\n\n.channel.active rtk-avatar {\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));\n  color: rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));\n}\n\n.col {\n  gap: var(--rtk-space-1, 4px);\n  display: flex;\n  flex-direction: column;\n}\n\n.channel-meta {\n  flex-shrink: 0;\n  align-items: flex-end;\n}\n\n@keyframes slide-down {\n  from {\n    transform: translateY(-50px);\n  }\n  to {\n    transform: translateY(0%);\n  }\n}\n";
 const RtkChannelSelectorViewStyle0 = rtkChannelSelectorViewCss;
 
 var __decorate$g = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -201,11 +200,11 @@ const RtkChannelSelectorView = class {
     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: {
+        return (h(Host, { key: '2c491dbe0ac19cb386f0880fff81f4501648a6ae' }, this.viewAs === 'list' && h("slot", { key: '0e87d59c7522543b19711813474738f75a0e02fe', name: "header" }), shouldShowDropdown && (h("div", { key: 'c60692c7f75aa9febd73c134cd79aab020f7c2a5', 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) => {
+            } }, !this.disableSearch && (h("div", { key: '74c50b2fad4cba26a20278f87c77a1672a1d748d', class: "search-container", ref: (el) => (this.$searchEl = el) }, h("input", { key: 'ff22698874ed7df9d91e72cb485ec2901ddf2b3b', type: "text", placeholder: this.t('chat.search_conversations'), value: this.searchQuery, onInput: (e) => (this.searchQuery = e.target.value) }), h("rtk-icon", { key: '9c8a9dffc0cea5e56aeb828ee198d0582024f1fa', icon: this.iconPack.search }))), h("div", { key: '04607e8d3cd62f4e6ca10c2748d6e100a4df4039', 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,
@@ -213,8 +212,8 @@ const RtkChannelSelectorView = 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 })))));
+        })))), this.viewAs === 'dropdown' && (h("button", { key: 'f710577dda08fe51f169c85318b9c51b89e765bb', class: "dropdown-trigger", onClick: this.toggleDropdown }, h("span", { key: '9bebec13a0bacb5651ef598ff47b96a2903ccf0f' }, h("rtk-icon", { key: '0ec4a41bcb7fa3086cdeacc0d6671c23c43a857f', icon: this.iconPack.participants }), this.selectedChannelId &&
+            `${this.t('to')} ${this.getChannelById(this.selectedChannelId).name}`, this.getTotalUnreads() > 0 && (h("div", { key: '043033c796d39c07a290350c5b7f92eafe03bbd2', class: "unread-count" }, this.getTotalUnreads()))), h("rtk-icon", { key: '12a2a92172d5741ac6ee99a39ee83158b98a8745', icon: this.showDropdown ? this.iconPack.chevron_up : this.iconPack.chevron_down })))));
     }
     get $el() { return getElement(this); }
 };
@@ -226,7 +225,7 @@ __decorate$g([
 ], 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 rtkChatCss = ":host {\n  line-height: initial;\n  font-family: var(--rtk-font-family, sans-serif);\n\n  font-feature-settings: normal;\n  font-variation-settings: normal;\n}\n\np {\n  margin: var(--rtk-space-0, 0px);\n  padding: var(--rtk-space-0, 0px);\n}\n\n.scrollbar {\n  /* For Firefox */\n  scrollbar-width: thin;\n  scrollbar-color: var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n    var(--rtk-scrollbar-background, transparent);\n}\n\n/* For WebKit */\n.scrollbar::-webkit-scrollbar {\n  height: var(--rtk-space-1\\.5, 6px);\n  width: var(--rtk-space-1\\.5, 6px);\n  border-radius: 9999px;\n  background-color: var(--rtk-scrollbar-background, transparent);\n}\n\n.scrollbar::-webkit-scrollbar-thumb {\n  border-radius: 9999px;\n  background-color: var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)));\n}\n\n\n:host {\n  display: flex;\n  height: 100%;\n  width: 100%;\n  flex-direction: column;\n  font-size: 14px;\n  position: relative;\n  color: rgb(var(--rtk-colors-text-1000, 255 255 255));\n}\n\nh3 {\n  margin: var(--rtk-space-0, 0px);\n  display: flex;\n  height: var(--rtk-space-12, 48px);\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n  font-weight: 400;\n  color: rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));\n  text-align: center;\n}\n\n#dropzone {\n  position: absolute;\n  top: var(--rtk-space-0, 0px);\n  right: var(--rtk-space-0, 0px);\n  bottom: var(--rtk-space-0, 0px);\n  left: var(--rtk-space-0, 0px);\n  z-index: 10;\n  display: none;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));\n  color: rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64));\n}\n\n#dropzone.active {\n  display: flex;\n  animation: 0.2s slide-up ease-in;\n}\n\nrtk-chat-messages-ui,\nrtk-chat-messages-ui-paginated {\n  flex: 1 0 0;\n}\n\nrtk-chat-composer-view {\n  margin: var(--rtk-space-2, 8px);\n}\n\n.chat-container {\n  display: flex;\n  height: 100%;\n  width: 100%;\n  flex-direction: row;\n  container-type: size;\n  container-name: chatcontainer;\n}\n\n@container chatcontainer (height < 360px) {\n  rtk-channel-selector-view {\n    height: var(--rtk-space-8, 32px);\n    min-height: 24px;\n  }\n}\n\n.chat {\n  display: flex;\n  flex: 1 1 0%;\n  flex-direction: column;\n}\n\n.banner {\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n\n.banner .welcome-new-channel {\n  width: var(--rtk-space-48, 192px);\n}\n\n.banner .create-channel-illustration {\n  height: var(--rtk-space-40, 160px);\n  width: var(--rtk-space-40, 160px);\n}\n\n.channel-selector-header {\n  box-sizing: border-box;\n  height: var(--rtk-space-16, 64px);\n  padding: var(--rtk-space-4, 16px);\n  display: flex;\n  justify-content: space-between;\n  border-bottom: var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-700, 44 44 44));\n}\n\n.channel-selector-header .channel-create-btn {\n  width: var(--rtk-space-8, 32px);\n  justify-content: center;\n}\n\n.channel-selector-header .channel-create-btn:hover {\n  --tw-text-opacity: 1;\n  color: rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-text-opacity));\n}\n\n.view-chats-btn {\n  margin-top: var(--rtk-space-4, 16px);\n}\n\n.selector-container {\n  z-index: 50;\n  width: 100%;\n  max-width: var(--rtk-space-80, 320px);\n  border-right: var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60));\n}\n\n.selector-container.hide {\n  display: none;\n}\n\n.mobile-close-btn {\n  display: none;\n}\n\n.selector-container.mobile {\n  height: 100%;\n  width: 100%;\n  max-width: 100%;\n  position: absolute;\n  top: var(--rtk-space-0, 0px);\n  right: var(--rtk-space-0, 0px);\n  bottom: var(--rtk-space-0, 0px);\n  left: var(--rtk-space-0, 0px);\n  background-color: rgba(var(--rtk-colors-background-1000, 8 8 8) / 0.6);\n  display: flex;\n}\n\n.selector-container.mobile rtk-channel-selector-view {\n  max-width: var(--rtk-space-96, 384px);\n    animation: 0.3s swipe-in;\n}\n\n.selector-container.mobile .mobile-close-btn {\n  margin-top: var(--rtk-space-4, 16px);\n  margin-bottom: var(--rtk-space-4, 16px);\n  margin-left: var(--rtk-space-6, 24px);\n  margin-right: var(--rtk-space-6, 24px);\n  display: block;\n}\n\n.pinned-messages {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\n\n.pinned-messages-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--rtk-space-2, 8px);\n  padding: var(--rtk-space-4, 16px);\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));\n  font-size: 14px;\n  cursor: pointer;\n}\n\n.pinned-messages-header div {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--rtk-space-2, 8px);\n}\n\n.pinned-messages-header rtk-icon {\n  height: var(--rtk-space-3, 12px);\n  width: var(--rtk-space-3, 12px);\n}\n\n.pinned-messages-content {\n  --tw-border-opacity: 1;\n  border-color: rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity));\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));\n  position: absolute;\n  left: var(--rtk-space-0, 0px);\n  top: 100%;\n  z-index: 50;\n  max-height: 30vh;\n  width: 100%;\n  overflow: auto;\n}\n\n.pinned-message {\n  display: flex;\n  cursor: pointer;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--rtk-space-2, 8px);\n  --tw-border-opacity: 1;\n  border-color: rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity));\n  padding: var(--rtk-space-4, 16px);\n  border-bottom-width: var(--rtk-border-width-sm, 1px);\n  border-right-width: var(--rtk-border-width-none, 0);\n  border-left-width: var(--rtk-border-width-none, 0);\n  border-top-width: var(--rtk-border-width-none, 0);\n  border-style: solid;\n}\n\n.pinned-message-avatar {\n  height: var(--rtk-space-6, 24px) !important;\n  width: var(--rtk-space-6, 24px) !important;\n}\n\n@keyframes swipe-in {\n  from {\n    transform: translateX(-100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n";
 const RtkChatStyle0 = rtkChatCss;
 
 var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -263,6 +262,8 @@ const RtkChat = class {
         this.iconPack = defaultIconPack;
         /** Language */
         this.t = useLanguage();
+        /** UI Overrides */
+        this.overrides = defaultOverrides;
         /** disables private chat */
         this.disablePrivateChat = false;
         /** Can current user pin/unpin messages */
@@ -300,6 +301,7 @@ const RtkChat = class {
         this.searchQuery = '';
         this.selectorState = 'hide';
         this.creatingChannel = false;
+        this.isSendingMessage = false;
         this.showPinnedMessages = false;
         this.channelMap = new Map();
         this.onDragOver = (e) => {
@@ -479,12 +481,24 @@ const RtkChat = class {
         };
         this.onNewMessageHandler = async (e) => {
             const message = e.detail;
-            this.meeting.chat.sendMessage(message, this.getRecipientPeerIds());
+            this.isSendingMessage = true;
+            try {
+                await this.meeting.chat.sendMessage(message, this.getRecipientPeerIds());
+            }
+            finally {
+                this.isSendingMessage = false;
+            }
         };
         this.onEditMessageHandler = async (e) => {
             var _a, _b;
-            await ((_b = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.chat) === null || _b === void 0 ? void 0 : _b.editTextMessage(this.editingMessage.id, e.detail, this.editingMessage.channelId));
-            this.editingMessage = null;
+            this.isSendingMessage = true;
+            try {
+                await ((_b = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.chat) === null || _b === void 0 ? void 0 : _b.editTextMessage(this.editingMessage.id, e.detail, this.editingMessage.channelId));
+            }
+            finally {
+                this.isSendingMessage = false;
+                this.editingMessage = null;
+            }
         };
         this.onEditCancel = () => {
             this.editingMessage = null;
@@ -499,9 +513,35 @@ const RtkChat = class {
             }
         };
         this.onDeleteMessage = (event) => {
+            var _a;
             const message = event.detail;
+            if (((_a = this.editingMessage) === null || _a === void 0 ? void 0 : _a.id) === message.id) {
+                this.editingMessage = null;
+            }
+            try {
+                if (typeof localStorage !== 'undefined') {
+                    const keysToRemove = [];
+                    for (let i = 0; i < localStorage.length; i++) {
+                        const key = localStorage.key(i);
+                        if (key && key.startsWith('rtk-chat-edit-') && key.endsWith(`-${message.id}`)) {
+                            keysToRemove.push(key);
+                        }
+                    }
+                    keysToRemove.forEach((key) => localStorage.removeItem(key));
+                }
+            }
+            catch (_b) {
+                // ignore storage access errors
+            }
             this.meeting.chat.deleteMessage(message.id);
         };
+        this.onMessageEdit = (event) => {
+            const message = event.detail;
+            if (message.type !== 'text')
+                return;
+            this.replyMessage = null;
+            this.editingMessage = message;
+        };
         this.getPrivateChatRecipients = () => {
             const participants = this.getFilteredParticipants().map((participant) => {
                 const key = generateChatGroupKey([participant.userId, this.meeting.self.userId]);
@@ -521,13 +561,25 @@ const RtkChat = class {
             };
             return [everyone, ...participants];
         };
-        this.onTogglePinnedMessages = () => {
-            this.showPinnedMessages = !this.showPinnedMessages;
+        this.getPinnedMessageLabel = (message) => {
+            if (message.type === 'text')
+                return message.message;
+            if (message.type === 'image')
+                return 'Image';
+            if (message.type === 'file')
+                return 'File';
+            return '';
         };
         this.renderPinnedMessagesHeader = () => {
             if (this.meeting.chat.pinned.length === 0)
                 return null;
-            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})`)));
+            /**
+             * We do not display a picture against the avatar because the chatMessage API does not provide it.
+             */
+            return (h("div", { class: "pinned-messages" }, h("div", { class: "pinned-messages-header", onClick: () => (this.showPinnedMessages = !this.showPinnedMessages) }, h("div", null, h("rtk-icon", { icon: this.iconPack.pin, size: "sm" }), this.t('chat.pinned_msgs'), ` (${this.meeting.chat.pinned.length})`), h("rtk-icon", { icon: this.showPinnedMessages ? this.iconPack.chevron_up : this.iconPack.chevron_down, size: "sm" })), this.showPinnedMessages && (h("div", { class: "pinned-messages-content scrollbar" }, this.meeting.chat.pinned.map((message) => {
+                const label = this.getPinnedMessageLabel(message);
+                return (h("div", { class: "pinned-message" }, h("rtk-avatar", { class: "pinned-message-avatar", participant: { name: message.displayName, picture: '' }, size: "sm" }), h("span", null, label.length > 20 ? `${label.substring(0, 20)}...` : label)));
+            })))));
         };
     }
     connectedCallback() {
@@ -662,7 +714,7 @@ const RtkChat = class {
         this.onChannelChanged(e);
     }
     renderComposerUI() {
-        var _a, _b, _c;
+        var _a;
         if (this.chatRecipientId === 'everyone') {
             if (!this.canSendTextMessage && !this.canSendFiles)
                 return null;
@@ -674,18 +726,21 @@ const RtkChat = class {
         const uiProps = { iconPack: this.iconPack, t: this.t, size: this.size };
         const message = this.editingMessage ? this.editingMessage.message : '';
         const quotedMessage = this.replyMessage ? this.replyMessage.message : '';
-        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" })));
+        const draftStorageKey = this.selectedChannelId
+            ? `rtk-chat-draft-${this.selectedChannelId}`
+            : 'rtk-chat-draft';
+        const editStorageKey = this.editingMessage
+            ? `rtk-chat-edit-${(_a = this.selectedChannelId) !== null && _a !== void 0 ? _a : 'no-channel'}-${this.editingMessage.id}`
+            : 'rtk-chat-edit';
+        const storageKey = this.editingMessage ? editStorageKey : draftStorageKey;
+        return (h("rtk-chat-composer-view", Object.assign({ message: message, storageKey: storageKey, quotedMessage: quotedMessage, isEditing: !!this.editingMessage, isSending: this.isSendingMessage, canSendTextMessage: this.isTextMessagingAllowed(), canSendFiles: this.isFileMessagingAllowed(), disableEmojiPicker: this.overrides.disableEmojiPicker, maxLength: this.meeting.chat.maxTextLimit, rateLimits: this.meeting.chat.rateLimits, inputTextPlaceholder: this.t('chat.message_placeholder'), onNewMessage: this.onNewMessageHandler, onEditMessage: this.onEditMessageHandler, onEditCancel: this.onEditCancel, onQuotedMessageDismiss: this.onQuotedMessageDismiss }, uiProps), 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()))));
+        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, onEditMessage: this.onMessageEdit, onDeleteMessage: this.onDeleteMessage, size: this.size, iconPack: this.iconPack, t: this.t }), this.renderComposerUI()))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -706,6 +761,9 @@ __decorate$f([
 __decorate$f([
     SyncWithStore()
 ], RtkChat.prototype, "t", void 0);
+__decorate$f([
+    SyncWithStore()
+], RtkChat.prototype, "overrides", 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";
@@ -734,6 +792,7 @@ const RtkChatComposerView = class {
         this.onQuotedMessageDismiss = createEvent(this, "quotedMessageDismiss", 7);
         /** Whether user can send text messages */
         this.canSendTextMessage = true;
+        this.isSending = false;
         /** Whether user can send file messages */
         this.canSendFiles = true;
         /** Message to be pre-populated */
@@ -794,15 +853,7 @@ const RtkChatComposerView = class {
             messageLimits.messagesSent += 1;
             this.checkRateLimitBreached(currentTime);
             if (message.length > 0) {
-                if (this.quotedMessage.length !== 0) {
-                    this.onNewMessage.emit({
-                        type: 'text',
-                        message,
-                    });
-                }
-                else {
-                    this.onNewMessage.emit({ type: 'text', message });
-                }
+                this.onNewMessage.emit({ type: 'text', message });
                 this.cleanup();
             }
         };
@@ -886,17 +937,17 @@ const RtkChatComposerView = class {
     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: () => {
+        return (h(Host, { key: '2df23422579c855ced1cb6d24bb95786a1326baf' }, this.canSendTextMessage && this.isEmojiPickerOpen && (h("rtk-emoji-picker", Object.assign({ key: 'a7ed280a636d0207f58f0ad13f79c1eaed52ab9c', part: "emoji-picker", onPickerClose: () => {
                 this.isEmojiPickerOpen = false;
             }, onRtkEmojiClicked: (e) => {
                 this.textMessage += e.detail;
                 this.$textComposer.setText(this.textMessage, true);
-            } }, uiProps))), 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: () => {
+            } }, uiProps))), h("slot", { key: '759df2a2029fbba963cfc26cd871771881dd6c5e', name: "chat-addon" }), this.quotedMessage && this.quotedMessage.length !== 0 && (h("div", { key: '413be05a7374fc76f790ad3f6f5bef5a56a6ef97', class: "quoted-message-container", part: "quoted-message-container" }, h("div", { key: '7fb6b571103c675dca202b74bd07fd55062dab70', class: "quoted-message scrollbar" }, h("rtk-text-message-view", { key: '3997aa719a746234c5641e976dd0c27e68b69dae', text: this.quotedMessage, isMarkdown: true })), h("div", { key: 'f76ec54e3d67d6957d5d152b144b22d8cc122660' }, h("rtk-icon", { key: '897b52fc41814d2cb8beeb461c36c9843cb2869e', "aria-label": this.t('dismiss'), class: "dismiss", icon: this.iconPack.dismiss, onClick: this.onQuotedMessageDismissHandler })))), h("div", { key: '35447eb1fffffd372c231bc76ce741e483e7f26a', class: "composer-container" }, h("div", { key: '0f8f198df49fcc27f6c85b8d6909eb2a7c00e142', class: "composers" }, this.fileToUpload && (h("rtk-draft-attachment-view", Object.assign({ key: '9d325d05fecb12ecb41f02e54561d2e1b59b2c2f' }, uiProps, { attachment: this.fileToUpload, onDeleteAttachment: () => (this.fileToUpload = null) }))), !this.fileToUpload && (h("rtk-text-composer-view", { key: 'fbc870bb9d9c2418e528e64273edb67846e23e17', value: this.textMessage, placeholder: this.inputTextPlaceholder, onTextChange: this.onTextChangeHandler, keyDownHandler: this.onKeyDownHandler, maxLength: (_a = this.maxLength) !== null && _a !== void 0 ? _a : MAX_TEXT_LENGTH, rateLimitBreached: this.rateLimitsBreached, t: this.t, iconPack: this.iconPack, ref: (el) => (this.$textComposer = el) }))), h("div", { key: '20191403531eb87bca86d13387c7937153a4c99e', class: "chat-buttons", part: "chat-buttons" }, h("div", { key: '4914a61fea3f502dc14778a237e9ce35a97e3afc', class: "left", part: "chat-buttons-left" }, !this.fileToUpload && !this.isEditing && (h("div", { key: '76c843588f2f7d90f5e60a1e44955309026eda27' }, this.canSendFiles && [
+            h("rtk-file-picker-button", Object.assign({ key: 'cbb6f17b22f10b48ada27a4b4da3c1d5b2c7e320' }, uiProps, { onFileChange: (event) => this.onFileUploadHandler('file', event.detail) })),
+            h("rtk-file-picker-button", Object.assign({ key: '0868162a2da021dd4175e977adf47d72ca54044a', filter: "image/*", label: this.t('chat.send_img'), icon: "image", onFileChange: (event) => this.onFileUploadHandler('image', event.detail) }, uiProps)),
+        ], this.canSendTextMessage && !this.disableEmojiPicker && (h("rtk-emoji-picker-button", Object.assign({ key: 'a73378b5495dc3bfcde7dba335f674292ee6a96c', 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 }))))))))));
+            } }, uiProps))), h("slot", { key: '31208ad279dec430da4527d22730de8e418bc722', name: "chat-buttons" })))), h("div", { key: '04fcdd3f690548cbf1e257ffb2982785e557726b', class: "right", part: "chat-buttons-right" }, !this.isEditing && (h("rtk-tooltip", { key: '367bf710673a0a2276f46d52289409abb77fe27b', variant: "primary", label: this.t('chat.send_msg'), delay: 2000 }, h("rtk-button", { key: 'c677e3026636c375ed7eee411c596f6d2a802794', kind: "icon", disabled: this.disableSendButton || this.isSending, onClick: () => this.handleSendMessage(), title: this.t('chat.send_msg') }, this.isSending ? (h("rtk-spinner", { size: "sm" })) : (h("rtk-icon", { icon: this.iconPack.send }))))), this.isEditing && (h("div", { key: '1e09e8868e4ae048b36bc8198b8aa1de92209a00', class: "edit-buttons" }, h("rtk-tooltip", { key: '29ff7a39bd168169fa7d104357b529a2c9efe0fd', variant: "secondary", label: this.t('cancel'), delay: 2000 }, h("rtk-button", { key: '27cf5353d0e8c2620fd8d4213994a9dcc83f83f3', kind: "icon", variant: "secondary", onClick: () => this.handleEditCancel(), title: this.t('cancel') }, h("rtk-icon", { key: 'aeb4c9df3993c6cebf952f64f6676eb8a3866bb0', icon: this.iconPack.dismiss }))), h("rtk-tooltip", { key: '835195d0f51a1db81e66a1b2d9076a71f2aaee4e', variant: "primary", label: this.t('chat.update_msg'), delay: 2000 }, h("rtk-button", { key: 'd524f01ba5d7ca52224d39e23e7f963972ad80c9', kind: "icon", onClick: () => this.handleEditMessage(), title: this.t('chat.send_msg') }, this.isSending ? (h("rtk-spinner", { size: "sm" })) : (h("rtk-icon", { icon: this.iconPack.checkmark })))))))))));
     }
 };
 __decorate$e([
@@ -925,6 +976,7 @@ const RtkChatMessagesUiPaginated = class {
         registerInstance(this, hostRef);
         this.editMessageInit = createEvent(this, "editMessageInit", 7);
         this.onPinMessage = createEvent(this, "pinMessage", 7);
+        this.onEditMessage = createEvent(this, "editMessage", 7);
         this.onDeleteMessage = createEvent(this, "deleteMessage", 7);
         this.stateUpdate = createEvent(this, "rtkStateUpdate", 7);
         /** Icon pack */
@@ -975,22 +1027,18 @@ const RtkChatMessagesUiPaginated = class {
         };
         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 = message.userId === this.meeting.self.userId;
-            if (this.meeting.self.permissions.pinParticipant) {
+            const messageBelongsToSelf = message.userId === this.meeting.self.userId;
+            actions.push({
+                id: 'pin_message',
+                label: message.pinned ? this.t('unpin') : this.t('pin'),
+                icon: this.iconPack.pin,
+            });
+            if (messageBelongsToSelf) {
                 actions.push({
-                    id: 'pin_message',
-                    label: message.pinned ? this.t('unpin') : this.t('pin'),
-                    icon: this.iconPack.pin,
+                    id: 'edit_message',
+                    label: this.t('chat.edit_msg'),
+                    icon: this.iconPack.edit,
                 });
-            }
-            if (canDelete) {
                 actions.push({
                     id: 'delete_message',
                     label: this.t('chat.delete_msg'),
@@ -1004,6 +1052,9 @@ const RtkChatMessagesUiPaginated = class {
                 case 'pin_message':
                     this.onPinMessage.emit(message);
                     break;
+                case 'edit_message':
+                    this.onEditMessage.emit(message);
+                    break;
                 case 'delete_message':
                     this.onDeleteMessage.emit(message);
                     break;
@@ -1032,9 +1083,9 @@ const RtkChatMessagesUiPaginated = class {
             }
             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: () => {
+            return (h("div", null, h("div", { class: "message-wrapper", id: message.id }, h("rtk-message-view", { messageType: message.type, pinned: message.pinned, isEdited: message.isEdited, time: message.time, actions: this.getMessageActions(message), authorName: message.displayName, isSelf: isSelf, avatarUrl: displayPicture, hideAuthorName: isContinued, viewType: viewType, variant: "bubble", onAction: (event) => this.onMessageActionHandler(event.detail, message) }, 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)
@@ -1080,7 +1131,7 @@ const RtkChatMessagesUiPaginated = class {
         this.lastReadMessageIndex = -1;
     }
     render() {
-        return (h(Host, { key: '732dea776303ba428aedc72608516a4e4dfc1591' }, h("rtk-paginated-list", { key: '6bc3cd1373ff487b897d3ca7a5bfbccfdbaa90da', 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: 'f3cc795b3b39aa48f87f9908e3b205e2db6439b4' }))));
+        return (h(Host, { key: '1cbb364021b79bd756621987ac03c2e852acf3bd' }, h("rtk-paginated-list", { key: 'b7896890b5e3ea9a190bfa9c86c825233b635aa4', ref: (el) => (this.$paginatedListRef = el), pageSize: this.pageSize, pagesAllowed: 3, fetchData: this.getChatMessages, createNodes: this.createChatNodes, selectedItemId: this.selectedChannelId, emptyListLabel: this.t('chat.empty_channel') }, h("slot", { key: 'b1255713fc172c4e35385021809d391a5fdf9acc' }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -1153,7 +1204,7 @@ const RtkDraftAttachmentView = class {
         this.onAttachmentChange();
     }
     render() {
-        return (h(Host, { key: 'b23eb412c60a62f542aec0e3cd3b99fc72de48f0' }, h("div", { key: '04251f8d4b13325f8474110c89733369bd8904f2', class: "preview-overlay" }, h("div", { key: '51963510a704b19e7c591ea177018bae6e0317f5', class: "preview" }, h("rtk-tooltip", { key: '3a2167ea7a02f1d744462826084f0fef5c607ac9', label: this.t('chat.cancel_upload') }, h("rtk-button", { key: '634c9a7e0962ed82c36519e919eb597c9b603f51', variant: "secondary", kind: "icon", onClick: this.onDeleteClickHandler }, h("rtk-icon", { key: 'b936e54ae44e1d54b73adf38a92551fbea0299c5', 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)))))));
+        return (h(Host, { key: 'f6ede093bcdf8100807baab4de2a296fc4960a07' }, h("div", { key: 'b19bbe9b2ea58ea4adccc2028a1b24ea6bc9f0a9', class: "preview-overlay" }, h("div", { key: 'cbb2bfcb3a50e6e7fbfd4109eb340ba51d6a162d', class: "preview" }, h("rtk-tooltip", { key: '15b50c547470b0fa22014e0992a1c7e26b234573', label: this.t('chat.cancel_upload') }, h("rtk-button", { key: '940332a51747af3368ffec497d5ef76fa64ecf75', variant: "secondary", kind: "icon", onClick: this.onDeleteClickHandler }, h("rtk-icon", { key: 'cc04b0ac70753e970ff638f187ad5f702dc3656b', 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"]
@@ -1238,7 +1289,7 @@ const RtkEmojiPicker = class {
         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: 'e099d5996a16c659de17ca9a36fcd79a9f02f400' }, h("div", { key: '2a3e300c9625b877feb2b6780df7d1a9851cb7f3', class: 'close-parent' }, h("rtk-button", { key: '7ca8421704136d09d107d1f7392ba393d5f59a9a', 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: '040069093f7243bf5075d55b2c081c564d885a8f', icon: this.iconPack.dismiss }))), h("div", { key: '372a32be35dea5200323720e221424b5138cc4ab', class: 'emoji-parent' }, h("input", { key: 'fae2be13d736adbb99212146498f00d4f395636e', value: this.filterVal, onInput: (event) => this.handleInputChange(event.target), placeholder: this.t('search'), ref: (el) => (this.inputElement = el) }), this.mapEmojiList())));
+        return (h(Host, { key: '6581d26d75a7b869d0ba00243ec74ee06b927e7d' }, h("div", { key: '3705d8c557ac3e05769171998e9176e7e40a232c', class: 'close-parent' }, h("rtk-button", { key: 'b437e579cb828a709de255ddfa6b751e4bdfbe51', variant: "ghost", kind: "icon", class: "close", onClick: () => { var _a; return (_a = this.pickerClose) === null || _a === void 0 ? void 0 : _a.emit(); }, "aria-label": this.t('close') }, h("rtk-icon", { key: '7fac79a21c6be57156d17ceeff9ceb2834bbf709', icon: this.iconPack.dismiss }))), h("div", { key: '46cb2af6654ef36b7258baf47e3cd9e5bd60bf89', class: 'emoji-parent' }, h("input", { key: 'cfde33638d531f9bac1b1bf25d966a369f4dfb38', value: this.filterVal, onInput: (event) => this.handleInputChange(event.target), placeholder: this.t('search'), ref: (el) => (this.inputElement = el) }), this.mapEmojiList())));
     }
 };
 __decorate$b([
@@ -1271,7 +1322,7 @@ const RtkEmojiPickerButton = class {
         this.t = useLanguage();
     }
     render() {
-        return (h("rtk-tooltip", { key: 'bcde14fb2c3a6544882502e65ffda7a6b3b6f13d', label: this.t('chat.send_emoji') }, h("rtk-button", { key: 'd82fa78c4ffe48c24131a6e38f087548f540fefa', variant: "ghost", kind: "icon", class: { active: this.isActive }, title: this.t('chat.send_emoji') }, h("rtk-icon", { key: '791bbe2537f1aeb064c5e9ccbbf4af37b706ec2a', icon: this.iconPack.emoji_multiple }))));
+        return (h("rtk-tooltip", { key: '45ef1f18da6d1ecc3c02882590cd22e930461562', label: this.t('chat.send_emoji') }, h("rtk-button", { key: '6504abab2f1c6537443699c53a8cbdcf13530cba', variant: "ghost", kind: "icon", class: { active: this.isActive }, title: this.t('chat.send_emoji') }, h("rtk-icon", { key: 'd730c81abce72d9c3226f1f666941e1136bee77f', icon: this.iconPack.emoji_multiple }))));
     }
 };
 __decorate$a([
@@ -1302,7 +1353,7 @@ const RtkFileMessageView = class {
         this.iconPack = defaultIconPack;
     }
     render() {
-        return (h("div", { key: 'cdd46a1be912f807688dc86671dddd2fa5b9e7c9', class: "file" }, h("rtk-button", { key: '20bd6c448ec64902989cd742a8f18de32e368194', variant: "secondary", kind: "icon", onClick: () => downloadFile(sanitizeLink(this.url), { name: this.name, fallbackName: 'file' }), part: "button" }, h("rtk-icon", { key: '11ac30db5146132be8aaba67a79f66f8aba7bb8d', icon: this.iconPack.download })), h("div", { key: '342dd8daa944a5857a6519339b4d3bfb6c369eda', class: "file-data" }, h("div", { key: 'e161743b75677b1e81d09d7c373be494ccf8411a', class: "name" }, this.name), h("div", { key: '99f2d8d77ef3c129aa0c229260f6e79901ce268c', class: "file-data-split" }, h("div", { key: '7b9beadca2a810c151fb1ad43ee7c47ba451a37a', class: "ext" }, getExtension(this.name)), h("span", { key: 'd55f69a96bbe26c262461fa87f1a0a506854cf59', class: "divider" }), h("div", { key: 'cad33d263ab75aeb3083886e83063b8ccb2ea976', class: "size" }, getFileSize(this.size))))));
+        return (h("div", { key: '5cc29b4780f581a2f8b045e5051bcc66f3fdaf55', class: "file" }, h("rtk-button", { key: '4100b47bc1d72f08ec5fe645291bfbb58e3a6486', variant: "secondary", kind: "icon", onClick: () => downloadFile(sanitizeLink(this.url), { name: this.name, fallbackName: 'file' }), part: "button" }, h("rtk-icon", { key: '52ae14abb7c27b89861d5ba4c907d606257628c9', icon: this.iconPack.download })), h("div", { key: '02c9ad8d173172a85cc474273a966607d456360e', class: "file-data" }, h("div", { key: '6ceca21685d04f175006ba35a6de194cc98879ad', class: "name" }, this.name), h("div", { key: 'b07d07bcaedee3fd6fbcfe81ce2f6bf757655b5f', class: "file-data-split" }, h("div", { key: '280635ef486de02bc68ca3e774be14fa5a461d1c', class: "ext" }, getExtension(this.name)), h("span", { key: '84f72d8b37b7d15c257faed036b76c737eec780b', class: "divider" }), h("div", { key: '1b88f48f51afe3fceb57920c3d17f586e848a25f', class: "size" }, getFileSize(this.size))))));
     }
 };
 __decorate$9([
@@ -1358,7 +1409,7 @@ const RtkFilePickerButton = class {
     render() {
         const label = this.label || this.t('chat.send_file');
         const icon = this.iconPack[this.icon];
-        return (h("rtk-tooltip", { key: '78ef1fd3a42656601c94561bbfc63f888d8180d3', label: label }, h("rtk-button", { key: 'a0a82e689c2e3a344936db1b3253e36def3a0ce5', variant: "ghost", kind: "icon", onClick: () => this.uploadFile(), title: label }, h("rtk-icon", { key: '1651a9f460e3851ff5296f05cf08554f9da21703', icon: icon }))));
+        return (h("rtk-tooltip", { key: '057a0a5a714dbbde228e3481e53adea4f88fb3ad', label: label }, h("rtk-button", { key: '04193df1053b14687fb9464a122b9158707bdda1', variant: "ghost", kind: "icon", onClick: () => this.uploadFile(), title: label }, h("rtk-icon", { key: 'ed2fce30b93dfce9dd6b967d5993c93496cf3388', icon: icon }))));
     }
 };
 __decorate$8([
@@ -1389,7 +1440,7 @@ const RtkIcon = class {
         this.size = 'lg';
     }
     render() {
-        return (h(Host, { key: 'fbacb1ee3dd4c1ca7aa612f08e938601df73036c' }, h("div", { key: '04c026967cb7aa3acb3fba09fcf5b0d33f45e2b0', class: "icon-wrapper", innerHTML: parseIcon(this.icon), part: "wrapper" })));
+        return (h(Host, { key: 'fdbe6fd9647bae7cfdf02ba6a250aa3c0c39ad85' }, h("div", { key: '114baca2f9ce9376e69073b40170473cc359915f', class: "icon-wrapper", innerHTML: parseIcon(this.icon), part: "wrapper" })));
     }
 };
 RtkIcon.style = RtkIconStyle0;
@@ -1418,7 +1469,7 @@ const RtkImageMessageView = class {
         this.status = 'loading';
     }
     render() {
-        return (h("div", { key: '47b2dd8f8dfc0d2aa20e80b513f802e1ebc09153', class: { image: true, loaded: this.status === 'loaded' } }, h("img", { key: 'fba4cfc015beb86040ec74b2a44e2163744a67c6', src: sanitizeLink(this.url), onLoad: () => {
+        return (h("div", { key: '066606e6ae62634b2466bb46b453e0c2d91b17ea', class: { image: true, loaded: this.status === 'loaded' } }, h("img", { key: 'f042e5d3c1a6341e9fc0845e6643016f1be5b5f7', src: sanitizeLink(this.url), onLoad: () => {
                 this.status = 'loaded';
             }, onError: () => {
                 this.status = 'errored';
@@ -1426,9 +1477,9 @@ const RtkImageMessageView = class {
                 if (this.status === 'loaded') {
                     this.onPreview.emit(this.url);
                 }
-            } }), this.status === 'loading' && (h("div", { key: '4da0a3ab39d782e9affe7702a19232747bb4581c', class: "image-spinner", title: this.t('chat.img.loading'), "aria-label": this.t('chat.img.loading') }, h("rtk-spinner", { key: 'dea7afe2c92dd5c7c71620bc7b9089f743ef1aa2', iconPack: this.iconPack }))), this.status === 'errored' && (h("div", { key: 'ab303ce11b7182d20c64b00638a1c8be59aea774', class: "image-errored", title: this.t('chat.error.img_not_found'), "aria-label": this.t('chat.error.img_not_found') }, h("rtk-icon", { key: 'e14eb63cc4b2d18a5abd921e25ef305095f61c17', icon: this.iconPack.image_off }))), this.status === 'loaded' && (h("div", { key: 'ccceaa5cc5821ce9b4ddab742001cee78135636a', class: "actions" }, h("rtk-button", { key: 'de49516247d9655cc74afcd58bc50771e2594dca', class: "action", variant: "secondary", kind: "icon", onClick: () => {
+            } }), this.status === 'loading' && (h("div", { key: 'd4a5030468fbf70afae62bd55ae4d0fa989e15c2', class: "image-spinner", title: this.t('chat.img.loading'), "aria-label": this.t('chat.img.loading') }, h("rtk-spinner", { key: '216aba361a46cc100e7d26cc2daf1ffb0948d695', iconPack: this.iconPack }))), this.status === 'errored' && (h("div", { key: '01f5da8f70872c9fa22dc9a9b70b046b0001d05b', class: "image-errored", title: this.t('chat.error.img_not_found'), "aria-label": this.t('chat.error.img_not_found') }, h("rtk-icon", { key: '0f7e6fed2730f6366d07fc6afddb2b247e9b7d3a', icon: this.iconPack.image_off }))), this.status === 'loaded' && (h("div", { key: '5ac0e61c65a88a8d6b9ee54c900b856854d1b84b', class: "actions" }, h("rtk-button", { key: 'fd83dfecd7b5d9c3976374c3c55731b1f026fc0a', class: "action", variant: "secondary", kind: "icon", onClick: () => {
                 this.onPreview.emit(this.url);
-            } }, h("rtk-icon", { key: 'bd1ea608e4846d994a418236dca7856570bd689d', icon: this.iconPack.full_screen_maximize })), h("rtk-button", { key: '266a860a4ab4d6cf76bd89bb35c987efbc89a593', class: "action", variant: "secondary", kind: "icon", onClick: () => downloadFile(this.url, { fallbackName: 'image' }) }, h("rtk-icon", { key: 'ec26862ff95e116d519280c7e62ed7a7e1ede273', icon: this.iconPack.download }))))));
+            } }, h("rtk-icon", { key: '3ca7384fa28e6716345acacf9225ae9471ff8d63', icon: this.iconPack.full_screen_maximize })), h("rtk-button", { key: '198787808c389e4df48d3609a53c2d27cf2e7fb3', class: "action", variant: "secondary", kind: "icon", onClick: () => downloadFile(this.url, { fallbackName: 'image' }) }, h("rtk-icon", { key: 'f38fe3da48d1fc854001c719164c95f0673808c5', icon: this.iconPack.download }))))));
     }
 };
 __decorate$7([
@@ -1519,7 +1570,7 @@ const RtkMarkdownView = class {
         const slicedMessage = this.text.slice(0, this.maxLength);
         const withReply = extractReplyBlock(slicedMessage, true);
         const withoutReply = stripOutReplyBlock(slicedMessage);
-        return (h("p", { key: 'c33735507a0798dffc360f01793bc7b0caaac159' }, withReply.length !== 0 && h("blockquote", { key: 'c0a4271ee4c843b6e73c8300a8026a3ec8dd5fe3' }, this.renderMessage(withReply)), withoutReply.length !== 0 && this.renderMessage(withoutReply)));
+        return (h("p", { key: '787e6d3177f4faf1c8dcd7c73d83a6de9c57b42b' }, withReply.length !== 0 && h("blockquote", { key: '1c4b82fb870994e6707d35adcd5e6f2f0e65dd26' }, this.renderMessage(withReply)), withoutReply.length !== 0 && this.renderMessage(withoutReply)));
     }
 };
 RtkMarkdownView.style = RtkMarkdownViewStyle0;
@@ -1606,6 +1657,8 @@ const RtkMeeting = class {
         this.gridLayout = 'row';
         /** Icon pack */
         this.iconPack = defaultIconPack;
+        /** UI Kit Overrides */
+        this.overrides = defaultOverrides;
         this.handleChangingMeeting = (destinationMeetingId) => {
             const currentStates = (this.peerStore || uiStore).state.states;
             this.updateStates({
@@ -1634,6 +1687,7 @@ const RtkMeeting = class {
         this.iconPackChanged(this.iconPack);
         this.tChanged(this.t);
         this.configChanged(this.config);
+        this.overridesChanged(this.overrides);
         this.resizeObserver = new index(() => this.handleResize());
         this.resizeObserver.observe(this.host);
         if (this.applyDesignSystem &&
@@ -1718,6 +1772,7 @@ const RtkMeeting = class {
                 iconPack: this.iconPack,
                 t: this.t,
                 providerId: this.providerId,
+                overrides: deepMerge(Object.assign({}, defaultOverrides), this.overrides),
             });
             // Notify components that peer specific store is now available
             document.dispatchEvent(new CustomEvent('rtkPeerStoreReady', {
@@ -1789,6 +1844,11 @@ const RtkMeeting = class {
             provideRtkDesignSystem(document.documentElement, config.designTokens);
         }
     }
+    overridesChanged(overrides) {
+        if (this.peerStore) {
+            this.peerStore.state.overrides = deepMerge(Object.assign({}, defaultOverrides), overrides);
+        }
+    }
     handleResize() {
         this.size = getSize(this.host.clientWidth);
     }
@@ -1831,7 +1891,8 @@ const RtkMeeting = class {
         "meeting": ["meetingChanged"],
         "iconPack": ["iconPackChanged"],
         "t": ["tChanged"],
-        "config": ["configChanged"]
+        "config": ["configChanged"],
+        "overrides": ["overridesChanged"]
     }; }
 };
 RtkMeeting.style = RtkMeetingStyle0;
@@ -1890,7 +1951,7 @@ const RtkMenu$1 = class {
         });
     }
     render() {
-        return (h(Host, { key: 'b019210ff85bde38c61855f8ac38aa8b927aa857' }, h("span", { key: '14f689eed0672642c3a181ee5d197d7a9b5c00a8', id: "trigger", ref: (el) => (this.triggerEl = el), onClick: () => {
+        return (h(Host, { key: '15461c803838be1651df6116a61598ce8ab988f9' }, h("span", { key: 'f36cdd2f1141f46a993daa880682382904a72509', id: "trigger", ref: (el) => (this.triggerEl = el), onClick: () => {
                 this.clickedThis = true;
                 if (this.menuListEl.style.display !== 'block') {
                     this.menuListEl.style.display = 'block';
@@ -1899,7 +1960,7 @@ const RtkMenu$1 = class {
                 else {
                     this.menuListEl.style.display = 'none';
                 }
-            } }, h("slot", { key: 'f1ab2111e0ad309df5b38e4f189d821b8ab50a4a', name: "trigger" })), h("span", { key: 'ec03b8c7ff60dd21dce3bc1f9b473ab59ec37ace', part: "menu-list", id: "menu-list", ref: (el) => (this.menuListEl = el) }, h("slot", { key: 'bc05fba324ccf4360340b070c8d4f3723a72cf6e' }))));
+            } }, h("slot", { key: 'af622c9dbb3394cb46a6bb909a45c5e3248b1a09', name: "trigger" })), h("span", { key: '445258e31b4b775fbc22b268234fe15a33f809c9', part: "menu-list", id: "menu-list", ref: (el) => (this.menuListEl = el) }, h("slot", { key: '87396622c6078253736cbe43a1cac55c6f90754f' }))));
     }
 };
 __decorate$6([
@@ -1910,7 +1971,7 @@ __decorate$6([
 ], 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 rtkMenuItemCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{display:flex;align-items:center;padding-left:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-3, 12px);padding-top:var(--rtk-space-2, 8px);padding-bottom:var(--rtk-space-2, 8px);cursor:pointer;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;color:rgb(var(--rtk-colors-text-1000, 255 255 255));font-size:14px}::slotted([slot='start']){margin-right:var(--rtk-space-2, 8px)}::slotted([slot='end']){margin-left:var(--rtk-space-2, 8px)}:host(:hover){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity))}:host(.primary:hover){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-bg-opacity))}:host(.red){--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}";
 const RtkMenuItemStyle0 = rtkMenuItemCss;
 
 var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -1926,13 +1987,15 @@ var __decorate$5 = (undefined && undefined.__decorate) || function (decorators,
 const RtkMenuItem = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /** Variant */
+        this.menuVariant = 'secondary';
         /** Icon pack */
         this.iconPack = defaultIconPack;
         /** Language */
         this.t = useLanguage();
     }
     render() {
-        return (h(Host, { key: 'a5c802aa2cb8cb235dc1e68d54ec9703c57df0b9' }, h("slot", { key: 'b448160fdd220fd814d471ddc08d7f784af10c49', name: "start" }), h("slot", { key: '0b342d2547a7835ea23d1974c3fd1b2e3507e779' }), h("slot", { key: '6670a8ed947d2bd6fb1651e9c6c1cd52f5ca419c', name: "end" })));
+        return (h(Host, { key: '8679dae05e846bb8b83a1dbc9580aa2dcad18ccd', class: { [this.menuVariant]: true } }, h("slot", { key: 'da53376b8188bfc47f904d348212fedff932b03a', name: "start" }), h("slot", { key: '4394a3afa13bd298880c1be5255f5a004c5ed42e' }), h("slot", { key: '2be62c70172912e6516ce207b571ea4794aa4f6c', name: "end" })));
     }
 };
 __decorate$5([
@@ -1943,7 +2006,7 @@ __decorate$5([
 ], 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 rtkMenuListCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{display:flex;width:-moz-max-content;width:max-content;flex-direction:column;padding:var(--rtk-space-0, 0px);color:rgb(var(--rtk-colors-text-1000, 255 255 255));border-width:1px;border-style:solid;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));overflow:hidden;border-radius:var(--rtk-border-radius-sm, 4px);--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);-webkit-backdrop-filter:blur(60px);backdrop-filter:blur(60px)}:host(.primary){--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-brand-600, 13 81 253) / var(--tw-border-opacity));background-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / 0.3)}";
 const RtkMenuListStyle0 = rtkMenuListCss;
 
 var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -1961,11 +2024,13 @@ const RtkMenuList = class {
         registerInstance(this, hostRef);
         /** Icon pack */
         this.iconPack = defaultIconPack;
+        /** Variant */
+        this.menuVariant = 'secondary';
         /** Language */
         this.t = useLanguage();
     }
     render() {
-        return (h(Host, { key: '1357690e48bef0c8c0e953886f1fd7754f0e4e4d' }, h("slot", { key: 'f3a221b7a4d28f53add6b658a0510294a998d6c1' })));
+        return (h(Host, { key: 'b743da0bae39c93cff7896968a64c84166b8a751', class: { [this.menuVariant]: true } }, h("slot", { key: '46ca973e68fccbf5c8c7544f61bb9745840d0054' })));
     }
 };
 __decorate$4([
@@ -1976,7 +2041,7 @@ __decorate$4([
 ], 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 rtkMessageViewCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}.scrollbar{scrollbar-width:thin;scrollbar-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n    var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar{height:var(--rtk-space-1\\.5, 6px);width:var(--rtk-space-1\\.5, 6px);border-radius:9999px;background-color:var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar-thumb{border-radius:9999px;background-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))}:host{max-width:var(--rtk-space-96, 384px)}.message-wrapper{display:flex;flex-direction:row-reverse;align-items:flex-start;gap:var(--rtk-space-2, 8px)}.message-wrapper.incoming{flex-direction:row}.message{display:flex;flex-direction:column;align-items:flex-end}.incoming .message{display:flex;flex-direction:column;align-items:flex-start}.header{margin-top:var(--rtk-space-1, 4px);margin-bottom:var(--rtk-space-1, 4px);align-self:flex-end;color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));font-size:12px;font-weight:600}.incoming .header{align-self:flex-start}.body{display:flex;flex-direction:column;min-width:var(--rtk-space-24, 96px);font-family:var(--rtk-font-family, sans-serif);color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));font-size:14px;line-height:1.375;position:relative}.bubble{max-width:90%;padding:var(--rtk-space-2, 8px);border-width:1px;border-style:solid;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-brand-600, 13 81 253) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));border-radius:var(--rtk-border-radius-md, 8px)}.incoming .bubble{--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}.metadata{margin-top:var(--rtk-space-2, 8px);display:flex;flex-direction:row;align-items:center;gap:var(--rtk-space-1, 4px);align-self:flex-end;font-size:11px;color:rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76))}.metadata-content{display:flex;flex-direction:row;align-items:center;gap:var(--rtk-space-1, 4px)}.avatar{display:none}rtk-menu{position:absolute;right:var(--rtk-space-1, 4px);top:var(--rtk-space-1, 4px);border-radius:var(--rtk-border-radius-lg, 12px)}rtk-menu rtk-icon{height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);cursor:pointer}.actions{display:flex;align-items:center;justify-content:center;border-width:1px;border-style:solid;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-brand-600, 13 81 253) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-bg-opacity));padding:var(--rtk-space-1, 4px);border-radius:var(--rtk-border-radius-md, 8px);border-width:var(--rtk-border-width-none, 0);border-style:none}.actions rtk-icon{height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.incoming rtk-avatar{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}.incoming .actions{--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity))}@media (min-width: 400px){.avatar{display:flex;width:var(--rtk-space-6, 24px)}.avatar rtk-avatar{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px);font-size:10px;overflow:clip;border-radius:9999px}}@media (hover: hover){rtk-menu{visibility:hidden}.body:hover rtk-menu{visibility:visible}}";
 const RtkMessageViewStyle0 = rtkMessageViewCss;
 
 var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -1997,6 +2062,8 @@ const RtkMessageView = class {
         this.actions = [];
         /** Appearance */
         this.variant = 'bubble';
+        /** Is message pinned */
+        this.pinned = false;
         /** Render */
         this.viewType = 'outgoing';
         /** Hides avatar */
@@ -2011,10 +2078,14 @@ const RtkMessageView = class {
         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))))));
+        return (h("rtk-menu", { placement: this.isSelf ? 'bottom-start' : 'bottom-end', offset: 1 }, h("button", { slot: "trigger", class: "actions" }, h("rtk-icon", { icon: this.iconPack.chevron_down })), h("rtk-menu-list", { menuVariant: this.isSelf ? 'primary' : 'secondary' }, this.actions.map((action) => {
+            if (action.id === 'edit_message' && this.messageType !== 'text')
+                return;
+            return (h("rtk-menu-item", { menuVariant: this.isSelf ? 'primary' : 'secondary', 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())))));
+        return (h(Host, { key: '4ea54e7662406a5a3897295972506c043d54598c' }, h("div", { key: 'e8734f99436b9bd16b8c7a801dfb018eb5e07f20', class: { 'message-wrapper': true, [this.viewType]: true } }, !this.hideAvatar && (h("aside", { key: 'ad92c5ee28a635070e5fe2517dd2c01185082f88', class: "avatar", part: "avatar" }, h("rtk-avatar", { key: '7da7496c3613a2280dc5fb1ba383790eb7efacf5', participant: { name: this.authorName, picture: this.avatarUrl }, size: "sm" }))), h("div", { key: '969bc1103c403ea477147d34cd0992114a713d70', class: "message", part: "message" }, !this.hideAuthorName && (h("div", { key: 'b99ea9217f1b641e67e509bba4c56d936e2af7b0', class: "header" }, this.authorName, " ", this.isSelf ? ' (You)' : '')), h("div", { key: '2dad045ba207872c932a38ab4c52e3b0e25af024', class: { body: true, bubble: this.variant === 'bubble' } }, h("slot", { key: '64e80b06045b8e624df64090b5104e828ccc130e' }), !this.hideMetadata && !!this.time && (h("div", { key: 'b362dd31d38f3729da45be1150c34a1cea2cd394', class: "metadata", title: formatDateTime(this.time) }, this.pinned && (h("span", { key: '70940e475a08ba64a53300516c64f23549a0b856', class: "metadata-content" }, h("rtk-icon", { key: 'be9561043f9c0814ae38d9eeadf2ff1c5ccae52c', icon: this.iconPack.pin, size: "sm" }), " \u2022")), this.isEdited && (h("span", { key: '0abe565d472751a6a341ca6beaf9fc6d50f2f3e0', class: "metadata-content" }, h("span", { key: 'e89ebd6a787ad2c1d7961209f9052e31e374eec3' }, "Edited"), " \u2022")), elapsedDuration(this.time, new Date(Date.now())))), this.actions.length !== 0 && this.renderActions())))));
     }
 };
 __decorate$3([
@@ -2022,9 +2093,35 @@ __decorate$3([
 ], 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)}.load-more-on-top-container{pointer-events:none;position:absolute;top:var(--rtk-space-2, 8px);right:var(--rtk-space-4, 16px);z-index:10}.load-more-icon{pointer-events:auto;border-radius:9999px}.load-more-icon:hover{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-ring-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}";
+const rtkPaginatedListCss = ".scrollbar{scrollbar-width:thin;scrollbar-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n    var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar{height:var(--rtk-space-1\\.5, 6px);width:var(--rtk-space-1\\.5, 6px);border-radius:9999px;background-color:var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar-thumb{border-radius:9999px;background-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))}:host{position:relative;display:flex;flex-direction:column;flex:1}.container{box-sizing:border-box;display:flex;flex-direction:column-reverse;padding-top:var(--rtk-space-4, 16px);padding-bottom:var(--rtk-space-4, 16px);padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px);flex:1 0 0px;overflow-y:scroll}.file-picker{display:none}.chat *:first-child{margin-top:var(--rtk-space-0, 0px)}.chat .head{display:flex;align-items:center}.chat .head .name{margin-right:var(--rtk-space-4, 16px);font-size:12px;font-weight:700}.chat .head .time{font-size:12px;color:rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76))}.chat .body{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-2, 8px);overflow-wrap:break-word;font-size:14px;line-height:1.375}.chat .body .emoji{font-size:24px}p{margin-top:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-3, 12px)}rtk-text-message,rtk-image-message,rtk-file-message{margin-top:var(--rtk-space-4, 16px);display:block;padding-left:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-3, 12px);font-family:var(--rtk-font-family, sans-serif);color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));box-sizing:border-box}*[is-continued]{margin-top:var(--rtk-space-3, 12px)}rtk-text-message[is-continued]{margin-top:var(--rtk-space-2, 8px)}.chat .image{position:relative;height:var(--rtk-space-40, 160px);max-width:var(--rtk-space-64, 256px);cursor:pointer}.chat .image img{display:none;height:100%;width:100%;border-radius:var(--rtk-border-radius-sm, 4px);-o-object-fit:cover;object-fit:cover}.chat .image .image-spinner{display:flex;height:100%;width:100%;flex-direction:column;align-items:center;justify-content:center;border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}.chat .image .image-spinner rtk-spinner{--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-text-opacity))}.chat .image .image-errored{display:flex;height:100%;width:100%;flex-direction:column;align-items:center;justify-content:center;border-radius:var(--rtk-border-radius-sm, 4px);background-color:rgba(var(--rtk-colors-danger, 255 45 45) / 0.1);--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}.chat .image .actions{display:none;height:var(--rtk-space-8, 32px);align-items:center;position:absolute;top:var(--rtk-space-2, 8px);right:var(--rtk-space-2, 8px);border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255));overflow:hidden;--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.chat .image .actions .action{height:var(--rtk-space-8, 32px);width:var(--rtk-space-8, 32px);border-radius:var(--rtk-border-radius-none, 0);border-width:var(--rtk-border-width-none, 0);border-style:none;background-color:transparent;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.chat .image .actions .action:hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.image.loaded img{display:block}.image.loaded .image-spinner{display:none}.image:hover .actions,.image:focus .actions{display:flex}.chat .file{display:flex;align-items:center;gap:var(--rtk-space-1, 4px);padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px);padding-top:var(--rtk-space-1\\.5, 6px);padding-bottom:var(--rtk-space-1\\.5, 6px);border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}.chat .file .file-data{flex:1 1 0%}.chat .file .file-data .name{word-break:break-all;color:rgb(var(--rtk-colors-text-1000, 255 255 255));overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.chat .file .file-data .file-data-split{margin-top:var(--rtk-space-0\\.5, 2px);display:flex;align-items:center;font-size:12px}.chat .file .file-data .file-data-split .ext{margin-right:var(--rtk-space-2, 8px);text-transform:uppercase;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.chat .file .file-data .file-data-split .divider{height:var(--rtk-space-4, 16px);width:var(--rtk-space-0\\.5, 2px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.chat .file .file-data .file-data-split .size{margin-left:var(--rtk-space-2, 8px)}.smallest-dom-element{width:1px}#top-scroll{transform:translateY(20vh);transform:translateY(20px)}a{--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-text-opacity));text-decoration-line:none}a:hover{text-decoration-line:underline}.show-new-messages-ctr{position:absolute;bottom:var(--rtk-space-4, 16px);right:var(--rtk-space-4, 16px);z-index:10;margin-top:calc(var(--rtk-space-14, 56px) * -1);--tw-translate-y:var(--rtk-space-28, 112px);transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:0;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.show-new-messages-ctr.active{--tw-translate-y:var(--rtk-space-0, 0px);transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:pointer;opacity:1}.show-new-messages{pointer-events:auto;border-radius:9999px}.show-new-messages:hover{border-radius:9999px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-ring-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}rtk-spinner,.empty-list{margin:auto}.page-wrapper{margin-left:var(--rtk-space-1, 4px);margin-right:var(--rtk-space-1, 4px);display:flex;flex-direction:column-reverse}.message-wrapper{margin-bottom:var(--rtk-space-2, 8px)}.pinned .message-wrapper{position:relative}.pinned .pin-icon{position:absolute;right:calc(var(--rtk-space-1, 4px) * -1);top:calc(var(--rtk-space-1, 4px) * -1);display:flex;border-radius:var(--rtk-border-radius-sm, 4px)}.pinned rtk-message-view{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));padding-top:var(--rtk-space-1, 4px);padding-bottom:var(--rtk-space-1, 4px)}.load-more-on-top-container{pointer-events:none;position:absolute;top:var(--rtk-space-2, 8px);right:var(--rtk-space-4, 16px);z-index:10}.load-more-icon{pointer-events:auto;border-radius:9999px}.load-more-icon:hover{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-ring-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}";
 const RtkPaginatedListStyle0 = rtkPaginatedListCss;
 
+/**
+ * NOTE(ikabra): INFINITE SCROLL IMPLEMENTATION:
+ *
+ * Uses scrollend listener for 2way scrolling.
+ * Empty divs ($topRef, $bottomRef) act as scroll triggers to fetch new messages.
+ *
+ * UPWARD SCROLLING:
+ * - Fetch top anchor (element currently visible to the user near top)
+ * - Fetch older messages, push to end of 2D array
+ * - When exceeding pagesAllowed, delete pages and scroll back to anchor
+ *
+ * DOWNWARD SCROLLING:
+ * - Fetch bottom anchor (element currently visible to the user near bottom)
+ * - Fetch new page, insert at the start
+ * - Update timestamps & firstEmptyIndex, then rerender
+ * - When exceeding pagesAllowed, delete pages and scroll back to anchor
+ *
+ * ADDING NEW NODES:
+ * - If no pages exist, load old page
+ * - If on 1st page, append messages till page size is full and then load new page
+ *
+ * DELETE NODE:
+ * - If deleting the only available node, reset to initial state
+ * - If page is empty, delete it
+ * - Update timestamp curors
+ */
 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")
@@ -2038,274 +2135,306 @@ var __decorate$2 = (undefined && undefined.__decorate) || function (decorators,
 const RtkPaginatedList = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        // Timestamp pertaining to the oldest stored message
+        this.oldestPaginatedTimestamp = null;
+        // Timestamp pertaining to the latest stored message
+        this.latestPaginatedTimestamp = null;
+        // Timestamp pertaining to the latest message stored in backend
+        this.latestMessageTimestamp = null;
+        // the length of pages will always be pageSize + 2
+        this.pages = [];
+        // Controls whether to keep auto-scrolling when a new page load.
+        this.shouldScrollToBottom = false;
+        // Shows "scroll to bottom" button when new nodes arrive and autoscroll is off.
+        this.showNewMessagesCTR = false;
+        /** label to show when empty */
+        this.emptyListLabel = null;
         /** Icon pack */
         this.iconPack = defaultIconPack;
         /** Language */
         this.t = useLanguage();
-        /** label to show when empty */
-        this.emptyListLabel = null;
+        this.rerenderBoolean = false;
+        this.showEmptyListLabel = false;
         this.isLoading = false;
         this.isLoadingTop = false;
         this.isLoadingBottom = false;
-        this.hasMoreDataAtTop = 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);
+        // Tells us if we need to scroll to a specific anchor after a rerender
+        this.pendingScrollAnchor = null;
+        this.isInView = (el) => {
+            const rect = el.getBoundingClientRect();
+            return rect.top >= 0 && rect.bottom <= window.innerHeight;
         };
     }
     /**
-     * On a new node created
+     * Adds a new node to the beginning of the paginated list
+     * @param {DataNode} node - The data node to add to the beginning of the list
      */
     async onNewNode(node) {
-        if (!this.shouldRenderNewNodes) {
-            this.hasNewNodesToRender = true;
-            return;
+        // if there are no pages, append to the first page
+        if (this.pages.length < 1) {
+            this.oldestPaginatedTimestamp = node.timeMs;
+            this.pages.unshift([node]);
+            this.latestPaginatedTimestamp = node.timeMs;
+            this.latestMessageTimestamp = node.timeMs;
+            this.rerender();
+            if (this.autoScroll)
+                this.$bottomRef.scrollIntoView({ behavior: 'smooth' });
         }
-        this.addNodeToRender(node, false);
-        this.rerender();
+        else if (this.latestMessageTimestamp === this.latestPaginatedTimestamp) {
+            // append messages to the page if page has not reached full capacity
+            if (this.pages[0].length < this.pageSize) {
+                this.pages[0].unshift(node);
+                this.latestPaginatedTimestamp = node.timeMs;
+                this.latestMessageTimestamp = node.timeMs;
+                this.rerender();
+            }
+            else {
+                // if page is at full capacity, load next page
+                this.pages.unshift([node]);
+                this.latestPaginatedTimestamp = node.timeMs;
+                this.latestMessageTimestamp = node.timeMs;
+                // remove pages if out of bounds
+                if (this.pages.length > this.pagesAllowed)
+                    this.pages.pop();
+                // update timestamps
+                const lastPage = this.pages[this.pages.length - 1];
+                this.oldestPaginatedTimestamp = lastPage[lastPage.length - 1].timeMs;
+                this.rerender();
+            }
+            if (this.autoScroll)
+                this.$bottomRef.scrollIntoView({ behavior: 'smooth' });
+        }
+        else {
+            if (this.autoScroll)
+                this.scrollToBottom();
+        }
+        this.pendingScrollAnchor = null;
     }
     /**
-     * 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) {
+     * Deletes a node anywhere from the list
+     * @param {string} id - The id of the node to delete
+     * */
+    async onNodeDelete(id) {
+        var _a, _b;
+        for (let i = this.pages.length - 1; i >= 0; i--) {
+            const index = this.pages[i].findIndex((node) => node.id === id);
+            // if message not found, move on
+            if (index === -1)
+                continue;
+            // delete message
+            this.pages[i].splice(index, 1);
+            // if page is empty, delete it
+            if (this.pages[i].length === 0)
+                this.pages.splice(i, 1);
+            // update timestamps
+            const firstPage = this.pages[0];
+            const lastPage = this.pages[this.pages.length - 1];
+            this.latestPaginatedTimestamp = (_a = firstPage === null || firstPage === void 0 ? void 0 : firstPage[0]) === null || _a === void 0 ? void 0 : _a.timeMs;
+            this.oldestPaginatedTimestamp = (_b = lastPage === null || lastPage === void 0 ? void 0 : lastPage[lastPage.length - 1]) === null || _b === void 0 ? void 0 : _b.timeMs;
+            // if I have deleted the latest message, update latestMessageTimestamp
+            if (index === 0 && i === 0)
+                this.latestMessageTimestamp = this.latestPaginatedTimestamp;
             this.rerender();
+            break;
         }
     }
     /**
-     * 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)
+     * Updates a new node anywhere in the list
+     * @param {string} id - The id of the node to update
+     * @param {DataNode} node - The updated data node
+     * */
+    async onNodeUpdate(id, node) {
+        for (let i = this.pages.length - 1; i >= 0; i--) {
+            const index = this.pages[i].findIndex((node) => node.id === id);
+            // if message not found, move on
+            if (index === -1)
+                continue;
+            // edit message
+            this.pages[i][index] = node;
             this.rerender();
-    }
-    onItemChanged(newItemId, oldItemId) {
-        if (newItemId !== oldItemId) {
-            this.pagesToRender = [[]];
-            this.loadFirstPage().then(() => this.rerender());
+            break;
         }
     }
     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);
+        // initial load
+        this.loadPrevPage();
+        if (this.$containerRef) {
+            this.$containerRef.onscrollend = async () => {
+                // do not do anything if we are scrolling to bottom
+                if (this.shouldScrollToBottom)
+                    return;
+                // handle top and bottom scroll
+                if (this.isInView(this.$bottomRef) &&
+                    this.latestMessageTimestamp > this.latestPaginatedTimestamp) {
+                    await this.loadNextPage();
+                }
+                else if (this.isInView(this.$topRef)) {
+                    this.showNewMessagesCTR = true;
+                    await this.loadPrevPage();
+                }
+            };
+        }
     }
     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)
+        if (!this.pendingScrollAnchor)
             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.isLoadingTop = true;
-        this.loadPage(oldestTimestamp - 1, this.pageSize, true, onPageRendered, 'top');
+        const anchor = this.pendingScrollAnchor;
+        this.pendingScrollAnchor = null;
+        this.restoreScrollToAnchor(anchor);
     }
-    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;
+    async loadPrevPage() {
+        if (this.isLoading)
             return;
-        }
-        if (this.pagesToRender.length === 1 && this.pagesToRender[0].length < this.pageSize) {
-            this.shouldRenderNewNodes = true;
+        const scrollAnchor = this.getScrollAnchor('top');
+        // if no old timestamp, it means we are at initial state
+        if (!this.oldestPaginatedTimestamp)
+            this.oldestPaginatedTimestamp = new Date().getTime();
+        // load data
+        this.isLoading = true;
+        this.isLoadingTop = true;
+        const data = await this.fetchData(this.oldestPaginatedTimestamp - 1, this.pageSize, true);
+        this.isLoading = false;
+        this.isLoadingTop = false;
+        // no more old messages to show, we are at the top of the page
+        if (!data.length)
             return;
+        // add old data to the end of the array
+        this.pages.push(data);
+        // clear old pages when we reach the limit
+        if (this.pages.length > this.pagesAllowed)
+            this.pages.shift();
+        // update timestamps
+        const lastPage = this.pages[this.pages.length - 1];
+        this.oldestPaginatedTimestamp = lastPage[lastPage.length - 1].timeMs;
+        this.latestPaginatedTimestamp = this.pages[0][0].timeMs;
+        if (!this.latestMessageTimestamp)
+            this.latestMessageTimestamp = this.latestPaginatedTimestamp;
+        this.rerender();
+        // fix scroll position
+        if (scrollAnchor)
+            this.pendingScrollAnchor = scrollAnchor;
+    }
+    async loadNextPage() {
+        if (this.isLoading)
+            return [];
+        // Do nothing. New timestamp needs to be assigned by loadPrevPage method
+        if (!this.latestPaginatedTimestamp) {
+            this.showNewMessagesCTR = false;
+            return [];
         }
-        const newestVNode = this.pagesToRender.at(-1).at(-1);
-        const newestTimestamp = newestVNode.timeMs;
-        // TODO: scrollIntoView
-        const onPageRendered = () => smoothScrollToBottom(this.$paginatedList);
+        this.isLoading = true;
         this.isLoadingBottom = true;
-        this.loadPage(newestTimestamp + 1, this.pageSize, false, onPageRendered, 'bottom');
+        const scrollAnchor = this.getScrollAnchor('bottom');
+        const data = await this.fetchData(this.latestPaginatedTimestamp + 1, this.pageSize, false);
+        this.isLoading = false;
+        this.isLoadingBottom = false;
+        // no more new messages to load
+        if (!data.length) {
+            this.latestMessageTimestamp = this.latestPaginatedTimestamp;
+            this.showNewMessagesCTR = false;
+            return [];
+        }
+        // load new messages and append to the start
+        const incoming = [...data].reverse();
+        if (this.pages.length === 0)
+            this.pages.unshift([]);
+        const firstPage = this.pages[0];
+        const spaceInFirstPage = this.pageSize - firstPage.length;
+        if (spaceInFirstPage > 0) {
+            const toFill = incoming.splice(0, spaceInFirstPage);
+            firstPage.unshift(...toFill);
+        }
+        while (incoming.length > 0) {
+            this.pages.unshift(incoming.splice(0, this.pageSize));
+        }
+        // remove pages if out of bounds
+        if (this.pages.length > this.pagesAllowed)
+            this.pages.pop();
+        // update timestamps
+        const lastPage = this.pages[this.pages.length - 1];
+        this.oldestPaginatedTimestamp = lastPage[lastPage.length - 1].timeMs;
+        this.latestPaginatedTimestamp = this.pages[0][0].timeMs;
+        this.rerender();
+        this.pendingScrollAnchor = scrollAnchor;
+        return data;
     }
-    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);
+    // Find the element that is closest to the top/bottom of the container
+    getScrollAnchor(edge = 'top') {
+        if (!this.$containerRef)
+            return null;
+        const containerRect = this.$containerRef.getBoundingClientRect();
+        const candidates = Array.from(this.$containerRef.querySelectorAll('[id]')).filter((el) => el.id !== 'top-scroll' && el.id !== 'bottom-scroll');
+        let best = null;
+        for (const el of candidates) {
+            const rect = el.getBoundingClientRect();
+            const isVisibleInContainer = rect.bottom > containerRect.top && rect.top < containerRect.bottom;
+            if (!isVisibleInContainer)
+                continue;
+            if (edge === 'top') {
+                const offsetTop = rect.top - containerRect.top;
+                if (best == null || (best.edge === 'top' && offsetTop < best.offsetTop)) {
+                    best = { id: el.id, edge: 'top', offsetTop };
+                }
             }
             else {
-                /**
-                 * If last page is full add a new page with just
-                 * this node
-                 */
-                const newPage = [node];
-                this.pagesToRender.push(newPage);
-                this.removeLastPageIfNeeded(true);
+                const offsetBottom = containerRect.bottom - rect.bottom;
+                if (best == null || (best.edge === 'bottom' && offsetBottom < best.offsetBottom)) {
+                    best = { id: el.id, edge: 'bottom', offsetBottom };
+                }
             }
         }
+        return best;
     }
-    /**
-     * @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
-     * @param direction Indicates if loading from 'top' or 'bottom'
-     */
-    async loadPage(timestamp, size, reversed, onPageRendered = () => { }, direction) {
-        this.isLoading = true;
-        const data = (await this.fetchData(timestamp, size, reversed));
-        this.isLoading = false;
-        if (direction === 'top') {
-            this.isLoadingTop = false;
-            this.hasMoreDataAtTop = (data === null || data === void 0 ? void 0 : data.length) > 0;
+    //instant scroll to anchor to make sure we are at the same position after a rerender
+    restoreScrollToAnchor(anchor) {
+        if (!this.$containerRef)
+            return;
+        // make element id safe to use inside a CSS selector
+        const escapeId = (id) => {
+            var _a;
+            const cssEscape = (_a = globalThis.CSS) === null || _a === void 0 ? void 0 : _a.escape;
+            return typeof cssEscape === 'function'
+                ? cssEscape(id)
+                : id.replace(/[^a-zA-Z0-9_-]/g, '\\$&');
+        };
+        const el = this.$containerRef.querySelector(`#${escapeId(anchor.id)}`);
+        if (!el)
+            return;
+        const containerRect = this.$containerRef.getBoundingClientRect();
+        const rect = el.getBoundingClientRect();
+        if (anchor.edge === 'top') {
+            const newOffsetTop = rect.top - containerRect.top;
+            this.$containerRef.scrollTop += newOffsetTop - anchor.offsetTop;
         }
-        if (direction === 'bottom') {
-            this.isLoadingBottom = false;
+        else {
+            const newOffsetBottom = containerRect.bottom - rect.bottom;
+            this.$containerRef.scrollTop += anchor.offsetBottom - newOffsetBottom;
         }
-        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;
+    }
+    // this method is called recursively based on shouldScrollToBottom (see loadNextPage)
+    async scrollToBottom() {
+        this.shouldScrollToBottom = true;
+        while (this.shouldScrollToBottom) {
+            const response = await this.loadNextPage();
+            this.$bottomRef.scrollIntoView({ behavior: 'smooth' });
+            if (response.length === 0)
+                this.shouldScrollToBottom = false;
         }
-        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();
-    }
-    onLoadMoreOnTopClicked() {
-        this.loadTop();
-    }
     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
+         * div.container is flex=column-reversewhich is why div#bottom-scroll comes before div#top-scroll
          */
-        return (h(Host, { key: '23e10f12b079213650cf9c947d30650ba8c95a4d' }, h("div", { key: 'b5406069fd69ff117b19d437184c38b3c7d2fc28', class: "scrollbar container", part: "container", ref: (el) => (this.$paginatedList = el) }, h("div", { key: '7be947f2409ff810e0d10beea53ace8fdec334ce', class: { 'show-new-messages-ctr': true, active: !this.shouldRenderNewNodes } }, h("rtk-button", { key: '45c43d6ca1cc39376334dffa10f3f2c137d65add', class: "show-new-messages", kind: "icon", variant: "secondary", part: "show-new-messages", onClick: () => this.onDownArrowClicked() }, h("rtk-icon", { key: '519b0db80f7d16cc4d03983e227d4897a5868ec9', icon: this.iconPack.chevron_down }))), h("div", { key: '53691e3943b90ef9e422c8da8f5facaa23f01920', class: "smallest-dom-element", id: "bottom-scroll", ref: (el) => (this.$bottomRef = el) }), this.isLoadingBottom && h("rtk-spinner", { key: '2a393cb0bbb07c356144464dcc7c597f5cc9771b', size: "sm" }), this.isLoading && this.pagesToRender.flat().length === 0 && h("rtk-spinner", { key: '4ce03be69368db0d6d0d4ad079b14f2c7d93f26d', 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)))), this.hasMoreDataAtTop && !this.isLoadingTop && (h("div", { key: '5c85806854687efe098e4bd6d06d109060445378', class: "load-more-on-top-container" }, h("rtk-button", { key: '6d73a030fad5ba133aa2841b2feb196646592ada', class: "load-more-icon", kind: "icon", variant: "secondary", part: "load-more-icon", onClick: () => this.onLoadMoreOnTopClicked() }, h("rtk-icon", { key: '61a4f376749938df280e5c734dd3fa8a9b0b7201', icon: this.iconPack.chevron_up })))), this.isLoadingTop && h("rtk-spinner", { key: '3e55b99c60ed7bc2cd937091a33663dd19c9ca68', size: "sm" }), h("div", { key: 'a69e0a3a26d295783f4f729b33770b206ab5d46b', class: "smallest-dom-element", id: "top-scroll", ref: (el) => (this.$topRef = el) }))));
+        return (h(Host, { key: 'd3a69c210794a552e1a45d0d184b16657cbfde79' }, h("div", { key: 'c9cdb45d5cea872660bc8e2170c3d94c9331a861', class: "scrollbar container", part: "container", ref: (el) => (this.$containerRef = el) }, h("div", { key: '1bacf2a627e8a7f11f75e0ecbda873609cd347b9', class: { 'show-new-messages-ctr': true, active: this.showNewMessagesCTR } }, h("rtk-button", { key: '0c4e3f79e2a7447f1195e03aa026d0f228d09f90', class: "show-new-messages", kind: "icon", variant: "secondary", part: "show-new-messages", onClick: () => {
+                this.scrollToBottom();
+            } }, this.shouldScrollToBottom ? (h("rtk-spinner", { size: "sm" })) : (h("rtk-icon", { icon: this.iconPack.chevron_down })))), h("div", { key: '439f9e943266f60c933812771682bc414b86d418', class: "smallest-dom-element", id: "bottom-scroll", ref: (el) => (this.$bottomRef = el) }), this.isLoadingBottom && this.pages.length > 0 && h("rtk-spinner", { key: 'd79aa2e74a62b14a456c8437362bb01a9df933e1', size: "sm" }), this.isLoading && this.pages.length < 1 && h("rtk-spinner", { key: '7ccfd41966d0337a8abe9a3086ca3f07fe051dc0', size: "lg" }), !this.isLoading && this.pages.flat().length === 0 ? (h("div", { class: "empty-list" }, this.t('list.empty'))) : (h("div", { class: "page-wrapper" }, this.pages.map((page, pageIndex) => (h("div", { class: "page", "data-page-index": pageIndex }, this.createNodes([...page].reverse())))))), this.isLoadingTop && this.pages.length > 0 && h("rtk-spinner", { key: '1c6c11863adba0205d0dd2ce649f3bdf51c9df60', size: "sm" }), h("div", { key: '413506236882f6d516967db0f642f5db63c7971f', class: "smallest-dom-element", id: "top-scroll", ref: (el) => (this.$topRef = el) }))));
     }
-    static get watchers() { return {
-        "selectedItemId": ["onItemChanged"]
-    }; }
 };
 __decorate$2([
     SyncWithStore()
@@ -2337,7 +2466,7 @@ const RtkSpinner = class {
         this.size = 'md';
     }
     render() {
-        return (h(Host, { key: '2eb8672a849f85e2c207ec9331d1093b7deefaa3' }, h("rtk-icon", { key: '5a2f292ddd7a5c52709ce41f47422f08bdf82852', class: "spinner", icon: this.iconPack.spinner })));
+        return (h(Host, { key: 'c042cbd31d8fa9e58c0cbbc5646575a3172fc824' }, h("rtk-icon", { key: '0171ba3d5f7506e2c67eb813c5ad5b263352088d', class: "spinner", icon: this.iconPack.spinner })));
     }
 };
 __decorate$1([
@@ -2415,7 +2544,7 @@ const RtkTextComposerView = class {
         }
     }
     render() {
-        return (h("div", { key: '1b51f7d6ffbe8069172a5dc51f291988000c898a', class: "chat-input", part: "chat-input-container" }, this.maxLengthBreached > 0 && (h("div", { key: 'fe75f8333a7643458d5077fec968464327e65ca3', class: 'text-error ' + (this.maxLengthBreached === this.maxLength ? 'breached' : '') }, h("rtk-icon", { key: '669066f9983f226d96baeebdfa10ffb1fc8001b7', id: "warning-indicator", icon: this.iconPack.warning, part: "warning-indicator" }), ' ', this.maxLengthBreached, " / ", this.maxLength, " ", this.t('chat.max_limit_warning'))), this.rateLimitBreached && (h("div", { key: '0024d3b4e8d5eda5f94ff2fe9d8aa18cfb9297a7', class: 'text-error breached' }, h("rtk-icon", { key: 'bc3a0417a81de43b67595cde79dfe7aba21a6601', id: "warning-indicator", icon: this.iconPack.warning, part: "warning-indicator" }), ' ', this.t('chat.rate_limit_error'))), h("textarea", { key: 'c6077b3128eeea4be2358ab557062df322a8ffa9', ref: (el) => (this.$textArea = el), placeholder: this.placeholder, disabled: this.disabled, onInput: this.onInputHandler, onKeyDown: this.keyDownHandler, part: "chat-input", value: this.value })));
+        return (h("div", { key: 'e5f7fa2bd4a2386ff5185001981477ccacf24556', class: "chat-input", part: "chat-input-container" }, this.maxLengthBreached > 0 && (h("div", { key: '4c06c853ddc7bebafe45fdb2e2c5c9e1c20021fe', class: 'text-error ' + (this.maxLengthBreached === this.maxLength ? 'breached' : '') }, h("rtk-icon", { key: '524037dc257f0aea206fbc3503d1fe1cb03449be', id: "warning-indicator", icon: this.iconPack.warning, part: "warning-indicator" }), ' ', this.maxLengthBreached, " / ", this.maxLength, " ", this.t('chat.max_limit_warning'))), this.rateLimitBreached && (h("div", { key: 'cf975664f367f2621593239ab1cf2e73f5acdb45', class: 'text-error breached' }, h("rtk-icon", { key: '70a6555f1fa9752f91951181b46e0ed0e7eb8679', id: "warning-indicator", icon: this.iconPack.warning, part: "warning-indicator" }), ' ', this.t('chat.rate_limit_error'))), h("textarea", { key: '7fc7280dd143cd701d5037e04c2b36c3ea8ec023', ref: (el) => (this.$textArea = el), placeholder: this.placeholder, disabled: this.disabled, onInput: this.onInputHandler, onKeyDown: this.keyDownHandler, part: "chat-input", value: this.value })));
     }
 };
 __decorate([
@@ -2436,7 +2565,7 @@ const RtkTextMessageView = class {
         this.isMarkdown = false;
     }
     render() {
-        return (h("p", { key: '90e03b1cdd7271004b0ba2932d7e00342d0b884d', class: { text: true, emoji: hasOnlyEmojis(this.text) } }, this.isMarkdown ? h("rtk-markdown-view", { text: this.text }) : this.text));
+        return (h("p", { key: 'b4cbabb44d32f96a23cd72f108d6a36b05491c97', class: { text: true, emoji: hasOnlyEmojis(this.text) } }, this.isMarkdown ? h("rtk-markdown-view", { text: this.text }) : this.text));
     }
 };
 RtkTextMessageView.style = RtkTextMessageViewStyle0;
@@ -2542,7 +2671,7 @@ const RtkMenu = class {
         });
     }
     render() {
-        return (h(Host, { key: '32f792b447497e62bc776085657de62b8d6213bf' }, h("span", { key: '96f014373662e86cadb00d5a0b981246d3a7cac4', part: "trigger", id: "trigger", ref: (el) => (this.triggerEl = el) }, h("slot", { key: '218a47538fad33071c2ed20d83610b36e8c5a8f4' })), h("div", { key: 'c338da352126320e70333ad8ae814667e53dc5b4', part: "tooltip", class: "tooltip", id: "tooltip", role: "tooltip", ref: (el) => (this.tooltipEl = el) }, h("div", { key: 'bd0fe7c880bf999ba565959e84cc78412d008fb7', id: "arrow", ref: (el) => (this.arrowEl = el), part: "arrow" }), this.label, h("slot", { key: '67fcc99de5f9db145ce832b7eb46aa0e587ed101', name: "tooltip" }))));
+        return (h(Host, { key: '5278137bc9b99d9fe9ffeb0fc30bd887d600494d' }, h("span", { key: 'cbefda068a15340dad76668c3696a10bd94cb8e9', part: "trigger", id: "trigger", ref: (el) => (this.triggerEl = el) }, h("slot", { key: 'f160cf29ece64145e795a9a11459bd458482c446' })), h("div", { key: '1056b2bbc8cbacd3c32280d334d9f703a578b5ef', part: "tooltip", class: "tooltip", id: "tooltip", role: "tooltip", ref: (el) => (this.tooltipEl = el) }, h("div", { key: '6c6816fa1b18d49fa22ab6ffb600aaa23c5b9ec5', id: "arrow", ref: (el) => (this.arrowEl = el), part: "arrow" }), this.label, h("slot", { key: '3c2d3425b2e8b4d810de2ce40394491c4698aede', name: "tooltip" }))));
     }
     static get watchers() { return {
         "open": ["openChanged"]