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

package/dist/types/components/rtk-chat-toggle/rtk-chat-toggle.d.ts

@@ -31,20 +31,18 @@ export declare class RtkChatToggle {
     t: RtkI18n;
     chatActive: boolean;
     canViewChat: boolean;
-    /**
-     * Only used when paginated chat is enabled
-     */
-    hasNewMessages: boolean;
+    private pageSize;
     connectedCallback(): void;
     disconnectedCallback(): void;
     meetingChanged(meeting: Meeting): void;
     statesChanged(states: States): void;
+    private setUnreadMessageCount;
     private onChatUpdate;
-    /** Emits updated state data */
-    stateUpdate: EventEmitter<States>;
     private toggleChat;
     private updateCanView;
     handleChatActiveChange(): void;
+    /** Emits updated state data */
+    stateUpdate: EventEmitter<States>;
     private buttonEl;
     render(): any;
 }

package/dist/types/components/rtk-paginated-list/rtk-paginated-list.d.ts

@@ -1,3 +1,31 @@
+/**
+ * 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.
+ */
 import { VNode } from '../../stencil-public-runtime';
 import { IconPack } from '../../lib/icons';
 import { RtkI18n } from '../../lib/lang';
@@ -7,15 +35,27 @@ export interface DataNode {
 }
 export declare class RtkPaginatedList {
     private intersectionObserver;
-    private $paginatedList;
+    private $containerRef;
     private $topRef;
     private $bottomRef;
+    /**
+     * 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.
+     */
+    private firstEmptyIndex;
+    private oldTS;
+    private newTS;
+    private maxTS;
     /** Page Size */
     pageSize: number;
+    private pages;
     /**
      * Number of pages allowed to be shown
      */
     pagesAllowed: number;
+    /** label to show when empty */
+    emptyListLabel: string;
     /** Fetch the data */
     fetchData: (timestamp: number, size: number, reversed: boolean) => Promise<unknown[]>;
     /** Create nodes */
@@ -24,73 +64,48 @@ export declare class RtkPaginatedList {
     selectedItemId?: string;
     /** auto scroll list to bottom */
     autoScroll: boolean;
+    rerenderBoolean: boolean;
+    showEmptyListLabel: boolean;
     /** Icon pack */
     iconPack: IconPack;
     /** Language */
     t: RtkI18n;
-    /** label to show when empty */
-    emptyListLabel: string;
     isLoading: boolean;
     isLoadingTop: boolean;
     isLoadingBottom: boolean;
-    hasMoreDataAtTop: boolean;
-    rerenderBoolean: boolean;
     /**
-     * This gets disabled when the user scrolls up and the bottom node
-     * is not visible anymore.
-     */
-    shouldRenderNewNodes: boolean;
+     * 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.
+     *  */
+    private shouldScrollToBottom;
+    /** 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 */
+    private showNewMessagesCTR;
     /**
-     * This gets disabled when the user scrolls up and the bottom node
-     * is not visible anymore.
-     */
-    hasNewNodesToRender: boolean;
-    showEmptyListLabel: boolean;
-    /**
-     * This is a private variable not a state
-     * since we want to debounce rerenders
-     *
-     * A list of pages where each page contains a number of Nodes
-     * [
-     *  [Node 1, Node 2, Node 3.... Node N],
-     *  [Node 1, Node 2, Node 3.... Node N],
-     * ]
-     */
-    private pagesToRender;
-    /**
-     * On a new node created
+     * 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
      */
     onNewNode(node: DataNode): Promise<void>;
+    private scrollToBottom;
     /**
-     * On node deleted
-     */
-    onNodeDelete(key: string): Promise<void>;
+     * Deletes a node anywhere from the list
+     * @param {string} id - The id of the node to delete
+     * */
+    onNodeDelete(id: string): Promise<void>;
     /**
-     * On node updated
-     */
-    onNodeUpdate(key: string, newItem: DataNode): Promise<void>;
-    onItemChanged(newItemId: string, oldItemId: string): void;
+     * 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
+     * */
+    onNodeUpdate(_id: string, _node: DataNode): Promise<void>;
+    private rerender;
     connectedCallback(): void;
-    disconnectedCallback(): void;
     componentDidLoad(): void;
-    componentDidRender(): void;
-    private currentTime;
     private observe;
-    private loadFirstPage;
-    private loadTop;
-    private loadBottom;
-    private addNodeToRender;
-    /**
-     * @param start
-     * @param end
-     * @param reversed Defines whether to add the page at the beginning or the end
-     * @param onPageLoaded Callback for when all new nodes are rendered
-     * @param direction Indicates if loading from 'top' or 'bottom'
-     */
-    private loadPage;
-    private rerender;
-    private removeLastPageIfNeeded;
-    private onDownArrowClicked;
-    private onLoadMoreOnTopClicked;
+    private loadPrevPage;
+    private loadNextPage;
+    private isAtBottom;
     render(): any;
 }

package/dist/types/components.d.ts

@@ -2510,17 +2510,21 @@ export namespace Components {
          */
         "iconPack": IconPack;
         /**
-          * On a new node created
+          * Adds a new node to the beginning of the paginated list
+          * @param node - The data node to add to the beginning of the list
          */
         "onNewNode": (node: DataNode) => Promise<void>;
         /**
-          * On node deleted
+          * Deletes a node anywhere from the list
+          * @param id - The id of the node to delete
          */
-        "onNodeDelete": (key: string) => Promise<void>;
+        "onNodeDelete": (id: string) => Promise<void>;
         /**
-          * On node updated
+          * Updates a new node anywhere in the list
+          * @param _id - The id of the node to update
+          * @param _node - The updated data node
          */
-        "onNodeUpdate": (key: string, newItem: DataNode) => Promise<void>;
+        "onNodeUpdate": (_id: string, _node: DataNode) => Promise<void>;
         /**
           * Page Size
          */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudflare/realtimekit-ui",
-  "version": "1.1.0-staging.4",
+  "version": "1.1.0-staging.6",
   "description": "Pre-built, ready-to-use UI components and utilities for integrating with Cloudflare RealtimeKit",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/dist/components/p-78f91ffe.js

@@ -1,357 +0,0 @@
-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 { s as smoothScrollToBottom } from './p-0752f2ba.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-5b66b8f3.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)}#bottom-scroll{transform:translateY(-20vh)}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{pointer-events:none;position:absolute;bottom:var(--rtk-space-2, 8px);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));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)}.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;
-
-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();
-        /** Icon pack */
-        this.iconPack = defaultIconPack;
-        /** Language */
-        this.t = useLanguage();
-        /** label to show when empty */
-        this.emptyListLabel = null;
-        this.isLoading = false;
-        this.isLoadingTop = false;
-        this.isLoadingBottom = false;
-        this.hasMoreDataAtTop = false;
-        this.rerenderBoolean = false;
-        /**
-         * This gets disabled when the user scrolls up and the bottom node
-         * is not visible anymore.
-         */
-        this.shouldRenderNewNodes = true;
-        /**
-         * This gets disabled when the user scrolls up and the bottom node
-         * is not visible anymore.
-         */
-        this.hasNewNodesToRender = false;
-        this.showEmptyListLabel = false;
-        /**
-         * This is a private variable not a state
-         * since we want to debounce rerenders
-         *
-         * A list of pages where each page contains a number of Nodes
-         * [
-         *  [Node 1, Node 2, Node 3.... Node N],
-         *  [Node 1, Node 2, Node 3.... Node N],
-         * ]
-         */
-        this.pagesToRender = [[]];
-        this.currentTime = () => {
-            return new Date().getTime();
-        };
-        this.observe = (el) => {
-            if (!el)
-                return;
-            this.intersectionObserver.observe(el);
-        };
-    }
-    /**
-     * On a new node created
-     */
-    async onNewNode(node) {
-        if (!this.shouldRenderNewNodes) {
-            this.hasNewNodesToRender = true;
-            return;
-        }
-        this.addNodeToRender(node, false);
-        this.rerender();
-    }
-    /**
-     * On node deleted
-     */
-    async onNodeDelete(key) {
-        const oldLength = this.pagesToRender.flat().length;
-        this.pagesToRender = this.pagesToRender.map((page) => page.filter((item) => item.id !== key));
-        if (oldLength !== this.pagesToRender.flat().length) {
-            this.rerender();
-        }
-    }
-    /**
-     * On node updated
-     */
-    async onNodeUpdate(key, newItem) {
-        let shouldRerender = false;
-        this.pagesToRender = this.pagesToRender.map((page) => page.map((item) => {
-            if (item.id === key) {
-                shouldRerender = true;
-                return newItem;
-            }
-            return item;
-        }));
-        if (shouldRerender)
-            this.rerender();
-    }
-    onItemChanged(newItemId, oldItemId) {
-        if (newItemId !== oldItemId) {
-            this.pagesToRender = [[]];
-            this.loadFirstPage().then(() => this.rerender());
-        }
-    }
-    connectedCallback() {
-        this.rerender = debounce(this.rerender.bind(this), 50, { maxWait: 200 });
-        this.autoScroll = true;
-        this.intersectionObserver = new IntersectionObserver((entries) => {
-            writeTask(() => {
-                for (const entry of entries) {
-                    if (entry.target.id === 'bottom-scroll') {
-                        if (entry.isIntersecting)
-                            this.loadBottom();
-                        else
-                            this.shouldRenderNewNodes = false;
-                    }
-                    if (entry.target.id === 'top-scroll' && entry.isIntersecting) {
-                        this.loadTop();
-                    }
-                }
-            });
-        });
-    }
-    disconnectedCallback() {
-        this.intersectionObserver.disconnect();
-    }
-    componentDidLoad() {
-        /**
-         * Adding observes here so that on the first render we scroll down
-         * and shouldRenderNewNodes remains true
-         */
-        this.loadFirstPage();
-        this.observe(this.$topRef);
-        this.observe(this.$bottomRef);
-    }
-    componentDidRender() {
-        if (this.shouldRenderNewNodes && this.autoScroll)
-            smoothScrollToBottom(this.$paginatedList);
-    }
-    loadFirstPage() {
-        return this.loadPage(this.currentTime(), this.pageSize, true, (data) => {
-            if (data.length === 0) {
-                this.showEmptyListLabel = true;
-            }
-        });
-    }
-    loadTop() {
-        /**
-         * If there is only one unfilled page or no page, no need to check
-         * for top since it will be empty
-         */
-        if (this.pagesToRender.length === 0)
-            return;
-        if (this.pagesToRender.length === 1 && this.pagesToRender[0].length < this.pageSize)
-            return;
-        /**
-         * TODO: Make this more flexible currently this only works with chat
-         */
-        const oldestVNode = this.pagesToRender[0][0];
-        const oldestTimestamp = oldestVNode.timeMs;
-        // TODO: scrollIntoView
-        const onPageRendered = () => { }; // oldestVNode.$elm$?.scrollIntoView();
-        this.isLoadingTop = true;
-        this.loadPage(oldestTimestamp - 1, this.pageSize, true, onPageRendered, 'top');
-    }
-    loadBottom() {
-        /**
-         * If there is only one unfilled page or no page, no need to check
-         * for top since it will be empty
-         */
-        if (this.pagesToRender.length === 0) {
-            this.shouldRenderNewNodes = true;
-            return;
-        }
-        if (this.pagesToRender.length === 1 && this.pagesToRender[0].length < this.pageSize) {
-            this.shouldRenderNewNodes = true;
-            return;
-        }
-        const newestVNode = this.pagesToRender.at(-1).at(-1);
-        const newestTimestamp = newestVNode.timeMs;
-        // TODO: scrollIntoView
-        const onPageRendered = () => smoothScrollToBottom(this.$paginatedList);
-        this.isLoadingBottom = true;
-        this.loadPage(newestTimestamp + 1, this.pageSize, false, onPageRendered, 'bottom');
-    }
-    addNodeToRender(node, addToStart) {
-        if (addToStart) {
-            const firstPage = this.pagesToRender[0];
-            if (firstPage && (firstPage === null || firstPage === void 0 ? void 0 : firstPage.length) < this.pageSize) {
-                /**
-                 * If first page is not full then just add to that page
-                 */
-                firstPage.unshift(node);
-            }
-            else {
-                /**
-                 * If first page is full then add a new page to the start
-                 */
-                const newPage = [node];
-                this.pagesToRender.unshift(newPage);
-                this.removeLastPageIfNeeded(false);
-            }
-        }
-        else {
-            const [lastPage] = this.pagesToRender.slice(-1);
-            if (lastPage && (lastPage === null || lastPage === void 0 ? void 0 : lastPage.length) < this.pageSize) {
-                /**
-                 * If last page is not full then just add it
-                 */
-                lastPage.push(node);
-            }
-            else {
-                /**
-                 * If last page is full add a new page with just
-                 * this node
-                 */
-                const newPage = [node];
-                this.pagesToRender.push(newPage);
-                this.removeLastPageIfNeeded(true);
-            }
-        }
-    }
-    /**
-     * @param start
-     * @param end
-     * @param reversed Defines whether to add the page at the beginning or the end
-     * @param onPageLoaded Callback for when all new nodes are rendered
-     * @param direction Indicates if loading from 'top' or 'bottom'
-     */
-    async loadPage(timestamp, size, reversed, onPageRendered = () => { }, direction) {
-        this.isLoading = true;
-        const data = (await this.fetchData(timestamp, size, reversed));
-        this.isLoading = false;
-        if (direction === 'top') {
-            this.isLoadingTop = false;
-            this.hasMoreDataAtTop = (data === null || data === void 0 ? void 0 : data.length) > 0;
-        }
-        if (direction === 'bottom') {
-            this.isLoadingBottom = false;
-        }
-        if (!(data === null || data === void 0 ? void 0 : data.length)) {
-            /**
-             * While scrolling down if there were no new items found
-             * then start rendering new nodes;
-             */
-            if (!reversed) {
-                this.hasNewNodesToRender = false;
-                this.shouldRenderNewNodes = true;
-            }
-            onPageRendered([]);
-            return;
-        }
-        data.forEach((node) => this.addNodeToRender(node, reversed));
-        this.rerender();
-        onPageRendered(data);
-    }
-    rerender() {
-        this.rerenderBoolean = !this.rerenderBoolean;
-    }
-    removeLastPageIfNeeded(removeFromStart) {
-        if (this.pagesToRender.length > this.pagesAllowed) {
-            if (removeFromStart)
-                this.pagesToRender.shift();
-            else
-                this.pagesToRender.pop();
-        }
-    }
-    onDownArrowClicked() {
-        /**
-         * Load the freshest pages
-         */
-        this.loadBottom();
-    }
-    onLoadMoreOnTopClicked() {
-        this.loadTop();
-    }
-    render() {
-        var _a;
-        /**
-         * div.container is flex=column-reverse
-         * which is why div#bottom-scroll comes before div#top-scroll
-         * div.page-wrapper prevents reversal of messages
-         */
-        return (h(Host, { key: '2ee90baa6b1b9f88829d04632c129287b936ba30' }, h("div", { key: 'd68db998539fd1df12e92d61828a04628f7d9f0a', class: "scrollbar container", part: "container", ref: (el) => (this.$paginatedList = el) }, h("div", { key: '4fe1ae2b1aa961242ba6be8ca3b8b6c6e504ef5c', class: { 'show-new-messages-ctr': true, active: !this.shouldRenderNewNodes } }, h("rtk-button", { key: '5c7ad4c553eb6f1b7f14bad406e49fe18f63d100', class: "show-new-messages", kind: "icon", variant: "secondary", part: "show-new-messages", onClick: () => this.onDownArrowClicked() }, h("rtk-icon", { key: 'dacfc24e3fb9ec34e40447b606e256eefaefdc6e', icon: this.iconPack.chevron_down }))), h("div", { key: '569ffce0c198638b831a3eb0bac9a032c863ed9d', class: "smallest-dom-element", id: "bottom-scroll", ref: (el) => (this.$bottomRef = el) }), this.isLoadingBottom && h("rtk-spinner", { key: '06f571694e1877d8eba4ec939bc6a74f68f16caa', size: "sm" }), this.isLoading && this.pagesToRender.flat().length === 0 && h("rtk-spinner", { key: '628c0eef27fe29d2c3cbf6f0da7d10a12560c127', size: "lg" }), this.pagesToRender.flat().length === 0 && this.showEmptyListLabel ? (h("div", { class: "empty-list" }, (_a = this.emptyListLabel) !== null && _a !== void 0 ? _a : this.t('list.empty'))) : (h("div", { class: "page-wrapper" }, this.pagesToRender.map((page) => this.createNodes(page)))), this.hasMoreDataAtTop && !this.isLoadingTop && (h("div", { key: 'fc5207945ed0949074e3460d9943130eb4289409', class: "load-more-on-top-container" }, h("rtk-button", { key: '4fff7d14798340dc576e4aeeebfe9e3946cbcf6a', class: "load-more-icon", kind: "icon", variant: "secondary", part: "load-more-icon", onClick: () => this.onLoadMoreOnTopClicked() }, h("rtk-icon", { key: '87b2abaf1c850189246d1b9aa84b55c374b31d1d', icon: this.iconPack.chevron_up })))), this.isLoadingTop && h("rtk-spinner", { key: '766ac48eebaa236a9a44f770d777c2c31fabe10e', size: "sm" }), h("div", { key: '6a5287556030f9f426ac2d8b6063b13a966135ff', class: "smallest-dom-element", id: "top-scroll", ref: (el) => (this.$topRef = el) }))));
-    }
-    static get watchers() { return {
-        "selectedItemId": ["onItemChanged"]
-    }; }
-    static get style() { return RtkPaginatedListStyle0; }
-}, [1, "rtk-paginated-list", {
-        "pageSize": [2, "page-size"],
-        "pagesAllowed": [2, "pages-allowed"],
-        "fetchData": [16],
-        "createNodes": [16],
-        "selectedItemId": [1, "selected-item-id"],
-        "autoScroll": [4, "auto-scroll"],
-        "iconPack": [16],
-        "t": [16],
-        "emptyListLabel": [1, "empty-list-label"],
-        "isLoading": [32],
-        "isLoadingTop": [32],
-        "isLoadingBottom": [32],
-        "hasMoreDataAtTop": [32],
-        "rerenderBoolean": [32],
-        "shouldRenderNewNodes": [32],
-        "hasNewNodesToRender": [32],
-        "showEmptyListLabel": [32],
-        "onNewNode": [64],
-        "onNodeDelete": [64],
-        "onNodeUpdate": [64]
-    }, undefined, {
-        "selectedItemId": ["onItemChanged"]
-    }]);
-__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/realtimekit-ui/p-02889d02.entry.js

