@banta/sdk 5.5.3 → 5.6.1

package/esm2022/lib/sdk-options.mjs

@@ -1,3 +1,3 @@
 import { InjectionToken } from "@angular/core";
 export const BANTA_SDK_OPTIONS = new InjectionToken('BANTA_SDK_OPTIONS');
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2RrLW9wdGlvbnMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9zZGsvc3JjL2xpYi9zZGstb3B0aW9ucy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBTy9DLE1BQU0sQ0FBQyxNQUFNLGlCQUFpQixHQUFHLElBQUksY0FBYyxDQUFhLG1CQUFtQixDQUFDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJbmplY3Rpb25Ub2tlbiB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XHJcblxyXG5leHBvcnQgaW50ZXJmYWNlIFNka09wdGlvbnMge1xyXG4gICAgc2VydmljZVVybD86IHN0cmluZztcclxuICAgIGVtb2ppVXJsPzogc3RyaW5nO1xyXG59XHJcblxyXG5leHBvcnQgY29uc3QgQkFOVEFfU0RLX09QVElPTlMgPSBuZXcgSW5qZWN0aW9uVG9rZW48U2RrT3B0aW9ucz4oJ0JBTlRBX1NES19PUFRJT05TJyk7Il19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2RrLW9wdGlvbnMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9zZGsvc3JjL2xpYi9zZGstb3B0aW9ucy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsY0FBYyxFQUFRLE1BQU0sZUFBZSxDQUFDO0FBU3JELE1BQU0sQ0FBQyxNQUFNLGlCQUFpQixHQUFHLElBQUksY0FBYyxDQUFhLG1CQUFtQixDQUFDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJbmplY3Rpb25Ub2tlbiwgVHlwZSB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XHJcbmltcG9ydCB7IENoYXRCYWNrZW5kQmFzZSB9IGZyb20gXCIuL2NoYXQtYmFja2VuZC1iYXNlXCI7XHJcblxyXG5leHBvcnQgaW50ZXJmYWNlIFNka09wdGlvbnMge1xyXG4gICAgc2VydmljZVVybD86IHN0cmluZztcclxuICAgIGVtb2ppVXJsPzogc3RyaW5nO1xyXG4gICAgYmFja2VuZENsYXNzPzogVHlwZTxDaGF0QmFja2VuZEJhc2U+XHJcbn1cclxuXHJcbmV4cG9ydCBjb25zdCBCQU5UQV9TREtfT1BUSU9OUyA9IG5ldyBJbmplY3Rpb25Ub2tlbjxTZGtPcHRpb25zPignQkFOVEFfU0RLX09QVElPTlMnKTsiXX0=

package/fesm2022/banta-sdk.mjs

