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

package/dist/components/rtk-chat-composer-ui.js

@@ -1,14 +1,14 @@
 import { p as proxyCustomElement, H, d as createEvent, w as writeTask, h, e as Host } from './p-c3592601.js';
-import { e as defaultIconPack, h as useLanguage } from './p-7fc0dc2f.js';
-import { r as reverse, h as handleFilesDataTransfer, k as replyBlockPattern, e as extractReplyBlock, s as stripOutReplyBlock, M as MAX_TEXT_LENGTH } from './p-dab9d3d6.js';
+import { e as defaultIconPack, i as useLanguage } from './p-dc9dde66.js';
+import { r as reverse, h as handleFilesDataTransfer, f as replyBlockPattern, e as extractReplyBlock, s as stripOutReplyBlock, M as MAX_TEXT_LENGTH } from './p-addb4be5.js';
 import { a as gracefulStorage } from './p-a83ccdbd.js';
-import { S as SyncWithStore } from './p-47c25f64.js';
-import { d as defineCustomElement$7 } from './p-f4e75ea9.js';
+import { S as SyncWithStore } from './p-9c3c75a9.js';
+import { d as defineCustomElement$7 } from './p-cec4d080.js';
 import { d as defineCustomElement$6 } from './p-1391bef0.js';
-import { d as defineCustomElement$5 } from './p-20290b0b.js';
-import { d as defineCustomElement$4 } from './p-3b29dda1.js';
-import { d as defineCustomElement$3 } from './p-0a35a909.js';
-import { d as defineCustomElement$2 } from './p-fa8f6b4a.js';
+import { d as defineCustomElement$5 } from './p-3245ace2.js';
+import { d as defineCustomElement$4 } from './p-73baf5ba.js';
+import { d as defineCustomElement$3 } from './p-19d83dd6.js';
+import { d as defineCustomElement$2 } from './p-63c79efa.js';
 
 const rtkChatComposerUiCss = ":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{display:flex;flex-direction:column;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity))}.chat-input{position:relative;margin:var(--rtk-space-2, 8px);z-index:10;box-sizing:border-box;display:flex;flex-direction:column;border-radius:var(--rtk-border-radius-md, 8px);border:var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60))}textarea{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));box-sizing:border-box;padding:var(--rtk-space-3, 12px);color:rgb(var(--rtk-colors-text-1000, 255 255 255))}textarea::-moz-placeholder{color:rgb(var(--rtk-colors-text-1000, 255 255 255))}textarea::placeholder{color:rgb(var(--rtk-colors-text-1000, 255 255 255))}textarea{border-top-left-radius:var(--rtk-border-radius-md, 8px);border-top-right-radius:var(--rtk-border-radius-md, 8px);font-family:var(--rtk-font-family, sans-serif);outline:2px solid transparent;outline-offset:2px;resize:none;overflow-y:auto;border-width:var(--rtk-border-width-none, 0);border-style:none;min-height:60px;font-size:16px}.chat-buttons{border-bottom-right-radius:var(--rtk-border-radius-md, 8px);border-bottom-left-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));display:flex;height:var(--rtk-space-8, 32px);align-items:center;justify-content:space-between;padding-left:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-3, 12px);padding-top:var(--rtk-space-2, 8px);padding-bottom:var(--rtk-space-2, 8px)}.chat-buttons .left rtk-button{margin-right:var(--rtk-space-1, 4px)}.chat-buttons .left rtk-button rtk-icon{height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px)}.chat-buttons .right{z-index:10}.chat-buttons .right .edit-buttons{display:flex;gap:var(--rtk-space-2, 8px)}.chat-buttons>div{display:flex;align-items:center}rtk-emoji-picker{z-index:0;position:absolute;bottom:var(--rtk-space-32, 128px);border-top:var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60));animation:0.3s slide-up ease}@keyframes slide-up{from{transform:translateY(100%)}to{transform:translateY(0%)}}.member-list{margin:var(--rtk-space-0, 0px);margin-top:var(--rtk-space-1, 4px);max-height:var(--rtk-space-28, 112px);min-width:var(--rtk-space-40, 160px);max-width:var(--rtk-space-64, 256px);padding:var(--rtk-space-0, 0px);position:absolute;bottom:var(--rtk-space-28, 112px);list-style-type:none;overflow-y:auto;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));border-radius:var(--rtk-border-radius-sm, 4px);--tw-border-spacing-x:var(--rtk-space-2, 8px);--tw-border-spacing-y:var(--rtk-space-2, 8px);border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y);border-style:solid;border-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / 0.5)}.member-list .member{display:flex;align-items:center;gap:var(--rtk-space-1, 4px);padding:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-4, 16px);cursor:pointer}.member-list .member rtk-avatar{flex-shrink:0;height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px);font-size:14px;color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.member-list .member span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.member-list .member:hover,.member-list .member.selected{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-700, 2 70 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.suggested-replies{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-3, 12px);display:flex;flex-wrap:nowrap;gap:var(--rtk-space-2, 8px);list-style-type:none;overflow-x:auto}.suggested-replies rtk-tooltip{flex-shrink:0}.suggested-replies li{padding:var(--rtk-space-2, 8px);border-radius:var(--rtk-border-radius-md, 8px);background-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / 0.75);color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));cursor:pointer}.suggested-replies li:hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-bg-opacity))}.preview-overlay{position:absolute;top:var(--rtk-space-0, 0px);right:var(--rtk-space-0, 0px);bottom:var(--rtk-space-0, 0px);left:var(--rtk-space-0, 0px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));border-radius:var(--rtk-border-radius-md, 8px)}.file-preview{position:absolute;top:var(--rtk-space-4, 16px);left:var(--rtk-space-4, 16px);max-width:-moz-fit-content;max-width:fit-content;max-height:var(--rtk-space-20, 80px)}.file-preview:hover rtk-tooltip{display:block}.file-preview rtk-tooltip{position:absolute;top:calc(var(--rtk-space-1, 4px) * -1);left:calc(var(--rtk-space-1, 4px) * -1);display:none;margin-left:calc(var(--rtk-space-1, 4px) * -1);margin-top:calc(var(--rtk-space-1, 4px) * -1)}.file-preview rtk-button{display:flex;height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));border:1px solid rgb(var(--rtk-colors-text-1000, 255 255 255))}.file-preview rtk-icon{height:var(--rtk-space-3, 12px);width:var(--rtk-space-3, 12px);color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.preview-image{height:var(--rtk-space-16, 64px);width:var(--rtk-space-16, 64px);-o-object-fit:cover;object-fit:cover;max-height:100%;max-width:100%;overflow:clip;border-radius:var(--rtk-border-radius-md, 8px)}.preview-file{padding-left:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-3, 12px);padding-top:var(--rtk-space-2, 8px);padding-bottom:var(--rtk-space-2, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--rtk-border-radius-md, 8px);max-width:200px}@keyframes scroll-text{0%{transform:translateX(0%)}70%{transform:translateX(-100%)}80%{transform:translateX(0%)}100%{transform:translateX(0%)}}";
 const RtkChatComposerUiStyle0 = rtkChatComposerUiCss;
