@banta/sdk 3.3.9 → 4.0.0

package/bundles/banta-sdk.umd.js

@@ -17,34 +17,6 @@
         return obs.pipe(operators.publish()).refCount();
     }
 
-    var BantaService = /** @class */ (function () {
-        function BantaService() {
-            this._userChanged = new rxjs.BehaviorSubject(null);
-        }
-        Object.defineProperty(BantaService.prototype, "userChanged", {
-            get: function () {
-                return this._userChanged;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(BantaService.prototype, "user", {
-            get: function () {
-                return this._user;
-            },
-            set: function (user) {
-                this._user = user;
-                this._userChanged.next(user);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        return BantaService;
-    }());
-    BantaService.decorators = [
-        { type: core.Injectable }
-    ];
-
     var TimestampComponent = /** @class */ (function () {
         function TimestampComponent() {
             this.relative = '';
@@ -149,15 +121,6 @@
         value: [{ type: core.Input }]
     };
 
-    var ChatBackendService = /** @class */ (function () {
-        function ChatBackendService() {
-        }
-        return ChatBackendService;
-    }());
-    ChatBackendService.decorators = [
-        { type: core.Injectable }
-    ];
-
     var COMPONENTS = [
         TimestampComponent
     ];
@@ -176,7 +139,7 @@
                 },] }
     ];
 
-    /*! *****************************************************************************
+    /******************************************************************************
     Copyright (c) Microsoft Corporation.
 
     Permission to use, copy, modify, and/or distribute this software for any
@@ -338,7 +301,11 @@
     var __createBinding = Object.create ? (function (o, m, k, k2) {
         if (k2 === undefined)
             k2 = k;
-        Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
+        var desc = Object.getOwnPropertyDescriptor(m, k);
+        if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+            desc = { enumerable: true, get: function () { return m[k]; } };
+        }
+        Object.defineProperty(o, k2, desc);
     }) : (function (o, m, k, k2) {
         if (k2 === undefined)
             k2 = k;
@@ -492,6 +459,11 @@
         if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
             throw new TypeError("Cannot write private member to an object whose class did not declare it");
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+    }
+    function __classPrivateFieldIn(state, receiver) {
+        if (receiver === null || (typeof receiver !== "object" && typeof receiver !== "function"))
+            throw new TypeError("Cannot use 'in' operator on non-object");
+        return typeof state === "function" ? receiver === state : state.has(receiver);
     }
 
     var EMOJIS = {
@@ -7093,7 +7065,7 @@
         { type: core.Component, args: [{
                     selector: 'emoji-selector-panel',
                     template: "<div class=\"search-box\" *ngIf=\"searchVisible\">\r\n\t<a mat-icon-button href=\"javascript:;\" (click)=\"hideSearch()\">\r\n\t\t<mat-icon>arrow_back</mat-icon>\r\n\t</a>\r\n\t<mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n\t\t<mat-label>Search for emoji</mat-label>\r\n\t\t<input name=\"search\" type=\"text\" matInput placeholder=\"Start typing\" [(ngModel)]=\"searchQuery\" />\r\n\t</mat-form-field>\r\n</div>\r\n\r\n<div class=\"selector\">\r\n\t<ng-container *ngIf=\"searchVisible\">\r\n\t\t<div class=\"emoji-list\">\r\n\t\t\t<a href=\"javascript:;\" (click)=\"select(emoji.char)\" \r\n\t\t\t\t*ngFor=\"let emoji of searchResults\" [innerHtml]=\"emoji.html || ''\">\r\n\t\t\t</a>\r\n\t\t</div>\r\n\t</ng-container>\r\n\t<ng-container *ngIf=\"!searchVisible\">\r\n\t\t<div class=\"categories\">\r\n\t\t\t<ng-container *ngIf=\"!searchVisible\">\r\n\t\t\t\t<a [title]=\"humanize(category.name)\" [class.active]=\"activeCategory === category.name\" mat-icon-button *ngFor=\"let category of categories\" (click)=\"activeCategory = category.name\">\r\n\t\t\t\t\t<mat-icon>{{category.icon}}</mat-icon>\r\n\t\t\t\t</a>\r\n\r\n\t\t\t\t<a title=\"Search\" [class.active] mat-icon-button (click)=\"showSearch()\">\r\n\t\t\t\t\t<mat-icon>search</mat-icon>\r\n\t\t\t\t</a>\r\n\t\t\t</ng-container>\r\n\t\t</div>\r\n\t\t<ng-container *ngFor=\"let category of categories\">\r\n\t\t\t<div class=\"emoji-list\" *ngIf=\"activeCategory && activeCategory == category.name\">\r\n\t\t\t\t<a href=\"javascript:;\" (click)=\"select(emoji.char)\" \r\n\t\t\t\t\t*ngFor=\"let emoji of category.emojis\" [innerHtml]=\"emoji.html || ''\">\r\n\t\t\t\t</a>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n</div>",
-                    styles: [":host{background:#111;border:1px solid #333;border-radius:5px;color:#fff;max-width:calc(100vw - 1.5em);padding:.5em;width:calc(288px + 9em)}.selector{display:flex;flex-direction:column}.categories a{opacity:.25;transition:opacity .4s ease-in-out}.categories a:hover{opacity:.5}.categories a.active{opacity:1}.emoji-list{flex-grow:1;height:20em;overflow-y:auto}.emoji-list a{background-color:#111;display:inline-block;margin:4px;padding:2px}.emoji-list a ::ng-deep .emoji{height:32px;width:32px}.emoji-list a:hover{background-color:#333}.search-box{align-items:baseline;display:flex}.search-box mat-form-field{flex-grow:1}@media (max-width:500px){.selector{flex-direction:row;height:27em}.emoji-list{height:auto}}"]
+                    styles: [":host{background:#111;color:#fff;border:1px solid #333;border-radius:5px;padding:.5em;width:calc(9*(32px + 1em));max-width:calc(100vw - 1.5em)}.selector{display:flex;flex-direction:column}.categories a{opacity:.25;transition:opacity .4s ease-in-out}.categories a:hover{opacity:.5}.categories a.active{opacity:1}.emoji-list{flex-grow:1;overflow-y:auto;height:20em}.emoji-list a{display:inline-block;padding:2px;margin:4px;background-color:#111}.emoji-list a ::ng-deep .emoji{width:32px;height:32px}.emoji-list a:hover{background-color:#333}.search-box{display:flex;align-items:baseline}.search-box mat-form-field{flex-grow:1}@media (max-width:500px){.selector{flex-direction:row;height:27em}.emoji-list{height:auto}}"]
                 },] }
     ];
     EmojiSelectorPanelComponent.ctorParameters = function () { return [
@@ -7211,12 +7183,36 @@
                 },] }
     ];
 
+    var ChatBackendBase = /** @class */ (function () {
+        function ChatBackendBase() {
+            this._userChanged = new rxjs.BehaviorSubject(null);
+        }
+        Object.defineProperty(ChatBackendBase.prototype, "userChanged", {
+            get: function () {
+                return this._userChanged;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ChatBackendBase.prototype, "user", {
+            get: function () {
+                return this._user;
+            },
+            set: function (user) {
+                this._user = user;
+                this._userChanged.next(user);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return ChatBackendBase;
+    }());
+
     /**
      * Unified chat and comments component
      */
     var BantaComponent = /** @class */ (function () {
-        function BantaComponent(banta, backend, matDialog) {
-            this.banta = banta;
+        function BantaComponent(backend, matDialog) {
             this.backend = backend;
             this.matDialog = matDialog;
             this._subs = new rxjs.Subscription();
@@ -7235,7 +7231,7 @@
         }
         BantaComponent.prototype.ngOnInit = function () {
             var _this = this;
-            this._subs.add(this.banta.userChanged.subscribe(function (user) { return _this.currentUser = user; }));
+            this._subs.add(this.backend.userChanged.subscribe(function (user) { return _this.currentUser = user; }));
             this._subs.add(this.backend.notificationsChanged.subscribe(function (notifs) { return _this.notifications = notifs; }));
             this._subs.add(this.backend.newNotification.subscribe(function (notif) {
                 _this.newNotifications = true;
@@ -7254,7 +7250,7 @@
                             message = {
                                 user: null,
                                 sentAt: Date.now(),
-                                upvotes: 0,
+                                likes: 0,
                                 message: text
                             };
                             _a.label = 1;
@@ -7418,19 +7414,7 @@
         BantaComponent.prototype.upvoteMessage = function (message) {
             return __awaiter(this, void 0, void 0, function () {
                 return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            if (!message.parentMessageId) return [3 /*break*/, 2];
-                            return [4 /*yield*/, this.backend.upvoteMessage(message.topicId, message.parentMessageId, message.id)];
-                        case 1:
-                            _a.sent();
-                            return [3 /*break*/, 4];
-                        case 2: return [4 /*yield*/, this.backend.upvoteMessage(message.topicId, message.id)];
-                        case 3:
-                            _a.sent();
-                            _a.label = 4;
-                        case 4: return [2 /*return*/];
-                    }
+                    return [2 /*return*/];
                 });
             });
         };
@@ -7451,13 +7435,12 @@
     BantaComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "banta",
-                    template: "\r\n<mat-menu #userMenu=\"matMenu\">\r\n    <ng-container *ngIf=\"currentUser\">\r\n        <button [disabled]=\"true\" mat-menu-item>{{currentUser.displayName}} (@{{currentUser.username}})</button>\r\n        <button mat-menu-item (click)=\"signOut()\">Sign Out</button>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!currentUser\">\r\n        <button mat-menu-item>Sign In</button>\r\n    </ng-container>\r\n    <button mat-menu-item>Help</button>\r\n</mat-menu>\r\n\r\n<div class=\"tabs\">\r\n    <div>\r\n        <a mat-button (click)=\"mobileFocus = 'chat'\">{{chatLabel}}</a>\r\n        <a mat-button (click)=\"mobileFocus = 'comments'\">{{commentsLabel}}</a>\r\n    </div>\r\n    <div class=\"spacer\"></div>\r\n    <div>\r\n        <ng-container *ngIf=\"currentUser\">\r\n            <button mat-button [matMenuTriggerFor]=\"userMenu\">\r\n                @{{currentUser.username}}\r\n            </button>\r\n            <button mat-icon-button (click)=\"showNotifications()\">\r\n                <mat-icon>notification_important</mat-icon>\r\n            </button>\r\n        </ng-container>\r\n        \r\n        <button mat-button *ngIf=\"!currentUser\" (click)=\"showSignIn()\">\r\n            Sign In\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"firehose\" [class.focus]=\"mobileFocus === 'chat'\">\r\n    <header>\r\n        <div>\r\n            <label (click)=\"mobileFocus = 'chat'\">{{chatLabel}}</label>\r\n            <div class=\"spacer\"></div>\r\n\r\n            <ng-container *ngIf=\"currentUser\">\r\n                <button mat-button [matMenuTriggerFor]=\"userMenu\">\r\n                    @{{currentUser.username}}\r\n                </button>\r\n                <button mat-icon-button (click)=\"showNotifications()\">\r\n                    <mat-icon>notification_important</mat-icon>\r\n                </button>\r\n            </ng-container>\r\n            \r\n            <button mat-button *ngIf=\"!currentUser\" (click)=\"showSignIn()\">\r\n                Sign In\r\n            </button>\r\n        </div>\r\n    </header>\r\n    <banta-chat \r\n        #firehose\r\n        [source]=\"firehoseSource\"\r\n        (signInSelected)=\"showSignIn()\"\r\n        (upvoted)=\"upvoteMessage($event)\"\r\n        (userSelected)=\"showProfile($event.user)\"\r\n        (reported)=\"reportMessage($event)\"\r\n        ></banta-chat>\r\n</div>\r\n\r\n<div class=\"aux\" [class.focus]=\"mobileFocus === 'aux'\" [class.open]=\"auxOpen\">\r\n    <header>\r\n        <div>\r\n            <label>{{auxTitle}}</label>\r\n            <div class=\"spacer\"></div>\r\n            <button mat-icon-button (click)=\"auxOpen = false\">\r\n                <mat-icon>close</mat-icon>\r\n            </button>\r\n        </div>\r\n    </header>\r\n    <div class=\"aux-contents\">\r\n        <ng-container *ngIf=\"auxMode === 'profile'\">\r\n            <ng-container *ngIf=\"profileUser\">\r\n\r\n                <div>\r\n                    <strong style=\"font-size: 125%;\">\r\n                        {{profileUser.displayName}}\r\n                    </strong>\r\n                    @{{profileUser.username}}\r\n                </div>\r\n\r\n                <br/>\r\n                <strong>Top Messages</strong>\r\n\r\n                <div>\r\n                    <em>Not yet available</em>\r\n                </div>\r\n\r\n                <br/>\r\n                <strong>Recent Messages</strong>\r\n\r\n                <div>\r\n                    <em>Not yet available</em>\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"auxMode === 'report'\">\r\n            <p>Are you sure you want to report this message?</p>\r\n\r\n            <banta-live-message [message]=\"reportedMessage\"></banta-live-message>\r\n\r\n            <div style=\"text-align: center;\">\r\n                <button mat-raised-button color=\"primary\" (click)=\"sendReport(reportedMessage)\">Yes, Report</button>\r\n                &nbsp;\r\n                <button mat-raised-button color=\"secondary\" (click)=\"auxOpen = false\">No, Cancel</button>\r\n            </div>\r\n\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"auxMode === 'notifications'\">\r\n\r\n            <div *ngIf=\"!notifications || notifications.length === 0\">\r\n                <em>You do not have any notifications yet</em>\r\n            </div>\r\n            \r\n            <div class=\"notifications\">\r\n                <div class=\"notification\" *ngFor=\"let notif of notifications\">\r\n                    <div>\r\n                        <ng-container *ngIf=\"notif.type === 'upvote'\">\r\n                            @{{notif.message?.user?.username}} upvoted your post\r\n                            \r\n                            <banta-live-message\r\n                                [message]=\"notif.message\"\r\n                                (upvoted)=\"upvoteMessage(notif.message)\"\r\n                                (reported)=\"reportMessage(notif.message)\"\r\n                                (selected)=\"goToMessage(notif.message)\">\r\n                            </banta-live-message>\r\n\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"notif.type === 'notice'\">\r\n                            <div>\r\n                                {{notif.message}}\r\n                            </div>\r\n                            <a mat-button target=\"_blank\" href=\"{{notif.actionUrl}}\">\r\n                                {{notif.actionLabel}}\r\n                            </a>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"notif.type === 'mention'\">\r\n                            You were mentioned by @{{notif.message?.user?.username}}\r\n\r\n                            <banta-live-message\r\n                                [message]=\"notif.message\"\r\n                                (upvoted)=\"upvoteMessage(notif.message)\"\r\n                                (reported)=\"reportMessage(notif.message)\"\r\n                                (selected)=\"goToMessage(notif.message)\">\r\n                            </banta-live-message>\r\n\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"notif.type === 'reply'\">\r\n                            @{{notif.replyMessage?.user?.username}} replied to your post\r\n                            \r\n                            <banta-live-message\r\n                                [message]=\"notif.replyMessage\"\r\n                                (upvoted)=\"upvoteMessage(notif.replyMessage)\"\r\n                                (reported)=\"reportMessage(notif.replyMessage)\"\r\n                                (selected)=\"goToMessage(notif.replyMessage)\">\r\n                            </banta-live-message>\r\n                        </ng-container>\r\n                    </div>\r\n\r\n                    <banta-timestamp [value]=\"notif.sentAt\"></banta-timestamp>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n<div class=\"points\" [class.focus]=\"mobileFocus === 'points'\">\r\n    <header>\r\n        <div>\r\n            <label>{{commentsLabel}}</label>\r\n        </div>\r\n    </header>\r\n    <div class=\"point-focus\">\r\n        <div class=\"actions\">\r\n            <button mat-button (click)=\"pointUnfocus()\">\r\n                <mat-icon>arrow_back</mat-icon>\r\n                Back\r\n            </button>\r\n\r\n            <div class=\"spacer\"></div>\r\n            \r\n            <ng-container *ngIf=\"pointOpen\">\r\n                <div class=\"counted-action\">\r\n                    <div class=\"count-indicator\">  \r\n                        {{pointOpen.upvotes}}\r\n                    </div>\r\n                    <button mat-icon-button>\r\n                        <mat-icon>thumb_up</mat-icon>\r\n                    </button>\r\n                </div>\r\n\r\n            </ng-container>\r\n        </div>\r\n\r\n        <div *ngIf=\"!pointSubChat\">\r\n            Error: No subchat\r\n        </div>\r\n        \r\n        <banta-comment-view\r\n            class=\"subcomments\"\r\n            *ngIf=\"pointSubChat\"\r\n            [newestLast]=\"true\"\r\n            [allowReplies]=\"false\"\r\n            [source]=\"pointSubChat\"\r\n            (upvoted)=\"upvoteMessage($event)\"\r\n            (reported)=\"reportMessage($event)\"\r\n            (userSelected)=\"showProfile($event.user)\"\r\n            >\r\n            \r\n            <banta-comment\r\n                class=\"focused-comment\"\r\n                data-before\r\n                *ngIf=\"pointOpen\"\r\n                (upvoted)=\"upvoteMessage(pointOpen)\"\r\n                (userSelected)=\"showProfile(pointOpen.user)\"\r\n                (reported)=\"reportMessage(pointOpen)\"\r\n                [showReplyAction]=\"false\"\r\n                [message]=\"pointOpen\"\r\n                ></banta-comment>\r\n        \r\n            <div class=\"message reply\">\r\n                Reply:\r\n                <form class=\"new-message\" (submit)=\"sendPointSubMessage()\">\r\n                    <textarea \r\n                        name=\"message\" \r\n                        (keydown)=\"newPointSubMessageKeyDown($event)\"\r\n                        [(ngModel)]=\"newPointSubMessage.message\"></textarea>\r\n                \r\n                    <div class=\"actions\">\r\n                        <button [disabled]=\"!newPointSubMessage.message\" \r\n                            mat-raised-button color=\"primary\">Send</button>\r\n                    </div>\r\n                </form>\r\n            </div>\r\n        </banta-comment-view>\r\n    </div>\r\n    <div class=\"points-section\">\r\n        <banta-comments\r\n            [source]=\"pointSource\"\r\n            (signInSelected)=\"showSignIn()\"\r\n            (upvoted)=\"upvoteMessage($event)\"\r\n            (reported)=\"reportMessage($event)\"\r\n            (selected)=\"goToMessage($event)\"\r\n            (userSelected)=\"showProfile($event.user)\"\r\n            ></banta-comments>\r\n    </div>\r\n</div>",
-                    styles: [":host{display:flex;flex-direction:row;height:40em;padding:.5em;position:relative}.counted-action{align-items:center;display:flex}.count-indicator{border:1px solid #333;border-radius:3px;font-size:9pt;padding:0 3px}header{margin-bottom:1em;position:relative}header div{align-items:center;display:flex;height:30px}header button{color:#666}header label{color:#333;font-size:12pt;font-weight:100;letter-spacing:2px;margin:0 auto 0 0;overflow-x:hidden;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;z-index:1}header:after,header label{display:block;position:relative}header:after{border:1px solid #ccc;content:\"\";height:0;width:100%;z-index:0}.points{display:flex;flex-direction:column;max-width:50em}:host.point-focus .points{max-width:50em;width:66%}:host.point-focus .points .points-section{opacity:0;pointer-events:none}:host.point-focus .points .point-focus{opacity:1;pointer-events:auto}:host.point-focus .points .point-focus .actions{display:flex}banta-comments{flex-grow:1}.points{flex-shrink:0;font-size:12pt;margin-left:.5em;max-width:30em;position:relative;transition:width .2s ease-in,max-width .2s ease-in;width:33%}.points .points-section{opacity:1;z-index:2}.points .point-focus,.points .points-section{display:flex;flex-direction:column;flex-grow:1;transition:opacity .2s ease-in}.points .point-focus{bottom:0;left:0;opacity:0;padding:.5em;position:absolute;right:0;top:1.75em;width:100%}.firehose{display:flex;flex-direction:column;flex-grow:1;font-size:10pt}form{align-items:center;display:flex;padding:.5em 0}form textarea{font-size:14pt;min-height:6em}form input[type=text],form textarea{background:#000;border:1px solid #333;color:#fff;width:100%}form input[type=text]{height:1em}form .actions{margin-left:1em}form button{display:block;margin:0 0 0 auto}.subcomments ::ng-deep banta-comment{font-size:10pt}.subcomments ::ng-deep banta-comment.focused-comment{background:#001321;color:#fff;font-size:12pt}.aux{display:flex;flex-direction:column;min-width:0;overflow-x:hidden;transition:width .4s ease-out,min-width .4s ease-out;width:0}.aux.open{min-width:18em;width:30em}.aux .aux-contents{align-items:center;display:flex;flex-direction:column;flex-grow:1;justify-content:center;max-width:100%;min-width:10em;width:30em}.notifications .notification{border-bottom:1px solid #333;padding:1em}.notifications .notification banta-timestamp{color:#999;display:block;font-size:9pt;text-align:right}.message.reply{padding:1em}.tabs{display:none}@media (max-width:1015px){:host{flex-direction:column}.tabs{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:rgba(0,0,0,.5);display:flex;left:0;position:absolute;right:0;top:0;width:100%;z-index:10}.points{margin-left:0;max-width:100%;width:100%}header{display:none}.aux,:host.point-focus .points{max-width:100%;width:100%}.aux{min-width:0}.aux,.firehose,.points{background:#000;bottom:0;left:0;position:absolute;right:0;top:2em;z-index:0}.aux.focus,.firehose.focus,.points.focus{z-index:2}}:host-context(.mat-dark-theme) :host{background:#090909;color:#fff}:host-context(.mat-dark-theme) form textarea{background:#ccc;color:#333}:host-context(.mat-dark-theme) header:after{border-color:#222}:host-context(.mat-dark-theme) header label{color:#aaa}"]
+                    template: "\r\n<mat-menu #userMenu=\"matMenu\">\r\n    <ng-container *ngIf=\"currentUser\">\r\n        <button [disabled]=\"true\" mat-menu-item>{{currentUser.displayName}} (@{{currentUser.username}})</button>\r\n        <button mat-menu-item (click)=\"signOut()\">Sign Out</button>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!currentUser\">\r\n        <button mat-menu-item>Sign In</button>\r\n    </ng-container>\r\n    <button mat-menu-item>Help</button>\r\n</mat-menu>\r\n\r\n<div class=\"tabs\">\r\n    <div>\r\n        <a mat-button (click)=\"mobileFocus = 'chat'\">{{chatLabel}}</a>\r\n        <a mat-button (click)=\"mobileFocus = 'comments'\">{{commentsLabel}}</a>\r\n    </div>\r\n    <div class=\"spacer\"></div>\r\n    <div>\r\n        <ng-container *ngIf=\"currentUser\">\r\n            <button mat-button [matMenuTriggerFor]=\"userMenu\">\r\n                @{{currentUser.username}}\r\n            </button>\r\n            <button mat-icon-button (click)=\"showNotifications()\">\r\n                <mat-icon>notification_important</mat-icon>\r\n            </button>\r\n        </ng-container>\r\n        \r\n        <button mat-button *ngIf=\"!currentUser\" (click)=\"showSignIn()\">\r\n            Sign In\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"firehose\" [class.focus]=\"mobileFocus === 'chat'\">\r\n    <header>\r\n        <div>\r\n            <label (click)=\"mobileFocus = 'chat'\">{{chatLabel}}</label>\r\n            <div class=\"spacer\"></div>\r\n\r\n            <ng-container *ngIf=\"currentUser\">\r\n                <button mat-button [matMenuTriggerFor]=\"userMenu\">\r\n                    @{{currentUser.username}}\r\n                </button>\r\n                <button mat-icon-button (click)=\"showNotifications()\">\r\n                    <mat-icon>notification_important</mat-icon>\r\n                </button>\r\n            </ng-container>\r\n            \r\n            <button mat-button *ngIf=\"!currentUser\" (click)=\"showSignIn()\">\r\n                Sign In\r\n            </button>\r\n        </div>\r\n    </header>\r\n    <banta-chat \r\n        #firehose\r\n        [source]=\"firehoseSource\"\r\n        (signInSelected)=\"showSignIn()\"\r\n        (upvoted)=\"upvoteMessage($event)\"\r\n        (userSelected)=\"showProfile($event.user)\"\r\n        (reported)=\"reportMessage($event)\"\r\n        ></banta-chat>\r\n</div>\r\n\r\n<div class=\"aux\" [class.focus]=\"mobileFocus === 'aux'\" [class.open]=\"auxOpen\">\r\n    <header>\r\n        <div>\r\n            <label>{{auxTitle}}</label>\r\n            <div class=\"spacer\"></div>\r\n            <button mat-icon-button (click)=\"auxOpen = false\">\r\n                <mat-icon>close</mat-icon>\r\n            </button>\r\n        </div>\r\n    </header>\r\n    <div class=\"aux-contents\">\r\n        <ng-container *ngIf=\"auxMode === 'profile'\">\r\n            <ng-container *ngIf=\"profileUser\">\r\n\r\n                <div>\r\n                    <strong style=\"font-size: 125%;\">\r\n                        {{profileUser.displayName}}\r\n                    </strong>\r\n                    @{{profileUser.username}}\r\n                </div>\r\n\r\n                <br/>\r\n                <strong>Top Messages</strong>\r\n\r\n                <div>\r\n                    <em>Not yet available</em>\r\n                </div>\r\n\r\n                <br/>\r\n                <strong>Recent Messages</strong>\r\n\r\n                <div>\r\n                    <em>Not yet available</em>\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"auxMode === 'report'\">\r\n            <p>Are you sure you want to report this message?</p>\r\n\r\n            <banta-live-message [message]=\"reportedMessage\"></banta-live-message>\r\n\r\n            <div style=\"text-align: center;\">\r\n                <button mat-raised-button color=\"primary\" (click)=\"sendReport(reportedMessage)\">Yes, Report</button>\r\n                &nbsp;\r\n                <button mat-raised-button color=\"secondary\" (click)=\"auxOpen = false\">No, Cancel</button>\r\n            </div>\r\n\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"auxMode === 'notifications'\">\r\n\r\n            <div *ngIf=\"!notifications || notifications.length === 0\">\r\n                <em>You do not have any notifications yet</em>\r\n            </div>\r\n            \r\n            <div class=\"notifications\">\r\n                <div class=\"notification\" *ngFor=\"let notif of notifications\">\r\n                    <div>\r\n                        <ng-container *ngIf=\"notif.type === 'upvote'\">\r\n                            @{{notif.message?.user?.username}} upvoted your post\r\n                            \r\n                            <banta-live-message\r\n                                [message]=\"notif.message\"\r\n                                (upvoted)=\"upvoteMessage(notif.message)\"\r\n                                (reported)=\"reportMessage(notif.message)\"\r\n                                (selected)=\"goToMessage(notif.message)\">\r\n                            </banta-live-message>\r\n\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"notif.type === 'notice'\">\r\n                            <div>\r\n                                {{notif.message}}\r\n                            </div>\r\n                            <a mat-button target=\"_blank\" href=\"{{notif.actionUrl}}\">\r\n                                {{notif.actionLabel}}\r\n                            </a>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"notif.type === 'mention'\">\r\n                            You were mentioned by @{{notif.message?.user?.username}}\r\n\r\n                            <banta-live-message\r\n                                [message]=\"notif.message\"\r\n                                (upvoted)=\"upvoteMessage(notif.message)\"\r\n                                (reported)=\"reportMessage(notif.message)\"\r\n                                (selected)=\"goToMessage(notif.message)\">\r\n                            </banta-live-message>\r\n\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"notif.type === 'reply'\">\r\n                            @{{notif.replyMessage?.user?.username}} replied to your post\r\n                            \r\n                            <banta-live-message\r\n                                [message]=\"notif.replyMessage\"\r\n                                (upvoted)=\"upvoteMessage(notif.replyMessage)\"\r\n                                (reported)=\"reportMessage(notif.replyMessage)\"\r\n                                (selected)=\"goToMessage(notif.replyMessage)\">\r\n                            </banta-live-message>\r\n                        </ng-container>\r\n                    </div>\r\n\r\n                    <banta-timestamp [value]=\"notif.sentAt\"></banta-timestamp>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n<div class=\"points\" [class.focus]=\"mobileFocus === 'points'\">\r\n    <header>\r\n        <div>\r\n            <label>{{commentsLabel}}</label>\r\n        </div>\r\n    </header>\r\n    <div class=\"point-focus\">\r\n        <div class=\"actions\">\r\n            <button mat-button (click)=\"pointUnfocus()\">\r\n                <mat-icon>arrow_back</mat-icon>\r\n                Back\r\n            </button>\r\n\r\n            <div class=\"spacer\"></div>\r\n            \r\n            <ng-container *ngIf=\"pointOpen\">\r\n                <div class=\"counted-action\">\r\n                    <div class=\"count-indicator\">  \r\n                        {{pointOpen.likes}}\r\n                    </div>\r\n                    <button mat-icon-button>\r\n                        <mat-icon>thumb_up</mat-icon>\r\n                    </button>\r\n                </div>\r\n\r\n            </ng-container>\r\n        </div>\r\n\r\n        <div *ngIf=\"!pointSubChat\">\r\n            Error: No subchat\r\n        </div>\r\n        \r\n        <banta-comment-view\r\n            class=\"subcomments\"\r\n            *ngIf=\"pointSubChat\"\r\n            [newestLast]=\"true\"\r\n            [allowReplies]=\"false\"\r\n            [source]=\"pointSubChat\"\r\n            (upvoted)=\"upvoteMessage($event)\"\r\n            (reported)=\"reportMessage($event)\"\r\n            (userSelected)=\"showProfile($event.user)\"\r\n            >\r\n            \r\n            <banta-comment\r\n                class=\"focused-comment\"\r\n                data-before\r\n                *ngIf=\"pointOpen\"\r\n                (upvoted)=\"upvoteMessage(pointOpen)\"\r\n                (userSelected)=\"showProfile(pointOpen.user)\"\r\n                (reported)=\"reportMessage(pointOpen)\"\r\n                [showReplyAction]=\"false\"\r\n                [message]=\"pointOpen\"\r\n                ></banta-comment>\r\n        \r\n            <div class=\"message reply\">\r\n                Reply:\r\n                <form class=\"new-message\" (submit)=\"sendPointSubMessage()\">\r\n                    <textarea \r\n                        name=\"message\" \r\n                        (keydown)=\"newPointSubMessageKeyDown($event)\"\r\n                        [(ngModel)]=\"newPointSubMessage.message\"></textarea>\r\n                \r\n                    <div class=\"actions\">\r\n                        <button [disabled]=\"!newPointSubMessage.message\" \r\n                            mat-raised-button color=\"primary\">Send</button>\r\n                    </div>\r\n                </form>\r\n            </div>\r\n        </banta-comment-view>\r\n    </div>\r\n    <div class=\"points-section\">\r\n        <banta-comments\r\n            [source]=\"pointSource\"\r\n            (signInSelected)=\"showSignIn()\"\r\n            (upvoted)=\"upvoteMessage($event)\"\r\n            (reported)=\"reportMessage($event)\"\r\n            (selected)=\"goToMessage($event)\"\r\n            (userSelected)=\"showProfile($event.user)\"\r\n            ></banta-comments>\r\n    </div>\r\n</div>",
+                    styles: [":host{display:flex;flex-direction:row;padding:.5em;height:40em;position:relative}.counted-action{display:flex;align-items:center}.count-indicator{font-size:9pt;padding:0 3px;border-radius:3px;border:1px solid #333}header{position:relative;margin-bottom:1em}header div{display:flex;align-items:center;height:30px}header button{color:#666}header label{text-transform:uppercase;z-index:1;font-size:12pt;letter-spacing:2px;font-weight:100;color:#333;margin:0 auto 0 0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}header:after,header label{display:block;position:relative}header:after{content:\"\";border:1px solid #ccc;height:0;width:100%;z-index:0}.points{max-width:50em;display:flex;flex-direction:column}:host.point-focus .points{width:66%;max-width:50em}:host.point-focus .points .points-section{opacity:0;pointer-events:none}:host.point-focus .points .point-focus{opacity:1;pointer-events:auto}:host.point-focus .points .point-focus .actions{display:flex}banta-comments{flex-grow:1}.points{width:33%;margin-left:.5em;font-size:12pt;flex-shrink:0;max-width:30em;transition:width .2s ease-in,max-width .2s ease-in;position:relative}.points .points-section{opacity:1;z-index:2}.points .point-focus,.points .points-section{flex-grow:1;display:flex;flex-direction:column;transition:opacity .2s ease-in}.points .point-focus{position:absolute;width:100%;bottom:0;top:1.75em;right:0;left:0;padding:.5em;opacity:0}.firehose{flex-grow:1;font-size:10pt;display:flex;flex-direction:column}form{display:flex;padding:.5em 0;align-items:center}form textarea{font-size:14pt;min-height:6em}form input[type=text],form textarea{background:#000;color:#fff;border:1px solid #333;width:100%}form input[type=text]{height:1em}form .actions{margin-left:1em}form button{display:block;margin:0 0 0 auto}.subcomments ::ng-deep banta-comment{font-size:10pt}.subcomments ::ng-deep banta-comment.focused-comment{background:#001321;color:#fff;font-size:12pt}.aux{width:0;min-width:0;overflow-x:hidden;transition:width .4s ease-out,min-width .4s ease-out;display:flex;flex-direction:column}.aux.open{width:30em;min-width:18em}.aux .aux-contents{width:30em;min-width:10em;max-width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-grow:1}.notifications .notification{border-bottom:1px solid #333;padding:1em}.notifications .notification banta-timestamp{display:block;text-align:right;font-size:9pt;color:#999}.message.reply{padding:1em}.tabs{display:none}@media (max-width:1015px){:host{flex-direction:column}.tabs{display:flex;position:absolute;top:0;left:0;right:0;width:100%;z-index:10;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:rgba(0,0,0,.5)}.points{width:100%;max-width:100%;margin-left:0}header{display:none}.aux,:host.point-focus .points{width:100%;max-width:100%}.aux{min-width:0}.aux,.firehose,.points{position:absolute;top:2em;left:0;right:0;bottom:0;z-index:0;background:#000}.aux.focus,.firehose.focus,.points.focus{z-index:2}}:host-context(.mat-dark-theme) :host{background:#090909;color:#fff}:host-context(.mat-dark-theme) form textarea{background:#ccc;color:#333}:host-context(.mat-dark-theme) header:after{border-color:#222}:host-context(.mat-dark-theme) header label{color:#aaa}"]
                 },] }
     ];
     BantaComponent.ctorParameters = function () { return [
-        { type: BantaService },
-        { type: ChatBackendService },
+        { type: ChatBackendBase },
         { type: dialog.MatDialog }
     ]; };
     BantaComponent.propDecorators = {
@@ -7541,8 +7524,8 @@
     ChatMessageComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'banta-chat-message',
-                    template: "<div class=\"message-content\">\r\n    <div class=\"user\" (click)=\"selectUser()\">\r\n        <div class=\"avatar\" [style.background-image]=\"avatarForUser(message.user)\"></div>\r\n        <label>{{message.user.username}}</label>\r\n    </div>\r\n    <div class=\"content\">\r\n        <div (click)=\"select()\">\r\n            {{message.message}}\r\n        </div>\r\n        <div class=\"status\">\r\n            <div class=\"count-indicator\" *ngIf=\"message.upvotes > 0\">\r\n                {{message.upvotes}} <mat-icon [inline]=\"true\">star</mat-icon>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<div class=\"actions\">\r\n    <button mat-icon-button matTooltip=\"Upvote\" matTooltipPosition=\"below\" (click)=\"upvote()\">\r\n        <mat-icon [inline]=\"true\">thumb_up</mat-icon>\r\n    </button>\r\n    <button mat-icon-button matTooltip=\"Report\" matTooltipPosition=\"below\" (click)=\"report()\">\r\n        <mat-icon [inline]=\"true\">report</mat-icon>\r\n    </button>\r\n</div>",
-                    styles: [":host{align-items:center;background-color:#fff;color:#000;display:flex;flex-direction:row;padding:0 1em;transition:background-color .4s ease-out}:host .message-content .content{color:#111}:host:hover{background-color:#ddd}:host.highlight{background:#00121b}:host.highlight:hover{background:#01324d}:host:nth-child(2n){background-color:#eee}:host:nth-child(2n):hover{background:#ddd}:host:nth-child(2n) .message-content .content{color:#222}:host:nth-child(2n).highlight{background:#001a2a}:host:nth-child(2n).highlight:hover{background:#002b44}:host .message-content{align-items:center;display:flex;flex-direction:row;flex-grow:1}:host .message-content .content{display:flex;flex-direction:row;padding:5px 0}:host .message-content .content .status{align-items:center;display:flex;flex-direction:row;margin-left:1em}:host .message-content .content .status mat-icon{margin-left:.5em}:host .user{align-items:center;color:#999;display:flex;flex-shrink:0;font-weight:400;margin-right:.25em;text-align:right}:host .user .avatar{background-color:#333;background-position:50%;background-size:cover;border-radius:100%;flex-grow:0;flex-shrink:0;height:2em;margin-right:1em;width:2em}:host .user:after{content:\":\";margin-right:1em}:host .content{flex-grow:1}:host .actions{flex-shrink:0;opacity:0;transition:opacity .4s ease-out;white-space:nowrap}:host:hover .actions{opacity:1}.count-indicator{white-space:nowrap}:host-context(.mat-dark-theme){background-color:#000;color:#fff}:host-context(.mat-dark-theme) .message-content .content{color:#ddd}:host-context(.mat-dark-theme):hover{background-color:#111}:host-context(.mat-dark-theme):nth-child(2n).highlight{background:#001a2a}:host-context(.mat-dark-theme):nth-child(2n).highlight:hover{background:#002b44}:host-context(.mat-dark-theme):nth-child(2n):hover{background-color:#111}:host-context(.mat-dark-theme):nth-child(2n){background-color:#080808}:host-context(.mat-dark-theme):nth-child(2n) .message-content .content{color:#eee}label{margin:0}"]
+                    template: "<div class=\"message-content\">\r\n    <div class=\"user\" (click)=\"selectUser()\">\r\n        <div class=\"avatar\" [style.background-image]=\"avatarForUser(message.user)\"></div>\r\n        <label>{{message.user.username}}</label>\r\n    </div>\r\n    <div class=\"content\">\r\n        <div (click)=\"select()\">\r\n            {{message.message}}\r\n        </div>\r\n        <div class=\"status\">\r\n            <div class=\"count-indicator\" *ngIf=\"message.likes > 0\">\r\n                {{message.likes}} <mat-icon [inline]=\"true\">star</mat-icon>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<div class=\"actions\">\r\n    <button mat-icon-button matTooltip=\"Upvote\" matTooltipPosition=\"below\" (click)=\"upvote()\">\r\n        <mat-icon [inline]=\"true\">thumb_up</mat-icon>\r\n    </button>\r\n    <button mat-icon-button matTooltip=\"Report\" matTooltipPosition=\"below\" (click)=\"report()\">\r\n        <mat-icon [inline]=\"true\">report</mat-icon>\r\n    </button>\r\n</div>",
+                    styles: [":host{display:flex;flex-direction:row;align-items:center;padding:0 1em;background-color:#fff;color:#000;transition:background-color .4s ease-out}:host .message-content .content{color:#111}:host:hover{background-color:#ddd}:host.highlight{background:#00121b}:host.highlight:hover{background:#01324d}:host:nth-child(2n){background-color:#eee}:host:nth-child(2n):hover{background:#ddd}:host:nth-child(2n) .message-content .content{color:#222}:host:nth-child(2n).highlight{background:#001a2a}:host:nth-child(2n).highlight:hover{background:#002b44}:host .message-content{display:flex;flex-direction:row;flex-grow:1;align-items:center}:host .message-content .content{display:flex;flex-direction:row;padding:5px 0}:host .message-content .content .status{display:flex;flex-direction:row;align-items:center;margin-left:1em}:host .message-content .content .status mat-icon{margin-left:.5em}:host .user{color:#999;font-weight:400;text-align:right;margin-right:.25em;flex-shrink:0;display:flex;align-items:center}:host .user .avatar{background-position:50%;background-size:cover;background-color:#333;border-radius:100%;flex-shrink:0;flex-grow:0;margin-right:1em;width:2em;height:2em}:host .user:after{content:\":\";margin-right:1em}:host .content{flex-grow:1}:host .actions{flex-shrink:0;white-space:nowrap;opacity:0;transition:opacity .4s ease-out}:host:hover .actions{opacity:1}.count-indicator{white-space:nowrap}:host-context(.mat-dark-theme){background-color:#000;color:#fff}:host-context(.mat-dark-theme) .message-content .content{color:#ddd}:host-context(.mat-dark-theme):hover{background-color:#111}:host-context(.mat-dark-theme):nth-child(2n).highlight{background:#001a2a}:host-context(.mat-dark-theme):nth-child(2n).highlight:hover{background:#002b44}:host-context(.mat-dark-theme):nth-child(2n):hover{background-color:#111}:host-context(.mat-dark-theme):nth-child(2n){background-color:#080808}:host-context(.mat-dark-theme):nth-child(2n) .message-content .content{color:#eee}label{margin:0}"]
                 },] }
     ];
     ChatMessageComponent.propDecorators = {
@@ -7622,7 +7605,7 @@
                 },] }
     ];
     LiveChatMessageComponent.ctorParameters = function () { return [
-        { type: ChatBackendService }
+        { type: ChatBackendBase }
     ]; };
     LiveChatMessageComponent.propDecorators = {
         upvoted: [{ type: core.Output }],
@@ -7632,7 +7615,8 @@
     };
 
     var ChatViewComponent = /** @class */ (function () {
-        function ChatViewComponent(elementRef) {
+        function ChatViewComponent(backend, elementRef) {
+            this.backend = backend;
             this.elementRef = elementRef;
             this._sourceSubs = new rxjs.Subscription();
             this._selected = new rxjs.Subject();
@@ -7663,10 +7647,8 @@
                     console.dir(this.messages);
                     this._sourceSubs.add(this._source.messageReceived.subscribe(function (msg) { return _this.messageReceived(msg); }));
                     this._sourceSubs.add(this._source.messageSent.subscribe(function (msg) { return _this.messageSent(msg); }));
-                    if (this._source.currentUserChanged) {
-                        this._sourceSubs.add(this._source.currentUserChanged
-                            .subscribe(function (user) { return _this.currentUser = user; }));
-                    }
+                    this._sourceSubs.add(this.backend.userChanged
+                        .subscribe(function (user) { return _this.currentUser = user; }));
                 }
             },
             enumerable: false,
@@ -7782,10 +7764,11 @@
         { type: core.Component, args: [{
                     selector: 'banta-chat-view',
                     template: "<div class=\"message-container\" #messageContainer>\r\n    <ng-content select=\"[data-before]\"></ng-content>\r\n    <ng-container *ngFor=\"let message of messages\">\r\n        <banta-chat-message\r\n            *ngIf=\"!message.hidden\"\r\n            [message]=\"message\"\r\n            [class.highlight]=\"mentionsMe(message)\" \r\n            [class.flash]=\"message.id === flashedMessageId\"\r\n            (selected)=\"selectMessage(message)\"\r\n            (upvoted)=\"upvoteMessage(message)\"\r\n            (reported)=\"reportMessage(message)\"\r\n            (userSelected)=\"selectMessageUser(message)\"\r\n            [attr.data-id]=\"message.id\"\r\n            >\r\n            </banta-chat-message>\r\n    </ng-container>\r\n    <ng-content select=\":not([data-before])\"></ng-content>\r\n</div>",
-                    styles: [":host{display:flex;flex-direction:column;flex-grow:1}.message-container{background:#fff;color:#000;flex-grow:1;height:10em;overflow-x:hidden;overflow-y:auto;padding:.5em 1em .5em .5em}.message-container.no-scroll{height:auto;overflow-y:visible}:host-context(.mat-dark-theme) .message-container{background:#000;color:#fff}banta-chat-message.flash{-webkit-animation:flash;-webkit-animation-duration:2.5s;-webkit-animation-iteration-count:1;animation:flash;animation-duration:2.5s;animation-iteration-count:1}@-webkit-keyframes flash{0%{background:#425700;transform:scale(1)}25%{transform:scale(1.05)}50%{transform:scale(1)}75%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes flash{0%{background:#425700;transform:scale(1)}25%{transform:scale(1.05)}50%{transform:scale(1)}75%{transform:scale(1.05)}to{transform:scale(1)}}"]
+                    styles: [":host{display:flex;flex-direction:column;flex-grow:1}.message-container{flex-grow:1;overflow-y:auto;overflow-x:hidden;height:10em;color:#000;background:#fff;padding:.5em 1em .5em .5em}.message-container.no-scroll{height:auto;overflow-y:visible}:host-context(.mat-dark-theme) .message-container{color:#fff;background:#000}banta-chat-message.flash{-webkit-animation:flash;animation:flash;-webkit-animation-duration:2.5s;animation-duration:2.5s;-webkit-animation-iteration-count:1;animation-iteration-count:1}@-webkit-keyframes flash{0%{transform:scale(1);background:#425700}25%{transform:scale(1.05)}50%{transform:scale(1)}75%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes flash{0%{transform:scale(1);background:#425700}25%{transform:scale(1.05)}50%{transform:scale(1)}75%{transform:scale(1.05)}to{transform:scale(1)}}"]
                 },] }
     ];
     ChatViewComponent.ctorParameters = function () { return [
+        { type: ChatBackendBase },
         { type: core.ElementRef }
     ]; };
     ChatViewComponent.propDecorators = {
@@ -7802,10 +7785,8 @@
      * Chat component
      */
     var BantaChatComponent = /** @class */ (function () {
-        function BantaChatComponent(banta, backend, elementRef) {
-            this.banta = banta;
+        function BantaChatComponent(backend) {
             this.backend = backend;
-            this.elementRef = elementRef;
             this._subs = new rxjs.Subscription();
             this.user = null;
             this.signInLabel = 'Sign In';
@@ -7822,7 +7803,7 @@
         }
         BantaChatComponent.prototype.ngOnInit = function () {
             var _this = this;
-            this._subs.add(this.banta.userChanged.subscribe(function (user) { return _this.user = user; }));
+            this._subs.add(this.backend.userChanged.subscribe(function (user) { return _this.user = user; }));
         };
         BantaChatComponent.prototype.ngOnDestroy = function () {
             this._subs.unsubscribe();
@@ -7938,14 +7919,15 @@
         });
         Object.defineProperty(BantaChatComponent.prototype, "canChat", {
             get: function () {
-                var _a;
                 if (!this.user)
                     return false;
-                if (!this.user.permissions)
-                    return true;
-                if (!this.user.permissions.canChat)
-                    return true;
-                return (_a = this.user.permissions) === null || _a === void 0 ? void 0 : _a.canChat(this.source);
+                // TODO
+                // if (!this.user.permissions)
+                //     return true;
+                // if (!this.user.permissions.canChat)
+                //     return true;
+                // return this.user.permissions?.canChat(this.source);
+                return true;
             },
             enumerable: false,
             configurable: true
@@ -7966,7 +7948,7 @@
                             message = {
                                 user: null,
                                 sentAt: Date.now(),
-                                upvotes: 0,
+                                likes: 0,
                                 url: location.href,
                                 message: text
                             };
@@ -7998,13 +7980,11 @@
         { type: core.Component, args: [{
                     selector: 'banta-chat',
                     template: "<banta-chat-view \r\n    #chatView\r\n    [source]=\"source\"\r\n    (upvoted)=\"upvote($event)\"\r\n    (reported)=\"report($event)\"\r\n    (selected)=\"select($event)\"\r\n    (userSelected)=\"selectUser($event)\"\r\n    ></banta-chat-view>\r\n\r\n<form class=\"new-message\" (submit)=\"sendMessage()\">\r\n    \r\n    <div class=\"entry-container\">\r\n        <input\r\n            type=\"text\"\r\n            name=\"message\" \r\n            (keydown)=\"onKeyDown($event)\"\r\n            [(ngModel)]=\"newMessage.message\" />\r\n            \r\n        <emoji-selector-button\r\n            (selected)=\"insertEmoji($event)\"\r\n            ></emoji-selector-button>\r\n    </div>\r\n\r\n    <div class=\"actions\">\r\n\r\n        <ng-container *ngIf=\"!user\">\r\n            <button type=\"button\" (click)=\"showSignIn()\" mat-raised-button color=\"primary\">{{signInLabel}}</button>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"user\">\r\n            <button *ngIf=\"canChat\" [disabled]=\"!newMessage.message\" mat-raised-button color=\"primary\">{{sendLabel}}</button>\r\n            <button *ngIf=\"!canChat\" type=\"button\" (click)=\"sendPermissionError()\" mat-raised-button color=\"primary\">{{permissionDeniedLabel}}</button>\r\n        </ng-container>\r\n    </div>\r\n</form>",
-                    styles: [":host{border-radius:5px;flex-direction:column;font-size:10pt;padding:10px}.entry-container,:host{display:flex;flex-grow:1}.entry-container{flex-direction:row;position:relative}.entry-container emoji-selector-button{position:absolute;right:0;top:.15em}.entry-container input{font-size:12pt;height:2.6em;padding-left:1em}.entry-container input:-webkit-autofill,.entry-container input:-webkit-autofill:focus,.entry-container input:-webkit-autofill:hover{-webkit-box-shadow:0 0 0 1000px #211e07 inset;-webkit-text-fill-color:#9da302;-webkit-transition:background-color 5000s ease-in-out 0s;caret-color:#9da302;outline:1px solid #9da302;transition:background-color 5000s ease-in-out 0s}.entry-container emoji-selector-panel{bottom:3.5em;opacity:0;pointer-events:none;position:absolute;right:0}.entry-container emoji-selector-panel.visible{opacity:1;pointer-events:auto}form{align-items:center;display:flex;padding:.5em 0}form textarea{background:#000;border:1px solid #333;color:#fff;font-size:14pt;min-height:6em;width:100%}form input[type=text]{background:#fff;border:1px solid #ccc;color:#000;height:2.5em;width:100%}form .actions{margin-left:1em}form button{display:block;margin:0 0 0 auto}:host-context(.mat-dark-theme) form input[type=text]{background:#000;border:1px solid #333;color:#fff}"]
+                    styles: [":host{flex-direction:column;border-radius:5px;padding:10px;font-size:10pt}.entry-container,:host{display:flex;flex-grow:1}.entry-container{flex-direction:row;position:relative}.entry-container emoji-selector-button{position:absolute;right:0;top:.15em}.entry-container input{height:2.6em;font-size:12pt;padding-left:1em}.entry-container input:-webkit-autofill,.entry-container input:-webkit-autofill:focus,.entry-container input:-webkit-autofill:hover{outline:1px solid #9da302;-webkit-text-fill-color:#9da302;-webkit-box-shadow:0 0 0 1000px #211e07 inset;-webkit-transition:background-color 5000s ease-in-out 0s;transition:background-color 5000s ease-in-out 0s;caret-color:#9da302}.entry-container emoji-selector-panel{pointer-events:none;opacity:0;position:absolute;bottom:3.5em;right:0}.entry-container emoji-selector-panel.visible{opacity:1;pointer-events:auto}form{display:flex;padding:.5em 0;align-items:center}form textarea{font-size:14pt;background:#000;color:#fff;border:1px solid #333;min-height:6em;width:100%}form input[type=text]{background:#fff;color:#000;border:1px solid #ccc;width:100%;height:2.5em}form .actions{margin-left:1em}form button{display:block;margin:0 0 0 auto}:host-context(.mat-dark-theme) form input[type=text]{background:#000;color:#fff;border:1px solid #333}"]
                 },] }
     ];
     BantaChatComponent.ctorParameters = function () { return [
-        { type: BantaService },
-        { type: ChatBackendService },
-        { type: core.ElementRef }
+        { type: ChatBackendBase }
     ]; };
     BantaChatComponent.propDecorators = {
         shouldInterceptMessageSend: [{ type: core.Input }],
@@ -8122,7 +8102,8 @@
         function CommentComponent() {
             this._reported = new rxjs.Subject();
             this._selected = new rxjs.Subject();
-            this._upvoted = new rxjs.Subject();
+            this._liked = new rxjs.Subject();
+            this._unliked = new rxjs.Subject();
             this._shared = new rxjs.Subject();
             this._userSelected = new rxjs.Subject();
             this._avatarSelected = new rxjs.Subject();
@@ -8130,6 +8111,12 @@
             this.isNew = false;
             this.visible = false;
             this.showReplyAction = true;
+            this.mine = false;
+            this.editing = false;
+            this._editStarted = new rxjs.Subject();
+            this._deleted = new rxjs.Subject();
+            this._editEnded = new rxjs.Subject();
+            this._edited = new rxjs.Subject();
         }
         CommentComponent.prototype.ngOnInit = function () {
             var _this = this;
@@ -8142,6 +8129,14 @@
                 setTimeout(function () { return _this.isNew = false; }, 1000);
             }, randomTime);
         };
+        Object.defineProperty(CommentComponent.prototype, "isHighlighted", {
+            get: function () {
+                var _a, _b, _c;
+                return (_c = (_b = (_a = this.message) === null || _a === void 0 ? void 0 : _a.transientState) === null || _b === void 0 ? void 0 : _b.highlighted) !== null && _c !== void 0 ? _c : false;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(CommentComponent.prototype, "userSelected", {
             get: function () {
                 return this._userSelected.asObservable();
@@ -8170,40 +8165,78 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(CommentComponent.prototype, "upvoted", {
+        CommentComponent.prototype.saveEdit = function () {
+            this._edited.next(this.editedMessage);
+        };
+        CommentComponent.prototype.endEditing = function () {
+            this._editEnded.next();
+        };
+        CommentComponent.prototype.startEdit = function () {
+            this._editStarted.next();
+            this.editedMessage = this.message.message;
+        };
+        CommentComponent.prototype.delete = function () {
+            this._deleted.next();
+        };
+        Object.defineProperty(CommentComponent.prototype, "liked", {
             get: function () {
-                return this._upvoted.asObservable();
+                return this._liked.asObservable();
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(CommentComponent.prototype, "selected", {
+        Object.defineProperty(CommentComponent.prototype, "unliked", {
             get: function () {
-                return this._selected.asObservable();
+                return this._unliked.asObservable();
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(CommentComponent.prototype, "commentId", {
+        Object.defineProperty(CommentComponent.prototype, "selected", {
             get: function () {
-                var _a;
-                return (_a = this.message) === null || _a === void 0 ? void 0 : _a.id;
+                return this._selected.asObservable();
             },
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(CommentComponent.prototype, "edited", {
+            get: function () { return this._edited.asObservable(); },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(CommentComponent.prototype, "deleted", {
+            get: function () { return this._deleted.asObservable(); },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(CommentComponent.prototype, "editStarted", {
+            get: function () { return this._editStarted.asObservable(); },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(CommentComponent.prototype, "editEnded", {
+            get: function () { return this._editEnded.asObservable(); },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(CommentComponent.prototype, "shared", {
-            get: function () {
-                return this._shared.asObservable();
-            },
+            get: function () { return this._shared.asObservable(); },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(CommentComponent.prototype, "commentId", {
+            get: function () { var _a; return (_a = this.message) === null || _a === void 0 ? void 0 : _a.id; },
             enumerable: false,
             configurable: true
         });
         CommentComponent.prototype.report = function () {
             this._reported.next();
         };
-        CommentComponent.prototype.upvote = function () {
-            this._upvoted.next();
+        CommentComponent.prototype.like = function () {
+            this._liked.next();
+        };
+        CommentComponent.prototype.unlike = function () {
+            this._unliked.next();
         };
         CommentComponent.prototype.share = function () {
             this._shared.next(this.message);
@@ -8234,12 +8267,13 @@
     CommentComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'banta-comment',
-                    template: "\r\n<mat-menu #pointItemMenu=\"matMenu\">\r\n    <button mat-menu-item (click)=\"report()\">Report</button>\r\n    <button mat-menu-item>Help</button>\r\n</mat-menu>\r\n\r\n<div class=\"message-content\">\r\n    <div class=\"user\">\r\n        <a\r\n            href=\"javascript:;\"\r\n            class=\"avatar\"\r\n            (click)=\"selectAvatar(message.user)\"\r\n            [style.background-image]=\"avatarForUser(message.user)\"></a>\r\n        <a href=\"javascript:;\" class=\"display-name\" (click)=\"selectUser()\">{{message.user.displayName}}</a>\r\n        <a href=\"javascript:;\" class=\"username\" (click)=\"selectUsername(message.user)\">@{{message.user.username}}</a>\r\n    </div>\r\n    <div class=\"content\">\r\n        {{message.message}}\r\n    </div>\r\n\r\n    <div class=\"actions\">\r\n        <banta-timestamp [value]=\"message.sentAt\"></banta-timestamp>\r\n        <div class=\"spacer\"></div>\r\n        <div class=\"counted-action\" *ngIf=\"showReplyAction\">\r\n            <div class=\"count-indicator\">\r\n                {{message.submessages?.length || 0}}\r\n            </div>\r\n            <button mat-icon-button matTooltip=\"Comment\" matTooltipPosition=\"below\" (click)=\"select()\">\r\n                <mat-icon [inline]=\"true\">comment</mat-icon>\r\n            </button>\r\n        </div>\r\n        <div class=\"counted-action\">\r\n            <div class=\"count-indicator\">\r\n                {{message.upvotes}}\r\n            </div>\r\n            <button mat-icon-button matTooltip=\"Upvote\" matTooltipPosition=\"below\" (click)=\"upvote()\">\r\n                <mat-icon [inline]=\"true\">thumb_up</mat-icon>\r\n            </button>\r\n        </div>\r\n\r\n        <div class=\"counted-action\">\r\n            <button mat-icon-button matTooltip=\"Share this comment\" matTooltipPosition=\"below\" (click)=\"share()\">\r\n                <mat-icon [inline]=\"true\" >share</mat-icon>\r\n            </button>\r\n        </div>\r\n\r\n        <button mat-icon-button [matMenuTriggerFor]=\"pointItemMenu\">\r\n            <mat-icon [inline]=\"true\">more_vert</mat-icon>\r\n        </button>\r\n    </div>\r\n</div>\r\n",
-                    styles: ["@-webkit-keyframes comment-appear{0%{transform:translate(100vw)}to{transform:translate(0)}}@keyframes comment-appear{0%{transform:translate(100vw)}to{transform:translate(0)}}:host{display:flex;flex-direction:column;padding:.5em;position:relative;visibility:hidden}:host.new{-webkit-animation-duration:.4s;-webkit-animation-fill-mode:both;-webkit-animation-name:comment-appear;animation-duration:.4s;animation-fill-mode:both;animation-name:comment-appear}:host.new,:host.visible{visibility:visible}:host:hover{background:#eee}:host .message-content .content{margin-left:60px;margin-right:.5em}:host.abbreviated .message-content .content{max-height:8.5em;overflow-y:hidden;text-overflow:ellipsis}:host .actions{align-items:center;display:flex;margin-left:60px;padding-right:10px}:host .actions button{color:#666}:host .actions banta-timestamp{color:#666;font-size:10pt}.user{align-items:center;display:flex;margin:1em 0 0;position:relative}.user .display-name,.user .username{color:#000;display:block;flex-grow:0;flex-shrink:1;font-size:10pt;margin:0 auto 0 0;max-width:100%;overflow:hidden;padding:0 0 0 1em;position:relative;text-overflow:ellipsis;white-space:nowrap;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;z-index:1}.user .display-name.username,.user .username.username{color:#666;flex-grow:1;flex-shrink:0}.avatar{background-color:#333;background-position:50%;background-size:cover;border-radius:100%;flex-grow:0;flex-shrink:0;height:48px;width:48px}.counted-action{align-items:center;display:flex}.count-indicator{color:#666;font-size:9pt;padding:0 0 0 3px}:host-context(.mat-dark-theme) .count-indicator{border-color:#333}:host-context(.mat-dark-theme):hover{background:#060606}:host-context(.mat-dark-theme) .user .display-name,:host-context(.mat-dark-theme) .user .username{color:#fff}@media (max-width:400px){.avatar{height:32px;width:32px}:host .actions{margin-left:44px}:host .message-content .content{margin-left:44px;margin-right:.5em}}"]
+                    template: "\r\n<mat-menu #pointItemMenu=\"matMenu\">\r\n    <button *ngIf=\"!mine\" mat-menu-item (click)=\"report()\">Report</button>\r\n    <button *ngIf=\"mine\" [disabled]=\"!permissions?.canEdit\" mat-menu-item (click)=\"startEdit()\">Edit</button>\r\n    <button *ngIf=\"mine\" [disabled]=\"!permissions?.canDelete\" mat-menu-item (click)=\"delete()\">Delete</button>\r\n</mat-menu>\r\n\r\n<div class=\"message-content\">\r\n    <div class=\"user\">\r\n        <a\r\n            href=\"javascript:;\"\r\n            class=\"avatar\"\r\n            (click)=\"selectAvatar(message.user)\"\r\n            [style.background-image]=\"avatarForUser(message.user)\"></a>\r\n        <a href=\"javascript:;\" class=\"display-name\" (click)=\"selectUser()\">{{message.user.displayName}}</a>\r\n        <a href=\"javascript:;\" class=\"username\" (click)=\"selectUsername(message.user)\">@{{message.user.username}}</a>\r\n        <span class=\"user-tag\" *ngIf=\"message.user.tag\">{{message.user.tag}}</span>\r\n        <span class=\"spacer\"></span>\r\n    </div>\r\n    <div class=\"content\" *ngIf=\"!editing\">\r\n        {{message.message}}\r\n    </div>\r\n    <div class=\"content\" *ngIf=\"editing\" style=\"padding-bottom: 2em;\">\r\n        <div>\r\n            <mat-form-field floatLabel=\"always\" appearance=\"outline\" style=\"width: 100%;\">\r\n                <mat-label>Edit Message</mat-label>\r\n                <textarea matInput [(ngModel)]=\"editedMessage\"></textarea>\r\n            </mat-form-field>\r\n        </div>\r\n        <button mat-raised-button (click)=\"saveEdit()\">Save</button> &nbsp;\r\n        <button mat-button (click)=\"endEditing()\">Cancel</button>\r\n    </div>\r\n\r\n    <div class=\"actions\">\r\n        <banta-timestamp [value]=\"message.sentAt\"></banta-timestamp>\r\n        <ul class=\"message-facts\">\r\n            <li *ngIf=\"message.edits?.length > 0\">Edited</li>\r\n        </ul>\r\n        <div class=\"spacer\"></div>\r\n        <div class=\"counted-action\" *ngIf=\"showReplyAction\">\r\n            <div class=\"count-indicator\">\r\n                {{message.submessages?.length || message.submessageCount || 0}}\r\n            </div>\r\n            <button mat-icon-button matTooltip=\"Comment\" matTooltipPosition=\"below\" (click)=\"select()\">\r\n                <mat-icon [inline]=\"true\">comment</mat-icon>\r\n            </button>\r\n        </div>\r\n        <div class=\"counted-action\" [class.active]=\"message.userState?.liked\">\r\n            <div class=\"count-indicator\">\r\n                {{message.likes}}\r\n            </div>\r\n            <button \r\n                *ngIf=\"message.transientState?.liking\"\r\n                mat-icon-button \r\n                [disabled]=\"true\" \r\n                [matTooltip]=\"upvoting ? 'Please wait...' : message.userState?.liked ? 'Unlike' : 'Like'\" \r\n                matTooltipPosition=\"below\" \r\n                >\r\n                <mat-spinner [diameter]=\"15\" style=\"margin-left: 1em;\"></mat-spinner>\r\n            </button>\r\n            <button \r\n                *ngIf=\"!message.transientState?.liking\"\r\n                mat-icon-button \r\n                [disabled]=\"!permissions?.canLike\" \r\n                [matTooltip]=\"upvoting ? 'Please wait...' : 'Like'\" \r\n                matTooltipPosition=\"below\" \r\n                (click)=\"message.userState?.liked ? unlike() : like()\" \r\n                >\r\n                <mat-icon [inline]=\"true\">thumb_up</mat-icon>\r\n            </button>\r\n        </div>\r\n\r\n        <div class=\"counted-action\">\r\n            <button mat-icon-button matTooltip=\"Share this comment\" matTooltipPosition=\"below\" (click)=\"share()\">\r\n                <mat-icon [inline]=\"true\" >share</mat-icon>\r\n            </button>\r\n        </div>\r\n\r\n        <button mat-icon-button [matMenuTriggerFor]=\"pointItemMenu\">\r\n            <mat-icon [inline]=\"true\">more_vert</mat-icon>\r\n        </button>\r\n    </div>\r\n</div>\r\n",
+                    styles: ["@-webkit-keyframes comment-appear{0%{transform:translate(100vw)}to{transform:translate(0)}}@keyframes comment-appear{0%{transform:translate(100vw)}to{transform:translate(0)}}:host{display:flex;flex-direction:column;position:relative;padding:.5em;visibility:hidden}:host.new{visibility:visible;-webkit-animation-name:comment-appear;animation-name:comment-appear;-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-fill-mode:both;animation-fill-mode:both}:host.highlighted{background:#00223a;outline:2px solid #003277}:host.visible{visibility:visible}:host:hover{background:#eee}:host .message-content .content{margin-left:60px;margin-right:.5em}:host.abbreviated .message-content .content{max-height:8.5em;text-overflow:ellipsis;overflow-y:hidden}:host .actions{display:flex;padding-right:10px;margin-left:60px;align-items:center}:host .actions button{color:#666}:host .actions banta-timestamp{color:#666;font-size:10pt}.user{position:relative;margin:1em 0 0;display:flex;align-items:center}.user .display-name,.user .username{z-index:1;position:relative;padding:0 0 0 1em;font-size:10pt;color:#000;margin:0 auto 0 0;display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex-shrink:1;flex-grow:0}.user .display-name.username.username.username,.user .username.username.username.username{color:#666}.avatar{height:48px;width:48px;background-position:50%;background-size:cover;background-color:#333;border-radius:100%;flex-shrink:0;flex-grow:0}.counted-action{display:flex;align-items:center}.counted-action.active .count-indicator,.counted-action.active button{color:#00a5ff}.count-indicator{font-size:9pt;padding:0 0 0 3px;color:#666}:host-context(.mat-dark-theme) .count-indicator{border-color:#333}:host-context(.mat-dark-theme):hover{background:#060606}:host-context(.mat-dark-theme) .user .display-name,:host-context(.mat-dark-theme) .user .username{color:#fff}@media (max-width:400px){.avatar{height:32px;width:32px}:host .actions{margin-left:44px}:host .message-content .content{margin-left:44px;margin-right:.5em}}.user-tag{text-transform:uppercase;font-size:12px;border:1px solid #b27373;background:#7a412b;color:#fff;padding:3px 5px;margin:0 .5em 0 1em;border-radius:3px}.spacer{flex-shrink:1;flex-grow:1}ul.message-facts{margin:0;padding:0;color:#666}ul.message-facts li{list-style-type:none;border-left:1px solid #666;font-size:10pt;padding-left:.5em;margin-left:.5em}"]
                 },] }
     ];
     CommentComponent.propDecorators = {
         isNew: [{ type: core.HostBinding, args: ['class.new',] }],
+        isHighlighted: [{ type: core.HostBinding, args: ['class.highlighted',] }],
         visible: [{ type: core.HostBinding, args: ['class.visible',] }],
         message: [{ type: core.Input }],
         showReplyAction: [{ type: core.Input }],
@@ -8247,10 +8281,18 @@
         usernameSelected: [{ type: core.Output }],
         avatarSelected: [{ type: core.Output }],
         reported: [{ type: core.Output }],
-        upvoted: [{ type: core.Output }],
+        permissions: [{ type: core.Input }],
+        mine: [{ type: core.Input }],
+        editing: [{ type: core.Input }],
+        liked: [{ type: core.Output }],
+        unliked: [{ type: core.Output }],
         selected: [{ type: core.Output }],
-        commentId: [{ type: core.HostBinding, args: ['attr.data-comment-id',] }],
-        shared: [{ type: core.Output }]
+        edited: [{ type: core.Output }],
+        deleted: [{ type: core.Output }],
+        editStarted: [{ type: core.Output }],
+        editEnded: [{ type: core.Output }],
+        shared: [{ type: core.Output }],
+        commentId: [{ type: core.HostBinding, args: ['attr.data-comment-id',] }]
     };
 
     var CommentViewComponent = /** @class */ (function () {
@@ -8258,16 +8300,20 @@
             this.backend = backend;
             this._sourceSubs = new rxjs.Subscription();
             this._selected = new rxjs.Subject();
-            this._upvoted = new rxjs.Subject();
+            this._liked = new rxjs.Subject();
+            this._unliked = new rxjs.Subject();
             this._reported = new rxjs.Subject();
             this._userSelected = new rxjs.Subject();
             this._usernameSelected = new rxjs.Subject();
             this._avatarSelected = new rxjs.Subject();
             this._shared = new rxjs.Subject();
+            this._deleted = new rxjs.Subject();
+            this._messageEdited = new rxjs.Subject();
             this.showEmptyState = true;
             this.allowReplies = true;
             this.menuMessage = null;
             this.messages = [];
+            this.customSortEnabled = false;
             this.maxMessages = 2000;
             this.maxVisibleMessages = 200;
             this.newestLast = false;
@@ -8276,6 +8322,7 @@
             this.hasMore = false;
             this.newMessages = [];
             this.olderMessages = [];
+            this.sortOrderChanged = new rxjs.Subject();
         }
         Object.defineProperty(CommentViewComponent.prototype, "selected", {
             get: function () {
@@ -8284,45 +8331,53 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(CommentViewComponent.prototype, "userSelected", {
+        Object.defineProperty(CommentViewComponent.prototype, "messageEdited", {
             get: function () {
-                return this._userSelected;
+                return this._messageEdited.asObservable();
             },
             enumerable: false,
             configurable: true
         });
+        CommentViewComponent.prototype.saveEdit = function (message, newMessage) {
+            this._messageEdited.next({ message: message, newMessage: newMessage });
+        };
+        Object.defineProperty(CommentViewComponent.prototype, "userSelected", {
+            get: function () { return this._userSelected; },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(CommentViewComponent.prototype, "reported", {
-            get: function () {
-                return this._reported;
-            },
+            get: function () { return this._reported; },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(CommentViewComponent.prototype, "upvoted", {
-            get: function () {
-                return this._upvoted;
-            },
+        Object.defineProperty(CommentViewComponent.prototype, "liked", {
+            get: function () { return this._liked; },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(CommentViewComponent.prototype, "unliked", {
+            get: function () { return this._unliked; },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(CommentViewComponent.prototype, "usernameSelected", {
-            get: function () {
-                return this._usernameSelected;
-            },
+            get: function () { return this._usernameSelected; },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(CommentViewComponent.prototype, "avatarSelected", {
-            get: function () {
-                return this._avatarSelected;
-            },
+            get: function () { return this._avatarSelected; },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(CommentViewComponent.prototype, "shared", {
-            get: function () {
-                return this._shared;
-            },
+            get: function () { return this._shared; },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(CommentViewComponent.prototype, "deleted", {
+            get: function () { return this._deleted; },
             enumerable: false,
             configurable: true
         });
@@ -8332,30 +8387,35 @@
             },
             set: function (value) {
                 var _this = this;
+                this.customSortEnabled = (value === null || value === void 0 ? void 0 : value.sortOrder) !== common$1.CommentsOrder.NEWEST;
+                this.newMessages = [];
+                this.olderMessages = [];
+                window.bantaSourceDebug = value;
                 if (this._sourceSubs) {
                     this._sourceSubs.unsubscribe();
                     this._sourceSubs = null;
                 }
                 this._source = value;
                 if (value) {
-                    console.log("[banta-comment-view] Subscribing to source...");
                     var messages = (value.messages || []).slice();
                     this.messages = messages;
                     this.olderMessages = messages.splice(this.maxVisibleMessages, messages.length);
-                    this.hasMore = this.olderMessages.length > 0;
+                    this.hasMore = true; //this.olderMessages.length > 0;
                     this._sourceSubs = new rxjs.Subscription();
                     this._sourceSubs.add(this._source.messageReceived.subscribe(function (msg) { return _this.messageReceived(msg); }));
                     this._sourceSubs.add(this._source.messageSent.subscribe(function (msg) { return _this.messageSent(msg); }));
-                    if (this._source.currentUserChanged) {
-                        this._sourceSubs.add(this._source.currentUserChanged.subscribe(function (user) { return _this.currentUser = user; }));
-                    }
+                    this._sourceSubs.add(this.backend.userChanged.subscribe(function (user) { return _this.currentUser = user; }));
+                    this.getInitialMessages();
                 }
             },
             enumerable: false,
             configurable: true
         });
-        CommentViewComponent.prototype.upvoteMessage = function (message) {
-            this._upvoted.next(message);
+        CommentViewComponent.prototype.likeMessage = function (message) {
+            this._liked.next(message);
+        };
+        CommentViewComponent.prototype.unlikeMessage = function (message) {
+            this._unliked.next(message);
         };
         CommentViewComponent.prototype.reportMessage = function (message) {
             this._reported.next(message);
@@ -8375,13 +8435,39 @@
         CommentViewComponent.prototype.sharedMessage = function (message) {
             this._shared.next(message);
         };
+        CommentViewComponent.prototype.startEditing = function (message) {
+            this.messages.forEach(function (m) { return m.transientState.editing = false; });
+            message.transientState.editing = true;
+        };
+        CommentViewComponent.prototype.deleteMessage = function (message) {
+            this._deleted.next(message);
+        };
+        CommentViewComponent.prototype.getInitialMessages = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var messages;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0: return [4 /*yield*/, this._source.getExistingMessages()];
+                        case 1:
+                            messages = (_b.sent());
+                            messages.forEach(function (m) { var _a; return (_a = m.transientState) !== null && _a !== void 0 ? _a : (m.transientState = {}); });
+                            this.messages = messages;
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
         CommentViewComponent.prototype.messageIdentity = function (index, chatMessage) {
             return chatMessage.id;
         };
         CommentViewComponent.prototype.showNew = function () {
             return __awaiter(this, void 0, void 0, function () {
                 var overflow;
-                return __generator(this, function (_a) {
+                return __generator(this, function (_b) {
+                    if (this.source && this.source.sortOrder !== common$1.CommentsOrder.NEWEST) {
+                        this.sortOrderChanged.next(common$1.CommentsOrder.NEWEST);
+                        return [2 /*return*/];
+                    }
                     this.isViewingMore = false;
                     this.messages = this.newMessages.splice(0, this.newMessages.length).concat(this.messages);
                     overflow = this.messages.splice(this.maxVisibleMessages, this.messages.length);
@@ -8393,43 +8479,53 @@
         };
         CommentViewComponent.prototype.showMore = function () {
             return __awaiter(this, void 0, void 0, function () {
-                var lastMessage, messages;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                var nextPageSize, lastMessage, messages;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
                         case 0:
                             this.isViewingMore = true;
                             if (!(this.olderMessages.length > 0)) return [3 /*break*/, 1];
                             this.isLoadingMore = false;
                             this.messages = this.messages.concat(this.olderMessages.splice(0, 50));
-                            return [3 /*break*/, 4];
+                            return [3 /*break*/, 3];
                         case 1:
-                            if (!this.source.loadAfter) return [3 /*break*/, 3];
                             this.isLoadingMore = true;
+                            nextPageSize = 20;
+                            lastMessage = void 0;
                             lastMessage = this.messages[this.messages.length - 1];
-                            return [4 /*yield*/, this.source.loadAfter(lastMessage, 100)];
+                            if (!lastMessage) {
+                                this.isLoadingMore = false;
+                                this.hasMore = false;
+                                return [2 /*return*/];
+                            }
+                            return [4 /*yield*/, this.source.loadAfter(lastMessage, nextPageSize)];
                         case 2:
-                            messages = _a.sent();
+                            messages = _b.sent();
+                            messages.forEach(function (m) { var _a; return (_a = m.transientState) !== null && _a !== void 0 ? _a : (m.transientState = {}); });
                             this.messages = this.messages.concat(messages);
                             this.isLoadingMore = false;
-                            if (messages.length === 0)
+                            if (messages.length === 0) {
+                                console.log("Reached the end of the list.");
                                 this.hasMore = false;
-                            return [3 /*break*/, 4];
-                        case 3:
-                            this.hasMore = false;
-                            _a.label = 4;
-                        case 4: return [2 /*return*/];
+                            }
+                            _b.label = 3;
+                        case 3: return [2 /*return*/];
                     }
                 });
             });
         };
         CommentViewComponent.prototype.addMessage = function (message) {
+            var _a;
+            if (!message.transientState)
+                (_a = message.transientState) !== null && _a !== void 0 ? _a : (message.transientState = {});
             var destination = this.messages;
             var bucket = this.olderMessages;
             if (this.isViewingMore) {
                 destination = this.newMessages;
                 bucket = null;
             }
-            if (this.newestLast) {
+            var newestLast = this.newestLast;
+            if (newestLast) {
                 destination.push(message);
                 var overflow = destination.splice(this.maxVisibleMessages, destination.length);
                 bucket === null || bucket === void 0 ? void 0 : bucket.push.apply(bucket, __spread(overflow));
@@ -8486,41 +8582,63 @@
     CommentViewComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'banta-comment-view',
-                    template: "<div class=\"message-container\">\r\n    <ng-content select=\"[data-before]\"></ng-content>\r\n\r\n    <a mat-button class=\"nav\" [class.visible]=\"isViewingMore\" href=\"javascript:;\" (click)=\"showNew()\">\r\n        <mat-icon>file_upload</mat-icon>\r\n        New\r\n        <ng-container *ngIf=\"newMessages.length >= 1\">\r\n            ({{newMessages.length}})\r\n        </ng-container>\r\n    </a>\r\n\r\n    <ng-container *ngIf=\"messages.length === 0\">\r\n        <div class=\"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            [message]=\"message\"\r\n            (click)=\"isViewingMore = true\"\r\n            [showReplyAction]=\"allowReplies\"\r\n            (userSelected)=\"selectMessageUser(message)\"\r\n            (avatarSelected)=\"selectAvatar($event)\"\r\n            (usernameSelected)=\"selectUsername($event)\"\r\n            (upvoted)=\"upvoteMessage(message)\"\r\n            (reported)=\"reportMessage(message)\"\r\n            (selected)=\"selectMessage(message)\"\r\n            (shared)=\"sharedMessage($event)\"\r\n            ></banta-comment>\r\n    </ng-container>\r\n\r\n    <a mat-button class=\"nav\" [class.visible]=\"hasMore && !isLoadingMore\" href=\"javascript:;\" (click)=\"showMore()\">Show more</a>\r\n\r\n    <div class=\"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])\"></ng-content>\r\n</div>\r\n",
-                    styles: [":host{display:flex;flex-direction:column;flex-grow:1;opacity:1;transition:opacity .2s ease-in}.message-container{background:#fff;color:#111;flex-grow:1;opacity:1;overflow-x:hidden;padding:.5em 1em 3em .5em;position:relative;transition:opacity .5s ease-in-out}.message-container.no-scroll{height:auto;overflow-y:visible}.message-container.faded{opacity:.25}.message-container .overlay{bottom:0;left:0;position:absolute;right:0;top:0;z-index:10}:host.fixed-height .message-container{overflow-y:auto}:host-context(.mat-dark-theme) .message-container{background:#111;color:#fff}.empty-state{color:#666;margin:3em;text-align:center}:host-context(.mat-dark-theme) .empty-state{color:#666}a.nav{background:#222;border-radius:2em;opacity:0;pointer-events:none;position:absolute;right:.5em;text-align:center;transition:opacity .4s ease-in-out;z-index:10}a.nav.visible{opacity:1;pointer-events:auto}.loading-more{margin:0 auto;padding:2em;text-align:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}@media (max-width:400px){.message-container{padding:0 0 3em}}"]
+                    template: "<div class=\"message-container\">\r\n    <ng-content select=\"[data-before]\"></ng-content>\r\n\r\n    <a mat-button class=\"nav\" [class.visible]=\"isViewingMore || customSortEnabled\" href=\"javascript:;\" (click)=\"showNew()\">\r\n        <mat-icon>file_upload</mat-icon>\r\n        New\r\n        <ng-container *ngIf=\"newMessages.length >= 1\">\r\n            ({{newMessages.length}})\r\n        </ng-container>\r\n    </a>\r\n\r\n    <ng-container *ngIf=\"messages.length === 0\">\r\n        <div class=\"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            [message]=\"message\"\r\n            [mine]=\"currentUser?.id === message.user?.id\"\r\n            [permissions]=\"source?.permissions\"\r\n            (click)=\"isViewingMore = true\"\r\n            [showReplyAction]=\"allowReplies\"\r\n            [editing]=\"message.transientState.editing\"\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    </ng-container>\r\n\r\n    <a mat-button class=\"nav\" [class.visible]=\"hasMore && !isLoadingMore\" href=\"javascript:;\" (click)=\"showMore()\">Show more</a>\r\n\r\n    <div class=\"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])\"></ng-content>\r\n</div>\r\n",
+                    styles: [":host{flex-grow:1;display:flex;flex-direction:column;opacity:1;transition:opacity .2s ease-in}.message-container{flex-grow:1;overflow-x:hidden;color:#111;background:#fff;padding:.5em 1em 3em .5em;opacity:1;transition:opacity .5s ease-in-out;position:relative}.message-container.no-scroll{height:auto;overflow-y:visible}.message-container.faded{opacity:.25}.message-container .overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:10}:host.fixed-height .message-container{overflow-y:auto}:host-context(.mat-dark-theme) .message-container{color:#fff;background:#111}.empty-state{text-align:center;margin:3em;color:#666}:host-context(.mat-dark-theme) .empty-state{color:#666}a.nav{position:absolute;right:.5em;z-index:10;text-align:center;opacity:0;transition:opacity .4s ease-in-out;pointer-events:none;border-radius:2em;background:#222}a.nav.visible{opacity:1;pointer-events:auto}.loading-more{padding:2em;text-align:center;margin:0 auto;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}@media (max-width:400px){.message-container{padding:0 0 3em}}"]
                 },] }
     ];
     CommentViewComponent.ctorParameters = function () { return [
-        { type: ChatBackendService }
+        { type: ChatBackendBase }
     ]; };
     CommentViewComponent.propDecorators = {
         showEmptyState: [{ type: core.Input }],
         allowReplies: [{ type: core.Input }],
         fixedHeight: [{ type: core.Input }, { type: core.HostBinding, args: ['class.fixed-height',] }],
         selected: [{ type: core.Output }],
+        messageEdited: [{ type: core.Output }],
         userSelected: [{ type: core.Output }],
         reported: [{ type: core.Output }],
-        upvoted: [{ type: core.Output }],
+        liked: [{ type: core.Output }],
+        unliked: [{ type: core.Output }],
         usernameSelected: [{ type: core.Output }],
         avatarSelected: [{ type: core.Output }],
         shared: [{ type: core.Output }],
+        deleted: [{ type: core.Output }],
         source: [{ type: core.Input }],
         genericAvatarUrl: [{ type: core.Input }],
         messageContainer: [{ type: core.ViewChild, args: ['messageContainer',] }],
         maxMessages: [{ type: core.Input }],
         maxVisibleMessages: [{ type: core.Input }],
-        newestLast: [{ type: core.Input }]
+        newestLast: [{ type: core.Input }],
+        sortOrderChanged: [{ type: core.Output }]
     };
 
     /**
      * Comments component
      */
     var BantaCommentsComponent = /** @class */ (function () {
-        function BantaCommentsComponent(banta, backend, elementRef, activatedRoute) {
-            this.banta = banta;
+        function BantaCommentsComponent(backend, elementRef, activatedRoute) {
+            var _this = this;
             this.backend = backend;
             this.elementRef = elementRef;
             this.activatedRoute = activatedRoute;
+            // Loading Screen
+            this._loadingMessage = '';
+            this.loadingMessageVisible = false;
+            this.loading = true;
+            this.showLoadingScreen = false;
+            this._loadingMessageIndex = 0;
+            this.loadingMessages = [
+                "Just a second...",
+                "We're definitely working on it.",
+                "There's no need to refresh.",
+                "It's definitely worth the wait!",
+                "This has never happened before.",
+                "We'll keep trying, but it's not looking great. \n            Commenting & chat services may be down. \n            If you continue to experience issues, please contact support.\n        "
+            ];
+            // Properties
+            this._signInSelected = new rxjs.Subject();
+            this._permissionDeniedError = new rxjs.Subject();
+            this._editAvatarSelected = new rxjs.Subject();
             this._upvoted = new rxjs.Subject();
             this._reported = new rxjs.Subject();
             this._selected = new rxjs.Subject();
@@ -8530,12 +8648,8 @@
             this._avatarSelected = new rxjs.Subject();
             this._subs = new rxjs.Subscription();
             this._sortOrder = common$1.CommentsOrder.NEWEST;
-            this.hashtags = [
-                { hashtag: 'error', description: 'Cause an error' },
-                { hashtag: 'timeout', description: 'Cause a slow timeout error' },
-                { hashtag: 'slow', description: 'Be slow when this message is posted' },
-            ];
-            this.participants = [];
+            this.selectedMessageVisible = false;
+            // Inputs
             this.signInLabel = 'Sign In';
             this.sendLabel = 'Send';
             this.replyLabel = 'Reply';
@@ -8543,97 +8657,113 @@
             this.permissionDeniedLabel = 'Send';
             this.postCommentLabel = 'Post a comment';
             this.postReplyLabel = 'Post a reply';
-            this._signInSelected = new rxjs.Subject();
-            this._permissionDeniedError = new rxjs.Subject();
-            this._editAvatarSelected = new rxjs.Subject();
-            this.sending = false;
-            this.expandError = false;
-            this.selectedMessageVisible = false;
+            this.participants = [];
+            this.hashtags = [
+                { hashtag: 'error', description: 'Cause an error' },
+                { hashtag: 'timeout', description: 'Cause a slow timeout error' },
+                { hashtag: 'slow', description: 'Be slow when this message is posted' },
+            ];
+            this.sendMessage = function (message) { return __awaiter(_this, void 0, void 0, function () {
+                var _a, intercept, e_1;
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
+                        case 0:
+                            _d.trys.push([0, 4, , 5]);
+                            return [4 /*yield*/, ((_a = this.shouldInterceptMessageSend) === null || _a === void 0 ? void 0 : _a.call(this, message, this.source))];
+                        case 1:
+                            intercept = _d.sent();
+                            if (!!intercept) return [3 /*break*/, 3];
+                            return [4 /*yield*/, this.source.send(message)];
+                        case 2:
+                            _d.sent();
+                            _d.label = 3;
+                        case 3:
+                            if (this.source.sortOrder !== common$1.CommentsOrder.NEWEST) {
+                                this.sortOrder = common$1.CommentsOrder.NEWEST;
+                            }
+                            return [2 /*return*/, true];
+                        case 4:
+                            e_1 = _d.sent();
+                            console.error("Failed to send message: ", message);
+                            console.error(e_1);
+                            throw new Error("Could not send: " + e_1.message);
+                        case 5: return [2 /*return*/];
+                    }
+                });
+            }); };
+            this.sendReply = function (message) { return __awaiter(_this, void 0, void 0, function () {
+                var _b, intercept, e_2;
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
+                        case 0:
+                            _d.trys.push([0, 4, , 5]);
+                            return [4 /*yield*/, ((_b = this.shouldInterceptMessageSend) === null || _b === void 0 ? void 0 : _b.call(this, message, this.source))];
+                        case 1:
+                            intercept = _d.sent();
+                            if (!!intercept) return [3 /*break*/, 3];
+                            return [4 /*yield*/, this.selectedMessageThread.send(message)];
+                        case 2:
+                            _d.sent();
+                            _d.label = 3;
+                        case 3: return [2 /*return*/, true];
+                        case 4:
+                            e_2 = _d.sent();
+                            console.error("Failed to send message: ", message);
+                            console.error(e_2);
+                            throw new Error("Could not send reply: " + e_2.message);
+                        case 5: return [2 /*return*/];
+                    }
+                });
+            }); };
         }
-        Object.defineProperty(BantaCommentsComponent.prototype, "sortOrder", {
-            get: function () {
-                return this._sortOrder;
-            },
-            set: function (value) {
-                var _this = this;
-                if (this._sortOrder !== value) {
-                    this._sortOrder = value;
-                    setTimeout(function () {
-                        _this.setSourceFromTopicID(_this.topicID);
-                    });
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
+        // Lifecycle Events / Initialization
         BantaCommentsComponent.prototype.ngOnInit = function () {
             var _this = this;
-            this._subs.add(this.banta.userChanged.subscribe(function (user) { return _this.user = user; }));
-        };
-        BantaCommentsComponent.prototype.ngAfterViewInit = function () {
-            if (typeof window !== 'undefined')
-                this.checkForSharedComment();
-        };
-        BantaCommentsComponent.prototype.scrollToComment = function (commentId) {
-            setTimeout(function () {
-                var comment = document.querySelectorAll("[data-comment-id=\"" + commentId + "\"]");
-                console.log(comment);
-                if (comment.length > 0) {
-                    // comment.item(0).scroll({behavior: 'smooth'});
-                    comment.item(0).scrollIntoView();
+            this._subs.add(this.backend.userChanged.subscribe(function (user) { return _this.user = user; }));
+            this.startLoading();
+            console.log("Checking...");
+            if (typeof window !== 'undefined') {
+                var queryString = window.location.search.substring(1);
+                var query = queryString.split('&')
+                    .map(function (s) { return s.split('='); })
+                    .reduce(function (o, _d) {
+                    var _e = __read(_d, 2), k = _e[0], v = _e[1];
+                    return (o[k] = v, o);
+                }, {});
+                console.log('here:');
+                console.dir(query);
+                var commentID = query['comment'];
+                if (commentID) {
+                    this.sharedCommentID = commentID;
                 }
-            }, 1000);
-        };
-        BantaCommentsComponent.prototype.checkForSharedComment = function () {
-            var commentID = this.activatedRoute.snapshot.queryParamMap.get('comment');
-            if (commentID)
-                this.scrollToComment(commentID);
+            }
         };
         BantaCommentsComponent.prototype.ngOnDestroy = function () {
             this._subs.unsubscribe();
         };
-        Object.defineProperty(BantaCommentsComponent.prototype, "source", {
-            get: function () {
-                return this._source;
-            },
-            set: function (value) {
-                this._source = value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(BantaCommentsComponent.prototype, "topicID", {
-            get: function () {
-                return this._topicID;
-            },
-            set: function (value) {
-                var _this = this;
-                if (this._topicID !== value) {
-                    this._topicID = value;
-                    setTimeout(function () { return _this.setSourceFromTopicID(value); });
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
         BantaCommentsComponent.prototype.setSourceFromTopicID = function (topicID) {
-            var _a, _b;
             return __awaiter(this, void 0, void 0, function () {
                 var _this = this;
-                return __generator(this, function (_c) {
-                    (_b = (_a = this._source) === null || _a === void 0 ? void 0 : _a.close) === null || _b === void 0 ? void 0 : _b.call(_a);
-                    this._source = null;
+                return __generator(this, function (_d) {
+                    if (this._source) {
+                        this._source.close();
+                        this._source = null;
+                    }
                     setTimeout(function () { return __awaiter(_this, void 0, void 0, function () {
-                        var _c;
+                        var _d;
                         var _this = this;
-                        return __generator(this, function (_d) {
-                            switch (_d.label) {
+                        return __generator(this, function (_e) {
+                            switch (_e.label) {
                                 case 0:
-                                    _c = this;
+                                    console.log("[banta-comments] Subscribing to topic source '" + topicID + "'");
+                                    _d = this;
                                     return [4 /*yield*/, this.backend.getSourceForTopic(topicID, { sortOrder: this.sortOrder })];
                                 case 1:
-                                    _c._source = _d.sent();
-                                    console.log("[banta-comments] Subscribing to source for topic '" + topicID + "'");
+                                    _d._source = _e.sent();
+                                    if (this.sharedCommentID) {
+                                        this.navigateToSharedComment(this.sharedCommentID);
+                                        this.sharedCommentID = null;
+                                    }
                                     this._source.messageReceived.subscribe(function (m) { return _this.addParticipant(m); });
                                     this._source.messageSent.subscribe(function (m) { return _this.addParticipant(m); });
                                     this._source.messages.forEach(function (m) { return _this.addParticipant(m); });
@@ -8645,162 +8775,331 @@
                 });
             });
         };
-        BantaCommentsComponent.prototype.addParticipant = function (message) {
-            if (!message || !message.user || !message.user.id)
-                return;
-            var existing = this.participants.find(function (x) { return x.id === message.user.id; });
-            if (existing)
-                return;
-            this.participants.push(message.user);
-        };
-        BantaCommentsComponent.prototype.showSignIn = function () {
-            this._signInSelected.next();
-        };
-        BantaCommentsComponent.prototype.showEditAvatar = function () {
-            this._editAvatarSelected.next();
-        };
-        Object.defineProperty(BantaCommentsComponent.prototype, "newMessageText", {
+        Object.defineProperty(BantaCommentsComponent.prototype, "loadingMessage", {
             get: function () {
-                return this._newMessageText;
+                return this._loadingMessage;
             },
             set: function (value) {
                 var _this = this;
-                this._newMessageText = value;
-                if (this._newMessageText === '' && this.sendError)
-                    setTimeout(function () { return _this.sendError = null; });
+                this.loadingMessageVisible = false;
+                setTimeout(function () {
+                    _this._loadingMessage = value;
+                    _this._loadingMessage = value;
+                    setTimeout(function () {
+                        _this.loadingMessageVisible = true;
+                    });
+                }, 500);
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(BantaCommentsComponent.prototype, "signInSelected", {
-            get: function () {
-                return this._signInSelected;
+        BantaCommentsComponent.prototype.startLoading = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
+                        case 0:
+                            this.loadingStartedAt = this.messageChangedAt = Date.now();
+                            if (this.updateLoading())
+                                return [2 /*return*/];
+                            return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(function () { return resolve(); }, 100); })];
+                        case 1:
+                            _d.sent();
+                            if (this.updateLoading())
+                                return [2 /*return*/];
+                            return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(function () { return resolve(); }, 250); })];
+                        case 2:
+                            _d.sent();
+                            if (this.updateLoading())
+                                return [2 /*return*/];
+                            return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(function () { return resolve(); }, 500); })];
+                        case 3:
+                            _d.sent();
+                            if (this.updateLoading())
+                                return [2 /*return*/];
+                            console.log("[Banta] Loading is taking a long time! Showing loading screen.");
+                            this.showLoadingScreen = true;
+                            if (typeof window !== 'undefined')
+                                this._loadingTimer = setInterval(function () { return _this.updateLoading(); }, 1000);
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        BantaCommentsComponent.prototype.updateLoading = function () {
+            var _this = this;
+            var _a, _b, _c;
+            if (((_a = this.source) === null || _a === void 0 ? void 0 : _a.state) && ((_b = this.source) === null || _b === void 0 ? void 0 : _b.state) !== 'connecting') {
+                clearInterval(this._loadingTimer);
+                this.loadingMessage = "Here we go!";
+                setTimeout(function () {
+                    _this.loading = false;
+                }, 750);
+                return true;
+            }
+            console.log("[Banta] Status check: " + (((_c = this.source) === null || _c === void 0 ? void 0 : _c.state) || 'connecting'));
+            var messageSwitchTime = 5 * 1000;
+            if (this.messageChangedAt + messageSwitchTime < Date.now()) {
+                if (this.loadingMessages[this._loadingMessageIndex]) {
+                    this.loadingMessage = this.loadingMessages[this._loadingMessageIndex++];
+                    this.messageChangedAt = Date.now();
+                }
+            }
+            return false;
+        };
+        Object.defineProperty(BantaCommentsComponent.prototype, "source", {
+            get: function () { return this._source; },
+            set: function (value) {
+                this._source = value;
+                if (value && this.sharedCommentID) {
+                    this.navigateToSharedComment(this.sharedCommentID);
+                    this.sharedCommentID = null;
+                }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(BantaCommentsComponent.prototype, "editAvatarSelected", {
-            get: function () {
-                return this._editAvatarSelected;
+        Object.defineProperty(BantaCommentsComponent.prototype, "topicID", {
+            get: function () { return this._topicID; },
+            set: function (value) {
+                var _this = this;
+                if (this._topicID !== value) {
+                    this._topicID = value;
+                    setTimeout(function () { return _this.setSourceFromTopicID(value); });
+                }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(BantaCommentsComponent.prototype, "permissionDeniedError", {
-            get: function () {
-                return this._permissionDeniedError;
-            },
+        Object.defineProperty(BantaCommentsComponent.prototype, "signInSelected", {
+            // Outputs
+            get: function () { return this._signInSelected; },
             enumerable: false,
             configurable: true
         });
-        BantaCommentsComponent.prototype.showPermissionDenied = function () {
-            this._permissionDeniedError.next();
-        };
-        Object.defineProperty(BantaCommentsComponent.prototype, "canComment", {
-            get: function () {
-                var _a;
-                if (!this.user)
-                    return false;
-                if (!this.user.permissions)
-                    return true;
-                if (!this.user.permissions.canComment)
-                    return true;
-                return (_a = this.user.permissions) === null || _a === void 0 ? void 0 : _a.canComment(this.source);
-            },
+        Object.defineProperty(BantaCommentsComponent.prototype, "editAvatarSelected", {
+            get: function () { return this._editAvatarSelected; },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(BantaCommentsComponent.prototype, "permissionDeniedError", {
+            get: function () { return this._permissionDeniedError; },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(BantaCommentsComponent.prototype, "upvoted", {
-            get: function () {
-                return this._upvoted.asObservable();
-            },
+            get: function () { return this._upvoted.asObservable(); },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(BantaCommentsComponent.prototype, "reported", {
-            get: function () {
-                return this._reported.asObservable();
-            },
+            get: function () { return this._reported.asObservable(); },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(BantaCommentsComponent.prototype, "selected", {
-            get: function () {
-                return this._selected.asObservable();
-            },
+            get: function () { return this._selected.asObservable(); },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(BantaCommentsComponent.prototype, "userSelected", {
-            get: function () {
-                return this._userSelected.asObservable();
-            },
+            get: function () { return this._userSelected.asObservable(); },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(BantaCommentsComponent.prototype, "usernameSelected", {
-            get: function () {
-                return this._usernameSelected.asObservable();
-            },
+            get: function () { return this._usernameSelected.asObservable(); },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(BantaCommentsComponent.prototype, "avatarSelected", {
-            get: function () {
-                return this._avatarSelected.asObservable();
-            },
+            get: function () { return this._avatarSelected.asObservable(); },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(BantaCommentsComponent.prototype, "shared", {
-            get: function () {
-                return this._shared.asObservable();
+            get: function () { return this._shared.asObservable(); },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(BantaCommentsComponent.prototype, "sortOrder", {
+            get: function () { return this._sortOrder; },
+            set: function (value) {
+                var _this = this;
+                if (this._sortOrder !== value) {
+                    this._sortOrder = value;
+                    setTimeout(function () {
+                        _this.setSourceFromTopicID(_this.topicID);
+                    });
+                }
             },
             enumerable: false,
             configurable: true
         });
-        BantaCommentsComponent.prototype.onKeyDown = function (event) {
+        // UI Interactions
+        BantaCommentsComponent.prototype.scrollToComment = function (commentId) {
+            setTimeout(function () {
+                var comment = document.querySelectorAll("[data-comment-id=\"" + commentId + "\"]");
+                console.dir(comment);
+                if (comment.length > 0) {
+                    // comment.item(0).scroll({behavior: 'smooth'});
+                    comment.item(0).scrollIntoView();
+                }
+            }, 1000);
         };
-        BantaCommentsComponent.prototype.insertEmoji = function (text) {
-            this.newMessageText += text;
+        BantaCommentsComponent.prototype.navigateToSharedComment = function (id) {
+            var _a, _b, _c;
+            return __awaiter(this, void 0, void 0, function () {
+                var source, message, e_3, parentMessage, thread;
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
+                        case 0:
+                            source = this.source;
+                            return [4 /*yield*/, source.ready];
+                        case 1:
+                            _d.sent();
+                            console.log("Navigating to shared comment with ID '" + id + "'...");
+                            _d.label = 2;
+                        case 2:
+                            _d.trys.push([2, 4, , 5]);
+                            return [4 /*yield*/, this.source.get(id)];
+                        case 3:
+                            message = _d.sent();
+                            return [3 /*break*/, 5];
+                        case 4:
+                            e_3 = _d.sent();
+                            console.error("Failed to find comment from URL: " + e_3.message);
+                            return [2 /*return*/];
+                        case 5:
+                            (_a = message.transientState) !== null && _a !== void 0 ? _a : (message.transientState = {});
+                            if (!message.parentMessageId) return [3 /*break*/, 11];
+                            return [4 /*yield*/, this.source.get(message.parentMessageId)];
+                        case 6:
+                            parentMessage = _d.sent();
+                            (_b = parentMessage.transientState) !== null && _b !== void 0 ? _b : (parentMessage.transientState = {});
+                            return [4 /*yield*/, this.selectMessage(parentMessage)];
+                        case 7:
+                            thread = _d.sent();
+                            // Need to re-retrieve the message within the new chat source to affect its
+                            // transient state.
+                            return [4 /*yield*/, thread.ready];
+                        case 8:
+                            // Need to re-retrieve the message within the new chat source to affect its
+                            // transient state.
+                            _d.sent();
+                            return [4 /*yield*/, thread.get(message.id)];
+                        case 9:
+                            message = _d.sent();
+                            (_c = message.transientState) !== null && _c !== void 0 ? _c : (message.transientState = {});
+                            message.transientState.highlighted = true;
+                            console.dir(message);
+                            return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(function () { return resolve(); }, 500); })];
+                        case 10:
+                            _d.sent();
+                            return [3 /*break*/, 12];
+                        case 11:
+                            this.selectMessage(message);
+                            _d.label = 12;
+                        case 12:
+                            this.scrollToComment(id);
+                            return [2 /*return*/];
+                    }
+                });
+            });
         };
-        BantaCommentsComponent.prototype.onReplyKeyDown = function (event) {
+        BantaCommentsComponent.prototype.showPermissionDenied = function () {
+            this._permissionDeniedError.next();
         };
-        BantaCommentsComponent.prototype.insertReplyEmoji = function (text) {
-            this.replyMessage += text;
+        BantaCommentsComponent.prototype.scrollToMessage = function (message) {
+            var el = this.elementRef.nativeElement.querySelector("[data-comment-id=\"" + message.id + "\"]");
+            if (!el)
+                return;
+            el.scrollIntoView({ block: 'center', inline: 'start' });
         };
-        BantaCommentsComponent.prototype.indicateError = function (message) {
-            var _this = this;
-            this.sendError = new Error(message);
-            setTimeout(function () {
-                _this.expandError = true;
-                setTimeout(function () {
-                    _this.expandError = false;
-                }, 5 * 1000);
+        BantaCommentsComponent.prototype.addParticipant = function (message) {
+            if (!message || !message.user || !message.user.id)
+                return;
+            var existing = this.participants.find(function (x) { return x.id === message.user.id; });
+            if (existing)
+                return;
+            this.participants.push(message.user);
+        };
+        // Actions
+        BantaCommentsComponent.prototype.likeMessage = function (source, message) {
+            var _a;
+            return __awaiter(this, void 0, void 0, function () {
+                var e_4;
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
+                        case 0:
+                            this._upvoted.next(message);
+                            message.transientState.liking = true;
+                            if (!((_a = message.userState) === null || _a === void 0 ? void 0 : _a.liked))
+                                message.likes = (message.likes || 0) + 1;
+                            _d.label = 1;
+                        case 1:
+                            _d.trys.push([1, 3, , 4]);
+                            return [4 /*yield*/, source.likeMessage(message.id)];
+                        case 2:
+                            _d.sent();
+                            return [3 /*break*/, 4];
+                        case 3:
+                            e_4 = _d.sent();
+                            alert("Could not like this message: " + e_4.message);
+                            return [2 /*return*/];
+                        case 4: return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(function () { return resolve(); }, 250); })];
+                        case 5:
+                            _d.sent();
+                            message.transientState.liking = false;
+                            return [2 /*return*/];
+                    }
+                });
             });
         };
-        BantaCommentsComponent.prototype.upvoteMessage = function (message) {
+        BantaCommentsComponent.prototype.unlikeMessage = function (source, message) {
+            var _a;
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
+                var e_5;
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
                         case 0:
                             this._upvoted.next(message);
-                            return [4 /*yield*/, this.backend.upvoteMessage(message.topicId, message.parentMessageId ? message.parentMessageId : message.id, message.parentMessageId ? message.id : undefined)];
+                            message.transientState.liking = true;
+                            if ((_a = message.userState) === null || _a === void 0 ? void 0 : _a.liked)
+                                message.likes = (message.likes || 0) - 1;
+                            _d.label = 1;
                         case 1:
-                            _c.sent();
+                            _d.trys.push([1, 3, , 4]);
+                            return [4 /*yield*/, source.unlikeMessage(message.id)];
+                        case 2:
+                            _d.sent();
+                            return [3 /*break*/, 4];
+                        case 3:
+                            e_5 = _d.sent();
+                            alert("Failed to unlike message: " + e_5.message);
+                            return [3 /*break*/, 4];
+                        case 4: return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(function () { return resolve(); }, 250); })];
+                        case 5:
+                            _d.sent();
+                            message.transientState.liking = false;
                             return [2 /*return*/];
                     }
                 });
             });
         };
         BantaCommentsComponent.prototype.reportMessage = function (message) {
-            this._reported.next(message);
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_d) {
+                    this._reported.next(message);
+                    return [2 /*return*/];
+                });
+            });
         };
         BantaCommentsComponent.prototype.unselectMessage = function () {
             return __awaiter(this, void 0, void 0, function () {
                 var message;
                 var _this = this;
-                return __generator(this, function (_c) {
+                return __generator(this, function (_d) {
                     message = this.selectedMessage;
                     this._selected.next(null);
                     this.selectedMessage = null;
@@ -8817,93 +9116,155 @@
         };
         BantaCommentsComponent.prototype.selectMessage = function (message) {
             return __awaiter(this, void 0, void 0, function () {
+                var selectedMessageThread;
                 var _this = this;
-                return __generator(this, function (_c) {
-                    this._selected.next(message);
-                    this.selectedMessage = message;
-                    setTimeout(function () { return _this.selectedMessageVisible = true; });
-                    setTimeout(function () { return __awaiter(_this, void 0, void 0, function () {
-                        var _c;
-                        return __generator(this, function (_d) {
-                            switch (_d.label) {
-                                case 0:
-                                    _c = this;
-                                    return [4 /*yield*/, this.backend.getSourceForThread(this.topicID, message.id)];
-                                case 1:
-                                    _c.selectedMessageThread = _d.sent();
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
+                        case 0:
+                            this._selected.next(message);
+                            this.selectedMessage = message;
+                            return [4 /*yield*/, this.backend.getSourceForThread(this.topicID, message.id)];
+                        case 1:
+                            selectedMessageThread = _d.sent();
+                            setTimeout(function () { return _this.selectedMessageVisible = true; });
+                            setTimeout(function () { return __awaiter(_this, void 0, void 0, function () {
+                                return __generator(this, function (_d) {
+                                    this.selectedMessageThread = selectedMessageThread;
                                     return [2 /*return*/];
-                            }
-                        });
-                    }); }, 250);
+                                });
+                            }); }, 250);
+                            return [2 /*return*/, selectedMessageThread];
+                    }
+                });
+            });
+        };
+        BantaCommentsComponent.prototype.showSignIn = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_d) {
+                    this._signInSelected.next();
+                    return [2 /*return*/];
+                });
+            });
+        };
+        BantaCommentsComponent.prototype.showEditAvatar = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_d) {
+                    this._editAvatarSelected.next();
                     return [2 /*return*/];
                 });
             });
         };
         BantaCommentsComponent.prototype.selectMessageUser = function (message) {
-            this._userSelected.next(message);
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_d) {
+                    this._userSelected.next(message);
+                    return [2 /*return*/];
+                });
+            });
         };
         BantaCommentsComponent.prototype.selectUsername = function (user) {
-            this._usernameSelected.next(user);
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_d) {
+                    this._usernameSelected.next(user);
+                    return [2 /*return*/];
+                });
+            });
         };
         BantaCommentsComponent.prototype.selectAvatar = function (user) {
-            this._avatarSelected.next(user);
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_d) {
+                    this._avatarSelected.next(user);
+                    return [2 /*return*/];
+                });
+            });
         };
         BantaCommentsComponent.prototype.shareMessage = function (message) {
-            this._shared.next(message);
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_d) {
+                    this._shared.next(message);
+                    return [2 /*return*/];
+                });
+            });
         };
-        BantaCommentsComponent.prototype.sendReply = function () {
+        BantaCommentsComponent.prototype.deleteMessage = function (message) {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
-                        case 0: return [4 /*yield*/, this.selectedMessageThread.send({
-                                message: this.replyMessage,
-                                parentMessageId: this.selectedMessage.id,
-                                upvotes: 0,
-                                user: this.user,
-                                submessages: [],
-                                topicId: this.topicID,
-                                sentAt: Date.now(),
-                                updatedAt: Date.now()
-                            })];
+                return __generator(this, function (_d) {
+                    if (!confirm("Are you sure you want to delete this comment? You cannot undo this action."))
+                        return [2 /*return*/];
+                    this.source.deleteMessage(message.id);
+                    return [2 /*return*/];
+                });
+            });
+        };
+        BantaCommentsComponent.prototype.editMessage = function (source, message, newText) {
+            return __awaiter(this, void 0, void 0, function () {
+                var e_6;
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
+                        case 0:
+                            _d.trys.push([0, 2, , 3]);
+                            return [4 /*yield*/, source.editMessage(message.id, newText)];
                         case 1:
-                            _c.sent();
-                            this.replyMessage = '';
+                            _d.sent();
+                            return [3 /*break*/, 3];
+                        case 2:
+                            e_6 = _d.sent();
+                            alert(e_6.message);
+                            return [2 /*return*/];
+                        case 3:
+                            message.message = newText;
+                            message.transientState.editing = false;
                             return [2 /*return*/];
                     }
                 });
             });
         };
-        BantaCommentsComponent.prototype.scrollToMessage = function (message) {
-            var el = this.elementRef.nativeElement.querySelector("[data-comment-id=\"" + message.id + "\"]");
-            if (!el)
-                return;
-            el.scrollIntoView({ block: 'center', inline: 'start' });
+        BantaCommentsComponent.prototype.startEditing = function (message) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_d) {
+                    this.selectedMessage.transientState.editing = false;
+                    message.transientState.editing = true;
+                    return [2 /*return*/];
+                });
+            });
+        };
+        BantaCommentsComponent.prototype.saveEdit = function (message, text) {
+            return __awaiter(this, void 0, void 0, function () {
+                var e_7;
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
+                        case 0:
+                            _d.trys.push([0, 2, , 3]);
+                            return [4 /*yield*/, this.source.editMessage(message.id, text)];
+                        case 1:
+                            _d.sent();
+                            message.transientState.editing = false;
+                            return [3 /*break*/, 3];
+                        case 2:
+                            e_7 = _d.sent();
+                            alert("Could not edit message: " + e_7.message);
+                            return [3 /*break*/, 3];
+                        case 3: return [2 /*return*/];
+                    }
+                });
+            });
         };
         return BantaCommentsComponent;
     }());
     BantaCommentsComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'banta-comments',
-                    template: "\r\n<div class=\"focused\" [class.visible]=\"selectedMessageVisible\" *ngIf=\"selectedMessage\">\r\n\r\n    <div>\r\n        <a mat-button href=\"javascript:;\" (click)=\"unselectMessage()\">\r\n            <mat-icon>arrow_back</mat-icon>\r\n            Latest Comments\r\n        </a>\r\n    </div>\r\n\r\n    <banta-comment\r\n        [message]=\"selectedMessage\"\r\n        ></banta-comment>\r\n\r\n    <div class=\"replies\">\r\n\r\n        <ng-container *ngIf=\"!selectedMessageThread\">\r\n            <div class=\"loading\">\r\n                <mat-spinner></mat-spinner>\r\n            </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"selectedMessageThread\">\r\n            <banta-comment-view\r\n                [source]=\"selectedMessageThread\"\r\n                [allowReplies]=\"false\"\r\n                [fixedHeight]=\"false\"\r\n                [showEmptyState]=\"false\"\r\n                [newestLast]=\"true\"\r\n                ></banta-comment-view>\r\n\r\n            <banta-comment-field\r\n                [sendLabel]=\"replyLabel\"\r\n                [sendingLabel]=\"sendingLabel\"\r\n                [hashtags]=\"hashtags\"\r\n                [participants]=\"participants\"\r\n                (signInSelected)=\"showSignIn()\"\r\n                (editAvatarSelected)=\"showEditAvatar()\"\r\n                [source]=\"selectedMessageThread\"\r\n                [canComment]=\"canComment\"\r\n                [signInLabel]=\"signInLabel\"\r\n                [permissionDeniedLabel]=\"permissionDeniedLabel\"\r\n                (permissionDeniedError)=\"showPermissionDenied()\"\r\n                [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n                [user]=\"user\"\r\n                [label]=\"postReplyLabel\"\r\n                >\r\n                <ng-content select=\".reply-send-options\"></ng-content>\r\n            </banta-comment-field>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"main\" [class.hidden]=\"selectedMessage\">\r\n    <banta-comment-field\r\n        [source]=\"source\"\r\n        [user]=\"user\"\r\n        [sendLabel]=\"sendLabel\"\r\n        [sendingLabel]=\"sendingLabel\"\r\n        [signInLabel]=\"signInLabel\"\r\n        [canComment]=\"canComment\"\r\n        [hashtags]=\"hashtags\"\r\n        [participants]=\"participants\"\r\n        [label]=\"postCommentLabel\"\r\n        (editAvatarSelected)=\"showEditAvatar()\"\r\n        (signInSelected)=\"showSignIn()\"\r\n        [permissionDeniedLabel]=\"permissionDeniedLabel\"\r\n        (permissionDeniedError)=\"showPermissionDenied()\"\r\n        [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n        >\r\n      \r\n    </banta-comment-field>\r\n\r\n    <banta-comment-sort\r\n        [(sort)]=\"sortOrder\"></banta-comment-sort>\r\n\r\n    <banta-comment-view\r\n        [class.faded]=\"selectedMessage\"\r\n        [source]=\"source\"\r\n        [fixedHeight]=\"fixedHeight\"\r\n        [maxMessages]=\"maxMessages\"\r\n        [maxVisibleMessages]=\"maxVisibleMessages\"\r\n        [genericAvatarUrl]=\"genericAvatarUrl\"\r\n        (userSelected)=\"selectMessageUser($event)\"\r\n        (selected)=\"selectMessage($event)\"\r\n        (upvoted)=\"upvoteMessage($event)\"\r\n        (reported)=\"reportMessage($event)\"\r\n        (usernameSelected)=\"selectUsername($event)\"\r\n        (avatarSelected)=\"selectAvatar($event)\"\r\n        (shared)=\"shareMessage($event)\"\r\n        ></banta-comment-view>\r\n</div>\r\n",
-                    styles: [":host{display:flex;flex-direction:column}@-webkit-keyframes select-comment{0%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes select-comment{0%{transform:scale(1.15)}to{transform:scale(1)}}.focused{-webkit-animation-duration:.4s;-webkit-animation-fill-mode:both;-webkit-animation-name:select-comment;animation-duration:.4s;animation-fill-mode:both;animation-name:select-comment}.focused .replies{margin-left:4em;margin-top:1em}banta-comment-view{opacity:1;transition:opacity .4s ease-in-out}banta-comment-view.faded{opacity:.25}.loading{display:block;margin:0 auto;min-height:16em;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.main.hidden{display:none}@media (max-width:500px){.focused .replies{margin-left:0}}"]
+                    template: "<ng-container *ngIf=\"loading\">\r\n    <div class=\"loading-screen\" [class.visible]=\"showLoadingScreen\">\r\n        <h1>Loading Comments</h1>\r\n        <div>\r\n            <mat-spinner [diameter]=\"300\" [strokeWidth]=\"2\"></mat-spinner>\r\n        </div>\r\n\r\n        <p class=\"loading-message\" [class.visible]=\"loadingMessageVisible\">{{loadingMessage}}</p>\r\n    </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"!loading\">\r\n    <div class=\"focused\" [class.visible]=\"selectedMessageVisible\" *ngIf=\"selectedMessage\">\r\n\r\n        <div>\r\n            <a mat-button href=\"javascript:;\" (click)=\"unselectMessage()\">\r\n                <mat-icon>arrow_back</mat-icon>\r\n                Latest Comments\r\n            </a>\r\n        </div>\r\n\r\n        <banta-comment\r\n            [message]=\"selectedMessage\"\r\n            [liking]=\"selectedMessage.transientState.liking\"\r\n            [mine]=\"user?.id === selectedMessage.user?.id\"\r\n            [permissions]=\"source?.permissions\"\r\n            [showReplyAction]=\"false\"\r\n            [editing]=\"selectedMessage.transientState.editing\"\r\n            (editStarted)=\"startEditing(selectedMessage)\"\r\n            (editEnded)=\"selectedMessage.transientState.editing = false\"\r\n            (edited)=\"saveEdit(selectedMessage, $event)\"\r\n            (userSelected)=\"selectMessageUser(selectedMessage)\"\r\n            (avatarSelected)=\"selectAvatar($event)\"\r\n            (usernameSelected)=\"selectUsername($event)\"\r\n            (liked)=\"likeMessage(selectedMessage)\"\r\n            (unliked)=\"unlikeMessage(selectedMessage)\"\r\n            (reported)=\"reportMessage(selectedMessage)\"\r\n            (selected)=\"selectMessage(selectedMessage)\"\r\n            (shared)=\"shareMessage($event)\"\r\n            (deleted)=\"deleteMessage(selectedMessage)\"\r\n            ></banta-comment>\r\n\r\n        <div class=\"replies\">\r\n\r\n            <ng-container *ngIf=\"!selectedMessageThread\">\r\n                <div class=\"loading\">\r\n                    <mat-spinner></mat-spinner>\r\n                </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"selectedMessageThread\">\r\n                <banta-comment-view\r\n                    [source]=\"selectedMessageThread\"\r\n                    [allowReplies]=\"false\"\r\n                    [fixedHeight]=\"false\"\r\n                    [showEmptyState]=\"false\"\r\n                    [newestLast]=\"true\"\r\n                    (liked)=\"likeMessage(selectedMessageThread, $event)\"\r\n                    (unliked)=\"unlikeMessage(selectedMessageThread, $event)\"\r\n                    (messageEdited)=\"editMessage(selectedMessageThread, $event.message, $event.newMessage)\"\r\n                    (reported)=\"reportMessage($event)\"\r\n                    (usernameSelected)=\"selectUsername($event)\"\r\n                    (avatarSelected)=\"selectAvatar($event)\"\r\n                    (shared)=\"shareMessage($event)\"\r\n                    (deleted)=\"deleteMessage($event)\"\r\n                    ></banta-comment-view>\r\n\r\n                <banta-comment-field\r\n                    [sendLabel]=\"replyLabel\"\r\n                    [sendingLabel]=\"sendingLabel\"\r\n                    [hashtags]=\"hashtags\"\r\n                    [participants]=\"participants\"\r\n                    (signInSelected)=\"showSignIn()\"\r\n                    (editAvatarSelected)=\"showEditAvatar()\"\r\n                    [source]=\"selectedMessageThread\"\r\n                    [canComment]=\"source?.permissions?.canPost\"\r\n                    [signInLabel]=\"signInLabel\"\r\n                    [permissionDeniedLabel]=\"permissionDeniedLabel\"\r\n                    (permissionDeniedError)=\"showPermissionDenied()\"\r\n                    [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n                    [user]=\"user\"\r\n                    [label]=\"postReplyLabel\"\r\n                    [submit]=\"sendReply\"\r\n                    >\r\n                    <ng-content select=\".reply-send-options\"></ng-content>\r\n                </banta-comment-field>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"main\" [class.hidden]=\"selectedMessage\">\r\n        <banta-comment-field\r\n            [source]=\"source\"\r\n            [user]=\"user\"\r\n            [sendLabel]=\"sendLabel\"\r\n            [sendingLabel]=\"sendingLabel\"\r\n            [signInLabel]=\"signInLabel\"\r\n            [canComment]=\"source?.permissions?.canPost\"\r\n            [hashtags]=\"hashtags\"\r\n            [participants]=\"participants\"\r\n            [label]=\"postCommentLabel\"\r\n            (editAvatarSelected)=\"showEditAvatar()\"\r\n            (signInSelected)=\"showSignIn()\"\r\n            [permissionDeniedLabel]=\"permissionDeniedLabel\"\r\n            (permissionDeniedError)=\"showPermissionDenied()\"\r\n            [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n            [submit]=\"sendMessage\"\r\n            >\r\n        \r\n        </banta-comment-field>\r\n\r\n        <banta-comment-sort\r\n            [(sort)]=\"sortOrder\"></banta-comment-sort>\r\n\r\n        <banta-comment-view\r\n            [class.faded]=\"selectedMessage\"\r\n            [source]=\"source\"\r\n            [fixedHeight]=\"fixedHeight\"\r\n            [maxMessages]=\"maxMessages\"\r\n            [maxVisibleMessages]=\"maxVisibleMessages\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            (userSelected)=\"selectMessageUser($event)\"\r\n            (sortOrderChanged)=\"sortOrder = $event\"\r\n            (selected)=\"selectMessage($event)\"\r\n            (liked)=\"likeMessage(source, $event)\"\r\n            (unliked)=\"unlikeMessage(source, $event)\"\r\n            (messageEdited)=\"editMessage(source, $event.message, $event.newMessage)\"\r\n            (reported)=\"reportMessage($event)\"\r\n            (usernameSelected)=\"selectUsername($event)\"\r\n            (avatarSelected)=\"selectAvatar($event)\"\r\n            (shared)=\"shareMessage($event)\"\r\n            (deleted)=\"deleteMessage($event)\"\r\n            ></banta-comment-view>\r\n    </div>\r\n</ng-container>",
+                    styles: [":host{display:flex;flex-direction:column}@-webkit-keyframes select-comment{0%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes select-comment{0%{transform:scale(1.15)}to{transform:scale(1)}}.focused{-webkit-animation-name:select-comment;animation-name:select-comment;-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.focused .replies{margin-top:1em;margin-left:4em}banta-comment-view{opacity:1;transition:opacity .4s ease-in-out}banta-comment-view.faded{opacity:.25}.loading{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:0 auto;min-height:16em}.main.hidden{display:none}@media (max-width:500px){.focused .replies{margin-left:0}}.loading-screen{text-align:center;opacity:0;transition:opacity .25s ease-in-out}.loading-screen.visible{opacity:1}.loading-screen h1{font-weight:100}.loading-screen mat-spinner{margin:5em auto}.loading-screen .loading-message{opacity:0;transition:opacity .25s ease-in-out;width:500px;max-width:100%;margin:0 auto}.loading-screen .loading-message.visible{opacity:1}"]
                 },] }
     ];
     BantaCommentsComponent.ctorParameters = function () { return [
-        { type: BantaService },
-        { type: ChatBackendService },
+        { type: ChatBackendBase },
         { type: core.ElementRef },
         { type: router.ActivatedRoute }
     ]; };
     BantaCommentsComponent.propDecorators = {
-        hashtags: [{ type: core.Input }],
-        participants: [{ type: core.Input }],
-        source: [{ type: core.Input }],
-        fixedHeight: [{ type: core.Input }],
-        maxMessages: [{ type: core.Input }],
-        maxVisibleMessages: [{ type: core.Input }],
-        genericAvatarUrl: [{ type: core.Input }],
-        shouldInterceptMessageSend: [{ type: core.Input }],
-        topicID: [{ type: core.Input }],
+        loadingMessages: [{ type: core.Input }],
         signInLabel: [{ type: core.Input }],
         sendLabel: [{ type: core.Input }],
         replyLabel: [{ type: core.Input }],
@@ -8911,6 +9272,15 @@
         permissionDeniedLabel: [{ type: core.Input }],
         postCommentLabel: [{ type: core.Input }],
         postReplyLabel: [{ type: core.Input }],
+        fixedHeight: [{ type: core.Input }],
+        maxMessages: [{ type: core.Input }],
+        maxVisibleMessages: [{ type: core.Input }],
+        genericAvatarUrl: [{ type: core.Input }],
+        shouldInterceptMessageSend: [{ type: core.Input }],
+        participants: [{ type: core.Input }],
+        source: [{ type: core.Input }],
+        hashtags: [{ type: core.Input }],
+        topicID: [{ type: core.Input }],
         signInSelected: [{ type: core.Output }],
         editAvatarSelected: [{ type: core.Output }],
         permissionDeniedError: [{ type: core.Output }],
@@ -8992,7 +9362,7 @@
                 },] }
     ];
     LiveCommentComponent.ctorParameters = function () { return [
-        { type: ChatBackendService }
+        { type: ChatBackendBase }
     ]; };
     LiveCommentComponent.propDecorators = {
         upvoted: [{ type: core.Output }],
@@ -9015,6 +9385,7 @@
             this.permissionDeniedLabel = 'Unavailable';
             this.signInLabel = 'Sign In';
             this.placeholder = '';
+            this.textChanged = new rxjs.Subject();
             this.participants = [];
             this._permissionDeniedError = new rxjs.Subject();
             this.autocompleteVisible = false;
@@ -9057,17 +9428,19 @@
         CommentFieldComponent.prototype.indicateError = function (message) {
             var _this = this;
             this.sendError = new Error(message);
-            setTimeout(function () {
+            this.expandError = false;
+            clearTimeout(this.errorTimeout);
+            this.errorTimeout = setTimeout(function () {
                 _this.expandError = true;
-                setTimeout(function () {
+                _this.errorTimeout = setTimeout(function () {
                     _this.expandError = false;
                 }, 5 * 1000);
-            });
+            }, 100);
         };
         CommentFieldComponent.prototype.autocomplete = function (replacement) {
             return __awaiter(this, void 0, void 0, function () {
                 var el;
-                return __generator(this, function (_b) {
+                return __generator(this, function (_a) {
                     el = this.textareaEl.nativeElement;
                     this.text = this.text.slice(0, el.selectionStart - this.completionPrefix.length) + replacement + this.text.slice(el.selectionStart);
                     return [2 /*return*/];
@@ -9077,7 +9450,7 @@
         CommentFieldComponent.prototype.insert = function (str) {
             return __awaiter(this, void 0, void 0, function () {
                 var el;
-                return __generator(this, function (_b) {
+                return __generator(this, function (_a) {
                     el = this.textareaEl.nativeElement;
                     this.text = this.text.slice(0, el.selectionStart) + str + this.text.slice(el.selectionStart);
                     return [2 /*return*/];
@@ -9087,8 +9460,8 @@
         CommentFieldComponent.prototype.onKeyDown = function (event) {
             return __awaiter(this, void 0, void 0, function () {
                 var _this = this;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
                         case 0:
                             if (this.autocompleteVisible) {
                                 if (event.key === 'Escape') {
@@ -9123,7 +9496,7 @@
                             if (!(event.key === 'Enter' && event.ctrlKey)) return [3 /*break*/, 2];
                             return [4 /*yield*/, this.sendMessage()];
                         case 1:
-                            _b.sent();
+                            _a.sent();
                             return [2 /*return*/];
                         case 2:
                             if (this.completionFunc) {
@@ -9206,19 +9579,18 @@
             this.editAvatarSelected.next();
         };
         CommentFieldComponent.prototype.sendMessage = function () {
-            var _a;
             return __awaiter(this, void 0, void 0, function () {
-                var text, message, intercept, e_1;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                var text, message, e_1;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
                         case 0:
                             if (!this.source)
                                 return [2 /*return*/];
                             this.sending = true;
                             this.sendError = null;
-                            _b.label = 1;
+                            _a.label = 1;
                         case 1:
-                            _b.trys.push([1, , 8, 9]);
+                            _a.trys.push([1, , 7, 8]);
                             text = (this.text || '').trim();
                             if (text === '')
                                 return [2 /*return*/];
@@ -9226,34 +9598,29 @@
                                 user: this.user,
                                 sentAt: Date.now(),
                                 url: location.href,
-                                upvotes: 0,
+                                likes: 0,
                                 message: text
                             };
-                            _b.label = 2;
+                            _a.label = 2;
                         case 2:
-                            _b.trys.push([2, 6, , 7]);
-                            return [4 /*yield*/, ((_a = this.shouldInterceptMessageSend) === null || _a === void 0 ? void 0 : _a.call(this, message, this.source))];
+                            _a.trys.push([2, 4, , 6]);
+                            return [4 /*yield*/, this.submit(message)];
                         case 3:
-                            intercept = _b.sent();
-                            if (!!intercept) return [3 /*break*/, 5];
-                            return [4 /*yield*/, this.source.send(message)];
+                            _a.sent();
+                            this.text = '';
+                            return [3 /*break*/, 6];
                         case 4:
-                            _b.sent();
-                            _b.label = 5;
+                            e_1 = _a.sent();
+                            return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(function () { return resolve(); }, 1000); })];
                         case 5:
-                            this.text = '';
-                            return [3 /*break*/, 7];
-                        case 6:
-                            e_1 = _b.sent();
-                            this.indicateError("Could not send: " + e_1.message);
-                            console.error("Failed to send message: ", message);
-                            console.error(e_1);
-                            return [3 /*break*/, 7];
-                        case 7: return [3 /*break*/, 9];
-                        case 8:
+                            _a.sent();
+                            this.indicateError(e_1.message);
+                            return [3 /*break*/, 6];
+                        case 6: return [3 /*break*/, 8];
+                        case 7:
                             this.sending = false;
                             return [7 /*endfinally*/];
-                        case 9: return [2 /*return*/];
+                        case 8: return [2 /*return*/];
                     }
                 });
             });
@@ -9264,7 +9631,7 @@
         { type: core.Component, args: [{
                     selector: 'banta-comment-field',
                     template: "<form class=\"new-message\" (submit)=\"sendMessage()\">\r\n    <div class=\"avatar-container\">\r\n        <a  href=\"javascript:;\"\r\n            class=\"avatar\"\r\n            (click)=\"showEditAvatar()\"\r\n            [style.background-image]=\"'url(' + user?.avatarUrl + ')'\"\r\n            ></a>\r\n    </div>\r\n    <div class=\"text-container\">\r\n        <div class=\"field-container\">\r\n            <mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n                <mat-label>{{label}}</mat-label>\r\n                <textarea\r\n                    #textarea\r\n                    name=\"message\"\r\n                    [placeholder]=\"placeholder\"\r\n                    matInput\r\n                    cdkTextareaAutosize\r\n                    (keydown)=\"onKeyDown($event)\"\r\n                    (blur)=\"onBlur()\"\r\n                    [disabled]=\"sending\"\r\n                    [(ngModel)]=\"text\"></textarea>\r\n            </mat-form-field>\r\n            <ng-content></ng-content>\r\n            <div #autocompleteContainer class=\"autocomplete-container\">\r\n                <div #autocomplete class=\"autocomplete\" [class.visible]=\"autocompleteVisible\">\r\n\r\n                    <div>\r\n                        <strong>{{completionPrefix}}</strong>...\r\n                    </div>\r\n\r\n                    <a\r\n                        mat-button\r\n                        *ngFor=\"let option of autocompleteOptions; index as index\"\r\n                        (click)=\"activateAutoComplete(option)\"\r\n                        [class.active]=\"autoCompleteSelected === index\"\r\n                        >\r\n                        {{option.label}}\r\n                    </a>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <mat-spinner *ngIf=\"sending\" class=\"icon loading\" diameter=\"18\" strokeWidth=\"2\"></mat-spinner>\r\n        <div *ngIf=\"sendError\" class=\"error-message\" [class.expanded]=\"expandError\">\r\n            <mat-icon *ngIf=\"sendError\">error</mat-icon>\r\n            {{sendError.message}}\r\n        </div>\r\n        <emoji-selector-button\r\n            class=\"top-right\"\r\n            (selected)=\"insertEmoji($event)\"\r\n            ></emoji-selector-button>\r\n    </div>\r\n    <div class=\"actions\">\r\n        <ng-container *ngIf=\"!user\">\r\n            <button\r\n                mat-raised-button\r\n                color=\"primary\"\r\n                type=\"button\"\r\n                (click)=\"showSignIn()\"\r\n                >{{signInLabel}}</button>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"user\">\r\n            <button\r\n                *ngIf=\"canComment\"\r\n                mat-raised-button\r\n                class=\"send\"\r\n                color=\"primary\"\r\n                [disabled]=\"!text || sending\"\r\n                >\r\n                <mat-icon *ngIf=\"!sending\">chevron_right</mat-icon>\r\n                <mat-spinner *ngIf=\"sending\" class=\"icon\" diameter=\"18\" strokeWidth=\"2\"></mat-spinner>\r\n                <span class=\"label\">\r\n                    <ng-container *ngIf=\"!sending\">\r\n                        {{sendLabel}}\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"sending\">\r\n                        {{sendingLabel}}\r\n                    </ng-container>\r\n                </span>\r\n\r\n                </button>\r\n            <button\r\n                *ngIf=\"!canComment\"\r\n                type=\"button\"\r\n                (click)=\"showPermissionDenied()\"\r\n                mat-raised-button\r\n                color=\"primary\"\r\n                >{{permissionDeniedLabel}}</button>\r\n        </ng-container>\r\n    </div>\r\n</form>\r\n",
-                    styles: ["@-webkit-keyframes comment-field-appear{0%{opacity:0;transform:translateY(128px)}to{opacity:1;transform:translate(0)}}@keyframes comment-field-appear{0%{opacity:0;transform:translateY(128px)}to{opacity:1;transform:translate(0)}}:host{-webkit-animation-delay:.4s;-webkit-animation-duration:.8s;-webkit-animation-fill-mode:both;-webkit-animation-name:comment-field-appear;animation-delay:.4s;animation-duration:.8s;animation-fill-mode:both;animation-name:comment-field-appear;display:block;margin:0 2em 0 0}.avatar-container{display:flex;justify-content:flex-end;width:calc(48px + 1.75em)}.avatar-container .avatar{background:pink;background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:100%;height:48px;margin-right:.75em;margin-top:.75em;width:48px}form{align-items:center;display:flex;padding:.5em}form .text-container{display:flex;flex-grow:1;position:relative}form .text-container textarea{font-size:14pt;width:100%}form .text-container textarea[disabled]{opacity:.5}form .text-container mat-form-field{margin-bottom:1em}form .text-container emoji-selector-button{bottom:0;position:absolute;right:0}form .text-container .error-message,form .text-container mat-spinner.loading{bottom:.5em;left:.5em;position:absolute}form .text-container .error-message{color:#683333;max-width:1.5em;overflow-x:hidden;transition:max-width 2s ease-in-out;white-space:nowrap}form .text-container .error-message.expanded,form .text-container .error-message:hover{max-width:100%}form .text-container .error-message mat-icon{vertical-align:middle}form input[type=text]{background:#000;border:1px solid #333;color:#fff;height:1em;width:100%}form .actions{margin-left:1em}form button{display:block;margin:0 0 0 auto}form.new-message{align-items:flex-start;display:flex}form.new-message .field-container{display:flex;flex-direction:column;flex-grow:1}form.new-message mat-form-field{width:100%}form.new-message button{margin:1.25em 0 0}button.send{min-width:9em}textarea{max-height:7em}.autocomplete-container{pointer-events:none;position:relative;top:-2em;width:calc(100% - 2em)}.autocomplete{background:#333;display:flex;flex-direction:column;padding:.5em;pointer-events:none;position:absolute;visibility:hidden;z-index:100}.autocomplete.visible{pointer-events:auto;visibility:visible}.autocomplete a{text-align:left;width:100%}.autocomplete a.active{background:#555}@media (max-width:500px){:host{margin:0}.avatar-container{width:auto}.avatar-container .avatar{height:32px;margin-top:1.5em;width:32px}button.send{margin-top:1.5em;min-width:auto}button.send .label{display:none}}"]
+                    styles: ["@-webkit-keyframes comment-field-appear{0%{transform:translateY(128px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes comment-field-appear{0%{transform:translateY(128px);opacity:0}to{transform:translate(0);opacity:1}}:host{margin:0 2em 0 0;display:block;-webkit-animation-name:comment-field-appear;animation-name:comment-field-appear;-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-delay:.4s;animation-delay:.4s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.avatar-container{width:calc(48px + 1.75em);display:flex;justify-content:flex-end}.avatar-container .avatar{width:48px;height:48px;background:pink;border-radius:100%;background-size:cover;background-repeat:no-repeat;background-position:50%;margin-top:.75em;margin-right:.75em}form{display:flex;padding:.5em;align-items:center}form .text-container{position:relative;display:flex;flex-grow:1}form .text-container textarea{font-size:14pt;width:100%}form .text-container textarea[disabled]{opacity:.5}form .text-container mat-form-field{margin-bottom:1em}form .text-container emoji-selector-button{bottom:0;right:0;position:absolute}form .text-container .error-message,form .text-container mat-spinner.loading{position:absolute;left:.5em;bottom:.5em}form .text-container .error-message{color:#683333;overflow-x:hidden;max-width:1.5em;white-space:nowrap;transition:max-width 2s ease-in-out}form .text-container .error-message.expanded,form .text-container .error-message:hover{max-width:100%}form .text-container .error-message mat-icon{vertical-align:middle}form input[type=text]{background:#000;color:#fff;border:1px solid #333;width:100%;height:1em}form .actions{margin-left:1em}form button{display:block;margin:0 0 0 auto}form.new-message{display:flex;align-items:flex-start}form.new-message .field-container{flex-grow:1;display:flex;flex-direction:column}form.new-message mat-form-field{width:100%}form.new-message button{margin:1.25em 0 0}button.send{min-width:9em}textarea{max-height:7em}.autocomplete-container{width:calc(100% - 2em);position:relative;pointer-events:none;top:-2em}.autocomplete{visibility:hidden;pointer-events:none;position:absolute;background:#333;padding:.5em;display:flex;flex-direction:column;z-index:100}.autocomplete.visible{visibility:visible;pointer-events:auto}.autocomplete a{width:100%;text-align:left}.autocomplete a.active{background:#555}@media (max-width:500px){:host{margin:0}.avatar-container{width:auto}.avatar-container .avatar{width:32px;height:32px;margin-top:1.5em}button.send{min-width:auto;margin-top:1.5em}button.send .label{display:none}}"]
                 },] }
     ];
     CommentFieldComponent.propDecorators = {
@@ -9273,19 +9640,23 @@
         canComment: [{ type: core.Input }],
         signInSelected: [{ type: core.Output }],
         editAvatarSelected: [{ type: core.Output }],
+        sendError: [{ type: core.Input }],
+        expandError: [{ type: core.Input }],
         sendLabel: [{ type: core.Input }],
         sendingLabel: [{ type: core.Input }],
         label: [{ type: core.Input }],
         permissionDeniedLabel: [{ type: core.Input }],
         signInLabel: [{ type: core.Input }],
         placeholder: [{ type: core.Input }],
+        textChanged: [{ type: core.Output }],
         shouldInterceptMessageSend: [{ type: core.Input }],
         autocompleteEl: [{ type: core.ViewChild, args: ['autocomplete',] }],
         autocompleteContainerEl: [{ type: core.ViewChild, args: ['autocompleteContainer',] }],
         textareaEl: [{ type: core.ViewChild, args: ['textarea',] }],
         hashtags: [{ type: core.Input }],
         participants: [{ type: core.Input }],
-        permissionDeniedError: [{ type: core.Output }]
+        permissionDeniedError: [{ type: core.Output }],
+        submit: [{ type: core.Input }]
     };
 
     var CommentSortComponent = /** @class */ (function () {
@@ -9364,14 +9735,373 @@
                 },] }
     ];
 
+    var ChatSource = /** @class */ (function (_super_1) {
+        __extends(ChatSource, _super_1);
+        function ChatSource(backend, identifier, parentIdentifier, sortOrder) {
+            var _this = _super_1.call(this) || this;
+            _this.backend = backend;
+            _this.identifier = identifier;
+            _this.parentIdentifier = parentIdentifier;
+            _this.sortOrder = sortOrder;
+            _this.subscription = new rxjs.Subscription();
+            _this.state = 'connecting';
+            _this.messageMap = new Map();
+            _this._messageReceived = new rxjs.Subject();
+            _this._messageSent = new rxjs.Subject();
+            _this.messages = [];
+            _this.ready = new Promise(function (resolve) { return _this.markReady = resolve; });
+            return _this;
+        }
+        ChatSource.prototype.bind = function (socket) {
+            var _super = Object.create(null, {
+                bind: { get: function () { return _super_1.prototype.bind; } }
+            });
+            return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            _super.bind.call(this, socket);
+                            this.state = 'connected';
+                            this.markReady();
+                            return [4 /*yield*/, this.subscribeToTopic()];
+                        case 1:
+                            _b.sent();
+                            this.subscription.add(this.backend.userChanged.subscribe(function () { return _this.authenticate(); }));
+                            socket.addEventListener('open', function () { return __awaiter(_this, void 0, void 0, function () {
+                                return __generator(this, function (_b) {
+                                    this.state = 'connected';
+                                    return [2 /*return*/];
+                                });
+                            }); });
+                            socket.addEventListener('lost', function () { return __awaiter(_this, void 0, void 0, function () {
+                                return __generator(this, function (_b) {
+                                    this.state = 'lost';
+                                    return [2 /*return*/];
+                                });
+                            }); });
+                            socket.addEventListener('restore', function () { return __awaiter(_this, void 0, void 0, function () {
+                                return __generator(this, function (_b) {
+                                    switch (_b.label) {
+                                        case 0:
+                                            this.state = 'restored';
+                                            return [4 /*yield*/, this.authenticate()];
+                                        case 1:
+                                            _b.sent();
+                                            return [4 /*yield*/, this.subscribeToTopic()];
+                                        case 2:
+                                            _b.sent();
+                                            return [2 /*return*/];
+                                    }
+                                });
+                            }); });
+                            return [2 /*return*/, this];
+                    }
+                });
+            });
+        };
+        ChatSource.prototype.getExistingMessages = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var messages;
+                var _this = this;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0: return [4 /*yield*/, this.peer.getExistingMessages()];
+                        case 1:
+                            messages = _b.sent();
+                            messages = messages.map(function (message) {
+                                var existingMessage = _this.messageMap.get(message.id);
+                                if (existingMessage)
+                                    message = Object.assign(existingMessage, message);
+                                else
+                                    _this.messageMap.set(message.id, message);
+                                return message;
+                            });
+                            return [2 /*return*/, messages];
+                    }
+                });
+            });
+        };
+        ChatSource.prototype.editMessage = function (messageId, text) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_b) {
+                    this.peer.editMessage(messageId, text);
+                    return [2 /*return*/];
+                });
+            });
+        };
+        ChatSource.prototype.subscribeToTopic = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0: return [4 /*yield*/, this.peer.subscribe(this.identifier, this.parentIdentifier, this.sortOrder)];
+                        case 1:
+                            _b.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        ChatSource.prototype.authenticate = function () {
+            var _a;
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0: return [4 /*yield*/, this.peer.authenticate((_a = this.backend.user) === null || _a === void 0 ? void 0 : _a.token)];
+                        case 1:
+                            _b.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        ChatSource.prototype.close = function () {
+            _super_1.prototype.close.call(this);
+            this.subscription.unsubscribe();
+        };
+        ChatSource.prototype.onPermissions = function (permissions) {
+            window.bantaPermissionsDebug = permissions;
+            this.permissions = permissions;
+        };
+        ChatSource.prototype.onChatMessage = function (message) {
+            if (this.messageMap.has(message.id)) {
+                Object.assign(this.messageMap.get(message.id), message);
+            }
+            else if (!message.hidden) {
+                // Only process non-hidden messages through here. 
+                // Hidden messages may be sent to us when they become hidden (ie moderation is occurring).
+                // But if we never had the message to begin with, we should discard it.
+                this.messageMap.set(message.id, message);
+                this._messageReceived.next(message);
+            }
+        };
+        Object.defineProperty(ChatSource.prototype, "messageReceived", {
+            get: function () { return this._messageReceived.asObservable(); },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ChatSource.prototype, "messageSent", {
+            get: function () { return this._messageSent.asObservable(); },
+            enumerable: false,
+            configurable: true
+        });
+        ChatSource.prototype.send = function (message) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0: return [4 /*yield*/, this.peer.sendMessage(message)];
+                        case 1: return [2 /*return*/, _b.sent()];
+                    }
+                });
+            });
+        };
+        ChatSource.prototype.loadAfter = function (message, count) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_b) {
+                    if (!message)
+                        return [2 /*return*/];
+                    if (!message.pagingCursor)
+                        return [2 /*return*/, []];
+                    return [2 /*return*/, this.peer.loadAfter(Number(message.pagingCursor), count)];
+                });
+            });
+        };
+        ChatSource.prototype.get = function (id) {
+            return __awaiter(this, void 0, void 0, function () {
+                var message;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            if (this.messageMap.has(id))
+                                return [2 /*return*/, this.messageMap.get(id)];
+                            return [4 /*yield*/, this.peer.getMessage(id)];
+                        case 1:
+                            message = _b.sent();
+                            this.messageMap.set(id, message);
+                            return [2 /*return*/, message];
+                    }
+                });
+            });
+        };
+        ChatSource.prototype.getCount = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0: return [4 /*yield*/, this.peer.getCount()];
+                        case 1: return [2 /*return*/, _b.sent()];
+                    }
+                });
+            });
+        };
+        ChatSource.prototype.likeMessage = function (messageId) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0: return [4 /*yield*/, this.peer.likeMessage(messageId)];
+                        case 1: return [2 /*return*/, _b.sent()];
+                    }
+                });
+            });
+        };
+        ChatSource.prototype.unlikeMessage = function (messageId) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0: return [4 /*yield*/, this.peer.unlikeMessage(messageId)];
+                        case 1: return [2 /*return*/, _b.sent()];
+                    }
+                });
+            });
+        };
+        ChatSource.prototype.deleteMessage = function (messageId) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0: return [4 /*yield*/, this.peer.deleteMessage(messageId)];
+                        case 1: return [2 /*return*/, _b.sent()];
+                    }
+                });
+            });
+        };
+        return ChatSource;
+    }(common$1.SocketRPC));
+    __decorate([
+        common$1.RpcEvent(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], ChatSource.prototype, "onPermissions", null);
+    __decorate([
+        common$1.RpcEvent(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], ChatSource.prototype, "onChatMessage", null);
+
+    var BANTA_SDK_OPTIONS = 'BANTA_SDK_OPTIONS';
+
+    var ChatBackend = /** @class */ (function (_super) {
+        __extends(ChatBackend, _super);
+        function ChatBackend(options) {
+            var _this = _super.call(this) || this;
+            _this.options = options;
+            return _this;
+        }
+        Object.defineProperty(ChatBackend.prototype, "serviceUrl", {
+            get: function () {
+                var _a, _b;
+                return "" + ((_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.serviceUrl) !== null && _b !== void 0 ? _b : 'http://localhost:3422');
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ChatBackend.prototype.connectToService = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var socket;
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0:
+                            socket = new common$1.DurableSocket(this.serviceUrl.replace(/^http/, 'ws') + "/socket");
+                            return [4 /*yield*/, new Promise(function (resolve, reject) {
+                                    socket.onopen = function () {
+                                        resolve();
+                                    };
+                                    socket.onclose = function (e) {
+                                        if (e.code === 503) {
+                                            console.error("Failed to connect to chat service!");
+                                            reject(e);
+                                        }
+                                    };
+                                })];
+                        case 1:
+                            _c.sent();
+                            socket.onerror = undefined;
+                            return [2 /*return*/, socket];
+                    }
+                });
+            });
+        };
+        ChatBackend.prototype.getSourceForTopic = function (topicId, options) {
+            return __awaiter(this, void 0, void 0, function () {
+                var _c, _d;
+                return __generator(this, function (_e) {
+                    switch (_e.label) {
+                        case 0:
+                            _d = (_c = new ChatSource(this, topicId, undefined, (options === null || options === void 0 ? void 0 : options.sortOrder) || common$1.CommentsOrder.NEWEST))
+                                .bind;
+                            return [4 /*yield*/, this.connectToService()];
+                        case 1: return [4 /*yield*/, _d.apply(_c, [_e.sent()])];
+                        case 2: return [2 /*return*/, _e.sent()];
+                    }
+                });
+            });
+        };
+        ChatBackend.prototype.getSourceForThread = function (topicId, messageId, options) {
+            return __awaiter(this, void 0, void 0, function () {
+                var _c, _d;
+                return __generator(this, function (_e) {
+                    switch (_e.label) {
+                        case 0:
+                            _d = (_c = new ChatSource(this, topicId, messageId, (options === null || options === void 0 ? void 0 : options.sortOrder) || common$1.CommentsOrder.NEWEST))
+                                .bind;
+                            return [4 /*yield*/, this.connectToService()];
+                        case 1: return [4 /*yield*/, _d.apply(_c, [_e.sent()])];
+                        case 2: return [2 /*return*/, _e.sent()];
+                    }
+                });
+            });
+        };
+        ChatBackend.prototype.getSourceCountForTopic = function (topicId) {
+            return __awaiter(this, void 0, void 0, function () {
+                var response, topic;
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0: return [4 /*yield*/, fetch(this.serviceUrl + "/topics/" + topicId)];
+                        case 1:
+                            response = _c.sent();
+                            if (response.status >= 400)
+                                return [2 /*return*/, 0];
+                            return [4 /*yield*/, response.json()];
+                        case 2:
+                            topic = _c.sent();
+                            return [2 /*return*/, topic.messageCount || 0];
+                    }
+                });
+            });
+        };
+        ChatBackend.prototype.refreshMessage = function (message) {
+            throw new Error("Method not implemented.");
+        };
+        ChatBackend.prototype.getMessage = function (topicId, messageId) {
+            throw new Error("Method not implemented.");
+        };
+        ChatBackend.prototype.getSubMessage = function (topicId, parentMessageId, messageId) {
+            throw new Error("Method not implemented.");
+        };
+        ChatBackend.prototype.watchMessage = function (message, handler) {
+            throw new Error("Method not implemented.");
+        };
+        return ChatBackend;
+    }(ChatBackendBase));
+    ChatBackend.decorators = [
+        { type: core.Injectable }
+    ];
+    ChatBackend.ctorParameters = function () { return [
+        { type: undefined, decorators: [{ type: core.Inject, args: [BANTA_SDK_OPTIONS,] }] }
+    ]; };
+
     var BantaSdkModule = /** @class */ (function () {
         function BantaSdkModule() {
         }
-        BantaSdkModule.forRoot = function () {
+        BantaSdkModule.configure = function (options) {
             return {
                 ngModule: BantaSdkModule,
                 providers: [
-                    BantaService
+                    {
+                        provide: BANTA_SDK_OPTIONS,
+                        useValue: options || {}
+                    },
+                    { provide: ChatBackendBase, useClass: ChatBackend }
                 ]
             };
         };
@@ -9418,16 +10148,18 @@
      * Generated bundle index. Do not edit.
      */
 
+    exports.BANTA_SDK_OPTIONS = BANTA_SDK_OPTIONS;
     exports.BantaChatComponent = BantaChatComponent;
     exports.BantaCommentsComponent = BantaCommentsComponent;
     exports.BantaCommonModule = BantaCommonModule;
     exports.BantaComponent = BantaComponent;
     exports.BantaLogoComponent = BantaLogoComponent;
     exports.BantaSdkModule = BantaSdkModule;
-    exports.BantaService = BantaService;
-    exports.ChatBackendService = ChatBackendService;
+    exports.ChatBackend = ChatBackend;
+    exports.ChatBackendBase = ChatBackendBase;
     exports.ChatMessageComponent = ChatMessageComponent;
     exports.ChatModule = ChatModule;
+    exports.ChatSource = ChatSource;
     exports.ChatViewComponent = ChatViewComponent;
     exports.CommentComponent = CommentComponent;
     exports.CommentFieldComponent = CommentFieldComponent;