@@ -1 +0,0 @@
-import{r as t,c as i,h as a,H as s}from"./p-0ee570cd.js";import{e,i as o}from"./p-25c4d10f.js";import{c as n}from"./p-11a469d9.js";import{S as r}from"./p-9b550ec4.js";var h=function(t,i,a,s){var e,o=arguments.length,n=o<3?i:null===s?s=Object.getOwnPropertyDescriptor(i,a):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,i,a,s);else for(var r=t.length-1;r>=0;r--)(e=t[r])&&(n=(o<3?e(n):o>3?e(i,a,n):e(i,a))||n);return o>3&&n&&Object.defineProperty(i,a,n),n};const l=class{constructor(a){t(this,a),this.stateUpdate=i(this,"rtkStateUpdate",7),this.unreadMessageCount=0,this.variant="button",this.iconPack=e,this.t=o(),this.chatActive=!1,this.canViewChat=!1,this.hasNewMessages=!1,this.onChatUpdate=({action:t,message:i})=>{var a;this.chatActive||"add"===t&&i.userId!==(null===(a=this.meeting)||void 0===a?void 0:a.self.userId)&&(this.hasNewMessages=!0,this.unreadMessageCount+=1)},this.toggleChat=()=>{const t=this.states;this.chatActive=!((null==t?void 0:t.activeSidebar)&&"chat"===(null==t?void 0:t.sidebar)),this.chatActive&&(this.unreadMessageCount=0,this.hasNewMessages=!1),this.stateUpdate.emit({activeSidebar:this.chatActive,sidebar:this.chatActive?"chat":void 0,activeMoreMenu:!1,activeAI:!1})},this.updateCanView=()=>{this.canViewChat=n(this.meeting)}}connectedCallback(){this.meetingChanged(this.meeting),this.statesChanged(this.states)}disconnectedCallback(){var t,i,a,s,e,o;null===(i=null===(t=this.meeting)||void 0===t?void 0:t.chat)||void 0===i||i.removeListener("chatUpdate",this.onChatUpdate),null===(s=null===(a=this.meeting)||void 0===a?void 0:a.stage)||void 0===s||s.removeListener("stageStatusUpdate",this.updateCanView),null===(o=null===(e=this.meeting)||void 0===e?void 0:e.self)||void 0===o||o.permissions.removeListener("chatUpdate",this.updateCanView)}meetingChanged(t){var i,a,s,e,o,r,h;if(!t)return;null===(i=t.chat)||void 0===i||i.getMessages((new Date).getTime(),1,!0).then((t=>{var i;(null===(i=null==t?void 0:t.messages)||void 0===i?void 0:i.length)&&(this.hasNewMessages=!0)}));const l=null!==(s=null===(a=t.meta)||void 0===a?void 0:a.meetingStartedTimestamp.getTime())&&void 0!==s?s:0,c=null===(e=t.chat)||void 0===e?void 0:e.messages.filter((t=>t.timeMs>l));this.unreadMessageCount=c.length||0,null===(o=t.chat)||void 0===o||o.addListener("chatUpdate",this.onChatUpdate),this.canViewChat=n(t),null===(r=null==t?void 0:t.stage)||void 0===r||r.on("stageStatusUpdate",this.updateCanView),null===(h=null==t?void 0:t.self)||void 0===h||h.permissions.on("chatUpdate",this.updateCanView)}statesChanged(t){null!=t&&(this.chatActive=!0===t.activeSidebar&&"chat"===t.sidebar)}handleChatActiveChange(){this.chatActive||this.states.activeSidebar||this.buttonEl.focus()}render(){return this.meeting?this.canViewChat?a(s,{title:this.t("chat")},this.hasNewMessages&&a("div",{class:"unread-count-dot",part:"unread-count-dot"}),a("rtk-controlbar-button",{ref:t=>this.buttonEl=t,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})):a(s,{"data-hidden":!0}):null}static get watchers(){return{meeting:["meetingChanged"],states:["statesChanged"],chatActive:["handleChatActiveChange"]}}};h([r()],l.prototype,"meeting",void 0),h([r()],l.prototype,"states",void 0),h([r()],l.prototype,"iconPack",void 0),h([r()],l.prototype,"t",void 0),l.style=":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{position:relative;display:block}:host([data-hidden]){display:none}.unread-count{position:absolute;right:var(--rtk-space-3, 12px);box-sizing:border-box;padding:var(--rtk-space-0\\.5, 2px);-webkit-user-select:none;-moz-user-select:none;user-select:none;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));font-size:12px;color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));display:flex;height:var(--rtk-space-5, 20px);min-width:var(--rtk-space-5, 20px);align-items:center;justify-content:center;border-radius:9999px;z-index:1}.unread-count-dot{position:absolute;right:var(--rtk-space-3, 12px);z-index:10;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));border-radius:50%;display:flex;height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);align-items:center;justify-content:center}:host([variant='horizontal']) .unread-count{right:var(--rtk-space-4, 16px);top:50%;transform:translateY(-50%)}";export{l as rtk_chat_toggle}