@@ -180,7 +180,6 @@ const RtkChatComposerUi$1 = /*@__PURE__*/ proxyCustomElement(class RtkChatCompos
             this.onEditMessage.emit({
                 id: this.prefill.editMessage.id,
                 message: editedMessage,
-                channelId: this.prefill.editMessage.channelId,
             });
             this.cleanup();
         };
@@ -244,22 +243,12 @@ const RtkChatComposerUi$1 = /*@__PURE__*/ proxyCustomElement(class RtkChatCompos
         // this.fileReader.onloadstart = () => {};
         // this.fileReader.onloadend = () => {};
     }
-    onChannelChanged() {
-        this.mentionQuery = '';
-        this.focusedMemberIndex = 0;
-        const message = gracefulStorage.getItem(this.storageKey) || '';
-        this.$textArea.value = message;
-        this.emojiPickerActive = false;
-    }
     componentDidRender() {
         if (this.prefill.editMessage || this.prefill.replyMessage) {
             writeTask(() => this.$textArea.focus());
         }
     }
     get storageKey() {
-        if (this.channelId) {
-            return `rtk-text-message-${this.channelId}`;
-        }
         return 'rtk-text-message';
     }
     uploadFile(type) {
@@ -287,24 +276,21 @@ const RtkChatComposerUi$1 = /*@__PURE__*/ proxyCustomElement(class RtkChatCompos
         if ((_a = this.prefill.editMessage) === null || _a === void 0 ? void 0 : _a.message) {
             defaultValue = stripOutReplyBlock(this.prefill.editMessage.message);
         }
-        return (h(Host, { key: '0550423a075a5e445ebae18e70213e17dd79c6ff' }, this.canSendTextMessage && this.emojiPickerActive && (h("rtk-emoji-picker", { key: '89eaa1c1e0ae3da8fed3c203fd87a19cd5f19b8e', part: "emoji-picker", onPickerClose: () => {
+        return (h(Host, { key: 'c9b26b145ea3128b15d185b74b04e749f77c770b' }, this.canSendTextMessage && this.emojiPickerActive && (h("rtk-emoji-picker", { key: '7d0d4ce0e76402f2961b68bc195252b2d763897a', part: "emoji-picker", onPickerClose: () => {
                 this.emojiPickerActive = false;
             }, onRtkEmojiClicked: (e) => {
                 this.$textArea.value += e.detail;
                 this.$textArea.focus();
-            }, t: this.t })), this.renderSuggestedReplies(), h("slot", { key: '6da586002dff47002d856c0204dee2bbe8571236', name: "chat-addon" }), h("slot", { key: 'fa285ac5f4fb88ddcc3aa9b6a294d12b09cd94e9', name: "quote-block" }), h("div", { key: 'c71568bf5344f9fcd3be019d02ca4bf1a8a9d9b8', class: "chat-input", part: "chat-input" }, this.renderMenu(), this.canSendTextMessage && (h("textarea", { key: 'ec57005f4795fefdaaba266d9e891853a5bded1f', class: "scrollbar", part: "textarea", ref: this.initializeTextField, autoFocus: true, placeholder: this.fileToUpload ? '' : this.t('chat.message_placeholder'), value: defaultValue, onPaste: this.onPaste, maxLength: MAX_TEXT_LENGTH, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, onInput: (e) => {
+            }, t: this.t })), this.renderSuggestedReplies(), h("slot", { key: '8c0a491279abf36ac203864dd3d0416f869cd21e', name: "chat-addon" }), h("slot", { key: 'f6b1c1005f1ee395f67d690c53227fa632ee0cdf', name: "quote-block" }), h("div", { key: 'faf19e3d662121fc8803db26e7ba068010bca101', class: "chat-input", part: "chat-input" }, this.renderMenu(), this.canSendTextMessage && (h("textarea", { key: '1079590c4e4d5374ee950b14348ba1602ef1c5de', class: "scrollbar", part: "textarea", ref: this.initializeTextField, autoFocus: true, placeholder: this.fileToUpload ? '' : this.t('chat.message_placeholder'), value: defaultValue, onPaste: this.onPaste, maxLength: MAX_TEXT_LENGTH, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, onInput: (e) => {
                 gracefulStorage.setItem(this.storageKey, e.target.value);
-            }, disabled: !!this.filePreview })), h("div", { key: '322d141483c79366ef59dee65a5072a6f437a64a', class: "chat-buttons", part: "chat-buttons" }, h("div", { key: 'cb287e6ced3bb48f445af933a99a1f8100ac41c6', class: "left", part: "chat-buttons-left" }, !this.prefill.editMessage &&
+            }, disabled: !!this.filePreview })), h("div", { key: '26d3b3537d7906eea72d3d05d58b2dd04656351d', class: "chat-buttons", part: "chat-buttons" }, h("div", { key: 'de75960db0ce9053781a073cbd99619dc592f4a2', class: "left", part: "chat-buttons-left" }, !this.prefill.editMessage &&
             this.canSendFiles && [
-            h("rtk-tooltip", { key: '78c91b6a2097013f3da368086e868d2d465ec9cb', label: this.t('chat.send_file') }, h("rtk-button", { key: '278e56e0d1d012c658a74a07aece9f07fb13b486', variant: "ghost", kind: "icon", onClick: () => this.uploadFile('file'), title: this.t('chat.send_file') }, h("rtk-icon", { key: 'f0551578a82d14a0313044c257a2cd04b8a4320e', icon: this.iconPack.attach }))),
-            h("rtk-tooltip", { key: 'f1f658aece9261ff928f631b78545bfc2cc6b99e', label: this.t('chat.send_img') }, h("rtk-button", { key: '31e9bb3127886607cb630db538b6acdc405df324', variant: "ghost", kind: "icon", onClick: () => this.uploadFile('image'), title: this.t('chat.send_img') }, h("rtk-icon", { key: '66f46b7128dcbb041a2e35a5a9d61eb087aae126', icon: this.iconPack.image }))),
-        ], !this.prefill.editMessage && this.canSendTextMessage && !this.disableEmojiPicker && (h("rtk-tooltip", { key: '28524998014e48efa944db921c6ebaa644f7522c', label: this.t('chat.send_emoji') }, h("rtk-button", { key: '2ab4710a53f8c399b94fdf89d8b3e26ecdfb38c9', variant: "ghost", kind: "icon", class: { active: this.emojiPickerActive }, title: this.t('chat.send_emoji'), onClick: () => {
+            h("rtk-tooltip", { key: 'bc07e6ec604e792853de682f81bba9350c071695', label: this.t('chat.send_file') }, h("rtk-button", { key: '814975fca0c52ee6b3e1cc7ec11ca40e66b15bff', variant: "ghost", kind: "icon", onClick: () => this.uploadFile('file'), title: this.t('chat.send_file') }, h("rtk-icon", { key: 'a253073a509d0b9e3d46a54a75060d2a287d73f1', icon: this.iconPack.attach }))),
+            h("rtk-tooltip", { key: 'fc277a3b2f56f2bb578c6bf54161f03e84f7edd0', label: this.t('chat.send_img') }, h("rtk-button", { key: '4cb2c92316eb877fe47d4c4e84b1b46498a3ead2', variant: "ghost", kind: "icon", onClick: () => this.uploadFile('image'), title: this.t('chat.send_img') }, h("rtk-icon", { key: '9390b17ae907fa5688cf0d080036406b1cdad940', icon: this.iconPack.image }))),
+        ], !this.prefill.editMessage && this.canSendTextMessage && !this.disableEmojiPicker && (h("rtk-tooltip", { key: '8c65df90edc39538680af4d5ca27d9582bb73c8b', label: this.t('chat.send_emoji') }, h("rtk-button", { key: '36516aa948bae41553307c6c2b1a0e2b56e9e579', variant: "ghost", kind: "icon", class: { active: this.emojiPickerActive }, title: this.t('chat.send_emoji'), onClick: () => {
                 this.emojiPickerActive = !this.emojiPickerActive;
-            } }, h("rtk-icon", { key: 'eb26faa361adb34eb7afbd013c21a5039e32292d', icon: this.iconPack.emoji_multiple }))))), !!this.filePreview && this.renderFilePreview(), this.canSendTextMessage && (h("div", { key: '820a5ff20514c9802d3612045f36d95d2358dcda', class: "right", part: "chat-buttons-right" }, !this.prefill.editMessage && (h("rtk-tooltip", { key: '405fb291f728f2afa6940a82cbc16777e8eba2bc', variant: "primary", label: this.t('chat.send_msg'), delay: 2000 }, h("rtk-button", { key: '4bff2c0bf52fc35da61d67760d82943b4516c358', kind: "icon", onClick: () => this.handleSendMessage(), title: this.t('chat.send_msg') }, h("rtk-icon", { key: 'd5294b068fbb1e60bdccb899b7931c03e4fb9eb1', icon: this.iconPack.send })))), this.prefill.editMessage && (h("div", { key: '995aa908ccab6ab22252d78ddefed672474f56a0', class: "edit-buttons" }, h("rtk-tooltip", { key: '2429c8023b38ba99c8e0b3a66206f719ce0e1932', variant: "secondary", label: this.t('cancel'), delay: 2000 }, h("rtk-button", { key: '2fbaa972db33e50976661f4a02a3be9d67ec78fa', kind: "icon", variant: "secondary", onClick: () => this.handleEditCancel(), title: this.t('cancel') }, h("rtk-icon", { key: '3466f90521e92efe325dec9bd7c3419f726713d8', icon: this.iconPack.dismiss }))), h("rtk-tooltip", { key: '84af3b7940bcdeec414e42cbda84359154a19a19', variant: "primary", label: this.t('chat.update_msg'), delay: 2000 }, h("rtk-button", { key: '580af6cecb00e77994e688a9bd70b63aeb1f0782', kind: "icon", onClick: () => this.handleEditMessage(), title: this.t('chat.send_msg') }, h("rtk-icon", { key: 'a6266954cfa1ffbcc6e3606bfe993e54e3f5c5ee', icon: this.iconPack.checkmark })))))))))));
+            } }, h("rtk-icon", { key: '316a436c758a92f75f0317a7581a60c22fb6ac0f', icon: this.iconPack.emoji_multiple }))))), !!this.filePreview && this.renderFilePreview(), this.canSendTextMessage && (h("div", { key: '349e7059eccac20e94ea5f37916a86f3a257291e', class: "right", part: "chat-buttons-right" }, !this.prefill.editMessage && (h("rtk-tooltip", { key: '1f2e0a4a6accbac815dc1cab31199cd30aed54ee', variant: "primary", label: this.t('chat.send_msg'), delay: 2000 }, h("rtk-button", { key: '6198a0b903e4a0d10b31df7295657796ecd8f7e6', kind: "icon", onClick: () => this.handleSendMessage(), title: this.t('chat.send_msg') }, h("rtk-icon", { key: '148c05327edb7d1a00eab59638c4a8980c46ecf0', icon: this.iconPack.send })))), this.prefill.editMessage && (h("div", { key: '9ce8f5314e1c083a3a8b04cd0f51817c6bd32420', class: "edit-buttons" }, h("rtk-tooltip", { key: '00a4725501a4a0c4da2417316ce00ad051e30f3f', variant: "secondary", label: this.t('cancel'), delay: 2000 }, h("rtk-button", { key: '50feacc73245cdc1f48993299514b1b69415ce4a', kind: "icon", variant: "secondary", onClick: () => this.handleEditCancel(), title: this.t('cancel') }, h("rtk-icon", { key: '0d49ff03a6ad065dba7471ac505bda622ac3e065', icon: this.iconPack.dismiss }))), h("rtk-tooltip", { key: 'ffde051d03bcadce49d5407ae1eb2cbe70f73028', variant: "primary", label: this.t('chat.update_msg'), delay: 2000 }, h("rtk-button", { key: 'e99981ce6368d5a5797f05e0d9ab6543416f6196', kind: "icon", onClick: () => this.handleEditMessage(), title: this.t('chat.send_msg') }, h("rtk-icon", { key: '7f4fffe0695af1f8563e3bb865d8e18cf4cb7020', icon: this.iconPack.checkmark })))))))))));
     }
