@cloudflare/realtimekit-ui 1.0.9-staging.2 → 1.0.9-staging.4

package/dist/cjs/rtk-channel-creator.cjs.entry.js

@@ -0,0 +1,163 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-05554ce6.js');
+const uiStore = require('./ui-store-1cb28da8.js');
+const index = require('./index-8d07e125.js');
+
+const rtkChannelCreatorCss = ":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{border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));display:flex;flex-direction:column;width:var(--rtk-space-96, 384px);padding-left:var(--rtk-space-9, 36px);padding-right:var(--rtk-space-9, 36px);padding-top:var(--rtk-space-10, 40px);padding-bottom:var(--rtk-space-10, 40px)}header{margin-bottom:var(--rtk-space-8, 32px);display:flex;align-items:center;gap:var(--rtk-space-2, 8px);font-size:24px;font-weight:600}.channel-name-input{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255));border-radius:var(--rtk-border-radius-sm, 4px);border-width:var(--rtk-border-width-none, 0);border-style:none;padding:var(--rtk-space-3, 12px);font-size:16px;-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:1.25;outline:2px solid transparent;outline-offset:2px}.channel-name-input:focus{outline-width:2px;outline-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / 0.5)}footer{margin-top:var(--rtk-space-5, 20px);display:flex;justify-content:flex-end}.member{display:flex;align-items:center;gap:var(--rtk-space-1, 4px);padding:var(--rtk-space-2, 8px)}.member rtk-avatar{height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px);font-size:14px;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.input-container{position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:1.25;outline:2px solid transparent;outline-offset:2px;outline-width:2px;outline-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / 0.5);border-radius:var(--rtk-border-radius-sm, 4px)}.input-container .members{margin:var(--rtk-space-0, 0px);max-height:var(--rtk-space-28, 112px);border-radius:var(--rtk-border-radius-sm, 4px);padding:var(--rtk-space-2, 8px);list-style-type:none;display:flex;flex-wrap:wrap;gap:var(--rtk-space-1, 4px);cursor:text;font-size:16px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));overflow-y:auto;min-height:var(--rtk-space-7, 28px)}.input-container .pill{display:flex;align-items:center;gap:var(--rtk-space-1, 4px);border-radius:var(--rtk-border-radius-sm, 4px);padding:var(--rtk-space-2, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}.input-container .pill rtk-avatar{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)))}.input-container .pill span{max-width:var(--rtk-space-32, 128px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.input-container .pill rtk-icon{height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);cursor:pointer}.input-container input{width:var(--rtk-space-24, 96px);border-radius:var(--rtk-border-radius-sm, 4px);border-width:var(--rtk-border-width-none, 0);border-style:none;padding:var(--rtk-space-1, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255));outline:2px solid transparent;outline-offset:2px;font-size:16px;line-height:1.25rem}.input-container input.wide-input{width:100%}.search-results{margin:var(--rtk-space-0, 0px);margin-top:var(--rtk-space-1, 4px);max-height:var(--rtk-space-28, 112px);width:100%;padding:var(--rtk-space-0, 0px);position:absolute;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-md, 8px);--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)}.search-results .member{cursor:pointer}.search-results .member rtk-avatar{color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.search-results .member:hover,.search-results .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)))}";
+const RtkChannelCreatorStyle0 = rtkChannelCreatorCss;
+
+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 RtkChannelCreator = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        this.stateUpdate = index$1.createEvent(this, "rtkStateUpdate", 7);
+        this.switchChannel = index$1.createEvent(this, "switchChannel", 7);
+        /** Language */
+        this.t = uiStore.useLanguage();
+        /** Icon pack */
+        this.iconPack = uiStore.defaultIconPack;
+        this.channelName = '';
+        this.searchQuery = '';
+        this.step = 1;
+        this.loading = false;
+        this.selectedMemberIds = new Set();
+        this.focusedMemberIndex = -1;
+        this.showAllMembersList = false;
+        this.allMembers = new Map();
+        this.inputTextRef = null;
+        this.searchInputTextRef = null;
+        this.focusOnSearch = (selectText = false) => {
+            this.focusedMemberIndex = -1;
+            index$1.writeTask(() => {
+                var _a, _b;
+                (_a = this.searchInputTextRef) === null || _a === void 0 ? void 0 : _a.focus();
+                if (selectText)
+                    (_b = this.searchInputTextRef) === null || _b === void 0 ? void 0 : _b.select();
+            });
+        };
+        this.onClickHandler = async () => {
+            if (this.channelName.length === 0)
+                return;
+            if (this.step === 1) {
+                const members = this.meeting.participants.all.toArray();
+                const selfId = this.meeting.self.userId;
+                const nonSelfMembers = members.filter((member) => member.userId !== selfId);
+                nonSelfMembers.forEach((member) => this.allMembers.set(member.userId, member));
+                this.step = 2;
+                this.focusOnSearch();
+                return;
+            }
+            // step 2 - add members and create channel
+            await this.createChannel();
+        };
+        this.createChannel = async () => {
+            const members = Array.from(this.selectedMemberIds);
+            const newChannel = await this.meeting.chat.createChannel(this.channelName, members, {
+                displayPictureUrl: '',
+                visibility: 'public',
+                isDirectMessage: false,
+            });
+            this.switchChannel.emit(newChannel.id);
+            this.stateUpdate.emit({ activeChannelCreator: false });
+        };
+        this.onMemberAdd = (id) => {
+            this.showAllMembersList = false;
+            this.selectedMemberIds.add(id);
+            this.searchQuery = '';
+            this.focusOnSearch();
+        };
+        this.keyDownHandler = (e, filteredMembers) => {
+            if (e.key === 'ArrowDown') {
+                this.focusedMemberIndex = Math.min(this.focusedMemberIndex + 1, filteredMembers.length - 1);
+            }
+            else if (e.key === 'ArrowUp') {
+                if (this.focusedMemberIndex === -1)
+                    return;
+                if (this.focusedMemberIndex === 0) {
+                    this.focusOnSearch(true);
+                    return;
+                }
+                this.focusedMemberIndex = Math.max(this.focusedMemberIndex - 1, 0);
+            }
+            else if (e.key === 'Enter') {
+                this.onMemberAdd(filteredMembers[this.focusedMemberIndex].userId);
+            }
+            else if (e.key === 'Backspace') {
+                if (this.searchQuery.length !== 0)
+                    return;
+                if (this.selectedMemberIds.size === 0)
+                    return;
+                const lastMemberId = Array.from(this.selectedMemberIds.values()).at(-1);
+                this.selectedMemberIds.delete(lastMemberId);
+                index$1.forceUpdate(this.$el);
+            }
+        };
+        this.renderMemberSelector = () => {
+            const filteredMembers = Array.from(this.allMembers.values()).filter((member) => !this.selectedMemberIds.has(member.userId) &&
+                member.name.toLowerCase().includes(this.searchQuery.toLowerCase()));
+            const selectedMembers = Array.from(this.selectedMemberIds.values()).map((id) => this.allMembers.get(id));
+            const disableInput = this.selectedMemberIds.size === this.allMembers.size;
+            return (index$1.h("div", { class: "input-container" }, index$1.h("ul", { class: "members scrollbar", onClick: () => {
+                    var _a;
+                    (_a = this.searchInputTextRef) === null || _a === void 0 ? void 0 : _a.focus();
+                } }, selectedMembers.map((member) => (index$1.h("li", { class: "pill" }, index$1.h("rtk-avatar", { participant: {
+                    name: member.name,
+                    picture: member.picture,
+                }, size: "sm" }), index$1.h("span", null, member.name), index$1.h("rtk-icon", { icon: this.iconPack.dismiss, onClick: () => {
+                    this.selectedMemberIds.delete(member.userId);
+                    index$1.forceUpdate(this.$el);
+                    this.focusOnSearch();
+                } })))), !disableInput && (index$1.h("input", { type: "text", ref: (el) => (this.searchInputTextRef = el), value: this.searchQuery, placeholder: this.selectedMemberIds.size === 0 ? this.t('chat.member_name') : '', class: {
+                    'wide-input': this.selectedMemberIds.size === 0,
+                }, onInput: (e) => {
+                    this.searchQuery = e.target.value.trim();
+                }, onClick: () => {
+                    this.showAllMembersList = !this.showAllMembersList;
+                }, onKeyDown: (e) => this.keyDownHandler(e, filteredMembers) }))), (this.searchQuery.length !== 0 || this.showAllMembersList) && (index$1.h("ul", { class: "search-results" }, filteredMembers.map((member, index) => (index$1.h("li", { class: { member: true, selected: index === this.focusedMemberIndex }, onClick: () => this.onMemberAdd(member.userId), ref: ($li) => {
+                    if (index === this.focusedMemberIndex) {
+                        index$1.writeTask(() => {
+                            if ($li)
+                                $li.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'nearest' });
+                        });
+                    }
+                } }, index$1.h("rtk-avatar", { participant: {
+                    name: member.name,
+                    picture: member.picture,
+                }, size: "sm" }), index$1.h("span", null, member.name)))), filteredMembers.length === 0 && (index$1.h("li", { class: "member" }, index$1.h("span", null, this.t('chat.error.empty_results'))))))));
+        };
+    }
+    componentDidLoad() {
+        var _a;
+        (_a = this.inputTextRef) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    render() {
+        return (index$1.h(index$1.Host, { key: '5d65768a72c0769857b7d817d0b555d50a5645a5' }, index$1.h("header", { key: 'f8826c58072d2ddb73ed61a1813bf62b85cb9bc8' }, this.step === 1 ? this.t('chat.new_channel') : this.t('chat.add_members')), this.step === 1 && (index$1.h("input", { key: '2bad468b946a896cb28a6206d5650c1b0192f9f9', class: "channel-name-input", type: "text", placeholder: this.t('chat.channel_name'), ref: (el) => (this.inputTextRef = el), onInput: (e) => {
+                this.channelName = e.target.value.trim();
+            } })), this.step === 2 && this.renderMemberSelector(), index$1.h("footer", { key: 'd23db51c427fa67f67cc11514e241d052eb376fe' }, index$1.h("rtk-button", { key: '5031f53ed0dc632d3e778f0ecaefb0165b74d74d', kind: "button", size: "lg", disabled: this.channelName.length === 0, onClick: this.onClickHandler }, this.step === 1 ? this.t('chat.add_members') : this.t('create')))));
+    }
+    get $el() { return index$1.getElement(this); }
+};
+__decorate([
+    index.SyncWithStore()
+], RtkChannelCreator.prototype, "meeting", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkChannelCreator.prototype, "t", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkChannelCreator.prototype, "iconPack", void 0);
+RtkChannelCreator.style = RtkChannelCreatorStyle0;
+
+exports.rtk_channel_creator = RtkChannelCreator;

