@cloudflare/realtimekit-ui 1.1.0-staging.8 → 1.1.0

package/dist/components/p-7f71b3c7.js

@@ -0,0 +1,463 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-fdad14c9.js';
+import { c as createDefaultConfig, e as defaultIconPack, i as useLanguage, f as defaultOverrides } from './p-f19b4abc.js';
+import { h as handleFilesDataTransfer } from './p-0db812c2.js';
+import { S as SyncWithStore } from './p-e334e15c.js';
+import { d as defineCustomElement$o } from './p-c9db1b82.js';
+import { d as defineCustomElement$n } from './p-e229128b.js';
+import { d as defineCustomElement$m } from './p-298aa8be.js';
+import { d as defineCustomElement$l } from './p-e93218b8.js';
+import { d as defineCustomElement$k } from './p-881e5548.js';
+import { d as defineCustomElement$j } from './p-c9ee0428.js';
+import { d as defineCustomElement$i } from './p-e0ef3893.js';
+import { d as defineCustomElement$h } from './p-d029dd2f.js';
+import { d as defineCustomElement$g } from './p-9e1478a0.js';
+import { d as defineCustomElement$f } from './p-154bed23.js';
+import { d as defineCustomElement$e } from './p-06de876f.js';
+import { d as defineCustomElement$d } from './p-a3cc7425.js';
+import { d as defineCustomElement$c } from './p-7384c20c.js';
+import { d as defineCustomElement$b } from './p-27029836.js';
+import { d as defineCustomElement$a } from './p-e7b7abfe.js';
+import { d as defineCustomElement$9 } from './p-cd6f04ae.js';
+import { d as defineCustomElement$8 } from './p-8a66a347.js';
+import { d as defineCustomElement$7 } from './p-2f68e7bb.js';
+import { d as defineCustomElement$6 } from './p-c3bfa8f1.js';
+import { d as defineCustomElement$5 } from './p-c39c6e12.js';
+import { d as defineCustomElement$4 } from './p-dfdbb665.js';
+import { d as defineCustomElement$3 } from './p-7adb3504.js';
+import { d as defineCustomElement$2 } from './p-15d2291f.js';
+import { d as defineCustomElement$1 } from './p-15156a2c.js';
+
+const rtkChatCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}.scrollbar{scrollbar-width:thin;scrollbar-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n    var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar{height:var(--rtk-space-1\\.5, 6px);width:var(--rtk-space-1\\.5, 6px);border-radius:9999px;background-color:var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar-thumb{border-radius:9999px;background-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))}:host{display:flex;height:100%;width:100%;flex-direction:column;font-size:14px;position:relative;box-sizing:border-box;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}h3{margin:var(--rtk-space-0, 0px);display:flex;height:var(--rtk-space-12, 48px);align-items:center;justify-content:center;font-size:16px;font-weight:400;color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));text-align:center}#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}rtk-chat-messages-ui,rtk-chat-messages-ui-paginated{flex:1 0 0}rtk-chat-composer-view{margin:var(--rtk-space-2, 8px)}.chat-container{display:flex;height:100%;width:100%;flex-direction:row;container-type:size;container-name:chatcontainer}.chat{box-sizing:border-box;display:flex;flex:1 1 0%;flex-direction:column}.banner{height:100%;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.view-chats-btn{margin-top:var(--rtk-space-4, 16px)}.selector-container{z-index:50;width:100%;max-width:var(--rtk-space-80, 320px);border-right:var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60))}.selector-container.hide{display:none}.mobile-close-btn{display:none}.selector-container.mobile{height:100%;width:100%;max-width:100%;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:rgba(var(--rtk-colors-background-1000, 8 8 8) / 0.6);display:flex}.selector-container.mobile .mobile-close-btn{margin-top:var(--rtk-space-4, 16px);margin-bottom:var(--rtk-space-4, 16px);margin-left:var(--rtk-space-6, 24px);margin-right:var(--rtk-space-6, 24px);display:block}.pinned-messages{position:relative;display:flex;flex-direction:column}.pinned-messages-header{display:flex;align-items:center;justify-content:space-between;gap:var(--rtk-space-2, 8px);padding:var(--rtk-space-4, 16px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));font-size:14px;cursor:pointer}.pinned-messages-header div{display:flex;flex-direction:row;align-items:center;gap:var(--rtk-space-2, 8px)}.pinned-messages-header rtk-icon{height:var(--rtk-space-3, 12px);width:var(--rtk-space-3, 12px)}.pinned-messages-content{--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-1000, 8 8 8) / var(--tw-bg-opacity));position:absolute;left:var(--rtk-space-0, 0px);top:100%;z-index:50;max-height:30vh;width:100%;overflow:auto}.pinned-message{display:flex;cursor:pointer;flex-direction:row;align-items:center;gap:var(--rtk-space-2, 8px);--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity));padding:var(--rtk-space-4, 16px);border-bottom-width:var(--rtk-border-width-sm, 1px);border-right-width:var(--rtk-border-width-none, 0);border-left-width:var(--rtk-border-width-none, 0);border-top-width:var(--rtk-border-width-none, 0);border-style:solid}.pinned-message-avatar{height:var(--rtk-space-6, 24px) !important;width:var(--rtk-space-6, 24px) !important}@keyframes swipe-in{from{transform:translateX(-100%)}to{transform:translateX(0)}}";
+const RtkChatStyle0 = rtkChatCss;
+
+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 RtkChat = /*@__PURE__*/ proxyCustomElement(class RtkChat extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.stateUpdate = createEvent(this, "rtkStateUpdate", 7);
+        this.chatPermissionUpdateListener = () => {
+            this.canSend = this.meeting.self.permissions.chatPublic.canSend;
+            this.canSendTextMessage = this.meeting.self.permissions.chatPublic.text;
+            this.canSendFiles = this.meeting.self.permissions.chatPublic.files;
+        };
+        /** Config */
+        this.config = createDefaultConfig();
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        /** UI Overrides */
+        this.overrides = defaultOverrides;
+        /** Can current user pin/unpin messages */
+        this.canPinMessages = false;
+        this.now = new Date();
+        this.dropzoneActivated = false;
+        this.showLatestMessageButton = false;
+        this.canSend = false;
+        this.canSendTextMessage = false;
+        this.canSendFiles = false;
+        this.canPrivateMessage = false;
+        this.canSendPrivateTexts = false;
+        this.canSendPrivateFiles = false;
+        this.emojiPickerEnabled = false;
+        this.participants = [];
+        this.editingMessage = null;
+        this.replyMessage = null;
+        this.searchQuery = '';
+        this.selectorState = 'hide';
+        this.isSendingMessage = false;
+        this.showPinnedMessages = false;
+        this.onDragOver = (e) => {
+            e.preventDefault();
+            this.dropzoneActivated = true;
+        };
+        this.onDragLeave = () => {
+            this.dropzoneActivated = false;
+        };
+        this.onDrop = (e) => {
+            e.preventDefault();
+            this.dropzoneActivated = false;
+            handleFilesDataTransfer(e.dataTransfer.items, (type, file) => {
+                var _a, _b, _c, _d;
+                switch (type) {
+                    case 'image':
+                        if (this.isFileMessagingAllowed()) {
+                            (_b = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.chat) === null || _b === void 0 ? void 0 : _b.sendImageMessage(file, this.getRecipientPeerIds());
+                        }
+                        break;
+                    case 'file':
+                        if (this.isFileMessagingAllowed()) {
+                            (_d = (_c = this.meeting) === null || _c === void 0 ? void 0 : _c.chat) === null || _d === void 0 ? void 0 : _d.sendFileMessage(file, this.getRecipientPeerIds());
+                        }
+                        break;
+                }
+            });
+        };
+        this.disconnectMeeting = (meeting) => {
+            meeting.self.permissions.removeListener('*', this.chatPermissionUpdateListener);
+        };
+        this.isTextMessagingAllowed = () => {
+            if (!this.selectedParticipant) {
+                // public chat
+                return this.canSend && this.canSendTextMessage;
+            }
+            // private chat
+            return this.canPrivateMessage && this.canSendPrivateTexts;
+        };
+        this.isFileMessagingAllowed = () => {
+            if (!this.selectedParticipant) {
+                // public chat
+                return this.canSend && this.canSendFiles;
+            }
+            // private chat
+            return this.canPrivateMessage && this.canSendPrivateFiles;
+        };
+        this.onQuotedMessageDismiss = () => {
+            this.replyMessage = null;
+        };
+        this.onNewMessageHandler = async (e) => {
+            const message = e.detail;
+            this.isSendingMessage = true;
+            try {
+                await this.meeting.chat.sendMessage(message, this.getRecipientPeerIds());
+            }
+            finally {
+                this.isSendingMessage = false;
+            }
+        };
+        this.onEditMessageHandler = async (e) => {
+            var _a, _b;
+            this.isSendingMessage = true;
+            try {
+                await ((_b = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.chat) === null || _b === void 0 ? void 0 : _b.editTextMessage(this.editingMessage.id, e.detail));
+            }
+            finally {
+                this.isSendingMessage = false;
+                this.editingMessage = null;
+            }
+        };
+        this.onEditCancel = () => {
+            this.editingMessage = null;
+        };
+        this.onPinMessage = (event) => {
+            const message = event.detail;
+            if (message.pinned) {
+                this.meeting.chat.unpin(message.id);
+            }
+            else {
+                this.meeting.chat.pin(message.id);
+            }
+        };
+        this.onDeleteMessage = (event) => {
+            var _a;
+            const message = event.detail;
+            if (((_a = this.editingMessage) === null || _a === void 0 ? void 0 : _a.id) === message.id) {
+                this.editingMessage = null;
+            }
+            try {
+                if (typeof localStorage !== 'undefined') {
+                    const keysToRemove = [];
+                    for (let i = 0; i < localStorage.length; i++) {
+                        const key = localStorage.key(i);
+                        if (key && key.startsWith('rtk-chat-edit-') && key.endsWith(`-${message.id}`)) {
+                            keysToRemove.push(key);
+                        }
+                    }
+                    keysToRemove.forEach((key) => localStorage.removeItem(key));
+                }
+            }
+            catch (_b) {
+                // ignore storage access errors
+            }
+            this.meeting.chat.deleteMessage(message.id);
+        };
+        this.onMessageEdit = (event) => {
+            const message = event.detail;
+            if (message.type !== 'text')
+                return;
+            this.replyMessage = null;
+            this.editingMessage = message;
+        };
+    }
+    connectedCallback() {
+        if (!this.meeting)
+            return;
+        this.meetingChanged(this.meeting);
+        if (this.meeting && !this.meeting.chat) {
+            return;
+        }
+        if (this.isFileMessagingAllowed()) {
+            this.host.addEventListener('dragover', this.onDragOver);
+            this.host.addEventListener('dragleave', this.onDragLeave);
+            this.host.addEventListener('drop', this.onDrop);
+        }
+    }
+    onEditMessageInit(event) {
+        if (event.detail.flags.isReply) {
+            this.replyMessage = event.detail.payload;
+        }
+        else if (event.detail.flags.isEdit) {
+            this.editingMessage = event.detail.payload;
+        }
+    }
+    onChatSelectorChange(event) {
+        var _a;
+        const selectedUser = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.selectedUser;
+        // Everyone
+        if (!selectedUser) {
+            this.selectedParticipant = null;
+            return;
+        }
+        this.selectedParticipant = selectedUser;
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.disconnectMeeting(this.meeting);
+        this.host.removeEventListener('dragover', this.onDragOver);
+        this.host.removeEventListener('dragleave', this.onDragLeave);
+        this.host.removeEventListener('drop', this.onDrop);
+    }
+    meetingChanged(meeting, oldMeeting) {
+        var _a, _b, _c, _d;
+        if (oldMeeting != undefined)
+            this.disconnectMeeting(oldMeeting);
+        if (meeting && !meeting.chat)
+            return;
+        if (meeting != null) {
+            this.canSend = meeting.self.permissions.chatPublic.canSend;
+            this.canSendTextMessage = meeting.self.permissions.chatPublic.text;
+            this.canSendFiles = meeting.self.permissions.chatPublic.files;
+            this.canPrivateMessage = !!(((_a = meeting.self.permissions.chatPrivate) === null || _a === void 0 ? void 0 : _a.canSend) ||
+                ((_b = meeting.self.permissions.chatPrivate) === null || _b === void 0 ? void 0 : _b.canReceive));
+            this.canSendPrivateTexts = !!((_c = meeting.self.permissions.chatPrivate) === null || _c === void 0 ? void 0 : _c.text);
+            this.canSendPrivateFiles = !!((_d = meeting.self.permissions.chatPrivate) === null || _d === void 0 ? void 0 : _d.files);
+            meeting.self.permissions.on('*', this.chatPermissionUpdateListener);
+        }
+    }
+    getRecipientPeerIds() {
+        if (!this.selectedParticipant)
+            return [];
+        return [this.selectedParticipant.id];
+    }
+    renderComposerUI() {
+        if (!this.selectedParticipant) {
+            if (!this.canSendTextMessage && !this.canSendFiles)
+                return null;
+        }
+        else {
+            if (!this.canSendPrivateTexts && !this.canSendPrivateFiles)
+                return null;
+        }
+        const uiProps = { iconPack: this.iconPack, t: this.t, size: this.size };
+        const message = this.editingMessage ? this.editingMessage.message : '';
+        const quotedMessage = this.replyMessage ? this.replyMessage.message : '';
+        const draftStorageKey = 'rtk-chat-draft';
+        const editStorageKey = this.editingMessage
+            ? `rtk-chat-edit-${'no-channel'}-${this.editingMessage.id}`
+            : 'rtk-chat-edit';
+        const storageKey = this.editingMessage ? editStorageKey : draftStorageKey;
+        return (h("rtk-chat-composer-view", Object.assign({ message: message, storageKey: storageKey, quotedMessage: quotedMessage, isEditing: !!this.editingMessage, isSending: this.isSendingMessage, canSendTextMessage: this.isTextMessagingAllowed(), canSendFiles: this.isFileMessagingAllowed(), disableEmojiPicker: this.overrides.disableEmojiPicker, maxLength: this.meeting.chat.maxTextLimit, rateLimits: this.meeting.chat.rateLimits, inputTextPlaceholder: this.t('chat.message_placeholder'), onNewMessage: this.onNewMessageHandler, onEditMessage: this.onEditMessageHandler, onEditCancel: this.onEditCancel, onQuotedMessageDismiss: this.onQuotedMessageDismiss }, uiProps), h("slot", { name: "chat-addon", slot: "chat-addon" })));
+    }
+    render() {
+        if (!this.meeting) {
+            return null;
+        }
+        return (h(Host, null, h("div", { class: "chat-container" }, h("div", { class: "chat" }, this.isFileMessagingAllowed() && (h("div", { id: "dropzone", class: { active: this.dropzoneActivated }, part: "dropzone" }, h("rtk-icon", { icon: this.iconPack.attach }), h("p", null, this.t('chat.send_attachment')))), h("rtk-chat-header", null), h("rtk-chat-messages-ui-paginated", { meeting: this.meeting, privateChatRecipient: this.selectedParticipant, onPinMessage: this.onPinMessage, onEditMessage: this.onMessageEdit, onDeleteMessage: this.onDeleteMessage, size: this.size, iconPack: this.iconPack, t: this.t }), this.renderComposerUI()))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"]
+    }; }
+    static get style() { return RtkChatStyle0; }
+}, [1, "rtk-chat", {
+        "meeting": [16],
+        "config": [16],
+        "size": [513],
+        "iconPack": [16],
+        "t": [16],
+        "overrides": [16],
+        "canPinMessages": [32],
+        "now": [32],
+        "dropzoneActivated": [32],
+        "showLatestMessageButton": [32],
+        "canSend": [32],
+        "canSendTextMessage": [32],
+        "canSendFiles": [32],
+        "canPrivateMessage": [32],
+        "canSendPrivateTexts": [32],
+        "canSendPrivateFiles": [32],
+        "emojiPickerEnabled": [32],
+        "participants": [32],
+        "selectedParticipant": [32],
+        "editingMessage": [32],
+        "replyMessage": [32],
+        "searchQuery": [32],
+        "selectorState": [32],
+        "isSendingMessage": [32],
+        "showPinnedMessages": [32]
+    }, [[8, "editMessageInit", "onEditMessageInit"], [0, "rtkChatSelectorChange", "onChatSelectorChange"]], {
+        "meeting": ["meetingChanged"]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkChat.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkChat.prototype, "config", void 0);
+__decorate([
+    SyncWithStore()
+], RtkChat.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkChat.prototype, "t", void 0);
+__decorate([
+    SyncWithStore()
+], RtkChat.prototype, "overrides", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-chat", "rtk-avatar", "rtk-button", "rtk-chat-composer-view", "rtk-chat-header", "rtk-chat-messages-ui-paginated", "rtk-chat-selector", "rtk-draft-attachment-view", "rtk-emoji-picker", "rtk-emoji-picker-button", "rtk-file-message-view", "rtk-file-picker-button", "rtk-icon", "rtk-image-message-view", "rtk-markdown-view", "rtk-menu", "rtk-menu-item", "rtk-menu-list", "rtk-message-view", "rtk-paginated-list", "rtk-pinned-message-selector", "rtk-spinner", "rtk-text-composer-view", "rtk-text-message-view", "rtk-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-chat":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkChat);
+            }
+            break;
+        case "rtk-avatar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$o();
+            }
+            break;
+        case "rtk-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$n();
+            }
+            break;
+        case "rtk-chat-composer-view":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$m();
+            }
+            break;
+        case "rtk-chat-header":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$l();
+            }
+            break;
+        case "rtk-chat-messages-ui-paginated":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$k();
+            }
+            break;
+        case "rtk-chat-selector":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$j();
+            }
+            break;
+        case "rtk-draft-attachment-view":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$i();
+            }
+            break;
+        case "rtk-emoji-picker":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$h();
+            }
+            break;
+        case "rtk-emoji-picker-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
+        case "rtk-file-message-view":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
+            }
+            break;
+        case "rtk-file-picker-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "rtk-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "rtk-image-message-view":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "rtk-markdown-view":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "rtk-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "rtk-menu-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "rtk-menu-list":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "rtk-message-view":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "rtk-paginated-list":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "rtk-pinned-message-selector":
+            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 { RtkChat as R, defineCustomElement as d };