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

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

@@ -12,6 +12,9 @@ import { Host, h } from "@stencil/core";
 import { defaultIconPack, useLanguage } from "../../exports";
 import { SyncWithStore } from "../../utils/sync-with-store";
 import { TextMessageView } from "../rtk-text-message/components/TextMessage";
+/**
+ * @deprecated `rtk-channel-selector-ui` is deprecated and will be removed soon.
+ */
 export class RtkChannelSelectorUi {
     constructor() {
         /** Icon pack */
@@ -112,7 +115,7 @@ export class RtkChannelSelectorUi {
         }
     }
     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: {
@@ -122,7 +125,7 @@ export class RtkChannelSelectorUi {
                 }, 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 is() { return "rtk-channel-selector-ui"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,10 +8,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
                 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;
 };
-import { Host, h, Fragment, } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import { defaultIconPack } from "../../lib/icons";
 import { useLanguage } from "../../lib/lang";
-import { TEMPORARY_CHANNEL_PREFIX, alphabeticalSorter, getDMComparator, generateChatGroupKey, handleFilesDataTransfer, isDirectMessageChannel, parseMessageForTarget, stripOutReplyBlock, } from "../../utils/chat";
+import { TEMPORARY_CHANNEL_PREFIX, alphabeticalSorter, getDMComparator, generateChatGroupKey, handleFilesDataTransfer, isDirectMessageChannel, parseMessageForTarget, } from "../../utils/chat";
 import { chatUnreadTimestamps } from "../../utils/user-prefs";
 import { FlagsmithFeatureFlags } from "../../utils/flags";
 import { createDefaultConfig } from "../../exports";
@@ -134,11 +134,6 @@ export class RtkChat {
                 this.chatRecipientId = this.selectedGroup = 'everyone';
             }
         };
-        this.usePaginatedChat = () => {
-            if (this.isGroupCall && this.showPinnedMessages)
-                return false;
-            return this.selectedGroup === 'everyone';
-        };
         this.updateUnreadCountGroups = (obj) => {
             this.unreadCountGroups = Object.assign(Object.assign({}, this.unreadCountGroups), obj);
         };
@@ -262,17 +257,7 @@ export class RtkChat {
         };
         this.onNewMessageHandler = async (e) => {
             const message = e.detail;
-            if (this.isChatViewType) {
-                await this.meeting.chat.sendMessageToChannel(message, this.selectedChannelId, this.replyMessage
-                    ? {
-                        replyTo: this.replyMessage,
-                    }
-                    : {});
-                this.replyMessage = null;
-            }
-            else {
-                this.meeting.chat.sendMessage(message, this.getRecipientPeerIds());
-            }
+            this.meeting.chat.sendMessage(message, this.getRecipientPeerIds());
         };
         this.onEditMessageHandler = async (e) => {
             var _a, _b;
@@ -282,15 +267,6 @@ export class RtkChat {
         this.onEditCancel = () => {
             this.editingMessage = null;
         };
-        this.onSearchHandler = async (e) => {
-            this.searchQuery = e.detail;
-        };
-        this.onSearchDismissed = () => {
-            this.searchQuery = '';
-        };
-        this.onChannelCreateClicked = () => {
-            this.stateUpdate.emit({ activeChannelCreator: true });
-        };
         this.onPinMessage = (event) => {
             const message = event.detail;
             if (message.pinned) {
@@ -304,23 +280,6 @@ export class RtkChat {
             const message = event.detail;
             this.meeting.chat.deleteMessage(message.id);
         };
-        this.getChannelItems = () => {
-            return this.channels.map((channel) => {
-                const result = {
-                    id: channel.id,
-                    name: channel.displayName,
-                    avatarUrl: channel.displayPictureUrl,
-                };
-                if (channel.latestMessage) {
-                    result.latestMessage =
-                        channel.latestMessage.type === 'text'
-                            ? stripOutReplyBlock(channel.latestMessage.message)
-                            : '';
-                    result.latestMessageTime = channel.latestMessage.time;
-                }
-                return result;
-            });
-        };
         this.getPrivateChatRecipients = () => {
             const participants = this.getFilteredParticipants().map((participant) => {
                 const key = generateChatGroupKey([participant.userId, this.meeting.self.userId]);
@@ -395,31 +354,6 @@ export class RtkChat {
             this.canPinMessages =
                 ((_e = meeting === null || meeting === void 0 ? void 0 : meeting.__internals__) === null || _e === void 0 ? void 0 : _e.features.hasFeature(FlagsmithFeatureFlags.PINNED_MESSAGES)) &&
                     meeting.self.permissions.pinParticipant;
-            this.isGroupCall = meeting.meta.viewType === 'GROUP_CALL';
-            this.isChatViewType = meeting.meta.viewType === 'CHAT';
-            if (this.isChatViewType) {
-                this.onChannelCreateOrUpdate();
-                const validChannels = this.channels.filter((channel) => !channel.id.includes(TEMPORARY_CHANNEL_PREFIX));
-                if (validChannels.length) {
-                    this.selectedChannelId = this.channels[0].id;
-                }
-                if (this.resizeObserver) {
-                    this.resizeObserver.disconnect();
-                }
-                this.resizeObserver = new ResizeObserver((entries) => {
-                    for (const entry of entries) {
-                        if (entry.contentBoxSize[0].inlineSize < 758) {
-                            this.selectorState = 'hide';
-                        }
-                        else {
-                            this.selectorState = 'desktop';
-                        }
-                    }
-                });
-                if (this.isChatViewType) {
-                    this.resizeObserver.observe(this.host);
-                }
-            }
             this.initializeChatGroups();
             // shallow copy to trigger render
             this.chatGroups = Object.assign({}, this.chatGroups);
@@ -430,12 +364,6 @@ export class RtkChat {
                 meeting.participants.joined.addListener('participantJoined', this.onParticipantUpdate);
                 meeting.participants.joined.addListener('participantLeft', this.onParticipantUpdate);
             }
-            if (this.isChatViewType) {
-                meeting.chat.addListener('channelCreate', this.onChannelCreateOrUpdate);
-                meeting.chat.addListener('channelUpdate', this.onChannelCreateOrUpdate);
-                meeting.chat.addListener('channelMessageUpdate', this.onChannelCreateOrUpdate);
-                meeting.participants.all.addListener('participantsUpdate', this.onChannelCreateOrUpdate);
-            }
         }
     }
     chatGroupsChanged(chatGroups) {
@@ -511,17 +439,8 @@ export class RtkChat {
     channelSwitchListener(e) {
         this.onChannelChanged(e);
     }
-    renderHeadlessComponents() {
-        return (h(Fragment, null, h("rtk-dialog-manager", { meeting: this.meeting }), h("rtk-notifications", { meeting: this.meeting })));
-    }
     renderComposerUI() {
         var _a, _b, _c;
-        if (this.isChatViewType && this.channels.length === 0)
-            return null;
-        if (this.isChatViewType && this.searchQuery !== '')
-            return null;
-        if (this.isChatViewType && !this.selectedChannelId)
-            return null;
         if (this.chatRecipientId === 'everyone') {
             if (!this.canSendTextMessage && !this.canSendFiles)
                 return null;
@@ -535,32 +454,16 @@ export class RtkChat {
         const quotedMessage = this.replyMessage ? this.replyMessage.message : '';
         return (h("rtk-chat-composer-view", Object.assign({ message: message, storageKey: (_a = this.selectedChannelId) !== null && _a !== void 0 ? _a : `draft-${this.selectedChannelId}`, quotedMessage: quotedMessage, isEditing: !!this.editingMessage, canSendTextMessage: this.isTextMessagingAllowed(), canSendFiles: this.isFileMessagingAllowed(), disableEmojiPicker: !!((_c = (_b = this.meeting) === null || _b === void 0 ? void 0 : _b.__internals__) === null || _c === void 0 ? void 0 : _c.features.hasFeature(FlagsmithFeatureFlags.DISABLE_EMOJI_PICKER)), maxLength: this.meeting.chat.maxTextLimit, rateLimits: this.meeting.chat.rateLimits, inputTextPlaceholder: this.t('chat.message_placeholder'), onNewMessage: this.onNewMessageHandler, onEditMessage: this.onEditMessageHandler, onEditCancel: this.onEditCancel, onQuotedMessageDismiss: this.onQuotedMessageDismiss }, uiProps), h("slot", { name: "chat-addon", slot: "chat-addon" })));
     }
-    renderFullChat() {
-        if (this.creatingChannel) {
-            return (h("div", { class: "banner" }, h("rtk-spinner", { size: "lg" })));
-        }
-        if (this.channels.length === 0 || !this.selectedChannelId) {
-            return (h("div", { class: "banner" }, h("rtk-icon", { icon: this.iconPack.create_channel_illustration, slot: "start", class: 'create-channel-illustration' }), h("rtk-button", { kind: "wide", variant: "primary", size: "md", onClick: this.onChannelCreateClicked, class: "welcome-new-channel" }, h("rtk-icon", { icon: this.iconPack.add, slot: "start" }), h("span", null, this.t('chat.new_channel'))), (this.selectorState === 'mobile' || this.selectorState === 'hide') && (h("rtk-button", { kind: "button", variant: "secondary", size: "md", class: "view-chats-btn", onClick: () => {
-                    this.selectorState = 'mobile';
-                } }, h("rtk-icon", { icon: this.iconPack.chat, slot: "start" }), h("span", null, this.t('chat.view_chats'))))));
-        }
-        const selectedChannel = this.channels.find((channel) => channel.id === this.selectedChannelId);
-        return (h("div", { class: "chat" }, h("rtk-channel-header", { slot: "header", meeting: this.meeting, channel: selectedChannel, onSearch: this.onSearchHandler, onSearchDismissed: this.onSearchDismissed, showBackButton: this.selectorState === 'mobile' || this.selectorState === 'hide', onBack: () => {
-                this.selectorState = 'mobile';
-            } }), this.searchQuery !== '' && (h("rtk-chat-search-results", { meeting: this.meeting, query: this.searchQuery, channelId: this.selectedChannelId })), this.searchQuery === '' && (h("rtk-chat-messages-ui-paginated", { meeting: this.meeting, size: this.size, iconPack: this.iconPack, t: this.t, selectedChannelId: this.selectedChannelId, selectedChannel: selectedChannel }))));
-    }
     render() {
-        var _a, _b;
+        var _a;
         if (!this.meeting) {
             return null;
         }
-        const uiProps = { iconPack: this.iconPack, t: this.t, size: this.size };
-        const selfUserId = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.self.userId;
         let chatMessages = this.chatGroups[this.selectedGroup] || [];
         if (this.showPinnedMessages && this.meeting.chat.pinned.length !== 0) {
             chatMessages = chatMessages.filter((chat) => chat.type === 'chat' && chat.message.pinned);
         }
-        return (h(Host, null, this.isChatViewType && this.renderHeadlessComponents(), h("div", { class: "chat-container" }, this.isChatViewType && (h("div", { class: { 'selector-container': true, [this.selectorState]: true } }, h("rtk-channel-selector-view", { channels: this.getChannelItems(), selectedChannelId: this.selectedChannelId, onChannelChange: this.onChannelChanged, t: this.t }, h("div", { class: "channel-selector-header", slot: "header" }, h("rtk-logo", { meeting: this.meeting, config: this.config, t: this.t }), h("rtk-tooltip", { label: this.t('chat.new_channel') }, h("rtk-button", { kind: "button", variant: "ghost", size: "md", onClick: this.onChannelCreateClicked, class: "channel-create-btn" }, h("rtk-icon", { icon: this.iconPack.add }))))), h("rtk-button", { kind: "icon", variant: "ghost", class: "mobile-close-btn", onClick: () => (this.selectorState = 'hide') }, h("rtk-icon", { icon: this.iconPack.dismiss })))), h("div", { class: "chat" }, this.isFileMessagingAllowed() && (h("div", { id: "dropzone", class: { active: this.dropzoneActivated }, part: "dropzone" }, h("rtk-icon", { icon: this.iconPack.attach }), h("p", null, this.t('chat.send_attachment')))), this.renderPinnedMessagesHeader(), this.isPrivateChatSupported() && (h("rtk-channel-selector-view", { channels: this.getPrivateChatRecipients(), selectedChannelId: ((_b = this.selectedParticipant) === null || _b === void 0 ? void 0 : _b.userId) || 'everyone', onChannelChange: this.updateRecipients, t: this.t, viewAs: "dropdown" })), this.isChatViewType ? (this.renderFullChat()) : this.usePaginatedChat() ? (h("rtk-chat-messages-ui-paginated", { meeting: this.meeting, onPinMessage: this.onPinMessage, onDeleteMessage: this.onDeleteMessage, size: this.size, iconPack: this.iconPack, t: this.t })) : (h("rtk-chat-messages-ui", Object.assign({ messages: chatMessages, selfUserId: selfUserId, selectedGroup: this.selectedGroup, onPinMessage: this.onPinMessage, canPinMessages: this.canPinMessages }, uiProps))), this.renderComposerUI()))));
+        return (h(Host, null, h("div", { class: "chat-container" }, h("div", { class: "chat" }, this.isFileMessagingAllowed() && (h("div", { id: "dropzone", class: { active: this.dropzoneActivated }, part: "dropzone" }, h("rtk-icon", { icon: this.iconPack.attach }), h("p", null, this.t('chat.send_attachment')))), this.renderPinnedMessagesHeader(), this.isPrivateChatSupported() && (h("rtk-channel-selector-view", { channels: this.getPrivateChatRecipients(), selectedChannelId: ((_a = this.selectedParticipant) === null || _a === void 0 ? void 0 : _a.userId) || 'everyone', onChannelChange: this.updateRecipients, t: this.t, viewAs: "dropdown" })), h("rtk-chat-messages-ui-paginated", { meeting: this.meeting, onPinMessage: this.onPinMessage, onDeleteMessage: this.onDeleteMessage, size: this.size, iconPack: this.iconPack, t: this.t }), this.renderComposerUI()))));
     }
     static get is() { return "rtk-chat"; }
     static get encapsulation() { return "shadow"; }

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

@@ -12,6 +12,7 @@ import { Host, h } from "@stencil/core";
 import { defaultIconPack } from "../../exports";
 import { useLanguage } from "../../lib/lang";
 import { SyncWithStore } from "../../utils/sync-with-store";
+/** @deprecated `rtk-chat-message` is deprecated and will be removed soon. Use `rtk-message-view` instead. */
 export class RtkChatMessage {
     constructor() {
         /** Icon pack */
@@ -84,11 +85,11 @@ export class RtkChatMessage {
             } })));
     }
     render() {
-        return (h(Host, { key: '50c4021e3c717d8d2c7e035ce6541adca05ca3d2' }, h("div", { key: '1f5a0d679baea7ea72855846f57fa8419e46f019', class: {
+        return (h(Host, { key: 'bb57da6f918abbb5ac45ad27918b324e06f5f47d' }, h("div", { key: '3133549cf8398237362d4d10840d4f9c8bdf1768', class: {
                 'message-wrapper': true,
                 'align-right': this.alignRight,
                 'left-align': this.leftAlign,
-            }, "is-continued": this.isContinued }, this.renderAvatar(), h("div", { key: '1f11244450725426035076a80fcc41a76ef0b7a4', class: {
+            }, "is-continued": this.isContinued }, this.renderAvatar(), h("div", { key: '472129bc5b809f989b36d48fd898c9b62a5eddcc', class: {
                 message: true,
                 'show-on-hover': !this.isTouchDevice(),
             }, "is-continued": this.isContinued }, this.renderMessage(), this.renderControls()))));

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

@@ -8,13 +8,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
                 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;
 };
-import { Host, h, writeTask, } from "@stencil/core";
+import { Build, Host, h, writeTask, } from "@stencil/core";
 import { defaultIconPack } from "../../exports";
 import { useLanguage } from "../../lib/lang";
 import { differenceInMinutes, elapsedDuration, formatDateTime } from "../../utils/date";
 import { smoothScrollToBottom } from "../../utils/scroll";
 import { chatUnreadTimestamps } from "../../utils/user-prefs";
 import { SyncWithStore } from "../../utils/sync-with-store";
+let hasShownDeprecationWarning = false;
+/**
+ * @deprecated Use `rtk-chat-messages-ui-paginated` instead.
+ */
 export class RtkChatMessagesUi {
     constructor() {
         this.observingEl = [];
@@ -80,6 +84,11 @@ export class RtkChatMessagesUi {
     }
     connectedCallback() {
         var _a;
+        if (Build.isDev && !hasShownDeprecationWarning) {
+            hasShownDeprecationWarning = true;
+            // eslint-disable-next-line no-console
+            console.warn('[realtimekit-ui] `rtk-chat-messages-ui` is deprecated and will be removed in a future release. Use `rtk-chat-messages-ui-paginated` instead.');
+        }
         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())
@@ -153,7 +162,7 @@ export class RtkChatMessagesUi {
         var _a;
         let prevMessage = null;
         let reachedFirstUnread = false;
-        return (h(Host, { key: '1e44ac8e6bd0eabff25aaedb905d80fb4007903d' }, h("div", { key: 'ffbb1fe97efc2408e2ee7e4bccef1cc8a3100b66', class: "chat-container scrollbar", ref: (el) => (this.$chat = el), part: "container" }, h("div", { key: '58d11c81a25a0760d3bdd9e60a8a6d0a96c022c2', class: "spacer", part: "spacer" }), h("div", { key: 'be68b5ccfd53bc7ec4c7dc23b10fe325a7c54314', class: "chat", part: "chat" }, (_a = this.messages) === null || _a === void 0 ? void 0 : _a.map((item) => {
+        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;
@@ -172,10 +181,10 @@ export class RtkChatMessagesUi {
                     } })))), 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: 'ae321cae98279cb45e61968b5fab1806d8ae2f33', class: "show-new-messages-ctr" }, h("rtk-button", { key: 'e593e952615692612b2423e49975f97bb22df0fe', class: {
+        }))), 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: '454e7ecb90b1660b882bb6f988beb1d7d0494d5f', icon: this.iconPack.chevron_down })))));
+            }, kind: "icon", part: "show-new-messages", onClick: this.scrollToBottom }, h("rtk-icon", { key: '027cd1315f035a7ae3c093fb2ed22c6eda2cdae5', icon: this.iconPack.chevron_down })))));
     }
     static get is() { return "rtk-chat-messages-ui"; }
     static get encapsulation() { return "shadow"; }

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

@@ -123,7 +123,9 @@ export class RtkChatMessagesUiPaginated {
                             .find((member) => member.userId === message.userId)) === null || _b === void 0 ? void 0 : _b.picture) !== null && _c !== void 0 ? _c : (_d = this.meeting.participants.waitlisted.toArray().find((p) => p.userId === message.userId)) === null || _d === void 0 ? void 0 : _d.picture;
                 }
             }