-    static get watchers() { return {
-        "channelId": ["onChannelChanged"]
-    }; }
     static get style() { return RtkChatComposerUiStyle0; }
 }, [1, "rtk-chat-composer-ui", {
         "canSendTextMessage": [4, "can-send-text-message"],
@@ -315,13 +301,10 @@ const RtkChatComposerUi$1 = /*@__PURE__*/ proxyCustomElement(class RtkChatCompos
         "disableEmojiPicker": [4, "disable-emoji-picker"],
         "prefill": [16],
         "members": [16],
-        "channelId": [1, "channel-id"],
         "emojiPickerActive": [32],
         "mentionQuery": [32],
         "focusedMemberIndex": [32],
         "filePreview": [32]
-    }, undefined, {
-        "channelId": ["onChannelChanged"]
     }]);
 __decorate([
     SyncWithStore()

package/dist/components/rtk-chat-composer-view.js

@@ -1,4 +1,4 @@
-import { R as RtkChatComposerView$1, d as defineCustomElement$1 } from './p-f47894a6.js';
+import { R as RtkChatComposerView$1, d as defineCustomElement$1 } from './p-97d1dcb7.js';
 
 const RtkChatComposerView = RtkChatComposerView$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-chat-message.js

@@ -1,4 +1,4 @@
-import { R as RtkChatMessage$1, d as defineCustomElement$1 } from './p-ee98bbaf.js';
+import { R as RtkChatMessage$1, d as defineCustomElement$1 } from './p-a89ee2d2.js';
 
 const RtkChatMessage = RtkChatMessage$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-chat-messages-ui-paginated.js

@@ -1,4 +1,4 @@
-import { R as RtkChatMessagesUiPaginated$1, d as defineCustomElement$1 } from './p-a6f2b402.js';
+import { R as RtkChatMessagesUiPaginated$1, d as defineCustomElement$1 } from './p-770c0fd7.js';
 
 const RtkChatMessagesUiPaginated = RtkChatMessagesUiPaginated$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-chat-messages-ui.js

@@ -1,22 +1,22 @@
 import { p as proxyCustomElement, H, d as createEvent, w as writeTask, h, e as Host } from './p-c3592601.js';
-import { e as defaultIconPack, h as useLanguage } from './p-7fc0dc2f.js';
+import { e as defaultIconPack, i as useLanguage } from './p-dc9dde66.js';
 import { c as chatUnreadTimestamps } from './p-a83ccdbd.js';
 import { d as differenceInMinutes, f as formatDateTime, e as elapsedDuration } from './p-382270d8.js';
 import { s as smoothScrollToBottom } from './p-0752f2ba.js';
-import { S as SyncWithStore } from './p-47c25f64.js';
-import { d as defineCustomElement$e } from './p-f4e75ea9.js';
+import { S as SyncWithStore } from './p-9c3c75a9.js';
+import { d as defineCustomElement$e } from './p-cec4d080.js';
 import { d as defineCustomElement$d } from './p-1391bef0.js';
-import { d as defineCustomElement$c } from './p-0b4e526c.js';
-import { d as defineCustomElement$b } from './p-3b29dda1.js';
-import { d as defineCustomElement$a } from './p-63ef7ea4.js';
-import { d as defineCustomElement$9 } from './p-88bef213.js';
-import { d as defineCustomElement$8 } from './p-f8f5cb31.js';
-import { d as defineCustomElement$7 } from './p-a6296b02.js';
-import { d as defineCustomElement$6 } from './p-080acf18.js';
-import { d as defineCustomElement$5 } from './p-fe911889.js';
-import { d as defineCustomElement$4 } from './p-0a35a909.js';
-import { d as defineCustomElement$3 } from './p-a94b2e67.js';
-import { d as defineCustomElement$2 } from './p-fa8f6b4a.js';
+import { d as defineCustomElement$c } from './p-52e95364.js';
+import { d as defineCustomElement$b } from './p-73baf5ba.js';
+import { d as defineCustomElement$a } from './p-f5101af9.js';
+import { d as defineCustomElement$9 } from './p-8222af8c.js';
+import { d as defineCustomElement$8 } from './p-951a67af.js';
+import { d as defineCustomElement$7 } from './p-7e6ca4af.js';
+import { d as defineCustomElement$6 } from './p-fe648db5.js';
+import { d as defineCustomElement$5 } from './p-d3414935.js';
+import { d as defineCustomElement$4 } from './p-19d83dd6.js';
+import { d as defineCustomElement$3 } from './p-a6aea524.js';
+import { d as defineCustomElement$2 } from './p-63c79efa.js';
 
 const rtkChatMessagesUiCss = ":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{position:relative;display:flex;flex-direction:column;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));word-break:break-word}.chat-container{box-sizing:border-box;display:flex;flex-direction:column;padding-top:var(--rtk-space-4, 16px);padding-bottom:var(--rtk-space-4, 16px);flex:1 0 0px;overflow-y:scroll}.chat-container .spacer{flex:1 1 auto}.chat-container .chat{flex:0 0 auto}.file-picker{display:none}.chat .head{margin-bottom:var(--rtk-space-2, 8px);display:flex;align-items:center}.chat .head .name{margin-right:var(--rtk-space-2, 8px);font-size:12px;font-weight:700}.chat .head .time{font-size:12px;color:rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76))}.chat .body{overflow-wrap:break-word;line-height:1.5}.chat .body .emoji{font-size:24px}p{margin:var(--rtk-space-0, 0px);line-height:1.5}rtk-message-view{margin-top:var(--rtk-space-2, 8px);display:block;padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px);color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));box-sizing:border-box}rtk-message-view::part(message){flex-grow:1}*[is-continued] rtk-message-view{margin-top:var(--rtk-space-1, 4px)}.pinned .message-wrapper{position:relative}.pinned .pin-button{position:absolute;right:var(--rtk-space-4, 16px);top:calc(var(--rtk-space-4, 16px) * -1);display:flex;border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.pinned .pin-button:hover rtk-button{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-600, 13 81 253) / var(--tw-bg-opacity))}.pinned rtk-message-view{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));padding-top:var(--rtk-space-1, 4px);padding-bottom:var(--rtk-space-1, 4px)}a{--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-text-opacity));text-decoration-line:none}a:hover{text-decoration-line:underline}.new-chat-marker{display:flex;width:100%;align-items:center;gap:var(--rtk-space-2, 8px);--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-text-opacity))}.new-chat-marker::before{content:'';height:1px;flex:1 1 0%;background-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / 0.5)}.show-new-messages-ctr{pointer-events:none;display:flex;justify-content:flex-end;padding:var(--rtk-space-3, 12px);z-index:0;margin-top:calc(var(--rtk-space-14, 56px) * -1)}.show-new-messages{pointer-events:auto;--tw-translate-y:var(--rtk-space-16, 64px);transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:0;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.show-new-messages.active{--tw-translate-y:var(--rtk-space-0, 0px);transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:1}";
 const RtkChatMessagesUiStyle0 = rtkChatMessagesUiCss;
@@ -172,7 +172,7 @@ const RtkChatMessagesUi$1 = /*@__PURE__*/ proxyCustomElement(class RtkChatMessag
         var _a;
         let prevMessage = null;
         let reachedFirstUnread = false;
-        return (h(Host, { key: '02149982e96642f42c8850f5d501c038874300f7' }, h("div", { key: 'bcc27f4f4c620175c5b6daead99d0a1b64e6bba8', class: "chat-container scrollbar", ref: (el) => (this.$chat = el), part: "container" }, h("div", { key: '4d4ba71a572095a28aa7c03e70a724521122e96d', class: "spacer", part: "spacer" }), h("div", { key: 'eca7d4406536b4e1b8d907bffe9a1ed6ad311dd4', class: "chat", part: "chat" }, (_a = this.messages) === null || _a === void 0 ? void 0 : _a.map((item) => {
+        return (h(Host, { key: 'e103ed88be7ff7eef5cc5904d0659b0bc9b100a2' }, h("div", { key: '3cfe50f940719b18c541a3b5108ab755b075fa8f', class: "chat-container scrollbar", ref: (el) => (this.$chat = el), part: "container" }, h("div", { key: 'b82bdc0b8767bc3bfc24a5a71da71bb5a05a4082', class: "spacer", part: "spacer" }), h("div", { key: '38ce33278cca8417d1238919ac8f1a2228e1ddfc', class: "chat", part: "chat" }, (_a = this.messages) === null || _a === void 0 ? void 0 : _a.map((item) => {
             if (item.type === 'chat') {
                 const { message } = item;
                 const isSelfMessage = message.userId === this.selfUserId;
@@ -191,10 +191,10 @@ const RtkChatMessagesUi$1 = /*@__PURE__*/ proxyCustomElement(class RtkChatMessag
                     } })))), message.pinned && (h("div", { class: "pin-button", part: "pin-button" }, h("rtk-tooltip", { label: this.t('unpin') }, h("rtk-button", { kind: "icon", variant: "ghost", onClick: () => this.onMessageActionHandler('pin_message', message), disabled: !this.canPinMessages }, h("rtk-icon", { icon: this.iconPack.pin, size: "sm" }))))))));
             }
             return null;
-        }))), h("div", { key: '8cbfbb3eef3f8640ddd66f68d0287cff5ade6997', class: "show-new-messages-ctr" }, h("rtk-button", { key: 'c9d841cf2d557b766c4a642291779562b71d25a1', class: {
+        }))), h("div", { key: '61cf1bb71fedcb4a34cb5774dde7fad36c0e56fc', class: "show-new-messages-ctr" }, h("rtk-button", { key: '2d0e8672f0c4f721b82bb92d00ec4fcc85c71e42', class: {
                 'show-new-messages': true,
                 active: this.showLatestMessageButton,
-            }, kind: "icon", part: "show-new-messages", onClick: this.scrollToBottom }, h("rtk-icon", { key: 'c579ffd1d28139fd82535c6cc0f661118b670a59', icon: this.iconPack.chevron_down })))));
+            }, kind: "icon", part: "show-new-messages", onClick: this.scrollToBottom }, h("rtk-icon", { key: '782c8b457ded5710bf3f0e19eb910a34a7ee1a20', icon: this.iconPack.chevron_down })))));
     }
     static get watchers() { return {
         "messages": ["chatChanged"],

package/dist/components/rtk-chat-search-results.js

@@ -1,19 +1,19 @@
 import { p as proxyCustomElement, H, h, e as Host } from './p-c3592601.js';
-import { e as defaultIconPack, h as useLanguage } from './p-7fc0dc2f.js';
+import { e as defaultIconPack, i as useLanguage } from './p-dc9dde66.js';
 import './p-a83ccdbd.js';
-import { S as SyncWithStore } from './p-47c25f64.js';
-import { d as defineCustomElement$d } from './p-f4e75ea9.js';
+import { S as SyncWithStore } from './p-9c3c75a9.js';
+import { d as defineCustomElement$d } from './p-cec4d080.js';
 import { d as defineCustomElement$c } from './p-1391bef0.js';
-import { d as defineCustomElement$b } from './p-ee98bbaf.js';
-import { d as defineCustomElement$a } from './p-488d88a8.js';
-import { d as defineCustomElement$9 } from './p-3b29dda1.js';
-import { d as defineCustomElement$8 } from './p-190db142.js';
-import { d as defineCustomElement$7 } from './p-f8f5cb31.js';
-import { d as defineCustomElement$6 } from './p-a6296b02.js';
-import { d as defineCustomElement$5 } from './p-080acf18.js';
-import { d as defineCustomElement$4 } from './p-a9540d93.js';
-import { d as defineCustomElement$3 } from './p-0a35a909.js';
-import { d as defineCustomElement$2 } from './p-9889bee5.js';
+import { d as defineCustomElement$b } from './p-a89ee2d2.js';
+import { d as defineCustomElement$a } from './p-66d10db2.js';
+import { d as defineCustomElement$9 } from './p-73baf5ba.js';
+import { d as defineCustomElement$8 } from './p-c643c410.js';
+import { d as defineCustomElement$7 } from './p-951a67af.js';
+import { d as defineCustomElement$6 } from './p-7e6ca4af.js';
+import { d as defineCustomElement$5 } from './p-fe648db5.js';
+import { d as defineCustomElement$4 } from './p-33db910f.js';
+import { d as defineCustomElement$3 } from './p-19d83dd6.js';
+import { d as defineCustomElement$2 } from './p-f8a13473.js';
 
 const rtkChatSearchResultsCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{display:flex;height:100%;flex-direction:column;position:relative;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity))}";
 const RtkChatSearchResultsStyle0 = rtkChatSearchResultsCss;
