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

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

@@ -11,7 +11,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { Host, h } from "@stencil/core";
 import { defaultIconPack } from "../../lib/icons";
 import { useLanguage } from "../../lib/lang";
-import { usePaginatedChat } from "../../utils/flags";
 import { canViewChat } from "../../utils/sidebar";
 import { SyncWithStore } from "../../utils/sync-with-store";
 /**
@@ -36,17 +35,15 @@ export class RtkChatToggle {
         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 = () => {
@@ -54,7 +51,6 @@ export class RtkChatToggle {
             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,
@@ -78,27 +74,36 @@ export class RtkChatToggle {
         (_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 = this.pageSize - 1;
+        }
+        else {
+            this.unreadMessageCount = newMessages.length;
+        }
+    }
     handleChatActiveChange() {
         // Chat sidebar closed without opening a different sidebar
         if (!this.chatActive && !this.states.activeSidebar) {
@@ -110,10 +115,7 @@ export class RtkChatToggle {
             return null;
         if (!this.canViewChat)
             return h(Host, { "data-hidden": true });
-        return (h(Host, { title: this.t('chat') }, usePaginatedChat()
-            ? this.hasNewMessages && h("div", { class: "unread-count-dot", part: "unread-count-dot" })
-            : this.unreadMessageCount !== 0 &&
-                !this.chatActive && (h("div", { class: "unread-count", part: "unread-count" }, h("span", null, this.unreadMessageCount <= 100 ? this.unreadMessageCount : '99+'))), 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 is() { return "rtk-chat-toggle"; }
     static get encapsulation() { return "shadow"; }
@@ -280,8 +282,7 @@ export class RtkChatToggle {
         return {
             "unreadMessageCount": {},
             "chatActive": {},
-            "canViewChat": {},
-            "hasNewMessages": {}
+            "canViewChat": {}
         };
     }
     static get events() {

package/dist/collection/components/rtk-clock/rtk-clock.js

@@ -71,9 +71,9 @@ export class RtkClock {
     }
     render() {
         const showClock = this.startedTime !== undefined;
-        return (h(Host, { key: '39ec8f3aefb91d5314ea8d39b7ded49a1bced4f6', "data-hidden": !showClock, tabIndex: 0, role: "timer", "aria-live": "off" }, this.startedTime !== undefined && [
-            h("rtk-icon", { key: '76017ad292041e04dc2b420b4c3a9c1d14656706', icon: this.iconPack.clock, "aria-hidden": true, tabIndex: -1, part: "icon" }),
-            h("span", { key: '2cd75a435089d1bd534f49b50c0ceaa6e7335f8a', part: "text" }, this.getFormattedTime()),
+        return (h(Host, { key: 'a389e7c6a9fc8183f3228564bfa61f606ceaf979', "data-hidden": !showClock, tabIndex: 0, role: "timer", "aria-live": "off" }, this.startedTime !== undefined && [
+            h("rtk-icon", { key: '5fe283d25031c367f018d7a99ea46ed0c0d46a86', icon: this.iconPack.clock, "aria-hidden": true, tabIndex: -1, part: "icon" }),
+            h("span", { key: 'e5e134c951f7bbb3f161ae01d88d9c83ed85c798', part: "text" }, this.getFormattedTime()),
         ]));
     }
     static get is() { return "rtk-clock"; }

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

@@ -47,7 +47,7 @@ export class RtkConfirmationModal {
     render() {
         var _a, _b;
         const state = this.states.activeConfirmationModal;
-        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')))))));
+        return (h(Host, { key: '22ee38d06ab212134ac17a656da1251a3dc05372' }, h("div", { key: 'ed29620d69abd3202a823de32c06d7b2fb71f828', class: "leave-modal" }, h("div", { key: '07466875c79feb312e7df26cec679e62a4fc2991', class: "header" }, h("h2", { key: '4ebc7ab0dc5c2175cb234575435a30e4d1ce7a13', class: "title" }, state.header ? this.t(state.header) : this.t('cta.confirmation'))), state.content && h("p", { key: 'a9fcfa27f006dfb6ee1be60529b2c02611edc4cd', class: "message" }, this.t(state.content)), h("div", { key: '940cb8e8344bd99ba5d5266e284cc5161e666748', class: "content" }, h("div", { key: 'b8862b1db1f77121f9c2032e1f8213eeced5217d', class: "leave-meeting" }, h("rtk-button", { key: '0b4e17540009e0a465097e628904b36c54e17462', 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: '5f8c65ea6678c14855ece31827cb4aff714a0965', 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')))))));
     }
     static get is() { return "rtk-confirmation-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -40,7 +40,7 @@ export class RtkControlbar {
             iconPack: this.iconPack,
             size: this.size,
         };
-        return (h(Host, { key: '0376a3a5059538d4ae60fce32813e797fae18b2a' }, !this.disableRender && (h(Render, { key: 'b6990b5966e6b270c93181ddb1d156d55b02dbde', element: "rtk-controlbar", defaults: defaults, onlyChildren: true })), h("slot", { key: 'f5130e01e8efd65a0a52e035baac2836d5102731' })));
+        return (h(Host, { key: 'f42df94eb381604cc1e4e9716e7908cab55da6b2' }, !this.disableRender && (h(Render, { key: '2c961c3e2546e7610cd2e18ea8aeaf72dbdd1075', element: "rtk-controlbar", defaults: defaults, onlyChildren: true })), h("slot", { key: '9e2a7239b36ba2f4c40bf7c7d63441c833927a97' })));
     }
     static get is() { return "rtk-controlbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-counter/rtk-counter.js

@@ -40,7 +40,7 @@ export class RtkCounter {
         this.input = Math.max(this.minValue, parseInt(this.input) - 1).toString();
     }
     render() {
-        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) => {
+        return (h(Host, { key: 'd30fe362d84f5e387dfe67dc761683b91785bafb' }, h("rtk-button", { key: '5c60d8e4fed3f53236b1099f8360c341df36aa32', kind: "icon", variant: "ghost", onClick: () => this.decrement() }, h("rtk-icon", { key: 'b76e7889f6d94144aa1632159c52fb9580f931f7', icon: this.iconPack.subtract })), h("input", { key: 'cfd43551b1df8dca486b1dfc4f03d427c7e32caf', 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();
@@ -48,7 +48,7 @@ export class RtkCounter {
                 else {
                     this.input = val.toString();
                 }
-            } }), h("rtk-button", { key: 'f5114a456b5c922ebac67df8711d5758109dcce8', kind: "icon", variant: "ghost", onClick: () => this.increment() }, h("rtk-icon", { key: 'f21dbbb4c4a667fefb24fcb2dbdebdf81ce9522a', icon: this.iconPack.add }))));
+            } }), h("rtk-button", { key: '4cfe34a4483d12ddbd35b82a6f5d099424b24be3', kind: "icon", variant: "ghost", onClick: () => this.increment() }, h("rtk-icon", { key: 'a06553be5801039bfefb1a2c2542d01c7426a605', icon: this.iconPack.add }))));
     }
     static get is() { return "rtk-counter"; }
     static get encapsulation() { return "shadow"; }

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

@@ -29,7 +29,7 @@ export class RtkDebuggerToggle {
         });
     }
     render() {
-        return (h(Host, { key: '921018aa53c87d13bd51b20d8a98ac84f7b1c2ff', title: this.t('Troubleshooting') }, h("rtk-controlbar-button", { key: '043c5e9648bf9303488977554f9a1e70ca681995', size: this.size, iconPack: this.iconPack, onClick: () => this.toggleDebugger(), icon: this.iconPack.debug, label: this.t('Troubleshooting'), variant: this.variant })));
+        return (h(Host, { key: '38be7c2de47b57a51bb6feedc0f8ea05801eec58', title: this.t('Troubleshooting') }, h("rtk-controlbar-button", { key: '18d8b11e7a57d4930c2d300eaeb60b9a77c45c5c', size: this.size, iconPack: this.iconPack, onClick: () => this.toggleDebugger(), icon: this.iconPack.debug, label: this.t('Troubleshooting'), variant: this.variant })));
     }
     static get is() { return "rtk-debugger-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-draft-attachment-view/rtk-draft-attachment-view.js

@@ -53,7 +53,7 @@ export class RtkDraftAttachmentView {
         this.onAttachmentChange();
     }
     render() {
-        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)))))));
+        return (h(Host, { key: 'f6ede093bcdf8100807baab4de2a296fc4960a07' }, h("div", { key: 'b19bbe9b2ea58ea4adccc2028a1b24ea6bc9f0a9', class: "preview-overlay" }, h("div", { key: 'cbb2bfcb3a50e6e7fbfd4109eb340ba51d6a162d', class: "preview" }, h("rtk-tooltip", { key: '15b50c547470b0fa22014e0992a1c7e26b234573', label: this.t('chat.cancel_upload') }, h("rtk-button", { key: '940332a51747af3368ffec497d5ef76fa64ecf75', variant: "secondary", kind: "icon", onClick: this.onDeleteClickHandler }, h("rtk-icon", { key: 'cc04b0ac70753e970ff638f187ad5f702dc3656b', icon: this.iconPack.dismiss }))), this.attachment.type === 'image' ? (h("img", { class: "preview-image", src: this.filePreview })) : (h("div", { class: "preview-file" }, h("span", null, this.filePreview)))))));
     }
     static get is() { return "rtk-draft-attachment-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-emoji-picker/rtk-emoji-picker.js

@@ -57,7 +57,7 @@ export class RtkEmojiPicker {
         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: '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())));
+        return (h(Host, { key: '6581d26d75a7b869d0ba00243ec74ee06b927e7d' }, h("div", { key: '3705d8c557ac3e05769171998e9176e7e40a232c', class: 'close-parent' }, h("rtk-button", { key: 'b437e579cb828a709de255ddfa6b751e4bdfbe51', variant: "ghost", kind: "icon", class: "close", onClick: () => { var _a; return (_a = this.pickerClose) === null || _a === void 0 ? void 0 : _a.emit(); }, "aria-label": this.t('close') }, h("rtk-icon", { key: '7fac79a21c6be57156d17ceeff9ceb2834bbf709', icon: this.iconPack.dismiss }))), h("div", { key: '46cb2af6654ef36b7258baf47e3cd9e5bd60bf89', class: 'emoji-parent' }, h("input", { key: 'cfde33638d531f9bac1b1bf25d966a369f4dfb38', value: this.filterVal, onInput: (event) => this.handleInputChange(event.target), placeholder: this.t('search'), ref: (el) => (this.inputElement = el) }), this.mapEmojiList())));
     }
     static get is() { return "rtk-emoji-picker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-emoji-picker-button/rtk-emoji-picker-button.js

@@ -19,7 +19,7 @@ export class RtkEmojiPickerButton {
         this.t = useLanguage();
     }
     render() {
-        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 }))));
+        return (h("rtk-tooltip", { key: '45ef1f18da6d1ecc3c02882590cd22e930461562', label: this.t('chat.send_emoji') }, h("rtk-button", { key: '6504abab2f1c6537443699c53a8cbdcf13530cba', variant: "ghost", kind: "icon", class: { active: this.isActive }, title: this.t('chat.send_emoji') }, h("rtk-icon", { key: 'd730c81abce72d9c3226f1f666941e1136bee77f', icon: this.iconPack.emoji_multiple }))));
     }
     static get is() { return "rtk-emoji-picker-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-file-dropzone/rtk-file-dropzone.js

@@ -37,7 +37,7 @@ export class RtkFileDropzone {
         });
     }
     render() {
-        return (h(Host, { key: '9525e4e25630d45a8945e0cd169ac7830eb131b2' }, h("div", { key: '1be56002e1adecfaf2f9b6216e2551929bcac4e2', id: "dropzone", class: { active: this.dropzoneActivated }, part: "dropzone" }, h("rtk-icon", { key: 'e7d366446b6714ad64d2b95da7f08f67a1429333', icon: this.iconPack.attach }), h("p", { key: 'ab3b2e3a048ee8bd812ece1ad5a9afcc03d00c67' }, this.t('chat.send_attachment')))));
+        return (h(Host, { key: '6a205001d1e1e1f7c54855005cab34b81e95c9b9' }, h("div", { key: 'b87bcc6c90819127b2783665e541b69ce49f1032', id: "dropzone", class: { active: this.dropzoneActivated }, part: "dropzone" }, h("rtk-icon", { key: '1f603086a79a170a4fc3f3df53df9cfdfbae73fe', icon: this.iconPack.attach }), h("p", { key: '0b4914a3fb881006b1af20533750e6b273a82a48' }, this.t('chat.send_attachment')))));
     }
     static get is() { return "rtk-file-dropzone"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-file-message/rtk-file-message.js

@@ -34,10 +34,10 @@ export class RtkFileMessage {
     }
     render() {
         const link = sanitizeLink(this.message.link);
-        return (h(Host, { key: 'ec44f9204c991e853665069d0181b538da15893b' }, !this.isContinued && (h(ChatHead, { key: '2ef070076e554bf6c9ebf5762f61174a54079752', name: this.message.displayName, time: this.message.time, now: this.now })), h("div", { key: '5604b1d4d32e821b85a7535b9af2695815cb82e7', class: {
+        return (h(Host, { key: '7e77bf95a78614fce8aac5a517e96b766d05684c' }, !this.isContinued && (h(ChatHead, { key: '2369a52afdf95e5d3850ae2e55ccf62212841797', name: this.message.displayName, time: this.message.time, now: this.now })), h("div", { key: '21b0fc1a24e50d2487292c812b6d37189f219fdb', class: {
                 body: true,
                 bubble: this.showBubble,
-            }, part: "body" }, h("div", { key: '6be5586c964424d8da850f6ead3315e14c439839', class: "file" }, h("div", { key: '28efbbf493a6050d1823b08714307a09b5c5b3f0', class: "file-data" }, h("div", { key: '6e6f42e9551480e6b483db9f7ddaff7e418436e0', class: "name" }, this.message.name), h("div", { key: 'c74d0f1ddf7db3fb9152584ff5c138c3ff5da2ac', class: "file-data-split" }, h("div", { key: '8ed34a2d09a4b849a0d173e22ca9e59ca67a6ff4', class: "ext" }, getExtension(this.message.name)), h("span", { key: 'c7a817891160161ee999aabe284e83cc864cb41a', class: "divider" }), h("div", { key: '6714d486a6d5564581330d76c95d06f3475e3c56', class: "size" }, getFileSize(this.message.size)))), h("rtk-button", { key: 'cc0ca70894c077a4252b6a49aefc544a0b228437', variant: "secondary", kind: "icon", onClick: () => downloadFile(link, { name: this.message.name, fallbackName: 'file' }), part: "button" }, h("rtk-icon", { key: 'a2837e81ab7452589857f1f71d8e7f1d38b5235d', icon: this.iconPack.download }))))));
+            }, part: "body" }, h("div", { key: '8dca01f88c22a64a3b70b26ebaabdcd46afa73a7', class: "file" }, h("div", { key: 'a6bf3e516ce45acc1671df528f998ef057926539', class: "file-data" }, h("div", { key: '8680af670beb6d1fc08e0d47508667b357ff466f', class: "name" }, this.message.name), h("div", { key: '4fcd3cf05e9e14d798e04150337c93577b47104c', class: "file-data-split" }, h("div", { key: '618e81eb6011f9ebde2782f4c039fd787cba666c', class: "ext" }, getExtension(this.message.name)), h("span", { key: 'ac5faddf53f94aab3d1f8f05d8523960de8a300f', class: "divider" }), h("div", { key: 'd28b3acf0f19d99c399f008d0d41c1a8977a821f', class: "size" }, getFileSize(this.message.size)))), h("rtk-button", { key: '4f562573b8b0765a5a94c064ebb9c60e26eb9c1a', variant: "secondary", kind: "icon", onClick: () => downloadFile(link, { name: this.message.name, fallbackName: 'file' }), part: "button" }, h("rtk-icon", { key: '062a9cb80ab29f81fac9b6d76caaa5f5846d3837', icon: this.iconPack.download }))))));
     }
     static get is() { return "rtk-file-message"; }
     static get properties() {

package/dist/collection/components/rtk-file-message-view/rtk-file-message-view.js

@@ -22,7 +22,7 @@ export class RtkFileMessageView {
         this.iconPack = defaultIconPack;
     }
     render() {
-        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))))));
+        return (h("div", { key: '5cc29b4780f581a2f8b045e5051bcc66f3fdaf55', class: "file" }, h("rtk-button", { key: '4100b47bc1d72f08ec5fe645291bfbb58e3a6486', variant: "secondary", kind: "icon", onClick: () => downloadFile(sanitizeLink(this.url), { name: this.name, fallbackName: 'file' }), part: "button" }, h("rtk-icon", { key: '52ae14abb7c27b89861d5ba4c907d606257628c9', icon: this.iconPack.download })), h("div", { key: '02c9ad8d173172a85cc474273a966607d456360e', class: "file-data" }, h("div", { key: '6ceca21685d04f175006ba35a6de194cc98879ad', class: "name" }, this.name), h("div", { key: 'b07d07bcaedee3fd6fbcfe81ce2f6bf757655b5f', class: "file-data-split" }, h("div", { key: '280635ef486de02bc68ca3e774be14fa5a461d1c', class: "ext" }, getExtension(this.name)), h("span", { key: '84f72d8b37b7d15c257faed036b76c737eec780b', class: "divider" }), h("div", { key: '1b88f48f51afe3fceb57920c3d17f586e848a25f', class: "size" }, getFileSize(this.size))))));
     }
     static get is() { return "rtk-file-message-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-file-picker-button/rtk-file-picker-button.js

@@ -44,7 +44,7 @@ export class RtkFilePickerButton {
     render() {
         const label = this.label || this.t('chat.send_file');
         const icon = this.iconPack[this.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 }))));
+        return (h("rtk-tooltip", { key: '057a0a5a714dbbde228e3481e53adea4f88fb3ad', label: label }, h("rtk-button", { key: '04193df1053b14687fb9464a122b9158707bdda1', variant: "ghost", kind: "icon", onClick: () => this.uploadFile(), title: label }, h("rtk-icon", { key: 'ed2fce30b93dfce9dd6b967d5993c93496cf3388', icon: icon }))));
     }
     static get is() { return "rtk-file-picker-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-header/rtk-header.js

@@ -40,7 +40,7 @@ export class RtkHeader {
             iconPack: this.iconPack,
             size: this.size,
         };
-        return (h(Host, { key: 'b027d881ec9b4b6e27750e13e9aa0ac50ce9748c' }, !this.disableRender && h(Render, { key: '7bb2e5d3b9d9b2aeb9550c5675743c5ddfeee99c', element: "rtk-header", defaults: defaults, onlyChildren: true }), h("slot", { key: '66bbb8bdcbb511f3e97a17f6b3703725ed708fe4' })));
+        return (h(Host, { key: 'cc998eacd57a6ab5492229b6eb900caf9aa6cfaa' }, !this.disableRender && h(Render, { key: 'c8bfb68227fcea6955c7e4d07cfe3d1eb9d7906d', element: "rtk-header", defaults: defaults, onlyChildren: true }), h("slot", { key: '50848506efeeccf7a6bd4539d65374eb64279d17' })));
     }
     static get is() { return "rtk-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-idle-screen/rtk-idle-screen.js

@@ -27,7 +27,7 @@ export class RtkIdleScreen {
         this.t = useLanguage();
     }
     render() {
-        return (h(Host, { key: '0d5f3eea616808cb6d59173bc875ed1e19a571eb' }, h("slot", { key: '9d647571d81e227c3deba0b131e05763f0e17bd4' }, h("div", { key: '856f24853a9d5d1a941be50ff2567083cccc2d0b', class: "ctr", part: "container" }, h("rtk-logo", { key: '0bceeddd22d96bd07f015041e5b79d5de19dac59', meeting: this.meeting, config: this.config, t: this.t, part: "logo" }), h("rtk-spinner", { key: '62841691c9f2669e3e11a4e995848a3f1df4180a', "aria-label": "Idle, waiting for meeting data", part: "spinner", iconPack: this.iconPack })))));
+        return (h(Host, { key: '9542c3ce51e79f077f59e3c260884b117ee8d327' }, h("slot", { key: 'b0d7e6f916ef6bc00eb77c89a6ee6c4f55fe81c5' }, h("div", { key: '028702fec102195179abb5ad93803478cda2cd4d', class: "ctr", part: "container" }, h("rtk-logo", { key: '5fa9163f969de1ee7f9f02b585138e16d583bf2b', meeting: this.meeting, config: this.config, t: this.t, part: "logo" }), h("rtk-spinner", { key: 'cbf0b91e0455cb2be65059766d6eb713674f2dcb', "aria-label": "Idle, waiting for meeting data", part: "spinner", iconPack: this.iconPack })))));
     }
     static get is() { return "rtk-idle-screen"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-image-message/rtk-image-message.js

@@ -34,10 +34,10 @@ export class RtkImageMessage {
         this.status = 'loading';
     }
     render() {
-        return (h(Host, { key: '91690b290bd0fb2af8a55bea018b8b9353d60396' }, !this.isContinued && (h(ChatHead, { key: 'ef3341005308c597a2f60ec4930f2f38cf81e20a', name: this.message.displayName, time: this.message.time, now: this.now })), h("div", { key: '96d5ad95a36ada5c67ffa93e718e89dbe2a97fbb', class: {
+        return (h(Host, { key: '4d83696c62cb30b3c50201c054aed059f9d087fb' }, !this.isContinued && (h(ChatHead, { key: 'b1f8ca2684e487f9f51106562af2fb7bb7d0ae5e', name: this.message.displayName, time: this.message.time, now: this.now })), h("div", { key: '0ffd97ca74224fb7e464b5bbde3d79c8b11c6105', class: {
                 body: true,
                 bubble: this.showBubble,
-            }, part: "body" }, h("div", { key: 'ba3f2db210f343814896a2397386fbbfc7babd10', class: { image: true, loaded: this.status === 'loaded' } }, h("img", { key: '3ad9f01111c8c012513dd3a300b290b439d4a96c', src: sanitizeLink(this.message.link), onLoad: () => {
+            }, part: "body" }, h("div", { key: 'de64e6fff4b952e08eea1895f6b02ce6de7ea528', class: { image: true, loaded: this.status === 'loaded' } }, h("img", { key: 'fae1d0126e403da11c8d4aeb036ad29484af2bf6', src: sanitizeLink(this.message.link), onLoad: () => {
                 this.status = 'loaded';
             }, onError: () => {
                 this.status = 'errored';
@@ -45,9 +45,9 @@ export class RtkImageMessage {
                 if (this.status === 'loaded') {
                     this.stateUpdate.emit({ image: this.message });
                 }
-            } }), this.status === 'loading' && (h("div", { key: '35140b999e092b083cabfa53c21a468092257b05', class: "image-spinner", title: this.t('chat.img.loading'), "aria-label": this.t('chat.img.loading') }, h("rtk-spinner", { key: '863b39fd51599ace190b75ee00af7406bbbd6d27', iconPack: this.iconPack }))), this.status === 'errored' && (h("div", { key: '647d8f244b63ceb208b3d75bef6f5e4c7777243b', class: "image-errored", title: this.t('chat.error.img_not_found'), "aria-label": this.t('chat.error.img_not_found') }, h("rtk-icon", { key: 'bd40ec4564ae22d65badbec458a3b1b232e46e35', icon: this.iconPack.image_off }))), this.status === 'loaded' && (h("div", { key: 'bb6ff686812867825aca0fbd451e122fee19b6a0', class: "actions" }, h("rtk-button", { key: '5d9fad092c3f5d4049140dc12b73ca9f53ff1088', class: "action", variant: "secondary", kind: "icon", onClick: () => {
+            } }), this.status === 'loading' && (h("div", { key: 'b5e4c17c94f065f06a513d8601564ca6512d38a9', class: "image-spinner", title: this.t('chat.img.loading'), "aria-label": this.t('chat.img.loading') }, h("rtk-spinner", { key: '4819886ed836fc94d35b48fd2f185bed2f142db6', iconPack: this.iconPack }))), this.status === 'errored' && (h("div", { key: '7d2381426f1867524b59963d025ed6728d0bee34', class: "image-errored", title: this.t('chat.error.img_not_found'), "aria-label": this.t('chat.error.img_not_found') }, h("rtk-icon", { key: 'abe064f6b5ecf9740611362c8c836a1fcf886223', icon: this.iconPack.image_off }))), this.status === 'loaded' && (h("div", { key: '863b9db15ee68f5bd5939b70f7b24f215b250a19', class: "actions" }, h("rtk-button", { key: '6b9d6e415a485fbbe8844a38a3b2d2401aa7ad22', class: "action", variant: "secondary", kind: "icon", onClick: () => {
                 this.stateUpdate.emit({ image: this.message });
-            } }, h("rtk-icon", { key: 'c77c89797b993d2486e53d15eb8f8bf721bc2c97', icon: this.iconPack.full_screen_maximize })), h("rtk-button", { key: '45974cb9f8b88a71d340c0d260b6e5daf64eec12', class: "action", variant: "secondary", kind: "icon", onClick: () => downloadFile(this.message.link, { fallbackName: 'image' }) }, h("rtk-icon", { key: '3c50dba681609dae024479493b1bcc8ee25a5ef1', icon: this.iconPack.download }))))))));
+            } }, h("rtk-icon", { key: 'a40d297b50b7667b08b9a5d08223b7326c3314be', icon: this.iconPack.full_screen_maximize })), h("rtk-button", { key: 'cb344d52dbcc0c6a55da8017b5664b8a160dd339', class: "action", variant: "secondary", kind: "icon", onClick: () => downloadFile(this.message.link, { fallbackName: 'image' }) }, h("rtk-icon", { key: 'e4a5cee14a5fae2496930dbbdaa3199a6b2d9b6b', icon: this.iconPack.download }))))))));
     }
     static get is() { return "rtk-image-message"; }
     static get originalStyleUrls() {

package/dist/collection/components/rtk-image-message-view/rtk-image-message-view.js

@@ -25,7 +25,7 @@ export class RtkImageMessageView {
         this.status = 'loading';
     }
     render() {
-        return (h("div", { key: '99e8a76eea11e740c21642445fb803b3027f95ff', class: { image: true, loaded: this.status === 'loaded' } }, h("img", { key: '98c0477fab6ae6f86657579d4d4e44dab3af0bf5', src: sanitizeLink(this.url), onLoad: () => {
+        return (h("div", { key: '066606e6ae62634b2466bb46b453e0c2d91b17ea', class: { image: true, loaded: this.status === 'loaded' } }, h("img", { key: 'f042e5d3c1a6341e9fc0845e6643016f1be5b5f7', src: sanitizeLink(this.url), onLoad: () => {
                 this.status = 'loaded';
             }, onError: () => {
                 this.status = 'errored';
@@ -33,9 +33,9 @@ export class RtkImageMessageView {
                 if (this.status === 'loaded') {
                     this.onPreview.emit(this.url);
                 }
-            } }), 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.status === 'loading' && (h("div", { key: 'd4a5030468fbf70afae62bd55ae4d0fa989e15c2', class: "image-spinner", title: this.t('chat.img.loading'), "aria-label": this.t('chat.img.loading') }, h("rtk-spinner", { key: '216aba361a46cc100e7d26cc2daf1ffb0948d695', iconPack: this.iconPack }))), this.status === 'errored' && (h("div", { key: '01f5da8f70872c9fa22dc9a9b70b046b0001d05b', class: "image-errored", title: this.t('chat.error.img_not_found'), "aria-label": this.t('chat.error.img_not_found') }, h("rtk-icon", { key: '0f7e6fed2730f6366d07fc6afddb2b247e9b7d3a', icon: this.iconPack.image_off }))), this.status === 'loaded' && (h("div", { key: '5ac0e61c65a88a8d6b9ee54c900b856854d1b84b', class: "actions" }, h("rtk-button", { key: 'fd83dfecd7b5d9c3976374c3c55731b1f026fc0a', class: "action", variant: "secondary", kind: "icon", onClick: () => {
                 this.onPreview.emit(this.url);
-            } }, h("rtk-icon", { key: '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 }))))));
+            } }, h("rtk-icon", { key: '3ca7384fa28e6716345acacf9225ae9471ff8d63', icon: this.iconPack.full_screen_maximize })), h("rtk-button", { key: '198787808c389e4df48d3609a53c2d27cf2e7fb3', class: "action", variant: "secondary", kind: "icon", onClick: () => downloadFile(this.url, { fallbackName: 'image' }) }, h("rtk-icon", { key: 'f38fe3da48d1fc854001c719164c95f0673808c5', icon: this.iconPack.download }))))));
     }
     static get is() { return "rtk-image-message-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-image-viewer/rtk-image-viewer.js

@@ -39,7 +39,7 @@ export class RtkImageViewer {
         document.removeEventListener('click', this.handleOutsideClick);
     }
     render() {
-        return (h(Host, { key: '8d935bb0caf8d693e1a689ca43aae99862170ac9', class: "scrollbar", onClick: (e) => e.stopPropagation() }, h("div", { key: '99e92847c61ae836819158df5e755a15ffc857c0', class: "header" }, h("div", { key: '00fa44b137b19e90480ab67a915d795e69d0e8d2', class: "shared-by-user" }, this.t('chat.img.shared_by'), ' ', h("span", { key: 'c8cdd90cdb236581421d39f397dcb532c0052f88', class: "displayName" }, formatName(shorten(this.image.displayName)))), h("div", { key: '5c4c76c34a58598056c737cab95966014713fda1', class: "actions" }, h("rtk-button", { key: '78e4b05fc056a4924e7d795ce751d26213b7b31c', onClick: () => downloadFile(this.image.link, { fallbackName: 'image' }) }, h("rtk-icon", { key: '97f528e26b23f749597e783b15ae2b28cdb57432', icon: this.iconPack.download, slot: "start" }), "Download"), h("rtk-button", { key: '1c8db312bcdbb7b58886bd042866dce4a742b2b6', kind: "icon", variant: "secondary", onClick: () => this.close.emit() }, h("rtk-icon", { key: '91a7127dce1d432cd6ab8bbba45d37054459b6d5', icon: this.iconPack.dismiss })))), h("div", { key: 'c5389b11ee44af064e9d12c443b2986a349d02de', class: "image-ctr" }, h("img", { key: 'a6b8cfadc2f11395695358f97a285986e5dab799', src: this.image.link }))));
+        return (h(Host, { key: 'd3d145c8bd304fbe0e9420e7746ea15872772f3b', class: "scrollbar", onClick: (e) => e.stopPropagation() }, h("div", { key: '3f9ceed6d177439c39438dbb6ac60d08d630bf0e', class: "header" }, h("div", { key: '3944264dcf9903e55b544bda02dfa8d6643ba3ff', class: "shared-by-user" }, this.t('chat.img.shared_by'), ' ', h("span", { key: '540b69c4f1abdd437a003fa4ba9c9ddf8aa71dd8', class: "displayName" }, formatName(shorten(this.image.displayName)))), h("div", { key: 'ed632e11bcdf8fa46a2c1bd0f6b02884ee635b5a', class: "actions" }, h("rtk-button", { key: '677ef4df0f7235a27c925b1e742a61222c90049f', onClick: () => downloadFile(this.image.link, { fallbackName: 'image' }) }, h("rtk-icon", { key: '2479f3a5e2f9eff5359d377625d06337b2023e8c', icon: this.iconPack.download, slot: "start" }), "Download"), h("rtk-button", { key: '6ff009deb6e385481254e9fa6a7ae30f1676cff0', kind: "icon", variant: "secondary", onClick: () => this.close.emit() }, h("rtk-icon", { key: '6ad51918f8e76980f61c02c10b9a2cccfe5a2a7f', icon: this.iconPack.dismiss })))), h("div", { key: '5fd522972d26d9b4815ffe37d2d418b784e751ae', class: "image-ctr" }, h("img", { key: 'a45df563ecdf79e020e3269f6fd055aee27cfab0', src: this.image.link }))));
     }
     static get is() { return "rtk-image-viewer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-information-tooltip/rtk-information-tooltip.js

@@ -17,7 +17,7 @@ export class RtkInformationTooltip {
         this.iconPack = defaultIconPack;
     }
     render() {
-        return (h(Host, { key: 'a94703e845d2ed6757b794e5582a27790d9ffc22' }, h("div", { key: '9dba2927f2763b84127237d269bbb21bda299018', class: "tooltip-container" }, h("rtk-icon", { key: 'dda3376f2f3e0bcc61a978f6ed4d9a746243480c', icon: this.iconPack.info, size: "sm" }), h("div", { key: '87df9ff5be316f60f1b9b6445ee19f48aed6918c', class: "tooltip" }, h("slot", { key: '25cacd1c76d12aef06b7c757d6cc1580f214d938', name: "tootlip-text" })))));
+        return (h(Host, { key: 'e6592aeb2d479a084f6100d1a32f6df61c2e979c' }, h("div", { key: '9406039d36b98781c2eb8dbbe37fab9a3390c90b', class: "tooltip-container" }, h("rtk-icon", { key: '97fd3324d790e8dc81d81bb272cacd95a2a95997', icon: this.iconPack.info, size: "sm" }), h("div", { key: 'e3b5b3a8e69cea34a1aa86b1a6eff2008028b673', class: "tooltip" }, h("slot", { key: '88608c68efc3287baf74d717a5e3ca418ef0dc9b', name: "tootlip-text" })))));
     }
     static get is() { return "rtk-information-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-leave-button/rtk-leave-button.js

@@ -29,7 +29,7 @@ export class RtkLeaveButton {
     }
     render() {
         const text = this.t('leave');
-        return (h(Host, { key: '5b0ccd7eca4a3330a6bbfd377fa5cbdc050ac346', label: text }, h("rtk-controlbar-button", { key: '8dcb835fb29edad956d715c2cbe882686ccce40d', size: this.size, iconPack: this.iconPack, class: "leave red-icon", onClick: this.leave, icon: this.iconPack.call_end, label: text, variant: this.variant, part: "controlbar-button" })));
+        return (h(Host, { key: 'fc176585ba4617c2b64d05d9b2e1ee66084666aa', label: text }, h("rtk-controlbar-button", { key: 'feb4ee03ff7d16bf6ab858a3207a628121fd477b', size: this.size, iconPack: this.iconPack, class: "leave red-icon", onClick: this.leave, icon: this.iconPack.call_end, label: text, variant: this.variant, part: "controlbar-button" })));
     }
     static get is() { return "rtk-leave-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-leave-meeting/rtk-leave-meeting.js

@@ -75,9 +75,9 @@ export class RtkLeaveMeeting {
         }
     }
     render() {
-        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
+        return (h(Host, { key: '55991a2b1b60bb963ee7dfb10fbea5d5bc63c186' }, h("div", { key: 'bc50b5a89ff7ee5348aadbba4fe8f709fa35bee9', class: "leave-modal" }, h("div", { key: '7a19d21b272222e7cf83bbb6dbd8bb4284ea9d29', class: "header" }, h("h2", { key: '935e06a35f3669457c63761697a9152972d69c54', class: "title" }, this.t('leave'))), h("p", { key: 'cd1ba755b4f73c0d3fb4c9078ee11afc31cee726', class: "message" }, this.isBreakoutRoomsActive && this.isChildMeeting
             ? this.t('breakout_rooms.leave_confirmation')
-            : 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')))))));
+            : this.t('leave_confirmation')), h("div", { key: 'd4031f068f492f76d5feb9dd39587263e9b545f0', class: "content" }, h("rtk-button", { key: 'a014dc329e5f861de85468e04715d8aeb87f4e8c', variant: "secondary", onClick: this.close, class: "secondary-btn" }, this.t('cancel')), this.isBreakoutRoomsActive && this.isChildMeeting && this.canJoinMainRoom && (h("rtk-button", { key: '501a689793bb5e1ff2a8d03f5b9d0ab3d6baafbf', variant: "secondary", onClick: this.handleJoinMainRoom, class: "secondary-btn" }, this.t('breakout_rooms.leave_confirmation.main_room_btn'))), h("rtk-button", { key: '35a6941049928fa81f1e0a73b64f4ce937c86451', variant: "danger", title: this.t('leave'), onClick: this.handleLeave }, this.t('leave')), this.canEndMeeting && (h("rtk-button", { key: '7c6367e3f9322235e126c01cc16014f5b2c81ecc', variant: "danger", class: "secondary-btn secondary-danger-btn", onClick: this.handleEndMeeting }, this.t('end.all')))))));
     }
     static get is() { return "rtk-leave-meeting"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-markdown-view/rtk-markdown-view.js

@@ -76,7 +76,7 @@ export class RtkMarkdownView {
         const slicedMessage = this.text.slice(0, this.maxLength);
         const withReply = extractReplyBlock(slicedMessage, true);
         const withoutReply = stripOutReplyBlock(slicedMessage);
-        return (h("p", { key: 'beef042bc590e1cb543ddfa4a45b699ab78db63c' }, withReply.length !== 0 && h("blockquote", { key: '5fd5c57b235c15cdd009474d70e2a6074dd0ec0a' }, this.renderMessage(withReply)), withoutReply.length !== 0 && this.renderMessage(withoutReply)));
+        return (h("p", { key: '787e6d3177f4faf1c8dcd7c73d83a6de9c57b42b' }, withReply.length !== 0 && h("blockquote", { key: '1c4b82fb870994e6707d35adcd5e6f2f0e65dd26' }, this.renderMessage(withReply)), withoutReply.length !== 0 && this.renderMessage(withoutReply)));
     }
     static get is() { return "rtk-markdown-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-menu/rtk-menu.js

@@ -59,7 +59,7 @@ export class RtkMenu {
         });
     }
     render() {
-        return (h(Host, { key: '5d80123d52e211d4f120441d9f79582b4dc53247' }, h("span", { key: '996b1faea4afd983ea69c2bb197b1b6c56c0eca6', id: "trigger", ref: (el) => (this.triggerEl = el), onClick: () => {
+        return (h(Host, { key: '15461c803838be1651df6116a61598ce8ab988f9' }, h("span", { key: 'f36cdd2f1141f46a993daa880682382904a72509', id: "trigger", ref: (el) => (this.triggerEl = el), onClick: () => {
                 this.clickedThis = true;
                 if (this.menuListEl.style.display !== 'block') {
                     this.menuListEl.style.display = 'block';
@@ -68,7 +68,7 @@ export class RtkMenu {
                 else {
                     this.menuListEl.style.display = 'none';
                 }
-            } }, 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' }))));
+            } }, h("slot", { key: 'af622c9dbb3394cb46a6bb909a45c5e3248b1a09', name: "trigger" })), h("span", { key: '445258e31b4b775fbc22b268234fe15a33f809c9', part: "menu-list", id: "menu-list", ref: (el) => (this.menuListEl = el) }, h("slot", { key: '87396622c6078253736cbe43a1cac55c6f90754f' }))));
     }
     static get is() { return "rtk-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-menu-item/rtk-menu-item.js

@@ -29,7 +29,7 @@ export class RtkMenuItem {
         this.t = useLanguage();
     }
     render() {
-        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" })));
+        return (h(Host, { key: '8679dae05e846bb8b83a1dbc9580aa2dcad18ccd', class: { [this.menuVariant]: true } }, h("slot", { key: 'da53376b8188bfc47f904d348212fedff932b03a', name: "start" }), h("slot", { key: '4394a3afa13bd298880c1be5255f5a004c5ed42e' }), h("slot", { key: '2be62c70172912e6516ce207b571ea4794aa4f6c', name: "end" })));
     }
     static get is() { return "rtk-menu-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-menu-list/rtk-menu-list.js

@@ -27,7 +27,7 @@ export class RtkMenuList {
         this.t = useLanguage();
     }
     render() {
-        return (h(Host, { key: '758a8f0419b51b59f46391e28265bf6201f537d3', class: { [this.menuVariant]: true } }, h("slot", { key: '9bc391de012f416c8c29c33fcc26a146f33afe82' })));
+        return (h(Host, { key: 'b743da0bae39c93cff7896968a64c84166b8a751', class: { [this.menuVariant]: true } }, h("slot", { key: '46ca973e68fccbf5c8c7544f61bb9745840d0054' })));
     }
     static get is() { return "rtk-menu-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-message-list-view/rtk-message-list-view.js

@@ -260,11 +260,11 @@ export class RtkMessageListView {
         this.updateTotalHeight();
     }
     render() {
-        return (h("div", { key: '592cc96edd18a6c3f9bb18650d4a3c0969302ba9', class: "scrollbar content-wrapper", ref: (el) => (this.$listRef = el), onScroll: this.handleScroll }, h("div", { key: 'c720432351e2a051502deaeedb10e4d911776d86', class: "scroller" }, h("div", { key: '7a7aafb1dc0589059bd467258cf46640f1dc2966', style: {
+        return (h("div", { key: '17ccb3852a89ddb77e5799413f8ee0ef0ac7c132', class: "scrollbar content-wrapper", ref: (el) => (this.$listRef = el), onScroll: this.handleScroll }, h("div", { key: '044af22a10ae312a46d90f29dc9a793d86540fb8', class: "scroller" }, h("div", { key: '15a2b213883f210a44081c05c317f9da7a58380c', style: {
                 height: `${this.totalHeight}px`,
-            } }), h("div", { key: 'ee9e8a1819a66d73e67860615f580511ee34b31c', class: "smallest-dom-element", id: "list-end", ref: (el) => (this.$listEndRef = el) })), h("div", { key: 'e055b8db2ae6796797074e26f4ca4ef564006ece', class: "content", style: {
+            } }), h("div", { key: '918071c6d3aed045814c1c2b3908572edae480ac', class: "smallest-dom-element", id: "list-end", ref: (el) => (this.$listEndRef = el) })), h("div", { key: '19b2f45794fa73f44d54b9b91ef1cab0df6c4aae', class: "content", style: {
                 transform: `translateY(${this.getRangeSize(0, this.range.start)}px)`,
-            } }, this.isFetching && (h("div", { key: 'fea9260948b5127ccd0e510ae55a01f4adbfcbbc', class: "loader" }, h("rtk-spinner", { key: '7af2be1f15773fdf4b467d7ceee8902c61cb8ca7', size: "md" }))), this.getVisibleItems().map((msg, index) => (h("div", { key: msg.id, ref: (el) => this.rendererInternal(el, msg, index) }))))));
+            } }, this.isFetching && (h("div", { key: '1a05d8ec0a4a11812afef413226c472d797e7ebe', class: "loader" }, h("rtk-spinner", { key: '29f275642f8f8be5d9cbe12ff0eeedba48e1b4c1', size: "md" }))), this.getVisibleItems().map((msg, index) => (h("div", { key: msg.id, ref: (el) => this.rendererInternal(el, msg, index) }))))));
     }
     static get is() { return "rtk-message-list-view"; }
     static get originalStyleUrls() {

package/dist/collection/components/rtk-more-toggle/rtk-more-toggle.js

@@ -53,10 +53,10 @@ export class RtkMoreToggle {
     }
     render() {
         const text = this.t('more');
-        return (h(Host, { key: '73044df7026e090e30d8f9b2f40b3c4adf5424ae', title: text }, this.states.activeMoreMenu && (h("div", { key: '0abe46d0b772ff7bef2ecbf5fa2ce372bf81fe1d', class: "more-menu" }, h("slot", { key: '8eba4b6a5fee4812ad2dcd81ba0511cddb090100', name: "more-elements" }))), h("rtk-controlbar-button", { key: 'e043fc7b60f24fbe761c442edfb38d245f84b419', size: this.size, iconPack: this.iconPack, onClick: (e) => {
+        return (h(Host, { key: 'ae92dc374ab721ea86cfe8d0f658be4f4c624d51', title: text }, this.states.activeMoreMenu && (h("div", { key: '061d68748259df66e729ff830c9d72909b8185a6', class: "more-menu" }, h("slot", { key: '6a89ae4f51c32c560c83bb5fa10f694797f4d20c', name: "more-elements" }))), h("rtk-controlbar-button", { key: '775fcd968101f57f070159f6992ad55527fd424a', size: this.size, iconPack: this.iconPack, onClick: (e) => {
                 e.stopPropagation();
                 this.toggleMoreMenu();
-            }, icon: this.iconPack.horizontal_dots, label: text, part: "controlbar-button" }), h("slot", { key: '739c90ae5b23b98dab457c3dfce24d5a19a24c67', name: "expanded" })));
+            }, icon: this.iconPack.horizontal_dots, label: text, part: "controlbar-button" }), h("slot", { key: '4b2006186051bf7c0e80dc4d9536d610d25ae7ba', name: "expanded" })));
     }
     static get is() { return "rtk-more-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-mute-all-confirmation/rtk-mute-all-confirmation.js

@@ -29,7 +29,7 @@ export class RtkMuteAllConfirmation {
         };
     }
     render() {
-        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')))))));
+        return (h(Host, { key: 'd7439c9c3ffd1a79974ed8f8a0081aa807a2b103' }, h("div", { key: 'f11f6d201c843384f3e173cf611ea6b26fcfe620', class: "leave-modal" }, h("div", { key: '8475acebc7a3abd14a4d0716b6dbdeabb0f1896e', class: "header" }, h("h2", { key: 'fe5cfaa40eccca120a696555456acd59610bd5f0', class: "title" }, this.t('mute_all.header'))), h("p", { key: '88b6d8faf23e5780d632f9bac0077751bb9db554', class: "message" }, this.t('mute_all.description')), h("div", { key: 'b901ffb7714dbcf5bbda907df1f44214672ded17', class: "content" }, h("div", { key: 'f554e5829ff3250400307f139661a0fe426ee22c', class: "leave-meeting" }, h("rtk-button", { key: 'c300ddc6c3ae02266d4769a964eb3fb246aa7dbd', variant: "secondary", title: this.t('close'), onClick: this.onClose }, this.t('cancel')), h("rtk-button", { key: '897d7d2639a6c51c5fb0ae1b51a111fbba5431c9', variant: "danger", title: this.t('mute_all'), onClick: this.onMuteAll }, this.t('mute_all')))))));
     }
     static get is() { return "rtk-mute-all-confirmation"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-notification/rtk-notification.js

@@ -47,9 +47,9 @@ export class RtkNotification {
     }
     render() {
         var _a;
-        return (h(Host, { key: '51e81b13584429d211648cd6b069cfeeb9786cf0' }, h("div", { key: '4cfbf9ff3fd5bc8482ef8e89384cc5b56ea06225', class: "ctr" }, this.notification.icon != null && (h("rtk-icon", { key: '249f72bd11d1004754d4d8539d9f78aa9c16d004', class: "icon", icon: this.notification.icon, variant: (_a = this.notification.iconVariant) !== null && _a !== void 0 ? _a : 'primary' })), this.notification.image != null &&
+        return (h(Host, { key: '1e728f896ce0212c990677528187929c53e70b87' }, h("div", { key: '1855671fbe703e142f873aff2492f7c2190671ed', class: "ctr" }, this.notification.icon != null && (h("rtk-icon", { key: 'b79f092b899ffe893473571ba735fbb0926901d8', class: "icon", icon: this.notification.icon, variant: (_a = this.notification.iconVariant) !== null && _a !== void 0 ? _a : 'primary' })), this.notification.image != null &&
             this.notification.icon == null &&
-            this.imageState !== 'errored' && (h("img", { key: 'feeb94c2e78e7506c18cc91746141d7e3a35f62d', src: this.notification.image, class: { loaded: this.imageState === 'loaded' }, onLoad: () => (this.imageState = 'loaded'), onError: () => (this.imageState = 'errored') })), h("p", { key: 'b33a24ab2e00d415565005df81915a266415fdeb', class: "message" }, h(TextMessageView, { key: '1947b8c43643aa169bf4ea324fdf8a091b8b4432', message: this.notification.message })), h("div", { key: 'bc904e8c67d9a0f4dc4558a81cdc8d86fb414a3f', class: "right" }, this.notification.button != null && (h("rtk-button", { key: '1c13f1c57b9c2ffb05f7ecd51dd255fa1499d8ee', size: "sm", variant: this.notification.button.variant, onClick: () => this.notification.button.onClick() }, this.notification.button.text)), h("button", { key: '6ada4c78be92f5c3f9ec5a1b12255316345ac5ca', onClick: () => this.dismiss.emit(this.notification.id), class: "dismiss" }, h("rtk-icon", { key: '9e92dd30e11a1af7a684331b5eab02a1c4cea46a', "aria-label": this.t('dismiss'), icon: this.iconPack.dismiss }))))));
+            this.imageState !== 'errored' && (h("img", { key: '48b6d72eceb2414e5f045f5f311ed15ebff6ddb7', src: this.notification.image, class: { loaded: this.imageState === 'loaded' }, onLoad: () => (this.imageState = 'loaded'), onError: () => (this.imageState = 'errored') })), h("p", { key: 'c78fd59b339d0f1b91cb168a42d1c44bfdbcad77', class: "message" }, h(TextMessageView, { key: '3ddd5d840631752b6369b3361f71f655ddf814d5', message: this.notification.message })), h("div", { key: 'd160cc17361b7183baf08170bdd79d086584de94', class: "right" }, this.notification.button != null && (h("rtk-button", { key: 'e08976222e6e410cc1cd4d38bfd448f830b48044', size: "sm", variant: this.notification.button.variant, onClick: () => this.notification.button.onClick() }, this.notification.button.text)), h("button", { key: '23b0f91a687d3193df1d26e5e0fdc055f10a385b', onClick: () => this.dismiss.emit(this.notification.id), class: "dismiss" }, h("rtk-icon", { key: 'e055d3607a74898d70905da7720005158d403826', "aria-label": this.t('dismiss'), icon: this.iconPack.dismiss }))))));
     }
     static get is() { return "rtk-notification"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-overlay-modal/rtk-overlay-modal.js

@@ -30,7 +30,7 @@ export class RtkOverlayModal {
         }
     }
     render() {
-        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)));
+        return (h(Host, { key: 'd2837e184517e21a048bf3c0132db866e76df98e' }, h("rtk-icon", { key: '986632806311740b097ef99ad2cefc286f54b7d4', icon: this.states.activeOverlayModal.icon }), h("h2", { key: 'f7c985545abeefcf0dccd10744c70e84b14c0f1d' }, this.states.activeOverlayModal.title), h("p", { key: '43ab2a1bde3c41732d3e159c493a799f68bcd0c7' }, this.states.activeOverlayModal.description)));
     }
     static get is() { return "rtk-overlay-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-paginated-list/rtk-paginated-list.css

@@ -250,9 +250,7 @@ rtk-text-message[is-continued] {
 
 #top-scroll {
   transform: translateY(20vh);
-}
-#bottom-scroll {
-  transform: translateY(-20vh);
+  transform: translateY(20px);
 }
 
 a {
@@ -266,9 +264,8 @@ a:hover {
 }
 
 .show-new-messages-ctr {
-  pointer-events: none;
   position: absolute;
-  bottom: var(--rtk-space-2, 8px);
+  bottom: var(--rtk-space-4, 16px);
   right: var(--rtk-space-4, 16px);
   z-index: 10;
   margin-top: calc(var(--rtk-space-14, 56px) * -1);
@@ -285,6 +282,7 @@ a:hover {
 .show-new-messages-ctr.active {
   --tw-translate-y: var(--rtk-space-0, 0px);
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  cursor: pointer;
   opacity: 1;
 }
 
@@ -312,6 +310,8 @@ rtk-spinner,
 .page-wrapper {
   margin-left: var(--rtk-space-1, 4px);
   margin-right: var(--rtk-space-1, 4px);
+  display: flex;
+  flex-direction: column-reverse;
 }
 
 .message-wrapper {