@cloudflare/realtimekit-ui 0.0.0 → 0.1.0

package/dist/esm/rtk-channel-selector-ui.entry.js

@@ -0,0 +1,143 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-c1fb98bb.js';
+import { a as defaultIconPack, c as useLanguage } from './ui-store-9e11a7e4.js';
+import { S as SyncWithStore } from './index-7c11af40.js';
+import { T as TextMessageView } from './TextMessage-276a0abf.js';
+import './chat-d85cc211.js';
+
+const rtkChannelSelectorUiCss = ".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}.container{display:flex;height:100%;width:var(--rtk-space-96, 384px);flex-direction:column;position:absolute;--tw-translate-x:calc(var(--rtk-space-96, 384px) * -1);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));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));border-top-width:var(--rtk-border-width-none, 0);border-bottom-width:var(--rtk-border-width-none, 0);border-right-width:var(--rtk-border-width-sm, 1px);border-left-width:var(--rtk-border-width-none, 0);border-style:solid;--tw-border-opacity:1;border-right-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-border-opacity));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}@keyframes fade{0%{opacity:0}100%{opacity:1}}.overlay-container{width:100vw;--tw-translate-x:var(--rtk-space-96, 384px);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));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));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;animation:fade 0.8s}.overlay-container .sidebar-btn{position:static;padding:var(--rtk-space-4, 16px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.sidebar-btn{position:absolute;right:calc(var(--rtk-space-9, 36px) * -1);top:var(--rtk-space-4, 16px);height:var(--rtk-space-8, 32px);width:var(--rtk-space-7, 28px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));border-radius:var(--rtk-border-radius-sm, 4px)}@media (orientation: landscape) and (min-width: 400px){.container{position:static;--tw-translate-x: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))}.sidebar-btn,.overlay-container{display:none}}.search-wrapper{display:flex;align-items:center;gap:var(--rtk-space-2, 8px);padding:var(--rtk-space-2, 8px);border-left-width:var(--rtk-border-width-none, 0);border-right-width:var(--rtk-border-width-none, 0);border-bottom-width:var(--rtk-border-width-sm, 1px);border-top-width:var(--rtk-border-width-none, 0);border-style:solid;--tw-border-opacity:1;border-bottom-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-border-opacity))}.search{position:sticky;box-sizing:border-box;display:flex;align-items:center;border-radius:var(--rtk-border-radius-sm, 4px);margin-top:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-0, 0px);height:var(--rtk-space-8, 32px);width:100%}.search .search-icon{height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px);padding:var(--rtk-space-2, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52));border-top-right-radius:var(--rtk-border-radius-sm, 4px);border-bottom-right-radius:var(--rtk-border-radius-sm, 4px)}.search input{box-sizing:border-box;width:100%;padding-top:var(--rtk-space-2, 8px);padding-bottom:var(--rtk-space-2, 8px);padding-left:var(--rtk-space-2, 8px);--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-1000, 255 255 255));border-width:var(--rtk-border-width-none, 0);border-style:none;outline:2px solid transparent;outline-offset:2px;font-size:14px;line-height:1.25rem}.search input::-moz-placeholder{color:rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76))}.search input::placeholder{color:rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76))}.search input{border-top-left-radius:var(--rtk-border-radius-sm, 4px);border-bottom-left-radius:var(--rtk-border-radius-sm, 4px)}.channel-container{box-sizing:border-box;display:flex;flex-direction:column;padding-top:var(--rtk-space-2, 8px);padding-bottom:var(--rtk-space-2, 8px);overflow-y:scroll}.channel-container .channel{display:flex;align-items:center;justify-content:space-between;gap:var(--rtk-space-2, 8px);padding:var(--rtk-space-0, 0px);border-left-width:var(--rtk-border-width-none, 0);border-right-width:var(--rtk-border-width-none, 0);border-bottom-width:var(--rtk-border-width-sm, 1px);border-top-width:var(--rtk-border-width-none, 0);border-style:solid;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-border-opacity))}.channel-container .channel:hover{cursor:pointer;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-900, var(--rtk-colors-text-900, 255 255 255 / 0.88)))}.channel-container .channel:hover .latest-msg-time,.channel-container .channel:hover .latest-msg,.channel-container .channel:hover .latest-msg.new{color:rgb(var(--rtk-colors-text-on-brand-700, var(--rtk-colors-text-700, 255 255 255 / 0.64)))}.channel-container .channel-display{display:flex;gap:var(--rtk-space-2, 8px);align-self:center;padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-0, 0px)}.channel-container .channel-display rtk-avatar{height:var(--rtk-space-9, 36px);width:var(--rtk-space-9, 36px);flex-shrink:0;font-size:12px}.channel-container .channel-display rtk-icon{height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px);flex-shrink:0;padding:var(--rtk-space-2, 8px);border-radius:9999px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.channel-container .channel-card{width:100%;padding-top:var(--rtk-space-2, 8px);padding-bottom:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px);padding-left:var(--rtk-space-1, 4px)}.channel-container .channel-card .channel-name{max-width:var(--rtk-space-60, 240px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:500}.channel-container .channel-card .latest-msg{margin:var(--rtk-space-0, 0px);max-width:var(--rtk-space-56, 224px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.channel-container .channel-card .latest-msg.new{font-weight:200;font-style:italic;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}.channel-container .channel-card .latest-msg-time{font-size:12px;color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}.channel-container .channel-meta{width:var(--rtk-space-12, 48px);display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:var(--rtk-space-1\\.5, 6px);font-size:12px;font-weight:600}.channel-container .new-msgs-count{height:var(--rtk-space-4, 16px);min-width:var(--rtk-space-4, 16px);padding-top:1px;padding-bottom:1px;padding-left:2px;padding-right:2px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-success, 98 165 4) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));border-radius:var(--rtk-border-radius-sm, 4px);text-align:center;font-size:12px}.channel-container .selected{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-900, var(--rtk-colors-text-900, 255 255 255 / 0.88)))}.channel-container .selected .latest-msg-time,.channel-container .selected .latest-msg,.channel-container .selected .latest-msg.new{color:rgb(var(--rtk-colors-text-on-brand-700, var(--rtk-colors-text-700, 255 255 255 / 0.64)))}.channel-container .highlight .channel-title span{font-weight:700}.latest-msg p{margin:var(--rtk-space-0, 0px);margin-right:var(--rtk-space-1, 4px);display:inline-block}.latest-msg blockquote{display:none}.recent-message-row{margin-bottom:var(--rtk-space-2, 8px);display:flex;width:100%;flex-direction:row;justify-content:space-between}";
+const RtkChannelSelectorUiStyle0 = rtkChannelSelectorUiCss;
+
+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 RtkChannelSelectorUi = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.channelChanged = createEvent(this, "channelChanged", 7);
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        /** show recent message in channel */
+        this.showRecentMessage = false;
+        this.isHidden = false;
+        this.searchQuery = '';
+        this.handleResize = (e) => {
+            this.isHidden = !e.matches;
+        };
+        this.channelSelected = (channelId) => {
+            this.channelChanged.emit(channelId);
+            this.onRevealClicked();
+        };
+        this.onSearchInput = (e) => {
+            this.searchQuery = e.target.value;
+        };
+        this.onRevealClicked = () => {
+            if (this.matchMedia.matches)
+                return;
+            this.isHidden = !this.isHidden;
+        };
+        this.renderChannelDisplayPic = (channel) => {
+            const hasDisplayPic = channel.displayPictureUrl && channel.displayPictureUrl.length !== 0;
+            if (channel.isDirectMessage || hasDisplayPic) {
+                return (h("div", { class: "channel-display" }, h("rtk-avatar", { participant: {
+                        name: channel.displayName,
+                        picture: channel.displayPictureUrl,
+                    } })));
+            }
+            else {
+                return (h("div", { class: "channel-display" }, h("rtk-icon", { icon: this.iconPack.people, slot: "start" })));
+            }
+        };
+        this.renderRecentMessage = (channel) => {
+            if (!channel.latestMessage)
+                return h("p", { class: "latest-msg new" }, this.t('chat.start_conversation'));
+            let senderFragment = channel.isDirectMessage ? '' : `${channel.latestMessage.displayName}: `;
+            if (channel.latestMessage.type === 'text') {
+                return (h("p", { class: "latest-msg" }, senderFragment, h(TextMessageView, { message: channel.latestMessage.message })));
+            }
+            // non text
+            let messageFragment = '';
+            if (channel.latestMessage.type === 'image') {
+                messageFragment = this.t('image');
+            }
+            else if (channel.latestMessage.type === 'file') {
+                messageFragment = this.t('file');
+            }
+            return h("p", { class: "latest-msg" }, `${senderFragment}${messageFragment}`);
+        };
+    }
+    connectedCallback() {
+        this.matchMedia = window.matchMedia(`(orientation: landscape) and (min-width: 400px)`);
+        this.matchMedia.addEventListener('change', this.handleResize);
+        this.isHidden = !this.matchMedia.matches;
+    }
+    disconnectedCallback() {
+        this.matchMedia.removeEventListener('change', this.handleResize);
+    }
+    componentDidRender() {
+        this.$el.style.transform = this.isHidden ? 'translateX(-380px)' : 'translateX(0)';
+    }
+    getTimeLabel(message) {
+        const messageDate = message.time;
+        const today = new Date();
+        const yesterday = new Date(today);
+        yesterday.setDate(today.getDate() - 1);
+        const firstDayOfWeek = new Date(today);
+        firstDayOfWeek.setDate(today.getDate() - today.getDay() - 1);
+        if (messageDate.toDateString() === today.toDateString()) {
+            return messageDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+        }
+        else if (messageDate.toDateString() === yesterday.toDateString()) {
+            return this.t('date.yesteday');
+        }
+        else if (messageDate > firstDayOfWeek) {
+            const weekdays = [
+                'date.sunday',
+                'date.monday',
+                'date.tuesday',
+                'date.wednesday',
+                'date.thursday',
+                'date.friday',
+                'date.saturday',
+            ];
+            return this.t(weekdays[messageDate.getDay()]);
+        }
+        else {
+            return Intl.DateTimeFormat([], {
+                day: '2-digit',
+                month: '2-digit',
+                year: '2-digit',
+            }).format(messageDate);
+        }
+    }
+    render() {
+        return (h(Host, { key: 'b6684ad536955380fd011a8db8ed74508ce5c4e2' }, h("div", { key: '0b9bd04166de85df7043026fe6f80d8980d09fd8', class: "container", ref: (el) => (this.$el = el) }, this.isHidden && (h("rtk-button", { key: '5b2af8c992ae39a097db0c6bcb79f73720c0baf6', kind: "icon", variant: "ghost", size: "md", onClick: this.onRevealClicked, class: "sidebar-btn" }, h("rtk-icon", { key: '0713628a2ab34e4c7dbc8bf15a760331e0a4501b', icon: this.isHidden ? this.iconPack.chevron_left : this.iconPack.dismiss }))), h("slot", { key: 'cba2cb4ec34adb4c852362af9aa6feef0c4f11b7', name: "header" }), h("div", { key: 'ca23085817b6b0ca7bcd7cbe87d5788bc3b091d6', class: "search-wrapper" }, h("div", { key: 'ac28f333fb7625024441c06039c86a651bf31a51', class: "search" }, h("input", { key: '34f1a069108d1610209bdc902afd40f168fd24a0', type: "search", autocomplete: "off", placeholder: this.t('chat.search_conversations'), onInput: this.onSearchInput }), h("rtk-icon", { key: '479b07ba42bbd7825e33f59efb4da26301553616', icon: this.iconPack.search, class: "search-icon" }))), h("div", { key: '4f97ff09587ab50ad957e6748ee31673f9097564', class: "channel-container scrollbar", role: "list" }, this.channels
+            .filter((channel) => this.searchQuery === '' || channel.displayName.includes(this.searchQuery))
+            .map((channel) => {
+            return (h("div", { class: {
+                    channel: true,
+                    selected: channel.id === this.selectedChannelId,
+                    highlight: !!channel.unreadCount,
+                }, role: "listitem", onClick: () => {
+                    this.channelSelected(channel.id);
+                } }, this.renderChannelDisplayPic(channel), h("div", { class: "channel-card", "is-direct-message": channel.isDirectMessage }, h("div", { class: 'recent-message-row' }, h("span", { class: "channel-name" }, channel.displayName), channel.latestMessage && (h("span", { class: "latest-msg-time" }, this.getTimeLabel(channel.latestMessage)))), h("div", { class: 'recent-message-row' }, this.renderRecentMessage(channel), channel.unreadCount > 0 && channel.id !== this.selectedChannelId ? (h("span", { class: "new-msgs-count" }, channel.unreadCount < 99 ? channel.unreadCount : '99+')) : null))));
+        }))), !this.isHidden && (h("div", { key: 'dbf1235ca2393f7978906cbbcd2530ea38801157', class: "overlay-container" }, h("rtk-button", { key: 'd2a37c163f32a251597ee8dd1332c48bacad1883', kind: "icon", variant: "ghost", size: "md", onClick: this.onRevealClicked, class: "sidebar-btn" }, h("rtk-icon", { key: 'a13daad18a52bd8846dba2bbeab753d0a060463e', icon: this.isHidden ? this.iconPack.chevron_left : this.iconPack.dismiss }))))));
+    }
+};
+__decorate([
+    SyncWithStore()
+], RtkChannelSelectorUi.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkChannelSelectorUi.prototype, "t", void 0);
+RtkChannelSelectorUi.style = RtkChannelSelectorUiStyle0;
+
+export { RtkChannelSelectorUi as rtk_channel_selector_ui };