@@ -51,7 +51,7 @@ const RtkChatSearchResults$1 = /*@__PURE__*/ proxyCustomElement(class RtkChatSea
         };
     }
     render() {
-        return (h(Host, { key: '226b9e52950fca3d296b041dbd93a6c060ad4abe' }, h("rtk-paginated-list", { key: '102af9de7e52317a5f9a8272e9e8a302f99268da', pageSize: this.pageSize, pagesAllowed: 3, fetchData: this.searchMessages, createNodes: this.nodeRenderer, selectedItemId: this.query })));
+        return (h(Host, { key: '9facd16ae6846eaf92829033209450012a5e8c79' }, h("rtk-paginated-list", { key: '4f260b7fb885fb62e57042674b9686ca481731fc', pageSize: this.pageSize, pagesAllowed: 3, fetchData: this.searchMessages, createNodes: this.nodeRenderer, selectedItemId: this.query })));
     }
     static get style() { return RtkChatSearchResultsStyle0; }
 }, [1, "rtk-chat-search-results", {

package/dist/components/rtk-chat-selector-ui.js

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
-import { e as defaultIconPack, h as useLanguage } from './p-7fc0dc2f.js';
-import { g as generateChatGroupKey } from './p-dab9d3d6.js';
-import { S as SyncWithStore } from './p-47c25f64.js';
-import { d as defineCustomElement$2 } from './p-3b29dda1.js';
+import { e as defaultIconPack, i as useLanguage } from './p-dc9dde66.js';
+import { g as generateChatGroupKey } from './p-addb4be5.js';
+import { S as SyncWithStore } from './p-9c3c75a9.js';
+import { d as defineCustomElement$2 } from './p-73baf5ba.js';
 
 const rtkChatSelectorUiCss = ":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{display:flex;flex-direction:column}.chat-scope-selector{position:relative;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));z-index:10}.chat-scope-selector button{width:100%;border-width:var(--rtk-border-width-none, 0);border-style:none;padding:var(--rtk-space-4, 16px);display:flex;align-items:center;justify-content:space-between;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255));font-size:14px;cursor:pointer;height:var(--rtk-space-12, 48px)}.chat-scope-selector button span{display:flex;align-items:center;justify-content:flex-start}.chat-scope-selector button rtk-icon{height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px)}.chat-scope-selector .search{position:sticky;box-sizing:border-box;display:flex;align-items:center;border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));margin-left:var(--rtk-space-3, 12px);margin-right:var(--rtk-space-3, 12px);margin-top:var(--rtk-space-3, 12px);margin-bottom:var(--rtk-space-0, 0px)}.chat-scope-selector .search rtk-icon{margin-left:var(--rtk-space-2, 8px);margin-right:var(--rtk-space-2, 8px);height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px);color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52))}.chat-scope-selector .search input{box-sizing:border-box;height:var(--rtk-space-9, 36px);width:100%;padding-right:var(--rtk-space-2, 8px);border-width:var(--rtk-border-width-none, 0);border-style:none;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255));outline:2px solid transparent;outline-offset:2px;border-radius:var(--rtk-border-radius-sm, 4px);font-size:14px}.chat-scope-selector .search input::-moz-placeholder{color:rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76))}.chat-scope-selector .search input::placeholder{color:rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76))}.chat-scope-selector .participants-container{position:absolute;width:100%;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));top:var(--rtk-space-12, 48px);animation:0.3s slide-down ease}@keyframes slide-down{from{transform:translateY(-50px)}to{transform:translateY(0%)}}.chat-scope-selector .scope-list{margin-top:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-0, 0px);list-style-type:none;padding-left:var(--rtk-space-0, 0px);padding-right:var(--rtk-space-0, 0px);overflow:auto;max-height:375px}.chat-scope-selector .scope-list .scope{position:relative;display:flex;flex-direction:row;align-items:center;padding-left:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-3, 12px);padding-top:var(--rtk-space-4, 16px);padding-bottom:var(--rtk-space-4, 16px)}.chat-scope-selector .scope-list .scope:hover{cursor:pointer;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity))}.chat-scope-selector .scope-list .scope-special{margin-top:var(--rtk-space-4, 16px);--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-text-opacity))}.chat-scope-selector .scope-list .everyone-icon>rtk-icon{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px);color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.chat-scope-selector .scope-list .everyone-icon{display:flex;height:100%;width:100%;align-items:center;justify-content:center;margin-right:var(--rtk-space-2, 8px);height:var(--rtk-space-8, 32px);width:var(--rtk-space-8, 32px);border-radius:9999px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));font-size:12px}.unread-count.selector{position:unset;margin-left:var(--rtk-space-2, 8px)}.unread-count{position:absolute;right:var(--rtk-space-3, 12px);box-sizing:border-box;padding:var(--rtk-space-0\\.5, 2px);-webkit-user-select:none;-moz-user-select:none;user-select:none;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));font-size:12px;color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));display:flex;height:var(--rtk-space-5, 20px);min-width:var(--rtk-space-5, 20px);align-items:center;justify-content:center;border-radius:9999px;z-index:1}rtk-avatar{height:var(--rtk-space-8, 32px);width:var(--rtk-space-8, 32px)}";
 const RtkChatSelectorUiStyle0 = rtkChatSelectorUiCss;

package/dist/components/rtk-chat-toggle.js

@@ -1,12 +1,12 @@
 import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
-import { e as defaultIconPack, h as useLanguage } from './p-7fc0dc2f.js';
-import { c as canViewChat } from './p-6f340109.js';
-import { S as SyncWithStore } from './p-47c25f64.js';
-import { d as defineCustomElement$4 } from './p-6c2cfa0d.js';
-import { d as defineCustomElement$3 } from './p-3b29dda1.js';
-import { d as defineCustomElement$2 } from './p-0a35a909.js';
+import { e as defaultIconPack, i as useLanguage } from './p-dc9dde66.js';
+import { c as canViewChat } from './p-1c5cc842.js';
+import { S as SyncWithStore } from './p-9c3c75a9.js';
+import { d as defineCustomElement$4 } from './p-206acdcd.js';
+import { d as defineCustomElement$3 } from './p-73baf5ba.js';
+import { d as defineCustomElement$2 } from './p-19d83dd6.js';
 
-const rtkChatToggleCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{position:relative;display:block}:host([data-hidden]){display:none}.unread-count{position:absolute;right:var(--rtk-space-3, 12px);box-sizing:border-box;padding:var(--rtk-space-0\\.5, 2px);-webkit-user-select:none;-moz-user-select:none;user-select:none;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));font-size:12px;color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));display:flex;height:var(--rtk-space-5, 20px);min-width:var(--rtk-space-5, 20px);align-items:center;justify-content:center;border-radius:9999px;z-index:1}.unread-count-dot{position:absolute;right:var(--rtk-space-3, 12px);z-index:10;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));border-radius:50%;display:flex;height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);align-items:center;justify-content:center}:host([variant='horizontal']) .unread-count{right:var(--rtk-space-4, 16px);top:50%;transform:translateY(-50%)}";
+const rtkChatToggleCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{position:relative;display:block}:host([data-hidden]){display:none}.unread-count{position:absolute;right:var(--rtk-space-4, 16px);box-sizing:border-box;padding:var(--rtk-space-0\\.5, 2px);-webkit-user-select:none;-moz-user-select:none;user-select:none;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));font-size:12px;color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));display:flex;height:var(--rtk-space-5, 20px);min-width:var(--rtk-space-5, 20px);align-items:center;justify-content:center;border-radius:9999px;z-index:1}.unread-count-dot{position:absolute;right:var(--rtk-space-3, 12px);z-index:10;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));border-radius:50%;display:flex;height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);align-items:center;justify-content:center}:host([variant='horizontal']) .unread-count{right:var(--rtk-space-4, 16px);top:50%;transform:translateY(-50%)}";
 const RtkChatToggleStyle0 = rtkChatToggleCss;
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -34,17 +34,15 @@ const RtkChatToggle$1 = /*@__PURE__*/ proxyCustomElement(class RtkChatToggle ext
         this.t = useLanguage();
         this.chatActive = false;
         this.canViewChat = false;
-        /**
-         * Only used when paginated chat is enabled
-         */
-        this.hasNewMessages = false;
+        this.pageSize = 11;
         this.onChatUpdate = ({ action, message }) => {
             var _a;
             if (this.chatActive)
                 return;
             if (action === 'add' && message.userId !== ((_a = this.meeting) === null || _a === void 0 ? void 0 : _a.self.userId)) {
-                this.hasNewMessages = true;
-                this.unreadMessageCount += 1;
+                if (this.unreadMessageCount <= 10) {
+                    this.unreadMessageCount += 1;
+                }
             }
         };
         this.toggleChat = () => {
@@ -52,7 +50,6 @@ const RtkChatToggle$1 = /*@__PURE__*/ proxyCustomElement(class RtkChatToggle ext
             this.chatActive = !((states === null || states === void 0 ? void 0 : states.activeSidebar) && (states === null || states === void 0 ? void 0 : states.sidebar) === 'chat');
             if (this.chatActive) {
                 this.unreadMessageCount = 0;
-                this.hasNewMessages = false;
             }
             this.stateUpdate.emit({
                 activeSidebar: this.chatActive,
@@ -76,27 +73,36 @@ const RtkChatToggle$1 = /*@__PURE__*/ proxyCustomElement(class RtkChatToggle ext
         (_f = (_e = this.meeting) === null || _e === void 0 ? void 0 : _e.self) === null || _f === void 0 ? void 0 : _f.permissions.removeListener('chatUpdate', this.updateCanView);
     }
     meetingChanged(meeting) {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c;
         if (!meeting)
             return;
-        (_a = meeting.chat) === null || _a === void 0 ? void 0 : _a.getMessages(new Date().getTime(), 1, true).then((res) => {
-            var _a;
-            if ((_a = res === null || res === void 0 ? void 0 : res.messages) === null || _a === void 0 ? void 0 : _a.length)
-                this.hasNewMessages = true;
-        });
-        const meetingStartedTimeMs = (_c = (_b = meeting.meta) === null || _b === void 0 ? void 0 : _b.meetingStartedTimestamp.getTime()) !== null && _c !== void 0 ? _c : 0;
-        const newMessages = (_d = meeting.chat) === null || _d === void 0 ? void 0 : _d.messages.filter((m) => m.timeMs > meetingStartedTimeMs);
-        this.unreadMessageCount = newMessages.length || 0;
-        (_e = meeting.chat) === null || _e === void 0 ? void 0 : _e.addListener('chatUpdate', this.onChatUpdate);
+        this.setUnreadMessageCount();
         this.canViewChat = canViewChat(meeting);
-        (_f = meeting === null || meeting === void 0 ? void 0 : meeting.stage) === null || _f === void 0 ? void 0 : _f.on('stageStatusUpdate', this.updateCanView);
-        (_g = meeting === null || meeting === void 0 ? void 0 : meeting.self) === null || _g === void 0 ? void 0 : _g.permissions.on('chatUpdate', this.updateCanView);
+        (_a = meeting.chat) === null || _a === void 0 ? void 0 : _a.addListener('chatUpdate', this.onChatUpdate);
+        (_b = meeting === null || meeting === void 0 ? void 0 : meeting.stage) === null || _b === void 0 ? void 0 : _b.on('stageStatusUpdate', this.updateCanView);
+        (_c = meeting === null || meeting === void 0 ? void 0 : meeting.self) === null || _c === void 0 ? void 0 : _c.permissions.on('chatUpdate', this.updateCanView);
     }
     statesChanged(states) {
         if (states != null) {
             this.chatActive = states.activeSidebar === true && states.sidebar === 'chat';
         }
     }
+    async setUnreadMessageCount() {
+        var _a, _b;
+        const chat = this.meeting.chat;
+        if (!chat)
+            return;
+        const { messages } = await chat.getMessages(new Date().getTime(), this.pageSize, true);
+        const meetingStartedTimeMs = (_b = (_a = this.meeting.meta) === null || _a === void 0 ? void 0 : _a.meetingStartedTimestamp.getTime()) !== null && _b !== void 0 ? _b : 0;
+        const newMessages = messages.filter((m) => m.timeMs > meetingStartedTimeMs);
+        if (newMessages.length === this.pageSize && newMessages.length > 0) {
+            // all messages are new, so we can't know the exact count, but we know there are at least pageSize - 1 new messages
+            this.unreadMessageCount = newMessages.length;
+        }
+        else {
+            this.unreadMessageCount = newMessages.length;
+        }
+    }
     handleChatActiveChange() {
         // Chat sidebar closed without opening a different sidebar
         if (!this.chatActive && !this.states.activeSidebar) {
@@ -108,8 +114,7 @@ const RtkChatToggle$1 = /*@__PURE__*/ proxyCustomElement(class RtkChatToggle ext
             return null;
         if (!this.canViewChat)
             return h(Host, { "data-hidden": true });
-        return (h(Host, { title: this.t('chat') }, this.hasNewMessages && h("div", { class: "unread-count-dot", part: "unread-count-dot" })
-            , h("rtk-controlbar-button", { ref: (el) => (this.buttonEl = el), part: "controlbar-button", size: this.size, iconPack: this.iconPack, class: { active: this.chatActive }, onClick: this.toggleChat, icon: this.iconPack.chat, label: this.t('chat'), variant: this.variant })));
+        return (h(Host, { title: this.t('chat') }, this.unreadMessageCount !== 0 && !this.chatActive && (h("div", { class: "unread-count", part: "unread-count" }, h("span", null, this.unreadMessageCount < this.pageSize ? this.unreadMessageCount : '10+'))), h("rtk-controlbar-button", { ref: (el) => (this.buttonEl = el), part: "controlbar-button", size: this.size, iconPack: this.iconPack, class: { active: this.chatActive }, onClick: this.toggleChat, icon: this.iconPack.chat, label: this.t('chat'), variant: this.variant })));
     }
     static get watchers() { return {
         "meeting": ["meetingChanged"],
@@ -126,8 +131,7 @@ const RtkChatToggle$1 = /*@__PURE__*/ proxyCustomElement(class RtkChatToggle ext
         "t": [16],
         "unreadMessageCount": [32],
         "chatActive": [32],
-        "canViewChat": [32],
-        "hasNewMessages": [32]
+        "canViewChat": [32]
     }, undefined, {
         "meeting": ["meetingChanged"],
         "states": ["statesChanged"],

package/dist/components/rtk-chat.js

@@ -1,4 +1,4 @@
-import { R as RtkChat$1, d as defineCustomElement$1 } from './p-2f08d7eb.js';
+import { R as RtkChat$1, d as defineCustomElement$1 } from './p-ac80e7fc.js';
 
 const RtkChat = RtkChat$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-clock.js

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h, e as Host } from './p-c3592601.js';
-import { e as defaultIconPack } from './p-7fc0dc2f.js';
-import { S as SyncWithStore } from './p-47c25f64.js';
-import { d as defineCustomElement$2 } from './p-3b29dda1.js';
+import { e as defaultIconPack } from './p-dc9dde66.js';
+import { S as SyncWithStore } from './p-9c3c75a9.js';
+import { d as defineCustomElement$2 } from './p-73baf5ba.js';
 
 const rtkClockCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{display:inline-flex;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;font-size:14px;color:rgb(var(--rtk-colors-text-1000, 255 255 255));font-variant-numeric:tabular-nums}:host([data-hidden]){display:none}:host([size='sm']){font-size:12px}rtk-icon{margin-right:var(--rtk-space-1, 4px);height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px)}:host([size='sm']) rtk-icon{height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px)}";
 const RtkClockStyle0 = rtkClockCss;
@@ -76,9 +76,9 @@ const RtkClock$1 = /*@__PURE__*/ proxyCustomElement(class RtkClock extends H {
     }
     render() {
         const showClock = this.startedTime !== undefined;
-        return (h(Host, { key: '6e6b7a331666cd98cb100dca5c2869a8b5688553', "data-hidden": !showClock, tabIndex: 0, role: "timer", "aria-live": "off" }, this.startedTime !== undefined && [
-            h("rtk-icon", { key: '91cd9140d88447cd6662e08f4d2ed4c0df62858b', icon: this.iconPack.clock, "aria-hidden": true, tabIndex: -1, part: "icon" }),
-            h("span", { key: 'eba0772ccc8f0cc14c9c4dd7c11574dcc368b443', part: "text" }, this.getFormattedTime()),
+        return (h(Host, { key: 'beed3a91f4703b7075b44ffb4ca72c760518f5f9', "data-hidden": !showClock, tabIndex: 0, role: "timer", "aria-live": "off" }, this.startedTime !== undefined && [
+            h("rtk-icon", { key: '9d18399656cfeaee9f371e3d3c4a618ee05c1138', icon: this.iconPack.clock, "aria-hidden": true, tabIndex: -1, part: "icon" }),
+            h("span", { key: 'e7ca3a7b828284a526e76c507b5226f0a2b27ca1', part: "text" }, this.getFormattedTime()),
         ]));
     }
     static get watchers() { return {

package/dist/components/rtk-confirmation-modal.js

@@ -1,4 +1,4 @@
-import { R as RtkConfirmationModal$1, d as defineCustomElement$1 } from './p-8d25843a.js';
+import { R as RtkConfirmationModal$1, d as defineCustomElement$1 } from './p-0899c09f.js';
 
 const RtkConfirmationModal = RtkConfirmationModal$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-controlbar-button.js

@@ -1,4 +1,4 @@
-import { R as RtkControlbarButton$1, d as defineCustomElement$1 } from './p-6c2cfa0d.js';
+import { R as RtkControlbarButton$1, d as defineCustomElement$1 } from './p-206acdcd.js';
 
 const RtkControlbarButton = RtkControlbarButton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-controlbar.js

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, h, e as Host } from './p-c3592601.js';
-import { c as createDefaultConfig, e as defaultIconPack, h as useLanguage } from './p-7fc0dc2f.js';
+import { c as createDefaultConfig, e as defaultIconPack, i as useLanguage } from './p-dc9dde66.js';
 import './p-a83ccdbd.js';
 import { R as Render } from './p-60fdbd75.js';
-import { S as SyncWithStore } from './p-47c25f64.js';
+import { S as SyncWithStore } from './p-9c3c75a9.js';
 
 const rtkControlbarCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{box-sizing:border-box;display:flex;align-items:center;gap:var(--rtk-space-0\\.5, 2px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));padding-left:var(--rtk-space-4, 16px);padding-right:var(--rtk-space-4, 16px);position:relative;z-index:10}@media only screen and (max-device-height: 480px) and (orientation: landscape){:host{padding-top:var(--rtk-space-0, 0px) !important}}";
 const RtkControlbarStyle0 = rtkControlbarCss;
@@ -42,7 +42,7 @@ const RtkControlbar$1 = /*@__PURE__*/ proxyCustomElement(class RtkControlbar ext
             iconPack: this.iconPack,
             size: this.size,
         };
-        return (h(Host, { key: 'f4fee1168f1b057865a0c615c563158df7f7e2fd' }, !this.disableRender && (h(Render, { key: '58945391fb15e670a385f12e3d5861b03597ed61', element: "rtk-controlbar", defaults: defaults, onlyChildren: true })), h("slot", { key: 'df55eba453868617350ec45fc0437ecb11e03597' })));
+        return (h(Host, { key: '3d2043b478cdd2e8a4b227ee7c1b1e123c69e4c3' }, !this.disableRender && (h(Render, { key: '63bd4e2f72c1e863b2be3f4502f7a98d9eb04362', element: "rtk-controlbar", defaults: defaults, onlyChildren: true })), h("slot", { key: '984cc5552073d5ae44377dd6841173395926f99e' })));
     }
     static get style() { return RtkControlbarStyle0; }
 }, [1, "rtk-controlbar", {

package/dist/components/rtk-counter.js

@@ -1,4 +1,4 @@
-import { R as RtkCounter$1, d as defineCustomElement$1 } from './p-b34865c7.js';
+import { R as RtkCounter$1, d as defineCustomElement$1 } from './p-63e51be4.js';
 
 const RtkCounter = RtkCounter$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-debugger-audio.js

@@ -1,4 +1,4 @@
-import { R as RtkDebuggerAudio$1, d as defineCustomElement$1 } from './p-84e5b453.js';
+import { R as RtkDebuggerAudio$1, d as defineCustomElement$1 } from './p-c402a1db.js';
 
 const RtkDebuggerAudio = RtkDebuggerAudio$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-debugger-screenshare.js

@@ -1,4 +1,4 @@
-import { R as RtkDebuggerScreenShare, d as defineCustomElement$1 } from './p-5f26bba3.js';
+import { R as RtkDebuggerScreenShare, d as defineCustomElement$1 } from './p-6e10fc42.js';
 
 const RtkDebuggerScreenshare = RtkDebuggerScreenShare;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-debugger-system.js

@@ -1,4 +1,4 @@
-import { R as RtkDebuggerSystem$1, d as defineCustomElement$1 } from './p-102b6df8.js';
+import { R as RtkDebuggerSystem$1, d as defineCustomElement$1 } from './p-caaca684.js';
 
 const RtkDebuggerSystem = RtkDebuggerSystem$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-debugger-toggle.js

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
-import { h as useLanguage, e as defaultIconPack } from './p-7fc0dc2f.js';
-import { S as SyncWithStore } from './p-47c25f64.js';
-import { d as defineCustomElement$4 } from './p-6c2cfa0d.js';
-import { d as defineCustomElement$3 } from './p-3b29dda1.js';
-import { d as defineCustomElement$2 } from './p-0a35a909.js';
+import { i as useLanguage, e as defaultIconPack } from './p-dc9dde66.js';
+import { S as SyncWithStore } from './p-9c3c75a9.js';
+import { d as defineCustomElement$4 } from './p-206acdcd.js';
+import { d as defineCustomElement$3 } from './p-73baf5ba.js';
+import { d as defineCustomElement$2 } from './p-19d83dd6.js';
 
 const rtkDebuggerToggleCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{display:block}";
 const RtkDebuggerToggleStyle0 = rtkDebuggerToggleCss;
@@ -39,7 +39,7 @@ const RtkDebuggerToggle$1 = /*@__PURE__*/ proxyCustomElement(class RtkDebuggerTo
         });
     }
     render() {
-        return (h(Host, { key: 'cc9ec6cade76093abba3a48502d12a82868a875a', title: this.t('Troubleshooting') }, h("rtk-controlbar-button", { key: '6b8bcf2e363dfcdfb8e0f90c8602d95cdf338544', size: this.size, iconPack: this.iconPack, onClick: () => this.toggleDebugger(), icon: this.iconPack.debug, label: this.t('Troubleshooting'), variant: this.variant })));
+        return (h(Host, { key: 'd5634afbd056b647cc47d051d06818b7f22e111c', title: this.t('Troubleshooting') }, h("rtk-controlbar-button", { key: '158013c3c4ff7ec42d6b5b976f62f6595f0742a6', size: this.size, iconPack: this.iconPack, onClick: () => this.toggleDebugger(), icon: this.iconPack.debug, label: this.t('Troubleshooting'), variant: this.variant })));
     }
     static get style() { return RtkDebuggerToggleStyle0; }
 }, [1, "rtk-debugger-toggle", {

package/dist/components/rtk-debugger-video.js

@@ -1,4 +1,4 @@
-import { R as RtkDebuggerVideo$1, d as defineCustomElement$1 } from './p-9e87b2c9.js';
+import { R as RtkDebuggerVideo$1, d as defineCustomElement$1 } from './p-66ba4031.js';
 
 const RtkDebuggerVideo = RtkDebuggerVideo$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-debugger.js

@@ -1,4 +1,4 @@
-import { R as RtkDebugger$1, d as defineCustomElement$1 } from './p-bb8f2597.js';
+import { R as RtkDebugger$1, d as defineCustomElement$1 } from './p-b37f2227.js';
 
 const RtkDebugger = RtkDebugger$1;
 const defineCustomElement = defineCustomElement$1;