@@ -7601,7 +7601,27 @@ class CommentViewComponent {
         this.isViewingMore = false;
         this.isLoadingMore = false;
         this.hasMore = false;
+        /**
+         * While this is called "new" messages, it really represents the messages that would be visible *at the beginning
+         * of the sort order*, which can be flipped by the newestLast feature (used for replies mode).
+         *
+         * So, when newestLast is false, regardless of the current sortOrder, newMessages are conceptually
+         * *above* the visible set of messages.
+         *
+         * When newestLast is true (as in replies mode), regardless of the current sortOrder, newMessages are conceptually
+         * *below* the visible set of messages.
+         */
         this.newMessages = [];
+        /**
+         * While this is called "older" messages, it really represents the messages that would be visible *at the end of the
+         * sort order*, which can be flipped by the newestLast feature (useds for replies mode).
+         *
+         * So, when newestLast is false, regardless of the current sortOrder, olderMessages are conceptually *below*
+         * the visible set of messages.
+         *
+         * When newestLast is true (as in replies mode), regardless of the current sortOrder, olderMessages are conceptually
+         * *above* the visible set of messages.
+         */
         this.olderMessages = [];
         //#endregion
         //#region Inputs
@@ -7640,9 +7660,12 @@ class CommentViewComponent {
         this.messageEdited = this._messageEdited.asObservable();
         this.sortOrderChanged = this._sortOrderChanged.asObservable();
         this.filterModeChanged = this._filterModeChanged.asObservable();
+        this.heldMessages = [];
     }
     get source() { return this._source; }
     set source(value) { this.setSource(value); }
+    get previousMessages() { return this.newestLast ? this.olderMessages : this.newMessages; }
+    get nextMessages() { return this.newestLast ? this.newMessages : this.olderMessages; }
     get comments() { return Array.from(this.commentsQuery); }
     //#endregion
     /**
@@ -7681,10 +7704,12 @@ class CommentViewComponent {
     get shouldShowNewMessageIndicator() {
         return this.isViewingMore
             || this.customSortEnabled
-            || this.source.filterMode !== FilterMode.ALL
-            || this.newMessages.length > 0;
+            || this.sourceFilterMode !== FilterMode.ALL
+            || this.heldMessages.length > 0;
     }
     get shouldHoldNewMessages() {
+        if (this.customSortEnabled)
+            return true;
         if (this.holdNewMessages || this.isViewingMore) {
             console.log(`holding due to settings`);
             return true;
@@ -7772,7 +7797,7 @@ class CommentViewComponent {
         this._deleted.next(message);
     }
     setSource(value) {
-        this.customSortEnabled = value?.sortOrder !== CommentsOrder.NEWEST;
+        this.customSortEnabled = (value?.sortOrder ?? CommentsOrder.NEWEST) !== CommentsOrder.NEWEST;
         this.newMessages = [];
         this.olderMessages = [];
         window.bantaSourceDebug = value;
@@ -7797,23 +7822,78 @@ class CommentViewComponent {
         let messages = (await this._source.getExistingMessages());
         messages.forEach(m => m.transientState ??= {});
         this.messages = this.newestLast ? messages.slice().reverse() : messages;
+        if (this.messages.length > this.maxVisibleMessages) {
+            if (this.newestLast) {
+                this.previousMessages.push(...this.messages.splice(0, this.messages.length - this.maxVisibleMessages));
+            }
+            else {
+                this.nextMessages.unshift(...this.messages.splice(this.maxVisibleMessages, this.messages.length));
+            }
+        }
+        this.debugMessages();
         this.sortMessages();
         if (this.markSourceLoaded)
             this.markSourceLoaded();
     }
+    debugMessages() {
+        console.log([
+            ...this.previousMessages.map(x => x.message),
+            '[[',
+            ...this.messages.map(x => x.message),
+            ']]',
+            ...this.nextMessages.map(x => x.message)
+        ].map(x => /\d+/.test(x) ? this.zeroPad(x, 2) : x).join(" "));
+    }
+    zeroPad(number, count = 2) {
+        let str;
+        if (typeof number === 'number')
+            str = String(number);
+        else
+            str = number;
+        while (str.length < count)
+            str = '0' + str;
+        return str;
+    }
+    leftPad(str, count = 2) {
+        while (str.length < count)
+            str = ' ' + str;
+        return str;
+    }
     messageIdentity(index, chatMessage) {
         return chatMessage.id;
     }
-    async showNew(event) {
+    get sourceSortOrder() {
+        return this.source?.sortOrder ?? CommentsOrder.NEWEST;
+    }
+    get sourceFilterMode() {
+        return this.source?.filterMode ?? FilterMode.ALL;
+    }
+    /**
+     * Show the newest content.
+     * - If an unnatural sort order is active (ie Oldest or Likes), it will be changed to Newest.
+     * - The new content will be placed where new content goes based on newestLast (replies mode), so if it is true, the content is
+     *   placed at the end, otherwise it is placed at the beginning.
+     *
+     * @param event
+     * @returns
+     */
+    async showNewest(event) {
+        // Regardless of how we handle this, clear out our held messages
+        this.heldMessages = [];
+        // If the sort order is not already Newest, switch to Newest and stop.
+        // The act of changing the sort order will cause the newest content to be loaded.
         let naturalOrder = CommentsOrder.NEWEST;
-        if (this.source && (this.source.sortOrder !== naturalOrder || this.source.filterMode !== FilterMode.ALL)) {
-            if (this.source.sortOrder !== naturalOrder)
+        if (this.sourceSortOrder !== naturalOrder || this.sourceFilterMode !== FilterMode.ALL) {
+            if (this.sourceSortOrder !== naturalOrder)
                 this._sortOrderChanged.next(naturalOrder);
-            if (this.source.filterMode !== FilterMode.ALL)
+            if (this.sourceFilterMode !== FilterMode.ALL)
                 this._filterModeChanged.next(FilterMode.ALL);
             return;
         }
+        // On this path, we are already on Newest, but there is newer content available (such as when new content is 
+        // being buffered due to user engagement on a comment)
         this.isViewingMore = false;
+        // Move all newerMessages into messages, respecting the newestLast direction (normal or replies mode)
         if (this.newestLast)
             this.messages = this.messages.concat(this.newMessages.splice(0, this.newMessages.length));
         else
@@ -7822,6 +7902,7 @@ class CommentViewComponent {
         this.olderMessages = overflow.concat(this.olderMessages);
         this.olderMessages.splice(this.maxMessages - this.maxVisibleMessages, this.olderMessages.length);
         this.hasMore = this.olderMessages.length > 0;
+        // Scroll to the newest comment.
         if (this.messages.length > 0) {
             if (this.newestLast) {
                 this.scrollToComment(this.messages[this.messages.length - 1].id);
@@ -7831,39 +7912,191 @@ class CommentViewComponent {
             }
         }
     }
-    async showMore() {
+    get showDebug() {
+        if (typeof window === 'undefined')
+            return false;
+        return localStorage['banta:debug'] === '1';
+    }
+    get shouldShowNext() {
+        if (!this.newestLast) {
+            return this.hasMore || this.nextMessages.length > 0;
+        }
+        return this.nextMessages.length > 0;
+    }
+    get shouldShowPrevious() {
+        if (this.newestLast) {
+            return this.hasMore || this.previousMessages.length > 0;
+        }
+        return this.previousMessages.length > 0;
+    }
+    get pageSize() {
+        return Math.min(20, this.maxVisibleMessages);
+    }
+    async showPrevious() {
         this.isViewingMore = true;
-        if (this.olderMessages.length > 0) {
+        let nextPageSize = this.pageSize;
+        this.isLoadingMore = false;
+        if (this.previousMessages.length > 0) {
+            const storedMessages = this.previousMessages.splice(Math.max(0, this.previousMessages.length - nextPageSize), nextPageSize);
+            this.messages = [...storedMessages, ...this.messages];
+            nextPageSize -= storedMessages.length;
+        }
+        // Load more from backend if needed
+        // Note: Backend only supports fetching more content in one direction.
+        let lastMessage = this.previousMessages[0] ?? this.messages[0];
+        if (!lastMessage)
+            this.hasMore = false;
+        if (nextPageSize > 0 && this.newestLast && lastMessage) {
+            this.isLoadingMore = true;
+            let messages = await this.source.loadAfter(lastMessage, nextPageSize);
+            messages = messages.slice().reverse(); // because newestLast === true
+            messages.forEach(m => m.transientState ??= {});
+            // In replies mode (newestLast), we want to put these new messages onto the *top* of the set of visible messages.
+            // Otherwise we want to put them on the *bottom*.
+            this.messages = [...messages, ...this.messages];
+            // If we didn't receive any messages at all, there's no more to fetch.
+            if (messages.length === 0)
+                this.hasMore = false;
             this.isLoadingMore = false;
-            this.messages = this.messages.concat(this.olderMessages.splice(0, 50));
         }
-        this.isLoadingMore = true;
-        let nextPageSize = 20;
-        let lastMessage;
-        if (this.newestLast) {
-            lastMessage = this.olderMessages[0] ?? this.messages[0];
+        // Extract the messages that do not fit in the maxVisibleMessages buffer.
+        if (this.messages.length > this.maxVisibleMessages) {
+            let overflow = this.messages.splice(this.maxVisibleMessages, this.messages.length);
+            this.nextMessages.unshift(...overflow);
+            if (this.nextMessages.length > this.maxMessages)
+                this.nextMessages.splice(this.maxMessages, this.nextMessages.length);
         }
-        else {
-            lastMessage = this.olderMessages[this.olderMessages.length - 1] ?? this.messages[this.messages.length - 1];
+        this.debugMessages();
+    }
+    get sortNextLabel() {
+        if (this.sourceSortOrder === 'newest') {
+            return 'Older';
         }
-        if (!lastMessage) {
-            this.isLoadingMore = false;
-            this.hasMore = false;
-            return;
+        else if (this.sourceSortOrder === 'oldest') {
+            return 'Newer';
         }
-        let messages = await this.source.loadAfter(lastMessage, nextPageSize);
-        if (this.newestLast)
-            messages = messages.slice().reverse();
-        messages.forEach(m => m.transientState ??= {});
-        if (this.newestLast)
-            this.messages = messages.concat(this.messages);
-        else
-            this.messages = this.messages.concat(messages);
+        else if (this.sourceSortOrder === 'likes') {
+            return 'Less Likes';
+        }
+        return 'More';
+    }
+    get sortPreviousLabel() {
+        if (this.sourceSortOrder === 'newest') {
+            return 'Newer';
+        }
+        else if (this.sourceSortOrder === 'oldest') {
+            return 'Older';
+        }
+        else if (this.sourceSortOrder === 'likes') {
+            return 'More Likes';
+        }
+        return 'More';
+    }
+    get nextLabel() { return this.newestLast ? this.sortPreviousLabel : this.sortNextLabel; }
+    get previousLabel() { return this.newestLast ? this.sortNextLabel : this.sortPreviousLabel; }
+    /**
+     * Show more content
+     * - When in replies mode (newestLast), the content is added at the top
+     * - When in normal mode, the content is added at the bottom
+     * - The current sort order does *not* factor in here, which is why it is showMore() not showEarlier().
+     *
+     * @returns
+     */
+    async showNext() {
+        this.isViewingMore = true;
+        let nextPageSize = this.pageSize;
         this.isLoadingMore = false;
-        if (messages.length === 0) {
-            console.log(`Reached the end of the list.`);
+        if (this.nextMessages.length > 0) {
+            const storedMessages = this.nextMessages.splice(0, nextPageSize);
+            this.messages = [...this.messages, ...storedMessages];
+            nextPageSize -= storedMessages.length;
+        }
+        const lastMessage = this.olderMessages[this.olderMessages.length - 1] ?? this.messages[this.messages.length - 1];
+        if (!lastMessage)
             this.hasMore = false;
+        if (nextPageSize > 0 && !this.newestLast && lastMessage) {
+            // Load more from backend
+            this.isLoadingMore = true;
+            let messages = await this.source.loadAfter(lastMessage, nextPageSize);
+            messages.forEach(m => m.transientState ??= {});
+            this.messages = [...this.messages, ...messages];
+            // If we didn't receive any messages at all, there's no more to fetch.
+            if (messages.length === 0)
+                this.hasMore = false;
+            this.isLoadingMore = false;
+        }
+        // Extract the messages that do not fit in the maxVisibleMessages buffer.
+        if (this.messages.length > this.maxVisibleMessages) {
+            let overflow = this.messages.splice(0, this.messages.length - this.maxVisibleMessages);
+            // Regardless of the order (newestLast), newMessages represents the direction that is being pushed, since it's definition
+            // depends on that order. Move overflowing messages into newMessages.
+            this.previousMessages.push(...overflow);
+            if (this.previousMessages.length > this.maxMessages)
+                this.previousMessages.splice(0, this.previousMessages.length - this.maxMessages);
+        }
+        this.debugMessages();
+    }
+    /**
+     * Show more content
+     * - When in replies mode (newestLast), the content is added at the top
+     * - When in normal mode, the content is added at the bottom
+     * - The current sort order does *not* factor in here, which is why it is showMore() not showEarlier().
+     *
+     * @returns
+     */
+    async showMore() {
+        this.isViewingMore = true;
+        let nextPageSize = this.pageSize;
+        this.isLoadingMore = false;
+        if (this.olderMessages.length > 0) {
+            const storedMessages = this.olderMessages.splice(0, nextPageSize);
+            this.messages = this.messages.concat(storedMessages);
+            nextPageSize -= storedMessages.length;
+            this.hasMore = this.olderMessages.length > 0;
+        }
+        if (nextPageSize > 0) {
+            // Load more from backend
+            this.isLoadingMore = true;
+            let lastMessage;
+            if (this.newestLast) {
+                lastMessage = this.olderMessages[0] ?? this.messages[0];
+            }
+            else {
+                lastMessage = this.olderMessages[this.olderMessages.length - 1] ?? this.messages[this.messages.length - 1];
+            }
+            if (!lastMessage) {
+                this.isLoadingMore = false;
+                this.hasMore = false;
+                return;
+            }
+            let messages = await this.source.loadAfter(lastMessage, nextPageSize);
+            if (this.newestLast)
+                messages = messages.slice().reverse();
+            messages.forEach(m => m.transientState ??= {});
+            // In replies mode (newestLast), we want to put these new messages onto the *top* of the set of visible messages.
+            // Otherwise we want to put them on the *bottom*.
+            if (this.newestLast) {
+                this.messages = messages.concat(this.messages);
+            }
+            else {
+                this.messages = this.messages.concat(messages);
+            }
+            // If we didn't receive any messages at all, there's no more to fetch.
+            if (messages.length === 0) {
+                this.hasMore = false;
+            }
+            this.isLoadingMore = false;
         }
+        // Extract the messages that do not fit in the maxVisibleMessages buffer.
+        let overflow;
+        if (this.newestLast)
+            overflow = this.messages.splice(this.maxVisibleMessages, this.messages.length);
+        else
+            overflow = this.messages.splice(0, this.maxVisibleMessages);
+        // Regardless of the order (newestLast), newMessages represents the direction that is being pushed, since it's definition
+        // depends on that order. Move overflowing messages into newMessages.
+        this.newMessages = overflow.concat(this.newMessages);
+        this.newMessages.splice(this.maxMessages - this.maxVisibleMessages, this.newMessages.length);
     }
     addMessage(message) {
         if (!message.transientState)
@@ -7872,9 +8105,13 @@ class CommentViewComponent {
         let bucket = this.olderMessages;
         let newestLast = this.newestLast;
         if (this.shouldHoldNewMessages) {
+            this.heldMessages.push(message);
             destination = this.newMessages;
             bucket = null;
         }
+        // If we aren't on the newest sort order, new messages shouldn't be added at all
+        if (this.sourceSortOrder !== CommentsOrder.NEWEST)
+            return;
         if (newestLast) {
             destination.push(message);
             let overflow = destination.splice(this.maxVisibleMessages, destination.length);
@@ -7980,11 +8217,11 @@ class CommentViewComponent {
         return false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CommentViewComponent, deps: [{ token: ChatBackendBase }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: CommentViewComponent, selector: "banta-comment-view", inputs: { source: "source", maxMessages: "maxMessages", maxVisibleMessages: "maxVisibleMessages", newestLast: "newestLast", holdNewMessages: "holdNewMessages", showEmptyState: "showEmptyState", allowReplies: "allowReplies", enableHoldOnClick: "enableHoldOnClick", enableHoldOnScroll: "enableHoldOnScroll", customMenuItems: "customMenuItems", fixedHeight: "fixedHeight", selectedMessage: "selectedMessage", genericAvatarUrl: "genericAvatarUrl" }, outputs: { userSelected: "userSelected", reported: "reported", liked: "liked", unliked: "unliked", usernameSelected: "usernameSelected", avatarSelected: "avatarSelected", shared: "shared", deleted: "deleted", selected: "selected", messageEdited: "messageEdited", sortOrderChanged: "sortOrderChanged", filterModeChanged: "filterModeChanged" }, host: { properties: { "class.fixed-height": "this.fixedHeight" } }, viewQueries: [{ propertyName: "messageContainer", first: true, predicate: ["messageContainer"], descendants: true }, { propertyName: "commentsQuery", predicate: CommentComponent, descendants: true }], ngImport: i0, template: "<div class=\"banta-message-container\" #messageContainer>\r\n    <ng-content select=\"[data-before]\"></ng-content>\r\n\r\n    <div class=\"banta-top-sticky\">\r\n        <a *ngIf=\"!newestLast\" mat-button class=\"nav\" [class.visible]=\"shouldShowNewMessageIndicator\" href=\"javascript:;\" (click)=\"showNew($event)\">\r\n            <mat-icon>file_upload</mat-icon>\r\n            <ng-container *ngIf=\"newMessages.length >= 1\">\r\n                New ({{newMessages.length}})\r\n            </ng-container>\r\n            <ng-container *ngIf=\"newMessages.length == 0\">\r\n                Newest\r\n            </ng-container>\r\n        </a>\r\n    </div>\r\n    <a mat-button class=\"nav\" [class.visible]=\"newestLast && hasMore && !isLoadingMore\" href=\"javascript:;\" (click)=\"showMore()\">Show earlier</a>\r\n\r\n    <ng-container *ngIf=\"messages.length === 0\">\r\n        <div class=\"banta-empty-state\" *ngIf=\"showEmptyState\">\r\n            Be the first to comment!\r\n        </div>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let message of messages; trackBy: messageIdentity\">\r\n        <banta-comment\r\n            *ngIf=\"!message.hidden\"\r\n            class=\"abbreviated\"\r\n            \r\n            [customMenuItems]=\"customMenuItems\"\r\n            [message]=\"message\"\r\n            [mine]=\"currentUser?.id === message.user?.id\"\r\n            [permissions]=\"source?.permissions\"\r\n            [showReplyAction]=\"allowReplies\"\r\n            [editing]=\"message.transientState.editing\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            [readonly]=\"source?.readonly\"\r\n            (click)=\"enableHoldOnClick ? (holdNewMessages = true) : undefined\"\r\n            (editStarted)=\"startEditing(message)\"\r\n            (deleted)=\"deleteMessage(message)\"\r\n            (editEnded)=\"message.transientState.editing = false\"\r\n            (edited)=\"saveEdit(message, $event)\"\r\n            (userSelected)=\"selectMessageUser(message)\"\r\n            (avatarSelected)=\"selectAvatar($event)\"\r\n            (usernameSelected)=\"selectUsername($event)\"\r\n            (liked)=\"likeMessage(message)\"\r\n            (unliked)=\"unlikeMessage(message)\"\r\n            (reported)=\"reportMessage(message)\"\r\n            (selected)=\"selectMessage(message)\"\r\n            (shared)=\"sharedMessage($event)\"\r\n            ></banta-comment>\r\n        <div class=\"banta-inline-replies-container\" *ngIf=\"selectedMessage === message\">\r\n            <ng-content select=\".inline-replies\"></ng-content>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <div class=\"banta-nav-point banta-bottom-sticky\">\r\n        <a *ngIf=\"newestLast\" mat-button class=\"nav\" [class.visible]=\"shouldShowNewMessageIndicator\" href=\"javascript:;\" (click)=\"showNew($event)\">\r\n            <mat-icon>file_download</mat-icon>\r\n            <ng-container *ngIf=\"newMessages.length >= 1\">\r\n                New ({{newMessages.length}})\r\n            </ng-container>\r\n            <ng-container *ngIf=\"newMessages.length == 0\">\r\n                Newest\r\n            </ng-container>\r\n        </a>\r\n    </div>\r\n    <a mat-button class=\"banta-nav\" [class.visible]=\"!newestLast && hasMore && !isLoadingMore\" href=\"javascript:;\" (click)=\"showMore()\">Show more</a>\r\n\r\n    <div class=\"banta-loading-more\" *ngIf=\"isLoadingMore\">\r\n        <mat-spinner></mat-spinner>\r\n    </div>\r\n\r\n    <!-- <div style=\"color: #666\">\r\n        n={{newMessages.length}}, m={{messages.length}}, o={{olderMessages.length}},\r\n        v={{maxVisibleMessages}}, M={{maxMessages}}\r\n    </div> -->\r\n\r\n    <ng-content select=\":not([data-before]):not(.inline-replies)\"></ng-content>\r\n</div>\r\n", styles: [":host{flex-grow:1;display:flex;flex-direction:column;opacity:1;transition:.2s opacity ease-in}.banta-message-container{flex-grow:1;color:#111;background:#fff;padding:.5em 1em 3em .5em;opacity:1;transition:.5s opacity ease-in-out;position:relative}.banta-message-container.no-scroll{height:auto;overflow-y:visible}.banta-message-container.faded{opacity:.25}.banta-message-container .overlay{position:absolute;inset:0;z-index:10}:host.fixed-height .banta-message-container{overflow-y:auto}:host-context(.mat-dark-theme) .banta-message-container{color:#fff;background:#111}.banta-empty-state{text-align:center;margin:3em;color:#666}:host-context(.mat-dark-theme) .empty-state{color:#666}a.banta-nav{position:absolute;right:.5em;z-index:10;text-align:center;opacity:0;transition:.4s opacity ease-in-out;pointer-events:none;border-radius:2em;background:#222}a.banta-nav.visible{opacity:1;pointer-events:initial}.banta-top-sticky{position:sticky;top:.5em;z-index:10}.banta-bottom-sticky{position:sticky;bottom:3em;z-index:10}.banta-loading-more{padding:2em;text-align:center;margin:0 auto;width:fit-content}@media (max-width: 400px){.banta-message-container{padding:0 0 3em}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: CommentComponent, selector: "banta-comment", inputs: ["message", "customMenuItems", "showReplyAction", "maxLength", "permissions", "mine", "editing", "genericAvatarUrl", "readonly"], outputs: ["liked", "unliked", "selected", "edited", "deleted", "editStarted", "editEnded", "shared", "userSelected", "usernameSelected", "avatarSelected", "reported", "loaded"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.9", type: CommentViewComponent, selector: "banta-comment-view", inputs: { source: "source", maxMessages: "maxMessages", maxVisibleMessages: "maxVisibleMessages", newestLast: "newestLast", holdNewMessages: "holdNewMessages", showEmptyState: "showEmptyState", allowReplies: "allowReplies", enableHoldOnClick: "enableHoldOnClick", enableHoldOnScroll: "enableHoldOnScroll", customMenuItems: "customMenuItems", fixedHeight: "fixedHeight", selectedMessage: "selectedMessage", genericAvatarUrl: "genericAvatarUrl" }, outputs: { userSelected: "userSelected", reported: "reported", liked: "liked", unliked: "unliked", usernameSelected: "usernameSelected", avatarSelected: "avatarSelected", shared: "shared", deleted: "deleted", selected: "selected", messageEdited: "messageEdited", sortOrderChanged: "sortOrderChanged", filterModeChanged: "filterModeChanged" }, host: { properties: { "class.fixed-height": "this.fixedHeight" } }, viewQueries: [{ propertyName: "messageContainer", first: true, predicate: ["messageContainer"], descendants: true }, { propertyName: "commentsQuery", predicate: CommentComponent, descendants: true }], ngImport: i0, template: "<div class=\"banta-message-container\" #messageContainer>\r\n    <ng-content select=\"[data-before]\"></ng-content>\r\n\r\n    <div class=\"banta-top-sticky\">\r\n        @if (!newestLast) {\r\n            <button \r\n                mat-button \r\n                class=\"banta-nav\" \r\n                [class.visible]=\"shouldShowNewMessageIndicator\" \r\n                href=\"javascript:;\" \r\n                (click)=\"showNewest($event)\"\r\n                >\r\n                <mat-icon>file_upload</mat-icon>\r\n                Newest\r\n                @if (heldMessages.length > 0) {\r\n                    <span class=\"count\">{{ heldMessages.length | number }}</span>\r\n                }\r\n            </button>\r\n        }\r\n    </div>\r\n\r\n    <button mat-button class=\"pager\" (click)=\"showPrevious()\" [class.visible]=\"shouldShowPrevious\" [disabled]=\"isLoadingMore\">\r\n        <mat-icon>expand_less</mat-icon>\r\n        {{ previousLabel }}\r\n    </button>\r\n\r\n    @for (message of messages; track message.id) {\r\n        @if (!message.hidden) {\r\n            <banta-comment\r\n                class=\"abbreviated\"\r\n                \r\n                [customMenuItems]=\"customMenuItems\"\r\n                [message]=\"message\"\r\n                [mine]=\"currentUser?.id === message.user?.id\"\r\n                [permissions]=\"source?.permissions\"\r\n                [showReplyAction]=\"allowReplies\"\r\n                [editing]=\"message.transientState.editing\"\r\n                [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                [readonly]=\"source?.readonly\"\r\n                (click)=\"enableHoldOnClick ? (holdNewMessages = true) : undefined\"\r\n                (editStarted)=\"startEditing(message)\"\r\n                (deleted)=\"deleteMessage(message)\"\r\n                (editEnded)=\"message.transientState.editing = false\"\r\n                (edited)=\"saveEdit(message, $event)\"\r\n                (userSelected)=\"selectMessageUser(message)\"\r\n                (avatarSelected)=\"selectAvatar($event)\"\r\n                (usernameSelected)=\"selectUsername($event)\"\r\n                (liked)=\"likeMessage(message)\"\r\n                (unliked)=\"unlikeMessage(message)\"\r\n                (reported)=\"reportMessage(message)\"\r\n                (selected)=\"selectMessage(message)\"\r\n                (shared)=\"sharedMessage($event)\"\r\n                />\r\n            <div class=\"banta-inline-replies-container\" *ngIf=\"selectedMessage === message\">\r\n                <ng-content select=\".inline-replies\"></ng-content>\r\n            </div>\r\n        }\r\n    } @empty {\r\n        <div class=\"banta-empty-state\" *ngIf=\"showEmptyState\">\r\n            Be the first to comment!\r\n        </div>\r\n    }\r\n\r\n    <button mat-button class=\"pager\" (click)=\"showNext()\" [class.visible]=\"shouldShowNext\" [disabled]=\"isLoadingMore\">\r\n        <mat-icon>expand_more</mat-icon>\r\n        {{ nextLabel }}\r\n    </button>\r\n\r\n    <div class=\"banta-nav-point banta-bottom-sticky\">\r\n        @if (newestLast) {\r\n            <button \r\n                [matBadge]=\"10\" matBadgeOverlap=\"false\"\r\n                matBadgePosition=\"after\" matBadgeSize=\"large\" \r\n                mat-button \r\n                class=\"banta-nav\" \r\n                [class.visible]=\"shouldShowNewMessageIndicator\" \r\n                href=\"javascript:;\" \r\n                (click)=\"showNewest($event)\"\r\n                >\r\n                <mat-icon>file_download</mat-icon>\r\n                Newest\r\n                @if (heldMessages.length > 0) {\r\n                    <span class=\"count\">{{ heldMessages.length | number }}</span>\r\n                }\r\n            </button>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"banta-loading-more\" *ngIf=\"isLoadingMore\">\r\n        <mat-spinner></mat-spinner>\r\n    </div>\r\n\r\n    @if (showDebug) {\r\n        <div style=\"color: #666\">\r\n            ({{ previousMessages.length }} .. {{ messages.length }} .. {{ nextMessages.length }})\r\n\r\n            dir={{newestLast ? '-1' : '1'}}\r\n            v={{maxVisibleMessages}}, M={{maxMessages}}\r\n        </div>\r\n    }\r\n\r\n    <ng-content select=\":not([data-before]):not(.inline-replies)\"></ng-content>\r\n</div>\r\n", styles: [":host{flex-grow:1;display:flex;flex-direction:column;opacity:1;transition:.2s opacity ease-in}.banta-message-container{flex-grow:1;color:#111;background:#fff;padding:.5em 1em 3em .5em;opacity:1;transition:.5s opacity ease-in-out;position:relative}.banta-message-container.no-scroll{height:auto;overflow-y:visible}.banta-message-container.faded{opacity:.25}.banta-message-container .overlay{position:absolute;inset:0;z-index:10}:host.fixed-height .banta-message-container{overflow-y:auto}:host-context(.mat-dark-theme) .banta-message-container{color:#fff;background:#111}.banta-empty-state{text-align:center;margin:3em;color:#666}:host-context(.mat-dark-theme) .empty-state{color:#666}button.banta-nav{position:absolute;right:.5em;z-index:10;text-align:center;opacity:0;transition:.4s opacity ease-in-out;pointer-events:none;border-radius:2em;background-color:#ddd}:host-context(.mat-dark-theme) button.banta-nav{background-color:#222;color:#fff}button.banta-nav span.count{background-color:#a93535;color:#fff;padding:4px 10px;border-radius:.5em;margin-left:.25em;font-size:90%}button.banta-nav.visible{opacity:1;pointer-events:initial}button.pager{appearance:none;border:none;width:100%;opacity:0;pointer-events:none;transition:.4s opacity ease-in-out}button.pager.visible{opacity:1;pointer-events:initial}.banta-top-sticky{position:sticky;top:.5em;z-index:10}.banta-bottom-sticky{position:sticky;bottom:3em;z-index:10}.banta-loading-more{padding:2em;text-align:center;margin:0 auto;width:fit-content}@media (max-width: 400px){.banta-message-container{padding:0 0 3em}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: CommentComponent, selector: "banta-comment", inputs: ["message", "customMenuItems", "showReplyAction", "maxLength", "permissions", "mine", "editing", "genericAvatarUrl", "readonly"], outputs: ["liked", "unliked", "selected", "edited", "deleted", "editStarted", "editEnded", "shared", "userSelected", "usernameSelected", "avatarSelected", "reported", "loaded"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CommentViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'banta-comment-view', template: "<div class=\"banta-message-container\" #messageContainer>\r\n    <ng-content select=\"[data-before]\"></ng-content>\r\n\r\n    <div class=\"banta-top-sticky\">\r\n        <a *ngIf=\"!newestLast\" mat-button class=\"nav\" [class.visible]=\"shouldShowNewMessageIndicator\" href=\"javascript:;\" (click)=\"showNew($event)\">\r\n            <mat-icon>file_upload</mat-icon>\r\n            <ng-container *ngIf=\"newMessages.length >= 1\">\r\n                New ({{newMessages.length}})\r\n            </ng-container>\r\n            <ng-container *ngIf=\"newMessages.length == 0\">\r\n                Newest\r\n            </ng-container>\r\n        </a>\r\n    </div>\r\n    <a mat-button class=\"nav\" [class.visible]=\"newestLast && hasMore && !isLoadingMore\" href=\"javascript:;\" (click)=\"showMore()\">Show earlier</a>\r\n\r\n    <ng-container *ngIf=\"messages.length === 0\">\r\n        <div class=\"banta-empty-state\" *ngIf=\"showEmptyState\">\r\n            Be the first to comment!\r\n        </div>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let message of messages; trackBy: messageIdentity\">\r\n        <banta-comment\r\n            *ngIf=\"!message.hidden\"\r\n            class=\"abbreviated\"\r\n            \r\n            [customMenuItems]=\"customMenuItems\"\r\n            [message]=\"message\"\r\n            [mine]=\"currentUser?.id === message.user?.id\"\r\n            [permissions]=\"source?.permissions\"\r\n            [showReplyAction]=\"allowReplies\"\r\n            [editing]=\"message.transientState.editing\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            [readonly]=\"source?.readonly\"\r\n            (click)=\"enableHoldOnClick ? (holdNewMessages = true) : undefined\"\r\n            (editStarted)=\"startEditing(message)\"\r\n            (deleted)=\"deleteMessage(message)\"\r\n            (editEnded)=\"message.transientState.editing = false\"\r\n            (edited)=\"saveEdit(message, $event)\"\r\n            (userSelected)=\"selectMessageUser(message)\"\r\n            (avatarSelected)=\"selectAvatar($event)\"\r\n            (usernameSelected)=\"selectUsername($event)\"\r\n            (liked)=\"likeMessage(message)\"\r\n            (unliked)=\"unlikeMessage(message)\"\r\n            (reported)=\"reportMessage(message)\"\r\n            (selected)=\"selectMessage(message)\"\r\n            (shared)=\"sharedMessage($event)\"\r\n            ></banta-comment>\r\n        <div class=\"banta-inline-replies-container\" *ngIf=\"selectedMessage === message\">\r\n            <ng-content select=\".inline-replies\"></ng-content>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <div class=\"banta-nav-point banta-bottom-sticky\">\r\n        <a *ngIf=\"newestLast\" mat-button class=\"nav\" [class.visible]=\"shouldShowNewMessageIndicator\" href=\"javascript:;\" (click)=\"showNew($event)\">\r\n            <mat-icon>file_download</mat-icon>\r\n            <ng-container *ngIf=\"newMessages.length >= 1\">\r\n                New ({{newMessages.length}})\r\n            </ng-container>\r\n            <ng-container *ngIf=\"newMessages.length == 0\">\r\n                Newest\r\n            </ng-container>\r\n        </a>\r\n    </div>\r\n    <a mat-button class=\"banta-nav\" [class.visible]=\"!newestLast && hasMore && !isLoadingMore\" href=\"javascript:;\" (click)=\"showMore()\">Show more</a>\r\n\r\n    <div class=\"banta-loading-more\" *ngIf=\"isLoadingMore\">\r\n        <mat-spinner></mat-spinner>\r\n    </div>\r\n\r\n    <!-- <div style=\"color: #666\">\r\n        n={{newMessages.length}}, m={{messages.length}}, o={{olderMessages.length}},\r\n        v={{maxVisibleMessages}}, M={{maxMessages}}\r\n    </div> -->\r\n\r\n    <ng-content select=\":not([data-before]):not(.inline-replies)\"></ng-content>\r\n</div>\r\n", styles: [":host{flex-grow:1;display:flex;flex-direction:column;opacity:1;transition:.2s opacity ease-in}.banta-message-container{flex-grow:1;color:#111;background:#fff;padding:.5em 1em 3em .5em;opacity:1;transition:.5s opacity ease-in-out;position:relative}.banta-message-container.no-scroll{height:auto;overflow-y:visible}.banta-message-container.faded{opacity:.25}.banta-message-container .overlay{position:absolute;inset:0;z-index:10}:host.fixed-height .banta-message-container{overflow-y:auto}:host-context(.mat-dark-theme) .banta-message-container{color:#fff;background:#111}.banta-empty-state{text-align:center;margin:3em;color:#666}:host-context(.mat-dark-theme) .empty-state{color:#666}a.banta-nav{position:absolute;right:.5em;z-index:10;text-align:center;opacity:0;transition:.4s opacity ease-in-out;pointer-events:none;border-radius:2em;background:#222}a.banta-nav.visible{opacity:1;pointer-events:initial}.banta-top-sticky{position:sticky;top:.5em;z-index:10}.banta-bottom-sticky{position:sticky;bottom:3em;z-index:10}.banta-loading-more{padding:2em;text-align:center;margin:0 auto;width:fit-content}@media (max-width: 400px){.banta-message-container{padding:0 0 3em}}\n"] }]
+            args: [{ selector: 'banta-comment-view', template: "<div class=\"banta-message-container\" #messageContainer>\r\n    <ng-content select=\"[data-before]\"></ng-content>\r\n\r\n    <div class=\"banta-top-sticky\">\r\n        @if (!newestLast) {\r\n            <button \r\n                mat-button \r\n                class=\"banta-nav\" \r\n                [class.visible]=\"shouldShowNewMessageIndicator\" \r\n                href=\"javascript:;\" \r\n                (click)=\"showNewest($event)\"\r\n                >\r\n                <mat-icon>file_upload</mat-icon>\r\n                Newest\r\n                @if (heldMessages.length > 0) {\r\n                    <span class=\"count\">{{ heldMessages.length | number }}</span>\r\n                }\r\n            </button>\r\n        }\r\n    </div>\r\n\r\n    <button mat-button class=\"pager\" (click)=\"showPrevious()\" [class.visible]=\"shouldShowPrevious\" [disabled]=\"isLoadingMore\">\r\n        <mat-icon>expand_less</mat-icon>\r\n        {{ previousLabel }}\r\n    </button>\r\n\r\n    @for (message of messages; track message.id) {\r\n        @if (!message.hidden) {\r\n            <banta-comment\r\n                class=\"abbreviated\"\r\n                \r\n                [customMenuItems]=\"customMenuItems\"\r\n                [message]=\"message\"\r\n                [mine]=\"currentUser?.id === message.user?.id\"\r\n                [permissions]=\"source?.permissions\"\r\n                [showReplyAction]=\"allowReplies\"\r\n                [editing]=\"message.transientState.editing\"\r\n                [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                [readonly]=\"source?.readonly\"\r\n                (click)=\"enableHoldOnClick ? (holdNewMessages = true) : undefined\"\r\n                (editStarted)=\"startEditing(message)\"\r\n                (deleted)=\"deleteMessage(message)\"\r\n                (editEnded)=\"message.transientState.editing = false\"\r\n                (edited)=\"saveEdit(message, $event)\"\r\n                (userSelected)=\"selectMessageUser(message)\"\r\n                (avatarSelected)=\"selectAvatar($event)\"\r\n                (usernameSelected)=\"selectUsername($event)\"\r\n                (liked)=\"likeMessage(message)\"\r\n                (unliked)=\"unlikeMessage(message)\"\r\n                (reported)=\"reportMessage(message)\"\r\n                (selected)=\"selectMessage(message)\"\r\n                (shared)=\"sharedMessage($event)\"\r\n                />\r\n            <div class=\"banta-inline-replies-container\" *ngIf=\"selectedMessage === message\">\r\n                <ng-content select=\".inline-replies\"></ng-content>\r\n            </div>\r\n        }\r\n    } @empty {\r\n        <div class=\"banta-empty-state\" *ngIf=\"showEmptyState\">\r\n            Be the first to comment!\r\n        </div>\r\n    }\r\n\r\n    <button mat-button class=\"pager\" (click)=\"showNext()\" [class.visible]=\"shouldShowNext\" [disabled]=\"isLoadingMore\">\r\n        <mat-icon>expand_more</mat-icon>\r\n        {{ nextLabel }}\r\n    </button>\r\n\r\n    <div class=\"banta-nav-point banta-bottom-sticky\">\r\n        @if (newestLast) {\r\n            <button \r\n                [matBadge]=\"10\" matBadgeOverlap=\"false\"\r\n                matBadgePosition=\"after\" matBadgeSize=\"large\" \r\n                mat-button \r\n                class=\"banta-nav\" \r\n                [class.visible]=\"shouldShowNewMessageIndicator\" \r\n                href=\"javascript:;\" \r\n                (click)=\"showNewest($event)\"\r\n                >\r\n                <mat-icon>file_download</mat-icon>\r\n                Newest\r\n                @if (heldMessages.length > 0) {\r\n                    <span class=\"count\">{{ heldMessages.length | number }}</span>\r\n                }\r\n            </button>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"banta-loading-more\" *ngIf=\"isLoadingMore\">\r\n        <mat-spinner></mat-spinner>\r\n    </div>\r\n\r\n    @if (showDebug) {\r\n        <div style=\"color: #666\">\r\n            ({{ previousMessages.length }} .. {{ messages.length }} .. {{ nextMessages.length }})\r\n\r\n            dir={{newestLast ? '-1' : '1'}}\r\n            v={{maxVisibleMessages}}, M={{maxMessages}}\r\n        </div>\r\n    }\r\n\r\n    <ng-content select=\":not([data-before]):not(.inline-replies)\"></ng-content>\r\n</div>\r\n", styles: [":host{flex-grow:1;display:flex;flex-direction:column;opacity:1;transition:.2s opacity ease-in}.banta-message-container{flex-grow:1;color:#111;background:#fff;padding:.5em 1em 3em .5em;opacity:1;transition:.5s opacity ease-in-out;position:relative}.banta-message-container.no-scroll{height:auto;overflow-y:visible}.banta-message-container.faded{opacity:.25}.banta-message-container .overlay{position:absolute;inset:0;z-index:10}:host.fixed-height .banta-message-container{overflow-y:auto}:host-context(.mat-dark-theme) .banta-message-container{color:#fff;background:#111}.banta-empty-state{text-align:center;margin:3em;color:#666}:host-context(.mat-dark-theme) .empty-state{color:#666}button.banta-nav{position:absolute;right:.5em;z-index:10;text-align:center;opacity:0;transition:.4s opacity ease-in-out;pointer-events:none;border-radius:2em;background-color:#ddd}:host-context(.mat-dark-theme) button.banta-nav{background-color:#222;color:#fff}button.banta-nav span.count{background-color:#a93535;color:#fff;padding:4px 10px;border-radius:.5em;margin-left:.25em;font-size:90%}button.banta-nav.visible{opacity:1;pointer-events:initial}button.pager{appearance:none;border:none;width:100%;opacity:0;pointer-events:none;transition:.4s opacity ease-in-out}button.pager.visible{opacity:1;pointer-events:initial}.banta-top-sticky{position:sticky;top:.5em;z-index:10}.banta-bottom-sticky{position:sticky;bottom:3em;z-index:10}.banta-loading-more{padding:2em;text-align:center;margin:0 auto;width:fit-content}@media (max-width: 400px){.banta-message-container{padding:0 0 3em}}\n"] }]
         }], ctorParameters: () => [{ type: ChatBackendBase }, { type: i0.ElementRef }], propDecorators: { source: [{
                 type: Input
             }], maxMessages: [{
@@ -8292,7 +8529,7 @@ class CommentFieldComponent {
             return false;
         if (this.signInState === 'signing-in')
             return false;
-        if (!['connected', 'restored'].includes(this.source.state))
+        if (!['connected', 'restored'].includes(this.source?.state ?? 'connected'))
             return false;
         if (!this.canComment) {
             // In this case, we want to enable the button because we want to be able to 
@@ -8873,8 +9110,13 @@ class BantaCommentsComponent {
         await this.threadViewQuery.changes.pipe(take(1)).toPromise();
         return this.threadView;
     }
+    get sourceState() {
+        if (!this.source)
+            return 'no-source';
+        return this.source.state ?? 'connected';
+    }
     updateLoading() {
-        if (this.source?.state && !['connecting', 'lost'].includes(this.source?.state)) {
+        if (this.sourceState && !['connecting', 'lost'].includes(this.sourceState)) {
             clearInterval(this._loadingTimer);
             this.loadingMessage = `Here we go!`;
             setTimeout(() => {
@@ -8883,7 +9125,7 @@ class BantaCommentsComponent {
             }, 750);
             return true;
         }
-        console.log(`[Banta/Loader] State=${this.source ? this.source.state : 'no-source'}`);
+        console.log(`[Banta/Loader] State=${this.sourceState}`);
         let messageSwitchTime = 5 * 1000;
         if (this.messageChangedAt + messageSwitchTime < Date.now()) {
             if (this.loadingMessages[this._loadingMessageIndex]) {
@@ -8911,7 +9153,10 @@ class BantaCommentsComponent {
                 this.sharedCommentID = null;
             }
             this._source.messages.forEach(m => this.addParticipant(m));
-            this._sourceSubscription.add(this._source.connectionStateChanged.subscribe(state => this.connectionState = state));
+            if (this._source.connectionStateChanged)
+                this._sourceSubscription.add(this._source.connectionStateChanged.subscribe(state => this.connectionState = state));
+            else
+                this.connectionState = 'connected';
             this._sourceSubscription.add(this._source.messageReceived.subscribe(m => this.addParticipant(m)));
             this._sourceSubscription.add(this._source.messageSent.subscribe(m => this.addParticipant(m)));
             this._sourceSubscription.add(this._source.messageObserved.subscribe(m => this.addParticipant(m)));
@@ -10916,12 +11161,13 @@ class TweetAttachmentResolver {
 }
 
 class BantaSdkModule {
-    constructor(chatBackend) {
-        chatBackend.registerAttachmentScraper(new UrlAttachmentScraper());
-        chatBackend.registerAttachmentResolver(new GiphyAttachmentResolver());
-        chatBackend.registerAttachmentResolver(new YouTubeAttachmentResolver());
-        chatBackend.registerAttachmentResolver(new TweetAttachmentResolver());
-        chatBackend.registerAttachmentResolver(new UrlAttachmentResolver(chatBackend));
+    constructor() {
+        this.chatBackend = inject(ChatBackendBase);
+        this.chatBackend.registerAttachmentScraper(new UrlAttachmentScraper());
+        this.chatBackend.registerAttachmentResolver(new GiphyAttachmentResolver());
+        this.chatBackend.registerAttachmentResolver(new YouTubeAttachmentResolver());
+        this.chatBackend.registerAttachmentResolver(new TweetAttachmentResolver());
+        this.chatBackend.registerAttachmentResolver(new UrlAttachmentResolver(this.chatBackend));
     }
     static configure(options) {
         return {
@@ -10931,11 +11177,11 @@ class BantaSdkModule {
                     provide: BANTA_SDK_OPTIONS,
                     useValue: options || {}
                 },
-                { provide: ChatBackendBase, useClass: ChatBackend }
+                { provide: ChatBackendBase, useClass: options?.backendClass ?? ChatBackend }
             ]
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: BantaSdkModule, deps: [{ token: ChatBackendBase }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: BantaSdkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: BantaSdkModule, declarations: [BantaComponent,
             BantaLogoComponent,
             LiveMessageComponent], imports: [CommonModule,
@@ -11017,7 +11263,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
                         EmojiModule
                     ]
                 }]
-        }], ctorParameters: () => [{ type: ChatBackendBase }] });
+        }], ctorParameters: () => [] });
 
 /*
  * Public API Surface of sdk