package/dist/realtimekit-ui/p-09fb29e7.entry.js

@@ -1 +0,0 @@
-import{r as t,w as s,h as i}from"./p-0ee570cd.js";import{e}from"./p-25c4d10f.js";import{S as r}from"./p-9b550ec4.js";import{d as h}from"./p-45f90b95.js";const a=class{constructor(i){t(this,i),this.visibleItemsCount=20,this.estimateItemSize=100,this.iconPack=e,this.isFetching=!1,this.autoScroll=!0,this.totalHeight=0,this.sizes=new Map,this.lastScrollTop=0,this.scrollToBottomRetries=0,this.elementObserver=(()=>{let t=null;const s=()=>t||("undefined"!=typeof ResizeObserver?t=new ResizeObserver((t=>{t.forEach((t=>{this.measureElement(t.target,t)}))})):null);return{disconnect:()=>{var t;return null===(t=s())||void 0===t?void 0:t.disconnect()},observe:t=>{var i;return null===(i=s())||void 0===i?void 0:i.observe(t,{box:"border-box"})},unobserve:t=>{var i;return null===(i=s())||void 0===i?void 0:i.unobserve(t)}}})(),this.measureElement=(t,s)=>{if(!t)return;const i=t.dataset.id;if(this.sizes.has(i))return void this.elementObserver.unobserve(t);if(s){const e=s.borderBoxSize[0];if(e&&e.blockSize>0)return this.saveItemSize(i,e.blockSize),void this.elementObserver.unobserve(t)}const e=t.getBoundingClientRect();e.height>0&&this.saveItemSize(i,e.height)},this.getVisibleItems=()=>this.messages.slice(this.range.start,this.range.end+1),this.updateVisibleItems=(t,s)=>{const i=this.messages.length;let e=t,r=s;i<=this.visibleItemsCount?(e=0,r=i-1):s-t<this.visibleItemsCount-1&&(e=this.range.end-this.visibleItemsCount+1),this.range.start!==e&&(this.range={start:e,end:r},this.totalHeight=this.getRangeSize(0,i))},this.getEstimatedItemSize=()=>this.estimateItemSize,this.getRangeSize=(t,s)=>{let i=0,e=0;for(let r=t;r<s;r++)e=this.sizes.get(this.messages[r].id),i+=e||this.getEstimatedItemSize();return i},this.getScrollTop=()=>this.$listRef?Math.ceil(this.$listRef.scrollTop):0,this.getClientHeight=()=>this.$listRef?Math.ceil(this.$listRef.clientHeight):0,this.getScrollHeight=()=>this.$listRef?Math.ceil(this.$listRef.scrollHeight):0,this.getItemsScrolled=()=>{const t=this.lastScrollTop;if(t<=0)return 0;let s=0,i=0,e=0,r=this.messages.length;for(;s<=r;){if(i=s+r>>>1,e=this.getRangeSize(0,i),e===t)return i;e<t?s=i+1:e>t&&(r=i-1)}return s>0?--s:0},this.getEndByStart=t=>Math.min(t+this.visibleItemsCount,this.messages.length-1),this.scrollToOffset=t=>{this.$listRef&&(this.$listRef.scrollTop=t)},this.scrollToIndex=t=>{if(t>=this.messages.length-1)this.scrollToBottom();else{const s=t<1?0:this.getRangeSize(0,t);this.scrollToOffset(s)}},this.scrollToBottom=()=>{this.$listEndRef&&s((()=>{this.$listEndRef.scrollIntoView(),this.getScrollHeight()-(this.getScrollTop()+this.getClientHeight())>0&&this.scrollToBottomRetries<10?setTimeout((()=>{this.scrollToBottom()}),1e3/60):(this.scrollToBottomRetries=0,this.autoScroll=!0)}))},this.handleScroll=async()=>{if(this.isFetching)return;const t=this.getScrollTop(),s=t<this.lastScrollTop||0===t?"UP":"DOWN";if(this.lastScrollTop=t,this.loadMore&&0===t&&"UP"===s&&!1===this.isFetching){this.isFetching=!0;const t=await this.loadMore(this.messages[0]);t&&t.length&&(this.messages=[...t,...this.messages]),this.isFetching=!1}"UP"===s?this.handleTop():"DOWN"===s&&this.handleBottom()},this.handleTop=()=>{const t=this.getItemsScrolled();if(t<=this.range.end-5&&(this.autoScroll=!1),t>this.range.start+5)return;const s=Math.max(this.range.start-5,0);this.updateVisibleItems(s,this.getEndByStart(s))},this.handleBottom=()=>{if(this.getItemsScrolled()<this.range.start+5)return;const t=this.range.start+5,s=this.getEndByStart(t);this.updateVisibleItems(s===this.messages.length-1?s-this.visibleItemsCount:t,s)},this.updateTotalHeight=h((()=>{this.totalHeight=this.getRangeSize(0,this.messages.length)}),1e3/30,{leading:!0}),this.rendererInternal=(t,s,i)=>{if(!t)return;if(t.dataset.id===s.id)return;const e=this.renderer(s,i);t.hasChildNodes&&(t.innerHTML=""),this.elementObserver.observe(t),t.dataset.id=s.id,t.appendChild(e)}}connectedCallback(){const t=this.messages.length-1;this.range={start:t-this.visibleItemsCount,end:t},this.updateVisibleItems(this.range.start,this.range.end),this.totalHeight=this.getRangeSize(0,t)}componentDidLoad(){this.autoScroll&&this.scrollToBottom()}messagesUpdated(t,s){if(t.length>s.length){const i=t.length-s.length;this.updateVisibleItems(i,this.getEndByStart(i)),this.scrollToIndex(this.range.start)}}saveItemSize(t,s){this.sizes.set(t,Math.round(s)),this.updateTotalHeight()}render(){return i("div",{key:"592cc96edd18a6c3f9bb18650d4a3c0969302ba9",class:"scrollbar content-wrapper",ref:t=>this.$listRef=t,onScroll:this.handleScroll},i("div",{key:"c720432351e2a051502deaeedb10e4d911776d86",class:"scroller"},i("div",{key:"7a7aafb1dc0589059bd467258cf46640f1dc2966",style:{height:`${this.totalHeight}px`}}),i("div",{key:"ee9e8a1819a66d73e67860615f580511ee34b31c",class:"smallest-dom-element",id:"list-end",ref:t=>this.$listEndRef=t})),i("div",{key:"e055b8db2ae6796797074e26f4ca4ef564006ece",class:"content",style:{transform:`translateY(${this.getRangeSize(0,this.range.start)}px)`}},this.isFetching&&i("div",{key:"fea9260948b5127ccd0e510ae55a01f4adbfcbbc",class:"loader"},i("rtk-spinner",{key:"7af2be1f15773fdf4b467d7ceee8902c61cb8ca7",size:"md"})),this.getVisibleItems().map(((t,s)=>i("div",{key:t.id,ref:i=>this.rendererInternal(i,t,s)})))))}static get watchers(){return{messages:["messagesUpdated"]}}};(function(t,s,i,e){var r,h=arguments.length,a=h<3?s:null===e?e=Object.getOwnPropertyDescriptor(s,i):e;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,s,i,e);else for(var o=t.length-1;o>=0;o--)(r=t[o])&&(a=(h<3?r(a):h>3?r(s,i,a):r(s,i))||a);h>3&&a&&Object.defineProperty(s,i,a)})([r()],a.prototype,"iconPack",void 0),a.style=":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)))}.loading{cursor:wait}.content-wrapper{height:100%;overflow-y:auto;position:relative;contain:strict}.scroller{width:1px;opacity:0}.content{position:absolute;top:0;width:100%}.smallest-dom-element{width:100%;height:2px;background:red}.loader{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-2, 8px);display:flex;justify-content:center}";export{a as rtk_message_list_view}