-            return (h("div", { class: { pinned: message.pinned } }, h("div", { class: "message-wrapper" }, h("rtk-message-view", { time: message.time, actions: this.getMessageActions(message), authorName: message.displayName, avatarUrl: displayPicture, hideAuthorName: isContinued, viewType: 'incoming', variant: "bubble", onAction: (event) => this.onMessageActionHandler(event.detail, message) }, h("div", null, h("div", { class: "body" }, message.type === 'text' && (h("rtk-text-message-view", { text: message.message, isMarkdown: true })), message.type === 'file' && (h("rtk-file-message-view", { name: message.name, url: message.link, size: message.size })), message.type === 'image' && (h("rtk-image-message-view", { url: message.link, onPreview: () => {
+            const isSelf = message.userId === this.meeting.self.userId;
+            const viewType = isSelf ? 'outgoing' : 'incoming';
+            return (h("div", { class: { pinned: message.pinned } }, h("div", { class: "message-wrapper" }, h("rtk-message-view", { time: message.time, actions: this.getMessageActions(message), authorName: message.displayName, isSelf: isSelf, avatarUrl: displayPicture, hideAuthorName: isContinued, viewType: viewType, variant: "bubble", onAction: (event) => this.onMessageActionHandler(event.detail, message) }, h("div", null, h("div", { class: "body" }, message.type === 'text' && (h("rtk-text-message-view", { text: message.message, isMarkdown: true })), message.type === 'file' && (h("rtk-file-message-view", { name: message.name, url: message.link, size: message.size })), message.type === 'image' && (h("rtk-image-message-view", { url: message.link, onPreview: () => {
                     this.stateUpdate.emit({ image: message });
                 } }))), message.pinned && (h("div", { class: "pin-icon", part: "pin-icon" }, h("rtk-icon", { icon: this.iconPack.pin, size: "sm" }))))))));
         };
@@ -171,7 +173,7 @@ export class RtkChatMessagesUiPaginated {
         this.lastReadMessageIndex = -1;
     }
     render() {
-        return (h(Host, { key: 'd0ae21ca32589c18ede4b1e4b4682f5b82b58320' }, h("rtk-paginated-list", { key: 'bff3bdae7c6bbefed8dd8b478ac60370067c75a6', ref: (el) => (this.$paginatedListRef = el), pageSize: this.pageSize, pagesAllowed: 3, fetchData: this.getChatMessages, createNodes: this.createChatNodes, selectedItemId: this.selectedChannelId, emptyListLabel: this.t('chat.empty_channel') }, h("slot", { key: '043cfe627a1056c2267dd00705ff33e7e96f1f89' }))));
+        return (h(Host, { key: '9716b4db0dbae3308a056693341635d93c0d1227' }, h("rtk-paginated-list", { key: '4b540e565aa0d7031ad8c84f35cadb07d207abfe', ref: (el) => (this.$paginatedListRef = el), pageSize: this.pageSize, pagesAllowed: 3, fetchData: this.getChatMessages, createNodes: this.createChatNodes, selectedItemId: this.selectedChannelId, emptyListLabel: this.t('chat.empty_channel') }, h("slot", { key: '41ffb56aea7e02f3c20f8ea261638d6fd9d80232' }))));
     }
     static get is() { return "rtk-chat-messages-ui-paginated"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-chat-search-results/rtk-chat-search-results.js

@@ -11,6 +11,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { h, Host } from "@stencil/core";
 import { defaultIconPack, useLanguage } from "../../exports";
 import { SyncWithStore } from "../../utils/sync-with-store";
+/** @deprecated `rtk-chat-search-results` is deprecated and will be removed soon. Use `rtk-chat-messages-ui-paginated` instead. -*/
 export class RtkChatSearchResults {
     constructor() {
         /** Icon pack */
@@ -31,7 +32,7 @@ export class RtkChatSearchResults {
         };
     }
     render() {
-        return (h(Host, { key: '9947c793cb766158d4ed3d81871bbdb8b60274af' }, h("rtk-paginated-list", { key: '0d91dc8818b08c7ed053728074c483f159811a41', pageSize: this.pageSize, pagesAllowed: 3, fetchData: this.searchMessages, createNodes: this.nodeRenderer, selectedItemId: this.query })));
+        return (h(Host, { key: '6876b825ec6df02a21a40b29084dbd7cefed7b03' }, h("rtk-paginated-list", { key: 'ab78b5cf7955f090038eb28665d66101fd5297f9', pageSize: this.pageSize, pagesAllowed: 3, fetchData: this.searchMessages, createNodes: this.nodeRenderer, selectedItemId: this.query })));
     }
     static get is() { return "rtk-chat-search-results"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-dialog-manager/rtk-dialog-manager.js

@@ -132,12 +132,6 @@ export class RtkDialogManager {
                     this.updateStoreState('activeMuteAllConfirmation', false);
                 }, iconPack: this.iconPack, t: this.t }, h("rtk-mute-all-confirmation", Object.assign({}, defaults)))));
         }
-        else if (states === null || states === void 0 ? void 0 : states.activeChannelCreator) {
-            return (h(Host, null, h("rtk-dialog", { open: true, onRtkDialogClose: () => {
-                    this.updateStoreState('activeChannelCreator', false);
-                }, iconPack: this.iconPack, t: this.t }, h("rtk-channel-creator", Object.assign({}, defaults)))));
-        }
-        return null;
     }
     static get is() { return "rtk-dialog-manager"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-file-message/rtk-file-message.js

@@ -16,6 +16,7 @@ import { downloadFile, getExtension, getFileSize } from "../../utils/file";
 import { SyncWithStore } from "../../utils/sync-with-store";
 import { useLanguage } from "../../lib/lang";
 /**
+ * @deprecated `rtk-file-message` is deprecated and will be removed soon. Use `rtk-file-message-view` instead.
  * A component which renders a file message from chat.
  */
 export class RtkFileMessage {
@@ -33,10 +34,10 @@ export class RtkFileMessage {
     }
     render() {
         const link = sanitizeLink(this.message.link);
-        return (h(Host, { key: '771fc8ccb2700a3fba83f04676a0c4396c1a8a41' }, !this.isContinued && (h(ChatHead, { key: 'ef2d83897dcae870bb7a2b0eeef397585b873b77', name: this.message.displayName, time: this.message.time, now: this.now })), h("div", { key: '841039fcad32f254653bd490a98f268479345b44', class: {
+        return (h(Host, { key: '8796e55e793db9aeb4ede2d57524bc38aa817ddf' }, !this.isContinued && (h(ChatHead, { key: '7018209894272b21e1f5225d7bad92de5107d0d7', name: this.message.displayName, time: this.message.time, now: this.now })), h("div", { key: 'd30878670f4e90b35578ac616761645e5744c7cd', class: {
                 body: true,
                 bubble: this.showBubble,
-            }, part: "body" }, h("div", { key: '65e3c8aafa4e9fa55a24264685bb0cf20841048a', class: "file" }, h("div", { key: '1b1e97b1518c5471964ea91889f4500fc0e01e03', class: "file-data" }, h("div", { key: 'ff9d3071b528162f6e796ccb49e2472df2e8d364', class: "name" }, this.message.name), h("div", { key: '1d3ccb1f5bc2a94983de216e77a8ebc0ae07d669', class: "file-data-split" }, h("div", { key: 'ebab32b642e097b3c1c1903269a8d76fbd586f5c', class: "ext" }, getExtension(this.message.name)), h("span", { key: '81ee3600ba18a7689706504befebcf02697a56e7', class: "divider" }), h("div", { key: 'e969a8d6221d8af560a26510c38a92406a18ef2a', class: "size" }, getFileSize(this.message.size)))), h("rtk-button", { key: '482c27659f71cfebf9f88fdf538e32baa6b87073', variant: "secondary", kind: "icon", onClick: () => downloadFile(link, { name: this.message.name, fallbackName: 'file' }), part: "button" }, h("rtk-icon", { key: '4efaeb927b4ea2010eed09227eb7f511b9253017', icon: this.iconPack.download }))))));
+            }, part: "body" }, h("div", { key: '73ba1a2b1aaacec88930605d5a826d32ad56581e', class: "file" }, h("div", { key: '17234fd57360f3a7953ce898282240e03b94eb58', class: "file-data" }, h("div", { key: '07424973ceeb567efee25cb45eca09792482cd21', class: "name" }, this.message.name), h("div", { key: '255087ceadb46be8da915d2b9134b3922f9a50b7', class: "file-data-split" }, h("div", { key: 'a01185efdf779d87548e1b7d73dfad823dbbd611', class: "ext" }, getExtension(this.message.name)), h("span", { key: 'a129cb26284432bbfad635dc3774309fbadc8fec', class: "divider" }), h("div", { key: '0af8af2f2d18c0a1d72bc5040bdabb1f06209840', class: "size" }, getFileSize(this.message.size)))), h("rtk-button", { key: '522a0378351016927ca644cce5db710336bf348b', variant: "secondary", kind: "icon", onClick: () => downloadFile(link, { name: this.message.name, fallbackName: 'file' }), part: "button" }, h("rtk-icon", { key: '8d49abfffb8149adc9fd3e9f214b54a1f642edc3', icon: this.iconPack.download }))))));
     }
     static get is() { return "rtk-file-message"; }
     static get properties() {

package/dist/collection/components/rtk-image-message/rtk-image-message.js

@@ -16,6 +16,7 @@ import { downloadFile } from "../../utils/file";
 import { useLanguage } from "../../lib/lang";
 import { SyncWithStore } from "../../utils/sync-with-store";
 /**
+ * @deprecated `rtk-image-message` is deprecated and will be removed soon. Use `rtk-image-message-view` instead.
  * A component which renders an image message from chat.
  */
 export class RtkImageMessage {
@@ -33,10 +34,10 @@ export class RtkImageMessage {
         this.status = 'loading';
     }
     render() {
-        return (h(Host, { key: '7e0fc95aff5f4db94f4ec0ba3c4dcd4d2ee9ffa6' }, !this.isContinued && (h(ChatHead, { key: 'cc7f214502f49fe2869f3e9bdfd797926987ef74', name: this.message.displayName, time: this.message.time, now: this.now })), h("div", { key: '2e61a7320c1941df7c0d13082a9257e47ec5df58', class: {
+        return (h(Host, { key: 'bcbf806340704a0f288efdf06bc0712e2e296e1b' }, !this.isContinued && (h(ChatHead, { key: 'c7c64c22e4a0d37dd405d83f537e0ac858ee85f4', name: this.message.displayName, time: this.message.time, now: this.now })), h("div", { key: '61bff7a6569ea50b9c6bc54fe71c1591a4079bb0', class: {
                 body: true,
                 bubble: this.showBubble,
-            }, part: "body" }, h("div", { key: 'bf2eec18c82aae79f31c40d44711ec7db2ab5bf1', class: { image: true, loaded: this.status === 'loaded' } }, h("img", { key: 'acb8f5ef169bd0c663dbc74c1d43b4186f81004a', src: sanitizeLink(this.message.link), onLoad: () => {
+            }, part: "body" }, h("div", { key: '56740ce9648a6b580c338dc69eec4f0bb09e200b', class: { image: true, loaded: this.status === 'loaded' } }, h("img", { key: '46616303b6eaca3831083a5603aade677e8e27f1', src: sanitizeLink(this.message.link), onLoad: () => {
                 this.status = 'loaded';
             }, onError: () => {
                 this.status = 'errored';
@@ -44,9 +45,9 @@ export class RtkImageMessage {
                 if (this.status === 'loaded') {
                     this.stateUpdate.emit({ image: this.message });
                 }
-            } }), this.status === 'loading' && (h("div", { key: '92a6610a937088e03200f9048146da0e4f749054', class: "image-spinner", title: this.t('chat.img.loading'), "aria-label": this.t('chat.img.loading') }, h("rtk-spinner", { key: 'b85fa3e9dd0580f1d7e18360e74670a933e74367', iconPack: this.iconPack }))), this.status === 'errored' && (h("div", { key: 'b1046aff30dfe244498c957799f33c3a7c26ecb8', class: "image-errored", title: this.t('chat.error.img_not_found'), "aria-label": this.t('chat.error.img_not_found') }, h("rtk-icon", { key: '833e3ea7f7734a17450c98077e52b9db4fb5404a', icon: this.iconPack.image_off }))), this.status === 'loaded' && (h("div", { key: '2545e3685f6e586b4fdc1304da08bbece5ec2cda', class: "actions" }, h("rtk-button", { key: 'bb5e37862d82702f6350f48c275100825dd494fa', class: "action", variant: "secondary", kind: "icon", onClick: () => {
+            } }), this.status === 'loading' && (h("div", { key: 'dac71a4e7e4d02b7e92386f92e2b066d31dc1c94', class: "image-spinner", title: this.t('chat.img.loading'), "aria-label": this.t('chat.img.loading') }, h("rtk-spinner", { key: '6c7b01868932f2ed0e6602d68caecb9b38d4f47b', iconPack: this.iconPack }))), this.status === 'errored' && (h("div", { key: '87c343f4a62662bc100361acf7aba9d3df31705f', class: "image-errored", title: this.t('chat.error.img_not_found'), "aria-label": this.t('chat.error.img_not_found') }, h("rtk-icon", { key: '35851cf346c3d873cf0f27d8520df278c9b7cfa1', icon: this.iconPack.image_off }))), this.status === 'loaded' && (h("div", { key: '37e07aef242ef26e57a5ec96e4a127d8ad27dc82', class: "actions" }, h("rtk-button", { key: 'f32b44c453061e7ba41a67f1c266f634ad0a6cc3', class: "action", variant: "secondary", kind: "icon", onClick: () => {
                 this.stateUpdate.emit({ image: this.message });
-            } }, h("rtk-icon", { key: '247f754dfe4c9b63634906105a71bb2146154eaa', icon: this.iconPack.full_screen_maximize })), h("rtk-button", { key: 'ab2712266ddce6f79abf1fca68379abcb4a3c9a1', class: "action", variant: "secondary", kind: "icon", onClick: () => downloadFile(this.message.link, { fallbackName: 'image' }) }, h("rtk-icon", { key: 'ffafa0e22d7752b125d0e1e50cfc03d858d29365', icon: this.iconPack.download }))))))));
+            } }, h("rtk-icon", { key: '4a6c1cfe87d356e1f39db04b3536f9e9e3ca1b34', icon: this.iconPack.full_screen_maximize })), h("rtk-button", { key: 'e22f94520b0ead2db124e6a65ad110ea029855f3', class: "action", variant: "secondary", kind: "icon", onClick: () => downloadFile(this.message.link, { fallbackName: 'image' }) }, h("rtk-icon", { key: 'a5f7b58d27a12e8754db70c9d56facc547883d4f', icon: this.iconPack.download }))))))));
     }
     static get is() { return "rtk-image-message"; }
     static get originalStyleUrls() {

package/dist/collection/components/rtk-message-view/rtk-message-view.css

@@ -37,6 +37,7 @@ p {
 .message-wrapper {
   display: flex;
   flex-direction: row-reverse;
+  align-items: flex-start;
   gap: var(--rtk-space-2, 8px);
 }
 .message-wrapper.incoming {
@@ -45,15 +46,23 @@ p {
 .message {
   display: flex;
   flex-direction: column;
+  align-items: flex-end;
 }
+
+.incoming .message {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
 .header {
+  margin-top: var(--rtk-space-1, 4px);
   margin-bottom: var(--rtk-space-1, 4px);
   align-self: flex-end;
   color: rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));
-  font-size: 14px;
+  font-size: 12px;
   font-weight: 600;
 }
-
 .incoming .header {
   align-self: flex-start;
 }
@@ -69,29 +78,34 @@ p {
   position: relative;
 }
 
-.body .metadata {
-  margin-top: var(--rtk-space-2, 8px);
-  align-self: flex-end;
-  font-size: 10px;
-}
-
 .bubble {
-  max-width: var(--rtk-space-96, 384px);
+  max-width: 90%;
   padding: var(--rtk-space-2, 8px);
+  border-width: 1px;
+  border-style: solid;
+  --tw-border-opacity: 1;
+  border-color: rgba(var(--rtk-colors-brand-600, 13 81 253) / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
-  background-color: rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-bg-opacity));
+  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)));
   border-radius: var(--rtk-border-radius-md, 8px);
 }
 
 .incoming .bubble {
-  width: -moz-fit-content;
-  width: fit-content;
+  --tw-border-opacity: 1;
+  border-color: rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
   background-color: rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));
   color: rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));
 }
 
+.metadata {
+  margin-top: var(--rtk-space-2, 8px);
+  align-self: flex-end;
+  font-size: 10px;
+  color: rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76));
+}
+
 .avatar {
   display: none;
 }

package/dist/collection/components/rtk-message-view/rtk-message-view.js

@@ -22,6 +22,8 @@ export class RtkMessageView {
         this.viewType = 'outgoing';
         /** Hides avatar */
         this.hideAvatar = false;
+        /** Is the message sent by the current user */
+        this.isSelf = false;
         /** Hides author display label */
         this.hideAuthorName = false;
         /** Hides metadata (time) */
@@ -33,7 +35,7 @@ export class RtkMessageView {
         return (h("rtk-menu", { placement: "top-end", offset: 1 }, h("button", { slot: "trigger", class: "actions" }, h("rtk-icon", { icon: this.iconPack.chevron_down })), h("rtk-menu-list", null, this.actions.map((action) => (h("rtk-menu-item", { onClick: () => this.onAction.emit(action.id) }, action.icon && h("rtk-icon", { icon: action.icon, slot: "start" }), action.label))))));
     }
     render() {
-        return (h(Host, { key: '9fafe4370eee525631023ecde39b3293059e8c22' }, h("div", { key: '1718981905d4458d0862c34c3c342f7335f0921b', class: { 'message-wrapper': true, [this.viewType]: true } }, !this.hideAvatar && (h("aside", { key: 'c6ea0c46283a7faa4bb937cb4196e2e1d548c721', class: "avatar", part: "avatar" }, h("rtk-avatar", { key: 'e3181a831b75b5c79f212da64076dbf6b47fecca', participant: { name: this.authorName, picture: this.avatarUrl }, size: "sm" }))), h("div", { key: '5565b5711055f1cd543cfaa36c03789b82fb94fa', class: "message", part: "message" }, !this.hideAuthorName && h("div", { key: '613098d825ba1c33aaca53579c883a306ed1239d', class: "header" }, this.authorName), h("div", { key: '166dd3e4fb33876cd74f94a7ac193064e8778f81', class: { body: true, bubble: this.variant === 'bubble' } }, h("slot", { key: 'd04e722b66c4d7cb7c20952a9e7c70d048e66410' }), !this.hideMetadata && !!this.time && (h("div", { key: 'f12d8c9dd8320202a6906c10298d3357aff5d762', class: "metadata", title: formatDateTime(this.time) }, elapsedDuration(this.time, new Date(Date.now())))), this.actions.length !== 0 && this.renderActions())))));
+        return (h(Host, { key: '61882011f477f816296277a4f2d5622d224e47f0' }, h("div", { key: 'ae21bfc0c499879da6a2167f0cad5203475de696', class: { 'message-wrapper': true, [this.viewType]: true } }, !this.hideAvatar && (h("aside", { key: '73b10ebb1dccdc4e2c9258f185eb14f07d11d542', class: "avatar", part: "avatar" }, h("rtk-avatar", { key: 'e07971bf9d7738fb2dcc015d339a13d5dca7c6f7', participant: { name: this.authorName, picture: this.avatarUrl }, size: "sm" }))), h("div", { key: '1e24801f717589e598c4160bea7ab10a59acfcc2', class: "message", part: "message" }, !this.hideAuthorName && (h("div", { key: '3178f750ad798b7d83508f82ead36ee5407fee4c', class: "header" }, this.authorName, " ", this.isSelf ? ' (You)' : '')), h("div", { key: '056445ef0c557d7d756330df5778ad8bc2d41e60', class: { body: true, bubble: this.variant === 'bubble' } }, h("slot", { key: '6d5486666ce2238e4387c2621d562b24704a9317' }), !this.hideMetadata && !!this.time && (h("div", { key: '1d4b9bdbb3aaf288dce4b43a31354df3d413b2b4', class: "metadata", title: formatDateTime(this.time) }, elapsedDuration(this.time, new Date(Date.now())))), this.actions.length !== 0 && this.renderActions())))));
     }
     static get is() { return "rtk-message-view"; }
     static get encapsulation() { return "shadow"; }
@@ -171,6 +173,26 @@ export class RtkMessageView {
                 "attribute": "author-name",
                 "reflect": false
             },
+            "isSelf": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Is the message sent by the current user"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "is-self",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "hideAuthorName": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/rtk-paginated-list/rtk-paginated-list.css

@@ -32,9 +32,10 @@
   flex-direction: column-reverse;
   padding-top: var(--rtk-space-4, 16px);
   padding-bottom: var(--rtk-space-4, 16px);
+  padding-left: var(--rtk-space-2, 8px);
+  padding-right: var(--rtk-space-2, 8px);
   flex: 1 0 0px;
   overflow-y: scroll;
-  /* overflow-anchor: none; */
 }
 .file-picker {
   display: none;

package/dist/collection/components/rtk-paginated-list/rtk-paginated-list.js

@@ -16,8 +16,6 @@ import { SyncWithStore } from "../../utils/sync-with-store";
 import { smoothScrollToBottom } from "../../utils/scroll";
 export class RtkPaginatedList {
     constructor() {
-        /** auto scroll list to bottom */
-        this.autoScroll = true;
         /** Icon pack */
         this.iconPack = defaultIconPack;
         /** Language */
@@ -101,6 +99,7 @@ export class RtkPaginatedList {
     }
     connectedCallback() {
         this.rerender = debounce(this.rerender.bind(this), 50, { maxWait: 200 });
+        this.autoScroll = true;
         this.intersectionObserver = new IntersectionObserver((entries) => {
             writeTask(() => {
                 for (const entry of entries) {
@@ -236,20 +235,6 @@ export class RtkPaginatedList {
             onPageRendered([]);
             return;
         }
-        // const page = this.createNodes(data);
-        // const lastNodeToBeRendered = page[page.length - 1];
-        // let lastNodeToBeRenderedProxy = new Proxy(lastNodeToBeRendered, {
-        //   set(obj, prop, value) {
-        //     /**
-        //      * Whenever the last node has the 'elm' property added to it
-        //      * we can assume it has been rendered
-        //      */
-        //     if (prop === '$elm$' && value && !obj.$elm$) onPageRendered();
-        //     obj[prop] = value;
-        //     return true;
-        //   },
-        // });
-        // page[page.length - 1] = lastNodeToBeRenderedProxy;
         data.forEach((node) => this.addNodeToRender(node, reversed));
         this.rerender();
         onPageRendered(data);
@@ -278,7 +263,7 @@ export class RtkPaginatedList {
          * which is why div#bottom-scroll comes before div#top-scroll
          * div.page-wrapper prevents reversal of messages
          */
-        return (h(Host, { key: '4f1521c422a134079a5def745ed85631c48a132a' }, h("div", { key: '0cadd9723fbc844bab7e595d18b6174ecb6ba10c', class: "scrollbar container", part: "container", ref: (el) => (this.$paginatedList = el) }, h("div", { key: '35a9b009d74a81159c7b856b9412b670051c9893', class: { 'show-new-messages-ctr': true, active: !this.shouldRenderNewNodes } }, h("rtk-button", { key: '2798fbf3da7200db72dfe1f985d4570163d77ff8', class: "show-new-messages", kind: "icon", variant: "secondary", part: "show-new-messages", onClick: () => this.onDownArrowClicked() }, h("rtk-icon", { key: '08b47cd4f472b240174cee559d4d39cf796aa788', icon: this.iconPack.chevron_down }))), h("div", { key: 'ae30f2391936a8a4f258384cc8da4300bf2c350c', class: "smallest-dom-element", id: "bottom-scroll", ref: (el) => (this.$bottomRef = el) }), this.isLoading && this.pagesToRender.flat().length === 0 && h("rtk-spinner", { key: '72f866d03e6d0d954a46443aa19d95f7033dfbe9', size: "lg" }), this.pagesToRender.flat().length === 0 && this.showEmptyListLabel ? (h("div", { class: "empty-list" }, (_a = this.emptyListLabel) !== null && _a !== void 0 ? _a : this.t('list.empty'))) : (h("div", { class: "page-wrapper" }, this.pagesToRender.map((page) => this.createNodes(page)))), h("div", { key: 'c96065eee8e01c56c0f6cb419b5e26ceef564678', class: "smallest-dom-element", id: "top-scroll", ref: (el) => (this.$topRef = el) }))));
+        return (h(Host, { key: 'bb4971c301060a02d6a9ad536fb633c0c87519c4' }, h("div", { key: '92a9524264d790fff447aefb7cc20a9da6958687', class: "scrollbar container", part: "container", ref: (el) => (this.$paginatedList = el) }, h("div", { key: 'e64bd91ea1e869b9a1f5e861959ee78306c17bee', class: { 'show-new-messages-ctr': true, active: !this.shouldRenderNewNodes } }, h("rtk-button", { key: '2471e6614616aa33c9ecd5d0c1f47d09fa00b481', class: "show-new-messages", kind: "icon", variant: "secondary", part: "show-new-messages", onClick: () => this.onDownArrowClicked() }, h("rtk-icon", { key: 'ed0b255c69fbaeecc883c0492fd5b810b8d429b8', icon: this.iconPack.chevron_down }))), h("div", { key: '509aa620d47e853fd4e73d5b6c30433156b0f1da', class: "smallest-dom-element", id: "bottom-scroll", ref: (el) => (this.$bottomRef = el) }), this.isLoading && this.pagesToRender.flat().length === 0 && h("rtk-spinner", { key: '47e60a2fcb103200d763b9af257babfca5ee6e3c', size: "lg" }), this.pagesToRender.flat().length === 0 && this.showEmptyListLabel ? (h("div", { class: "empty-list" }, (_a = this.emptyListLabel) !== null && _a !== void 0 ? _a : this.t('list.empty'))) : (h("div", { class: "page-wrapper" }, this.pagesToRender.map((page) => this.createNodes(page)))), h("div", { key: '64ab66547b004130f9f3d0b0976c27c5aeeb720e', class: "smallest-dom-element", id: "top-scroll", ref: (el) => (this.$topRef = el) }))));
     }
     static get is() { return "rtk-paginated-list"; }
     static get encapsulation() { return "shadow"; }
@@ -413,8 +398,7 @@ export class RtkPaginatedList {
                 "getter": false,
                 "setter": false,
                 "attribute": "auto-scroll",
-                "reflect": false,
-                "defaultValue": "true"
+                "reflect": false
             },
             "iconPack": {
                 "type": "unknown",