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

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

@@ -86,7 +86,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) {
@@ -213,8 +213,8 @@ const RtkChannelSelectorView = class {
                     'last-message': true,
                     'no-message': !channel.latestMessage,
                 } }, h("rtk-text-message-view", { isMarkdown: true, text: channel.latestMessage })))), h("div", { class: "col channel-meta" }, channel.latestMessageTime && (h("time", { class: "time" }, this.getTimeLabel(channel.latestMessageTime))), channel.unreadCount > 0 && (h("div", { class: "unread-count" }, channel.unreadCount))))));
-        })))), this.viewAs === 'dropdown' && (h("button", { key: '0c87f90d6d0fe22284995ab7259689f80a862829', class: "dropdown-trigger", onClick: this.toggleDropdown }, h("span", { key: 'd1a364f2c5c57d19702d0b8707ca661c1dc4c14f' }, this.selectedChannelId &&
-            `${this.t('to')} ${this.getChannelById(this.selectedChannelId).name}`, this.getTotalUnreads() > 0 && (h("div", { key: 'bf789f9df82851825bc6ea12a19a5f37ab74aefe', class: "unread-count" }, this.getTotalUnreads()))), h("rtk-icon", { key: 'c0d03f883f4c46b2698be0f197751fc0470717ea', icon: this.showDropdown ? this.iconPack.chevron_up : this.iconPack.chevron_down })))));
+        })))), this.viewAs === 'dropdown' && (h("button", { key: '0c87f90d6d0fe22284995ab7259689f80a862829', class: "dropdown-trigger", onClick: this.toggleDropdown }, h("span", { key: 'd1a364f2c5c57d19702d0b8707ca661c1dc4c14f' }, h("rtk-icon", { key: 'a4a028e536459fab6de2884e25b0312d2a36bc32', icon: this.iconPack.participants }), this.selectedChannelId &&
+            `${this.t('to')} ${this.getChannelById(this.selectedChannelId).name}`, this.getTotalUnreads() > 0 && (h("div", { key: '83c8efae8daed7dce4c4fdb55b523876c71a9a85', class: "unread-count" }, this.getTotalUnreads()))), h("rtk-icon", { key: '855ff62e593c7c14f448bbd5b8cf898e13d5d391', icon: this.showDropdown ? this.iconPack.chevron_up : this.iconPack.chevron_down })))));
     }
     get $el() { return getElement(this); }
 };
@@ -226,7 +226,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) {
@@ -523,13 +523,25 @@ const RtkChat = class {
             };
             return [everyone, ...participants];
         };
-        this.onTogglePinnedMessages = () => {
-            this.showPinnedMessages = !this.showPinnedMessages;
+        this.getPinnedMessageLabel = (message) => {
+            if (message.type === 'text')
+                return message.message;
+            if (message.type === 'image')
+                return 'Image';
+            if (message.type === 'file')
+                return 'File';
+            return '';
         };
         this.renderPinnedMessagesHeader = () => {
             if (this.meeting.chat.pinned.length === 0)
                 return null;
-            return (h("rtk-tooltip", { label: this.t('chat.toggle_pinned_msgs') }, h("div", { class: { 'pinned-messages-header': true, active: this.showPinnedMessages }, onClick: this.onTogglePinnedMessages }, h("rtk-icon", { icon: this.iconPack.pin }), this.t('chat.pinned_msgs'), ` (${this.meeting.chat.pinned.length})`)));
+            /**
+             * We do not display a picture against the avatar because the chatMessage API does not provide it.
+             */
+            return (h("div", { class: "pinned-messages" }, h("div", { class: "pinned-messages-header", onClick: () => (this.showPinnedMessages = !this.showPinnedMessages) }, h("div", null, h("rtk-icon", { icon: this.iconPack.pin, size: "sm" }), this.t('chat.pinned_msgs'), ` (${this.meeting.chat.pinned.length})`), h("rtk-icon", { icon: this.showPinnedMessages ? this.iconPack.chevron_up : this.iconPack.chevron_down, size: "sm" })), this.showPinnedMessages && (h("div", { class: "pinned-messages-content" }, this.meeting.chat.pinned.map((message) => {
+                const label = this.getPinnedMessageLabel(message);
+                return (h("div", { class: "pinned-message" }, h("rtk-avatar", { class: "pinned-message-avatar", participant: { name: message.displayName, picture: '' }, size: "sm" }), h("span", null, label.length > 20 ? `${label.substring(0, 20)}...` : label)));
+            })))));
         };
     }
     connectedCallback() {
@@ -683,10 +695,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 (h(Host, null, h("div", { class: "chat-container" }, h("div", { class: "chat" }, this.isFileMessagingAllowed() && (h("div", { id: "dropzone", class: { active: this.dropzoneActivated }, part: "dropzone" }, h("rtk-icon", { icon: this.iconPack.attach }), h("p", null, this.t('chat.send_attachment')))), this.renderPinnedMessagesHeader(), this.isPrivateChatSupported() && (h("rtk-channel-selector-view", { channels: this.getPrivateChatRecipients(), selectedChannelId: ((_a = this.selectedParticipant) === null || _a === void 0 ? void 0 : _a.userId) || 'everyone', onChannelChange: this.updateRecipients, t: this.t, viewAs: "dropdown" })), h("rtk-chat-messages-ui-paginated", { meeting: this.meeting, onPinMessage: this.onPinMessage, onDeleteMessage: this.onDeleteMessage, size: this.size, iconPack: this.iconPack, t: this.t }), this.renderComposerUI()))));
     }
     get host() { return getElement(this); }
@@ -1037,9 +1045,9 @@ const RtkChatMessagesUiPaginated = class {
             }
             const isSelf = message.userId === this.meeting.self.userId;
             const viewType = isSelf ? 'outgoing' : 'incoming';