package/dist/cjs/rtk-channel-details.cjs.entry.js

@@ -0,0 +1,49 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-05554ce6.js');
+const uiStore = require('./ui-store-1cb28da8.js');
+const index = require('./index-8d07e125.js');
+
+const rtkChannelDetailsCss = ":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{border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));display:flex;flex-direction:column;width:var(--rtk-space-72, 288px);padding-top:var(--rtk-space-5, 20px);padding-bottom:var(--rtk-space-5, 20px);padding-left:var(--rtk-space-8, 32px);padding-right:var(--rtk-space-8, 32px)}header{font-size:20px}rtk-spinner{margin-top:var(--rtk-space-10, 40px);margin-bottom:var(--rtk-space-10, 40px);margin-left:auto;margin-right:auto}ul{margin-left:var(--rtk-space-0, 0px);margin-right:var(--rtk-space-0, 0px);margin-top:var(--rtk-space-6, 24px);margin-bottom:var(--rtk-space-4, 16px);height:var(--rtk-space-48, 192px);padding:var(--rtk-space-0, 0px);overflow-y:auto;list-style-type:none;display:flex;flex-direction:column;gap:var(--rtk-space-2, 8px)}ul li{margin-right:var(--rtk-space-2, 8px);display:flex;align-items:center;gap:var(--rtk-space-2, 8px);padding:var(--rtk-space-2, 8px);cursor:pointer;border-radius:var(--rtk-border-radius-sm, 4px)}ul li:hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}ul li rtk-avatar{height:var(--rtk-space-7, 28px);width:var(--rtk-space-7, 28px);font-size:14px;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}";
+const RtkChannelDetailsStyle0 = rtkChannelDetailsCss;
+
+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 RtkChannelDetails = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        /** Language */
+        this.t = uiStore.useLanguage();
+        /** Icon pack */
+        this.iconPack = uiStore.defaultIconPack;
+        /** List of channel members */
+        this.members = [];
+    }
+    renderMembers() {
+        return (index$1.h("ul", { class: "scrollbar" }, this.members.map((member) => {
+            return (index$1.h("li", null, index$1.h("rtk-avatar", { participant: { name: member.name, picture: member.picture }, size: "sm" }), index$1.h("span", null, member.name)));
+        })));
+    }
+    render() {
+        return (index$1.h(index$1.Host, { key: 'fd16feaf7e6dff4fbf038073e953c25d3f7b4822' }, index$1.h("header", { key: 'acb5029883e4bd77eadd22d1024cb5a9dfd8247a' }, this.t('chat.channel_members')), this.renderMembers()));
+    }
+};
+__decorate([
+    index.SyncWithStore()
+], RtkChannelDetails.prototype, "t", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkChannelDetails.prototype, "iconPack", void 0);
+RtkChannelDetails.style = RtkChannelDetailsStyle0;
+
+exports.rtk_channel_details = RtkChannelDetails;

