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

package/dist/components/p-0d472019.js

@@ -0,0 +1,362 @@
+import { p as proxyCustomElement, H, w as writeTask, h, e as Host } from './p-c3592601.js';
+import { e as defaultIconPack, i as useLanguage } from './p-e847fee9.js';
+import { S as SyncWithStore } from './p-6f7c46d2.js';
+import { d as defineCustomElement$3 } from './p-1391bef0.js';
+import { d as defineCustomElement$2 } from './p-3b29dda1.js';
+import { d as defineCustomElement$1 } from './p-4ebf9684.js';
+import { d as debounce } from './p-1dca17d1.js';
+
+const rtkPaginatedListCss = ".scrollbar{scrollbar-width:thin;scrollbar-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n    var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar{height:var(--rtk-space-1\\.5, 6px);width:var(--rtk-space-1\\.5, 6px);border-radius:9999px;background-color:var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar-thumb{border-radius:9999px;background-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))}:host{position:relative;display:flex;flex-direction:column;flex:1}.container{box-sizing:border-box;display:flex;flex-direction:column-reverse;padding-top:var(--rtk-space-4, 16px);padding-bottom:var(--rtk-space-4, 16px);padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px);flex:1 0 0px;overflow-y:scroll}.file-picker{display:none}.chat *:first-child{margin-top:var(--rtk-space-0, 0px)}.chat .head{display:flex;align-items:center}.chat .head .name{margin-right:var(--rtk-space-4, 16px);font-size:12px;font-weight:700}.chat .head .time{font-size:12px;color:rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76))}.chat .body{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-2, 8px);overflow-wrap:break-word;font-size:14px;line-height:1.375}.chat .body .emoji{font-size:24px}p{margin-top:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-3, 12px)}rtk-text-message,rtk-image-message,rtk-file-message{margin-top:var(--rtk-space-4, 16px);display:block;padding-left:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-3, 12px);font-family:var(--rtk-font-family, sans-serif);color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));box-sizing:border-box}*[is-continued]{margin-top:var(--rtk-space-3, 12px)}rtk-text-message[is-continued]{margin-top:var(--rtk-space-2, 8px)}.chat .image{position:relative;height:var(--rtk-space-40, 160px);max-width:var(--rtk-space-64, 256px);cursor:pointer}.chat .image img{display:none;height:100%;width:100%;border-radius:var(--rtk-border-radius-sm, 4px);-o-object-fit:cover;object-fit:cover}.chat .image .image-spinner{display:flex;height:100%;width:100%;flex-direction:column;align-items:center;justify-content:center;border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}.chat .image .image-spinner rtk-spinner{--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-text-opacity))}.chat .image .image-errored{display:flex;height:100%;width:100%;flex-direction:column;align-items:center;justify-content:center;border-radius:var(--rtk-border-radius-sm, 4px);background-color:rgba(var(--rtk-colors-danger, 255 45 45) / 0.1);--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}.chat .image .actions{display:none;height:var(--rtk-space-8, 32px);align-items:center;position:absolute;top:var(--rtk-space-2, 8px);right:var(--rtk-space-2, 8px);border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255));overflow:hidden;--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.chat .image .actions .action{height:var(--rtk-space-8, 32px);width:var(--rtk-space-8, 32px);border-radius:var(--rtk-border-radius-none, 0);border-width:var(--rtk-border-width-none, 0);border-style:none;background-color:transparent;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.chat .image .actions .action:hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.image.loaded img{display:block}.image.loaded .image-spinner{display:none}.image:hover .actions,.image:focus .actions{display:flex}.chat .file{display:flex;align-items:center;gap:var(--rtk-space-1, 4px);padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px);padding-top:var(--rtk-space-1\\.5, 6px);padding-bottom:var(--rtk-space-1\\.5, 6px);border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}.chat .file .file-data{flex:1 1 0%}.chat .file .file-data .name{word-break:break-all;color:rgb(var(--rtk-colors-text-1000, 255 255 255));overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.chat .file .file-data .file-data-split{margin-top:var(--rtk-space-0\\.5, 2px);display:flex;align-items:center;font-size:12px}.chat .file .file-data .file-data-split .ext{margin-right:var(--rtk-space-2, 8px);text-transform:uppercase;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.chat .file .file-data .file-data-split .divider{height:var(--rtk-space-4, 16px);width:var(--rtk-space-0\\.5, 2px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.chat .file .file-data .file-data-split .size{margin-left:var(--rtk-space-2, 8px)}.smallest-dom-element{width:1px}#top-scroll{transform:translateY(20vh);transform:translateY(20px)}a{--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-text-opacity));text-decoration-line:none}a:hover{text-decoration-line:underline}.show-new-messages-ctr{position:absolute;bottom:var(--rtk-space-4, 16px);right:var(--rtk-space-4, 16px);z-index:10;margin-top:calc(var(--rtk-space-14, 56px) * -1);--tw-translate-y:var(--rtk-space-28, 112px);transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:0;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.show-new-messages-ctr.active{--tw-translate-y:var(--rtk-space-0, 0px);transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:pointer;opacity:1}.show-new-messages{pointer-events:auto;border-radius:9999px}.show-new-messages:hover{border-radius:9999px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-ring-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}rtk-spinner,.empty-list{margin:auto}.page-wrapper{margin-left:var(--rtk-space-1, 4px);margin-right:var(--rtk-space-1, 4px);display:flex;flex-direction:column-reverse}.message-wrapper{margin-bottom:var(--rtk-space-2, 8px)}.pinned .message-wrapper{position:relative}.pinned .pin-icon{position:absolute;right:calc(var(--rtk-space-1, 4px) * -1);top:calc(var(--rtk-space-1, 4px) * -1);display:flex;border-radius:var(--rtk-border-radius-sm, 4px)}.pinned rtk-message-view{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));padding-top:var(--rtk-space-1, 4px);padding-bottom:var(--rtk-space-1, 4px)}.load-more-on-top-container{pointer-events:none;position:absolute;top:var(--rtk-space-2, 8px);right:var(--rtk-space-4, 16px);z-index:10}.load-more-icon{pointer-events:auto;border-radius:9999px}.load-more-icon:hover{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-ring-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}";
+const RtkPaginatedListStyle0 = rtkPaginatedListCss;
+
+/**
+ * HOW INFINITE SCROLL WORKS:
+ *
+ * We use intersectionObserver to scroll up.
+ * We use scrollEnd listener to scroll down.
+ *
+ * Why?
+ * intersectionObserver doesn't work reliably for 2 way scrolling but has great ux,
+ * so we use it to smoothly scroll up.
+ *
+ * We have empty divs at the top and bottom ($topRef, $bottomRef)
+ * which act as triggers to tell that we have reached the top or end of our messages and need to fetch new messages,
+ *
+ * When scrolling up, we can't remove pages as intersectionObserver relies on
+ * the index of dom elements to work properly.
+ * So instead, we fetch older messages and push them to the end of the 2d array
+ * if length exceeds pagesAllowed, we free up the pages and keep the first empty index in memory (firstEmptyIndex).
+ *
+ * For scrolling down, when scroll ends we see if the bottomRef is in view.
+ * If yes, we fetch the new page and insert it at the firstEmptyIndex.
+ * We update timestamps & firstEmptyIndex, then we rerender.
+ *
+ * If we have exceeded our page allowance we delete old pages.
+ *
+ * In this case deleting pages is okay as we are not relying on the index of dom elements to detect page end.
+ *
+ * This also simplifies the code because when a user scrolls up we do not need to manage a lastEmptyIndex.
+ */
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const RtkPaginatedList = /*@__PURE__*/ proxyCustomElement(class RtkPaginatedList extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * when scrolling up, we can't remove pages as intersectionObserver relies on
+         * the index of dom elements to stay stable.
+         * So, instead we free up the pages and keep the last empty index in memory.
+         */
+        this.firstEmptyIndex = -1;
+        this.maxTS = 0;
+        // the length of pages will always be pageSize + 2
+        this.pages = [];
+        /** label to show when empty */
+        this.emptyListLabel = null;
+        this.rerenderBoolean = false;
+        this.showEmptyListLabel = false;
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        this.isLoading = false;
+        this.isLoadingTop = false;
+        this.isLoadingBottom = false;
+        /**
+         * Even when auto scroll is enabled, we only want to scroll if a new realtime message has arrived.
+         * This variable tells us if we should respect auto scroll after a new page has been loaded.
+         * It is also used by the scroll to bottom button.
+         *  */
+        this.shouldScrollToBottom = false;
+        /** UI Indicator for the "scroll to bottom" button.
+         * Toggles on when a new node is added and autoscroll is disabled.
+         * Toggles off when all nodes are loaded */
+        this.showNewMessagesCTR = false;
+        this.observe = (el) => {
+            if (!el)
+                return;
+            this.intersectionObserver.observe(el);
+        };
+        this.isAtBottom = () => {
+            const rect = this.$bottomRef.getBoundingClientRect();
+            return rect.top >= 0 && rect.bottom <= window.innerHeight;
+        };
+    }
+    /**
+     * Adds a new node to the beginning of the paginated list
+     * @param {DataNode} node - The data node to add to the beginning of the list
+     */
+    async onNewNode(node) {
+        // Always update the maxTS. New messages will load on scroll till the end cursor (newTS) reaches this value.
+        this.maxTS = Math.max(this.maxTS, node.timeMs);
+        // if we are at the bottom of the page
+        if (this.firstEmptyIndex === -1) {
+            // append messages to the page if page has not reached full capacity
+            if (this.pages[0].length < this.pageSize) {
+                this.pages[0].unshift(node);
+                this.newTS = node.timeMs;
+                this.rerender();
+            }
+            else {
+                // if page is at full capacity, load next page
+                this.loadNextPage();
+            }
+        }
+        // If autoscroll is enabled, this method will scroll to the bottom
+        if (this.autoScroll) {
+            this.shouldScrollToBottom = true;
+            this.scrollToBottom();
+        }
+        else {
+            this.showNewMessagesCTR = true;
+        }
+    }
+    // this method is called recursively based on shouldScrollToBottom (see scrollEnd listener)
+    scrollToBottom() {
+        this.$bottomRef.scrollIntoView({ behavior: 'smooth' });
+    }
+    /**
+     * Deletes a node anywhere from the list
+     * @param {string} id - The id of the node to delete
+     * */
+    async onNodeDelete(id) {
+        // Iterate only over pages that have content (not empty)
+        for (let i = this.pages.length - 1; i > this.firstEmptyIndex; i--) {
+            const index = this.pages[i].findIndex((node) => node.id === id);
+            // message in view
+            if (index !== -1) {
+                // delete message
+                this.pages[i].splice(index, 1);
+                if (i === this.firstEmptyIndex + 1) {
+                    //  if newest page is empty, update first empty index
+                    if (this.pages[i].length === 0)
+                        this.firstEmptyIndex++;
+                    // update timestamp, first empty index could be -1, so we need to cap it at 0
+                    this.newTS = this.pages[Math.max(this.firstEmptyIndex, 0)][0].timeMs;
+                }
+                else if (i === this.firstEmptyIndex + this.pagesAllowed) {
+                    //  if oldest page is empty, remove it
+                    if (this.pages[i].length === 0)
+                        this.pages.pop();
+                    // update timestamp
+                    const lastPage = this.pages[this.firstEmptyIndex + this.pagesAllowed];
+                    this.oldTS = lastPage[lastPage.length - 1].timeMs;
+                }
+                this.rerender();
+            }
+        }
+    }
+    /**
+     * Updates a new node anywhere in the list
+     * @param {string} _id - The id of the node to update
+     * @param {DataNode} _node - The updated data node
+     * */
+    async onNodeUpdate(_id, _node) { }
+    rerender() {
+        this.rerenderBoolean = !this.rerenderBoolean;
+    }
+    connectedCallback() {
+        this.rerender = debounce(this.rerender.bind(this), 50, { maxWait: 200 });
+        this.intersectionObserver = new IntersectionObserver((entries) => {
+            writeTask(async () => {
+                for (const entry of entries) {
+                    if (entry.target.id === 'top-scroll' && entry.isIntersecting) {
+                        this.isLoadingTop = true;
+                        await this.loadPrevPage();
+                        this.isLoadingTop = false;
+                    }
+                }
+            });
+        });
+    }
+    componentDidLoad() {
+        this.observe(this.$topRef);
+        if (this.$containerRef) {
+            this.$containerRef.onscrollend = async () => {
+                /**
+                 * Load new page if:
+                 * if there are nodes to load at the bottom (maxTS > newTS)
+                 * or if there are pages to fill at the bottom (firstEmptyIndex > -1)
+                 */
+                if (this.isAtBottom() && (this.maxTS > this.newTS || this.firstEmptyIndex > -1)) {
+                    this.isLoadingBottom = true;
+                    await this.loadNextPage();
+                    this.isLoadingBottom = false;
+                    if (this.shouldScrollToBottom)
+                        this.scrollToBottom();
+                }
+            };
+        }
+    }
+    async loadPrevPage() {
+        if (this.isLoading)
+            return;
+        /**
+         * NOTE(ikabra): this case also runs on initial load
+         * if scrolling up ->
+         * fetch older messages and push to the end of the array
+         * cleanup 1st non empty page from the array if length exceeds pagesAllowed
+         */
+        // if no old timestamp, it means we are at initial state
+        if (!this.oldTS)
+            this.oldTS = new Date().getTime();
+        // load data
+        this.isLoading = true;
+        const data = await this.fetchData(this.oldTS - 1, this.pageSize, true);
+        this.isLoading = false;
+        // no more old messages to show, we are at the top of the page
+        if (!data.length)
+            return;
+        // add old data to the end of the array
+        this.pages.push(data);
+        // clear old pages when we reach the limit
+        if (this.pages.length > this.pagesAllowed) {
+            this.pages[this.pages.length - this.pagesAllowed - 1] = [];
+            /**
+             * find last non empty page in range (this.pages.length, this.firstEmptyIndex)
+             * we are doing this because any of the middle pages in the currently rendered pages
+             * could be empty as we allow deleting messages.
+             * This helps us set the first empty index correctly.
+             */
+            for (let i = this.firstEmptyIndex + 1; i < this.pages.length; i++) {
+                if (this.pages[i].length > 0)
+                    break;
+                this.firstEmptyIndex = i;
+            }
+        }
+        // update the old timestamp
+        const lastPage = this.pages[this.pages.length - 1];
+        this.oldTS = lastPage[lastPage.length - 1].timeMs;
+        // update the new timestamp
+        this.newTS = this.pages[this.firstEmptyIndex + 1][0].timeMs;
+        this.rerender();
+    }
+    async loadNextPage() {
+        if (this.isLoading)
+            return;
+        // new timestamp needs to be assigned by loadPrevPage method
+        if (!this.newTS) {
+            this.showNewMessagesCTR = false;
+            this.shouldScrollToBottom = false;
+            return;
+        }
+        // load data
+        this.isLoading = true;
+        const data = await this.fetchData(this.newTS + 1, this.pageSize, false);
+        this.isLoading = false;
+        // no more new messages to load
+        if (!data.length) {
+            this.showNewMessagesCTR = false;
+            this.shouldScrollToBottom = false;
+            // remove extra pages from the start if any (could be due to users deleting messages)
+            this.pages = this.pages.filter((page) => page.length > 0);
+            this.firstEmptyIndex = -1;
+            return;
+        }
+        // when filling empty pages
+        if (this.firstEmptyIndex > -1) {
+            this.pages[this.firstEmptyIndex] = data.reverse();
+        }
+        else {
+            // when already at the bottom and loading messages in realtime
+            this.pages.unshift(data.reverse());
+        }
+        if (this.pages.length > this.pagesAllowed) {
+            this.pages.pop();
+        }
+        // smallest value for firstEmptyIndex can be -1, so we cap the index at 0
+        this.newTS = this.pages[Math.max(0, this.firstEmptyIndex)][0].timeMs;
+        // remove all empty pages from the end
+        for (let i = this.pages.length - 1; i > this.firstEmptyIndex; i--) {
+            if (this.pages[i].length > 0)
+                break;
+            // if page is empty, remove it
+            this.pages.pop();
+        }
+        // update the old timestamp
+        const lastPage = this.pages[this.pages.length - 1];
+        this.oldTS = lastPage[lastPage.length - 1].timeMs;
+        // when scrolling too fast scroll a bit to the top to be able to load new messages when you scroll down
+        if (this.$containerRef.scrollTop === 0)
+            this.$containerRef.scrollTop = -60;
+        // smallest value for this index can be -1 (indicates we are at the bottom of the page).
+        this.firstEmptyIndex = Math.max(-1, this.firstEmptyIndex - 1);
+        this.rerender();
+    }
+    render() {
+        /**
+         * div.container is flex=column-reverse
+         * which is why div#bottom-scroll comes before div#top-scroll
+         */
+        return (h(Host, { key: '91ac7d0ca3fb720259945ffaa97f465b34c694fa' }, h("div", { key: '33896c19ecc4359ae163c65b5c71b9f17673e765', class: "scrollbar container", part: "container", ref: (el) => (this.$containerRef = el) }, h("div", { key: 'e26a5ef3979ec132277b9598afc17ea65683f6c8', class: { 'show-new-messages-ctr': true, active: this.showNewMessagesCTR } }, h("rtk-button", { key: 'e769a8f54a298af456552733dc9de27d059e5138', class: "show-new-messages", kind: "icon", variant: "secondary", part: "show-new-messages", onClick: () => {
+                this.shouldScrollToBottom = true;
+                this.scrollToBottom();
+            } }, h("rtk-icon", { key: '6fb4cbc2247eb971004a94926b95ebd0f90ab0fd', icon: this.iconPack.chevron_down }))), h("div", { key: 'e91dd8f25012e4509e0ff3cb4d6b65aa9467d427', class: "smallest-dom-element", id: "bottom-scroll", ref: (el) => (this.$bottomRef = el) }), this.isLoadingBottom && this.pages.length > 0 && h("rtk-spinner", { key: '199c0ccffd57716bd5a05dcef8610113d3c58d3d', size: "sm" }), this.isLoading && this.pages.length < 1 && h("rtk-spinner", { key: 'b8a3e08a25b2bc1d50b5a9b1b2deda802ae5eb28', size: "lg" }), !this.isLoading && this.pages.flat().length === 0 ? (h("div", { class: "empty-list" }, this.t('list.empty'))) : (h("div", { class: "page-wrapper" }, this.pages.map((page, pageIndex) => (h("div", { class: "page", "data-page-index": pageIndex }, this.createNodes([...page].reverse())))))), this.isLoadingTop && this.pages.length > 0 && h("rtk-spinner", { key: '2cb56b4f70d37548fd9aa71b961559b43c54a922', size: "sm" }), h("div", { key: '4b183c49bfe60fd63af40e02b9b46215c08bb484', class: "smallest-dom-element", id: "top-scroll", ref: (el) => (this.$topRef = el) }))));
+    }
+    static get style() { return RtkPaginatedListStyle0; }
+}, [1, "rtk-paginated-list", {
+        "pageSize": [2, "page-size"],
+        "pagesAllowed": [2, "pages-allowed"],
+        "emptyListLabel": [1, "empty-list-label"],
+        "fetchData": [16],
+        "createNodes": [16],
+        "selectedItemId": [1, "selected-item-id"],
+        "autoScroll": [4, "auto-scroll"],
+        "iconPack": [16],
+        "t": [16],
+        "rerenderBoolean": [32],
+        "showEmptyListLabel": [32],
+        "isLoading": [32],
+        "isLoadingTop": [32],
+        "isLoadingBottom": [32],
+        "onNewNode": [64],
+        "onNodeDelete": [64],
+        "onNodeUpdate": [64]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkPaginatedList.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkPaginatedList.prototype, "t", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-paginated-list", "rtk-button", "rtk-icon", "rtk-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-paginated-list":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkPaginatedList);
+            }
+            break;
+        case "rtk-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "rtk-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "rtk-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkPaginatedList as R, defineCustomElement as d };

package/dist/components/{p-94ba6c49.js → p-0e5cc539.js}

@@ -4,7 +4,7 @@ import { e as defaultIconPack, i as useLanguage } from './p-e847fee9.js';
 import './p-a83ccdbd.js';
 import { d as defineCustomElement$3 } from './p-1391bef0.js';
 import { d as defineCustomElement$2 } from './p-3b29dda1.js';
-import { d as defineCustomElement$1 } from './p-fa8f6b4a.js';
+import { d as defineCustomElement$1 } from './p-fb836f65.js';
 
 const rtkEmojiPickerButtonCss = ":host{}";
 const RtkEmojiPickerButtonStyle0 = rtkEmojiPickerButtonCss;
@@ -30,7 +30,7 @@ const RtkEmojiPickerButton = /*@__PURE__*/ proxyCustomElement(class RtkEmojiPick
         this.t = useLanguage();
     }
     render() {
-        return (h("rtk-tooltip", { key: 'bcde14fb2c3a6544882502e65ffda7a6b3b6f13d', label: this.t('chat.send_emoji') }, h("rtk-button", { key: 'd82fa78c4ffe48c24131a6e38f087548f540fefa', variant: "ghost", kind: "icon", class: { active: this.isActive }, title: this.t('chat.send_emoji') }, h("rtk-icon", { key: '791bbe2537f1aeb064c5e9ccbbf4af37b706ec2a', icon: this.iconPack.emoji_multiple }))));
+        return (h("rtk-tooltip", { key: '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 style() { return RtkEmojiPickerButtonStyle0; }
 }, [1, "rtk-emoji-picker-button", {

package/dist/components/{p-8901c589.js → p-0f2de0f8.js}

@@ -3,14 +3,14 @@ import { f as formatDateTime, e as elapsedDuration } from './p-382270d8.js';
 import { S as SyncWithStore } from './p-6f7c46d2.js';
 import { e as defaultIconPack } from './p-e847fee9.js';
 import './p-a83ccdbd.js';
-import { d as defineCustomElement$6 } from './p-ff320cbb.js';
+import { d as defineCustomElement$6 } from './p-241a8245.js';
 import { d as defineCustomElement$5 } from './p-3b29dda1.js';
-import { d as defineCustomElement$4 } from './p-93069a8c.js';
-import { d as defineCustomElement$3 } from './p-0e8ff1cc.js';
-import { d as defineCustomElement$2 } from './p-222454dc.js';
-import { d as defineCustomElement$1 } from './p-8b4e32b7.js';
+import { d as defineCustomElement$4 } from './p-2447a26f.js';
+import { d as defineCustomElement$3 } from './p-819cb785.js';
+import { d as defineCustomElement$2 } from './p-7148ec6a.js';
+import { d as defineCustomElement$1 } from './p-4ebf9684.js';
 
-const rtkMessageViewCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}.scrollbar{scrollbar-width:thin;scrollbar-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n    var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar{height:var(--rtk-space-1\\.5, 6px);width:var(--rtk-space-1\\.5, 6px);border-radius:9999px;background-color:var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar-thumb{border-radius:9999px;background-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))}:host{max-width:var(--rtk-space-96, 384px)}.message-wrapper{display:flex;flex-direction:row-reverse;align-items:flex-start;gap:var(--rtk-space-2, 8px)}.message-wrapper.incoming{flex-direction:row}.message{display:flex;flex-direction:column;align-items:flex-end}.incoming .message{display:flex;flex-direction:column;align-items:flex-start}.header{margin-top:var(--rtk-space-1, 4px);margin-bottom:var(--rtk-space-1, 4px);align-self:flex-end;color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));font-size:12px;font-weight:600}.incoming .header{align-self:flex-start}.body{display:flex;flex-direction:column;min-width:var(--rtk-space-24, 96px);font-family:var(--rtk-font-family, sans-serif);color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));font-size:14px;line-height:1.375;position:relative}.bubble{max-width:90%;padding:var(--rtk-space-2, 8px);border-width:1px;border-style:solid;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-brand-600, 13 81 253) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));border-radius:var(--rtk-border-radius-md, 8px)}.incoming .bubble{--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}.metadata{margin-top:var(--rtk-space-2, 8px);align-self:flex-end;font-size:10px;color:rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76))}.avatar{display:none}rtk-menu{position:absolute;right:var(--rtk-space-1, 4px);top:var(--rtk-space-1, 4px);border-radius:var(--rtk-border-radius-lg, 12px)}rtk-menu rtk-icon{height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);cursor:pointer}.actions{display:flex;align-items:center;justify-content:center;border-width:1px;border-style:solid;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-brand-600, 13 81 253) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-bg-opacity));padding:var(--rtk-space-1, 4px);border-radius:var(--rtk-border-radius-md, 8px);border-width:var(--rtk-border-width-none, 0);border-style:none}.actions rtk-icon{height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.incoming rtk-avatar{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}.incoming .actions{--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity))}@media (min-width: 400px){.avatar{display:flex;width:var(--rtk-space-6, 24px)}.avatar rtk-avatar{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px);font-size:10px;overflow:clip;border-radius:9999px}}@media (hover: hover){rtk-menu{visibility:hidden}.body:hover rtk-menu{visibility:visible}}";
+const rtkMessageViewCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}.scrollbar{scrollbar-width:thin;scrollbar-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n    var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar{height:var(--rtk-space-1\\.5, 6px);width:var(--rtk-space-1\\.5, 6px);border-radius:9999px;background-color:var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar-thumb{border-radius:9999px;background-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))}:host{max-width:var(--rtk-space-96, 384px)}.message-wrapper{display:flex;flex-direction:row-reverse;align-items:flex-start;gap:var(--rtk-space-2, 8px)}.message-wrapper.incoming{flex-direction:row}.message{display:flex;flex-direction:column;align-items:flex-end}.incoming .message{display:flex;flex-direction:column;align-items:flex-start}.header{margin-top:var(--rtk-space-1, 4px);margin-bottom:var(--rtk-space-1, 4px);align-self:flex-end;color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));font-size:12px;font-weight:600}.incoming .header{align-self:flex-start}.body{display:flex;flex-direction:column;min-width:var(--rtk-space-24, 96px);font-family:var(--rtk-font-family, sans-serif);color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));font-size:14px;line-height:1.375;position:relative}.bubble{max-width:90%;padding:var(--rtk-space-2, 8px);border-width:1px;border-style:solid;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-brand-600, 13 81 253) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));border-radius:var(--rtk-border-radius-md, 8px)}.incoming .bubble{--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}.metadata{margin-top:var(--rtk-space-2, 8px);display:flex;flex-direction:row;align-items:center;gap:var(--rtk-space-2, 8px);align-self:flex-end;font-size:11px;color:rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76))}.avatar{display:none}rtk-menu{position:absolute;right:var(--rtk-space-1, 4px);top:var(--rtk-space-1, 4px);border-radius:var(--rtk-border-radius-lg, 12px)}rtk-menu rtk-icon{height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);cursor:pointer}.actions{display:flex;align-items:center;justify-content:center;border-width:1px;border-style:solid;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-brand-600, 13 81 253) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-bg-opacity));padding:var(--rtk-space-1, 4px);border-radius:var(--rtk-border-radius-md, 8px);border-width:var(--rtk-border-width-none, 0);border-style:none}.actions rtk-icon{height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.incoming rtk-avatar{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}.incoming .actions{--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity))}@media (min-width: 400px){.avatar{display:flex;width:var(--rtk-space-6, 24px)}.avatar rtk-avatar{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px);font-size:10px;overflow:clip;border-radius:9999px}}@media (hover: hover){rtk-menu{visibility:hidden}.body:hover rtk-menu{visibility:visible}}";
 const RtkMessageViewStyle0 = rtkMessageViewCss;
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -33,6 +33,8 @@ const RtkMessageView = /*@__PURE__*/ proxyCustomElement(class RtkMessageView ext
         this.actions = [];
         /** Appearance */
         this.variant = 'bubble';
+        /** Is message pinned */
+        this.pinned = false;
         /** Render */
         this.viewType = 'outgoing';
         /** Hides avatar */
@@ -50,12 +52,13 @@ const RtkMessageView = /*@__PURE__*/ proxyCustomElement(class RtkMessageView ext
         return (h("rtk-menu", { placement: this.isSelf ? 'bottom-start' : 'bottom-end', offset: 1 }, h("button", { slot: "trigger", class: "actions" }, h("rtk-icon", { icon: this.iconPack.chevron_down })), h("rtk-menu-list", { menuVariant: this.isSelf ? 'primary' : 'secondary' }, this.actions.map((action) => (h("rtk-menu-item", { menuVariant: this.isSelf ? 'primary' : 'secondary', onClick: () => this.onAction.emit(action.id) }, action.icon && h("rtk-icon", { icon: action.icon, slot: "start" }), action.label))))));
     }
     render() {
-        return (h(Host, { key: '96feddf08120ae0e2aa89e955a16e8e4a43c78fb' }, h("div", { key: '79184165b5312ea52f0cbb57e25cfd4a757fc65f', class: { 'message-wrapper': true, [this.viewType]: true } }, !this.hideAvatar && (h("aside", { key: 'a2ccd72fbec0153282db018fb3473bf10f2176e9', class: "avatar", part: "avatar" }, h("rtk-avatar", { key: 'ecc9f5f77de0a47dfb5985c6f48e5f117c64b45e', participant: { name: this.authorName, picture: this.avatarUrl }, size: "sm" }))), h("div", { key: '3a72dc77c04eeb4d6015bf46dd9cc0bc9f533943', class: "message", part: "message" }, !this.hideAuthorName && (h("div", { key: '153a94b9fa6b23dac3fe4da62a22cbf66e4e73dc', class: "header" }, this.authorName, " ", this.isSelf ? ' (You)' : '')), h("div", { key: 'a36d44da27ea1a4d18feb91726d22e7adf983914', class: { body: true, bubble: this.variant === 'bubble' } }, h("slot", { key: '4ef8ca3766b562201e4e4443438c91679f09d471' }), !this.hideMetadata && !!this.time && (h("div", { key: '66754f1dd1a65ebdcda24449475b1f603db3ff1e', class: "metadata", title: formatDateTime(this.time) }, elapsedDuration(this.time, new Date(Date.now())))), this.actions.length !== 0 && this.renderActions())))));
+        return (h(Host, { key: '7a4f7b9cd801a12871077b56c96213d6c7f53685' }, h("div", { key: '2b1731b82f709cf90f6d7ab239a8a516886de227', class: { 'message-wrapper': true, [this.viewType]: true } }, !this.hideAvatar && (h("aside", { key: '9963f792a5475c74e8170c0baec328162828163d', class: "avatar", part: "avatar" }, h("rtk-avatar", { key: 'e09b73fbba38f108809e6444940e8053c71a0276', participant: { name: this.authorName, picture: this.avatarUrl }, size: "sm" }))), h("div", { key: 'cdd752fa1553c5977251dcb0a32ecc5b65984514', class: "message", part: "message" }, !this.hideAuthorName && (h("div", { key: 'd0a758ac727a0a9b1757e8a61caf57bfadc20d08', class: "header" }, this.authorName, " ", this.isSelf ? ' (You)' : '')), h("div", { key: '32687e9a0462eaad2d625eb93d82205a23f99f51', class: { body: true, bubble: this.variant === 'bubble' } }, h("slot", { key: 'ca2022939cb8becf5d81655a37e344ff930a3251' }), !this.hideMetadata && !!this.time && (h("div", { key: '11dec318a44909b3080dcd29b3a6c4074ce394e3', class: "metadata", title: formatDateTime(this.time) }, this.pinned && h("rtk-icon", { key: '7a68a35c7113407f3676ee09de42fcab50485f39', icon: this.iconPack.pin, size: "sm" }), elapsedDuration(this.time, new Date(Date.now())))), this.actions.length !== 0 && this.renderActions())))));
     }
     static get style() { return RtkMessageViewStyle0; }
 }, [1, "rtk-message-view", {
         "actions": [16],
         "variant": [1],
+        "pinned": [4],
         "viewType": [1, "view-type"],
         "avatarUrl": [1, "avatar-url"],
         "hideAvatar": [4, "hide-avatar"],

package/dist/components/{p-3a3650bd.js → p-107e55c1.js}

@@ -37,7 +37,7 @@ const RtkMuteAllConfirmation = /*@__PURE__*/ proxyCustomElement(class RtkMuteAll
         };
     }
     render() {
-        return (h(Host, { key: '012843e04afc91b7a9b8bca01d5d44ad8eb21988' }, h("div", { key: '82d246a5339936460435c45122ee9979c6f96ec4', class: "leave-modal" }, h("div", { key: '93a9cb57cc106f4dadbb3bac2dc194dc506d8926', class: "header" }, h("h2", { key: '26535ce68bae0d140ad626cfef61f7f753892404', class: "title" }, this.t('mute_all.header'))), h("p", { key: 'adf32771ba089b2b07022faa581a152495faafbc', class: "message" }, this.t('mute_all.description')), h("div", { key: '8f15b4433aa6483d968f435ce413ebe64077aee4', class: "content" }, h("div", { key: '5d9781ebe01b4085f4c5a9917a09b5b32e418c72', class: "leave-meeting" }, h("rtk-button", { key: 'bb8718e4548662d15ea67cb5a432e195c5f5f965', variant: "secondary", title: this.t('close'), onClick: this.onClose }, this.t('cancel')), h("rtk-button", { key: '0efaee116b9361826fc94a41e4727115a08100cb', variant: "danger", title: this.t('mute_all'), onClick: this.onMuteAll }, this.t('mute_all')))))));
+        return (h(Host, { key: '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 style() { return RtkMuteAllConfirmationStyle0; }
 }, [1, "rtk-mute-all-confirmation", {

package/dist/components/{p-e62d961a.js → p-1a9e3806.js}

@@ -52,7 +52,7 @@ const RtkConfirmationModal = /*@__PURE__*/ proxyCustomElement(class RtkConfirmat
     render() {
         var _a, _b;
         const state = this.states.activeConfirmationModal;
-        return (h(Host, { key: '716b099a3b9d9886c41626cf977e6de8e744894b' }, h("div", { key: 'bac586faa92a4a80b78e36cbef361eec830a8ee2', class: "leave-modal" }, h("div", { key: 'ee19990482ae51504da014bf7d804b4bf577a14a', class: "header" }, h("h2", { key: 'd220797780f3f93b27f1ae511a9fd30e0211b957', class: "title" }, state.header ? this.t(state.header) : this.t('cta.confirmation'))), state.content && h("p", { key: '498688e185b24eec250bcbcdd555fedc15980395', class: "message" }, this.t(state.content)), h("div", { key: '43f6068e6a14c1798ea2d9dec4dafd110222a5aa', class: "content" }, h("div", { key: 'dde485ee17c18a7a15dafd5347e9981ea6af4fe4', class: "leave-meeting" }, h("rtk-button", { key: '9cbbbe08509212e581b2e0768653a9f97efa45e3', variant: "secondary", title: state.cancelText ? this.t(state.cancelText) : this.t('cancel'), onClick: this.close, class: "br-secondary-btn" }, state.cancelText ? this.t(state.cancelText) : this.t('cancel')), h("rtk-button", { key: 'd6c1deaa86c2ec2dd607583aaf9ef3238c343183', onClick: () => this.onConfirmation(), variant: (_b = (_a = this.states.activeConfirmationModal) === null || _a === void 0 ? void 0 : _a.variant) !== null && _b !== void 0 ? _b : 'danger', title: state.ctaText ? this.t(state.ctaText) : this.t('yes') }, state.ctaText ? this.t(state.ctaText) : this.t('yes')))))));
+        return (h(Host, { key: '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 style() { return RtkConfirmationModalStyle0; }
 }, [1, "rtk-confirmation-modal", {

package/dist/components/{p-1da75fdd.js → p-1f5a4682.js}

@@ -4,7 +4,7 @@ import { e as defaultIconPack, i as useLanguage } from './p-e847fee9.js';
 import './p-a83ccdbd.js';
 import { d as defineCustomElement$3 } from './p-1391bef0.js';
 import { d as defineCustomElement$2 } from './p-3b29dda1.js';
-import { d as defineCustomElement$1 } from './p-fa8f6b4a.js';
+import { d as defineCustomElement$1 } from './p-fb836f65.js';
 
 const rtkDraftAttachmentViewCss = ":host{display:flex;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));border-top-left-radius:var(--rtk-border-radius-md, 8px);border-top-right-radius:var(--rtk-border-radius-md, 8px)}.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);background-color:inherit}.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)}.preview:hover rtk-tooltip{display:block}.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)}.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))}.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-600, 60 60 60) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--rtk-border-radius-md, 8px);max-width:200px}";
 const RtkDraftAttachmentViewStyle0 = rtkDraftAttachmentViewCss;
@@ -62,7 +62,7 @@ const RtkDraftAttachmentView = /*@__PURE__*/ proxyCustomElement(class RtkDraftAt
         this.onAttachmentChange();
     }
     render() {
-        return (h(Host, { key: 'b23eb412c60a62f542aec0e3cd3b99fc72de48f0' }, h("div", { key: '04251f8d4b13325f8474110c89733369bd8904f2', class: "preview-overlay" }, h("div", { key: '51963510a704b19e7c591ea177018bae6e0317f5', class: "preview" }, h("rtk-tooltip", { key: '3a2167ea7a02f1d744462826084f0fef5c607ac9', label: this.t('chat.cancel_upload') }, h("rtk-button", { key: '634c9a7e0962ed82c36519e919eb597c9b603f51', variant: "secondary", kind: "icon", onClick: this.onDeleteClickHandler }, h("rtk-icon", { key: 'b936e54ae44e1d54b73adf38a92551fbea0299c5', icon: this.iconPack.dismiss }))), this.attachment.type === 'image' ? (h("img", { class: "preview-image", src: this.filePreview })) : (h("div", { class: "preview-file" }, h("span", null, this.filePreview)))))));
+        return (h(Host, { key: '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 watchers() { return {
         "attachment": ["onAttachmentChange"]

package/dist/components/{p-bb55fa0c.js → p-2309fb19.js}

@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-
 import { e as defaultIconPack, i as useLanguage } from './p-e847fee9.js';
 import { S as SyncWithStore } from './p-6f7c46d2.js';
 import { s as shorten, f as formatName, g as getInitials } from './p-efabd2ce.js';
-import { d as defineCustomElement$1 } from './p-fa8f6b4a.js';
+import { d as defineCustomElement$1 } from './p-fb836f65.js';
 
 const rtkPollCss = ":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)))}.ctr{margin-bottom:var(--rtk-space-3, 12px);display:flex;width:100%;flex-direction:column;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.poll-title{margin-top:var(--rtk-space-3, 12px);margin-bottom:var(--rtk-space-3, 12px);margin-right:var(--rtk-space-4, 16px);font-size:12px}.poll{border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));display:flex;flex-direction:column;padding:var(--rtk-space-4, 16px)}.poll-question{padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px);font-size:14px;overflow-wrap:break-word}.poll-answers{display:flex;flex-direction:row;justify-content:space-between;font-size:12px;margin-top:var(--rtk-space-4, 16px);margin-bottom:var(--rtk-space-1, 4px);padding-left:var(--rtk-space-1, 4px);padding-right:var(--rtk-space-3, 12px)}.poll-option{display:flex;flex-direction:column;margin-top:var(--rtk-space-2, 8px);border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));padding:var(--rtk-space-2, 8px);word-break:break-word}.poll-option.open-vote:hover{cursor:pointer}.poll-option label{display:flex;flex-direction:row;cursor:inherit}.poll-option-header{display:flex;flex-direction:row;justify-content:space-between;padding:var(--rtk-space-1, 4px)}.poll-option-header[data-disabled='true']:hover{cursor:default}.poll-option-header input{margin-top:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-0, 0px);margin-left:var(--rtk-space-0\\.5, 2px);margin-right:var(--rtk-space-2, 8px);cursor:inherit}.poll-option-header .counter{color:rgb(var(--rtk-colors-text-1000, 255 255 255));font-size:12px}.votes{margin-top:var(--rtk-space-1, 4px);display:flex;flex-direction:row;flex-wrap:wrap}.vote{margin-right:var(--rtk-space-1, 4px);height:var(--rtk-space-8, 32px);width:var(--rtk-space-8, 32px);display:flex;align-items:center;justify-content:center;border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-video-bg, 24 24 24) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255));border-radius:var(--rtk-border-radius-none, 0);clip-path:circle()}.active{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-900, var(--rtk-colors-text-900, 255 255 255 / 0.88)))}.active .counter{color:rgb(var(--rtk-colors-text-on-brand-900, var(--rtk-colors-text-900, 255 255 255 / 0.88)))}";
 const RtkPollStyle0 = rtkPollCss;
@@ -39,7 +39,7 @@ const RtkPolls = /*@__PURE__*/ proxyCustomElement(class RtkPolls extends H {
     }
     render() {
         const hasVoted = this.poll.voted.includes(this.self);
-        return (h(Host, { key: 'a2588231aa3c37d1b21a8204127cb07c42a4a013' }, h("div", { key: '3c4086564b201957801369c8781f7a89ff6ea0ba', class: "ctr" }, h("p", { key: '64deb31def342b2700a6a7d5858b6d5b961abf96', class: "poll-title" }, this.t('polls.by'), " ", shorten(formatName(this.poll.createdBy), 20)), h("div", { key: 'ef32b3dbde5b7aee0c3cd8290a1b0b185f0d80d0', class: "poll" }, h("p", { key: 'c9275828e7754f29a532410d576cba4aedcea711', class: "poll-question" }, this.poll.question), h("div", { key: 'a5c7ea1ad068f18b43d3f59ce75725c391c2ed14', class: "poll-answers" }, h("span", { key: '12810f7ec4e5450bc351d6fb66eb851c5a4555b1' }, this.t('polls.answers')), h("span", { key: '9788a0ead61a49eecd5babc56a1f99a93ee5ed9e' }, this.poll.voted.length)), this.poll.options.map((item, index) => (h("div", { class: {
+        return (h(Host, { key: '2951e932453e7c58f3d2a1bc0952b02c7f231fe2' }, h("div", { key: 'fda1240df8d21e01df14e749593f00ca81a4c4a2', class: "ctr" }, h("p", { key: '08459f706bdb922eddc7a3b7f3b2177293f18371', class: "poll-title" }, this.t('polls.by'), " ", shorten(formatName(this.poll.createdBy), 20)), h("div", { key: 'b8c1d0755a17862bf372c24c72b6ad5f9a774d81', class: "poll" }, h("p", { key: 'cd76bf5da75f3165eecac1c6845bbb5c0a69a99c', class: "poll-question" }, this.poll.question), h("div", { key: '00c702b964872b7883bcd656e3b8e03a1986b28e', class: "poll-answers" }, h("span", { key: 'e51a233616f792e6bcbbb8376099a4a5e9e7dd02' }, this.t('polls.answers')), h("span", { key: 'f3fe545292f85870d11f334c211099bdab8694f0' }, this.poll.voted.length)), this.poll.options.map((item, index) => (h("div", { class: {
                 active: item.votes.some((x) => x.id === this.self),
                 'open-vote': this.permissions.polls.canVote && !hasVoted,
                 'poll-option': true,

package/dist/components/{p-ff320cbb.js → p-241a8245.js}

@@ -3,7 +3,7 @@ import { e as defaultIconPack, i as useLanguage } from './p-e847fee9.js';
 import { f as formatName, g as getInitials } from './p-efabd2ce.js';
 import { S as SyncWithStore } from './p-6f7c46d2.js';
 import { d as defineCustomElement$2 } from './p-3b29dda1.js';
-import { d as defineCustomElement$1 } from './p-8b4e32b7.js';
+import { d as defineCustomElement$1 } from './p-4ebf9684.js';
 
 const rtkAvatarCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{display:flex;height:var(--rtk-space-32, 128px);width:var(--rtk-space-32, 128px);align-items:center;justify-content:center;font-size:28px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));overflow:clip;border-radius:9999px;-webkit-user-select:none;-moz-user-select:none;user-select:none}rtk-icon{height:50%;width:50%}.image-ctr{display:flex;height:100%;width:100%;align-items:center;justify-content:center;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52))}img{height:var(--rtk-space-0, 0px);width:var(--rtk-space-0, 0px);-o-object-fit:cover;object-fit:cover}img.loaded{height:100%;width:100%}.initials{display:flex;height:100%;width:100%;align-items:center;justify-content:center;text-transform:uppercase}.image{display:flex;height:100%;width:100%;align-items:center;justify-content:center}.image img{display:none;height:100%;width:100%;-o-object-fit:cover;object-fit:cover}.image img.loaded{display:block}:host([variant='hexagon']){border-radius:var(--rtk-border-radius-none, 0);clip-path:polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%)}:host([variant='square']){border-radius:var(--rtk-border-radius-none, 0);clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)}:host([size='sm']){height:var(--rtk-space-14, 56px);width:var(--rtk-space-14, 56px);font-size:12px}:host([size='md']){height:var(--rtk-space-28, 112px);width:var(--rtk-space-28, 112px)}:host([size='lg']){height:var(--rtk-space-32, 128px);width:var(--rtk-space-32, 128px)}";
 const RtkAvatarStyle0 = rtkAvatarCss;

package/dist/components/{p-93069a8c.js → p-2447a26f.js}

@@ -59,7 +59,7 @@ const RtkMenu = /*@__PURE__*/ proxyCustomElement(class RtkMenu extends H {
         });
     }
     render() {
-        return (h(Host, { key: 'b019210ff85bde38c61855f8ac38aa8b927aa857' }, h("span", { key: '14f689eed0672642c3a181ee5d197d7a9b5c00a8', 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 @@ const RtkMenu = /*@__PURE__*/ proxyCustomElement(class RtkMenu extends H {
                 else {
                     this.menuListEl.style.display = 'none';
                 }
-            } }, h("slot", { key: 'f1ab2111e0ad309df5b38e4f189d821b8ab50a4a', name: "trigger" })), h("span", { key: 'ec03b8c7ff60dd21dce3bc1f9b473ab59ec37ace', part: "menu-list", id: "menu-list", ref: (el) => (this.menuListEl = el) }, h("slot", { key: 'bc05fba324ccf4360340b070c8d4f3723a72cf6e' }))));
+            } }, h("slot", { key: 'af622c9dbb3394cb46a6bb909a45c5e3248b1a09', name: "trigger" })), h("span", { key: '445258e31b4b775fbc22b268234fe15a33f809c9', part: "menu-list", id: "menu-list", ref: (el) => (this.menuListEl = el) }, h("slot", { key: '87396622c6078253736cbe43a1cac55c6f90754f' }))));
     }
     static get style() { return RtkMenuStyle0; }
 }, [1, "rtk-menu", {

package/dist/components/{p-3bc68ec4.js → p-28170a8d.js}

@@ -4,16 +4,16 @@ import { M as MAX_TEXT_LENGTH } from './p-dab9d3d6.js';
 import { a as gracefulStorage } from './p-a83ccdbd.js';
 import { S as SyncWithStore } from './p-6f7c46d2.js';
 import { d as defineCustomElement$b } from './p-1391bef0.js';
-import { d as defineCustomElement$a } from './p-1da75fdd.js';
-import { d as defineCustomElement$9 } from './p-626c7a5f.js';
-import { d as defineCustomElement$8 } from './p-94ba6c49.js';
-import { d as defineCustomElement$7 } from './p-d81ba93a.js';
+import { d as defineCustomElement$a } from './p-1f5a4682.js';
+import { d as defineCustomElement$9 } from './p-598dc3f2.js';
+import { d as defineCustomElement$8 } from './p-0e5cc539.js';
+import { d as defineCustomElement$7 } from './p-bb4983b8.js';
 import { d as defineCustomElement$6 } from './p-3b29dda1.js';
-import { d as defineCustomElement$5 } from './p-88bef213.js';
-import { d as defineCustomElement$4 } from './p-8b4e32b7.js';
-import { d as defineCustomElement$3 } from './p-d9b1945a.js';
-import { d as defineCustomElement$2 } from './p-a94b2e67.js';
-import { d as defineCustomElement$1 } from './p-fa8f6b4a.js';
+import { d as defineCustomElement$5 } from './p-cf8f725b.js';
+import { d as defineCustomElement$4 } from './p-4ebf9684.js';
+import { d as defineCustomElement$3 } from './p-4902c5cf.js';
+import { d as defineCustomElement$2 } from './p-6739a399.js';
+import { d as defineCustomElement$1 } from './p-fb836f65.js';
 
 const rtkChatComposerViewCss = ":host {\n  display: flex;\n  flex-direction: column;\n  font-family: var(--rtk-font-family, sans-serif);\n  font-size: 14px;\n  position: relative;\n}\n\n.quoted-message-container {\n  margin-bottom: var(--rtk-space-2, 8px);\n  display: flex;\n  justify-content: space-between;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));\n  color: rgb(var(--rtk-colors-text-1000, 255 255 255));\n  border-radius: var(--rtk-border-radius-md, 8px);\n  border: var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60));\n}\n\n.quoted-message-container .quoted-message {\n  flex: 1 1 0%;\n  padding: var(--rtk-space-2, 8px);\n  border-radius: var(--rtk-border-radius-md, 8px);\n  max-height: var(--rtk-space-24, 96px);\n  overflow-y: auto;\n  word-break: break-all;\n}\n\n.quoted-message-container .quoted-message blockquote {\n  display: none;\n}\n\n.quoted-message-container rtk-icon.dismiss {\n  margin-left: auto;\n  height: var(--rtk-space-5, 20px);\n  width: var(--rtk-space-5, 20px);\n  padding: var(--rtk-space-2, 8px);\n  border-radius: var(--rtk-border-radius-md, 8px);\n  color: rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52));\n}\n\n.quoted-message-container rtk-icon.dismiss:hover {\n  cursor: pointer;\n  color: rgb(var(--rtk-colors-text-1000, 255 255 255));\n}\n\n.quoted-message-container rtk-icon.dismiss {\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n\n.composer-container {\n  position: relative;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));\n  border-radius: var(--rtk-border-radius-md, 8px);\n  overflow: hidden;\n  border: var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60));\n}\n\n.composer-container > .composers {\n    min-height: 60px;\n  }\n\n@container chatcontainer (height < 360px) {\n    .composer-container > .composers {\n      min-height: 30px;\n    }\n}\n\n.chat-buttons {\n  padding: var(--rtk-space-3, 12px);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));\n  color: rgb(var(--rtk-colors-text-1000, 255 255 255));\n}\n\n.chat-buttons .right {\n  z-index: 10;\n}\n\n.chat-buttons .right .edit-buttons {\n  display: flex;\n  gap: var(--rtk-space-2, 8px);\n}\n\n.chat-buttons > div {\n  display: flex;\n  align-items: center;\n}\n\nrtk-emoji-picker {\n  z-index: 20;\n  position: absolute;\n  top: calc(var(--rtk-space-72, 288px) * -1);\n  border-top: var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60));\n  animation: 0.3s slide-up ease;\n}\n\n@keyframes slide-up {\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0%);\n  }\n}\n";
 const RtkChatComposerViewStyle0 = rtkChatComposerViewCss;