package/dist/esm/rtk-chat-composer-ui.entry.js

@@ -0,0 +1,311 @@
+import { r as registerInstance, c as createEvent, w as writeTask, h, H as Host } from './index-c1fb98bb.js';
+import { a as defaultIconPack, c as useLanguage, k as gracefulStorage } from './ui-store-9e11a7e4.js';
+import { r as reverse, h as handleFilesDataTransfer, k as replyBlockPattern, j as extractReplyBlock, s as stripOutReplyBlock, M as MAX_TEXT_LENGTH } from './chat-d85cc211.js';
+import { S as SyncWithStore } from './index-7c11af40.js';
+
+const rtkChatComposerUiCss = ":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;flex-direction:column;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity))}.chat-input{position:relative;margin:var(--rtk-space-2, 8px);z-index:10;box-sizing:border-box;display:flex;flex-direction:column;border-radius:var(--rtk-border-radius-md, 8px);border:var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60))}textarea{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));box-sizing:border-box;padding:var(--rtk-space-3, 12px);color:rgb(var(--rtk-colors-text-1000, 255 255 255))}textarea::-moz-placeholder{color:rgb(var(--rtk-colors-text-1000, 255 255 255))}textarea::placeholder{color:rgb(var(--rtk-colors-text-1000, 255 255 255))}textarea{border-top-left-radius:var(--rtk-border-radius-md, 8px);border-top-right-radius:var(--rtk-border-radius-md, 8px);font-family:var(--rtk-font-family, sans-serif);outline:2px solid transparent;outline-offset:2px;resize:none;overflow-y:auto;border-width:var(--rtk-border-width-none, 0);border-style:none;min-height:60px;font-size:14px}.chat-buttons{border-bottom-right-radius:var(--rtk-border-radius-md, 8px);border-bottom-left-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));display:flex;height:var(--rtk-space-8, 32px);align-items:center;justify-content:space-between;padding-left:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-3, 12px);padding-top:var(--rtk-space-2, 8px);padding-bottom:var(--rtk-space-2, 8px)}.chat-buttons .left rtk-button{margin-right:var(--rtk-space-1, 4px)}.chat-buttons .left rtk-button rtk-icon{height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px)}.chat-buttons .right{z-index:10}.chat-buttons .right .edit-buttons{display:flex;gap:var(--rtk-space-2, 8px)}.chat-buttons>div{display:flex;align-items:center}rtk-emoji-picker{z-index:0;position:absolute;bottom:var(--rtk-space-32, 128px);border-top:var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60));animation:0.3s slide-up ease}@keyframes slide-up{from{transform:translateY(100%)}to{transform:translateY(0%)}}.member-list{margin:var(--rtk-space-0, 0px);margin-top:var(--rtk-space-1, 4px);max-height:var(--rtk-space-28, 112px);min-width:var(--rtk-space-40, 160px);max-width:var(--rtk-space-64, 256px);padding:var(--rtk-space-0, 0px);position:absolute;bottom:var(--rtk-space-28, 112px);list-style-type:none;overflow-y:auto;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));border-radius:var(--rtk-border-radius-sm, 4px);--tw-border-spacing-x:var(--rtk-space-2, 8px);--tw-border-spacing-y:var(--rtk-space-2, 8px);border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y);border-style:solid;border-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / 0.5)}.member-list .member{display:flex;align-items:center;gap:var(--rtk-space-1, 4px);padding:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-4, 16px);cursor:pointer}.member-list .member rtk-avatar{flex-shrink:0;height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px);font-size:14px;color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.member-list .member span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.member-list .member:hover,.member-list .member.selected{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-700, 2 70 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.suggested-replies{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-3, 12px);display:flex;flex-wrap:nowrap;gap:var(--rtk-space-2, 8px);list-style-type:none;overflow-x:auto}.suggested-replies rtk-tooltip{flex-shrink:0}.suggested-replies li{padding:var(--rtk-space-2, 8px);border-radius:var(--rtk-border-radius-md, 8px);background-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / 0.75);color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));cursor:pointer}.suggested-replies li:hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-bg-opacity))}.preview-overlay{position:absolute;top:var(--rtk-space-0, 0px);right:var(--rtk-space-0, 0px);bottom:var(--rtk-space-0, 0px);left:var(--rtk-space-0, 0px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));border-radius:var(--rtk-border-radius-md, 8px)}.file-preview{position:absolute;top:var(--rtk-space-4, 16px);left:var(--rtk-space-4, 16px);max-width:-moz-fit-content;max-width:fit-content;max-height:var(--rtk-space-20, 80px)}.file-preview:hover rtk-tooltip{display:block}.file-preview rtk-tooltip{position:absolute;top:calc(var(--rtk-space-1, 4px) * -1);left:calc(var(--rtk-space-1, 4px) * -1);display:none;margin-left:calc(var(--rtk-space-1, 4px) * -1);margin-top:calc(var(--rtk-space-1, 4px) * -1)}.file-preview rtk-button{display:flex;height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));border:1px solid rgb(var(--rtk-colors-text-1000, 255 255 255))}.file-preview rtk-icon{height:var(--rtk-space-3, 12px);width:var(--rtk-space-3, 12px);color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.preview-image{height:var(--rtk-space-16, 64px);width:var(--rtk-space-16, 64px);-o-object-fit:cover;object-fit:cover;max-height:100%;max-width:100%;overflow:clip;border-radius:var(--rtk-border-radius-md, 8px)}.preview-file{padding-left:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-3, 12px);padding-top:var(--rtk-space-2, 8px);padding-bottom:var(--rtk-space-2, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--rtk-border-radius-md, 8px);max-width:200px}@keyframes scroll-text{0%{transform:translateX(0%)}70%{transform:translateX(-100%)}80%{transform:translateX(0%)}100%{transform:translateX(0%)}}";
+const RtkChatComposerUiStyle0 = rtkChatComposerUiCss;
+
+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 MENTION_CHAR = '@';
+const RtkChatComposerUi = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.onNewMessage = createEvent(this, "rtkNewMessage", 7);
+        this.onEditMessage = createEvent(this, "rtkEditMessage", 7);
+        this.onEditCancelled = createEvent(this, "rtkEditCancelled", 7);
+        /** Whether user can send text messages */
+        this.canSendTextMessage = false;
+        /** Whether user can send file messages */
+        this.canSendFiles = false;
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        /** Whether to show emoji picker */
+        this.disableEmojiPicker = false;
+        /** prefill the composer */
+        this.prefill = {};
+        /** list of members that can be mentioned */
+        this.members = [];
+        this.emojiPickerActive = false;
+        this.mentionQuery = '';
+        this.focusedMemberIndex = 0;
+        this.filePreview = null;
+        this.fileReader = new FileReader();
+        this.fileToUpload = null;
+        this.handleKeyDown = (e) => {
+            if (e.key === MENTION_CHAR && [undefined, ' '].includes(this.$textArea.value.at(-1))) {
+                // [undefined, ' '] checks if mention is start of text or start of new word
+                this.mentionQuery = MENTION_CHAR;
+            }
+            if (e.key === 'ArrowDown') {
+                this.focusedMemberIndex = Math.min(this.focusedMemberIndex + 1, this.getFilteredMembers().length - 1);
+            }
+            if (e.key === 'ArrowUp') {
+                this.focusedMemberIndex = Math.max(0, this.focusedMemberIndex - 1);
+            }
+            if (e.key === 'Escape' || (e.key === 'Backspace' && this.mentionQuery === MENTION_CHAR)) {
+                this.mentionQuery = '';
+            }
+            if (['Enter', 'Tab', ' '].includes(e.key) && this.mentionQuery !== '') {
+                const member = this.getFilteredMembers()[this.focusedMemberIndex];
+                this.onMemberSelect(member);
+                e.preventDefault();
+                return;
+            }
+            // slack like typing experience
+            if (e.key === 'Enter' && e.shiftKey) {
+                const height = this.$textArea.clientHeight;
+                if (height < 200) {
+                    this.$textArea.style.height = this.$textArea.clientHeight + 20 + 'px';
+                }
+            }
+            else if (e.key === 'Enter') {
+                e.preventDefault();
+                if (this.prefill.editMessage) {
+                    this.handleEditMessage();
+                }
+                else {
+                    this.handleSendMessage();
+                }
+            }
+            else if (e.key === 'Backspace') {
+                if (this.$textArea.value.endsWith('\n')) {
+                    this.$textArea.style.height = this.$textArea.clientHeight - 20 + 'px';
+                }
+                else if (this.$textArea.value === '') {
+                    this.$textArea.style.height = 'auto';
+                }
+            }
+        };
+        this.handleKeyUp = (_e) => {
+            if (this.mentionQuery !== '') {
+                const reversed = reverse(this.$textArea.value.trim());
+                const query = reversed.substring(0, reversed.indexOf(MENTION_CHAR));
+                this.mentionQuery = `${MENTION_CHAR}${reverse(query)}`;
+            }
+        };
+        this.onPaste = (e) => {
+            const data = e.clipboardData || e.originalEvent.clipboardData;
+            writeTask(() => {
+                if (data && data.items && data.items.length > 0) {
+                    handleFilesDataTransfer(data.items, this.generateFilePreview);
+                    this.$textArea.value = '';
+                }
+            });
+        };
+        this.generateFilePreview = (type, file) => {
+            this.fileToUpload = { type, image: file, file };
+            if (type === 'image') {
+                this.fileReader.readAsDataURL(file);
+            }
+            else if (type === 'file') {
+                this.filePreview = file.name;
+            }
+        };
+        this.sendFile = () => {
+            if (!this.canSendFiles) {
+                return;
+            }
+            if (this.fileToUpload.type === 'image') {
+                this.onNewMessage.emit({
+                    type: 'image',
+                    file: this.fileToUpload.image,
+                    image: this.fileToUpload.image,
+                });
+            }
+            else {
+                this.onNewMessage.emit({ type: 'file', file: this.fileToUpload.file });
+            }
+            this.cleanUpFileUpload();
+        };
+        this.handleSendMessage = () => {
+            if (!this.canSendTextMessage) {
+                return;
+            }
+            if (this.fileToUpload !== null) {
+                this.sendFile();
+                return;
+            }
+            const message = this.$textArea.value.trim();
+            if (message.length > 0) {
+                if (this.prefill.replyMessage) {
+                    this.onNewMessage.emit({
+                        type: 'text',
+                        message,
+                        replyTo: this.prefill.replyMessage,
+                    });
+                }
+                else {
+                    this.onNewMessage.emit({ type: 'text', message });
+                }
+                this.cleanup();
+            }
+        };
+        this.cleanup = () => {
+            this.mentionQuery = '';
+            this.focusedMemberIndex = 0;
+            this.$textArea.value = '';
+            this.$textArea.style.height = 'auto';
+            gracefulStorage.setItem(this.storageKey, '');
+        };
+        this.handleEditMessage = () => {
+            var _a;
+            let editedMessage = this.$textArea.value.trim();
+            if (((_a = this.prefill.editMessage) === null || _a === void 0 ? void 0 : _a.message) &&
+                replyBlockPattern.test(this.prefill.editMessage.message)) {
+                // add back the reply block which we stripped out for editing
+                const replyBlock = extractReplyBlock(this.prefill.editMessage.message);
+                editedMessage = `${replyBlock}\n\n${editedMessage}`;
+            }
+            this.onEditMessage.emit({
+                id: this.prefill.editMessage.id,
+                message: editedMessage,
+                channelId: this.prefill.editMessage.channelId,
+            });
+            this.cleanup();
+        };
+        this.handleEditCancel = () => {
+            this.onEditCancelled.emit();
+            this.cleanup();
+        };
+        this.initializeTextField = (el) => {
+            this.$textArea = el;
+            const message = gracefulStorage.getItem(this.storageKey) || '';
+            this.$textArea.value = message;
+        };
+        this.onMemberSelect = (member) => {
+            const reversedQuery = reverse(this.mentionQuery);
+            const reversed = reverse(this.$textArea.value.trim()).replace(reversedQuery, '');
+            this.$textArea.value = reverse(reversed) + `${MENTION_CHAR}${member.name} `;
+            this.mentionQuery = '';
+            this.focusedMemberIndex = 0;
+            writeTask(() => this.$textArea.focus());
+        };
+        this.getFilteredMembers = () => {
+            const query = this.mentionQuery.replace(MENTION_CHAR, '');
+            return this.members.filter((member) => member.name.toLowerCase().includes(query.toLowerCase()));
+        };
+        this.cleanUpFileUpload = () => {
+            this.filePreview = null;
+            this.fileToUpload = null;
+        };
+        this.renderSuggestedReplies = () => {
+            if (!this.prefill.suggestedReplies)
+                return;
+            if (this.prefill.suggestedReplies.length === 0)
+                return;
+            return (h("ul", { class: "suggested-replies scrollbar" }, this.prefill.suggestedReplies.map((reply) => (h("rtk-tooltip", { label: this.t('chat.click_to_send') }, h("li", { onClick: () => this.onNewMessage.emit({ type: 'text', message: reply }) }, reply))))));
+        };
+        this.renderMenu = () => {
+            if (this.mentionQuery.length === 0)
+                return;
+            const filteredMembers = this.getFilteredMembers();
+            if (filteredMembers.length === 0)
+                return;
+            return (h("ul", { class: "member-list scrollbar" }, filteredMembers.map((member, index) => (h("li", { class: { member: true, selected: index === this.focusedMemberIndex }, onClick: () => this.onMemberSelect(member), ref: ($li) => {
+                    if (index === this.focusedMemberIndex) {
+                        writeTask(() => {
+                            if ($li)
+                                $li.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'nearest' });
+                        });
+                    }
+                } }, h("rtk-avatar", { participant: {
+                    name: member.name,
+                    picture: member.picture,
+                }, size: "sm" }), h("span", null, member.name))))));
+        };
+    }
+    connectedCallback() {
+        this.fileReader.onload = (e) => {
+            if (typeof e.target.result === 'string') {
+                this.filePreview = e.target.result;
+            }
+        };
+        // this.fileReader.onloadstart = () => {};
+        // this.fileReader.onloadend = () => {};
+    }
+    onChannelChanged() {
+        this.mentionQuery = '';
+        this.focusedMemberIndex = 0;
+        const message = gracefulStorage.getItem(this.storageKey) || '';
+        this.$textArea.value = message;
+        this.emojiPickerActive = false;
+    }
+    componentDidRender() {
+        if (this.prefill.editMessage || this.prefill.replyMessage) {
+            writeTask(() => this.$textArea.focus());
+        }
+    }
+    get storageKey() {
+        if (this.channelId) {
+            return `rtk-text-message-${this.channelId}`;
+        }
+        return 'rtk-text-message';
+    }
+    uploadFile(type) {
+        const input = document.createElement('input');
+        input.type = 'file';
+        if (type === 'image') {
+            input.accept = 'image/*';
+        }
+        input.onchange = (e) => {
+            const { validity, files: [file], } = e.target;
+            if (validity.valid) {
+                this.generateFilePreview(type, file);
+            }
+        };
+        input.click();
+    }
+    renderFilePreview() {
+        if (typeof this.filePreview !== 'string')
+            return;
+        return (h("div", { class: "preview-overlay" }, h("div", { class: "file-preview" }, h("rtk-tooltip", { label: this.t('chat.cancel_upload') }, h("rtk-button", { variant: "secondary", kind: "icon", onClick: this.cleanUpFileUpload }, h("rtk-icon", { icon: this.iconPack.dismiss }))), this.fileToUpload.type === 'image' ? (h("img", { class: "preview-image", src: this.filePreview })) : (h("div", { class: "preview-file" }, h("span", null, this.filePreview))))));
+    }
+    render() {
+        var _a;
+        let defaultValue = '';
+        if ((_a = this.prefill.editMessage) === null || _a === void 0 ? void 0 : _a.message) {
+            defaultValue = stripOutReplyBlock(this.prefill.editMessage.message);
+        }
+        return (h(Host, { key: '8f0ee810fac56aa1c62254d3d8a997941475bb3a' }, this.canSendTextMessage && this.emojiPickerActive && (h("rtk-emoji-picker", { key: '368bdbbe0e995aafd13e70d12f62b59979a5691b', part: "emoji-picker", onPickerClose: () => {
+                this.emojiPickerActive = false;
+            }, onRtkEmojiClicked: (e) => {
+                this.$textArea.value += e.detail;
+                this.$textArea.focus();
+            }, t: this.t })), this.renderSuggestedReplies(), h("slot", { key: '166872db8c0b07d2ec2e407de0fddfce7f3d4969', name: "chat-addon" }), h("slot", { key: 'b383df2de3320e69fe2cb35a22296d1ee53b08df', name: "quote-block" }), h("div", { key: '89d5fdf625bf212acda92276e9ec10b60b55a179', class: "chat-input", part: "chat-input" }, this.renderMenu(), this.canSendTextMessage && (h("textarea", { key: '55192f10820a161189d42b6150819be6a346d1e9', class: "scrollbar", part: "textarea", ref: this.initializeTextField, autoFocus: true, placeholder: this.fileToUpload ? '' : this.t('chat.message_placeholder'), value: defaultValue, onPaste: this.onPaste, maxLength: MAX_TEXT_LENGTH, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, onInput: (e) => {
+                gracefulStorage.setItem(this.storageKey, e.target.value);
+            }, disabled: !!this.filePreview })), h("div", { key: '6c3a94c43257041fdeed496c7bd8b57ce4be6510', class: "chat-buttons", part: "chat-buttons" }, h("div", { key: '76e6f7923484ee6a58359b6554e5e51009bc317f', class: "left", part: "chat-buttons-left" }, !this.prefill.editMessage &&
+            this.canSendFiles && [
+            h("rtk-tooltip", { key: 'dbc04471a85d1fe2987c7d18dd0781e61f85fa35', label: this.t('chat.send_file') }, h("rtk-button", { key: 'cb54c65b81559d4a00a316aacf2f4bb368f30799', variant: "ghost", kind: "icon", onClick: () => this.uploadFile('file'), title: this.t('chat.send_file') }, h("rtk-icon", { key: 'd3c542b0b1260ac305de3cfd5fbf5396f18d1f0e', icon: this.iconPack.attach }))),
+            h("rtk-tooltip", { key: '6aac421a0d9149fd6c188bcce25bf4152cb8c0dd', label: this.t('chat.send_img') }, h("rtk-button", { key: '5460407db51e83ab379bb8ade5af7d87bd04b64d', variant: "ghost", kind: "icon", onClick: () => this.uploadFile('image'), title: this.t('chat.send_img') }, h("rtk-icon", { key: '3f8732882dc03b5ddf23c59bdbe96329e551b070', icon: this.iconPack.image }))),
+        ], !this.prefill.editMessage && this.canSendTextMessage && !this.disableEmojiPicker && (h("rtk-tooltip", { key: '8d032069a031d6a3b3e4847953a8e027eb5b3400', label: this.t('chat.send_emoji') }, h("rtk-button", { key: 'b96b0791ac68f142408f269354bde5385c08a4da', variant: "ghost", kind: "icon", class: { active: this.emojiPickerActive }, title: this.t('chat.send_emoji'), onClick: () => {
+                this.emojiPickerActive = !this.emojiPickerActive;
+            } }, h("rtk-icon", { key: 'cd9ac09500ed1151dad94ed285db35bea6260ed8', icon: this.iconPack.emoji_multiple }))))), !!this.filePreview && this.renderFilePreview(), this.canSendTextMessage && (h("div", { key: '43b9f9232a7476b5600519fb3517d6342143d76f', class: "right", part: "chat-buttons-right" }, !this.prefill.editMessage && (h("rtk-tooltip", { key: 'ec757e58571a0ff2e4ab9b1006ab388b334a77d3', variant: "primary", label: this.t('chat.send_msg'), delay: 2000 }, h("rtk-button", { key: '054e7b52bfcfe852ca53ce96c6b498585924e616', kind: "icon", onClick: () => this.handleSendMessage(), title: this.t('chat.send_msg') }, h("rtk-icon", { key: 'd085d0aae594a8e08f29d200e4cb0818c0eabdfd', icon: this.iconPack.send })))), this.prefill.editMessage && (h("div", { key: '7926d7cf394a7989d2fbae97c1ab5a974834b431', class: "edit-buttons" }, h("rtk-tooltip", { key: '66029024ca595880cc72fdb28999f8380a8a37fc', variant: "secondary", label: this.t('cancel'), delay: 2000 }, h("rtk-button", { key: 'cba0e1460d33a0b20593009acc588ba4e385d782', kind: "icon", variant: "secondary", onClick: () => this.handleEditCancel(), title: this.t('cancel') }, h("rtk-icon", { key: '2155257dea8a5660b6b2d9d9510da153192be16e', icon: this.iconPack.dismiss }))), h("rtk-tooltip", { key: 'b296276e6f08c128ec3ba3cc292f6637e3550a34', variant: "primary", label: this.t('chat.update_msg'), delay: 2000 }, h("rtk-button", { key: 'e3c50822510811d254f3e8d65ed967b70be97037', kind: "icon", onClick: () => this.handleEditMessage(), title: this.t('chat.send_msg') }, h("rtk-icon", { key: '016e23547285b95c2545784d627a37fb8c6359d5', icon: this.iconPack.checkmark })))))))))));
+    }
+    static get watchers() { return {
+        "channelId": ["onChannelChanged"]
+    }; }
+};
+__decorate([
+    SyncWithStore()
+], RtkChatComposerUi.prototype, "size", void 0);
+__decorate([
+    SyncWithStore()
+], RtkChatComposerUi.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkChatComposerUi.prototype, "t", void 0);
+RtkChatComposerUi.style = RtkChatComposerUiStyle0;
+
+export { RtkChatComposerUi as rtk_chat_composer_ui };