package/dist/cjs/rtk-channel-header.cjs.entry.js

@@ -0,0 +1,83 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-05554ce6.js');
+const uiStore = require('./ui-store-1cb28da8.js');
+const index = require('./index-8d07e125.js');
+
+const rtkChannelHeaderCss = "header{box-sizing:border-box;height:var(--rtk-space-16, 64px);width:100%;padding:var(--rtk-space-4, 16px);display:flex;justify-content:space-between;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));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))}header.searching{justify-content:flex-end}header.searching .channel-details{display:none}header .channel-details{display:flex;flex-grow:1;flex-direction:column;justify-content:center;height:var(--rtk-space-9, 36px);width:var(--rtk-space-1, 4px)}header .channel-details .name{font-weight:500}header .channel-details .members{margin-top:var(--rtk-space-0\\.5, 2px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52))}header .channel-tools{display:flex;flex-shrink:0;justify-content:flex-end;gap:var(--rtk-space-1, 4px);min-width:var(--rtk-space-24, 96px)}header .channel-tools rtk-tooltip{height:var(--rtk-space-8, 32px);width:var(--rtk-space-10, 40px);display:flex}header .search-input{height:var(--rtk-space-8, 32px);width:var(--rtk-space-48, 192px);padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px);border-width:var(--rtk-border-width-none, 0);border-style:none;outline:2px solid transparent;outline-offset:2px;border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255))}header .name{font-size:16px}header .br-primary-btn{background-color:transparent}header .br-primary-btn:hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}@media (orientation: landscape) and (min-width: 400px){header.searching .channel-details{display:flex}}.back-btn{margin-right:var(--rtk-space-3, 12px)}";
+const RtkChannelHeaderStyle0 = rtkChannelHeaderCss;
+
+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 RtkChannelHeader = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        this.search = index$1.createEvent(this, "search", 7);
+        this.searchDismissed = index$1.createEvent(this, "searchDismissed", 7);
+        this.back = index$1.createEvent(this, "back", 7);
+        /** Icon pack */
+        this.iconPack = uiStore.defaultIconPack;
+        /** Language */
+        this.t = uiStore.useLanguage();
+        this.showChannelDetailsDialog = false;
+        this.showSearchBar = false;
+        this.members = [];
+        /** Show back button */
+        this.showBackButton = false;
+    }
+    onChannelChanged() {
+        if (this.$searchInput)
+            this.$searchInput.value = '';
+        this.showSearchBar = false;
+        if (!this.channel.isDirectMessage) {
+            this.meeting.chat.getChannelMembers(this.channel.id).then((members) => {
+                this.members = members;
+            });
+        }
+    }
+    connectedCallback() {
+        this.onChannelChanged();
+    }
+    renderChannelDetails() {
+        return (index$1.h("rtk-dialog", { open: true, onRtkDialogClose: () => {
+                this.showChannelDetailsDialog = false;
+            }, iconPack: this.iconPack, t: this.t }, index$1.h("rtk-channel-details", { members: this.members, channel: this.channel })));
+    }
+    render() {
+        if (!this.channel) {
+            return null;
+        }
+        return (index$1.h(index$1.Host, null, this.showChannelDetailsDialog && this.renderChannelDetails(), index$1.h("header", { class: {
+                searching: this.showSearchBar,
+            } }, this.showBackButton && (index$1.h("rtk-button", { kind: "icon", variant: "secondary", class: "back-btn", onClick: () => {
+                this.back.emit();
+            } }, index$1.h("rtk-icon", { icon: this.iconPack.chevron_left }))), index$1.h("div", { class: "channel-details" }, index$1.h("span", { class: "name" }, this.channel.displayName), !this.channel.isDirectMessage && (index$1.h("span", { class: "members" }, this.members.map((member) => member.name).join(', ')))), index$1.h("div", { class: "channel-tools" }, !this.channel.isDirectMessage && (index$1.h("rtk-tooltip", { label: this.t('chat.channel_members'), variant: "primary" }, index$1.h("rtk-button", { kind: "button", variant: "secondary", size: "md", onClick: () => {
+                this.showChannelDetailsDialog = !this.showChannelDetailsDialog;
+            }, class: "br-primary-btn" }, index$1.h("rtk-icon", { icon: this.iconPack.people }))))))));
+    }
+    static get watchers() { return {
+        "channel": ["onChannelChanged"]
+    }; }
+};
+__decorate([
+    index.SyncWithStore()
+], RtkChannelHeader.prototype, "meeting", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkChannelHeader.prototype, "iconPack", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkChannelHeader.prototype, "t", void 0);
+RtkChannelHeader.style = RtkChannelHeaderStyle0;
+
+exports.rtk_channel_header = RtkChannelHeader;

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

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index$1 = require('./index-05554ce6.js');
 const uiStore = require('./ui-store-1cb28da8.js');
 const index = require('./index-8d07e125.js');
