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

package/dist/components/rtk-channel-header.js

@@ -1,4 +1,149 @@
-import { R as RtkChannelHeader$1, d as defineCustomElement$1 } from './p-0c11d195.js';
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
+import { e as defaultIconPack, h as useLanguage } from './p-7fc0dc2f.js';
+import './p-a83ccdbd.js';
+import { S as SyncWithStore } from './p-47c25f64.js';
+import { d as defineCustomElement$8 } from './p-b1338b4f.js';
+import { d as defineCustomElement$7 } from './p-1391bef0.js';
+import { d as defineCustomElement$6 } from './p-724074c4.js';
+import { d as defineCustomElement$5 } from './p-c515acba.js';
+import { d as defineCustomElement$4 } from './p-3b29dda1.js';
+import { d as defineCustomElement$3 } from './p-b6ee1a32.js';
+import { d as defineCustomElement$2 } from './p-03bdc4c0.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$1 = /*@__PURE__*/ proxyCustomElement(class RtkChannelHeader extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.search = createEvent(this, "search", 7);
+        this.searchDismissed = createEvent(this, "searchDismissed", 7);
+        this.back = createEvent(this, "back", 7);
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = 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 (h("rtk-dialog", { open: true, onRtkDialogClose: () => {
+                this.showChannelDetailsDialog = false;
+            }, iconPack: this.iconPack, t: this.t }, h("rtk-channel-details", { members: this.members, channel: this.channel })));
+    }
+    render() {
+        if (!this.channel) {
+            return null;
+        }
+        return (h(Host, null, this.showChannelDetailsDialog && this.renderChannelDetails(), h("header", { class: {
+                searching: this.showSearchBar,
+            } }, this.showBackButton && (h("rtk-button", { kind: "icon", variant: "secondary", class: "back-btn", onClick: () => {
+                this.back.emit();
+            } }, h("rtk-icon", { icon: this.iconPack.chevron_left }))), h("div", { class: "channel-details" }, h("span", { class: "name" }, this.channel.displayName), !this.channel.isDirectMessage && (h("span", { class: "members" }, this.members.map((member) => member.name).join(', ')))), h("div", { class: "channel-tools" }, !this.channel.isDirectMessage && (h("rtk-tooltip", { label: this.t('chat.channel_members'), variant: "primary" }, h("rtk-button", { kind: "button", variant: "secondary", size: "md", onClick: () => {
+                this.showChannelDetailsDialog = !this.showChannelDetailsDialog;
+            }, class: "br-primary-btn" }, h("rtk-icon", { icon: this.iconPack.people }))))))));
+    }
+    static get watchers() { return {
+        "channel": ["onChannelChanged"]
+    }; }
+    static get style() { return RtkChannelHeaderStyle0; }
+}, [0, "rtk-channel-header", {
+        "meeting": [16],
+        "channel": [16],
+        "iconPack": [16],
+        "t": [16],
+        "showBackButton": [4, "show-back-button"],
+        "showChannelDetailsDialog": [32],
+        "showSearchBar": [32],
+        "members": [32]
+    }, undefined, {
+        "channel": ["onChannelChanged"]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkChannelHeader$1.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkChannelHeader$1.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkChannelHeader$1.prototype, "t", void 0);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-channel-header", "rtk-avatar", "rtk-button", "rtk-channel-details", "rtk-dialog", "rtk-icon", "rtk-spinner", "rtk-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-channel-header":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkChannelHeader$1);
+            }
+            break;
+        case "rtk-avatar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "rtk-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "rtk-channel-details":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "rtk-dialog":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "rtk-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "rtk-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "rtk-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
 
 const RtkChannelHeader = RtkChannelHeader$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-channel-selector-ui.js

@@ -1,12 +1,12 @@
 import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
-import { e as defaultIconPack, h as useLanguage } from './p-037e572f.js';
+import { e as defaultIconPack, h as useLanguage } from './p-7fc0dc2f.js';
 import './p-a83ccdbd.js';
-import { S as SyncWithStore } from './p-af35ac31.js';
-import { T as TextMessageView } from './p-a2f4f9e3.js';
-import { d as defineCustomElement$5 } from './p-6fe2233b.js';
+import { S as SyncWithStore } from './p-47c25f64.js';
+import { T as TextMessageView } from './p-aae4c250.js';
+import { d as defineCustomElement$5 } from './p-b1338b4f.js';
 import { d as defineCustomElement$4 } from './p-1391bef0.js';
 import { d as defineCustomElement$3 } from './p-3b29dda1.js';
