@cloudflare/realtimekit-ui 1.0.3 → 1.0.4-staging.2

package/dist/components/{p-c1a12313.js → p-b8baba9f.js}

@@ -1,60 +1,60 @@
 import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, e as Host } from './p-c3592601.js';
-import { d as defaultConfig, a as defaultIconPack, c as useLanguage, l as usePaginatedChat, F as FlagsmithFeatureFlags } from './p-fc4484ae.js';
+import { c as createDefaultConfig, e as defaultIconPack, h as useLanguage, K as usePaginatedChat, L as FlagsmithFeatureFlags } from './p-2b523e10.js';
 import { h as handleFilesDataTransfer, g as generateChatGroupKey, T as TEMPORARY_CHANNEL_PREFIX, i as isDirectMessageChannel, d as alphabeticalSorter, f as getDMComparator, s as stripOutReplyBlock, j as parseMessageForTarget } from './p-0abe4b8a.js';
 import { c as chatUnreadTimestamps } from './p-a83ccdbd.js';
-import { S as SyncWithStore } from './p-989a34c9.js';
-import { d as defineCustomElement$Q } from './p-cbc8e449.js';
-import { d as defineCustomElement$P } from './p-11048ea8.js';
-import { d as defineCustomElement$O } from './p-6d3c8a73.js';
-import { d as defineCustomElement$N } from './p-1c22a3a0.js';
-import { d as defineCustomElement$M } from './p-273196ec.js';
-import { d as defineCustomElement$L } from './p-2507c6c8.js';
-import { d as defineCustomElement$K } from './p-0daa472f.js';
-import { d as defineCustomElement$J } from './p-e9c999f4.js';
-import { d as defineCustomElement$I } from './p-01b76741.js';
-import { d as defineCustomElement$H } from './p-b5dc3971.js';
-import { d as defineCustomElement$G } from './p-d8be719c.js';
-import { d as defineCustomElement$F } from './p-8c391f68.js';
-import { d as defineCustomElement$E } from './p-e902ab68.js';
-import { d as defineCustomElement$D } from './p-eab1b7c1.js';
-import { d as defineCustomElement$C } from './p-b76deed8.js';
-import { d as defineCustomElement$B } from './p-cac807c5.js';
-import { d as defineCustomElement$A } from './p-153e1ac6.js';
-import { d as defineCustomElement$z } from './p-5597fe9f.js';
-import { d as defineCustomElement$y } from './p-f4158e29.js';
-import { d as defineCustomElement$x } from './p-7afb8f24.js';
-import { d as defineCustomElement$w } from './p-b1030316.js';
-import { d as defineCustomElement$v } from './p-a59e060b.js';
-import { d as defineCustomElement$u } from './p-ebb19a87.js';
-import { d as defineCustomElement$t } from './p-eba76ab4.js';
-import { d as defineCustomElement$s } from './p-1f0c5462.js';
-import { d as defineCustomElement$r } from './p-de567bdf.js';
-import { d as defineCustomElement$q } from './p-11b00854.js';
-import { d as defineCustomElement$p } from './p-9b7dc3b2.js';
-import { d as defineCustomElement$o } from './p-ff6d9602.js';
-import { d as defineCustomElement$n } from './p-4b89a5d6.js';
-import { d as defineCustomElement$m } from './p-a73161da.js';
-import { d as defineCustomElement$l } from './p-c86a0f9e.js';
-import { d as defineCustomElement$k } from './p-3d5214b4.js';
-import { d as defineCustomElement$j } from './p-85665c03.js';
-import { d as defineCustomElement$i } from './p-1cc409c6.js';
-import { d as defineCustomElement$h } from './p-7916d083.js';
-import { d as defineCustomElement$g } from './p-3358d7dc.js';
-import { d as defineCustomElement$f } from './p-c1f57f6b.js';
-import { d as defineCustomElement$e } from './p-20c74379.js';
-import { d as defineCustomElement$d } from './p-2df5f773.js';
-import { d as defineCustomElement$c } from './p-8d07e4b3.js';
-import { d as defineCustomElement$b } from './p-f634f020.js';
-import { d as defineCustomElement$a } from './p-d5ce79e0.js';
-import { d as defineCustomElement$9 } from './p-07c5a2da.js';
-import { d as defineCustomElement$8 } from './p-fab54b49.js';
-import { d as defineCustomElement$7 } from './p-40a18d12.js';
-import { d as defineCustomElement$6 } from './p-ba8208ac.js';
-import { d as defineCustomElement$5 } from './p-23d64784.js';
-import { d as defineCustomElement$4 } from './p-79534847.js';
-import { d as defineCustomElement$3 } from './p-f0df8c15.js';
-import { d as defineCustomElement$2 } from './p-a09473cb.js';
-import { d as defineCustomElement$1 } from './p-b2b2e917.js';
+import { S as SyncWithStore } from './p-3968315b.js';
+import { d as defineCustomElement$Q } from './p-81a13bf2.js';
+import { d as defineCustomElement$P } from './p-65980189.js';
+import { d as defineCustomElement$O } from './p-5255d2f8.js';
+import { d as defineCustomElement$N } from './p-bf72bb45.js';
+import { d as defineCustomElement$M } from './p-fc56c6ea.js';
+import { d as defineCustomElement$L } from './p-4c2acc5c.js';
+import { d as defineCustomElement$K } from './p-fbe523dc.js';
+import { d as defineCustomElement$J } from './p-96362151.js';
+import { d as defineCustomElement$I } from './p-87ae32cb.js';
+import { d as defineCustomElement$H } from './p-e10e8a56.js';
+import { d as defineCustomElement$G } from './p-4f585ec2.js';
+import { d as defineCustomElement$F } from './p-4bb5e9bb.js';
+import { d as defineCustomElement$E } from './p-c65aaf73.js';
+import { d as defineCustomElement$D } from './p-310a03ac.js';
+import { d as defineCustomElement$C } from './p-384919de.js';
+import { d as defineCustomElement$B } from './p-47f6fdfa.js';
+import { d as defineCustomElement$A } from './p-36b8529e.js';
+import { d as defineCustomElement$z } from './p-bee7d918.js';
+import { d as defineCustomElement$y } from './p-f8594d8e.js';
+import { d as defineCustomElement$x } from './p-7ac93e47.js';
+import { d as defineCustomElement$w } from './p-d1084f45.js';
+import { d as defineCustomElement$v } from './p-ea160150.js';
+import { d as defineCustomElement$u } from './p-ab84cfbb.js';
+import { d as defineCustomElement$t } from './p-7764b66b.js';
+import { d as defineCustomElement$s } from './p-2d58e36e.js';
+import { d as defineCustomElement$r } from './p-0c855484.js';
+import { d as defineCustomElement$q } from './p-b53c309c.js';
+import { d as defineCustomElement$p } from './p-32584f88.js';
+import { d as defineCustomElement$o } from './p-3081fabf.js';
+import { d as defineCustomElement$n } from './p-6b4eccd6.js';
+import { d as defineCustomElement$m } from './p-cadee920.js';
+import { d as defineCustomElement$l } from './p-40870ba7.js';
+import { d as defineCustomElement$k } from './p-9f86929b.js';
+import { d as defineCustomElement$j } from './p-c254f63b.js';
+import { d as defineCustomElement$i } from './p-885dad3e.js';
+import { d as defineCustomElement$h } from './p-17ac0da7.js';
+import { d as defineCustomElement$g } from './p-b9e78c21.js';
+import { d as defineCustomElement$f } from './p-2f9525bf.js';
+import { d as defineCustomElement$e } from './p-1035acb6.js';
+import { d as defineCustomElement$d } from './p-792de3bc.js';
+import { d as defineCustomElement$c } from './p-8320939f.js';
+import { d as defineCustomElement$b } from './p-938ee31c.js';
+import { d as defineCustomElement$a } from './p-fb038bd0.js';
+import { d as defineCustomElement$9 } from './p-80efd900.js';
+import { d as defineCustomElement$8 } from './p-f44a0212.js';
+import { d as defineCustomElement$7 } from './p-7d95084a.js';
+import { d as defineCustomElement$6 } from './p-8afd3f68.js';
+import { d as defineCustomElement$5 } from './p-24c3ffc2.js';
+import { d as defineCustomElement$4 } from './p-0a0515d9.js';
+import { d as defineCustomElement$3 } from './p-7525d343.js';
+import { d as defineCustomElement$2 } from './p-095e6b83.js';
+import { d as defineCustomElement$1 } from './p-acbb932e.js';
 
 const rtkChatCss = ":host {\n  line-height: initial;\n  font-family: var(--rtk-font-family, sans-serif);\n\n  font-feature-settings: normal;\n  font-variation-settings: normal;\n}\n\np {\n  margin: var(--rtk-space-0, 0px);\n  padding: var(--rtk-space-0, 0px);\n}\n\n.scrollbar {\n  /* For Firefox */\n  scrollbar-width: thin;\n  scrollbar-color: var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n    var(--rtk-scrollbar-background, transparent);\n}\n\n/* For WebKit */\n.scrollbar::-webkit-scrollbar {\n  height: var(--rtk-space-1\\.5, 6px);\n  width: var(--rtk-space-1\\.5, 6px);\n  border-radius: 9999px;\n  background-color: var(--rtk-scrollbar-background, transparent);\n}\n\n.scrollbar::-webkit-scrollbar-thumb {\n  border-radius: 9999px;\n  background-color: var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)));\n}\n\n\n:host {\n  display: flex;\n  height: 100%;\n  width: 100%;\n  flex-direction: column;\n  font-size: 14px;\n  position: relative;\n  color: rgb(var(--rtk-colors-text-1000, 255 255 255));\n}\n\nh3 {\n  margin: var(--rtk-space-0, 0px);\n  display: flex;\n  height: var(--rtk-space-12, 48px);\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n  font-weight: 400;\n  color: rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));\n  text-align: center;\n}\n\n#dropzone {\n  position: absolute;\n  top: var(--rtk-space-0, 0px);\n  right: var(--rtk-space-0, 0px);\n  bottom: var(--rtk-space-0, 0px);\n  left: var(--rtk-space-0, 0px);\n  z-index: 10;\n  display: none;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));\n  color: rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64));\n}\n\n#dropzone.active {\n  display: flex;\n  animation: 0.2s slide-up ease-in;\n}\n\nrtk-chat-messages-ui,\nrtk-chat-messages-ui-paginated {\n  flex: 1 0 0;\n}\n\nrtk-chat-composer-view {\n  margin: var(--rtk-space-2, 8px);\n}\n\n.chat-container {\n  display: flex;\n  height: 100%;\n  width: 100%;\n  flex-direction: row;\n  container-type: size;\n  container-name: chatcontainer;\n}\n\n@container chatcontainer (height < 360px) {\n  rtk-channel-selector-view {\n    height: var(--rtk-space-8, 32px);\n    min-height: 24px;\n  }\n}\n\n.chat {\n  display: flex;\n  flex: 1 1 0%;\n  flex-direction: column;\n}\n\n.banner {\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n\n.banner .welcome-new-channel {\n  width: var(--rtk-space-48, 192px);\n}\n\n.banner .create-channel-illustration {\n  height: var(--rtk-space-40, 160px);\n  width: var(--rtk-space-40, 160px);\n}\n\n.channel-selector-header {\n  box-sizing: border-box;\n  height: var(--rtk-space-16, 64px);\n  padding: var(--rtk-space-4, 16px);\n  display: flex;\n  justify-content: space-between;\n  border-bottom: var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-700, 44 44 44));\n}\n\n.channel-selector-header .channel-create-btn {\n  width: var(--rtk-space-8, 32px);\n  justify-content: center;\n}\n\n.channel-selector-header .channel-create-btn:hover {\n  --tw-text-opacity: 1;\n  color: rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-text-opacity));\n}\n\n.view-chats-btn {\n  margin-top: var(--rtk-space-4, 16px);\n}\n\n.selector-container {\n  z-index: 50;\n  width: 100%;\n  max-width: var(--rtk-space-80, 320px);\n  border-right: var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60));\n}\n\n.selector-container.hide {\n  display: none;\n}\n\n.mobile-close-btn {\n  display: none;\n}\n\n.selector-container.mobile {\n  height: 100%;\n  width: 100%;\n  max-width: 100%;\n  position: absolute;\n  top: var(--rtk-space-0, 0px);\n  right: var(--rtk-space-0, 0px);\n  bottom: var(--rtk-space-0, 0px);\n  left: var(--rtk-space-0, 0px);\n  background-color: rgba(var(--rtk-colors-background-1000, 8 8 8) / 0.6);\n  display: flex;\n}\n\n.selector-container.mobile rtk-channel-selector-view {\n  max-width: var(--rtk-space-96, 384px);\n    animation: 0.3s swipe-in;\n}\n\n.selector-container.mobile .mobile-close-btn {\n  margin-top: var(--rtk-space-4, 16px);\n  margin-bottom: var(--rtk-space-4, 16px);\n  margin-left: var(--rtk-space-6, 24px);\n  margin-right: var(--rtk-space-6, 24px);\n  display: block;\n}\n\n.pinned-messages-header {\n  display: flex;\n  align-items: center;\n  gap: var(--rtk-space-2, 8px);\n  padding: var(--rtk-space-2, 8px);\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));\n  font-size: 12px;\n  cursor: pointer;\n}\n\n.pinned-messages-header rtk-icon {\n  height: var(--rtk-space-3, 12px);\n  width: var(--rtk-space-3, 12px);\n}\n\n.pinned-messages-header:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));\n}\n\n.pinned-messages-header.active {\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));\n}\n\n@keyframes swipe-in {\n  from {\n    transform: translateX(-100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n";
 const RtkChatStyle0 = rtkChatCss;
@@ -90,7 +90,7 @@ const RtkChat = /*@__PURE__*/ proxyCustomElement(class RtkChat extends H {
             this.canSendFiles = this.meeting.self.permissions.chatPublic.files;
         };
         /** Config */
-        this.config = defaultConfig;
+        this.config = createDefaultConfig();
         /** Icon pack */
         this.iconPack = defaultIconPack;
         /** Language */
@@ -605,8 +605,9 @@ const RtkChat = /*@__PURE__*/ proxyCustomElement(class RtkChat extends H {
     }
     render() {
         var _a, _b;
-        if (!this.meeting)
+        if (!this.meeting) {
             return null;
+        }
         const uiProps = { iconPack: this.iconPack, t: this.t, size: this.size };
         const selfUserId = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.self.userId;
         let chatMessages = this.chatGroups[this.selectedGroup] || [];
@@ -664,6 +665,9 @@ const RtkChat = /*@__PURE__*/ proxyCustomElement(class RtkChat extends H {
 __decorate([
     SyncWithStore()
 ], RtkChat.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkChat.prototype, "config", void 0);
 __decorate([
     SyncWithStore()
 ], RtkChat.prototype, "size", void 0);