npm - @cloudflare/realtimekit-ui - Versions diffs - 1.1.0-staging.3 → 1.1.0-staging.5 - Mend

@cloudflare/realtimekit-ui 1.1.0-staging.3 → 1.1.0-staging.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (394) hide show

package/dist/cjs/rtk-avatar_24.cjs.entry.js CHANGED Viewed

@@ -15,7 +15,6 @@ const config = require('./config-0a88d50b.js');
 const ResizeObserver_es = require('./ResizeObserver.es-ba961f16.js');
 const floatingUi_dom_esm = require('./floating-ui.dom.esm-705e65f3.js');
 const date = require('./date-61ffcd0a.js');
-const scroll = require('./scroll-c6404609.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;
@@ -90,7 +89,7 @@ const RtkButton = class {
 };
 RtkButton.style = RtkButtonStyle0;
-const rtkChannelSelectorViewCss = ".scrollbar {\n  /* For Firefox */\n  scrollbar-width: thin;\n  scrollbar-color: var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n    var(--rtk-scrollbar-background, transparent);\n}\n\n/* For WebKit */\n.scrollbar::-webkit-scrollbar {\n  height: var(--rtk-space-1\\.5, 6px);\n  width: var(--rtk-space-1\\.5, 6px);\n  border-radius: 9999px;\n  background-color: var(--rtk-scrollbar-background, transparent);\n}\n\n.scrollbar::-webkit-scrollbar-thumb {\n  border-radius: 9999px;\n  background-color: var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)));\n}\n\n\n:host {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-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) {
@@ -217,8 +216,8 @@ const RtkChannelSelectorView = class {
                     'last-message': true,
                     'no-message': !channel.latestMessage,
                 } }, index$1.h("rtk-text-message-view", { isMarkdown: true, text: channel.latestMessage })))), index$1.h("div", { class: "col channel-meta" }, channel.latestMessageTime && (index$1.h("time", { class: "time" }, this.getTimeLabel(channel.latestMessageTime))), channel.unreadCount > 0 && (index$1.h("div", { class: "unread-count" }, channel.unreadCount))))));
-        })))), this.viewAs === 'dropdown' && (index$1.h("button", { key: '0c87f90d6d0fe22284995ab7259689f80a862829', class: "dropdown-trigger", onClick: this.toggleDropdown }, index$1.h("span", { key: 'd1a364f2c5c57d19702d0b8707ca661c1dc4c14f' }, this.selectedChannelId &&
-            `${this.t('to')} ${this.getChannelById(this.selectedChannelId).name}`, this.getTotalUnreads() > 0 && (index$1.h("div", { key: 'bf789f9df82851825bc6ea12a19a5f37ab74aefe', class: "unread-count" }, this.getTotalUnreads()))), index$1.h("rtk-icon", { key: 'c0d03f883f4c46b2698be0f197751fc0470717ea', icon: this.showDropdown ? this.iconPack.chevron_up : this.iconPack.chevron_down })))));
+        })))), this.viewAs === 'dropdown' && (index$1.h("button", { key: '0c87f90d6d0fe22284995ab7259689f80a862829', class: "dropdown-trigger", onClick: this.toggleDropdown }, index$1.h("span", { key: 'd1a364f2c5c57d19702d0b8707ca661c1dc4c14f' }, index$1.h("rtk-icon", { key: 'a4a028e536459fab6de2884e25b0312d2a36bc32', icon: this.iconPack.participants }), this.selectedChannelId &&
+            `${this.t('to')} ${this.getChannelById(this.selectedChannelId).name}`, this.getTotalUnreads() > 0 && (index$1.h("div", { key: '83c8efae8daed7dce4c4fdb55b523876c71a9a85', class: "unread-count" }, this.getTotalUnreads()))), index$1.h("rtk-icon", { key: '855ff62e593c7c14f448bbd5b8cf898e13d5d391', icon: this.showDropdown ? this.iconPack.chevron_up : this.iconPack.chevron_down })))));
     }
     get $el() { return index$1.getElement(this); }
 };