-            return (h("div", { class: { pinned: message.pinned } }, h("div", { class: "message-wrapper" }, h("rtk-message-view", { time: message.time, actions: this.getMessageActions(message), authorName: message.displayName, isSelf: isSelf, avatarUrl: displayPicture, hideAuthorName: isContinued, viewType: viewType, variant: "bubble", onAction: (event) => this.onMessageActionHandler(event.detail, message) }, h("div", null, h("div", { class: "body" }, message.type === 'text' && (h("rtk-text-message-view", { text: message.message, isMarkdown: true })), message.type === 'file' && (h("rtk-file-message-view", { name: message.name, url: message.link, size: message.size })), message.type === 'image' && (h("rtk-image-message-view", { url: message.link, onPreview: () => {
+            return (h("div", null, h("div", { class: "message-wrapper" }, 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) }, h("div", null, h("div", { class: "body" }, message.type === 'text' && (h("rtk-text-message-view", { text: message.message, isMarkdown: true })), message.type === 'file' && (h("rtk-file-message-view", { name: message.name, url: message.link, size: message.size })), message.type === 'image' && (h("rtk-image-message-view", { url: message.link, onPreview: () => {
                     this.stateUpdate.emit({ image: message });
-                } }))), message.pinned && (h("div", { class: "pin-icon", part: "pin-icon" }, h("rtk-icon", { icon: this.iconPack.pin, size: "sm" }))))))));
+                } }))))))));
         };
         this.chatUpdateListener = (data) => {
             if (this.selectedChannelId && data.message.channelId !== this.selectedChannelId)
@@ -1085,7 +1093,7 @@ const RtkChatMessagesUiPaginated = class {
         this.lastReadMessageIndex = -1;
     }
     render() {
-        return (h(Host, { key: '732dea776303ba428aedc72608516a4e4dfc1591' }, h("rtk-paginated-list", { key: '6bc3cd1373ff487b897d3ca7a5bfbccfdbaa90da', ref: (el) => (this.$paginatedListRef = el), pageSize: this.pageSize, pagesAllowed: 3, fetchData: this.getChatMessages, createNodes: this.createChatNodes, selectedItemId: this.selectedChannelId, emptyListLabel: this.t('chat.empty_channel') }, h("slot", { key: 'f3cc795b3b39aa48f87f9908e3b205e2db6439b4' }))));
+        return (h(Host, { key: 'dbe69aec6f462c8cfa5d6574ad77efdbadd641b9' }, h("rtk-paginated-list", { key: 'b6b525ad58e8173a78577265f2cde2981ca015cf', ref: (el) => (this.$paginatedListRef = el), pageSize: this.pageSize, pagesAllowed: 3, fetchData: this.getChatMessages, createNodes: this.createChatNodes, selectedItemId: this.selectedChannelId, emptyListLabel: this.t('chat.empty_channel') }, h("slot", { key: '4045a3fccefe09d76edff35b5d0183a89db51491' }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -1158,7 +1166,7 @@ const RtkDraftAttachmentView = class {
         this.onAttachmentChange();
     }
     render() {
-        return (h(Host, { key: 'b23eb412c60a62f542aec0e3cd3b99fc72de48f0' }, h("div", { key: '04251f8d4b13325f8474110c89733369bd8904f2', class: "preview-overlay" }, h("div", { key: '51963510a704b19e7c591ea177018bae6e0317f5', class: "preview" }, h("rtk-tooltip", { key: '3a2167ea7a02f1d744462826084f0fef5c607ac9', label: this.t('chat.cancel_upload') }, h("rtk-button", { key: '634c9a7e0962ed82c36519e919eb597c9b603f51', variant: "secondary", kind: "icon", onClick: this.onDeleteClickHandler }, h("rtk-icon", { key: 'b936e54ae44e1d54b73adf38a92551fbea0299c5', icon: this.iconPack.dismiss }))), this.attachment.type === 'image' ? (h("img", { class: "preview-image", src: this.filePreview })) : (h("div", { class: "preview-file" }, h("span", null, this.filePreview)))))));
+        return (h(Host, { key: '4ccd7a73401d3931dadc59779ec4edfddef219f1' }, h("div", { key: 'a75fa81f358436f6ac349a56b8a62671a25f38d7', class: "preview-overlay" }, h("div", { key: 'b95e371e0108cf613305f74c204ebb8fec26140d', class: "preview" }, h("rtk-tooltip", { key: '9c43de18dbdcff2d5cd6fdd344a13cd0d1e7c2f8', label: this.t('chat.cancel_upload') }, h("rtk-button", { key: 'e99f168f015abc65b33876e44d3a2d80f6fa6169', variant: "secondary", kind: "icon", onClick: this.onDeleteClickHandler }, h("rtk-icon", { key: '53f0ffd566825e8cb3d7a7b69c93a62c63206505', icon: this.iconPack.dismiss }))), this.attachment.type === 'image' ? (h("img", { class: "preview-image", src: this.filePreview })) : (h("div", { class: "preview-file" }, h("span", null, this.filePreview)))))));
     }
     static get watchers() { return {
         "attachment": ["onAttachmentChange"]
@@ -1243,7 +1251,7 @@ const RtkEmojiPicker = class {
         return (h("div", { id: "emoji-grid", class: "scrollbar max-w-40" }, this.filteredEmojis.map((e) => (h("rtk-button", { key: `emoji-button-${e.name}`, class: "emoji", variant: "ghost", kind: "icon", title: e.name, onClick: () => this.handleEmojiClick(e.emoji) }, e.emoji)))));
     }
     render() {
-        return (h(Host, { key: 'e099d5996a16c659de17ca9a36fcd79a9f02f400' }, h("div", { key: '2a3e300c9625b877feb2b6780df7d1a9851cb7f3', class: 'close-parent' }, h("rtk-button", { key: '7ca8421704136d09d107d1f7392ba393d5f59a9a', variant: "ghost", kind: "icon", class: "close", onClick: () => { var _a; return (_a = this.pickerClose) === null || _a === void 0 ? void 0 : _a.emit(); }, "aria-label": this.t('close') }, h("rtk-icon", { key: '040069093f7243bf5075d55b2c081c564d885a8f', icon: this.iconPack.dismiss }))), h("div", { key: '372a32be35dea5200323720e221424b5138cc4ab', class: 'emoji-parent' }, h("input", { key: 'fae2be13d736adbb99212146498f00d4f395636e', value: this.filterVal, onInput: (event) => this.handleInputChange(event.target), placeholder: this.t('search'), ref: (el) => (this.inputElement = el) }), this.mapEmojiList())));
+        return (h(Host, { key: 'f448ab61063b55b8e5572fbcb8be3f520b0704ea' }, h("div", { key: '459b42557c8e7b853410b53e42dd663461b0593a', class: 'close-parent' }, h("rtk-button", { key: '8b64136b51a96bda767b7fbbc05b51a335d1a7b9', variant: "ghost", kind: "icon", class: "close", onClick: () => { var _a; return (_a = this.pickerClose) === null || _a === void 0 ? void 0 : _a.emit(); }, "aria-label": this.t('close') }, h("rtk-icon", { key: '82bdc4ea24be656d182c9e420bd86b0b5cbfa589', icon: this.iconPack.dismiss }))), h("div", { key: '934d08102c4cffda109752eecd5be41854030133', class: 'emoji-parent' }, h("input", { key: '8c21c91a89d77fce9847ade88663d9ec969491da', value: this.filterVal, onInput: (event) => this.handleInputChange(event.target), placeholder: this.t('search'), ref: (el) => (this.inputElement = el) }), this.mapEmojiList())));
     }
 };
 __decorate$b([
@@ -1276,7 +1284,7 @@ const RtkEmojiPickerButton = class {
         this.t = useLanguage();
     }
     render() {
-        return (h("rtk-tooltip", { key: 'bcde14fb2c3a6544882502e65ffda7a6b3b6f13d', label: this.t('chat.send_emoji') }, h("rtk-button", { key: 'd82fa78c4ffe48c24131a6e38f087548f540fefa', variant: "ghost", kind: "icon", class: { active: this.isActive }, title: this.t('chat.send_emoji') }, h("rtk-icon", { key: '791bbe2537f1aeb064c5e9ccbbf4af37b706ec2a', icon: this.iconPack.emoji_multiple }))));
+        return (h("rtk-tooltip", { key: '45792cf2e2523dc94b5dd4c861d4006fae8aee56', label: this.t('chat.send_emoji') }, h("rtk-button", { key: 'd2f80aede59b62d7e0587515f4823bdb5e278c28', variant: "ghost", kind: "icon", class: { active: this.isActive }, title: this.t('chat.send_emoji') }, h("rtk-icon", { key: '15229de453f1cbf93c8de5c002d6ea33ff54ed3b', icon: this.iconPack.emoji_multiple }))));
     }
 };
 __decorate$a([
@@ -1307,7 +1315,7 @@ const RtkFileMessageView = class {
         this.iconPack = defaultIconPack;
     }
     render() {
-        return (h("div", { key: 'cdd46a1be912f807688dc86671dddd2fa5b9e7c9', class: "file" }, h("rtk-button", { key: '20bd6c448ec64902989cd742a8f18de32e368194', variant: "secondary", kind: "icon", onClick: () => downloadFile(sanitizeLink(this.url), { name: this.name, fallbackName: 'file' }), part: "button" }, h("rtk-icon", { key: '11ac30db5146132be8aaba67a79f66f8aba7bb8d', icon: this.iconPack.download })), h("div", { key: '342dd8daa944a5857a6519339b4d3bfb6c369eda', class: "file-data" }, h("div", { key: 'e161743b75677b1e81d09d7c373be494ccf8411a', class: "name" }, this.name), h("div", { key: '99f2d8d77ef3c129aa0c229260f6e79901ce268c', class: "file-data-split" }, h("div", { key: '7b9beadca2a810c151fb1ad43ee7c47ba451a37a', class: "ext" }, getExtension(this.name)), h("span", { key: 'd55f69a96bbe26c262461fa87f1a0a506854cf59', class: "divider" }), h("div", { key: 'cad33d263ab75aeb3083886e83063b8ccb2ea976', class: "size" }, getFileSize(this.size))))));
+        return (h("div", { key: 'f25ec20ac84c7ec0961abbdc58d74b64b3261042', class: "file" }, h("rtk-button", { key: '9daa2ca8992821456f7dad66550c1f3b0e07e5c2', variant: "secondary", kind: "icon", onClick: () => downloadFile(sanitizeLink(this.url), { name: this.name, fallbackName: 'file' }), part: "button" }, h("rtk-icon", { key: 'f4a578a8613eab5a2b91a86870ee02ff2659c4ec', icon: this.iconPack.download })), h("div", { key: '61d6a100bd716741e15f80404796ad8e5850d2a3', class: "file-data" }, h("div", { key: 'be8f7fdf168388073e5f094cb717d75766b291df', class: "name" }, this.name), h("div", { key: 'f1dbb45817084612a31baf71784d713ec85a3b79', class: "file-data-split" }, h("div", { key: '49ac2abd19ae9fb07da0a4f234c45b932cd41221', class: "ext" }, getExtension(this.name)), h("span", { key: 'fe7e8660a54184ffc3d5cff5a320a1f8929ec3e6', class: "divider" }), h("div", { key: '402df689a8cf059bd3031c9c036544c486846d40', class: "size" }, getFileSize(this.size))))));
     }
 };
 __decorate$9([
@@ -1363,7 +1371,7 @@ const RtkFilePickerButton = class {
     render() {
         const label = this.label || this.t('chat.send_file');
         const icon = this.iconPack[this.icon];
-        return (h("rtk-tooltip", { key: '78ef1fd3a42656601c94561bbfc63f888d8180d3', label: label }, h("rtk-button", { key: 'a0a82e689c2e3a344936db1b3253e36def3a0ce5', variant: "ghost", kind: "icon", onClick: () => this.uploadFile(), title: label }, h("rtk-icon", { key: '1651a9f460e3851ff5296f05cf08554f9da21703', icon: icon }))));
+        return (h("rtk-tooltip", { key: '03d24cebc847667a6d59e21d22105c48db0c589c', label: label }, h("rtk-button", { key: 'bddd8cac214d897979c9a38b26643e1027e696e3', variant: "ghost", kind: "icon", onClick: () => this.uploadFile(), title: label }, h("rtk-icon", { key: '0a9756a9f6c1e8ab0c34ea46b3614816aa257df4', icon: icon }))));
     }
 };
 __decorate$8([
@@ -1423,7 +1431,7 @@ const RtkImageMessageView = class {
         this.status = 'loading';
     }
     render() {
-        return (h("div", { key: '47b2dd8f8dfc0d2aa20e80b513f802e1ebc09153', class: { image: true, loaded: this.status === 'loaded' } }, h("img", { key: 'fba4cfc015beb86040ec74b2a44e2163744a67c6', src: sanitizeLink(this.url), onLoad: () => {
+        return (h("div", { key: '99e8a76eea11e740c21642445fb803b3027f95ff', class: { image: true, loaded: this.status === 'loaded' } }, h("img", { key: '98c0477fab6ae6f86657579d4d4e44dab3af0bf5', src: sanitizeLink(this.url), onLoad: () => {
                 this.status = 'loaded';
             }, onError: () => {
                 this.status = 'errored';
@@ -1431,9 +1439,9 @@ const RtkImageMessageView = class {
                 if (this.status === 'loaded') {
                     this.onPreview.emit(this.url);
                 }
-            } }), this.status === 'loading' && (h("div", { key: '4da0a3ab39d782e9affe7702a19232747bb4581c', class: "image-spinner", title: this.t('chat.img.loading'), "aria-label": this.t('chat.img.loading') }, h("rtk-spinner", { key: 'dea7afe2c92dd5c7c71620bc7b9089f743ef1aa2', iconPack: this.iconPack }))), this.status === 'errored' && (h("div", { key: 'ab303ce11b7182d20c64b00638a1c8be59aea774', class: "image-errored", title: this.t('chat.error.img_not_found'), "aria-label": this.t('chat.error.img_not_found') }, h("rtk-icon", { key: 'e14eb63cc4b2d18a5abd921e25ef305095f61c17', icon: this.iconPack.image_off }))), this.status === 'loaded' && (h("div", { key: 'ccceaa5cc5821ce9b4ddab742001cee78135636a', class: "actions" }, h("rtk-button", { key: 'de49516247d9655cc74afcd58bc50771e2594dca', class: "action", variant: "secondary", kind: "icon", onClick: () => {
+            } }), this.status === 'loading' && (h("div", { key: '91005900f67fb450d9b1515b8fc493e09f5ccebd', class: "image-spinner", title: this.t('chat.img.loading'), "aria-label": this.t('chat.img.loading') }, h("rtk-spinner", { key: 'c96f80a0a53426058635254c5efd78cdccd3a23f', iconPack: this.iconPack }))), this.status === 'errored' && (h("div", { key: 'c1f7a709ccaf0c0ba1104992616f8405e2380c95', class: "image-errored", title: this.t('chat.error.img_not_found'), "aria-label": this.t('chat.error.img_not_found') }, h("rtk-icon", { key: '27d22b3f706d641b5d77a5fa75ba4233663afb88', icon: this.iconPack.image_off }))), this.status === 'loaded' && (h("div", { key: '2caf4c258128cf03dae23769c832a3b7bb76be9e', class: "actions" }, h("rtk-button", { key: 'e668325aa6f1f20a2d4f7d172e483521b709b7c8', class: "action", variant: "secondary", kind: "icon", onClick: () => {
                 this.onPreview.emit(this.url);
-            } }, h("rtk-icon", { key: 'bd1ea608e4846d994a418236dca7856570bd689d', icon: this.iconPack.full_screen_maximize })), h("rtk-button", { key: '266a860a4ab4d6cf76bd89bb35c987efbc89a593', class: "action", variant: "secondary", kind: "icon", onClick: () => downloadFile(this.url, { fallbackName: 'image' }) }, h("rtk-icon", { key: 'ec26862ff95e116d519280c7e62ed7a7e1ede273', icon: this.iconPack.download }))))));
+            } }, h("rtk-icon", { key: 'ceea157f0a5e4802d2c4041f4304b9202b95bc11', icon: this.iconPack.full_screen_maximize })), h("rtk-button", { key: '2941579aef2546aa70c056bdee9bb76fea9e286f', class: "action", variant: "secondary", kind: "icon", onClick: () => downloadFile(this.url, { fallbackName: 'image' }) }, h("rtk-icon", { key: '3878b4a96f77e419e4a26725bfe7a49e29af8760', icon: this.iconPack.download }))))));
     }
 };
 __decorate$7([
@@ -1524,7 +1532,7 @@ const RtkMarkdownView = class {
         const slicedMessage = this.text.slice(0, this.maxLength);
         const withReply = extractReplyBlock(slicedMessage, true);
         const withoutReply = stripOutReplyBlock(slicedMessage);
-        return (h("p", { key: 'c33735507a0798dffc360f01793bc7b0caaac159' }, withReply.length !== 0 && h("blockquote", { key: 'c0a4271ee4c843b6e73c8300a8026a3ec8dd5fe3' }, this.renderMessage(withReply)), withoutReply.length !== 0 && this.renderMessage(withoutReply)));
+        return (h("p", { key: 'beef042bc590e1cb543ddfa4a45b699ab78db63c' }, withReply.length !== 0 && h("blockquote", { key: '5fd5c57b235c15cdd009474d70e2a6074dd0ec0a' }, this.renderMessage(withReply)), withoutReply.length !== 0 && this.renderMessage(withoutReply)));
     }
 };
 RtkMarkdownView.style = RtkMarkdownViewStyle0;
@@ -1905,7 +1913,7 @@ const RtkMenu$1 = class {
         });
     }
     render() {
-        return (h(Host, { key: 'b019210ff85bde38c61855f8ac38aa8b927aa857' }, h("span", { key: '14f689eed0672642c3a181ee5d197d7a9b5c00a8', id: "trigger", ref: (el) => (this.triggerEl = el), onClick: () => {
+        return (h(Host, { key: '5d80123d52e211d4f120441d9f79582b4dc53247' }, h("span", { key: '996b1faea4afd983ea69c2bb197b1b6c56c0eca6', id: "trigger", ref: (el) => (this.triggerEl = el), onClick: () => {
                 this.clickedThis = true;
                 if (this.menuListEl.style.display !== 'block') {
                     this.menuListEl.style.display = 'block';
@@ -1914,7 +1922,7 @@ const RtkMenu$1 = class {
                 else {
                     this.menuListEl.style.display = 'none';
                 }
-            } }, h("slot", { key: 'f1ab2111e0ad309df5b38e4f189d821b8ab50a4a', name: "trigger" })), h("span", { key: 'ec03b8c7ff60dd21dce3bc1f9b473ab59ec37ace', part: "menu-list", id: "menu-list", ref: (el) => (this.menuListEl = el) }, h("slot", { key: 'bc05fba324ccf4360340b070c8d4f3723a72cf6e' }))));
+            } }, h("slot", { key: 'd54671184af01247f285e27bda8dbb9faf1ba399', name: "trigger" })), h("span", { key: '3d57dcf7805d7fb53577e722a265a60acea6971a', part: "menu-list", id: "menu-list", ref: (el) => (this.menuListEl = el) }, h("slot", { key: 'b516e727fc4d435fed30d422ba311099aff70605' }))));
     }
 };
 __decorate$6([
@@ -1949,7 +1957,7 @@ const RtkMenuItem = class {
         this.t = useLanguage();
     }
     render() {
-        return (h(Host, { key: '7ae0e75aa59e0ce3b6a919eb258f218d84033bdd', class: { [this.menuVariant]: true } }, h("slot", { key: '4fd6d31e2ecb9f99bdc7442e796c5dadcb8bcf74', name: "start" }), h("slot", { key: '04ef7d82759ff42015480b3cd789d941ffa574f0' }), h("slot", { key: 'ad3c22309470a6b71d6b6b9f0f8b58cde7f76f3c', name: "end" })));
+        return (h(Host, { key: '05ed5b993b4c05f4fc295e2ac45c5337d9b993b3', class: { [this.menuVariant]: true } }, h("slot", { key: '80aebd20b238627fa7aa2ab3777ebafd8876faaf', name: "start" }), h("slot", { key: '50ff6c2c4fa7dfe9976030d1e7e39385578b902d' }), h("slot", { key: 'd93c2517156791d636d0b86569bcd79e08ed4e29', name: "end" })));
     }
 };
 __decorate$5([
@@ -1984,7 +1992,7 @@ const RtkMenuList = class {
         this.t = useLanguage();
     }
     render() {
-        return (h(Host, { key: '1dd2702af95e0270488e6be1813b5979bd676697', class: { [this.menuVariant]: true } }, h("slot", { key: 'cbe97d571726800ad4a3e25b8c0e261b9a0cd40a' })));
+        return (h(Host, { key: '758a8f0419b51b59f46391e28265bf6201f537d3', class: { [this.menuVariant]: true } }, h("slot", { key: '9bc391de012f416c8c29c33fcc26a146f33afe82' })));
     }
 };
 __decorate$4([
@@ -1995,7 +2003,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) {
@@ -2016,6 +2024,8 @@ const RtkMessageView = class {
         this.actions = [];
         /** Appearance */
         this.variant = 'bubble';
+        /** Is message pinned */
+        this.pinned = false;
         /** Render */
         this.viewType = 'outgoing';
         /** Hides avatar */
@@ -2033,7 +2043,7 @@ const RtkMessageView = class {
         return (h("rtk-menu", { placement: this.isSelf ? 'bottom-start' : 'bottom-end', offset: 1 }, h("button", { slot: "trigger", class: "actions" }, h("rtk-icon", { icon: this.iconPack.chevron_down })), h("rtk-menu-list", { menuVariant: this.isSelf ? 'primary' : 'secondary' }, this.actions.map((action) => (h("rtk-menu-item", { menuVariant: this.isSelf ? 'primary' : 'secondary', onClick: () => this.onAction.emit(action.id) }, action.icon && h("rtk-icon", { icon: action.icon, slot: "start" }), action.label))))));
     }
     render() {
-        return (h(Host, { key: '96feddf08120ae0e2aa89e955a16e8e4a43c78fb' }, h("div", { key: '79184165b5312ea52f0cbb57e25cfd4a757fc65f', class: { 'message-wrapper': true, [this.viewType]: true } }, !this.hideAvatar && (h("aside", { key: 'a2ccd72fbec0153282db018fb3473bf10f2176e9', class: "avatar", part: "avatar" }, h("rtk-avatar", { key: 'ecc9f5f77de0a47dfb5985c6f48e5f117c64b45e', participant: { name: this.authorName, picture: this.avatarUrl }, size: "sm" }))), h("div", { key: '3a72dc77c04eeb4d6015bf46dd9cc0bc9f533943', class: "message", part: "message" }, !this.hideAuthorName && (h("div", { key: '153a94b9fa6b23dac3fe4da62a22cbf66e4e73dc', class: "header" }, this.authorName, " ", this.isSelf ? ' (You)' : '')), h("div", { key: 'a36d44da27ea1a4d18feb91726d22e7adf983914', class: { body: true, bubble: this.variant === 'bubble' } }, h("slot", { key: '4ef8ca3766b562201e4e4443438c91679f09d471' }), !this.hideMetadata && !!this.time && (h("div", { key: '66754f1dd1a65ebdcda24449475b1f603db3ff1e', class: "metadata", title: formatDateTime(this.time) }, elapsedDuration(this.time, new Date(Date.now())))), this.actions.length !== 0 && this.renderActions())))));
+        return (h(Host, { key: '7a4f7b9cd801a12871077b56c96213d6c7f53685' }, h("div", { key: '2b1731b82f709cf90f6d7ab239a8a516886de227', class: { 'message-wrapper': true, [this.viewType]: true } }, !this.hideAvatar && (h("aside", { key: '9963f792a5475c74e8170c0baec328162828163d', class: "avatar", part: "avatar" }, h("rtk-avatar", { key: 'e09b73fbba38f108809e6444940e8053c71a0276', participant: { name: this.authorName, picture: this.avatarUrl }, size: "sm" }))), h("div", { key: 'cdd752fa1553c5977251dcb0a32ecc5b65984514', class: "message", part: "message" }, !this.hideAuthorName && (h("div", { key: 'd0a758ac727a0a9b1757e8a61caf57bfadc20d08', class: "header" }, this.authorName, " ", this.isSelf ? ' (You)' : '')), h("div", { key: '32687e9a0462eaad2d625eb93d82205a23f99f51', class: { body: true, bubble: this.variant === 'bubble' } }, h("slot", { key: 'ca2022939cb8becf5d81655a37e344ff930a3251' }), !this.hideMetadata && !!this.time && (h("div", { key: '11dec318a44909b3080dcd29b3a6c4074ce394e3', class: "metadata", title: formatDateTime(this.time) }, this.pinned && h("rtk-icon", { key: '7a68a35c7113407f3676ee09de42fcab50485f39', icon: this.iconPack.pin, size: "sm" }), elapsedDuration(this.time, new Date(Date.now())))), this.actions.length !== 0 && this.renderActions())))));
     }
 };
 __decorate$3([
@@ -2320,7 +2330,7 @@ const RtkPaginatedList = class {
          * which is why div#bottom-scroll comes before div#top-scroll
          * div.page-wrapper prevents reversal of messages
          */
-        return (h(Host, { key: '23e10f12b079213650cf9c947d30650ba8c95a4d' }, h("div", { key: 'b5406069fd69ff117b19d437184c38b3c7d2fc28', class: "scrollbar container", part: "container", ref: (el) => (this.$paginatedList = el) }, h("div", { key: '7be947f2409ff810e0d10beea53ace8fdec334ce', class: { 'show-new-messages-ctr': true, active: !this.shouldRenderNewNodes } }, h("rtk-button", { key: '45c43d6ca1cc39376334dffa10f3f2c137d65add', class: "show-new-messages", kind: "icon", variant: "secondary", part: "show-new-messages", onClick: () => this.onDownArrowClicked() }, h("rtk-icon", { key: '519b0db80f7d16cc4d03983e227d4897a5868ec9', icon: this.iconPack.chevron_down }))), h("div", { key: '53691e3943b90ef9e422c8da8f5facaa23f01920', class: "smallest-dom-element", id: "bottom-scroll", ref: (el) => (this.$bottomRef = el) }), this.isLoadingBottom && h("rtk-spinner", { key: '2a393cb0bbb07c356144464dcc7c597f5cc9771b', size: "sm" }), this.isLoading && this.pagesToRender.flat().length === 0 && h("rtk-spinner", { key: '4ce03be69368db0d6d0d4ad079b14f2c7d93f26d', size: "lg" }), this.pagesToRender.flat().length === 0 && this.showEmptyListLabel ? (h("div", { class: "empty-list" }, (_a = this.emptyListLabel) !== null && _a !== void 0 ? _a : this.t('list.empty'))) : (h("div", { class: "page-wrapper" }, this.pagesToRender.map((page) => this.createNodes(page)))), this.hasMoreDataAtTop && !this.isLoadingTop && (h("div", { key: '5c85806854687efe098e4bd6d06d109060445378', class: "load-more-on-top-container" }, h("rtk-button", { key: '6d73a030fad5ba133aa2841b2feb196646592ada', class: "load-more-icon", kind: "icon", variant: "secondary", part: "load-more-icon", onClick: () => this.onLoadMoreOnTopClicked() }, h("rtk-icon", { key: '61a4f376749938df280e5c734dd3fa8a9b0b7201', icon: this.iconPack.chevron_up })))), this.isLoadingTop && h("rtk-spinner", { key: '3e55b99c60ed7bc2cd937091a33663dd19c9ca68', size: "sm" }), h("div", { key: 'a69e0a3a26d295783f4f729b33770b206ab5d46b', class: "smallest-dom-element", id: "top-scroll", ref: (el) => (this.$topRef = el) }))));
+        return (h(Host, { key: '2ee90baa6b1b9f88829d04632c129287b936ba30' }, h("div", { key: 'd68db998539fd1df12e92d61828a04628f7d9f0a', class: "scrollbar container", part: "container", ref: (el) => (this.$paginatedList = el) }, h("div", { key: '4fe1ae2b1aa961242ba6be8ca3b8b6c6e504ef5c', class: { 'show-new-messages-ctr': true, active: !this.shouldRenderNewNodes } }, h("rtk-button", { key: '5c7ad4c553eb6f1b7f14bad406e49fe18f63d100', class: "show-new-messages", kind: "icon", variant: "secondary", part: "show-new-messages", onClick: () => this.onDownArrowClicked() }, h("rtk-icon", { key: 'dacfc24e3fb9ec34e40447b606e256eefaefdc6e', icon: this.iconPack.chevron_down }))), h("div", { key: '569ffce0c198638b831a3eb0bac9a032c863ed9d', class: "smallest-dom-element", id: "bottom-scroll", ref: (el) => (this.$bottomRef = el) }), this.isLoadingBottom && h("rtk-spinner", { key: '06f571694e1877d8eba4ec939bc6a74f68f16caa', size: "sm" }), this.isLoading && this.pagesToRender.flat().length === 0 && h("rtk-spinner", { key: '628c0eef27fe29d2c3cbf6f0da7d10a12560c127', size: "lg" }), this.pagesToRender.flat().length === 0 && this.showEmptyListLabel ? (h("div", { class: "empty-list" }, (_a = this.emptyListLabel) !== null && _a !== void 0 ? _a : this.t('list.empty'))) : (h("div", { class: "page-wrapper" }, this.pagesToRender.map((page) => this.createNodes(page)))), this.hasMoreDataAtTop && !this.isLoadingTop && (h("div", { key: 'fc5207945ed0949074e3460d9943130eb4289409', class: "load-more-on-top-container" }, h("rtk-button", { key: '4fff7d14798340dc576e4aeeebfe9e3946cbcf6a', class: "load-more-icon", kind: "icon", variant: "secondary", part: "load-more-icon", onClick: () => this.onLoadMoreOnTopClicked() }, h("rtk-icon", { key: '87b2abaf1c850189246d1b9aa84b55c374b31d1d', icon: this.iconPack.chevron_up })))), this.isLoadingTop && h("rtk-spinner", { key: '766ac48eebaa236a9a44f770d777c2c31fabe10e', size: "sm" }), h("div", { key: '6a5287556030f9f426ac2d8b6063b13a966135ff', class: "smallest-dom-element", id: "top-scroll", ref: (el) => (this.$topRef = el) }))));
     }
     static get watchers() { return {
         "selectedItemId": ["onItemChanged"]
@@ -2356,7 +2366,7 @@ const RtkSpinner = class {
         this.size = 'md';
     }
     render() {
-        return (h(Host, { key: '2eb8672a849f85e2c207ec9331d1093b7deefaa3' }, h("rtk-icon", { key: '5a2f292ddd7a5c52709ce41f47422f08bdf82852', class: "spinner", icon: this.iconPack.spinner })));
+        return (h(Host, { key: '6533b4dea247db4d15d92409c6a9dc8f9662833d' }, h("rtk-icon", { key: '1db4c3e42e78355313ea59f3247cc0a5ef8283c7', class: "spinner", icon: this.iconPack.spinner })));
     }
 };
 __decorate$1([
@@ -2434,7 +2444,7 @@ const RtkTextComposerView = class {
         }
     }
     render() {
-        return (h("div", { key: '1b51f7d6ffbe8069172a5dc51f291988000c898a', class: "chat-input", part: "chat-input-container" }, this.maxLengthBreached > 0 && (h("div", { key: 'fe75f8333a7643458d5077fec968464327e65ca3', class: 'text-error ' + (this.maxLengthBreached === this.maxLength ? 'breached' : '') }, h("rtk-icon", { key: '669066f9983f226d96baeebdfa10ffb1fc8001b7', id: "warning-indicator", icon: this.iconPack.warning, part: "warning-indicator" }), ' ', this.maxLengthBreached, " / ", this.maxLength, " ", this.t('chat.max_limit_warning'))), this.rateLimitBreached && (h("div", { key: '0024d3b4e8d5eda5f94ff2fe9d8aa18cfb9297a7', class: 'text-error breached' }, h("rtk-icon", { key: 'bc3a0417a81de43b67595cde79dfe7aba21a6601', id: "warning-indicator", icon: this.iconPack.warning, part: "warning-indicator" }), ' ', this.t('chat.rate_limit_error'))), h("textarea", { key: 'c6077b3128eeea4be2358ab557062df322a8ffa9', ref: (el) => (this.$textArea = el), placeholder: this.placeholder, disabled: this.disabled, onInput: this.onInputHandler, onKeyDown: this.keyDownHandler, part: "chat-input", value: this.value })));
+        return (h("div", { key: 'f6fee4d5766f78409f6bcc788be8ecdd5ad8b865', class: "chat-input", part: "chat-input-container" }, this.maxLengthBreached > 0 && (h("div", { key: '10c3721417e791557b4d0b126838209880e9f570', class: 'text-error ' + (this.maxLengthBreached === this.maxLength ? 'breached' : '') }, h("rtk-icon", { key: 'e806de9d5db9bf708d06ede1c4a958583f87b08b', id: "warning-indicator", icon: this.iconPack.warning, part: "warning-indicator" }), ' ', this.maxLengthBreached, " / ", this.maxLength, " ", this.t('chat.max_limit_warning'))), this.rateLimitBreached && (h("div", { key: '8c84906b5247775bf404e626f45f30b183fb9086', class: 'text-error breached' }, h("rtk-icon", { key: 'b2b646474d6702e4191ac9c50eef0d3c0efd0e4f', id: "warning-indicator", icon: this.iconPack.warning, part: "warning-indicator" }), ' ', this.t('chat.rate_limit_error'))), h("textarea", { key: 'f17233beb688a811ebe11f965a39c7df288b6ea5', ref: (el) => (this.$textArea = el), placeholder: this.placeholder, disabled: this.disabled, onInput: this.onInputHandler, onKeyDown: this.keyDownHandler, part: "chat-input", value: this.value })));
     }
 };
 __decorate([
@@ -2455,7 +2465,7 @@ const RtkTextMessageView = class {
         this.isMarkdown = false;
     }
     render() {
-        return (h("p", { key: '90e03b1cdd7271004b0ba2932d7e00342d0b884d', class: { text: true, emoji: hasOnlyEmojis(this.text) } }, this.isMarkdown ? h("rtk-markdown-view", { text: this.text }) : this.text));
+        return (h("p", { key: 'a52466b9a67706f84af1fc84c9504b028af8b082', class: { text: true, emoji: hasOnlyEmojis(this.text) } }, this.isMarkdown ? h("rtk-markdown-view", { text: this.text }) : this.text));
     }
 };
 RtkTextMessageView.style = RtkTextMessageViewStyle0;
@@ -2561,7 +2571,7 @@ const RtkMenu = class {
         });
     }
     render() {
-        return (h(Host, { key: '32f792b447497e62bc776085657de62b8d6213bf' }, h("span", { key: '96f014373662e86cadb00d5a0b981246d3a7cac4', part: "trigger", id: "trigger", ref: (el) => (this.triggerEl = el) }, h("slot", { key: '218a47538fad33071c2ed20d83610b36e8c5a8f4' })), h("div", { key: 'c338da352126320e70333ad8ae814667e53dc5b4', part: "tooltip", class: "tooltip", id: "tooltip", role: "tooltip", ref: (el) => (this.tooltipEl = el) }, h("div", { key: 'bd0fe7c880bf999ba565959e84cc78412d008fb7', id: "arrow", ref: (el) => (this.arrowEl = el), part: "arrow" }), this.label, h("slot", { key: '67fcc99de5f9db145ce832b7eb46aa0e587ed101', name: "tooltip" }))));
+        return (h(Host, { key: '502a8095ff2d516209a343d9fd9d6869757bf68b' }, h("span", { key: '18089635a87113958cb9ff8f3f5f5a44a32456e8', part: "trigger", id: "trigger", ref: (el) => (this.triggerEl = el) }, h("slot", { key: '5a31f0ab6825d8fc822afbb2a55604b5dd306b1c' })), h("div", { key: '8d2859fcdda1429d4527659ff5f7127f6e6fb4d2', part: "tooltip", class: "tooltip", id: "tooltip", role: "tooltip", ref: (el) => (this.tooltipEl = el) }, h("div", { key: '21ee9c44389decfac5bb43a3182ea645b237900d', id: "arrow", ref: (el) => (this.arrowEl = el), part: "arrow" }), this.label, h("slot", { key: '43d0841146bc003133e1b6747fae4a676f9b5324', name: "tooltip" }))));
     }
     static get watchers() { return {
         "open": ["openChanged"]

package/dist/esm/rtk-breakout-room-manager_3.entry.js

@@ -305,9 +305,9 @@ const RtkBreakoutRoomParticipants = class {
             }, size: "sm" }), h("p", { class: "name", title: name }, shorten(name, 16), this.meeting.self.userId === participant.id && ` (${this.t('you')})`)));
     }
     render() {
-        return (h(Host, { key: '2df7ce2cbfbdfea7d739e2d9ba39e029e650813a' }, h("div", { key: '22e9786b7ce49b59c19f6dacd74aab60150a5ac1', class: "search-wrapper" }, h("div", { key: '66dbf04424c21717663bc72c2d005ea1ca3c7b0b', class: "search", part: "search" }, h("rtk-icon", { key: 'c6ea14f0ea2c2b4833a3c6eca076a20e876bf16a', icon: this.iconPack.search, part: "search-icon", class: "search-icon" }), h("input", { key: '506a501cbbb0d5ac9ab18d727a5878452a1ddb94', type: "search", autocomplete: "off", placeholder: this.t('search'), onInput: this.onSearchInput, part: "search-input" })), h("slot", { key: '7811caee1f0abb42effdb9f1d5cd962b1d74f378', name: "shuffle-button" })), h("div", { key: '31343e56d0109cd9a43e6baf0ecccc41e67aca0e', class: "header" }, h("div", { key: '6a534ac1cb33e0cb9b2a8edbbf8933aa87e6e679', class: "title-wrapper" }, h("span", { key: '3ce597924d2132e5b9ebacfb3d4078cff50a619b' }, this.t('breakout_rooms.main_room')), h("span", { key: '1033023b38905b1a5ef7ebfd7be025dfdedb4f61', class: "participant-count" }, "(", h("rtk-icon", { key: '5eed0bebdeb203efb34893e4e5790f8f4ff699e7', icon: this.iconPack.people }), this.participantsToShow.length, ")")), this.selectedParticipantIds.length !== 0 && (h("rtk-tooltip", { key: 'cbb49326b124b9fc085e9647fa00f0b9132b11e3', label: this.t('breakout_rooms.select_all') }, h("input", { key: '049b49f2171d40908855f156bc12e714e5cdb3d9', type: "checkbox", checked: this.selectedParticipantIds.length === this.participantsToShow.length, onChange: (e) => this.onToggleAll(!!e.target.checked) })))), h("div", { key: '0f0f58ee1e6743b40c955c8b7103d2ec73de8f9c', class: "ctr scrollbar", part: "container" }, this.participantsToShow.length > 0 && (h("ul", { key: '7ecb78de6863bb8792e69b7bdff5cc94b95050e8', class: "participants", part: "participants" }, this.participantsToShow.map((participant) => (h("li", { class: { 'participant-item': true, dragging: this.isDragging }, onClick: () => this.onClick(participant), onDragStart: () => this.onDragStart(participant), onDragEnd: () => this.onDragEnd(participant), draggable: this.selectedParticipantIds.length === 0, role: "listitem", key: participant.id }, this.renderPeer(participant), !this.isDragging && (h("input", { type: "checkbox", class: {
+        return (h(Host, { key: 'fcdcaa7a958770e5d8848b15b4135748d8520022' }, h("div", { key: '6b26cd6fd40ae2985a6a207920d7c0ebbcd0b191', class: "search-wrapper" }, h("div", { key: '519e94dce8d9627cf72dfd487c8429c8a1eea3d5', class: "search", part: "search" }, h("rtk-icon", { key: '24cfb8a6e8c9c1ddc95356ebde2d785817aa8a8b', icon: this.iconPack.search, part: "search-icon", class: "search-icon" }), h("input", { key: '2049f4d9aa2b78a33138d9af84f2d94694a886a4', type: "search", autocomplete: "off", placeholder: this.t('search'), onInput: this.onSearchInput, part: "search-input" })), h("slot", { key: '57afb73b98adbd9f2bb81bb4a35a5fbc2a486e10', name: "shuffle-button" })), h("div", { key: '6f38275a46e85328a6aeba5d63519423e6ec3dc0', class: "header" }, h("div", { key: '4c2d4b9e1980867cbec587356991b1e54bd93e7d', class: "title-wrapper" }, h("span", { key: '0fa97e8b6604c9af0b5b66d1df2fb728e1f0ddc5' }, this.t('breakout_rooms.main_room')), h("span", { key: '15a620bef9d976ba22e4c4a49c610f84a35605a9', class: "participant-count" }, "(", h("rtk-icon", { key: 'fa1c2779e2ea2c9ea674908ad77956ac846e4e55', icon: this.iconPack.people }), this.participantsToShow.length, ")")), this.selectedParticipantIds.length !== 0 && (h("rtk-tooltip", { key: 'b044bc366b49c8fb2e92f246d0f81e89456ddc03', label: this.t('breakout_rooms.select_all') }, h("input", { key: 'f2343b44386966777542b9c7794b6c94eb99884d', type: "checkbox", checked: this.selectedParticipantIds.length === this.participantsToShow.length, onChange: (e) => this.onToggleAll(!!e.target.checked) })))), h("div", { key: 'a5cd1acb31c9ff2dc82379db038d6920857dead3', class: "ctr scrollbar", part: "container" }, this.participantsToShow.length > 0 && (h("ul", { key: '9d93a5a57f26fe378ed678b6741a0b7f0b17d285', class: "participants", part: "participants" }, this.participantsToShow.map((participant) => (h("li", { class: { 'participant-item': true, dragging: this.isDragging }, onClick: () => this.onClick(participant), onDragStart: () => this.onDragStart(participant), onDragEnd: () => this.onDragEnd(participant), draggable: this.selectedParticipantIds.length === 0, role: "listitem", key: participant.id }, this.renderPeer(participant), !this.isDragging && (h("input", { type: "checkbox", class: {
                 'hide-checkbox': this.selectedParticipantIds.length === 0,
-            }, checked: this.selectedParticipantIds.includes(participantIdentifier(participant)) }))))))), this.participantsToShow.length === 0 && this.search.length > 0 && (h("div", { key: 'bbe867d1f141f2c72d7f801d0eaedd5a0fc484b7', class: "empty-message" }, this.t('participants.errors.empty_results'))), this.participantsToShow.length === 0 && this.search.length === 0 && (h("div", { key: '84864749f6c582214a03ef21f027a9977d979785', class: "empty-room" }, h("rtk-icon", { key: '31353ae4541b5d32d402c77838955f263a02c75f', icon: this.iconPack.people_checked, part: "search-icon", class: "search-icon" }), h("p", { key: '4201bc2d18b32a3e96fee9fe6f8fdb4f75464cb1' }, this.t('breakout_rooms.all_assigned')), h("span", { key: 'e5245caf044fd96b17c41851dce8d22e1c6a083e' }, this.t('breakout_rooms.empty_main_room')))))));
+            }, checked: this.selectedParticipantIds.includes(participantIdentifier(participant)) }))))))), this.participantsToShow.length === 0 && this.search.length > 0 && (h("div", { key: 'f338d5658e77c4161993f27ea369f0981a6e5724', class: "empty-message" }, this.t('participants.errors.empty_results'))), this.participantsToShow.length === 0 && this.search.length === 0 && (h("div", { key: 'badf501a369ab136c61554101a6b64b345c4ce5d', class: "empty-room" }, h("rtk-icon", { key: '4fa711e9d8e93c652947967082ff86c836bf5138', icon: this.iconPack.people_checked, part: "search-icon", class: "search-icon" }), h("p", { key: '25e63fdfccb2267b58e00297b883ebeb45351be2' }, this.t('breakout_rooms.all_assigned')), h("span", { key: 'cbd2f03c343a5ba73ce62d366f53c4bc5b4fac4c' }, this.t('breakout_rooms.empty_main_room')))))));
     }
     static get watchers() { return {
         "meeting": ["meetingChanged"],
@@ -366,7 +366,7 @@ const RtkCounter = class {
         this.input = Math.max(this.minValue, parseInt(this.input) - 1).toString();
     }
     render() {
-        return (h(Host, { key: 'ef85b8128d8f6470dade486d8b31948db504ca21' }, h("rtk-button", { key: 'cfe52b812fcbb969cfa26cfd6f07aaf2f8b68cb2', kind: "icon", variant: "ghost", onClick: () => this.decrement() }, h("rtk-icon", { key: '947cbae0757f3b56ca511789d431da4a9457259a', icon: this.iconPack.subtract })), h("input", { key: '082850c82f03fa110b670234c676b35e56ac663f', type: "number", value: this.input, min: this.minValue, onInput: (e) => {
+        return (h(Host, { key: 'de6f4a676632e7e41089e4d6d9b02cc06253a5c1' }, h("rtk-button", { key: '3e3121dd327719b46997089c73271278d006ffa5', kind: "icon", variant: "ghost", onClick: () => this.decrement() }, h("rtk-icon", { key: '1133d022c7006fea9822f67c330f1ec1a74e0aa9', icon: this.iconPack.subtract })), h("input", { key: '9bd6dd7109ed8ed86b1ad4edef97ec2d455c3f31', type: "number", value: this.input, min: this.minValue, onInput: (e) => {
                 const val = parseInt(e.target.value, 10);
                 if (isNaN(val) || val < this.minValue) {
                     this.input = this.minValue.toString();
@@ -374,7 +374,7 @@ const RtkCounter = class {
                 else {
                     this.input = val.toString();
                 }
-            } }), h("rtk-button", { key: 'fcb469289475e418446019725f47b3fcfe4a2ec1', kind: "icon", variant: "ghost", onClick: () => this.increment() }, h("rtk-icon", { key: 'd4f907255b622dfea369815f4c99ea3a4656caf7', icon: this.iconPack.add }))));
+            } }), h("rtk-button", { key: 'f5114a456b5c922ebac67df8711d5758109dcce8', kind: "icon", variant: "ghost", onClick: () => this.increment() }, h("rtk-icon", { key: 'f21dbbb4c4a667fefb24fcb2dbdebdf81ce9522a', icon: this.iconPack.add }))));
     }
     static get watchers() { return {
         "input": ["watchStateHandler"]

package/dist/esm/rtk-breakout-rooms-manager_9.entry.js

@@ -350,9 +350,9 @@ const RtkBroadcastMessageModal = class {
         }, 2000);
     }
     render() {
-        return (h(Host, { key: 'dafb5f8358be8db735eca75ae4f1cd887267e74a' }, h("div", { key: 'e5990f3fd2c371dc8c989ec8639f0fe1c23cbde4', class: "content-col" }, h("h2", { key: '3c6362b764c6ee53b841ab2278939815de33a0c0' }, "Broadcast message to"), h("select", { key: '9f96c461261583d32197f9a8ffaf0c73cdb2404f', onChange: (e) => {
+        return (h(Host, { key: '09978c477457ca0d1cc7238638c9251b6baf2e32' }, h("div", { key: 'e71f71c920255ca74209993c0feeb50207ece7c8', class: "content-col" }, h("h2", { key: '9e73d2d91d6327782113a3787ffab741caccc45d' }, "Broadcast message to"), h("select", { key: '6f22cd45bd51512ae8563dbb89b68515d6bd10f5', onChange: (e) => {
                 this.messagePayload = Object.assign(Object.assign({}, this.messagePayload), { to: e.target.value });
-            } }, h("option", { key: '780592e2af423343df3dce1f0da05fbfb2676691' }, "Everyone"), h("option", { key: '7874876c9354347c9ad5365128dcf419c678b801' }, "List of rooms")), h("textarea", { key: 'e0bb3a3146e6a9c38374bed1eb78429ee4478d2c', placeholder: "Type message here...", onInput: (e) => {
+            } }, h("option", { key: 'ea43fe84aed7b8fc28a9bf08a8b0c93f5dc4dde1' }, "Everyone"), h("option", { key: '77bf0628822af6852c39d22f998785ec8ee7f0ac' }, "List of rooms")), h("textarea", { key: '25bae88b241fc2d61db69c82b551a5fcb6cc137d', placeholder: "Type message here...", onInput: (e) => {
                 this.messagePayload = Object.assign(Object.assign({}, this.messagePayload), { message: e.target.value });
             } }), this.successMessage ? (h("p", null, "Message sent to ", this.messagePayload.to, h("rtk-icon", { icon: this.iconPack.checkmark }))) : (h("div", { class: "content-row" }, h("rtk-button", { onClick: () => this.close(), variant: "secondary" }, "Cancel"), "\u2002", h("rtk-button", { variant: "primary", onClick: () => this.sendMessage() }, "Send"))))));
     }
@@ -418,7 +418,7 @@ const RtkConfirmationModal = class {
     render() {
         var _a, _b;
         const state = this.states.activeConfirmationModal;
-        return (h(Host, { key: '716b099a3b9d9886c41626cf977e6de8e744894b' }, h("div", { key: 'bac586faa92a4a80b78e36cbef361eec830a8ee2', class: "leave-modal" }, h("div", { key: 'ee19990482ae51504da014bf7d804b4bf577a14a', class: "header" }, h("h2", { key: 'd220797780f3f93b27f1ae511a9fd30e0211b957', class: "title" }, state.header ? this.t(state.header) : this.t('cta.confirmation'))), state.content && h("p", { key: '498688e185b24eec250bcbcdd555fedc15980395', class: "message" }, this.t(state.content)), h("div", { key: '43f6068e6a14c1798ea2d9dec4dafd110222a5aa', class: "content" }, h("div", { key: 'dde485ee17c18a7a15dafd5347e9981ea6af4fe4', class: "leave-meeting" }, h("rtk-button", { key: '9cbbbe08509212e581b2e0768653a9f97efa45e3', variant: "secondary", title: state.cancelText ? this.t(state.cancelText) : this.t('cancel'), onClick: this.close, class: "br-secondary-btn" }, state.cancelText ? this.t(state.cancelText) : this.t('cancel')), h("rtk-button", { key: 'd6c1deaa86c2ec2dd607583aaf9ef3238c343183', onClick: () => this.onConfirmation(), variant: (_b = (_a = this.states.activeConfirmationModal) === null || _a === void 0 ? void 0 : _a.variant) !== null && _b !== void 0 ? _b : 'danger', title: state.ctaText ? this.t(state.ctaText) : this.t('yes') }, state.ctaText ? this.t(state.ctaText) : this.t('yes')))))));
+        return (h(Host, { key: 'c3c594fc3e7923a6cb96abfff6b1103b2f1e4bdb' }, h("div", { key: '5881e956eeefb1dbd9b19548f782a80ca24aa127', class: "leave-modal" }, h("div", { key: 'fa25434424c11296b40c999e6be8d20506542d4d', class: "header" }, h("h2", { key: '9e6d42901ce401796090653c20ebe59a8acb70f4', class: "title" }, state.header ? this.t(state.header) : this.t('cta.confirmation'))), state.content && h("p", { key: '1034d4eadbfb12ff02fb88200a7bcdd7a99c75ac', class: "message" }, this.t(state.content)), h("div", { key: '1868e2521cba84d48a19f544c70465373eaccebb', class: "content" }, h("div", { key: '432d21a121762174a1aedc4926656c9e52cbc5bd', class: "leave-meeting" }, h("rtk-button", { key: 'a5efa391321e6cdc973595637b379a42d1e51707', variant: "secondary", title: state.cancelText ? this.t(state.cancelText) : this.t('cancel'), onClick: this.close, class: "br-secondary-btn" }, state.cancelText ? this.t(state.cancelText) : this.t('cancel')), h("rtk-button", { key: 'b0cbd9943b9e46057ca8ea0829799fad6edfc335', onClick: () => this.onConfirmation(), variant: (_b = (_a = this.states.activeConfirmationModal) === null || _a === void 0 ? void 0 : _a.variant) !== null && _b !== void 0 ? _b : 'danger', title: state.ctaText ? this.t(state.ctaText) : this.t('yes') }, state.ctaText ? this.t(state.ctaText) : this.t('yes')))))));
     }
 };
 __decorate$6([
@@ -574,7 +574,7 @@ const RtkJoinStage = class {
             iconPack: this.iconPack,
             t: this.t,
         };
-        return (h(Host, { key: 'b69a0a77d20a65a3112a393f33e4bc71564b16e1', class: { stage: true } }, h("header", { key: 'c9860a7bd9139b4ddb188f03f4efadcecf2d4259' }, h("h2", { key: '3222f6b149c9584205f355daecb4ebc7a2c329e3' }, this.dataConfig.title)), h(Render, { key: 'ae93b03e1ffeef036560de82bd1cfd678be9895a', element: "rtk-participant-setup", defaults: defaults, props: { participant: (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.self, size: 'md' }, childProps: { participant: (_b = this.meeting) === null || _b === void 0 ? void 0 : _b.self, size: 'md' }, deepProps: true }), h("div", { key: 'b579bcd55ac13475d46a9b363e50a293b3f8ab87', class: "summary" }, this.dataConfig.description), h("div", { key: 'b7002bbcf12848243621dbd4e0e62d73ed5c7043', class: "container" }, h("rtk-button", { key: '240d7e4f50f89e6859be85917a325075d5d98628', variant: "secondary", onClick: () => this.leaveStage.emit(), title: this.dataConfig.label.reject }, this.dataConfig.label.reject), h("rtk-button", { key: 'c510ea579e35bf1302b6364065a2bb4eac43bec0', onClick: () => {
+        return (h(Host, { key: 'e5d51e22abdf1f0192e48ea4d4cbb614747edcc1', class: { stage: true } }, h("header", { key: 'd2a658de63ba4df5d5827a3aff348347c271c21d' }, h("h2", { key: '9e0279be859026b0c330bd174a47556b145f14c6' }, this.dataConfig.title)), h(Render, { key: '47b47ff8103b8f0aec5f667750b2f011e55e0eea', element: "rtk-participant-setup", defaults: defaults, props: { participant: (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.self, size: 'md' }, childProps: { participant: (_b = this.meeting) === null || _b === void 0 ? void 0 : _b.self, size: 'md' }, deepProps: true }), h("div", { key: 'eb435cd2a823279760819d199228eeb4b848b8c7', class: "summary" }, this.dataConfig.description), h("div", { key: '7f161d269e0508e3f184adf590043b707809fac4', class: "container" }, h("rtk-button", { key: '98344f17b421583410b1f279c2ee8dd533090ebb', variant: "secondary", onClick: () => this.leaveStage.emit(), title: this.dataConfig.label.reject }, this.dataConfig.label.reject), h("rtk-button", { key: '5f8cf91e9e864df3c85b63677ab9ac2e17e7aa18', onClick: () => {
                 if (this.isLoading)
                     return;
                 this.isLoading = true;
@@ -673,9 +673,9 @@ const RtkLeaveMeeting = class {
         }
     }
     render() {
-        return (h(Host, { key: 'aea5962feea02bcf96948f3fe61eb6d59657de0d' }, h("div", { key: '183292c3726e742323faba5d94c21ccefe3d56c5', class: "leave-modal" }, h("div", { key: '313b84d84c8a575883c5aa89613bf8a07b53a6aa', class: "header" }, h("h2", { key: 'd87fcdf179052a18b70b9681e56858e09acb04b5', class: "title" }, this.t('leave'))), h("p", { key: 'd03e97a6556e27b3719d4ca9ea89ee8a286d3f16', class: "message" }, this.isBreakoutRoomsActive && this.isChildMeeting
+        return (h(Host, { key: '4680ed34de64c4ab67dc939941a0c0a8f72af619' }, h("div", { key: '6ed0410cb32c8bd113dbc7cc5cfe5a3079606ff5', class: "leave-modal" }, h("div", { key: '8f9702a7fd68a1785bb63620587836c769c379bc', class: "header" }, h("h2", { key: 'e071e2ddbdba0ad61a3e5dc4a8ecf5c39610ffac', class: "title" }, this.t('leave'))), h("p", { key: '39ec1123fadc7fb945b600d114246aaf7b251e5a', class: "message" }, this.isBreakoutRoomsActive && this.isChildMeeting
             ? this.t('breakout_rooms.leave_confirmation')
-            : this.t('leave_confirmation')), h("div", { key: '39742fe6bfbadfb30b116ee38685f1193c773e1c', class: "content" }, h("rtk-button", { key: '39d88ee45a920e56593cd23237bf241951d8b178', variant: "secondary", onClick: this.close, class: "secondary-btn" }, this.t('cancel')), this.isBreakoutRoomsActive && this.isChildMeeting && this.canJoinMainRoom && (h("rtk-button", { key: '250fb2f7e0a44e64a29072bc59d966191ce55a88', variant: "secondary", onClick: this.handleJoinMainRoom, class: "secondary-btn" }, this.t('breakout_rooms.leave_confirmation.main_room_btn'))), h("rtk-button", { key: 'bdbea0eb8468240008a11b1f4456d52633dc2637', variant: "danger", title: this.t('leave'), onClick: this.handleLeave }, this.t('leave')), this.canEndMeeting && (h("rtk-button", { key: 'abff846edc62ce861159bc19101ef6714a5ad99b', variant: "danger", class: "secondary-btn secondary-danger-btn", onClick: this.handleEndMeeting }, this.t('end.all')))))));
+            : this.t('leave_confirmation')), h("div", { key: 'ae5e42b89313baedea3478e59c320ccadd871e3b', class: "content" }, h("rtk-button", { key: '5eccf433e1de71cbbe84d9b9062848f47bcb68b6', variant: "secondary", onClick: this.close, class: "secondary-btn" }, this.t('cancel')), this.isBreakoutRoomsActive && this.isChildMeeting && this.canJoinMainRoom && (h("rtk-button", { key: 'ad34c1c74a3c76289bfaf87e0d03e9323222735a', variant: "secondary", onClick: this.handleJoinMainRoom, class: "secondary-btn" }, this.t('breakout_rooms.leave_confirmation.main_room_btn'))), h("rtk-button", { key: '45a051102497bcfce0efb7a113a6d00a43de0605', variant: "danger", title: this.t('leave'), onClick: this.handleLeave }, this.t('leave')), this.canEndMeeting && (h("rtk-button", { key: '581e73b8d12ecb3a09182cb6561cdbb61ebb913f', variant: "danger", class: "secondary-btn secondary-danger-btn", onClick: this.handleEndMeeting }, this.t('end.all')))))));
     }
     static get watchers() { return {
         "meeting": ["meetingChanged"]
@@ -727,7 +727,7 @@ const RtkMuteAllConfirmation = class {
         };
     }
     render() {
-        return (h(Host, { key: '012843e04afc91b7a9b8bca01d5d44ad8eb21988' }, h("div", { key: '82d246a5339936460435c45122ee9979c6f96ec4', class: "leave-modal" }, h("div", { key: '93a9cb57cc106f4dadbb3bac2dc194dc506d8926', class: "header" }, h("h2", { key: '26535ce68bae0d140ad626cfef61f7f753892404', class: "title" }, this.t('mute_all.header'))), h("p", { key: 'adf32771ba089b2b07022faa581a152495faafbc', class: "message" }, this.t('mute_all.description')), h("div", { key: '8f15b4433aa6483d968f435ce413ebe64077aee4', class: "content" }, h("div", { key: '5d9781ebe01b4085f4c5a9917a09b5b32e418c72', class: "leave-meeting" }, h("rtk-button", { key: 'bb8718e4548662d15ea67cb5a432e195c5f5f965', variant: "secondary", title: this.t('close'), onClick: this.onClose }, this.t('cancel')), h("rtk-button", { key: '0efaee116b9361826fc94a41e4727115a08100cb', variant: "danger", title: this.t('mute_all'), onClick: this.onMuteAll }, this.t('mute_all')))))));
+        return (h(Host, { key: 'fa0d14fa4d97e3dcbac59a1bb9b8a5149b92adc8' }, h("div", { key: '9b2f65663cf69cd7d427793c832b47a89158a8e3', class: "leave-modal" }, h("div", { key: 'ae7dd27985e3eba1b1e2f6f7748b264920ded7ae', class: "header" }, h("h2", { key: 'a70f4d3d12bc42fdb0ca057e63680bb6a5676ae5', class: "title" }, this.t('mute_all.header'))), h("p", { key: '7f8685995b777f91cfd592737b81dcb9af147fb0', class: "message" }, this.t('mute_all.description')), h("div", { key: '3af2889f993e9ba3f7946fb612faf33787b6121f', class: "content" }, h("div", { key: 'ac9f60cfccdc4a6585002ebc7a115ce8cfa85fbe', class: "leave-meeting" }, h("rtk-button", { key: '25ff9d4db1a5731175ec2bf2de0b1a7df6efd1ea', variant: "secondary", title: this.t('close'), onClick: this.onClose }, this.t('cancel')), h("rtk-button", { key: '80cf51d679fa221a54f8b6dabf4b8052936b0d72', variant: "danger", title: this.t('mute_all'), onClick: this.onMuteAll }, this.t('mute_all')))))));
     }
 };
 __decorate$2([
@@ -774,7 +774,7 @@ const RtkOverlayModal = class {
         }
     }
     render() {
-        return (h(Host, { key: '3c4b052af95eb7fd181d940b671b1d8105c568bb' }, h("rtk-icon", { key: 'a279a00bc270b2aa5bc1b867753bb10fbb13dfba', icon: this.states.activeOverlayModal.icon }), h("h2", { key: '283ade7b8c7f340e6931330a923df6d7457902e7' }, this.states.activeOverlayModal.title), h("p", { key: '16a8497d0940fa3354530555ab523e4d7236bbc0' }, this.states.activeOverlayModal.description)));
+        return (h(Host, { key: '996258387764dd1b7d12c4e4765ee38c01cdad94' }, h("rtk-icon", { key: '4ccf7d3878900f0cb5743313bfef0b93fdd80c70', icon: this.states.activeOverlayModal.icon }), h("h2", { key: '7346e4cb9bee22c63cc5014a16f9e7a423afe7e7' }, this.states.activeOverlayModal.title), h("p", { key: '24f5dda6cda11267a00e7a4d9aadf3479b8b2873' }, this.states.activeOverlayModal.description)));
     }
 };
 __decorate$1([
@@ -951,7 +951,7 @@ const RtkPermissionsMessage = class {
             this.stepsTimer = setTimeout(this.nextStep, 2500);
         }
         const showMacDeepLink = isDeniedBySystem && this.meeting.self.device.osName == 'macOS';
-        return (h(Host, { key: '2286180903192f50c5a5f427f4b71b7764f908ff' }, h("h2", { key: '02bd9de1404b366114eac1b36ee94f4afa8666e4' }, h("rtk-icon", { key: 'eae918cb5e321c8ed4f853b3f7942a5ff4a06ec0', class: "text-icon", icon: this.iconPack.warning }), this.getTitle()), this.svgSteps.length > 0 && (h("div", { key: '2ee086e9dfcf6bbce679c0714c40dbc28ccc6318', class: 'svg-container' }, this.svgSteps.map((e, index) => (h("p", { innerHTML: e, class: "svg-ins", key: this.currentStep, hidden: index !== this.currentStep }))))), h("div", { key: 'ee719e6edab99a1998a2284e596c6e5becc0f078' }, this.getMessage()), !isDeniedBySystem && (h("a", { key: 'baaef2813309bde6be2087b18969dfd556ad5f1e', class: "need-help-link", href: this.getLink((_c = (_b = (_a = this.states) === null || _a === void 0 ? void 0 : _a.activePermissionsMessage) === null || _b === void 0 ? void 0 : _b.kind) !== null && _c !== void 0 ? _c : 'audio'), target: "_blank", rel: "noreferrer external noreferrer noopener" }, h("rtk-icon", { key: '23e3df4cc997eec1dedd53c5a89c611d93feb95e', class: "text-icon", icon: this.iconPack.attach }), this.t('cta.help'))), h("div", { key: '27e0eec473b0328d503428802c46f7c648861804', class: "actions" }, h("rtk-button", { key: '4dbb461bbc79ccc78ef964c3596bf61816a941ff', size: "lg", kind: "wide", variant: "secondary", onClick: this.continue }, this.t('cta.continue')), showMacDeepLink ? (h("rtk-button", { size: "lg", kind: "wide", onClick: this.openMacSystemSettings }, this.t('cta.system_settings'))) : (h("rtk-button", { size: "lg", kind: "wide", onClick: this.reload }, this.t('cta.reload')))), h("slot", { key: 'c86e688c04b116c225daed08d622d48dcab064da' })));
+        return (h(Host, { key: 'f879c629292b4157ee891aa46968ff7a52d3e2e2' }, h("h2", { key: 'bdc849ae5badd1068bb174969be860721c90c25b' }, h("rtk-icon", { key: 'ac46b56e03905c886d050fdd371503f28e7f3879', class: "text-icon", icon: this.iconPack.warning }), this.getTitle()), this.svgSteps.length > 0 && (h("div", { key: 'af5da3f11363cd22aeae6635f4648bc074cff01f', class: 'svg-container' }, this.svgSteps.map((e, index) => (h("p", { innerHTML: e, class: "svg-ins", key: this.currentStep, hidden: index !== this.currentStep }))))), h("div", { key: '6344e71e3faef187ac92d7165263f79c9f2709e1' }, this.getMessage()), !isDeniedBySystem && (h("a", { key: 'd7c3484ad52c78491644dd11322349a2f12c5e79', class: "need-help-link", href: this.getLink((_c = (_b = (_a = this.states) === null || _a === void 0 ? void 0 : _a.activePermissionsMessage) === null || _b === void 0 ? void 0 : _b.kind) !== null && _c !== void 0 ? _c : 'audio'), target: "_blank", rel: "noreferrer external noreferrer noopener" }, h("rtk-icon", { key: '213a8bbe2c86818a68bb9149441f015aa53f8f10', class: "text-icon", icon: this.iconPack.attach }), this.t('cta.help'))), h("div", { key: 'c2f18e99845ba44c89477a959cf7a6a0516f4bd8', class: "actions" }, h("rtk-button", { key: '6d56b4ace9c535a2c0fcaa996c29bb1953184a09', size: "lg", kind: "wide", variant: "secondary", onClick: this.continue }, this.t('cta.continue')), showMacDeepLink ? (h("rtk-button", { size: "lg", kind: "wide", onClick: this.openMacSystemSettings }, this.t('cta.system_settings'))) : (h("rtk-button", { size: "lg", kind: "wide", onClick: this.reload }, this.t('cta.reload')))), h("slot", { key: '8747e1f884579fc91d7f498cf2094fedb5744948' })));
     }
     static get watchers() { return {
         "meeting": ["meetingChanged"]

package/dist/esm/rtk-channel-creator.entry.js

@@ -139,9 +139,9 @@ const RtkChannelCreator = class {
         (_a = this.inputTextRef) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
-        return (h(Host, { key: '5d65768a72c0769857b7d817d0b555d50a5645a5' }, h("header", { key: 'f8826c58072d2ddb73ed61a1813bf62b85cb9bc8' }, this.step === 1 ? this.t('chat.new_channel') : this.t('chat.add_members')), this.step === 1 && (h("input", { key: '2bad468b946a896cb28a6206d5650c1b0192f9f9', class: "channel-name-input", type: "text", placeholder: this.t('chat.channel_name'), ref: (el) => (this.inputTextRef = el), onInput: (e) => {
+        return (h(Host, { key: '2a8a498ae3cdc2c3d7bf10f4914a617d7e2661e0' }, h("header", { key: '9b047a3ad2820e634db9b5b93f162250601bb51b' }, this.step === 1 ? this.t('chat.new_channel') : this.t('chat.add_members')), this.step === 1 && (h("input", { key: '520e78e1827e820f5ea9eabbd03bae4efd0907a5', class: "channel-name-input", type: "text", placeholder: this.t('chat.channel_name'), ref: (el) => (this.inputTextRef = el), onInput: (e) => {
                 this.channelName = e.target.value.trim();
-            } })), this.step === 2 && this.renderMemberSelector(), h("footer", { key: 'd23db51c427fa67f67cc11514e241d052eb376fe' }, h("rtk-button", { key: '5031f53ed0dc632d3e778f0ecaefb0165b74d74d', kind: "button", size: "lg", disabled: this.channelName.length === 0, onClick: this.onClickHandler }, this.step === 1 ? this.t('chat.add_members') : this.t('create')))));
+            } })), this.step === 2 && this.renderMemberSelector(), h("footer", { key: 'add838deac0797e7eb7dc234054b0e6e4561baed' }, h("rtk-button", { key: 'fe9718d1352e6b83a0400442c8ec7dec224d0b9b', kind: "button", size: "lg", disabled: this.channelName.length === 0, onClick: this.onClickHandler }, this.step === 1 ? this.t('chat.add_members') : this.t('create')))));
     }
     get $el() { return getElement(this); }
 };

package/dist/esm/rtk-channel-details.entry.js

@@ -31,7 +31,7 @@ const RtkChannelDetails = class {
         })));
     }
     render() {
-        return (h(Host, { key: 'fd16feaf7e6dff4fbf038073e953c25d3f7b4822' }, h("header", { key: 'acb5029883e4bd77eadd22d1024cb5a9dfd8247a' }, this.t('chat.channel_members')), this.renderMembers()));
+        return (h(Host, { key: '9853d84d5b69fc5eeca68ef48aacfa0319345790' }, h("header", { key: '09f33db7c3acb17437ed92f911951995316aff28' }, this.t('chat.channel_members')), this.renderMembers()));
     }
 };
 __decorate([