-import { d as defineCustomElement$2 } from './p-34b580c9.js';
+import { d as defineCustomElement$2 } from './p-b6ee1a32.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;
@@ -125,7 +125,7 @@ const RtkChannelSelectorUi$1 = /*@__PURE__*/ proxyCustomElement(class RtkChannel
         }
     }
     render() {
-        return (h(Host, { key: '5a2393ac0ac3f67bfae1acf2ec06c2e3ced317f7' }, h("div", { key: '73361a84f8078584b80bca96f1f1f9c9f04d74b9', class: "container", ref: (el) => (this.$el = el) }, this.isHidden && (h("rtk-button", { key: 'ea1f4caf8e5e7aeb633cdec506952fad6f168900', kind: "icon", variant: "ghost", size: "md", onClick: this.onRevealClicked, class: "sidebar-btn" }, h("rtk-icon", { key: '165420751ca42a7fe1040152bae366964e2dfe9f', icon: this.isHidden ? this.iconPack.chevron_left : this.iconPack.dismiss }))), h("slot", { key: '4a04c6acd67fd6a243e66cbadfb527f70c95c416', name: "header" }), h("div", { key: 'd994d7c80ddab2ab5d87e8b7bfbaf24283f400f6', class: "search-wrapper" }, h("div", { key: '6d3c72ccf0576bb1c682c9b687fd769f8720501a', class: "search" }, h("input", { key: '65eaf233392c435772a3a2da1a33f819e4760f66', type: "search", autocomplete: "off", placeholder: this.t('chat.search_conversations'), onInput: this.onSearchInput }), h("rtk-icon", { key: 'c70df6fb76af5815837461f4f9382631acc8f336', icon: this.iconPack.search, class: "search-icon" }))), h("div", { key: '9b298879a017f3ac5c0919ec5869cb644839c31f', class: "channel-container scrollbar", role: "list" }, this.channels
+        return (h(Host, { key: 'ffa818ba0f1e156753c7517e124a59d55061ca1d' }, h("div", { key: 'd6c010e0d21df2cd8ed3e2d897adf162bbf25ead', class: "container", ref: (el) => (this.$el = el) }, this.isHidden && (h("rtk-button", { key: '84f3bc3e7f09b1017606463013d5a85f48c51a51', kind: "icon", variant: "ghost", size: "md", onClick: this.onRevealClicked, class: "sidebar-btn" }, h("rtk-icon", { key: '5b4c509b3db4bb4d0cffa798d0c9c6539f7055f9', icon: this.isHidden ? this.iconPack.chevron_left : this.iconPack.dismiss }))), h("slot", { key: '0feaabcc00be0e7c9aff55f1148fda0aa140cca2', name: "header" }), h("div", { key: '67be9ee605baa6d253e2398f6e546ff834382435', class: "search-wrapper" }, h("div", { key: '47bb31dda1a5106267a7ff3151c6771fd540908a', class: "search" }, h("input", { key: '7d0a7290c2c1dfa57c4f7093fa867a0d9e0e28eb', type: "search", autocomplete: "off", placeholder: this.t('chat.search_conversations'), onInput: this.onSearchInput }), h("rtk-icon", { key: '1ca7138de4ab92c224100da5e16d292d8a9fcca8', icon: this.iconPack.search, class: "search-icon" }))), h("div", { key: '01aed740c65ea7c883e10edc19a5e9b193340bcd', class: "channel-container scrollbar", role: "list" }, this.channels
             .filter((channel) => this.searchQuery === '' || channel.displayName.includes(this.searchQuery))
             .map((channel) => {
             return (h("div", { class: {
@@ -135,7 +135,7 @@ const RtkChannelSelectorUi$1 = /*@__PURE__*/ proxyCustomElement(class RtkChannel
                 }, 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: '3d760da990293e4ed28a2408d9db7987012c2bd4', class: "overlay-container" }, h("rtk-button", { key: 'ae83483508d71df77f4de75a92d99b89d148eefe', kind: "icon", variant: "ghost", size: "md", onClick: this.onRevealClicked, class: "sidebar-btn" }, h("rtk-icon", { key: '482ab05f50c151ee956611db128cdd197df6ad11', icon: this.isHidden ? this.iconPack.chevron_left : this.iconPack.dismiss }))))));
+        }))), !this.isHidden && (h("div", { key: '9351939e9838c91054b57171b8fc999c3d5639ef', class: "overlay-container" }, h("rtk-button", { key: '72b17edfe3552a080fdf5f8b1a87d10b0cfdf77e', kind: "icon", variant: "ghost", size: "md", onClick: this.onRevealClicked, class: "sidebar-btn" }, h("rtk-icon", { key: '2b6de345134d8169c776bd1bffa4a50a8543ed79', icon: this.isHidden ? this.iconPack.chevron_left : this.iconPack.dismiss }))))));
     }
     static get style() { return RtkChannelSelectorUiStyle0; }
 }, [1, "rtk-channel-selector-ui", {

package/dist/components/rtk-channel-selector-view.js

@@ -1,4 +1,4 @@
-import { R as RtkChannelSelectorView$1, d as defineCustomElement$1 } from './p-22a734a8.js';
+import { R as RtkChannelSelectorView$1, d as defineCustomElement$1 } from './p-eb7df0eb.js';
 
 const RtkChannelSelectorView = RtkChannelSelectorView$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-chat-composer-ui.js

@@ -1,13 +1,13 @@
 import { p as proxyCustomElement, H, d as createEvent, w as writeTask, h, e as Host } from './p-c3592601.js';
-import { e as defaultIconPack, h as useLanguage } from './p-037e572f.js';
-import { r as reverse, h as handleFilesDataTransfer, k as replyBlockPattern, e as extractReplyBlock, s as stripOutReplyBlock, M as MAX_TEXT_LENGTH } from './p-0abe4b8a.js';
+import { e as defaultIconPack, h as useLanguage } from './p-7fc0dc2f.js';
+import { r as reverse, h as handleFilesDataTransfer, k as replyBlockPattern, e as extractReplyBlock, s as stripOutReplyBlock, M as MAX_TEXT_LENGTH } from './p-dab9d3d6.js';
 import { a as gracefulStorage } from './p-a83ccdbd.js';
-import { S as SyncWithStore } from './p-af35ac31.js';
-import { d as defineCustomElement$7 } from './p-6fe2233b.js';
+import { S as SyncWithStore } from './p-47c25f64.js';
+import { d as defineCustomElement$7 } from './p-b1338b4f.js';
 import { d as defineCustomElement$6 } from './p-1391bef0.js';
-import { d as defineCustomElement$5 } from './p-fb427023.js';
+import { d as defineCustomElement$5 } from './p-7a322c43.js';
 import { d as defineCustomElement$4 } from './p-3b29dda1.js';
-import { d as defineCustomElement$3 } from './p-34b580c9.js';
+import { d as defineCustomElement$3 } from './p-b6ee1a32.js';
 import { d as defineCustomElement$2 } from './p-03bdc4c0.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/components/rtk-chat-composer-view.js

@@ -1,4 +1,4 @@
-import { R as RtkChatComposerView$1, d as defineCustomElement$1 } from './p-3fe1bb0d.js';
+import { R as RtkChatComposerView$1, d as defineCustomElement$1 } from './p-b762cf1e.js';
 
 const RtkChatComposerView = RtkChatComposerView$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-chat-message.js

@@ -1,4 +1,4 @@
-import { R as RtkChatMessage$1, d as defineCustomElement$1 } from './p-1d29b7c3.js';
+import { R as RtkChatMessage$1, d as defineCustomElement$1 } from './p-6c1b380d.js';
 
 const RtkChatMessage = RtkChatMessage$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-chat-messages-ui-paginated.js

@@ -1,4 +1,4 @@
-import { R as RtkChatMessagesUiPaginated$1, d as defineCustomElement$1 } from './p-04aaec79.js';
+import { R as RtkChatMessagesUiPaginated$1, d as defineCustomElement$1 } from './p-88e50eea.js';
 
 const RtkChatMessagesUiPaginated = RtkChatMessagesUiPaginated$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-chat-messages-ui.js

@@ -1,4 +1,305 @@
-import { R as RtkChatMessagesUi$1, d as defineCustomElement$1 } from './p-0e07ea51.js';
+import { p as proxyCustomElement, H, d as createEvent, w as writeTask, h, e as Host } from './p-c3592601.js';
+import { e as defaultIconPack, h as useLanguage } from './p-7fc0dc2f.js';
+import { c as chatUnreadTimestamps } from './p-a83ccdbd.js';
+import { d as differenceInMinutes, f as formatDateTime, e as elapsedDuration } from './p-382270d8.js';
+import { s as smoothScrollToBottom } from './p-0752f2ba.js';
+import { S as SyncWithStore } from './p-47c25f64.js';
+import { d as defineCustomElement$e } from './p-b1338b4f.js';
+import { d as defineCustomElement$d } from './p-1391bef0.js';
+import { d as defineCustomElement$c } from './p-6cbaf90a.js';
+import { d as defineCustomElement$b } from './p-3b29dda1.js';
+import { d as defineCustomElement$a } from './p-5b03154d.js';
+import { d as defineCustomElement$9 } from './p-560e7a4f.js';
+import { d as defineCustomElement$8 } from './p-4b542718.js';
+import { d as defineCustomElement$7 } from './p-fc21299d.js';
+import { d as defineCustomElement$6 } from './p-c07e3e6d.js';
+import { d as defineCustomElement$5 } from './p-32609f9f.js';
+import { d as defineCustomElement$4 } from './p-b6ee1a32.js';
+import { d as defineCustomElement$3 } from './p-566c1155.js';
+import { d as defineCustomElement$2 } from './p-03bdc4c0.js';
+
+const rtkChatMessagesUiCss = ":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{position:relative;display:flex;flex-direction:column;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));word-break:break-word}.chat-container{box-sizing:border-box;display:flex;flex-direction:column;padding-top:var(--rtk-space-4, 16px);padding-bottom:var(--rtk-space-4, 16px);flex:1 0 0px;overflow-y:scroll}.chat-container .spacer{flex:1 1 auto}.chat-container .chat{flex:0 0 auto}.file-picker{display:none}.chat .head{margin-bottom:var(--rtk-space-2, 8px);display:flex;align-items:center}.chat .head .name{margin-right:var(--rtk-space-2, 8px);font-size:12px;font-weight:700}.chat .head .time{font-size:12px;color:rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76))}.chat .body{overflow-wrap:break-word;line-height:1.5}.chat .body .emoji{font-size:24px}p{margin:var(--rtk-space-0, 0px);line-height:1.5}rtk-message-view{margin-top:var(--rtk-space-2, 8px);display:block;padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px);color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));box-sizing:border-box}rtk-message-view::part(message){flex-grow:1}*[is-continued] rtk-message-view{margin-top:var(--rtk-space-1, 4px)}.pinned .message-wrapper{position:relative}.pinned .pin-button{position:absolute;right:var(--rtk-space-4, 16px);top:calc(var(--rtk-space-4, 16px) * -1);display:flex;border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.pinned .pin-button:hover rtk-button{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-600, 13 81 253) / var(--tw-bg-opacity))}.pinned rtk-message-view{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));padding-top:var(--rtk-space-1, 4px);padding-bottom:var(--rtk-space-1, 4px)}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:var(--rtk-space-16, 64px);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}";
+const RtkChatMessagesUiStyle0 = rtkChatMessagesUiCss;
+
+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 RtkChatMessagesUi$1 = /*@__PURE__*/ proxyCustomElement(class RtkChatMessagesUi extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.onPinMessage = createEvent(this, "pinMessage", 7);
+        this.stateUpdate = createEvent(this, "rtkStateUpdate", 7);
+        this.observingEl = [];
+        this.autoScrollEnabled = true;
+        /** Chat Messages */
+        this.messages = [];
+        /** Can current user pin/unpin messages */
+        this.canPinMessages = false;
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        this.now = new Date();
+        this.showLatestMessageButton = false;
+        this.onScroll = (e) => {
+            const target = e.target;
+            writeTask(() => {
+                const { scrollTop, clientHeight, scrollHeight } = target;
+                const fromTop = scrollTop + clientHeight;
+                if (fromTop + 10 >= scrollHeight) {
+                    // at bottom
+                    this.autoScrollEnabled = true;
+                    this.showLatestMessageButton = false;
+                }
+                else {
+                    // not at bottom
+                    this.autoScrollEnabled = false;
+                }
+            });
+        };
+        this.scrollToBottom = () => {
+            smoothScrollToBottom(this.$chat);
+        };
+        this.observeMessage = (el) => {
+            if (el) {
+                this.observingEl.push(el);
+            }
+            try {
+                this.intersectionObserver.observe(el);
+            }
+            catch (_a) { }
+        };
+        this.getMessageActions = (message) => {
+            const actions = [];
+            if (!message.pinned && this.canPinMessages) {
+                actions.push({
+                    id: 'pin_message',
+                    label: this.t('pin'),
+                    icon: this.iconPack.pin,
+                });
+            }
+            return actions;
+        };
+        this.onMessageActionHandler = (actionId, message) => {
+            switch (actionId) {
+                case 'pin_message':
+                    this.onPinMessage.emit(message);
+                    break;
+            }
+        };
+    }
+    connectedCallback() {
+        var _a;
+        this.lastReadTimestamp = (_a = chatUnreadTimestamps['everyone']) !== null && _a !== void 0 ? _a : new Date('0001-01-01T00:00:00Z');
+        this.intersectionObserver = new IntersectionObserver((entries) => {
+            if (!document.hasFocus())
+                return;
+            writeTask(() => {
+                for (const entry of entries) {
+                    if (entry.isIntersecting) {
+                        const currTimestamp = parseInt(entry.target.getAttribute('data-timestamp'));
+                        if (currTimestamp > this.lastReadTimestamp.getTime()) {
+                            // this.lastReadTimestamp = new Date();
+                            chatUnreadTimestamps[this.selectedGroup] = new Date();
+                        }
+                    }
+                }
+            });
+        });
+        // update current time every minute
+        const updateNow = () => {
+            this.now = new Date();
+            this.timeout = setTimeout(() => {
+                if (this.request != null) {
+                    this.request = requestAnimationFrame(updateNow);
+                }
+            }, 60 * 1000);
+        };
+        this.request = requestAnimationFrame(updateNow);
+        this.chatChanged(this.messages);
+    }
+    componentDidLoad() {
+        this.$chat.addEventListener('scroll', this.onScroll);
+        this.$chat.scrollTop = this.$chat.scrollHeight;
+    }
+    componentDidRender() {
+        if (this.autoScrollEnabled) {
+            smoothScrollToBottom(this.$chat);
+        }
+        else if (this.autoScrollEnabled == null) {
+            // scroll to bottom on first render
+            smoothScrollToBottom(this.$chat, false);
+        }
+    }
+    chatChanged(messages) {
+        if (this.$chat == null)
+            return;
+        if (this.autoScrollEnabled || this.$chat.clientHeight === this.$chat.scrollHeight)
+            return;
+        for (let i = messages.length - 1; i >= 0; i--) {
+            if (messages[i].message.time > this.lastReadTimestamp &&
+                messages[i].message.userId !== this.selfUserId) {
+                // show latest message button when you have new messages
+                // and chat container is scrollable and autoscroll is not enabled
+                this.showLatestMessageButton = true;
+                break;
+            }
+        }
+    }
+    selectedBucketChanged() {
+        this.autoScrollEnabled = undefined;
+        this.observingEl.forEach((el) => {
+            this.intersectionObserver.unobserve(el);
+        });
+        this.observingEl = [];
+    }
+    disconnectedCallback() {
+        this.$chat.removeEventListener('scroll', this.onScroll);
+        this.intersectionObserver.disconnect();
+        clearTimeout(this.timeout);
+        cancelAnimationFrame(this.request);
+    }
+    render() {
+        var _a;
+        let prevMessage = null;
+        let reachedFirstUnread = false;
+        return (h(Host, { key: '5ca3e127c9abed47f6c172eb4c53fc6b398b4d41' }, h("div", { key: 'cd8dafbc18b733c313c49ecb6d117f70db9584b0', class: "chat-container scrollbar", ref: (el) => (this.$chat = el), part: "container" }, h("div", { key: 'd4d325263ff65ef30032ad15f086557b3ac10315', class: "spacer", part: "spacer" }), h("div", { key: 'd05b4717dd5f5b4fba9b7fc313073aed6b01e856', class: "chat", part: "chat" }, (_a = this.messages) === null || _a === void 0 ? void 0 : _a.map((item) => {
+            if (item.type === 'chat') {
+                const { message } = item;
+                const isSelfMessage = message.userId === this.selfUserId;
+                const isUnread = !isSelfMessage &&
+                    !this.autoScrollEnabled &&
+                    !reachedFirstUnread &&
+                    message.time > this.lastReadTimestamp;
+                if (isUnread)
+                    reachedFirstUnread = isUnread;
+                const isContinued = !isUnread &&
+                    message.userId === (prevMessage === null || prevMessage === void 0 ? void 0 : prevMessage.userId) &&
+                    differenceInMinutes(message.time, prevMessage === null || prevMessage === void 0 ? void 0 : prevMessage.time) < 2;
+                prevMessage = message;
+                return (h("div", { "is-continued": isContinued, key: item.message.id, ref: this.observeMessage, "data-timestamp": message.time.getTime(), class: message.pinned ? 'pinned' : '' }, isUnread && (h("div", { class: "new-chat-marker", part: "new-chat-marker" }, this.t('chat.new'))), h("div", { class: "message-wrapper" }, h("rtk-message-view", { time: message.time, actions: this.getMessageActions(message), authorName: message.displayName, hideAuthorName: true, hideAvatar: true, hideMetadata: true, viewType: 'incoming', variant: "bubble", onAction: (event) => this.onMessageActionHandler(event.detail, message) }, !isContinued && (h("div", { class: "head" }, h("div", { class: "name" }, message.displayName), !!message.time && (h("div", { class: "time", title: formatDateTime(message.time) }, elapsedDuration(message.time, new Date(Date.now())))))), h("div", { class: "body" }, message.type === 'text' && (h("rtk-text-message-view", { text: message.message, isMarkdown: true })), message.type === 'file' && (h("rtk-file-message-view", { name: message.name, url: message.link, size: message.size })), message.type === 'image' && (h("rtk-image-message-view", { url: message.link, onPreview: () => {
+                        this.stateUpdate.emit({ image: message });
+                    } })))), message.pinned && (h("div", { class: "pin-button", part: "pin-button" }, h("rtk-tooltip", { label: this.t('unpin') }, h("rtk-button", { kind: "icon", variant: "ghost", onClick: () => this.onMessageActionHandler('pin_message', message), disabled: !this.canPinMessages }, h("rtk-icon", { icon: this.iconPack.pin, size: "sm" }))))))));
+            }
+            return null;
+        }))), h("div", { key: '0079564252ee7102e54b7c62c162d7a1f3e18294', class: "show-new-messages-ctr" }, h("rtk-button", { key: '90531cde507557fe0068c4e97cef7ce98df6acff', class: {
+                'show-new-messages': true,
+                active: this.showLatestMessageButton,
+            }, kind: "icon", part: "show-new-messages", onClick: this.scrollToBottom }, h("rtk-icon", { key: '027cd1315f035a7ae3c093fb2ed22c6eda2cdae5', icon: this.iconPack.chevron_down })))));
+    }
+    static get watchers() { return {
+        "messages": ["chatChanged"],
+        "selectedGroup": ["selectedBucketChanged"]
+    }; }
+    static get style() { return RtkChatMessagesUiStyle0; }
+}, [1, "rtk-chat-messages-ui", {
+        "selectedGroup": [1, "selected-group"],
+        "messages": [16],
+        "selfUserId": [1, "self-user-id"],
+        "canPinMessages": [4, "can-pin-messages"],
+        "size": [513],
+        "iconPack": [16],
+        "t": [16],
+        "now": [32],
+        "showLatestMessageButton": [32]
+    }, undefined, {
+        "messages": ["chatChanged"],
+        "selectedGroup": ["selectedBucketChanged"]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkChatMessagesUi$1.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkChatMessagesUi$1.prototype, "t", void 0);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-chat-messages-ui", "rtk-avatar", "rtk-button", "rtk-file-message-view", "rtk-icon", "rtk-image-message-view", "rtk-markdown-view", "rtk-menu", "rtk-menu-item", "rtk-menu-list", "rtk-message-view", "rtk-spinner", "rtk-text-message-view", "rtk-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-chat-messages-ui":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkChatMessagesUi$1);
+            }
+            break;
+        case "rtk-avatar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "rtk-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "rtk-file-message-view":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "rtk-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "rtk-image-message-view":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "rtk-markdown-view":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "rtk-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "rtk-menu-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "rtk-menu-list":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "rtk-message-view":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "rtk-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "rtk-text-message-view":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "rtk-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
 
 const RtkChatMessagesUi = RtkChatMessagesUi$1;
 const defineCustomElement = defineCustomElement$1;