-const TextMessage = require('./TextMessage-4f9299ff.js');
-require('./chat-04fd67b4.js');
+const TextMessage = require('./TextMessage-7bb3e1fd.js');
+require('./chat-717e517d.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;
@@ -123,7 +123,7 @@ const RtkChannelSelectorUi = class {
         }
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '5a2393ac0ac3f67bfae1acf2ec06c2e3ced317f7' }, index$1.h("div", { key: '73361a84f8078584b80bca96f1f1f9c9f04d74b9', class: "container", ref: (el) => (this.$el = el) }, this.isHidden && (index$1.h("rtk-button", { key: 'ea1f4caf8e5e7aeb633cdec506952fad6f168900', kind: "icon", variant: "ghost", size: "md", onClick: this.onRevealClicked, class: "sidebar-btn" }, index$1.h("rtk-icon", { key: '165420751ca42a7fe1040152bae366964e2dfe9f', icon: this.isHidden ? this.iconPack.chevron_left : this.iconPack.dismiss }))), index$1.h("slot", { key: '4a04c6acd67fd6a243e66cbadfb527f70c95c416', name: "header" }), index$1.h("div", { key: 'd994d7c80ddab2ab5d87e8b7bfbaf24283f400f6', class: "search-wrapper" }, index$1.h("div", { key: '6d3c72ccf0576bb1c682c9b687fd769f8720501a', class: "search" }, index$1.h("input", { key: '65eaf233392c435772a3a2da1a33f819e4760f66', type: "search", autocomplete: "off", placeholder: this.t('chat.search_conversations'), onInput: this.onSearchInput }), index$1.h("rtk-icon", { key: 'c70df6fb76af5815837461f4f9382631acc8f336', icon: this.iconPack.search, class: "search-icon" }))), index$1.h("div", { key: '9b298879a017f3ac5c0919ec5869cb644839c31f', class: "channel-container scrollbar", role: "list" }, this.channels
+        return (index$1.h(index$1.Host, { key: 'd4565e4906338b20c51ca9559f9aabcf6a54382a' }, index$1.h("div", { key: '3e196d8746296f4d8f118c5218b9c1c9818fd7c3', class: "container", ref: (el) => (this.$el = el) }, this.isHidden && (index$1.h("rtk-button", { key: 'a771768f868b0e1281281ff8dc721f8a3cb2c201', kind: "icon", variant: "ghost", size: "md", onClick: this.onRevealClicked, class: "sidebar-btn" }, index$1.h("rtk-icon", { key: 'b6e75a2486cef93ad99e9e173258256ab048198b', icon: this.isHidden ? this.iconPack.chevron_left : this.iconPack.dismiss }))), index$1.h("slot", { key: 'fd02665a1f80a946e9f6c2b642b80edc6f978a65', name: "header" }), index$1.h("div", { key: 'd24ad0988ef95f0ddabb8ff1c33f3740f8af4f76', class: "search-wrapper" }, index$1.h("div", { key: '1bb2aec77e2d1d6500709566a0bd1d9a8246ecc8', class: "search" }, index$1.h("input", { key: '10a989ac0e55bd37f67359e9ca14ea9e79edeb88', type: "search", autocomplete: "off", placeholder: this.t('chat.search_conversations'), onInput: this.onSearchInput }), index$1.h("rtk-icon", { key: 'ffaeb2e88ffc571a6271fafd9b9ef1c7f105803b', icon: this.iconPack.search, class: "search-icon" }))), index$1.h("div", { key: '9612379eb95b5d4fae3a4fa6db05660bfc92b6e8', class: "channel-container scrollbar", role: "list" }, this.channels
             .filter((channel) => this.searchQuery === '' || channel.displayName.includes(this.searchQuery))
             .map((channel) => {
             return (index$1.h("div", { class: {
@@ -133,7 +133,7 @@ const RtkChannelSelectorUi = class {
                 }, role: "listitem", onClick: () => {
                     this.channelSelected(channel.id);
                 } }, this.renderChannelDisplayPic(channel), index$1.h("div", { class: "channel-card", "is-direct-message": channel.isDirectMessage }, index$1.h("div", { class: 'recent-message-row' }, index$1.h("span", { class: "channel-name" }, channel.displayName), channel.latestMessage && (index$1.h("span", { class: "latest-msg-time" }, this.getTimeLabel(channel.latestMessage)))), index$1.h("div", { class: 'recent-message-row' }, this.renderRecentMessage(channel), channel.unreadCount > 0 && channel.id !== this.selectedChannelId ? (index$1.h("span", { class: "new-msgs-count" }, channel.unreadCount < 99 ? channel.unreadCount : '99+')) : null))));
-        }))), !this.isHidden && (index$1.h("div", { key: '3d760da990293e4ed28a2408d9db7987012c2bd4', class: "overlay-container" }, index$1.h("rtk-button", { key: 'ae83483508d71df77f4de75a92d99b89d148eefe', kind: "icon", variant: "ghost", size: "md", onClick: this.onRevealClicked, class: "sidebar-btn" }, index$1.h("rtk-icon", { key: '482ab05f50c151ee956611db128cdd197df6ad11', icon: this.isHidden ? this.iconPack.chevron_left : this.iconPack.dismiss }))))));
+        }))), !this.isHidden && (index$1.h("div", { key: '84b18823c07fc0dba89b8e11fb36044d36c4e9d3', class: "overlay-container" }, index$1.h("rtk-button", { key: '7aecee5541f731e264a5f12d10e7f7b07ce647ef', kind: "icon", variant: "ghost", size: "md", onClick: this.onRevealClicked, class: "sidebar-btn" }, index$1.h("rtk-icon", { key: '924fa966910f056fbe0e7ee57de122fcb7d6311c', icon: this.isHidden ? this.iconPack.chevron_left : this.iconPack.dismiss }))))));
     }
 };
 __decorate([

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-05554ce6.js');
 const uiStore = require('./ui-store-1cb28da8.js');
-const chat = require('./chat-04fd67b4.js');
+const chat = require('./chat-717e517d.js');
 const index = require('./index-8d07e125.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:16px}.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%)}}";

package/dist/cjs/rtk-chat-message.cjs.entry.js

@@ -0,0 +1,118 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-05554ce6.js');
+const uiStore = require('./ui-store-1cb28da8.js');
+const index = require('./index-8d07e125.js');
+
+const rtkChatMessageCss = ".message-wrapper{display:flex;gap:var(--rtk-space-2, 8px);margin-left:var(--rtk-space-4, 16px);margin-right:var(--rtk-space-4, 16px);margin-top:var(--rtk-space-4, 16px)}[is-continued] .message-wrapper{margin-top:var(--rtk-space-0, 0px)}.message-wrapper.align-right{flex-direction:row-reverse}.file-picker{display:none}.message{position:relative;display:flex}.show-on-hover rtk-menu{visibility:hidden}.show-on-hover:hover rtk-menu{visibility:visible}.align-right .message{justify-content:flex-end;margin-left:auto}.align-right .message .head{margin-right:var(--rtk-space-1, 4px);margin-left:var(--rtk-space-0, 0px);flex-direction:row-reverse;gap:var(--rtk-space-4, 16px)}.align-right .message rtk-text-message .bubble,.align-right .message rtk-image-message .bubble,.align-right .message rtk-file-message .bubble{padding-right:var(--rtk-space-5, 20px);--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-1000, var(--rtk-colors-text-1000, 255 255 255)))}.align-right .message .actions rtk-icon{color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.align-right rtk-menu{left:auto;right:var(--rtk-space-0, 0px)}.head{margin-bottom:var(--rtk-space-2, 8px);margin-left:var(--rtk-space-1, 4px);display:flex;align-items:center;gap:var(--rtk-space-2, 8px)}.head .name{font-size:14px;font-weight:600}.head .time{font-size:12px;color:rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76))}rtk-menu{position:absolute;left:var(--rtk-space-0, 0px);top:var(--rtk-space-6, 24px);border-radius:var(--rtk-border-radius-lg, 12px)}rtk-menu rtk-icon{height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);cursor:pointer}[is-continued] rtk-menu{top:var(--rtk-space-2, 8px)}.actions{display:flex;align-items:center;justify-content:center;padding:var(--rtk-space-0\\.5, 2px);border-width:var(--rtk-border-width-none, 0);border-style:none;background-color:transparent}.actions rtk-icon{height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.body{margin-top:var(--rtk-space-1, 4px);margin-bottom:var(--rtk-space-1, 4px);overflow-wrap:break-word;font-size:14px;line-height:1.375}.body .emoji{font-size:24px}.body.bubble{margin-top:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-1, 4px);max-width:var(--rtk-space-96, 384px);padding-top:var(--rtk-space-3, 12px);padding-bottom:var(--rtk-space-3, 12px);padding-left:var(--rtk-space-5, 20px);padding-right:var(--rtk-space-5, 20px);overflow-wrap:break-word;font-size:14px;line-height:1.375;border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}.body.bubble p{margin:var(--rtk-space-0, 0px);word-break:break-word}p{margin:var(--rtk-space-0, 0px)}rtk-text-message,rtk-image-message,rtk-file-message{display:block;font-family:var(--rtk-font-family, sans-serif);color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));box-sizing:border-box}*[is-continued]{margin-top:var(--rtk-space-0, 0px)}.image{position:relative;height:var(--rtk-space-40, 160px);max-width:var(--rtk-space-64, 256px);cursor:pointer}.image img{display:none;height:100%;width:100%;border-radius:var(--rtk-border-radius-sm, 4px);-o-object-fit:cover;object-fit:cover}.image .image-spinner{display:flex;height:100%;width:100%;flex-direction:column;align-items:center;justify-content:center;border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}.image .image-spinner rtk-spinner{--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-text-opacity))}.image .image-errored{display:flex;height:100%;width:100%;flex-direction:column;align-items:center;justify-content:center;border-radius:var(--rtk-border-radius-sm, 4px);background-color:rgba(var(--rtk-colors-danger, 255 45 45) / 0.1);--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}.image .actions{display:none;height:var(--rtk-space-8, 32px);align-items:center;position:absolute;top:var(--rtk-space-2, 8px);right:var(--rtk-space-2, 8px);border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255));overflow:hidden;--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.image .actions .action{height:var(--rtk-space-8, 32px);width:var(--rtk-space-8, 32px);border-radius:var(--rtk-border-radius-none, 0);border-width:var(--rtk-border-width-none, 0);border-style:none;background-color:transparent;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.image .actions .action:hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.image.loaded img{display:block}.image.loaded .image-spinner{display:none}.image:hover .actions,.image:focus .actions{display:flex}.file{display:flex;align-items:center;gap:var(--rtk-space-1, 4px);padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px);padding-top:var(--rtk-space-1\\.5, 6px);padding-bottom:var(--rtk-space-1\\.5, 6px);border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}.file .file-data{flex:1 1 0%}.file .file-data .name{word-break:break-all;color:rgb(var(--rtk-colors-text-1000, 255 255 255));overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.file .file-data .file-data-split{margin-top:var(--rtk-space-0\\.5, 2px);display:flex;align-items:center;font-size:12px}.file .file-data .file-data-split .ext{margin-right:var(--rtk-space-2, 8px);text-transform:uppercase;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.file .file-data .file-data-split .divider{height:var(--rtk-space-4, 16px);width:var(--rtk-space-0\\.5, 2px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.file .file-data .file-data-split .size{margin-left:var(--rtk-space-2, 8px)}a{--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-text-opacity));text-decoration-line:none}a:hover{text-decoration-line:underline}.new-chat-marker{display:flex;width:100%;align-items:center;gap:var(--rtk-space-2, 8px);--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-text-opacity))}.new-chat-marker::before{content:'';height:1px;flex:1 1 0%;background-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / 0.5)}.show-new-messages-ctr{pointer-events:none;display:flex;justify-content:flex-end;padding:var(--rtk-space-3, 12px);z-index:0;margin-top:calc(var(--rtk-space-14, 56px) * -1)}.show-new-messages{pointer-events:auto;--tw-translate-y:calc(var(--rtk-space-6, 24px) * -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));opacity:0;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.show-new-messages.active{--tw-translate-y:var(--rtk-space-0, 0px);transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:1}blockquote{margin:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-3, 12px);background-color:transparent}.block-quote,blockquote{--tw-border-spacing-x:1px;--tw-border-spacing-y:1px;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y);border-top-width:var(--rtk-border-width-none, 0);border-bottom-width:var(--rtk-border-width-none, 0);border-left-width:var(--rtk-border-width-md, 2px);border-right-width:var(--rtk-border-width-none, 0);border-style:solid;border-left-color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));padding:var(--rtk-space-0\\.5, 2px);padding-left:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-2, 8px) !important;border-radius:var(--rtk-border-radius-sm, 4px);border-top-left-radius:var(--rtk-border-radius-none, 0);border-bottom-left-radius:var(--rtk-border-radius-none, 0)}.link{color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}.align-right .block-quote{border-color:rgb(var(--rtk-colors-text-on-brand-600, var(--rtk-colors-text-600, 255 255 255 / 0.52)));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-bg-opacity))}.align-right .link{color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.align-right .image .actions rtk-icon{--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-text-opacity))}.avatar{display:flex;width:var(--rtk-space-6, 24px)}.avatar rtk-avatar{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px);font-size:10px}.message{width:75%}.left-align .body{margin-top:var(--rtk-space-4, 16px)}.left-align [is-continued] .body{margin-top:var(--rtk-space-0, 0px)}.left-align .body{--tw-translate-x:calc(var(--rtk-space-8, 32px) * -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))}";
+const RtkChatMessageStyle0 = rtkChatMessageCss;
+
+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 RtkChatMessage = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        this.edit = index$1.createEvent(this, "edit", 7);
+        this.reply = index$1.createEvent(this, "reply", 7);
+        this.pin = index$1.createEvent(this, "pin", 7);
+        this.delete = index$1.createEvent(this, "delete", 7);
+        /** Icon pack */
+        this.iconPack = uiStore.defaultIconPack;
+        /** Language */
+        this.t = uiStore.useLanguage();
+        /** if sender is self */
+        this.isSelf = false;
+        /** can edit message */
+        this.canEdit = false;
+        /** can delete message */
+        this.canDelete = false;
+        /** can quote reply this message */
+        this.canReply = false;
+        /** can pin this message */
+        this.canPin = false;
+        /** disables controls */
+        this.disableControls = false;
+        /** aligns message to right */
+        this.alignRight = false;
+        /** hides avatar */
+        this.hideAvatar = false;
+        this.now = new Date();
+        /** Whether to left align the chat bubbles */
+        this.leftAlign = false;
+        this.renderMessage = () => {
+            switch (this.message.type) {
+                case 'text':
+                    return (index$1.h("div", { "is-continued": this.isContinued, key: this.message.id }, this.isUnread && (index$1.h("div", { class: "new-chat-marker", part: "new-chat-marker" }, this.t('chat.new'))), index$1.h("rtk-text-message", { message: this.message, now: this.now, isContinued: this.isContinued, "data-timestamp": this.message.time.getTime(), iconPack: this.iconPack, t: this.t, showBubble: true })));
+                case 'image':
+                    return (index$1.h("div", { "is-continued": this.isContinued, key: this.message.id }, this.isUnread && (index$1.h("div", { class: "new-chat-marker", part: "new-chat-marker" }, this.t('chat.new'))), index$1.h("rtk-image-message", { message: this.message, now: this.now, isContinued: this.isContinued, iconPack: this.iconPack, "data-timestamp": this.message.time.getTime(), t: this.t, showBubble: true })));
+                case 'file':
+                    return (index$1.h("div", { "is-continued": this.isContinued, key: this.message.id }, this.isUnread && (index$1.h("div", { class: "new-chat-marker", part: "new-chat-marker" }, this.t('chat.new'))), index$1.h("rtk-file-message", { message: this.message, now: this.now, isContinued: this.isContinued, iconPack: this.iconPack, t: this.t, "data-timestamp": this.message.time.getTime(), showBubble: true })));
+                case 'custom':
+                    this.child.setAttribute('message', JSON.stringify(this.message));
+                    const node = this.child.cloneNode(true);
+                    return (index$1.h("div", { "is-continued": this.isContinued, key: this.message.id, ref: (el) => el.appendChild(node) }));
+            }
+        };
+        this.onReply = () => {
+            this.reply.emit(this.message);
+        };
+        this.onPinned = () => {
+            this.pin.emit(this.message);
+        };
+        this.onDelete = () => {
+            this.delete.emit(this.message);
+        };
+        this.onEdit = async () => {
+            this.edit.emit(this.message);
+        };
+        this.isTouchDevice = () => {
+            return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+        };
+    }
+    renderControls() {
+        if (this.disableControls)
+            return;
+        return (index$1.h("rtk-menu", { placement: this.alignRight ? 'bottom-end' : 'bottom-start' }, index$1.h("button", { slot: "trigger", class: "actions" }, index$1.h("rtk-icon", { icon: this.iconPack.chevron_down })), index$1.h("rtk-menu-list", null, this.canReply && (index$1.h("rtk-menu-item", { onClick: this.onReply }, index$1.h("rtk-icon", { icon: this.iconPack.back, slot: "start" }), this.t('chat.reply'))), this.canPin && (index$1.h("rtk-menu-item", { onClick: this.onPinned }, index$1.h("rtk-icon", { icon: this.iconPack.pin, slot: "start" }), this.t('pin'))), this.canEdit && (index$1.h("rtk-menu-item", { onClick: this.onEdit }, index$1.h("rtk-icon", { icon: this.iconPack.edit, slot: "start" }), this.t('chat.edit_msg'))), this.canDelete && (index$1.h("rtk-menu-item", { onClick: this.onDelete }, index$1.h("rtk-icon", { icon: this.iconPack.delete, slot: "start" }), this.t('chat.delete_msg'))))));
+    }
+    renderAvatar() {
+        if (this.hideAvatar)
+            return;
+        if (this.isContinued) {
+            return index$1.h("div", { class: "avatar" });
+        }
+        return (index$1.h("div", { class: "avatar" }, index$1.h("rtk-avatar", { size: "sm", participant: {
+                name: this.message.displayName,
+                picture: this.senderDisplayPicture,
+            } })));
+    }
+    render() {
+        return (index$1.h(index$1.Host, { key: '358cc92774694c9c31b965f823efd5047685ddd3' }, index$1.h("div", { key: '084dbfc81b75420c66f949b9799a60563c39b6b2', class: {
+                'message-wrapper': true,
+                'align-right': this.alignRight,
+                'left-align': this.leftAlign,
+            }, "is-continued": this.isContinued }, this.renderAvatar(), index$1.h("div", { key: 'e3f3490eccdc1550b9232bf70f2d8f6717f2fac4', class: {
+                message: true,
+                'show-on-hover': !this.isTouchDevice(),
+            }, "is-continued": this.isContinued }, this.renderMessage(), this.renderControls()))));
+    }
+    get $el() { return index$1.getElement(this); }
+};
+__decorate([
+    index.SyncWithStore()
+], RtkChatMessage.prototype, "iconPack", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkChatMessage.prototype, "t", void 0);
+RtkChatMessage.style = RtkChatMessageStyle0;
+
+exports.rtk_chat_message = RtkChatMessage;