@@ -230,7 +229,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  width: 100%;\n}\n\n.pinned-message {\n  display: flex;\n  cursor: pointer;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--rtk-space-2, 8px);\n  --tw-border-opacity: 1;\n  border-color: rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity));\n  padding: var(--rtk-space-4, 16px);\n  border-bottom-width: var(--rtk-border-width-sm, 1px);\n  border-right-width: var(--rtk-border-width-none, 0);\n  border-left-width: var(--rtk-border-width-none, 0);\n  border-top-width: var(--rtk-border-width-none, 0);\n  border-style: solid;\n}\n\n.pinned-message-avatar {\n  height: var(--rtk-space-6, 24px) !important;\n  width: var(--rtk-space-6, 24px) !important;\n}\n\n@keyframes swipe-in {\n  from {\n    transform: translateX(-100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n";
 const RtkChatStyle0 = rtkChatCss;
 var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -527,13 +526,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 (index$1.h("rtk-tooltip", { label: this.t('chat.toggle_pinned_msgs') }, index$1.h("div", { class: { 'pinned-messages-header': true, active: this.showPinnedMessages }, onClick: this.onTogglePinnedMessages }, index$1.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 (index$1.h("div", { class: "pinned-messages" }, index$1.h("div", { class: "pinned-messages-header", onClick: () => (this.showPinnedMessages = !this.showPinnedMessages) }, index$1.h("div", null, index$1.h("rtk-icon", { icon: this.iconPack.pin, size: "sm" }), this.t('chat.pinned_msgs'), ` (${this.meeting.chat.pinned.length})`), index$1.h("rtk-icon", { icon: this.showPinnedMessages ? this.iconPack.chevron_up : this.iconPack.chevron_down, size: "sm" })), this.showPinnedMessages && (index$1.h("div", { class: "pinned-messages-content" }, this.meeting.chat.pinned.map((message) => {
+                const label = this.getPinnedMessageLabel(message);
+                return (index$1.h("div", { class: "pinned-message" }, index$1.h("rtk-avatar", { class: "pinned-message-avatar", participant: { name: message.displayName, picture: '' }, size: "sm" }), index$1.h("span", null, label.length > 20 ? `${label.substring(0, 20)}...` : label)));
+            })))));
         };
     }
     connectedCallback() {
@@ -687,10 +698,6 @@ const RtkChat = class {
         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 (index$1.h(index$1.Host, null, index$1.h("div", { class: "chat-container" }, index$1.h("div", { class: "chat" }, this.isFileMessagingAllowed() && (index$1.h("div", { id: "dropzone", class: { active: this.dropzoneActivated }, part: "dropzone" }, index$1.h("rtk-icon", { icon: this.iconPack.attach }), index$1.h("p", null, this.t('chat.send_attachment')))), this.renderPinnedMessagesHeader(), this.isPrivateChatSupported() && (index$1.h("rtk-channel-selector-view", { channels: this.getPrivateChatRecipients(), selectedChannelId: ((_a = this.selectedParticipant) === null || _a === void 0 ? void 0 : _a.userId) || 'everyone', onChannelChange: this.updateRecipients, t: this.t, viewAs: "dropdown" })), index$1.h("rtk-chat-messages-ui-paginated", { meeting: this.meeting, onPinMessage: this.onPinMessage, onDeleteMessage: this.onDeleteMessage, size: this.size, iconPack: this.iconPack, t: this.t }), this.renderComposerUI()))));
     }
     get host() { return index$1.getElement(this); }
@@ -1041,9 +1048,9 @@ const RtkChatMessagesUiPaginated = class {
             }
             const isSelf = message.userId === this.meeting.self.userId;
             const viewType = isSelf ? 'outgoing' : 'incoming';
-            return (index$1.h("div", { class: { pinned: message.pinned } }, index$1.h("div", { class: "message-wrapper" }, index$1.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) }, index$1.h("div", null, index$1.h("div", { class: "body" }, message.type === 'text' && (index$1.h("rtk-text-message-view", { text: message.message, isMarkdown: true })), message.type === 'file' && (index$1.h("rtk-file-message-view", { name: message.name, url: message.link, size: message.size })), message.type === 'image' && (index$1.h("rtk-image-message-view", { url: message.link, onPreview: () => {
+            return (index$1.h("div", null, index$1.h("div", { class: "message-wrapper" }, index$1.h("rtk-message-view", { pinned: message.pinned, time: message.time, actions: this.getMessageActions(message), authorName: message.displayName, isSelf: isSelf, avatarUrl: displayPicture, hideAuthorName: isContinued, viewType: viewType, variant: "bubble", onAction: (event) => this.onMessageActionHandler(event.detail, message) }, index$1.h("div", null, index$1.h("div", { class: "body" }, message.type === 'text' && (index$1.h("rtk-text-message-view", { text: message.message, isMarkdown: true })), message.type === 'file' && (index$1.h("rtk-file-message-view", { name: message.name, url: message.link, size: message.size })), message.type === 'image' && (index$1.h("rtk-image-message-view", { url: message.link, onPreview: () => {
                     this.stateUpdate.emit({ image: message });
-                } }))), message.pinned && (index$1.h("div", { class: "pin-icon", part: "pin-icon" }, index$1.h("rtk-icon", { icon: this.iconPack.pin, size: "sm" }))))))));
+                } }))))))));
         };
         this.chatUpdateListener = (data) => {
             if (this.selectedChannelId && data.message.channelId !== this.selectedChannelId)
@@ -1089,7 +1096,7 @@ const RtkChatMessagesUiPaginated = class {
         this.lastReadMessageIndex = -1;
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '732dea776303ba428aedc72608516a4e4dfc1591' }, index$1.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') }, index$1.h("slot", { key: 'f3cc795b3b39aa48f87f9908e3b205e2db6439b4' }))));
+        return (index$1.h(index$1.Host, { key: '012b7189dfbdccfd8017cc9023263e6a7e9afd44' }, index$1.h("rtk-paginated-list", { key: '0ea37ee880fda0acdd7460b6da5f03e11ac304bf', ref: (el) => (this.$paginatedListRef = el), pageSize: this.pageSize, pagesAllowed: 3, fetchData: this.getChatMessages, createNodes: this.createChatNodes, selectedItemId: this.selectedChannelId, emptyListLabel: this.t('chat.empty_channel') }, index$1.h("slot", { key: '53cb197b6d9319f470e87fe73d7ca0d158778e3f' }))));
     }
     get host() { return index$1.getElement(this); }
     static get watchers() { return {
@@ -1162,7 +1169,7 @@ const RtkDraftAttachmentView = class {
         this.onAttachmentChange();
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'b23eb412c60a62f542aec0e3cd3b99fc72de48f0' }, index$1.h("div", { key: '04251f8d4b13325f8474110c89733369bd8904f2', class: "preview-overlay" }, index$1.h("div", { key: '51963510a704b19e7c591ea177018bae6e0317f5', class: "preview" }, index$1.h("rtk-tooltip", { key: '3a2167ea7a02f1d744462826084f0fef5c607ac9', label: this.t('chat.cancel_upload') }, index$1.h("rtk-button", { key: '634c9a7e0962ed82c36519e919eb597c9b603f51', variant: "secondary", kind: "icon", onClick: this.onDeleteClickHandler }, index$1.h("rtk-icon", { key: 'b936e54ae44e1d54b73adf38a92551fbea0299c5', icon: this.iconPack.dismiss }))), this.attachment.type === 'image' ? (index$1.h("img", { class: "preview-image", src: this.filePreview })) : (index$1.h("div", { class: "preview-file" }, index$1.h("span", null, this.filePreview)))))));
+        return (index$1.h(index$1.Host, { key: 'f6ede093bcdf8100807baab4de2a296fc4960a07' }, index$1.h("div", { key: 'b19bbe9b2ea58ea4adccc2028a1b24ea6bc9f0a9', class: "preview-overlay" }, index$1.h("div", { key: 'cbb2bfcb3a50e6e7fbfd4109eb340ba51d6a162d', class: "preview" }, index$1.h("rtk-tooltip", { key: '15b50c547470b0fa22014e0992a1c7e26b234573', label: this.t('chat.cancel_upload') }, index$1.h("rtk-button", { key: '940332a51747af3368ffec497d5ef76fa64ecf75', variant: "secondary", kind: "icon", onClick: this.onDeleteClickHandler }, index$1.h("rtk-icon", { key: 'cc04b0ac70753e970ff638f187ad5f702dc3656b', icon: this.iconPack.dismiss }))), this.attachment.type === 'image' ? (index$1.h("img", { class: "preview-image", src: this.filePreview })) : (index$1.h("div", { class: "preview-file" }, index$1.h("span", null, this.filePreview)))))));
     }
     static get watchers() { return {
         "attachment": ["onAttachmentChange"]
@@ -1247,7 +1254,7 @@ const RtkEmojiPicker = class {
         return (index$1.h("div", { id: "emoji-grid", class: "scrollbar max-w-40" }, this.filteredEmojis.map((e) => (index$1.h("rtk-button", { key: `emoji-button-${e.name}`, class: "emoji", variant: "ghost", kind: "icon", title: e.name, onClick: () => this.handleEmojiClick(e.emoji) }, e.emoji)))));
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'e099d5996a16c659de17ca9a36fcd79a9f02f400' }, index$1.h("div", { key: '2a3e300c9625b877feb2b6780df7d1a9851cb7f3', class: 'close-parent' }, index$1.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') }, index$1.h("rtk-icon", { key: '040069093f7243bf5075d55b2c081c564d885a8f', icon: this.iconPack.dismiss }))), index$1.h("div", { key: '372a32be35dea5200323720e221424b5138cc4ab', class: 'emoji-parent' }, index$1.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 (index$1.h(index$1.Host, { key: '6581d26d75a7b869d0ba00243ec74ee06b927e7d' }, index$1.h("div", { key: '3705d8c557ac3e05769171998e9176e7e40a232c', class: 'close-parent' }, index$1.h("rtk-button", { key: 'b437e579cb828a709de255ddfa6b751e4bdfbe51', variant: "ghost", kind: "icon", class: "close", onClick: () => { var _a; return (_a = this.pickerClose) === null || _a === void 0 ? void 0 : _a.emit(); }, "aria-label": this.t('close') }, index$1.h("rtk-icon", { key: '7fac79a21c6be57156d17ceeff9ceb2834bbf709', icon: this.iconPack.dismiss }))), index$1.h("div", { key: '46cb2af6654ef36b7258baf47e3cd9e5bd60bf89', class: 'emoji-parent' }, index$1.h("input", { key: 'cfde33638d531f9bac1b1bf25d966a369f4dfb38', value: this.filterVal, onInput: (event) => this.handleInputChange(event.target), placeholder: this.t('search'), ref: (el) => (this.inputElement = el) }), this.mapEmojiList())));
     }
 };
 __decorate$b([
@@ -1280,7 +1287,7 @@ const RtkEmojiPickerButton = class {
         this.t = uiStore.useLanguage();
     }
     render() {
-        return (index$1.h("rtk-tooltip", { key: 'bcde14fb2c3a6544882502e65ffda7a6b3b6f13d', label: this.t('chat.send_emoji') }, index$1.h("rtk-button", { key: 'd82fa78c4ffe48c24131a6e38f087548f540fefa', variant: "ghost", kind: "icon", class: { active: this.isActive }, title: this.t('chat.send_emoji') }, index$1.h("rtk-icon", { key: '791bbe2537f1aeb064c5e9ccbbf4af37b706ec2a', icon: this.iconPack.emoji_multiple }))));
+        return (index$1.h("rtk-tooltip", { key: '45ef1f18da6d1ecc3c02882590cd22e930461562', label: this.t('chat.send_emoji') }, index$1.h("rtk-button", { key: '6504abab2f1c6537443699c53a8cbdcf13530cba', variant: "ghost", kind: "icon", class: { active: this.isActive }, title: this.t('chat.send_emoji') }, index$1.h("rtk-icon", { key: 'd730c81abce72d9c3226f1f666941e1136bee77f', icon: this.iconPack.emoji_multiple }))));
     }
 };
 __decorate$a([
@@ -1311,7 +1318,7 @@ const RtkFileMessageView = class {
         this.iconPack = uiStore.defaultIconPack;
     }
     render() {
-        return (index$1.h("div", { key: 'cdd46a1be912f807688dc86671dddd2fa5b9e7c9', class: "file" }, index$1.h("rtk-button", { key: '20bd6c448ec64902989cd742a8f18de32e368194', variant: "secondary", kind: "icon", onClick: () => file.downloadFile(string.sanitizeLink(this.url), { name: this.name, fallbackName: 'file' }), part: "button" }, index$1.h("rtk-icon", { key: '11ac30db5146132be8aaba67a79f66f8aba7bb8d', icon: this.iconPack.download })), index$1.h("div", { key: '342dd8daa944a5857a6519339b4d3bfb6c369eda', class: "file-data" }, index$1.h("div", { key: 'e161743b75677b1e81d09d7c373be494ccf8411a', class: "name" }, this.name), index$1.h("div", { key: '99f2d8d77ef3c129aa0c229260f6e79901ce268c', class: "file-data-split" }, index$1.h("div", { key: '7b9beadca2a810c151fb1ad43ee7c47ba451a37a', class: "ext" }, file.getExtension(this.name)), index$1.h("span", { key: 'd55f69a96bbe26c262461fa87f1a0a506854cf59', class: "divider" }), index$1.h("div", { key: 'cad33d263ab75aeb3083886e83063b8ccb2ea976', class: "size" }, file.getFileSize(this.size))))));
+        return (index$1.h("div", { key: '5cc29b4780f581a2f8b045e5051bcc66f3fdaf55', class: "file" }, index$1.h("rtk-button", { key: '4100b47bc1d72f08ec5fe645291bfbb58e3a6486', variant: "secondary", kind: "icon", onClick: () => file.downloadFile(string.sanitizeLink(this.url), { name: this.name, fallbackName: 'file' }), part: "button" }, index$1.h("rtk-icon", { key: '52ae14abb7c27b89861d5ba4c907d606257628c9', icon: this.iconPack.download })), index$1.h("div", { key: '02c9ad8d173172a85cc474273a966607d456360e', class: "file-data" }, index$1.h("div", { key: '6ceca21685d04f175006ba35a6de194cc98879ad', class: "name" }, this.name), index$1.h("div", { key: 'b07d07bcaedee3fd6fbcfe81ce2f6bf757655b5f', class: "file-data-split" }, index$1.h("div", { key: '280635ef486de02bc68ca3e774be14fa5a461d1c', class: "ext" }, file.getExtension(this.name)), index$1.h("span", { key: '84f72d8b37b7d15c257faed036b76c737eec780b', class: "divider" }), index$1.h("div", { key: '1b88f48f51afe3fceb57920c3d17f586e848a25f', class: "size" }, file.getFileSize(this.size))))));
     }
 };
 __decorate$9([
@@ -1367,7 +1374,7 @@ const RtkFilePickerButton = class {
     render() {
         const label = this.label || this.t('chat.send_file');
         const icon = this.iconPack[this.icon];
-        return (index$1.h("rtk-tooltip", { key: '78ef1fd3a42656601c94561bbfc63f888d8180d3', label: label }, index$1.h("rtk-button", { key: 'a0a82e689c2e3a344936db1b3253e36def3a0ce5', variant: "ghost", kind: "icon", onClick: () => this.uploadFile(), title: label }, index$1.h("rtk-icon", { key: '1651a9f460e3851ff5296f05cf08554f9da21703', icon: icon }))));
+        return (index$1.h("rtk-tooltip", { key: '057a0a5a714dbbde228e3481e53adea4f88fb3ad', label: label }, index$1.h("rtk-button", { key: '04193df1053b14687fb9464a122b9158707bdda1', variant: "ghost", kind: "icon", onClick: () => this.uploadFile(), title: label }, index$1.h("rtk-icon", { key: 'ed2fce30b93dfce9dd6b967d5993c93496cf3388', icon: icon }))));
     }
 };
 __decorate$8([
@@ -1427,7 +1434,7 @@ const RtkImageMessageView = class {
         this.status = 'loading';
     }
     render() {
-        return (index$1.h("div", { key: '47b2dd8f8dfc0d2aa20e80b513f802e1ebc09153', class: { image: true, loaded: this.status === 'loaded' } }, index$1.h("img", { key: 'fba4cfc015beb86040ec74b2a44e2163744a67c6', src: string.sanitizeLink(this.url), onLoad: () => {
+        return (index$1.h("div", { key: '066606e6ae62634b2466bb46b453e0c2d91b17ea', class: { image: true, loaded: this.status === 'loaded' } }, index$1.h("img", { key: 'f042e5d3c1a6341e9fc0845e6643016f1be5b5f7', src: string.sanitizeLink(this.url), onLoad: () => {
                 this.status = 'loaded';
             }, onError: () => {
                 this.status = 'errored';
@@ -1435,9 +1442,9 @@ const RtkImageMessageView = class {
                 if (this.status === 'loaded') {
                     this.onPreview.emit(this.url);
                 }
-            } }), this.status === 'loading' && (index$1.h("div", { key: '4da0a3ab39d782e9affe7702a19232747bb4581c', class: "image-spinner", title: this.t('chat.img.loading'), "aria-label": this.t('chat.img.loading') }, index$1.h("rtk-spinner", { key: 'dea7afe2c92dd5c7c71620bc7b9089f743ef1aa2', iconPack: this.iconPack }))), this.status === 'errored' && (index$1.h("div", { key: 'ab303ce11b7182d20c64b00638a1c8be59aea774', class: "image-errored", title: this.t('chat.error.img_not_found'), "aria-label": this.t('chat.error.img_not_found') }, index$1.h("rtk-icon", { key: 'e14eb63cc4b2d18a5abd921e25ef305095f61c17', icon: this.iconPack.image_off }))), this.status === 'loaded' && (index$1.h("div", { key: 'ccceaa5cc5821ce9b4ddab742001cee78135636a', class: "actions" }, index$1.h("rtk-button", { key: 'de49516247d9655cc74afcd58bc50771e2594dca', class: "action", variant: "secondary", kind: "icon", onClick: () => {
+            } }), this.status === 'loading' && (index$1.h("div", { key: 'd4a5030468fbf70afae62bd55ae4d0fa989e15c2', class: "image-spinner", title: this.t('chat.img.loading'), "aria-label": this.t('chat.img.loading') }, index$1.h("rtk-spinner", { key: '216aba361a46cc100e7d26cc2daf1ffb0948d695', iconPack: this.iconPack }))), this.status === 'errored' && (index$1.h("div", { key: '01f5da8f70872c9fa22dc9a9b70b046b0001d05b', class: "image-errored", title: this.t('chat.error.img_not_found'), "aria-label": this.t('chat.error.img_not_found') }, index$1.h("rtk-icon", { key: '0f7e6fed2730f6366d07fc6afddb2b247e9b7d3a', icon: this.iconPack.image_off }))), this.status === 'loaded' && (index$1.h("div", { key: '5ac0e61c65a88a8d6b9ee54c900b856854d1b84b', class: "actions" }, index$1.h("rtk-button", { key: 'fd83dfecd7b5d9c3976374c3c55731b1f026fc0a', class: "action", variant: "secondary", kind: "icon", onClick: () => {
                 this.onPreview.emit(this.url);
-            } }, index$1.h("rtk-icon", { key: 'bd1ea608e4846d994a418236dca7856570bd689d', icon: this.iconPack.full_screen_maximize })), index$1.h("rtk-button", { key: '266a860a4ab4d6cf76bd89bb35c987efbc89a593', class: "action", variant: "secondary", kind: "icon", onClick: () => file.downloadFile(this.url, { fallbackName: 'image' }) }, index$1.h("rtk-icon", { key: 'ec26862ff95e116d519280c7e62ed7a7e1ede273', icon: this.iconPack.download }))))));
+            } }, index$1.h("rtk-icon", { key: '3ca7384fa28e6716345acacf9225ae9471ff8d63', icon: this.iconPack.full_screen_maximize })), index$1.h("rtk-button", { key: '198787808c389e4df48d3609a53c2d27cf2e7fb3', class: "action", variant: "secondary", kind: "icon", onClick: () => file.downloadFile(this.url, { fallbackName: 'image' }) }, index$1.h("rtk-icon", { key: 'f38fe3da48d1fc854001c719164c95f0673808c5', icon: this.iconPack.download }))))));
     }
 };
 __decorate$7([
@@ -1528,7 +1535,7 @@ const RtkMarkdownView = class {
         const slicedMessage = this.text.slice(0, this.maxLength);
         const withReply = chat.extractReplyBlock(slicedMessage, true);
         const withoutReply = chat.stripOutReplyBlock(slicedMessage);
-        return (index$1.h("p", { key: 'c33735507a0798dffc360f01793bc7b0caaac159' }, withReply.length !== 0 && index$1.h("blockquote", { key: 'c0a4271ee4c843b6e73c8300a8026a3ec8dd5fe3' }, this.renderMessage(withReply)), withoutReply.length !== 0 && this.renderMessage(withoutReply)));
+        return (index$1.h("p", { key: '787e6d3177f4faf1c8dcd7c73d83a6de9c57b42b' }, withReply.length !== 0 && index$1.h("blockquote", { key: '1c4b82fb870994e6707d35adcd5e6f2f0e65dd26' }, this.renderMessage(withReply)), withoutReply.length !== 0 && this.renderMessage(withoutReply)));
     }
 };
 RtkMarkdownView.style = RtkMarkdownViewStyle0;
@@ -1909,7 +1916,7 @@ const RtkMenu$1 = class {
         });
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'b019210ff85bde38c61855f8ac38aa8b927aa857' }, index$1.h("span", { key: '14f689eed0672642c3a181ee5d197d7a9b5c00a8', id: "trigger", ref: (el) => (this.triggerEl = el), onClick: () => {
+        return (index$1.h(index$1.Host, { key: '15461c803838be1651df6116a61598ce8ab988f9' }, index$1.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';
@@ -1918,7 +1925,7 @@ const RtkMenu$1 = class {
                 else {
                     this.menuListEl.style.display = 'none';
                 }
-            } }, index$1.h("slot", { key: 'f1ab2111e0ad309df5b38e4f189d821b8ab50a4a', name: "trigger" })), index$1.h("span", { key: 'ec03b8c7ff60dd21dce3bc1f9b473ab59ec37ace', part: "menu-list", id: "menu-list", ref: (el) => (this.menuListEl = el) }, index$1.h("slot", { key: 'bc05fba324ccf4360340b070c8d4f3723a72cf6e' }))));
+            } }, index$1.h("slot", { key: 'af622c9dbb3394cb46a6bb909a45c5e3248b1a09', name: "trigger" })), index$1.h("span", { key: '445258e31b4b775fbc22b268234fe15a33f809c9', part: "menu-list", id: "menu-list", ref: (el) => (this.menuListEl = el) }, index$1.h("slot", { key: '87396622c6078253736cbe43a1cac55c6f90754f' }))));
     }
 };
 __decorate$6([
@@ -1953,7 +1960,7 @@ const RtkMenuItem = class {
         this.t = uiStore.useLanguage();
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '7ae0e75aa59e0ce3b6a919eb258f218d84033bdd', class: { [this.menuVariant]: true } }, index$1.h("slot", { key: '4fd6d31e2ecb9f99bdc7442e796c5dadcb8bcf74', name: "start" }), index$1.h("slot", { key: '04ef7d82759ff42015480b3cd789d941ffa574f0' }), index$1.h("slot", { key: 'ad3c22309470a6b71d6b6b9f0f8b58cde7f76f3c', name: "end" })));
+        return (index$1.h(index$1.Host, { key: '8679dae05e846bb8b83a1dbc9580aa2dcad18ccd', class: { [this.menuVariant]: true } }, index$1.h("slot", { key: 'da53376b8188bfc47f904d348212fedff932b03a', name: "start" }), index$1.h("slot", { key: '4394a3afa13bd298880c1be5255f5a004c5ed42e' }), index$1.h("slot", { key: '2be62c70172912e6516ce207b571ea4794aa4f6c', name: "end" })));
     }
 };
 __decorate$5([
@@ -1988,7 +1995,7 @@ const RtkMenuList = class {
         this.t = uiStore.useLanguage();
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '1dd2702af95e0270488e6be1813b5979bd676697', class: { [this.menuVariant]: true } }, index$1.h("slot", { key: 'cbe97d571726800ad4a3e25b8c0e261b9a0cd40a' })));
+        return (index$1.h(index$1.Host, { key: 'b743da0bae39c93cff7896968a64c84166b8a751', class: { [this.menuVariant]: true } }, index$1.h("slot", { key: '46ca973e68fccbf5c8c7544f61bb9745840d0054' })));
     }
 };
 __decorate$4([
@@ -1999,7 +2006,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-1, 4px);top:var(--rtk-space-1, 4px);border-radius:var(--rtk-border-radius-lg, 12px)}rtk-menu rtk-icon{height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);cursor:pointer}.actions{display:flex;align-items:center;justify-content:center;border-width:1px;border-style:solid;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-brand-600, 13 81 253) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-bg-opacity));padding:var(--rtk-space-1, 4px);border-radius:var(--rtk-border-radius-md, 8px);border-width:var(--rtk-border-width-none, 0);border-style:none}.actions rtk-icon{height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.incoming rtk-avatar{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}.incoming .actions{--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity))}@media (min-width: 400px){.avatar{display:flex;width:var(--rtk-space-6, 24px)}.avatar rtk-avatar{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px);font-size:10px;overflow:clip;border-radius:9999px}}@media (hover: hover){rtk-menu{visibility:hidden}.body:hover rtk-menu{visibility:visible}}";
+const rtkMessageViewCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}.scrollbar{scrollbar-width:thin;scrollbar-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n    var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar{height:var(--rtk-space-1\\.5, 6px);width:var(--rtk-space-1\\.5, 6px);border-radius:9999px;background-color:var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar-thumb{border-radius:9999px;background-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))}:host{max-width:var(--rtk-space-96, 384px)}.message-wrapper{display:flex;flex-direction:row-reverse;align-items:flex-start;gap:var(--rtk-space-2, 8px)}.message-wrapper.incoming{flex-direction:row}.message{display:flex;flex-direction:column;align-items:flex-end}.incoming .message{display:flex;flex-direction:column;align-items:flex-start}.header{margin-top:var(--rtk-space-1, 4px);margin-bottom:var(--rtk-space-1, 4px);align-self:flex-end;color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));font-size:12px;font-weight:600}.incoming .header{align-self:flex-start}.body{display:flex;flex-direction:column;min-width:var(--rtk-space-24, 96px);font-family:var(--rtk-font-family, sans-serif);color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));font-size:14px;line-height:1.375;position:relative}.bubble{max-width:90%;padding:var(--rtk-space-2, 8px);border-width:1px;border-style:solid;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-brand-600, 13 81 253) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));border-radius:var(--rtk-border-radius-md, 8px)}.incoming .bubble{--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}.metadata{margin-top:var(--rtk-space-2, 8px);display:flex;flex-direction:row;align-items:center;gap:var(--rtk-space-2, 8px);align-self:flex-end;font-size:11px;color:rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76))}.avatar{display:none}rtk-menu{position:absolute;right:var(--rtk-space-1, 4px);top:var(--rtk-space-1, 4px);border-radius:var(--rtk-border-radius-lg, 12px)}rtk-menu rtk-icon{height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);cursor:pointer}.actions{display:flex;align-items:center;justify-content:center;border-width:1px;border-style:solid;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-brand-600, 13 81 253) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-bg-opacity));padding:var(--rtk-space-1, 4px);border-radius:var(--rtk-border-radius-md, 8px);border-width:var(--rtk-border-width-none, 0);border-style:none}.actions rtk-icon{height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.incoming rtk-avatar{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}.incoming .actions{--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity))}@media (min-width: 400px){.avatar{display:flex;width:var(--rtk-space-6, 24px)}.avatar rtk-avatar{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px);font-size:10px;overflow:clip;border-radius:9999px}}@media (hover: hover){rtk-menu{visibility:hidden}.body:hover rtk-menu{visibility:visible}}";
 const RtkMessageViewStyle0 = rtkMessageViewCss;
 var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -2020,6 +2027,8 @@ const RtkMessageView = class {
         this.actions = [];
         /** Appearance */
         this.variant = 'bubble';
+        /** Is message pinned */
+        this.pinned = false;
         /** Render */
         this.viewType = 'outgoing';
         /** Hides avatar */
@@ -2037,7 +2046,7 @@ const RtkMessageView = class {
         return (index$1.h("rtk-menu", { placement: this.isSelf ? 'bottom-start' : 'bottom-end', offset: 1 }, index$1.h("button", { slot: "trigger", class: "actions" }, index$1.h("rtk-icon", { icon: this.iconPack.chevron_down })), index$1.h("rtk-menu-list", { menuVariant: this.isSelf ? 'primary' : 'secondary' }, this.actions.map((action) => (index$1.h("rtk-menu-item", { menuVariant: this.isSelf ? 'primary' : 'secondary', onClick: () => this.onAction.emit(action.id) }, action.icon && index$1.h("rtk-icon", { icon: action.icon, slot: "start" }), action.label))))));
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '96feddf08120ae0e2aa89e955a16e8e4a43c78fb' }, index$1.h("div", { key: '79184165b5312ea52f0cbb57e25cfd4a757fc65f', class: { 'message-wrapper': true, [this.viewType]: true } }, !this.hideAvatar && (index$1.h("aside", { key: 'a2ccd72fbec0153282db018fb3473bf10f2176e9', class: "avatar", part: "avatar" }, index$1.h("rtk-avatar", { key: 'ecc9f5f77de0a47dfb5985c6f48e5f117c64b45e', participant: { name: this.authorName, picture: this.avatarUrl }, size: "sm" }))), index$1.h("div", { key: '3a72dc77c04eeb4d6015bf46dd9cc0bc9f533943', class: "message", part: "message" }, !this.hideAuthorName && (index$1.h("div", { key: '153a94b9fa6b23dac3fe4da62a22cbf66e4e73dc', class: "header" }, this.authorName, " ", this.isSelf ? ' (You)' : '')), index$1.h("div", { key: 'a36d44da27ea1a4d18feb91726d22e7adf983914', class: { body: true, bubble: this.variant === 'bubble' } }, index$1.h("slot", { key: '4ef8ca3766b562201e4e4443438c91679f09d471' }), !this.hideMetadata && !!this.time && (index$1.h("div", { key: '66754f1dd1a65ebdcda24449475b1f603db3ff1e', class: "metadata", title: date.formatDateTime(this.time) }, date.elapsedDuration(this.time, new Date(Date.now())))), this.actions.length !== 0 && this.renderActions())))));
+        return (index$1.h(index$1.Host, { key: '7a4f7b9cd801a12871077b56c96213d6c7f53685' }, index$1.h("div", { key: '2b1731b82f709cf90f6d7ab239a8a516886de227', class: { 'message-wrapper': true, [this.viewType]: true } }, !this.hideAvatar && (index$1.h("aside", { key: '9963f792a5475c74e8170c0baec328162828163d', class: "avatar", part: "avatar" }, index$1.h("rtk-avatar", { key: 'e09b73fbba38f108809e6444940e8053c71a0276', participant: { name: this.authorName, picture: this.avatarUrl }, size: "sm" }))), index$1.h("div", { key: 'cdd752fa1553c5977251dcb0a32ecc5b65984514', class: "message", part: "message" }, !this.hideAuthorName && (index$1.h("div", { key: 'd0a758ac727a0a9b1757e8a61caf57bfadc20d08', class: "header" }, this.authorName, " ", this.isSelf ? ' (You)' : '')), index$1.h("div", { key: '32687e9a0462eaad2d625eb93d82205a23f99f51', class: { body: true, bubble: this.variant === 'bubble' } }, index$1.h("slot", { key: 'ca2022939cb8becf5d81655a37e344ff930a3251' }), !this.hideMetadata && !!this.time && (index$1.h("div", { key: '11dec318a44909b3080dcd29b3a6c4074ce394e3', class: "metadata", title: date.formatDateTime(this.time) }, this.pinned && index$1.h("rtk-icon", { key: '7a68a35c7113407f3676ee09de42fcab50485f39', icon: this.iconPack.pin, size: "sm" }), date.elapsedDuration(this.time, new Date(Date.now())))), this.actions.length !== 0 && this.renderActions())))));
     }
 };
 __decorate$3([
@@ -2045,9 +2054,37 @@ __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;
+/**
+ * HOW INFINITE SCROLL WORKS:
+ *
+ * We use intersectionObserver to scroll up.
+ * We use scrollEnd listener to scroll down.
+ *
+ * Why?
+ * intersectionObserver doesn't work reliably for 2 way scrolling but has great ux,
+ * so we use it to smoothly scroll up.
+ *
+ * We have empty divs at the top and bottom ($topRef, $bottomRef)
+ * which act as triggers to tell that we have reached the top or end of our messages and need to fetch new messages,
+ *
+ * When scrolling up, we can't remove pages as intersectionObserver relies on
+ * the index of dom elements to work properly.
+ * So instead, we fetch older messages and push them to the end of the 2d array
+ * if length exceeds pagesAllowed, we free up the pages and keep the first empty index in memory (firstEmptyIndex).
+ *
+ * For scrolling down, when scroll ends we see if the bottomRef is in view.
+ * If yes, we fetch the new page and insert it at the firstEmptyIndex.
+ * We update timestamps & firstEmptyIndex, then we rerender.
+ *
+ * If we have exceeded our page allowance we delete old pages.
+ *
+ * In this case deleting pages is okay as we are not relying on the index of dom elements to detect page end.
+ *
+ * This also simplifies the code because when a user scrolls up we do not need to manage a lastEmptyIndex.
+ */
 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")
@@ -2061,274 +2098,257 @@ var __decorate$2 = (undefined && undefined.__decorate) || function (decorators,
 const RtkPaginatedList = class {
     constructor(hostRef) {
         index$1.registerInstance(this, hostRef);
+        /**
+         * when scrolling up, we can't remove pages as intersectionObserver relies on
+         * the index of dom elements to stay stable.
+         * So, instead we free up the pages and keep the last empty index in memory.
+         */
+        this.firstEmptyIndex = -1;
+        this.maxTS = 0;
+        // the length of pages will always be pageSize + 2
+        this.pages = [];
+        /** label to show when empty */
+        this.emptyListLabel = null;
+        this.rerenderBoolean = false;
+        this.showEmptyListLabel = false;
         /** Icon pack */
         this.iconPack = uiStore.defaultIconPack;
         /** Language */
         this.t = uiStore.useLanguage();
-        /** label to show when empty */
-        this.emptyListLabel = null;
         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();
-        };
+         * Even when auto scroll is enabled, we only want to scroll if a new realtime message has arrived.
+         * This variable tells us if we should respect auto scroll after a new page has been loaded.
+         * It is also used by the scroll to bottom button.
+         *  */
+        this.shouldScrollToBottom = false;
+        /** UI Indicator for the "scroll to bottom" button.
+         * Toggles on when a new node is added and autoscroll is disabled.
+         * Toggles off when all nodes are loaded */
+        this.showNewMessagesCTR = false;
         this.observe = (el) => {
             if (!el)
                 return;
             this.intersectionObserver.observe(el);
         };
+        this.isAtBottom = () => {
+            const rect = this.$bottomRef.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;
+        // Always update the maxTS. New messages will load on scroll till the end cursor (newTS) reaches this value.
+        this.maxTS = Math.max(this.maxTS, node.timeMs);
+        // if we are at the bottom of the page
+        if (this.firstEmptyIndex === -1) {
+            // append messages to the page if page has not reached full capacity
+            if (this.pages[0].length < this.pageSize) {
+                this.pages[0].unshift(node);
+                this.newTS = node.timeMs;
+                this.rerender();
+            }
+            else {
+                // if page is at full capacity, load next page
+                this.loadNextPage();
+            }
         }
-        this.addNodeToRender(node, false);
-        this.rerender();
-    }
-    /**
-     * On node deleted
-     */
-    async onNodeDelete(key) {
-        const oldLength = this.pagesToRender.flat().length;
-        this.pagesToRender = this.pagesToRender.map((page) => page.filter((item) => item.id !== key));
-        if (oldLength !== this.pagesToRender.flat().length) {
-            this.rerender();
+        // If autoscroll is enabled, this method will scroll to the bottom
+        if (this.autoScroll) {
+            this.shouldScrollToBottom = true;
+            this.scrollToBottom();
         }
+        else {
+            this.showNewMessagesCTR = true;
+        }
+    }
+    // this method is called recursively based on shouldScrollToBottom (see scrollEnd listener)
+    scrollToBottom() {
+        this.$bottomRef.scrollIntoView({ behavior: 'smooth' });
     }
     /**
-     * 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;
+     * Deletes a node anywhere from the list
+     * @param {string} id - The id of the node to delete
+     * */
+    async onNodeDelete(id) {
+        // Iterate only over pages that have content (not empty)
+        for (let i = this.pages.length - 1; i > this.firstEmptyIndex; i--) {
+            const index = this.pages[i].findIndex((node) => node.id === id);
+            // message in view
+            if (index !== -1) {
+                // delete message
+                this.pages[i].splice(index, 1);
+                if (i === this.firstEmptyIndex + 1) {
+                    //  if newest page is empty, update first empty index
+                    if (this.pages[i].length === 0)
+                        this.firstEmptyIndex++;
+                    // update timestamp, first empty index could be -1, so we need to cap it at 0
+                    this.newTS = this.pages[Math.max(this.firstEmptyIndex, 0)][0].timeMs;
+                }
+                else if (i === this.firstEmptyIndex + this.pagesAllowed) {
+                    //  if oldest page is empty, remove it
+                    if (this.pages[i].length === 0)
+                        this.pages.pop();
+                    // update timestamp
+                    const lastPage = this.pages[this.firstEmptyIndex + this.pagesAllowed];
+                    this.oldTS = lastPage[lastPage.length - 1].timeMs;
+                }
+                this.rerender();
             }
-            return item;
-        }));
-        if (shouldRerender)
-            this.rerender();
-    }
-    onItemChanged(newItemId, oldItemId) {
-        if (newItemId !== oldItemId) {
-            this.pagesToRender = [[]];
-            this.loadFirstPage().then(() => this.rerender());
         }
     }
+    /**
+     * 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) { }
+    rerender() {
+        this.rerenderBoolean = !this.rerenderBoolean;
+    }
     connectedCallback() {
         this.rerender = debounce.debounce(this.rerender.bind(this), 50, { maxWait: 200 });
-        this.autoScroll = true;
         this.intersectionObserver = new IntersectionObserver((entries) => {
-            index$1.writeTask(() => {
+            index$1.writeTask(async () => {
                 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();
+                        this.isLoadingTop = true;
+                        await this.loadPrevPage();
+                        this.isLoadingTop = false;
                     }
                 }
             });
         });
     }
-    disconnectedCallback() {
-        this.intersectionObserver.disconnect();
-    }
     componentDidLoad() {
-        /**
-         * Adding observes here so that on the first render we scroll down
-         * and shouldRenderNewNodes remains true
-         */
-        this.loadFirstPage();
         this.observe(this.$topRef);
-        this.observe(this.$bottomRef);
-    }
-    componentDidRender() {
-        if (this.shouldRenderNewNodes && this.autoScroll)
-            scroll.smoothScrollToBottom(this.$paginatedList);
-    }
-    loadFirstPage() {
-        return this.loadPage(this.currentTime(), this.pageSize, true, (data) => {
-            if (data.length === 0) {
-                this.showEmptyListLabel = true;
-            }
-        });
-    }
-    loadTop() {
-        /**
-         * If there is only one unfilled page or no page, no need to check
-         * for top since it will be empty
-         */
-        if (this.pagesToRender.length === 0)
-            return;
-        if (this.pagesToRender.length === 1 && this.pagesToRender[0].length < this.pageSize)
-            return;
-        /**
-         * TODO: Make this more flexible currently this only works with chat
-         */
-        const oldestVNode = this.pagesToRender[0][0];
-        const oldestTimestamp = oldestVNode.timeMs;
-        // TODO: scrollIntoView
-        const onPageRendered = () => { }; // oldestVNode.$elm$?.scrollIntoView();
-        this.isLoadingTop = true;
-        this.loadPage(oldestTimestamp - 1, this.pageSize, true, onPageRendered, 'top');
-    }
-    loadBottom() {
-        /**
-         * If there is only one unfilled page or no page, no need to check
-         * for top since it will be empty
-         */
-        if (this.pagesToRender.length === 0) {
-            this.shouldRenderNewNodes = true;
-            return;
-        }
-        if (this.pagesToRender.length === 1 && this.pagesToRender[0].length < this.pageSize) {
-            this.shouldRenderNewNodes = true;
-            return;
-        }
-        const newestVNode = this.pagesToRender.at(-1).at(-1);
-        const newestTimestamp = newestVNode.timeMs;
-        // TODO: scrollIntoView
-        const onPageRendered = () => scroll.smoothScrollToBottom(this.$paginatedList);
-        this.isLoadingBottom = true;
-        this.loadPage(newestTimestamp + 1, this.pageSize, false, onPageRendered, 'bottom');
-    }
-    addNodeToRender(node, addToStart) {
-        if (addToStart) {
-            const firstPage = this.pagesToRender[0];
-            if (firstPage && (firstPage === null || firstPage === void 0 ? void 0 : firstPage.length) < this.pageSize) {
+        if (this.$containerRef) {
+            this.$containerRef.onscrollend = async () => {
                 /**
-                 * If first page is not full then just add to that page
+                 * Load new page if:
+                 * if there are nodes to load at the bottom (maxTS > newTS)
+                 * or if there are pages to fill at the bottom (firstEmptyIndex > -1)
                  */
-                firstPage.unshift(node);
-            }
-            else {
-                /**
-                 * If first page is full then add a new page to the start
-                 */
-                const newPage = [node];
-                this.pagesToRender.unshift(newPage);
-                this.removeLastPageIfNeeded(false);
-            }
-        }
-        else {
-            const [lastPage] = this.pagesToRender.slice(-1);
-            if (lastPage && (lastPage === null || lastPage === void 0 ? void 0 : lastPage.length) < this.pageSize) {
-                /**
-                 * If last page is not full then just add it
-                 */
-                lastPage.push(node);
-            }
-            else {
-                /**
-                 * If last page is full add a new page with just
-                 * this node
-                 */
-                const newPage = [node];
-                this.pagesToRender.push(newPage);
-                this.removeLastPageIfNeeded(true);
-            }
+                if (this.isAtBottom() && (this.maxTS > this.newTS || this.firstEmptyIndex > -1)) {
+                    this.isLoadingBottom = true;
+                    await this.loadNextPage();
+                    this.isLoadingBottom = false;
+                    if (this.shouldScrollToBottom)
+                        this.scrollToBottom();
+                }
+            };
         }
     }
-    /**
-     * @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) {
+    async loadPrevPage() {
+        if (this.isLoading)
+            return;
+        /**
+         * NOTE(ikabra): this case also runs on initial load
+         * if scrolling up ->
+         * fetch older messages and push to the end of the array
+         * cleanup 1st non empty page from the array if length exceeds pagesAllowed
+         */
+        // if no old timestamp, it means we are at initial state
+        if (!this.oldTS)
+            this.oldTS = new Date().getTime();
+        // load data
         this.isLoading = true;
-        const data = (await this.fetchData(timestamp, size, reversed));
+        const data = await this.fetchData(this.oldTS - 1, this.pageSize, true);
         this.isLoading = false;
-        if (direction === 'top') {
-            this.isLoadingTop = false;
-            this.hasMoreDataAtTop = (data === null || data === void 0 ? void 0 : data.length) > 0;
-        }
-        if (direction === 'bottom') {
-            this.isLoadingBottom = false;
-        }
-        if (!(data === null || data === void 0 ? void 0 : data.length)) {
+        // 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[this.pages.length - this.pagesAllowed - 1] = [];
             /**
-             * While scrolling down if there were no new items found
-             * then start rendering new nodes;
+             * find last non empty page in range (this.pages.length, this.firstEmptyIndex)
+             * we are doing this because any of the middle pages in the currently rendered pages
+             * could be empty as we allow deleting messages.
+             * This helps us set the first empty index correctly.
              */
-            if (!reversed) {
-                this.hasNewNodesToRender = false;
-                this.shouldRenderNewNodes = true;
+            for (let i = this.firstEmptyIndex + 1; i < this.pages.length; i++) {
+                if (this.pages[i].length > 0)
+                    break;
+                this.firstEmptyIndex = i;
             }
-            onPageRendered([]);
-            return;
         }
-        data.forEach((node) => this.addNodeToRender(node, reversed));
+        // update the old timestamp
+        const lastPage = this.pages[this.pages.length - 1];
+        this.oldTS = lastPage[lastPage.length - 1].timeMs;
+        // update the new timestamp
+        this.newTS = this.pages[this.firstEmptyIndex + 1][0].timeMs;
         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();
+    async loadNextPage() {
+        if (this.isLoading)
+            return;
+        // new timestamp needs to be assigned by loadPrevPage method
+        if (!this.newTS) {
+            this.showNewMessagesCTR = false;
+            this.shouldScrollToBottom = false;
+            return;
         }
-    }
-    onDownArrowClicked() {
-        /**
-         * Load the freshest pages
-         */
-        this.loadBottom();
-    }
-    onLoadMoreOnTopClicked() {
-        this.loadTop();
+        // load data
+        this.isLoading = true;
+        const data = await this.fetchData(this.newTS + 1, this.pageSize, false);
+        this.isLoading = false;
+        // no more new messages to load
+        if (!data.length) {
+            this.showNewMessagesCTR = false;
+            this.shouldScrollToBottom = false;
+            // remove extra pages from the start if any (could be due to users deleting messages)
+            this.pages = this.pages.filter((page) => page.length > 0);
+            this.firstEmptyIndex = -1;
+            return;
+        }
+        // when filling empty pages
+        if (this.firstEmptyIndex > -1) {
+            this.pages[this.firstEmptyIndex] = data.reverse();
+        }
+        else {
+            // when already at the bottom and loading messages in realtime
+            this.pages.unshift(data.reverse());
+        }
+        if (this.pages.length > this.pagesAllowed) {
+            this.pages.pop();
+        }
+        // smallest value for firstEmptyIndex can be -1, so we cap the index at 0
+        this.newTS = this.pages[Math.max(0, this.firstEmptyIndex)][0].timeMs;
+        // remove all empty pages from the end
+        for (let i = this.pages.length - 1; i > this.firstEmptyIndex; i--) {
+            if (this.pages[i].length > 0)
+                break;
+            // if page is empty, remove it
+            this.pages.pop();
+        }
+        // update the old timestamp
+        const lastPage = this.pages[this.pages.length - 1];
+        this.oldTS = lastPage[lastPage.length - 1].timeMs;
+        // when scrolling too fast scroll a bit to the top to be able to load new messages when you scroll down
+        if (this.$containerRef.scrollTop === 0)
+            this.$containerRef.scrollTop = -60;
+        // smallest value for this index can be -1 (indicates we are at the bottom of the page).
+        this.firstEmptyIndex = Math.max(-1, this.firstEmptyIndex - 1);
+        this.rerender();
     }
     render() {
-        var _a;
         /**
          * div.container is flex=column-reverse
          * which is why div#bottom-scroll comes before div#top-scroll
-         * div.page-wrapper prevents reversal of messages
          */
-        return (index$1.h(index$1.Host, { key: '23e10f12b079213650cf9c947d30650ba8c95a4d' }, index$1.h("div", { key: 'b5406069fd69ff117b19d437184c38b3c7d2fc28', class: "scrollbar container", part: "container", ref: (el) => (this.$paginatedList = el) }, index$1.h("div", { key: '7be947f2409ff810e0d10beea53ace8fdec334ce', class: { 'show-new-messages-ctr': true, active: !this.shouldRenderNewNodes } }, index$1.h("rtk-button", { key: '45c43d6ca1cc39376334dffa10f3f2c137d65add', class: "show-new-messages", kind: "icon", variant: "secondary", part: "show-new-messages", onClick: () => this.onDownArrowClicked() }, index$1.h("rtk-icon", { key: '519b0db80f7d16cc4d03983e227d4897a5868ec9', icon: this.iconPack.chevron_down }))), index$1.h("div", { key: '53691e3943b90ef9e422c8da8f5facaa23f01920', class: "smallest-dom-element", id: "bottom-scroll", ref: (el) => (this.$bottomRef = el) }), this.isLoadingBottom && index$1.h("rtk-spinner", { key: '2a393cb0bbb07c356144464dcc7c597f5cc9771b', size: "sm" }), this.isLoading && this.pagesToRender.flat().length === 0 && index$1.h("rtk-spinner", { key: '4ce03be69368db0d6d0d4ad079b14f2c7d93f26d', size: "lg" }), this.pagesToRender.flat().length === 0 && this.showEmptyListLabel ? (index$1.h("div", { class: "empty-list" }, (_a = this.emptyListLabel) !== null && _a !== void 0 ? _a : this.t('list.empty'))) : (index$1.h("div", { class: "page-wrapper" }, this.pagesToRender.map((page) => this.createNodes(page)))), this.hasMoreDataAtTop && !this.isLoadingTop && (index$1.h("div", { key: '5c85806854687efe098e4bd6d06d109060445378', class: "load-more-on-top-container" }, index$1.h("rtk-button", { key: '6d73a030fad5ba133aa2841b2feb196646592ada', class: "load-more-icon", kind: "icon", variant: "secondary", part: "load-more-icon", onClick: () => this.onLoadMoreOnTopClicked() }, index$1.h("rtk-icon", { key: '61a4f376749938df280e5c734dd3fa8a9b0b7201', icon: this.iconPack.chevron_up })))), this.isLoadingTop && index$1.h("rtk-spinner", { key: '3e55b99c60ed7bc2cd937091a33663dd19c9ca68', size: "sm" }), index$1.h("div", { key: 'a69e0a3a26d295783f4f729b33770b206ab5d46b', class: "smallest-dom-element", id: "top-scroll", ref: (el) => (this.$topRef = el) }))));
+        return (index$1.h(index$1.Host, { key: '91ac7d0ca3fb720259945ffaa97f465b34c694fa' }, index$1.h("div", { key: '33896c19ecc4359ae163c65b5c71b9f17673e765', class: "scrollbar container", part: "container", ref: (el) => (this.$containerRef = el) }, index$1.h("div", { key: 'e26a5ef3979ec132277b9598afc17ea65683f6c8', class: { 'show-new-messages-ctr': true, active: this.showNewMessagesCTR } }, index$1.h("rtk-button", { key: 'e769a8f54a298af456552733dc9de27d059e5138', class: "show-new-messages", kind: "icon", variant: "secondary", part: "show-new-messages", onClick: () => {
+                this.shouldScrollToBottom = true;
+                this.scrollToBottom();
+            } }, index$1.h("rtk-icon", { key: '6fb4cbc2247eb971004a94926b95ebd0f90ab0fd', icon: this.iconPack.chevron_down }))), index$1.h("div", { key: 'e91dd8f25012e4509e0ff3cb4d6b65aa9467d427', class: "smallest-dom-element", id: "bottom-scroll", ref: (el) => (this.$bottomRef = el) }), this.isLoadingBottom && this.pages.length > 0 && index$1.h("rtk-spinner", { key: '199c0ccffd57716bd5a05dcef8610113d3c58d3d', size: "sm" }), this.isLoading && this.pages.length < 1 && index$1.h("rtk-spinner", { key: 'b8a3e08a25b2bc1d50b5a9b1b2deda802ae5eb28', size: "lg" }), !this.isLoading && this.pages.flat().length === 0 ? (index$1.h("div", { class: "empty-list" }, this.t('list.empty'))) : (index$1.h("div", { class: "page-wrapper" }, this.pages.map((page, pageIndex) => (index$1.h("div", { class: "page", "data-page-index": pageIndex }, this.createNodes([...page].reverse())))))), this.isLoadingTop && this.pages.length > 0 && index$1.h("rtk-spinner", { key: '2cb56b4f70d37548fd9aa71b961559b43c54a922', size: "sm" }), index$1.h("div", { key: '4b183c49bfe60fd63af40e02b9b46215c08bb484', class: "smallest-dom-element", id: "top-scroll", ref: (el) => (this.$topRef = el) }))));
     }
-    static get watchers() { return {
-        "selectedItemId": ["onItemChanged"]
-    }; }
 };
 __decorate$2([
     index.SyncWithStore()
@@ -2360,7 +2380,7 @@ const RtkSpinner = class {
         this.size = 'md';
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '2eb8672a849f85e2c207ec9331d1093b7deefaa3' }, index$1.h("rtk-icon", { key: '5a2f292ddd7a5c52709ce41f47422f08bdf82852', class: "spinner", icon: this.iconPack.spinner })));
+        return (index$1.h(index$1.Host, { key: 'c042cbd31d8fa9e58c0cbbc5646575a3172fc824' }, index$1.h("rtk-icon", { key: '0171ba3d5f7506e2c67eb813c5ad5b263352088d', class: "spinner", icon: this.iconPack.spinner })));
     }
 };
 __decorate$1([
@@ -2438,7 +2458,7 @@ const RtkTextComposerView = class {
         }
     }
     render() {
-        return (index$1.h("div", { key: '1b51f7d6ffbe8069172a5dc51f291988000c898a', class: "chat-input", part: "chat-input-container" }, this.maxLengthBreached > 0 && (index$1.h("div", { key: 'fe75f8333a7643458d5077fec968464327e65ca3', class: 'text-error ' + (this.maxLengthBreached === this.maxLength ? 'breached' : '') }, index$1.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 && (index$1.h("div", { key: '0024d3b4e8d5eda5f94ff2fe9d8aa18cfb9297a7', class: 'text-error breached' }, index$1.h("rtk-icon", { key: 'bc3a0417a81de43b67595cde79dfe7aba21a6601', id: "warning-indicator", icon: this.iconPack.warning, part: "warning-indicator" }), ' ', this.t('chat.rate_limit_error'))), index$1.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 (index$1.h("div", { key: 'e5f7fa2bd4a2386ff5185001981477ccacf24556', class: "chat-input", part: "chat-input-container" }, this.maxLengthBreached > 0 && (index$1.h("div", { key: '4c06c853ddc7bebafe45fdb2e2c5c9e1c20021fe', class: 'text-error ' + (this.maxLengthBreached === this.maxLength ? 'breached' : '') }, index$1.h("rtk-icon", { key: '524037dc257f0aea206fbc3503d1fe1cb03449be', id: "warning-indicator", icon: this.iconPack.warning, part: "warning-indicator" }), ' ', this.maxLengthBreached, " / ", this.maxLength, " ", this.t('chat.max_limit_warning'))), this.rateLimitBreached && (index$1.h("div", { key: 'cf975664f367f2621593239ab1cf2e73f5acdb45', class: 'text-error breached' }, index$1.h("rtk-icon", { key: '70a6555f1fa9752f91951181b46e0ed0e7eb8679', id: "warning-indicator", icon: this.iconPack.warning, part: "warning-indicator" }), ' ', this.t('chat.rate_limit_error'))), index$1.h("textarea", { key: '7fc7280dd143cd701d5037e04c2b36c3ea8ec023', ref: (el) => (this.$textArea = el), placeholder: this.placeholder, disabled: this.disabled, onInput: this.onInputHandler, onKeyDown: this.keyDownHandler, part: "chat-input", value: this.value })));
     }
 };
 __decorate([
@@ -2459,7 +2479,7 @@ const RtkTextMessageView = class {
         this.isMarkdown = false;
     }
     render() {
-        return (index$1.h("p", { key: '90e03b1cdd7271004b0ba2932d7e00342d0b884d', class: { text: true, emoji: string.hasOnlyEmojis(this.text) } }, this.isMarkdown ? index$1.h("rtk-markdown-view", { text: this.text }) : this.text));
+        return (index$1.h("p", { key: 'b4cbabb44d32f96a23cd72f108d6a36b05491c97', class: { text: true, emoji: string.hasOnlyEmojis(this.text) } }, this.isMarkdown ? index$1.h("rtk-markdown-view", { text: this.text }) : this.text));
     }
 };
 RtkTextMessageView.style = RtkTextMessageViewStyle0;
@@ -2565,7 +2585,7 @@ const RtkMenu = class {
         });
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '32f792b447497e62bc776085657de62b8d6213bf' }, index$1.h("span", { key: '96f014373662e86cadb00d5a0b981246d3a7cac4', part: "trigger", id: "trigger", ref: (el) => (this.triggerEl = el) }, index$1.h("slot", { key: '218a47538fad33071c2ed20d83610b36e8c5a8f4' })), index$1.h("div", { key: 'c338da352126320e70333ad8ae814667e53dc5b4', part: "tooltip", class: "tooltip", id: "tooltip", role: "tooltip", ref: (el) => (this.tooltipEl = el) }, index$1.h("div", { key: 'bd0fe7c880bf999ba565959e84cc78412d008fb7', id: "arrow", ref: (el) => (this.arrowEl = el), part: "arrow" }), this.label, index$1.h("slot", { key: '67fcc99de5f9db145ce832b7eb46aa0e587ed101', name: "tooltip" }))));
+        return (index$1.h(index$1.Host, { key: '5278137bc9b99d9fe9ffeb0fc30bd887d600494d' }, index$1.h("span", { key: 'cbefda068a15340dad76668c3696a10bd94cb8e9', part: "trigger", id: "trigger", ref: (el) => (this.triggerEl = el) }, index$1.h("slot", { key: 'f160cf29ece64145e795a9a11459bd458482c446' })), index$1.h("div", { key: '1056b2bbc8cbacd3c32280d334d9f703a578b5ef', part: "tooltip", class: "tooltip", id: "tooltip", role: "tooltip", ref: (el) => (this.tooltipEl = el) }, index$1.h("div", { key: '6c6816fa1b18d49fa22ab6ffb600aaa23c5b9ec5', id: "arrow", ref: (el) => (this.arrowEl = el), part: "arrow" }), this.label, index$1.h("slot", { key: '3c2d3425b2e8b4d810de2ce40394491c4698aede', name: "tooltip" }))));
     }
     static get watchers() { return {
         "open": ["openChanged"]