package/dist/esm/rtk-chat-selector-ui.entry.js

@@ -0,0 +1,74 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-c1fb98bb.js';
+import { a as defaultIconPack, c as useLanguage } from './ui-store-9e11a7e4.js';
+import { g as generateChatGroupKey } from './chat-d85cc211.js';
+import { S as SyncWithStore } from './index-7c11af40.js';
+
+const rtkChatSelectorUiCss = ":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;flex-direction:column}.chat-scope-selector{position:relative;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));z-index:10}.chat-scope-selector button{width:100%;border-width:var(--rtk-border-width-none, 0);border-style:none;padding:var(--rtk-space-4, 16px);display:flex;align-items:center;justify-content:space-between;--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-1000, 255 255 255));font-size:14px;cursor:pointer;height:var(--rtk-space-12, 48px)}.chat-scope-selector button span{display:flex;align-items:center;justify-content:flex-start}.chat-scope-selector button rtk-icon{height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px)}.chat-scope-selector .search{position:sticky;box-sizing:border-box;display:flex;align-items:center;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));margin-left:var(--rtk-space-3, 12px);margin-right:var(--rtk-space-3, 12px);margin-top:var(--rtk-space-3, 12px);margin-bottom:var(--rtk-space-0, 0px)}.chat-scope-selector .search rtk-icon{margin-left:var(--rtk-space-2, 8px);margin-right:var(--rtk-space-2, 8px);height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px);color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52))}.chat-scope-selector .search input{box-sizing:border-box;height:var(--rtk-space-9, 36px);width:100%;padding-right:var(--rtk-space-2, 8px);border-width:var(--rtk-border-width-none, 0);border-style:none;--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-1000, 255 255 255));outline:2px solid transparent;outline-offset:2px;border-radius:var(--rtk-border-radius-sm, 4px);font-size:14px}.chat-scope-selector .search input::-moz-placeholder{color:rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76))}.chat-scope-selector .search input::placeholder{color:rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76))}.chat-scope-selector .participants-container{position:absolute;width:100%;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));top:var(--rtk-space-12, 48px);animation:0.3s slide-down ease}@keyframes slide-down{from{transform:translateY(-50px)}to{transform:translateY(0%)}}.chat-scope-selector .scope-list{margin-top:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-0, 0px);list-style-type:none;padding-left:var(--rtk-space-0, 0px);padding-right:var(--rtk-space-0, 0px);overflow:auto;max-height:375px}.chat-scope-selector .scope-list .scope{position:relative;display:flex;flex-direction:row;align-items:center;padding-left:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-3, 12px);padding-top:var(--rtk-space-4, 16px);padding-bottom:var(--rtk-space-4, 16px)}.chat-scope-selector .scope-list .scope:hover{cursor:pointer;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity))}.chat-scope-selector .scope-list .scope-special{margin-top:var(--rtk-space-4, 16px);--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-text-opacity))}.chat-scope-selector .scope-list .everyone-icon>rtk-icon{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px);color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.chat-scope-selector .scope-list .everyone-icon{display:flex;height:100%;width:100%;align-items:center;justify-content:center;margin-right:var(--rtk-space-2, 8px);height:var(--rtk-space-8, 32px);width:var(--rtk-space-8, 32px);border-radius:9999px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));font-size:12px}.unread-count.selector{position:unset;margin-left:var(--rtk-space-2, 8px)}.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}rtk-avatar{height:var(--rtk-space-8, 32px);width:var(--rtk-space-8, 32px)}";
+const RtkChatSelectorUiStyle0 = rtkChatSelectorUiCss;
+
+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 RtkChatSelectorUi = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.groupChanged = createEvent(this, "rtkChatGroupChanged", 7);
+        /** Unread counts */
+        this.unreadCounts = {};
+        /** Participants */
+        this.groups = [];
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        this.showParticipantsPanel = false;
+        this.query = '';
+        this.onScopeClick = (scope) => {
+            this.showParticipantsPanel = false;
+            this.groupChanged.emit(scope);
+        };
+    }
+    toggleParticipants() {
+        this.showParticipantsPanel = !this.showParticipantsPanel;
+    }
+    getGroups() {
+        return this.groups.filter((participant) => participant.name.toLowerCase().includes(this.query.toLowerCase()));
+    }
+    getName() {
+        if (!this.selectedGroupId || this.selectedGroupId === 'everyone') {
+            return this.t('everyone');
+        }
+        const group = this.groups.find((g) => g.userId === this.selectedGroupId);
+        if (group) {
+            return group.name;
+        }
+        return this.t('everyone');
+    }
+    render() {
+        const unreadCountTotal = Object.keys(this.unreadCounts).reduce((total, key) => {
+            return total + this.unreadCounts[key];
+        }, 0);
+        return (h(Host, null, h("div", { class: "chat-scope-selector" }, this.showParticipantsPanel && (h("div", { class: "participants-container" }, h("div", { class: "search", part: "search" }, h("rtk-icon", { icon: this.iconPack.search, part: "search-icon" }), h("input", { type: "search", autocomplete: "off", placeholder: this.t('search'), value: this.query, onInput: (e) => {
+                this.query = e.target.value;
+            }, part: "search-input" })), h("ul", { class: "scope-list scrollbar" }, this.query === '' && (h("li", { class: "scope scope-special", onClick: () => this.onScopeClick('everyone') }, h("div", { class: "everyone-icon" }, h("rtk-icon", { icon: this.iconPack.participants })), this.t('everyone'), this.unreadCounts['everyone'] > 0 && (h("div", { class: "unread-count", part: "unread-count" }, h("span", null, this.unreadCounts['everyone']))))), this.getGroups().map((group) => {
+            const count = this.unreadCounts[generateChatGroupKey([this.selfUserId, group.userId])];
+            return (h("li", { class: "scope", onClick: () => this.onScopeClick(group), key: group.userId }, group.name, count > 0 && (h("div", { class: "unread-count", part: "unread-count" }, h("span", null, count)))));
+        })))), h("button", { onClick: () => this.toggleParticipants() }, h("span", null, `${this.t('to')} ${this.getName()}`, '  ', unreadCountTotal > 0 && (h("div", { class: "unread-count selector" }, h("span", null, unreadCountTotal)))), h("rtk-icon", { icon: this.showParticipantsPanel ? this.iconPack.chevron_up : this.iconPack.chevron_down })))));
+    }
+};
+__decorate([
+    SyncWithStore()
+], RtkChatSelectorUi.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkChatSelectorUi.prototype, "t", void 0);
+RtkChatSelectorUi.style = RtkChatSelectorUiStyle0;
+
+export { RtkChatSelectorUi as rtk_chat_selector_ui };