@cloudflare/realtimekit-ui 0.0.0 → 1.0.0-staging.10

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

@@ -0,0 +1,305 @@
+import { p as proxyCustomElement, H, d as createEvent, w as writeTask, h, e as Host } from './p-c3592601.js';
+import { a as defaultIconPack, c as useLanguage } from './p-e6d09c50.js';
+import { M as MAX_TEXT_LENGTH } from './p-0abe4b8a.js';
+import { a as gracefulStorage } from './p-a83ccdbd.js';
+import { S as SyncWithStore } from './p-d5791958.js';
+import { d as defineCustomElement$b } from './p-4cc0e9a5.js';
+import { d as defineCustomElement$a } from './p-b12e5011.js';
+import { d as defineCustomElement$9 } from './p-c27c353f.js';
+import { d as defineCustomElement$8 } from './p-935b5e0f.js';
+import { d as defineCustomElement$7 } from './p-4608147b.js';
+import { d as defineCustomElement$6 } from './p-2f2fb96d.js';
+import { d as defineCustomElement$5 } from './p-3358d7dc.js';
+import { d as defineCustomElement$4 } from './p-81f4e985.js';
+import { d as defineCustomElement$3 } from './p-f0dfdfea.js';
+import { d as defineCustomElement$2 } from './p-bcb91396.js';
+import { d as defineCustomElement$1 } from './p-e3b59650.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;
+
+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 messageLimits = {
+    messagesSent: 0,
+    startTime: 0,
+};
+const RtkChatComposerView = /*@__PURE__*/ proxyCustomElement(class RtkChatComposerView extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.onNewMessage = createEvent(this, "newMessage", 7);
+        this.onEditMessage = createEvent(this, "editMessage", 7);
+        this.onEditCancel = createEvent(this, "editCancel", 7);
+        this.onQuotedMessageDismiss = createEvent(this, "quotedMessageDismiss", 7);
+        /** Whether user can send text messages */
+        this.canSendTextMessage = true;
+        /** Whether user can send file messages */
+        this.canSendFiles = true;
+        /** Message to be pre-populated */
+        this.message = '';
+        /** Quote message to be displayed */
+        this.quotedMessage = '';
+        /** Key for storing message in localStorage */
+        this.storageKey = 'rtk-text-message';
+        /** Placeholder for text input */
+        this.inputTextPlaceholder = 'Enter your message';
+        /** Sets composer to edit mode */
+        this.isEditing = false;
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        /** Whether to show emoji picker */
+        this.disableEmojiPicker = false;
+        /** Rate limits */
+        this.rateLimits = {
+            period: 60,
+            maxInvocations: 60,
+        };
+        this.fileToUpload = null;
+        this.isEmojiPickerOpen = false;
+        this.disableSendButton = false;
+        this.rateLimitsBreached = false;
+        this.textMessage = '';
+        this.sendFile = () => {
+            if (!this.canSendFiles) {
+                return;
+            }
+            if (this.fileToUpload.type === 'image') {
+                this.onNewMessage.emit({
+                    type: 'image',
+                    image: this.fileToUpload.file,
+                });
+            }
+            else {
+                this.onNewMessage.emit({ type: 'file', file: this.fileToUpload.file });
+            }
+            this.fileToUpload = null;
+        };
+        this.handleSendMessage = () => {
+            if (!this.canSendTextMessage || this.rateLimitsBreached) {
+                return;
+            }
+            if (this.fileToUpload !== null) {
+                this.sendFile();
+                return;
+            }
+            const message = this.textMessage;
+            const currentTime = Date.now();
+            if (currentTime - messageLimits.startTime > this.rateLimits.period * 1000) {
+                messageLimits.startTime = currentTime;
+                messageLimits.messagesSent = 0;
+            }
+            messageLimits.messagesSent += 1;
+            this.checkRateLimitBreached(currentTime);
+            if (message.length > 0) {
+                if (this.quotedMessage.length !== 0) {
+                    this.onNewMessage.emit({
+                        type: 'text',
+                        message,
+                    });
+                }
+                else {
+                    this.onNewMessage.emit({ type: 'text', message });
+                }
+                this.cleanup();
+            }
+        };
+        this.handleEditMessage = () => {
+            this.onEditMessage.emit(this.textMessage);
+            this.cleanup();
+        };
+        this.handleEditCancel = () => {
+            this.onEditCancel.emit();
+            this.cleanup();
+        };
+        this.onTextChangeHandler = (event) => {
+            var _a;
+            this.textMessage = event.detail;
+            if (this.textMessage.length >= ((_a = this.maxLength) !== null && _a !== void 0 ? _a : MAX_TEXT_LENGTH)) {
+                this.disableSendButton = true;
+            }
+            else if (this.disableSendButton) {
+                this.disableSendButton = false;
+            }
+            gracefulStorage.setItem(this.storageKey, event.detail);
+        };
+        this.onKeyDownHandler = (event) => {
+            if (event.key === 'Enter' && event.shiftKey) {
+                return;
+            }
+            if (this.disableSendButton) {
+                return;
+            }
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                if (this.isEditing) {
+                    this.handleEditMessage();
+                }
+                else {
+                    this.handleSendMessage();
+                }
+            }
+        };
+        this.onFileUploadHandler = (type, file) => {
+            this.fileToUpload = { type, file };
+        };
+        this.onQuotedMessageDismissHandler = () => {
+            this.onQuotedMessageDismiss.emit();
+        };
+        this.cleanup = () => {
+            this.textMessage = '';
+            this.fileToUpload = null;
+            gracefulStorage.setItem(this.storageKey, '');
+            this.$textComposer.setText('', true);
+            this.isEmojiPickerOpen = false;
+        };
+        this.onKeyDownHandler = this.onKeyDownHandler.bind(this);
+    }
+    connectedCallback() {
+        this.textMessage = this.message || gracefulStorage.getItem(this.storageKey) || '';
+        this.checkRateLimitBreached(Date.now());
+    }
+    componentWillUpdate() {
+        this.textMessage = this.message || gracefulStorage.getItem(this.storageKey) || '';
+    }
+    componentDidLoad() {
+        if (this.message) {
+            writeTask(() => this.$textComposer.setText(this.message, true));
+        }
+    }
+    checkRateLimitBreached(currentTime) {
+        // Check if the function call is within limits
+        if (messageLimits.messagesSent >= this.rateLimits.maxInvocations) {
+            this.disableSendButton = true;
+            this.rateLimitsBreached = true;
+            const timeRemainingForReset = currentTime - messageLimits.startTime + this.rateLimits.period * 1000;
+            setTimeout(() => {
+                messageLimits.messagesSent = 0;
+                messageLimits.startTime = Date.now();
+                this.disableSendButton = false;
+                this.rateLimitsBreached = false;
+            }, timeRemainingForReset);
+        }
+    }
+    render() {
+        var _a;
+        const uiProps = { iconPack: this.iconPack, t: this.t };
+        return (h(Host, { key: 'a672e9492db4fc74dabda1c294883706903d0e86' }, this.canSendTextMessage && this.isEmojiPickerOpen && (h("rtk-emoji-picker", Object.assign({ key: 'a75c42c1d308425ee58c91dc765eb7e785646049', part: "emoji-picker", onPickerClose: () => {
+                this.isEmojiPickerOpen = false;
+            }, onRtkEmojiClicked: (e) => {
+                this.textMessage += e.detail;
+                this.$textComposer.setText(this.textMessage, true);
+            } }, uiProps))), h("slot", { key: 'a0edb07fc7c7dea7b994c4b335f6c2c9f4e1fb09', name: "chat-addon" }), this.quotedMessage && this.quotedMessage.length !== 0 && (h("div", { key: '53c3efb018ee3a06d35d01e4c6b18d528a5fc271', class: "quoted-message-container", part: "quoted-message-container" }, h("div", { key: '101e62eb4a7a03ce5eefbcc5f67c5fce34eb292f', class: "quoted-message scrollbar" }, h("rtk-text-message-view", { key: '9e3ae5e8d1d46ffcdd03ae2d3487734257ae4425', text: this.quotedMessage, isMarkdown: true })), h("div", { key: '089bde9c6be382e1b04bce8af318b776f492718e' }, h("rtk-icon", { key: 'b04ec3f54c1886690ba70f3eb21eb8372db3ef3c', "aria-label": this.t('dismiss'), class: "dismiss", icon: this.iconPack.dismiss, onClick: this.onQuotedMessageDismissHandler })))), h("div", { key: 'f531b78b2895fbb2f37bf937c60603f35c802cb4', class: "composer-container" }, h("div", { key: '2c9389a3c823f4efabe4712b2166b477103a8667', class: "composers" }, this.fileToUpload && (h("rtk-draft-attachment-view", Object.assign({ key: '38b0366c7d131695b331ba7efe595bf10120f9bb' }, uiProps, { attachment: this.fileToUpload, onDeleteAttachment: () => (this.fileToUpload = null) }))), !this.fileToUpload && (h("rtk-text-composer-view", { key: 'ef82106370bb9e64c3275004a27aa38dcdca6480', value: this.textMessage, placeholder: this.inputTextPlaceholder, onTextChange: this.onTextChangeHandler, keyDownHandler: this.onKeyDownHandler, maxLength: (_a = this.maxLength) !== null && _a !== void 0 ? _a : MAX_TEXT_LENGTH, rateLimitBreached: this.rateLimitsBreached, t: this.t, iconPack: this.iconPack, ref: (el) => (this.$textComposer = el) }))), h("div", { key: 'c6a524f4b9c130c429e6e87add59e85439adca2d', class: "chat-buttons", part: "chat-buttons" }, h("div", { key: '0280b7dad1c85d51bd196c2bfade66979a362bd6', class: "left", part: "chat-buttons-left" }, !this.fileToUpload && !this.isEditing && (h("div", { key: '9caff064ea2a5e78f84a7c8072e99f4f944345fa' }, this.canSendFiles && [
+            h("rtk-file-picker-button", Object.assign({ key: '581b6351c4d9b2d7e376b95d494e2e3116c2cf61' }, uiProps, { onFileChange: (event) => this.onFileUploadHandler('file', event.detail) })),
+            h("rtk-file-picker-button", Object.assign({ key: '08c3c03637d516c0c7557872f408a040ade455c4', filter: "image/*", label: this.t('chat.send_img'), icon: "image", onFileChange: (event) => this.onFileUploadHandler('image', event.detail) }, uiProps)),
+        ], this.canSendTextMessage && !this.disableEmojiPicker && (h("rtk-emoji-picker-button", Object.assign({ key: '10f628d5aee40f80f2f6e10717a69f0a420ea60e', isActive: this.isEmojiPickerOpen, onClick: () => {
+                this.isEmojiPickerOpen = !this.isEmojiPickerOpen;
+            } }, uiProps))), h("slot", { key: '782450debcfcb1ae7effe6cc3fabc176b1a17e12', name: "chat-buttons" })))), h("div", { key: '39d9e3b86a6d6e9788d71a6e6f7928cb694e5c54', class: "right", part: "chat-buttons-right" }, !this.isEditing && (h("rtk-tooltip", { key: 'e5a182cc2ce7ca563de2e7438679119bbc0ea4e3', variant: "primary", label: this.t('chat.send_msg'), delay: 2000 }, h("rtk-button", { key: 'da1d029ad519b2bdb4c43b610372ee5cbcdb3ffd', kind: "icon", disabled: this.disableSendButton, onClick: () => this.handleSendMessage(), title: this.t('chat.send_msg') }, h("rtk-icon", { key: '608f9769aaf2689a50ae9ba616218aba4ce10370', icon: this.iconPack.send })))), this.isEditing && (h("div", { key: '7bc9c5c60f9dca00a3fabd2bb9c9ff64ba32eb66', class: "edit-buttons" }, h("rtk-tooltip", { key: 'f203cb3b1f6097c84ebe9bdce87913383d561f35', variant: "secondary", label: this.t('cancel'), delay: 2000 }, h("rtk-button", { key: '36720b4a31fa853a3e7de18442acf00bd32406c9', kind: "icon", variant: "secondary", onClick: () => this.handleEditCancel(), title: this.t('cancel') }, h("rtk-icon", { key: 'f4ed9e89f3633db7a3850539517f86ffb48fde96', icon: this.iconPack.dismiss }))), h("rtk-tooltip", { key: 'e66251c4572d124359edaffb551b3aaf3e9d52ee', variant: "primary", label: this.t('chat.update_msg'), delay: 2000 }, h("rtk-button", { key: '7f3be6fd93e61d0735ec0c5d36cec9bd65d0a164', kind: "icon", onClick: () => this.handleEditMessage(), title: this.t('chat.send_msg') }, h("rtk-icon", { key: '7b092e18376c32ac441fa57fbb758c8a452bec2f', icon: this.iconPack.checkmark }))))))))));
+    }
+    static get style() { return RtkChatComposerViewStyle0; }
+}, [1, "rtk-chat-composer-view", {
+        "canSendTextMessage": [4, "can-send-text-message"],
+        "canSendFiles": [4, "can-send-files"],
+        "message": [1],
+        "quotedMessage": [1, "quoted-message"],
+        "storageKey": [1, "storage-key"],
+        "inputTextPlaceholder": [1, "input-text-placeholder"],
+        "isEditing": [4, "is-editing"],
+        "iconPack": [16],
+        "t": [16],
+        "maxLength": [2, "max-length"],
+        "disableEmojiPicker": [4, "disable-emoji-picker"],
+        "rateLimits": [16],
+        "fileToUpload": [32],
+        "isEmojiPickerOpen": [32],
+        "disableSendButton": [32],
+        "rateLimitsBreached": [32]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkChatComposerView.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkChatComposerView.prototype, "t", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-chat-composer-view", "rtk-button", "rtk-draft-attachment-view", "rtk-emoji-picker", "rtk-emoji-picker-button", "rtk-file-picker-button", "rtk-icon", "rtk-markdown-view", "rtk-spinner", "rtk-text-composer-view", "rtk-text-message-view", "rtk-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-chat-composer-view":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkChatComposerView);
+            }
+            break;
+        case "rtk-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "rtk-draft-attachment-view":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "rtk-emoji-picker":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "rtk-emoji-picker-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "rtk-file-picker-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "rtk-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "rtk-markdown-view":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "rtk-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "rtk-text-composer-view":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "rtk-text-message-view":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "rtk-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkChatComposerView as R, defineCustomElement as d };

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