package/dist/realtimekit-ui/p-260fc2ed.entry.js

@@ -1 +0,0 @@
-import{r as e,c as t,h as r,H as a}from"./p-0ee570cd.js";import{e as o,i as c}from"./p-25c4d10f.js";import{S as i}from"./p-9b550ec4.js";var s=function(e,t,r,a){var o,c=arguments.length,i=c<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,r):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,a);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(i=(c<3?o(i):c>3?o(t,r,i):o(t,r))||i);return c>3&&i&&Object.defineProperty(t,r,i),i};const n=class{constructor(r){e(this,r),this.onDropCallback=t(this,"dropCallback",7),this.iconPack=o,this.t=c(),this.dropzoneActivated=!1}connectedCallback(){if(!this.hostEl)throw new Error("hostEl prop is required");this.hostEl.addEventListener("dragover",(e=>{e.preventDefault(),this.dropzoneActivated=!0})),this.hostEl.addEventListener("dragleave",(()=>{this.dropzoneActivated=!1})),this.hostEl.addEventListener("drop",(e=>{e.preventDefault(),this.dropzoneActivated=!1,this.onDropCallback.emit(e)}))}render(){return r(a,{key:"9525e4e25630d45a8945e0cd169ac7830eb131b2"},r("div",{key:"1be56002e1adecfaf2f9b6216e2551929bcac4e2",id:"dropzone",class:{active:this.dropzoneActivated},part:"dropzone"},r("rtk-icon",{key:"e7d366446b6714ad64d2b95da7f08f67a1429333",icon:this.iconPack.attach}),r("p",{key:"ab3b2e3a048ee8bd812ece1ad5a9afcc03d00c67"},this.t("chat.send_attachment"))))}};s([i()],n.prototype,"iconPack",void 0),s([i()],n.prototype,"t",void 0),n.style="#dropzone{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);z-index:10;display:none;flex-direction:column;align-items:center;justify-content:center;--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-700, 255 255 255 / 0.64))}#dropzone.active{display:flex;animation:0.2s slide-up ease-in}";export{n as rtk_file_dropzone}