@@ -0,0 +1,309 @@
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
+import { a as defaultIconPack, c as useLanguage } from './p-e6d09c50.js';
+import { S as SyncWithStore } from './p-d5791958.js';
+import { d as defineCustomElement$d } from './p-9c17c7ce.js';
+import { d as defineCustomElement$c } from './p-4cc0e9a5.js';
+import { d as defineCustomElement$b } from './p-b3537ccc.js';
+import { d as defineCustomElement$a } from './p-2f2fb96d.js';
+import { d as defineCustomElement$9 } from './p-4096426e.js';
+import { d as defineCustomElement$8 } from './p-3358d7dc.js';
+import { d as defineCustomElement$7 } from './p-4cedc9e8.js';
+import { d as defineCustomElement$6 } from './p-10182034.js';
+import { d as defineCustomElement$5 } from './p-c7dcb441.js';
+import { d as defineCustomElement$4 } from './p-c939f92d.js';
+import { d as defineCustomElement$3 } from './p-9cfe5c7c.js';
+import { d as defineCustomElement$2 } from './p-81f4e985.js';
+import { d as defineCustomElement$1 } from './p-bcb91396.js';
+
+const rtkChatMessagesUiPaginatedCss = ":host{display:flex;flex-direction:column;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));flex:1 0 0px}";
+const RtkChatMessagesUiPaginatedStyle0 = rtkChatMessagesUiPaginatedCss;
+
+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 RtkChatMessagesUiPaginated = /*@__PURE__*/ proxyCustomElement(class RtkChatMessagesUiPaginated extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.editMessageInit = createEvent(this, "editMessageInit", 7);
+        this.onPinMessage = createEvent(this, "pinMessage", 7);
+        this.onDeleteMessage = createEvent(this, "deleteMessage", 7);
+        this.stateUpdate = createEvent(this, "rtkStateUpdate", 7);
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        /** Whether to align chat bubbles to the left */
+        this.leftAlign = false;
+        this.permissionsChanged = false;
+        this.pageSize = 25;
+        this.lastReadMessageIndex = -1;
+        this.permissionsUpdateListener = () => {
+            this.permissionsChanged = !this.permissionsChanged;
+        };
+        this.maybeMarkChannelAsRead = (messages) => {
+            if (!this.selectedChannelId)
+                return;
+            if (messages.length === 0)
+                return;
+            if (this.lastReadMessageIndex !== -1)
+                return;
+            const latestMsg = messages.at(0).time > messages.at(-1).time ? messages.at(0) : messages.at(-1);
+            if (!latestMsg.channelIndex)
+                return;
+            this.lastReadMessageIndex = parseInt(latestMsg.channelIndex, 10);
+            this.meeting.chat.markLastReadMessage(this.selectedChannelId, latestMsg);
+        };
+        this.getChatMessages = async (timestamp, size, reversed) => {
+            const { messages } = await this.meeting.chat.getMessages(timestamp, size, reversed, undefined, this.selectedChannelId);
+            this.maybeMarkChannelAsRead(messages);
+            return messages;
+        };
+        this.createChatNodes = (data) => {
+            /**
+             * NOTE(callmetarush): When between pages the message's isContinued
+             * will fail in current implementation
+             */
+            return data.map((message, idx) => {
+                var _a;
+                const isContinued = message.userId === ((_a = data[idx - 1]) === null || _a === void 0 ? void 0 : _a.userId);
+                return this.createChatNode(message, isContinued);
+            });
+        };
+        this.disconnectMeeting = (meeting) => {
+            var _a, _b;
+            (_a = meeting === null || meeting === void 0 ? void 0 : meeting.chat) === null || _a === void 0 ? void 0 : _a.removeListener('chatUpdate', this.chatUpdateListener);
+            (_b = this.meeting) === null || _b === void 0 ? void 0 : _b.self.permissions.removeListener('permissionsUpdate', this.permissionsUpdateListener);
+        };
+        this.getMessageActions = (message) => {
+            const actions = [];
+            // const isSelf = this.meeting.self.userId === message.userId;
+            // const chatMessagePermissions = this.meeting.self.permissions?.chatMessage;
+            // const canEdit =
+            //   chatMessagePermissions === undefined
+            //     ? isSelf
+            //     : chatMessagePermissions.canEdit === 'ALL' ||
+            //       (chatMessagePermissions.canEdit === 'SELF' && isSelf);
+            // const canDelete =
+            //   chatMessagePermissions === undefined
+            //     ? isSelf
+            //     : chatMessagePermissions.canDelete === 'ALL' ||
+            //       (chatMessagePermissions.canDelete === 'SELF' && isSelf);
+            if (this.meeting.self.permissions.pinParticipant) {
+                actions.push({
+                    id: 'pin_message',
+                    label: message.pinned ? this.t('unpin') : this.t('pin'),
+                    icon: this.iconPack.pin,
+                });
+            }
+            // if (canDelete) {
+            //   actions.push({
+            //     id: 'delete_message',
+            //     label: this.t('chat.delete_msg'),
+            //     icon: this.iconPack.delete,
+            //   });
+            // }
+            return actions;
+        };
+        this.onMessageActionHandler = (actionId, message) => {
+            switch (actionId) {
+                case 'pin_message':
+                    this.onPinMessage.emit(message);
+                    break;
+                case 'delete_message':
+                    this.onDeleteMessage.emit(message);
+                    break;
+            }
+        };
+        this.createChatNode = (message, isContinued) => {
+            var _a, _b, _c, _d;
+            if (message.targetUserIds.length !== 0)
+                return null; // don't render private messages
+            let displayPicture;
+            if (this.meeting.meta.viewType === 'CHAT') {
+                displayPicture = (_a = this.meeting.participants.all
+                    .toArray()
+                    .find((p) => p.userId === message.userId)) === null || _a === void 0 ? void 0 : _a.picture;
+            }
+            else {
+                if (this.meeting.self.userId === message.userId) {
+                    displayPicture = this.meeting.self.picture;
+                }
+                else {
+                    displayPicture =
+                        (_c = (_b = this.meeting.participants.joined
+                            .toArray()
+                            .find((member) => member.userId === message.userId)) === null || _b === void 0 ? void 0 : _b.picture) !== null && _c !== void 0 ? _c : (_d = this.meeting.participants.waitlisted.toArray().find((p) => p.userId === message.userId)) === null || _d === void 0 ? void 0 : _d.picture;
+                }
+            }
+            return (h("div", { class: { pinned: message.pinned } }, h("div", { class: "message-wrapper" }, h("rtk-message-view", { time: message.time, actions: this.getMessageActions(message), authorName: message.displayName, avatarUrl: displayPicture, hideAuthorName: isContinued, viewType: 'incoming', variant: "bubble", onAction: (event) => this.onMessageActionHandler(event.detail, message) }, h("div", null, h("div", { class: "body" }, message.type === 'text' && (h("rtk-text-message-view", { text: message.message, isMarkdown: true })), message.type === 'file' && (h("rtk-file-message-view", { name: message.name, url: message.link, size: message.size })), message.type === 'image' && (h("rtk-image-message-view", { url: message.link, onPreview: () => {
+                    this.stateUpdate.emit({ image: message });
+                } }))), message.pinned && (h("div", { class: "pin-icon", part: "pin-icon" }, h("rtk-icon", { icon: this.iconPack.pin, size: "sm" }))))))));
+        };
+        this.chatUpdateListener = (data) => {
+            if (this.selectedChannelId && data.message.channelId !== this.selectedChannelId)
+                return;
+            if (data.action === 'add') {
+                this.$paginatedListRef.onNewNode(data.message);
+                this.lastReadMessageIndex = -1;
+                this.maybeMarkChannelAsRead([data.message]);
+            }
+            else if (data.action === 'delete') {
+                this.$paginatedListRef.onNodeDelete(data.message.id);
+            }
+            else if (data.action === 'edit') {
+                this.$paginatedListRef.onNodeUpdate(data.message.id, data.message);
+            }
+        };
+    }
+    componentDidLoad() {
+        const slotted = this.host.shadowRoot.querySelector('slot');
+        if (!slotted)
+            return;
+        this.children = slotted.assignedElements()[0];
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+    }
+    disconnectedCallback() {
+        this.disconnectMeeting(this.meeting);
+    }
+    meetingChanged(meeting, oldMeeting) {
+        var _a;
+        if (oldMeeting != undefined)
+            this.disconnectMeeting(oldMeeting);
+        if (meeting && !meeting.chat)
+            return;
+        if (meeting != null) {
+            (_a = meeting.chat) === null || _a === void 0 ? void 0 : _a.addListener('chatUpdate', this.chatUpdateListener);
+            meeting.self.permissions.addListener('permissionsUpdate', this.permissionsUpdateListener);
+        }
+        this.permissionsUpdateListener();
+    }
+    channelChanged() {
+        this.lastReadMessageIndex = -1;
+    }
+    render() {
+        return (h(Host, { key: '088b35f5fe196ed2b3271a0b36eef02df47f28e0' }, h("rtk-paginated-list", { key: 'a856bde7e481f78b081dcd20351d872a6dd687fa', ref: (el) => (this.$paginatedListRef = el), pageSize: this.pageSize, pagesAllowed: 3, fetchData: this.getChatMessages, createNodes: this.createChatNodes, selectedItemId: this.selectedChannelId, emptyListLabel: this.t('chat.empty_channel') }, h("slot", { key: 'a4c15d852264ca50ae784a8b26b052585b0acac8' }))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"],
+        "selectedChannelId": ["channelChanged"]
+    }; }
+    static get style() { return RtkChatMessagesUiPaginatedStyle0; }
+}, [1, "rtk-chat-messages-ui-paginated", {
+        "meeting": [16],
+        "selectedChannel": [16],
+        "selectedChannelId": [1, "selected-channel-id"],
+        "size": [513],
+        "iconPack": [16],
+        "t": [16],
+        "leftAlign": [4, "left-align"],
+        "children": [32],
+        "permissionsChanged": [32]
+    }, undefined, {
+        "meeting": ["meetingChanged"],
+        "selectedChannelId": ["channelChanged"]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkChatMessagesUiPaginated.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkChatMessagesUiPaginated.prototype, "size", void 0);
+__decorate([
+    SyncWithStore()
+], RtkChatMessagesUiPaginated.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkChatMessagesUiPaginated.prototype, "t", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-chat-messages-ui-paginated", "rtk-avatar", "rtk-button", "rtk-file-message-view", "rtk-icon", "rtk-image-message-view", "rtk-markdown-view", "rtk-menu", "rtk-menu-item", "rtk-menu-list", "rtk-message-view", "rtk-paginated-list", "rtk-spinner", "rtk-text-message-view"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-chat-messages-ui-paginated":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkChatMessagesUiPaginated);
+            }
+            break;
+        case "rtk-avatar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "rtk-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "rtk-file-message-view":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "rtk-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "rtk-image-message-view":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "rtk-markdown-view":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "rtk-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "rtk-menu-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "rtk-menu-list":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "rtk-message-view":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "rtk-paginated-list":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "rtk-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "rtk-text-message-view":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkChatMessagesUiPaginated as R, defineCustomElement as d };