@banta/sdk 1.0.2 → 3.0.1

package/bundles/banta-sdk.umd.js

@@ -1,222 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('rxjs'), require('rxjs/operators'), require('@angular/core'), require('@angular/common'), require('@angular/platform-browser'), require('@angular/material/icon'), require('@angular/material/button'), require('subsink'), require('@angular/material/dialog'), require('@angular/forms'), require('@angular/material/menu'), require('@angular/material/tooltip'), require('@angular/material/form-field'), require('@angular/material/input')) :
-    typeof define === 'function' && define.amd ? define('@banta/sdk', ['exports', 'rxjs', 'rxjs/operators', '@angular/core', '@angular/common', '@angular/platform-browser', '@angular/material/icon', '@angular/material/button', 'subsink', '@angular/material/dialog', '@angular/forms', '@angular/material/menu', '@angular/material/tooltip', '@angular/material/form-field', '@angular/material/input'], factory) :
-    (global = global || self, factory((global.banta = global.banta || {}, global.banta.sdk = {}), global.rxjs, global.rxjs.operators, global.ng.core, global.ng.common, global.ng.platformBrowser, global.ng.material.icon, global.ng.material.button, global.subsink, global.ng.material.dialog, global.ng.forms, global.ng.material.menu, global.ng.material.tooltip, global.ng.material.formField, global.ng.material.input));
-}(this, (function (exports, rxjs, operators, core, common, platformBrowser, icon, button, subsink, dialog, forms, menu, tooltip, formField, input) { 'use strict';
-
-    /*! *****************************************************************************
-    Copyright (c) Microsoft Corporation. All rights reserved.
-    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
-    this file except in compliance with the License. You may obtain a copy of the
-    License at http://www.apache.org/licenses/LICENSE-2.0
-
-    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
-    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
-    MERCHANTABLITY OR NON-INFRINGEMENT.
-
-    See the Apache Version 2.0 License for specific language governing permissions
-    and limitations under the License.
-    ***************************************************************************** */
-    /* global Reflect, Promise */
-
-    var extendStatics = function(d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-
-    function __extends(d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    }
-
-    var __assign = function() {
-        __assign = Object.assign || function __assign(t) {
-            for (var s, i = 1, n = arguments.length; i < n; i++) {
-                s = arguments[i];
-                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-            }
-            return t;
-        };
-        return __assign.apply(this, arguments);
-    };
-
-    function __rest(s, e) {
-        var t = {};
-        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-            t[p] = s[p];
-        if (s != null && typeof Object.getOwnPropertySymbols === "function")
-            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                    t[p[i]] = s[p[i]];
-            }
-        return t;
-    }
-
-    function __decorate(decorators, target, key, desc) {
-        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-        return c > 3 && r && Object.defineProperty(target, key, r), r;
-    }
-
-    function __param(paramIndex, decorator) {
-        return function (target, key) { decorator(target, key, paramIndex); }
-    }
-
-    function __metadata(metadataKey, metadataValue) {
-        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
-    }
-
-    function __awaiter(thisArg, _arguments, P, generator) {
-        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-        return new (P || (P = Promise))(function (resolve, reject) {
-            function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-            function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-            step((generator = generator.apply(thisArg, _arguments || [])).next());
-        });
-    }
-
-    function __generator(thisArg, body) {
-        var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-        function verb(n) { return function (v) { return step([n, v]); }; }
-        function step(op) {
-            if (f) throw new TypeError("Generator is already executing.");
-            while (_) try {
-                if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-                if (y = 0, t) op = [op[0] & 2, t.value];
-                switch (op[0]) {
-                    case 0: case 1: t = op; break;
-                    case 4: _.label++; return { value: op[1], done: false };
-                    case 5: _.label++; y = op[1]; op = [0]; continue;
-                    case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                    default:
-                        if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                        if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                        if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                        if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                        if (t[2]) _.ops.pop();
-                        _.trys.pop(); continue;
-                }
-                op = body.call(thisArg, _);
-            } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-            if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-        }
-    }
-
-    function __exportStar(m, exports) {
-        for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-    }
-
-    function __values(o) {
-        var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-        if (m) return m.call(o);
-        if (o && typeof o.length === "number") return {
-            next: function () {
-                if (o && i >= o.length) o = void 0;
-                return { value: o && o[i++], done: !o };
-            }
-        };
-        throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-    }
-
-    function __read(o, n) {
-        var m = typeof Symbol === "function" && o[Symbol.iterator];
-        if (!m) return o;
-        var i = m.call(o), r, ar = [], e;
-        try {
-            while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-        }
-        catch (error) { e = { error: error }; }
-        finally {
-            try {
-                if (r && !r.done && (m = i["return"])) m.call(i);
-            }
-            finally { if (e) throw e.error; }
-        }
-        return ar;
-    }
-
-    function __spread() {
-        for (var ar = [], i = 0; i < arguments.length; i++)
-            ar = ar.concat(__read(arguments[i]));
-        return ar;
-    }
-
-    function __spreadArrays() {
-        for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-        for (var r = Array(s), k = 0, i = 0; i < il; i++)
-            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-                r[k] = a[j];
-        return r;
-    };
-
-    function __await(v) {
-        return this instanceof __await ? (this.v = v, this) : new __await(v);
-    }
-
-    function __asyncGenerator(thisArg, _arguments, generator) {
-        if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
-        var g = generator.apply(thisArg, _arguments || []), i, q = [];
-        return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
-        function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
-        function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }
-        function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
-        function fulfill(value) { resume("next", value); }
-        function reject(value) { resume("throw", value); }
-        function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }
-    }
-
-    function __asyncDelegator(o) {
-        var i, p;
-        return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
-        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
-    }
-
-    function __asyncValues(o) {
-        if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
-        var m = o[Symbol.asyncIterator], i;
-        return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
-        function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
-        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
-    }
-
-    function __makeTemplateObject(cooked, raw) {
-        if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-        return cooked;
-    };
-
-    function __importStar(mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-        result.default = mod;
-        return result;
-    }
-
-    function __importDefault(mod) {
-        return (mod && mod.__esModule) ? mod : { default: mod };
-    }
-
-    function __classPrivateFieldGet(receiver, privateMap) {
-        if (!privateMap.has(receiver)) {
-            throw new TypeError("attempted to get private field on non-instance");
-        }
-        return privateMap.get(receiver);
-    }
-
-    function __classPrivateFieldSet(receiver, privateMap, value) {
-        if (!privateMap.has(receiver)) {
-            throw new TypeError("attempted to set private field on non-instance");
-        }
-        privateMap.set(receiver, value);
-        return value;
-    }
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('rxjs'), require('rxjs/operators'), require('@angular/core'), require('@angular/common'), require('@angular/platform-browser'), require('@angular/material/icon'), require('@angular/material/button'), require('subsink'), require('@angular/material/dialog'), require('@angular/forms'), require('@angular/material/menu'), require('@angular/material/progress-spinner'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/cdk/text-field'), require('@angular/material/tooltip')) :
+    typeof define === 'function' && define.amd ? define('@banta/sdk', ['exports', 'rxjs', 'rxjs/operators', '@angular/core', '@angular/common', '@angular/platform-browser', '@angular/material/icon', '@angular/material/button', 'subsink', '@angular/material/dialog', '@angular/forms', '@angular/material/menu', '@angular/material/progress-spinner', '@angular/material/form-field', '@angular/material/input', '@angular/cdk/text-field', '@angular/material/tooltip'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.banta = global.banta || {}, global.banta.sdk = {}), global.rxjs, global.rxjs.operators, global.ng.core, global.ng.common, global.ng.platformBrowser, global.ng.material.icon, global.ng.material.button, global.subsink, global.ng.material.dialog, global.ng.forms, global.ng.material.menu, global.ng.material.progressSpinner, global.ng.material.formField, global.ng.material.input, global.ng.cdk.textField, global.ng.material.tooltip));
+}(this, (function (exports, rxjs, operators, core, common, platformBrowser, icon, button, subsink, dialog, forms, menu, progressSpinner, formField, input, textField, tooltip) { 'use strict';
 
     function lazyConnection(options) {
         var obs = new rxjs.Observable(function (observer) {
@@ -239,7 +25,7 @@
             get: function () {
                 return this._userChanged;
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         Object.defineProperty(BantaService.prototype, "user", {
@@ -250,14 +36,14 @@
                 this._user = user;
                 this._userChanged.next(user);
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
-        BantaService = __decorate([
-            core.Injectable()
-        ], BantaService);
         return BantaService;
-    }());
+    }());
+    BantaService.decorators = [
+        { type: core.Injectable }
+    ];
 
     var TimestampComponent = /** @class */ (function () {
         function TimestampComponent() {
@@ -278,7 +64,7 @@
                 this._value = v;
                 this.update();
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         TimestampComponent.prototype.update = function () {
@@ -350,20 +136,27 @@
                 }
             }
         };
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [Object])
-        ], TimestampComponent.prototype, "value", null);
-        TimestampComponent = __decorate([
-            core.Component({
-                selector: 'banta-timestamp',
-                template: "\n        <span *ngIf=\"showAbsolute\" [title]=\"value | date : 'short'\">\n            {{value | date : 'shortDate'}}\n        </span>\n        <span *ngIf=\"!showAbsolute\" [title]=\"value | date : 'short'\">\n            {{relative}}\n        </span>\n    ",
-                styles: [""]
-            })
-        ], TimestampComponent);
         return TimestampComponent;
-    }());
+    }());
+    TimestampComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'banta-timestamp',
+                    template: "\n        <span *ngIf=\"showAbsolute\" [title]=\"value | date : 'short'\">\n            {{value | date : 'shortDate'}}\n        </span>\n        <span *ngIf=\"!showAbsolute\" [title]=\"value | date : 'short'\">\n            {{relative}}\n        </span>\n    ",
+                    styles: [""]
+                },] }
+    ];
+    TimestampComponent.propDecorators = {
+        value: [{ type: core.Input }]
+    };
+
+    var ChatBackendService = /** @class */ (function () {
+        function ChatBackendService() {
+        }
+        return ChatBackendService;
+    }());
+    ChatBackendService.decorators = [
+        { type: core.Injectable }
+    ];
 
     var COMPONENTS = [
         TimestampComponent
@@ -371,132 +164,440 @@
     var BantaCommonModule = /** @class */ (function () {
         function BantaCommonModule() {
         }
-        BantaCommonModule_1 = BantaCommonModule;
-        BantaCommonModule.forRoot = function () {
-            return {
-                ngModule: BantaCommonModule_1,
-                providers: [
-                    BantaService
-                ]
-            };
-        };
-        var BantaCommonModule_1;
-        BantaCommonModule = BantaCommonModule_1 = __decorate([
-            core.NgModule({
-                declarations: COMPONENTS,
-                imports: [
-                    common.CommonModule
-                ],
-                exports: COMPONENTS
-            })
-        ], BantaCommonModule);
         return BantaCommonModule;
-    }());
+    }());
+    BantaCommonModule.decorators = [
+        { type: core.NgModule, args: [{
+                    declarations: COMPONENTS,
+                    imports: [
+                        common.CommonModule
+                    ],
+                    exports: COMPONENTS
+                },] }
+    ];
 
-    var EMOJIS = {
-        "grinning": {
-            "keywords": ["face", "smile", "happy", "joy", ":D", "grin"],
-            "char": "😀",
-            "category": "people"
-        },
-        "grimacing": {
-            "keywords": ["face", "grimace", "teeth"],
-            "char": "😬",
-            "category": "people"
-        },
-        "grin": {
-            "keywords": ["face", "happy", "smile", "joy", "kawaii"],
-            "char": "😁",
-            "category": "people"
-        },
-        "joy": {
-            "keywords": ["face", "cry", "tears", "weep", "happy", "happytears", "haha"],
-            "char": "😂",
-            "category": "people"
-        },
-        "smiley": {
-            "keywords": ["face", "happy", "joy", "haha", ":D", ":)", "smile", "funny"],
-            "char": "😃",
-            "category": "people"
-        },
-        "smile": {
-            "keywords": ["face", "happy", "joy", "funny", "haha", "laugh", "like", ":D", ":)"],
-            "char": "😄",
-            "category": "people"
-        },
-        "sweat_smile": {
-            "keywords": ["face", "hot", "happy", "laugh", "sweat", "smile", "relief"],
-            "char": "😅",
-            "category": "people"
-        },
-        "laughing": {
-            "keywords": ["happy", "joy", "lol", "satisfied", "haha", "face", "glad", "XD", "laugh"],
-            "char": "😆",
-            "category": "people"
-        },
-        "innocent": {
-            "keywords": ["face", "angel", "heaven", "halo"],
-            "char": "😇",
-            "category": "people"
-        },
-        "wink": {
-            "keywords": ["face", "happy", "mischievous", "secret", ";)", "smile"],
-            "char": "😉",
-            "category": "people"
-        },
-        "blush": {
-            "keywords": ["face", "smile", "happy", "flushed", "crush", "embarrassed", "shy", "joy"],
-            "char": "😊",
-            "category": "people"
-        },
-        "slightly_smiling": {
-            "keywords": ["face", "smile"],
-            "char": "🙂",
-            "category": "people"
-        },
-        "upside_down": {
-            "keywords": ["face", "flipped", "silly", "smile"],
-            "char": "🙃",
-            "category": "people"
-        },
-        "relaxed": {
-            "keywords": ["face", "blush", "massage", "happiness"],
-            "char": "☺️",
-            "category": "people"
-        },
-        "yum": {
-            "keywords": ["happy", "joy", "tongue", "smile", "face", "silly", "yummy", "nom"],
-            "char": "😋",
-            "category": "people"
-        },
-        "relieved": {
-            "keywords": ["face", "relaxed", "phew", "massage", "happiness"],
-            "char": "😌",
-            "category": "people"
-        },
-        "heart_eyes": {
-            "keywords": ["face", "love", "like", "affection", "valentines", "infatuation", "crush", "heart"],
-            "char": "😍",
-            "category": "people"
-        },
-        "kissing_heart": {
-            "keywords": ["face", "love", "like", "affection", "valentines", "infatuation", "kiss"],
-            "char": "😘",
-            "category": "people"
-        },
-        "kissing": {
-            "keywords": ["love", "like", "face", "3", "valentines", "infatuation", "kiss"],
-            "char": "😗",
-            "category": "people"
-        },
-        "kissing_smiling_eyes": {
-            "keywords": ["face", "affection", "valentines", "infatuation", "kiss"],
-            "char": "😙",
-            "category": "people"
-        },
-        "kissing_closed_eyes": {
-            "keywords": ["face", "love", "like", "affection", "valentines", "infatuation", "kiss"],
-            "char": "😚",
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+    /* global Reflect, Promise */
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b)
+                if (Object.prototype.hasOwnProperty.call(b, p))
+                    d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    function __extends(d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    }
+    var __assign = function () {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s)
+                    if (Object.prototype.hasOwnProperty.call(s, p))
+                        t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+    function __rest(s, e) {
+        var t = {};
+        for (var p in s)
+            if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+                t[p] = s[p];
+        if (s != null && typeof Object.getOwnPropertySymbols === "function")
+            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                    t[p[i]] = s[p[i]];
+            }
+        return t;
+    }
+    function __decorate(decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+            r = Reflect.decorate(decorators, target, key, desc);
+        else
+            for (var i = decorators.length - 1; i >= 0; i--)
+                if (d = decorators[i])
+                    r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    }
+    function __param(paramIndex, decorator) {
+        return function (target, key) { decorator(target, key, paramIndex); };
+    }
+    function __metadata(metadataKey, metadataValue) {
+        if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+            return Reflect.metadata(metadataKey, metadataValue);
+    }
+    function __awaiter(thisArg, _arguments, P, generator) {
+        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+        return new (P || (P = Promise))(function (resolve, reject) {
+            function fulfilled(value) { try {
+                step(generator.next(value));
+            }
+            catch (e) {
+                reject(e);
+            } }
+            function rejected(value) { try {
+                step(generator["throw"](value));
+            }
+            catch (e) {
+                reject(e);
+            } }
+            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+            step((generator = generator.apply(thisArg, _arguments || [])).next());
+        });
+    }
+    function __generator(thisArg, body) {
+        var _ = { label: 0, sent: function () { if (t[0] & 1)
+                throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
+        function verb(n) { return function (v) { return step([n, v]); }; }
+        function step(op) {
+            if (f)
+                throw new TypeError("Generator is already executing.");
+            while (_)
+                try {
+                    if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
+                        return t;
+                    if (y = 0, t)
+                        op = [op[0] & 2, t.value];
+                    switch (op[0]) {
+                        case 0:
+                        case 1:
+                            t = op;
+                            break;
+                        case 4:
+                            _.label++;
+                            return { value: op[1], done: false };
+                        case 5:
+                            _.label++;
+                            y = op[1];
+                            op = [0];
+                            continue;
+                        case 7:
+                            op = _.ops.pop();
+                            _.trys.pop();
+                            continue;
+                        default:
+                            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                                _ = 0;
+                                continue;
+                            }
+                            if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
+                                _.label = op[1];
+                                break;
+                            }
+                            if (op[0] === 6 && _.label < t[1]) {
+                                _.label = t[1];
+                                t = op;
+                                break;
+                            }
+                            if (t && _.label < t[2]) {
+                                _.label = t[2];
+                                _.ops.push(op);
+                                break;
+                            }
+                            if (t[2])
+                                _.ops.pop();
+                            _.trys.pop();
+                            continue;
+                    }
+                    op = body.call(thisArg, _);
+                }
+                catch (e) {
+                    op = [6, e];
+                    y = 0;
+                }
+                finally {
+                    f = t = 0;
+                }
+            if (op[0] & 5)
+                throw op[1];
+            return { value: op[0] ? op[1] : void 0, done: true };
+        }
+    }
+    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]; } });
+    }) : (function (o, m, k, k2) {
+        if (k2 === undefined)
+            k2 = k;
+        o[k2] = m[k];
+    });
+    function __exportStar(m, o) {
+        for (var p in m)
+            if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
+                __createBinding(o, m, p);
+    }
+    function __values(o) {
+        var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+        if (m)
+            return m.call(o);
+        if (o && typeof o.length === "number")
+            return {
+                next: function () {
+                    if (o && i >= o.length)
+                        o = void 0;
+                    return { value: o && o[i++], done: !o };
+                }
+            };
+        throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+    }
+    function __read(o, n) {
+        var m = typeof Symbol === "function" && o[Symbol.iterator];
+        if (!m)
+            return o;
+        var i = m.call(o), r, ar = [], e;
+        try {
+            while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
+                ar.push(r.value);
+        }
+        catch (error) {
+            e = { error: error };
+        }
+        finally {
+            try {
+                if (r && !r.done && (m = i["return"]))
+                    m.call(i);
+            }
+            finally {
+                if (e)
+                    throw e.error;
+            }
+        }
+        return ar;
+    }
+    /** @deprecated */
+    function __spread() {
+        for (var ar = [], i = 0; i < arguments.length; i++)
+            ar = ar.concat(__read(arguments[i]));
+        return ar;
+    }
+    /** @deprecated */
+    function __spreadArrays() {
+        for (var s = 0, i = 0, il = arguments.length; i < il; i++)
+            s += arguments[i].length;
+        for (var r = Array(s), k = 0, i = 0; i < il; i++)
+            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+                r[k] = a[j];
+        return r;
+    }
+    function __spreadArray(to, from, pack) {
+        if (pack || arguments.length === 2)
+            for (var i = 0, l = from.length, ar; i < l; i++) {
+                if (ar || !(i in from)) {
+                    if (!ar)
+                        ar = Array.prototype.slice.call(from, 0, i);
+                    ar[i] = from[i];
+                }
+            }
+        return to.concat(ar || Array.prototype.slice.call(from));
+    }
+    function __await(v) {
+        return this instanceof __await ? (this.v = v, this) : new __await(v);
+    }
+    function __asyncGenerator(thisArg, _arguments, generator) {
+        if (!Symbol.asyncIterator)
+            throw new TypeError("Symbol.asyncIterator is not defined.");
+        var g = generator.apply(thisArg, _arguments || []), i, q = [];
+        return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
+        function verb(n) { if (g[n])
+            i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
+        function resume(n, v) { try {
+            step(g[n](v));
+        }
+        catch (e) {
+            settle(q[0][3], e);
+        } }
+        function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
+        function fulfill(value) { resume("next", value); }
+        function reject(value) { resume("throw", value); }
+        function settle(f, v) { if (f(v), q.shift(), q.length)
+            resume(q[0][0], q[0][1]); }
+    }
+    function __asyncDelegator(o) {
+        var i, p;
+        return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
+        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
+    }
+    function __asyncValues(o) {
+        if (!Symbol.asyncIterator)
+            throw new TypeError("Symbol.asyncIterator is not defined.");
+        var m = o[Symbol.asyncIterator], i;
+        return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
+        function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
+        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
+    }
+    function __makeTemplateObject(cooked, raw) {
+        if (Object.defineProperty) {
+            Object.defineProperty(cooked, "raw", { value: raw });
+        }
+        else {
+            cooked.raw = raw;
+        }
+        return cooked;
+    }
+    ;
+    var __setModuleDefault = Object.create ? (function (o, v) {
+        Object.defineProperty(o, "default", { enumerable: true, value: v });
+    }) : function (o, v) {
+        o["default"] = v;
+    };
+    function __importStar(mod) {
+        if (mod && mod.__esModule)
+            return mod;
+        var result = {};
+        if (mod != null)
+            for (var k in mod)
+                if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
+                    __createBinding(result, mod, k);
+        __setModuleDefault(result, mod);
+        return result;
+    }
+    function __importDefault(mod) {
+        return (mod && mod.__esModule) ? mod : { default: mod };
+    }
+    function __classPrivateFieldGet(receiver, state, kind, f) {
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a getter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot read private member from an object whose class did not declare it");
+        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+    }
+    function __classPrivateFieldSet(receiver, state, value, kind, f) {
+        if (kind === "m")
+            throw new TypeError("Private method is not writable");
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a setter");
+        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;
+    }
+
+    var EMOJIS = {
+        "grinning": {
+            "keywords": ["face", "smile", "happy", "joy", ":D", "grin"],
+            "char": "😀",
+            "category": "people"
+        },
+        "grimacing": {
+            "keywords": ["face", "grimace", "teeth"],
+            "char": "😬",
+            "category": "people"
+        },
+        "grin": {
+            "keywords": ["face", "happy", "smile", "joy", "kawaii"],
+            "char": "😁",
+            "category": "people"
+        },
+        "joy": {
+            "keywords": ["face", "cry", "tears", "weep", "happy", "happytears", "haha"],
+            "char": "😂",
+            "category": "people"
+        },
+        "smiley": {
+            "keywords": ["face", "happy", "joy", "haha", ":D", ":)", "smile", "funny"],
+            "char": "😃",
+            "category": "people"
+        },
+        "smile": {
+            "keywords": ["face", "happy", "joy", "funny", "haha", "laugh", "like", ":D", ":)"],
+            "char": "😄",
+            "category": "people"
+        },
+        "sweat_smile": {
+            "keywords": ["face", "hot", "happy", "laugh", "sweat", "smile", "relief"],
+            "char": "😅",
+            "category": "people"
+        },
+        "laughing": {
+            "keywords": ["happy", "joy", "lol", "satisfied", "haha", "face", "glad", "XD", "laugh"],
+            "char": "😆",
+            "category": "people"
+        },
+        "innocent": {
+            "keywords": ["face", "angel", "heaven", "halo"],
+            "char": "😇",
+            "category": "people"
+        },
+        "wink": {
+            "keywords": ["face", "happy", "mischievous", "secret", ";)", "smile"],
+            "char": "😉",
+            "category": "people"
+        },
+        "blush": {
+            "keywords": ["face", "smile", "happy", "flushed", "crush", "embarrassed", "shy", "joy"],
+            "char": "😊",
+            "category": "people"
+        },
+        "slightly_smiling": {
+            "keywords": ["face", "smile"],
+            "char": "🙂",
+            "category": "people"
+        },
+        "upside_down": {
+            "keywords": ["face", "flipped", "silly", "smile"],
+            "char": "🙃",
+            "category": "people"
+        },
+        "relaxed": {
+            "keywords": ["face", "blush", "massage", "happiness"],
+            "char": "☺️",
+            "category": "people"
+        },
+        "yum": {
+            "keywords": ["happy", "joy", "tongue", "smile", "face", "silly", "yummy", "nom"],
+            "char": "😋",
+            "category": "people"
+        },
+        "relieved": {
+            "keywords": ["face", "relaxed", "phew", "massage", "happiness"],
+            "char": "😌",
+            "category": "people"
+        },
+        "heart_eyes": {
+            "keywords": ["face", "love", "like", "affection", "valentines", "infatuation", "crush", "heart"],
+            "char": "😍",
+            "category": "people"
+        },
+        "kissing_heart": {
+            "keywords": ["face", "love", "like", "affection", "valentines", "infatuation", "kiss"],
+            "char": "😘",
+            "category": "people"
+        },
+        "kissing": {
+            "keywords": ["love", "like", "face", "3", "valentines", "infatuation", "kiss"],
+            "char": "😗",
+            "category": "people"
+        },
+        "kissing_smiling_eyes": {
+            "keywords": ["face", "affection", "valentines", "infatuation", "kiss"],
+            "char": "😙",
+            "category": "people"
+        },
+        "kissing_closed_eyes": {
+            "keywords": ["face", "love", "like", "affection", "valentines", "infatuation", "kiss"],
+            "char": "😚",
             "category": "people"
         },
         "stuck_out_tongue_winking_eye": {
@@ -6929,7 +7030,7 @@
             try {
                 for (var _b = __values(this.pairs(EMOJIS)), _c = _b.next(); !_c.done; _c = _b.next()) {
                     var pair = _c.value;
-                    var name_1 = pair[0];
+                    var name = pair[0];
                     var emoji = pair[1];
                     if (!cats[emoji.category]) {
                         cats[emoji.category] = {
@@ -6951,23 +7052,21 @@
             }
             this.categories = this.pairs(cats).map(function (pair) { return pair[1]; });
         };
-        EmojiSelectorPanelComponent.ctorParameters = function () { return [
-            { type: platformBrowser.DomSanitizer }
-        ]; };
-        __decorate([
-            core.Output(),
-            __metadata("design:type", rxjs.Subject)
-        ], EmojiSelectorPanelComponent.prototype, "selected", void 0);
-        EmojiSelectorPanelComponent = __decorate([
-            core.Component({
-                selector: 'emoji-selector-panel',
-                template: "<div class=\"categories\">\r\n\t<a title=\"{{category.name}}\" mat-icon-button *ngFor=\"let category of categories\" (click)=\"activeCategory = category.name\">\r\n\t\t<mat-icon>{{category.icon}}</mat-icon>\r\n\t</a>\r\n</div>\r\n\r\n<div *ngFor=\"let category of categories\">\r\n\t<div class=\"emoji-list\" *ngIf=\"activeCategory && activeCategory == category.name\">\r\n\t\t<a href=\"javascript:;\" (click)=\"select(emoji.char)\" *ngFor=\"let emoji of category.emojis\" [innerHtml]=\"emoji.html || ''\">\r\n\t\t</a>\r\n\t</div>\r\n</div>",
-                styles: [":host{background:#111;border:1px solid #333;border-radius:5px;padding:.5em;display:flex;flex-direction:column;width:calc(8*(32px + 1em))}.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}"]
-            }),
-            __metadata("design:paramtypes", [platformBrowser.DomSanitizer])
-        ], EmojiSelectorPanelComponent);
         return EmojiSelectorPanelComponent;
-    }());
+    }());
+    EmojiSelectorPanelComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'emoji-selector-panel',
+                    template: "<div class=\"categories\">\r\n\t<a title=\"{{category.name}}\" mat-icon-button *ngFor=\"let category of categories\" (click)=\"activeCategory = category.name\">\r\n\t\t<mat-icon>{{category.icon}}</mat-icon>\r\n\t</a>\r\n</div>\r\n\r\n<div *ngFor=\"let category of categories\">\r\n\t<div class=\"emoji-list\" *ngIf=\"activeCategory && activeCategory == category.name\">\r\n\t\t<a href=\"javascript:;\" (click)=\"select(emoji.char)\" *ngFor=\"let emoji of category.emojis\" [innerHtml]=\"emoji.html || ''\">\r\n\t\t</a>\r\n\t</div>\r\n</div>",
+                    styles: [":host{background:#111;border:1px solid #333;border-radius:5px;display:flex;flex-direction:column;padding:.5em;width:calc(256px + 8em)}.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}"]
+                },] }
+    ];
+    EmojiSelectorPanelComponent.ctorParameters = function () { return [
+        { type: platformBrowser.DomSanitizer }
+    ]; };
+    EmojiSelectorPanelComponent.propDecorators = {
+        selected: [{ type: core.Output }]
+    };
 
     var EmojiSelectorButtonComponent = /** @class */ (function () {
         function EmojiSelectorButtonComponent() {
@@ -6978,7 +7077,7 @@
             get: function () {
                 return this._selected;
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         EmojiSelectorButtonComponent.prototype.ngOnDestroy = function () {
@@ -7014,20 +7113,18 @@
         EmojiSelectorButtonComponent.prototype.insert = function (str) {
             this._selected.next(str);
         };
-        __decorate([
-            core.Output(),
-            __metadata("design:type", rxjs.Observable),
-            __metadata("design:paramtypes", [])
-        ], EmojiSelectorButtonComponent.prototype, "selected", null);
-        EmojiSelectorButtonComponent = __decorate([
-            core.Component({
-                selector: 'emoji-selector-button',
-                template: "\n        <button mat-icon-button (click)=\"show()\">\n            <mat-icon>emoji_emotions</mat-icon>\n        </button>\n        <emoji-selector-panel \n            (selected)=\"insert($event)\"\n            [class.visible]=\"showEmojiPanel\"\n            ></emoji-selector-panel>\n    ",
-                styles: ["\n        :host {\n            display: block;\n            position: relative;\n        }\n\n        emoji-selector-panel {\n            position: absolute;\n            bottom: 2.5em;\n            right: 0;\n            opacity: 0;\n            pointer-events: none;\n            z-index: 10;\n        }\n\n        emoji-selector-panel.visible {\n            pointer-events: initial;\n            opacity: 1;\n        }\n\n        button {\n            color: #666\n        }\n\n        :host.bottom-left emoji-selector-panel {\n            right: auto;\n            left: 0;\n        }\n\n        :host.top-right emoji-selector-panel {\n            top: 2.4em;\n            bottom: auto;\n        }\n\n        :host.top-left emoji-selector-panel {\n            top: 2.4em;\n            bottom: auto;\n            left: 0;\n            right: auto;\n        }\n    "]
-            })
-        ], EmojiSelectorButtonComponent);
         return EmojiSelectorButtonComponent;
-    }());
+    }());
+    EmojiSelectorButtonComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'emoji-selector-button',
+                    template: "\n        <button mat-icon-button (click)=\"show()\">\n            <mat-icon>emoji_emotions</mat-icon>\n        </button>\n        <emoji-selector-panel \n            (selected)=\"insert($event)\"\n            [class.visible]=\"showEmojiPanel\"\n            ></emoji-selector-panel>\n    ",
+                    styles: ["\n        :host {\n            display: block;\n            position: relative;\n        }\n\n        emoji-selector-panel {\n            position: absolute;\n            bottom: 2.5em;\n            right: 0;\n            opacity: 0;\n            pointer-events: none;\n            z-index: 10;\n        }\n\n        emoji-selector-panel.visible {\n            pointer-events: initial;\n            opacity: 1;\n        }\n\n        button {\n            color: #666\n        }\n\n        :host.bottom-left emoji-selector-panel {\n            right: auto;\n            left: 0;\n        }\n\n        :host.top-right emoji-selector-panel {\n            top: 2.4em;\n            bottom: auto;\n        }\n\n        :host.top-left emoji-selector-panel {\n            top: 2.4em;\n            bottom: auto;\n            left: 0;\n            right: auto;\n        }\n    "]
+                },] }
+    ];
+    EmojiSelectorButtonComponent.propDecorators = {
+        selected: [{ type: core.Output }]
+    };
 
     var COMPONENTS$1 = [
         EmojiSelectorPanelComponent,
@@ -7036,53 +7133,324 @@
     var EmojiModule = /** @class */ (function () {
         function EmojiModule() {
         }
-        EmojiModule = __decorate([
-            core.NgModule({
-                declarations: COMPONENTS$1,
-                imports: [
-                    common.CommonModule,
-                    icon.MatIconModule,
-                    button.MatButtonModule
-                ],
-                exports: COMPONENTS$1
-            })
-        ], EmojiModule);
         return EmojiModule;
-    }());
+    }());
+    EmojiModule.decorators = [
+        { type: core.NgModule, args: [{
+                    declarations: COMPONENTS$1,
+                    imports: [
+                        common.CommonModule,
+                        icon.MatIconModule,
+                        button.MatButtonModule
+                    ],
+                    exports: COMPONENTS$1
+                },] }
+    ];
 
-    var ChatMessageComponent = /** @class */ (function () {
-        function ChatMessageComponent() {
-            this._selected = new rxjs.Subject();
-            this._reported = new rxjs.Subject();
-            this._upvoted = new rxjs.Subject();
-            this._userSelected = new rxjs.Subject();
-        }
-        Object.defineProperty(ChatMessageComponent.prototype, "userSelected", {
-            get: function () {
+    /**
+     * Unified chat and comments component
+     */
+    var BantaComponent = /** @class */ (function () {
+        function BantaComponent(banta, backend, matDialog) {
+            this.banta = banta;
+            this.backend = backend;
+            this.matDialog = matDialog;
+            this._subs = new subsink.SubSink();
+            this.auxOpen = false;
+            this.auxTitle = 'Notifications';
+            this.auxMode = 'notifications';
+            this.mobileFocus = null;
+            this.newNotifications = false;
+            this.chatLabel = 'Chat';
+            this.commentsLabel = 'Comments';
+            this._signInSelected = new rxjs.Subject();
+            this.pointOpen = null;
+            this.pointSubChat = null;
+            this.newPointSubMessage = {};
+            this.genericAvatarUrl = 'https://gravatar.com/avatar/915c804e0be607a4ad766ddadea5c48a?s=512&d=https://codepen.io/assets/avatars/user-avatar-512x512-6e240cf350d2f1cc07c2bed234c3a3bb5f1b237023c204c782622e80d6b212ba.png';
+            // this.firehoseSource = new MockFirehoseSource();
+            // this.pointSource = new MockPointSource();
+        }
+        BantaComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this._subs.add(this.banta.userChanged.subscribe(function (user) { return _this.currentUser = user; }), this.backend.notificationsChanged.subscribe(function (notifs) { return _this.notifications = notifs; }), this.backend.newNotification.subscribe(function (notif) {
+                _this.newNotifications = true;
+            }));
+        };
+        BantaComponent.prototype.sendPointSubMessage = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var text, message, e_1;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            text = (this.newPointSubMessage.message || '').trim();
+                            this.newPointSubMessage.message = '';
+                            if (text === '')
+                                return [2 /*return*/];
+                            message = {
+                                user: null,
+                                sentAt: Date.now(),
+                                upvotes: 0,
+                                message: text
+                            };
+                            _a.label = 1;
+                        case 1:
+                            _a.trys.push([1, 3, , 4]);
+                            return [4 /*yield*/, this.pointSubChat.send(message)];
+                        case 2:
+                            _a.sent();
+                            return [3 /*break*/, 4];
+                        case 3:
+                            e_1 = _a.sent();
+                            console.error("Failed to send point sub-message:");
+                            console.error(e_1);
+                            return [3 /*break*/, 4];
+                        case 4: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        BantaComponent.prototype.goToMessage = function (message) {
+            return __awaiter(this, void 0, void 0, function () {
+                var targetMessage, parentMessage, viewType, _a, _b;
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0:
+                            targetMessage = message;
+                            if (!message.parentMessageId) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this.backend.getMessage(message.topicId, message.parentMessageId)];
+                        case 1:
+                            parentMessage = _c.sent();
+                            if (!parentMessage) {
+                                console.error("Failed to look up parent message " + message.topicId + "/" + message.parentMessageId);
+                                console.error("Original message was:");
+                                console.dir(targetMessage);
+                                return [2 /*return*/];
+                            }
+                            message = parentMessage;
+                            _c.label = 2;
+                        case 2:
+                            viewType = this.getViewType(message);
+                            if (!(viewType === 'comment')) return [3 /*break*/, 5];
+                            if (this.pointSubChat) {
+                                if (this.pointSubChat.close)
+                                    this.pointSubChat.close();
+                                this.pointSubChat = null;
+                            }
+                            this.mobileFocus = 'points';
+                            this.pointOpen = message;
+                            _a = this;
+                            return [4 /*yield*/, this.backend.getSourceForThread(message.topicId, message.id)];
+                        case 3:
+                            _a.pointSubChat = _c.sent();
+                            _b = this;
+                            return [4 /*yield*/, this.backend.refreshMessage(message)];
+                        case 4:
+                            _b.pointOpen = _c.sent();
+                            this.newPointSubMessage = {};
+                            return [3 /*break*/, 6];
+                        case 5:
+                            if (viewType === 'chat') {
+                                this.mobileFocus = 'firehose';
+                                this.firehose.jumpToMessage(message);
+                            }
+                            _c.label = 6;
+                        case 6: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        BantaComponent.prototype.pointUnfocus = function () {
+            this.pointOpen = null;
+            if (this.pointSubChat) {
+                if (this.pointSubChat.close)
+                    this.pointSubChat.close();
+                this.pointSubChat = null;
+            }
+        };
+        BantaComponent.prototype.ngOnDestroy = function () {
+            this._subs.unsubscribe();
+        };
+        BantaComponent.prototype.showAux = function (title, mode) {
+            this.auxOpen = true;
+            this.auxTitle = title;
+            this.auxMode = mode;
+            this.mobileFocus = 'aux';
+        };
+        BantaComponent.prototype.showNotifications = function () {
+            this.showAux('Notifications', 'notifications');
+        };
+        Object.defineProperty(BantaComponent.prototype, "topicID", {
+            get: function () {
+                return this._topicID;
+            },
+            set: function (value) {
+                this._topicID = value;
+                this.close();
+                this.connectToTopic(this._topicID);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        BantaComponent.prototype.connectToTopic = function (id) {
+            return __awaiter(this, void 0, void 0, function () {
+                var _a, _b;
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0:
+                            _a = this;
+                            return [4 /*yield*/, this.backend.getSourceForTopic(id + "_firehose")];
+                        case 1:
+                            _a.firehoseSource = _c.sent();
+                            _b = this;
+                            return [4 /*yield*/, this.backend.getSourceForTopic(id + "_thepoint")];
+                        case 2:
+                            _b.pointSource = _c.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        Object.defineProperty(BantaComponent.prototype, "signInSelected", {
+            get: function () {
+                return this._signInSelected;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        BantaComponent.prototype.showSignIn = function () {
+            this._signInSelected.next();
+        };
+        BantaComponent.prototype.close = function () {
+            if (this.firehoseSource) {
+                if (this.firehoseSource.close)
+                    this.firehoseSource.close();
+                this.firehoseSource = null;
+            }
+            if (this.pointSource) {
+                if (this.pointSource.close)
+                    this.pointSource.close();
+                this.pointSource = null;
+            }
+        };
+        Object.defineProperty(BantaComponent.prototype, "hasPoint", {
+            get: function () {
+                return this.pointOpen != null;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        BantaComponent.prototype.closeAux = function () {
+            this.auxOpen = false;
+            this.mobileFocus = 'firehose';
+        };
+        BantaComponent.prototype.getViewType = function (message) {
+            if (message.topicId.endsWith('_firehose'))
+                return 'chat';
+            else if (message.topicId.endsWith('_thepoint'))
+                return 'comment';
+            return 'comment';
+        };
+        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*/];
+                    }
+                });
+            });
+        };
+        BantaComponent.prototype.showProfile = function (user) {
+            this.profileUser = user;
+            this.showAux("@" + user.username + "'s Profile", 'profile');
+        };
+        BantaComponent.prototype.sendReport = function (message) {
+            this.auxOpen = false;
+            alert('would send report');
+        };
+        BantaComponent.prototype.reportMessage = function (message) {
+            this.reportedMessage = message;
+            this.showAux("Report message from @" + message.user.username, 'report');
+        };
+        return BantaComponent;
+    }());
+    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\r\n                <pre>{{profileUser | json}}</pre>\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}"]
+                },] }
+    ];
+    BantaComponent.ctorParameters = function () { return [
+        { type: BantaService },
+        { type: ChatBackendService },
+        { type: dialog.MatDialog }
+    ]; };
+    BantaComponent.propDecorators = {
+        firehose: [{ type: core.ViewChild, args: ['firehose', { static: true },] }],
+        topicID: [{ type: core.Input }],
+        chatLabel: [{ type: core.Input }],
+        commentsLabel: [{ type: core.Input }],
+        signInSelected: [{ type: core.Output }],
+        hasPoint: [{ type: core.HostBinding, args: ['class.point-focus',] }]
+    };
+
+    var BantaLogoComponent = /** @class */ (function () {
+        function BantaLogoComponent() {
+        }
+        return BantaLogoComponent;
+    }());
+    BantaLogoComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'banta-logo',
+                    template: "banta",
+                    styles: ["\n        :host {\n            font-family: 'Odibee Sans', sans-serif;\n            font-size: 40pt;\n        }\n\n        :host.small {\n            font-size: 30pt;\n        }\n        "]
+                },] }
+    ];
+
+    var ChatMessageComponent = /** @class */ (function () {
+        function ChatMessageComponent() {
+            this._selected = new rxjs.Subject();
+            this._reported = new rxjs.Subject();
+            this._upvoted = new rxjs.Subject();
+            this._userSelected = new rxjs.Subject();
+        }
+        Object.defineProperty(ChatMessageComponent.prototype, "userSelected", {
+            get: function () {
                 return this._userSelected;
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         Object.defineProperty(ChatMessageComponent.prototype, "selected", {
             get: function () {
                 return this._selected;
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         Object.defineProperty(ChatMessageComponent.prototype, "reported", {
             get: function () {
                 return this._reported;
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         Object.defineProperty(ChatMessageComponent.prototype, "upvoted", {
             get: function () {
                 return this._upvoted;
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         ChatMessageComponent.prototype.avatarForUser = function (user) {
@@ -7104,48 +7472,22 @@
         ChatMessageComponent.prototype.selectUser = function () {
             this._userSelected.next();
         };
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], ChatMessageComponent.prototype, "message", void 0);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [])
-        ], ChatMessageComponent.prototype, "userSelected", null);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [])
-        ], ChatMessageComponent.prototype, "selected", null);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [])
-        ], ChatMessageComponent.prototype, "reported", null);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [])
-        ], ChatMessageComponent.prototype, "upvoted", null);
-        ChatMessageComponent = __decorate([
-            core.Component({
-                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{display:flex;flex-direction:row;align-items:center;padding:0 1em;background-color:#fff;color:#000;transition:background-color .4s ease-out}: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{color:#111;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:center;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);
         return ChatMessageComponent;
-    }());
-
-    var ChatBackendService = /** @class */ (function () {
-        function ChatBackendService() {
-        }
-        ChatBackendService = __decorate([
-            core.Injectable()
-        ], ChatBackendService);
-        return ChatBackendService;
-    }());
+    }());
+    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}"]
+                },] }
+    ];
+    ChatMessageComponent.propDecorators = {
+        message: [{ type: core.Input }],
+        userSelected: [{ type: core.Output }],
+        selected: [{ type: core.Output }],
+        reported: [{ type: core.Output }],
+        upvoted: [{ type: core.Output }]
+    };
 
     var LiveChatMessageComponent = /** @class */ (function () {
         function LiveChatMessageComponent(backend) {
@@ -7158,21 +7500,21 @@
             get: function () {
                 return this._upvoted;
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         Object.defineProperty(LiveChatMessageComponent.prototype, "reported", {
             get: function () {
                 return this._reported;
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         Object.defineProperty(LiveChatMessageComponent.prototype, "selected", {
             get: function () {
                 return this._selected;
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         Object.defineProperty(LiveChatMessageComponent.prototype, "message", {
@@ -7194,7 +7536,7 @@
                     this.unsubscribe = this.backend.watchMessage(value, function (message) { return _this.message = message; });
                 }
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         LiveChatMessageComponent.prototype.report = function () {
@@ -7206,39 +7548,24 @@
         LiveChatMessageComponent.prototype.select = function () {
             this._selected.next();
         };
-        LiveChatMessageComponent.ctorParameters = function () { return [
-            { type: ChatBackendService }
-        ]; };
-        __decorate([
-            core.Output(),
-            __metadata("design:type", rxjs.Observable),
-            __metadata("design:paramtypes", [])
-        ], LiveChatMessageComponent.prototype, "upvoted", null);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", rxjs.Observable),
-            __metadata("design:paramtypes", [])
-        ], LiveChatMessageComponent.prototype, "reported", null);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", rxjs.Observable),
-            __metadata("design:paramtypes", [])
-        ], LiveChatMessageComponent.prototype, "selected", null);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [Object])
-        ], LiveChatMessageComponent.prototype, "message", null);
-        LiveChatMessageComponent = __decorate([
-            core.Component({
-                selector: 'banta-live-chat-message',
-                template: "\n        <banta-chat-message \n            *ngIf=\"message\"\n            [message]=\"message\"\n            (upvoted)=\"upvote()\"\n            (reported)=\"report()\"\n            (selected)=\"select()\"\n            ></banta-chat-message>\n    ",
-                styles: [""]
-            }),
-            __metadata("design:paramtypes", [ChatBackendService])
-        ], LiveChatMessageComponent);
         return LiveChatMessageComponent;
-    }());
+    }());
+    LiveChatMessageComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'banta-live-chat-message',
+                    template: "\n        <banta-chat-message \n            *ngIf=\"message\"\n            [message]=\"message\"\n            (upvoted)=\"upvote()\"\n            (reported)=\"report()\"\n            (selected)=\"select()\"\n            ></banta-chat-message>\n    ",
+                    styles: [""]
+                },] }
+    ];
+    LiveChatMessageComponent.ctorParameters = function () { return [
+        { type: ChatBackendService }
+    ]; };
+    LiveChatMessageComponent.propDecorators = {
+        upvoted: [{ type: core.Output }],
+        reported: [{ type: core.Output }],
+        selected: [{ type: core.Output }],
+        message: [{ type: core.Input }]
+    };
 
     var ChatViewComponent = /** @class */ (function () {
         function ChatViewComponent(elementRef) {
@@ -7279,35 +7606,35 @@
                     }
                 }
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         Object.defineProperty(ChatViewComponent.prototype, "selected", {
             get: function () {
                 return this._selected;
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         Object.defineProperty(ChatViewComponent.prototype, "userSelected", {
             get: function () {
                 return this._userSelected;
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         Object.defineProperty(ChatViewComponent.prototype, "reported", {
             get: function () {
                 return this._reported;
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         Object.defineProperty(ChatViewComponent.prototype, "upvoted", {
             get: function () {
                 return this._upvoted;
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         ChatViewComponent.prototype.addMessage = function (message) {
@@ -7386,52 +7713,27 @@
             }
             return null;
         };
-        ChatViewComponent.ctorParameters = function () { return [
-            { type: core.ElementRef }
-        ]; };
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [Object])
-        ], ChatViewComponent.prototype, "source", null);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [])
-        ], ChatViewComponent.prototype, "selected", null);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [])
-        ], ChatViewComponent.prototype, "userSelected", null);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [])
-        ], ChatViewComponent.prototype, "reported", null);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [])
-        ], ChatViewComponent.prototype, "upvoted", null);
-        __decorate([
-            core.ViewChild('messageContainer'),
-            __metadata("design:type", core.ElementRef)
-        ], ChatViewComponent.prototype, "messageContainer", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Number)
-        ], ChatViewComponent.prototype, "maxMessages", void 0);
-        ChatViewComponent = __decorate([
-            core.Component({
-                selector: 'banta-chat-view',
-                template: "<div class=\"message-container\" #messageContainer>\r\n    <ng-content select=\"[data-before]\"></ng-content>\r\n    <banta-chat-message \r\n        *ngFor=\"let message of messages\"\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-content select=\":not([data-before])\"></ng-content>\r\n</div>",
-                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:2.5s flash;animation:2.5s flash}@-webkit-keyframes flash{0%{transform:scale(1);background:#425700}25%,75%{transform:scale(1.05)}100%,50%{transform:scale(1)}}@keyframes flash{0%{transform:scale(1);background:#425700}25%,75%{transform:scale(1.05)}100%,50%{transform:scale(1)}}"]
-            }),
-            __metadata("design:paramtypes", [core.ElementRef])
-        ], ChatViewComponent);
         return ChatViewComponent;
-    }());
+    }());
+    ChatViewComponent.decorators = [
+        { 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    <banta-chat-message \r\n        *ngFor=\"let message of messages\"\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-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)}}"]
+                },] }
+    ];
+    ChatViewComponent.ctorParameters = function () { return [
+        { type: core.ElementRef }
+    ]; };
+    ChatViewComponent.propDecorators = {
+        source: [{ type: core.Input }],
+        selected: [{ type: core.Output }],
+        userSelected: [{ type: core.Output }],
+        reported: [{ type: core.Output }],
+        upvoted: [{ type: core.Output }],
+        messageContainer: [{ type: core.ViewChild, args: ['messageContainer',] }],
+        maxMessages: [{ type: core.Input }]
+    };
 
     /**
      * Chat component
@@ -7469,7 +7771,7 @@
             set: function (value) {
                 this._source = value;
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         Object.defineProperty(BantaChatComponent.prototype, "topicID", {
@@ -7479,517 +7781,196 @@
             set: function (value) {
                 this.setSourceFromTopicID(value);
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         BantaChatComponent.prototype.setSourceFromTopicID = function (topicID) {
             return __awaiter(this, void 0, void 0, function () {
-                var _a;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0:
-                            if (this._source && this._source.close)
-                                this._source.close();
-                            this._source = null;
-                            _a = this;
-                            return [4 /*yield*/, this.backend.getSourceForTopic(topicID)];
-                        case 1:
-                            _a._source = _b.sent();
-                            return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        Object.defineProperty(BantaChatComponent.prototype, "signInSelected", {
-            get: function () {
-                return this._signInSelected;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(BantaChatComponent.prototype, "permissionDeniedError", {
-            get: function () {
-                return this._permissionDeniedError;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        BantaChatComponent.prototype.showSignIn = function () {
-            this._signInSelected.next();
-        };
-        BantaChatComponent.prototype.sendPermissionError = function () {
-            this._permissionDeniedError.next();
-        };
-        BantaChatComponent.prototype.insertEmoji = function (emoji) {
-            var message = this.newMessage.message || '';
-            this.newMessage.message = message + emoji;
-        };
-        BantaChatComponent.prototype.onKeyDown = function (event) {
-            // TODO
-        };
-        BantaChatComponent.prototype.jumpToMessage = function (message) {
-            if (this.chatView)
-                this.chatView.jumpTo(message);
-        };
-        BantaChatComponent.prototype.select = function (message) {
-            this._selected.next(message);
-        };
-        BantaChatComponent.prototype.selectUser = function (message) {
-            this._userSelected.next(message);
-        };
-        BantaChatComponent.prototype.report = function (message) {
-            this._reported.next(message);
-        };
-        BantaChatComponent.prototype.upvote = function (message) {
-            this._upvoted.next(message);
-        };
-        Object.defineProperty(BantaChatComponent.prototype, "selected", {
-            get: function () {
-                return this._selected;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(BantaChatComponent.prototype, "reported", {
-            get: function () {
-                return this._reported;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(BantaChatComponent.prototype, "upvoted", {
-            get: function () {
-                return this._upvoted;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(BantaChatComponent.prototype, "userSelected", {
-            get: function () {
-                return this._userSelected;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(BantaChatComponent.prototype, "canChat", {
-            get: function () {
-                var _a;
-                if (!this.user.permissions)
-                    return true;
-                return (_a = this.user.permissions) === null || _a === void 0 ? void 0 : _a.canChat(this.source);
-            },
-            enumerable: true,
-            configurable: true
-        });
-        BantaChatComponent.prototype.sendMessage = function () {
-            if (!this.source)
-                return;
-            var text = (this.newMessage.message || '').trim();
-            this.newMessage.message = '';
-            if (text === '')
-                return;
-            var message = {
-                user: null,
-                sentAt: Date.now(),
-                upvotes: 0,
-                message: text
-            };
-            this.source.send(message);
-        };
-        BantaChatComponent.ctorParameters = function () { return [
-            { type: BantaService },
-            { type: ChatBackendService },
-            { type: core.ElementRef }
-        ]; };
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [Object])
-        ], BantaChatComponent.prototype, "source", null);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", String),
-            __metadata("design:paramtypes", [Object])
-        ], BantaChatComponent.prototype, "topicID", null);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], BantaChatComponent.prototype, "signInLabel", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], BantaChatComponent.prototype, "sendLabel", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], BantaChatComponent.prototype, "permissionDeniedLabel", void 0);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", rxjs.Observable),
-            __metadata("design:paramtypes", [])
-        ], BantaChatComponent.prototype, "signInSelected", null);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", rxjs.Observable),
-            __metadata("design:paramtypes", [])
-        ], BantaChatComponent.prototype, "permissionDeniedError", null);
-        __decorate([
-            core.ViewChild('chatView', { static: true }),
-            __metadata("design:type", ChatViewComponent)
-        ], BantaChatComponent.prototype, "chatView", void 0);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [])
-        ], BantaChatComponent.prototype, "selected", null);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [])
-        ], BantaChatComponent.prototype, "reported", null);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [])
-        ], BantaChatComponent.prototype, "upvoted", null);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [])
-        ], BantaChatComponent.prototype, "userSelected", null);
-        BantaChatComponent = __decorate([
-            core.Component({
-                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{display:flex;flex-direction:column;border-radius:5px;padding:10px;flex-grow:1;font-size:10pt}.entry-container{display:flex;flex-direction:row;flex-grow:1;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:#9da302 solid 1px;-webkit-text-fill-color:#9da302;-webkit-box-shadow:0 0 0 1000px #211e07 inset;-webkit-transition:background-color 5000s ease-in-out;transition:background-color 5000s ease-in-out;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:initial}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}"]
-            }),
-            __metadata("design:paramtypes", [BantaService,
-                ChatBackendService,
-                core.ElementRef])
-        ], BantaChatComponent);
-        return BantaChatComponent;
-    }());
-
-    var COMPONENTS$2 = [
-        ChatMessageComponent,
-        LiveChatMessageComponent,
-        ChatViewComponent,
-        BantaChatComponent
-    ];
-    var ChatModule = /** @class */ (function () {
-        function ChatModule() {
-        }
-        ChatModule = __decorate([
-            core.NgModule({
-                declarations: COMPONENTS$2,
-                imports: [
-                    common.CommonModule,
-                    forms.FormsModule,
-                    icon.MatIconModule,
-                    button.MatButtonModule,
-                    EmojiModule
-                ],
-                exports: COMPONENTS$2
-            })
-        ], ChatModule);
-        return ChatModule;
-    }());
-
-    /**
-     * Unified chat and comments component
-     */
-    var BantaComponent = /** @class */ (function () {
-        function BantaComponent(banta, backend, matDialog) {
-            this.banta = banta;
-            this.backend = backend;
-            this.matDialog = matDialog;
-            this._subs = new subsink.SubSink();
-            this.auxOpen = false;
-            this.auxTitle = 'Notifications';
-            this.auxMode = 'notifications';
-            this.mobileFocus = null;
-            this.newNotifications = false;
-            this.chatLabel = 'Chat';
-            this.commentsLabel = 'Comments';
-            this._signInSelected = new rxjs.Subject();
-            this.pointOpen = null;
-            this.pointSubChat = null;
-            this.newPointSubMessage = {};
-            this.genericAvatarUrl = 'https://gravatar.com/avatar/915c804e0be607a4ad766ddadea5c48a?s=512&d=https://codepen.io/assets/avatars/user-avatar-512x512-6e240cf350d2f1cc07c2bed234c3a3bb5f1b237023c204c782622e80d6b212ba.png';
-            // this.firehoseSource = new MockFirehoseSource();
-            // this.pointSource = new MockPointSource();
-        }
-        BantaComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this._subs.add(this.banta.userChanged.subscribe(function (user) { return _this.currentUser = user; }), this.backend.notificationsChanged.subscribe(function (notifs) { return _this.notifications = notifs; }), this.backend.newNotification.subscribe(function (notif) {
-                _this.newNotifications = true;
-            }));
-        };
-        BantaComponent.prototype.newPointSubMessageKeyDown = function (event) {
-            // TODO
-        };
-        BantaComponent.prototype.sendPointSubMessage = function () {
-            return __awaiter(this, void 0, void 0, function () {
-                var text, message, e_1;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            text = (this.newPointSubMessage.message || '').trim();
-                            this.newPointSubMessage.message = '';
-                            if (text === '')
-                                return [2 /*return*/];
-                            message = {
-                                user: null,
-                                sentAt: Date.now(),
-                                upvotes: 0,
-                                message: text
-                            };
-                            _a.label = 1;
-                        case 1:
-                            _a.trys.push([1, 3, , 4]);
-                            return [4 /*yield*/, this.pointSubChat.send(message)];
-                        case 2:
-                            _a.sent();
-                            return [3 /*break*/, 4];
-                        case 3:
-                            e_1 = _a.sent();
-                            console.error("Failed to send point sub-message:");
-                            console.error(e_1);
-                            return [3 /*break*/, 4];
-                        case 4: return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        BantaComponent.prototype.goToMessage = function (message) {
-            return __awaiter(this, void 0, void 0, function () {
-                var targetMessage, parentMessage, viewType, _a, _b;
+                var _b;
                 return __generator(this, function (_c) {
                     switch (_c.label) {
                         case 0:
-                            targetMessage = message;
-                            if (!message.parentMessageId) return [3 /*break*/, 2];
-                            return [4 /*yield*/, this.backend.getMessage(message.topicId, message.parentMessageId)];
-                        case 1:
-                            parentMessage = _c.sent();
-                            if (!parentMessage) {
-                                console.error("Failed to look up parent message " + message.topicId + "/" + message.parentMessageId);
-                                console.error("Original message was:");
-                                console.dir(targetMessage);
-                                return [2 /*return*/];
-                            }
-                            message = parentMessage;
-                            _c.label = 2;
-                        case 2:
-                            viewType = this.getViewType(message);
-                            if (!(viewType === 'comment')) return [3 /*break*/, 5];
-                            if (this.pointSubChat) {
-                                if (this.pointSubChat.close)
-                                    this.pointSubChat.close();
-                                this.pointSubChat = null;
-                            }
-                            this.mobileFocus = 'points';
-                            this.pointOpen = message;
-                            _a = this;
-                            return [4 /*yield*/, this.backend.getSourceForThread(message.topicId, message.id)];
-                        case 3:
-                            _a.pointSubChat = _c.sent();
-                            _b = this;
-                            return [4 /*yield*/, this.backend.refreshMessage(message)];
-                        case 4:
-                            _b.pointOpen = _c.sent();
-                            this.newPointSubMessage = {};
-                            return [3 /*break*/, 6];
-                        case 5:
-                            if (viewType === 'chat') {
-                                this.mobileFocus = 'firehose';
-                                this.firehose.jumpToMessage(message);
-                            }
-                            _c.label = 6;
-                        case 6: return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        BantaComponent.prototype.pointUnfocus = function () {
-            this.pointOpen = null;
-            if (this.pointSubChat) {
-                if (this.pointSubChat.close)
-                    this.pointSubChat.close();
-                this.pointSubChat = null;
-            }
-        };
-        BantaComponent.prototype.ngOnDestroy = function () {
-            this._subs.unsubscribe();
-        };
-        BantaComponent.prototype.showAux = function (title, mode) {
-            this.auxOpen = true;
-            this.auxTitle = title;
-            this.auxMode = mode;
-            this.mobileFocus = 'aux';
-        };
-        BantaComponent.prototype.showNotifications = function () {
-            this.showAux('Notifications', 'notifications');
-        };
-        Object.defineProperty(BantaComponent.prototype, "topicID", {
-            get: function () {
-                return this._topicID;
-            },
-            set: function (value) {
-                this._topicID = value;
-                this.close();
-                this.connectToTopic(this._topicID);
-            },
-            enumerable: true,
-            configurable: true
-        });
-        BantaComponent.prototype.connectToTopic = function (id) {
-            return __awaiter(this, void 0, void 0, function () {
-                var _a, _b;
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
-                        case 0:
-                            _a = this;
-                            return [4 /*yield*/, this.backend.getSourceForTopic(id + "_firehose")];
-                        case 1:
-                            _a.firehoseSource = _c.sent();
-                            _b = this;
-                            return [4 /*yield*/, this.backend.getSourceForTopic(id + "_thepoint")];
-                        case 2:
-                            _b.pointSource = _c.sent();
+                            if (this._source && this._source.close)
+                                this._source.close();
+                            this._source = null;
+                            _b = this;
+                            return [4 /*yield*/, this.backend.getSourceForTopic(topicID)];
+                        case 1:
+                            _b._source = _c.sent();
                             return [2 /*return*/];
                     }
                 });
             });
         };
-        Object.defineProperty(BantaComponent.prototype, "signInSelected", {
+        Object.defineProperty(BantaChatComponent.prototype, "signInSelected", {
             get: function () {
                 return this._signInSelected;
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
-        BantaComponent.prototype.showSignIn = function () {
+        Object.defineProperty(BantaChatComponent.prototype, "permissionDeniedError", {
+            get: function () {
+                return this._permissionDeniedError;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        BantaChatComponent.prototype.showSignIn = function () {
             this._signInSelected.next();
         };
-        BantaComponent.prototype.close = function () {
-            if (this.firehoseSource) {
-                if (this.firehoseSource.close)
-                    this.firehoseSource.close();
-                this.firehoseSource = null;
-            }
-            if (this.pointSource) {
-                if (this.pointSource.close)
-                    this.pointSource.close();
-                this.pointSource = null;
-            }
+        BantaChatComponent.prototype.sendPermissionError = function () {
+            this._permissionDeniedError.next();
         };
-        Object.defineProperty(BantaComponent.prototype, "hasPoint", {
+        BantaChatComponent.prototype.insertEmoji = function (emoji) {
+            var message = this.newMessage.message || '';
+            this.newMessage.message = message + emoji;
+        };
+        BantaChatComponent.prototype.onKeyDown = function (event) {
+            // TODO
+        };
+        BantaChatComponent.prototype.jumpToMessage = function (message) {
+            if (this.chatView)
+                this.chatView.jumpTo(message);
+        };
+        BantaChatComponent.prototype.select = function (message) {
+            this._selected.next(message);
+        };
+        BantaChatComponent.prototype.selectUser = function (message) {
+            this._userSelected.next(message);
+        };
+        BantaChatComponent.prototype.report = function (message) {
+            this._reported.next(message);
+        };
+        BantaChatComponent.prototype.upvote = function (message) {
+            this._upvoted.next(message);
+        };
+        Object.defineProperty(BantaChatComponent.prototype, "selected", {
             get: function () {
-                return this.pointOpen != null;
+                return this._selected;
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
-        BantaComponent.prototype.closeAux = function () {
-            this.auxOpen = false;
-            this.mobileFocus = 'firehose';
-        };
-        BantaComponent.prototype.getViewType = function (message) {
-            if (message.topicId.endsWith('_firehose'))
-                return 'chat';
-            else if (message.topicId.endsWith('_thepoint'))
-                return 'comment';
-            return 'comment';
-        };
-        BantaComponent.prototype.upvoteMessage = function (message) {
+        Object.defineProperty(BantaChatComponent.prototype, "reported", {
+            get: function () {
+                return this._reported;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(BantaChatComponent.prototype, "upvoted", {
+            get: function () {
+                return this._upvoted;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(BantaChatComponent.prototype, "userSelected", {
+            get: function () {
+                return this._userSelected;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(BantaChatComponent.prototype, "canChat", {
+            get: function () {
+                var _a;
+                if (!this.user.permissions)
+                    return true;
+                return (_a = this.user.permissions) === null || _a === void 0 ? void 0 : _a.canChat(this.source);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        BantaChatComponent.prototype.sendMessage = function () {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                var text, message, e_1;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
                         case 0:
-                            if (!message.parentMessageId) return [3 /*break*/, 2];
-                            return [4 /*yield*/, this.backend.upvoteMessage(message.topicId, message.parentMessageId, message.id)];
+                            if (!this.source)
+                                return [2 /*return*/];
+                            text = (this.newMessage.message || '').trim();
+                            this.newMessage.message = '';
+                            if (text === '')
+                                return [2 /*return*/];
+                            message = {
+                                user: null,
+                                sentAt: Date.now(),
+                                upvotes: 0,
+                                message: text
+                            };
+                            _b.label = 1;
                         case 1:
-                            _a.sent();
+                            _b.trys.push([1, 3, , 4]);
+                            return [4 /*yield*/, this.source.send(message)];
+                        case 2:
+                            _b.sent();
                             return [3 /*break*/, 4];
-                        case 2: return [4 /*yield*/, this.backend.upvoteMessage(message.topicId, message.id)];
                         case 3:
-                            _a.sent();
-                            _a.label = 4;
+                            e_1 = _b.sent();
+                            console.error("Failed to send message: ", message);
+                            console.error(e_1);
+                            return [3 /*break*/, 4];
                         case 4: return [2 /*return*/];
                     }
                 });
             });
         };
-        BantaComponent.prototype.showProfile = function (user) {
-            this.profileUser = user;
-            this.showAux("@" + user.username + "'s Profile", 'profile');
-        };
-        BantaComponent.prototype.sendReport = function (message) {
-            this.auxOpen = false;
-            alert('would send report');
-        };
-        BantaComponent.prototype.reportMessage = function (message) {
-            this.reportedMessage = message;
-            this.showAux("Report message from @" + message.user.username, 'report');
-        };
-        BantaComponent.ctorParameters = function () { return [
-            { type: BantaService },
-            { type: ChatBackendService },
-            { type: dialog.MatDialog }
-        ]; };
-        __decorate([
-            core.ViewChild('firehose', { static: true }),
-            __metadata("design:type", BantaChatComponent)
-        ], BantaComponent.prototype, "firehose", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", String),
-            __metadata("design:paramtypes", [Object])
-        ], BantaComponent.prototype, "topicID", null);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], BantaComponent.prototype, "chatLabel", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], BantaComponent.prototype, "commentsLabel", void 0);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", rxjs.Observable),
-            __metadata("design:paramtypes", [])
-        ], BantaComponent.prototype, "signInSelected", null);
-        __decorate([
-            core.HostBinding('class.point-focus'),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [])
-        ], BantaComponent.prototype, "hasPoint", null);
-        BantaComponent = __decorate([
-            core.Component({
-                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\r\n                <pre>{{profileUser | json}}</pre>\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;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;display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;position:relative;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}header:after{content:\"\";border:1px solid #ccc;height:0;width:100%;display:block;position:relative;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:initial}: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{flex-grow:1;display:flex;flex-direction:column;opacity:1;transition:opacity .2s ease-in;z-index:2}.points .point-focus{position:absolute;width:100%;bottom:0;top:1.75em;right:0;left:0;padding:.5em;opacity:0;transition:opacity .2s ease-in;flex-grow:1;display:flex;flex-direction:column}.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;background:#000;color:#fff;border:1px solid #333;min-height:6em;width:100%}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}.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}:host.point-focus .points{width:100%;max-width:100%}.aux{width:100%;min-width:initial;max-width:100%}.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}"]
-            }),
-            __metadata("design:paramtypes", [BantaService,
-                ChatBackendService,
-                dialog.MatDialog])
-        ], BantaComponent);
-        return BantaComponent;
-    }());
+        return BantaChatComponent;
+    }());
+    BantaChatComponent.decorators = [
+        { 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}"]
+                },] }
+    ];
+    BantaChatComponent.ctorParameters = function () { return [
+        { type: BantaService },
+        { type: ChatBackendService },
+        { type: core.ElementRef }
+    ]; };
+    BantaChatComponent.propDecorators = {
+        source: [{ type: core.Input }],
+        topicID: [{ type: core.Input }],
+        signInLabel: [{ type: core.Input }],
+        sendLabel: [{ type: core.Input }],
+        permissionDeniedLabel: [{ type: core.Input }],
+        signInSelected: [{ type: core.Output }],
+        permissionDeniedError: [{ type: core.Output }],
+        chatView: [{ type: core.ViewChild, args: ['chatView', { static: true },] }],
+        selected: [{ type: core.Output }],
+        reported: [{ type: core.Output }],
+        upvoted: [{ type: core.Output }],
+        userSelected: [{ type: core.Output }]
+    };
 
-    var BantaLogoComponent = /** @class */ (function () {
-        function BantaLogoComponent() {
+    var COMPONENTS$2 = [
+        ChatMessageComponent,
+        LiveChatMessageComponent,
+        ChatViewComponent,
+        BantaChatComponent
+    ];
+    var ChatModule = /** @class */ (function () {
+        function ChatModule() {
         }
-        BantaLogoComponent = __decorate([
-            core.Component({
-                selector: 'banta-logo',
-                template: "banta",
-                styles: ["\n        :host {\n            font-family: 'Odibee Sans', sans-serif;\n            font-size: 40pt;\n        }\n\n        :host.small {\n            font-size: 30pt;\n        }\n        "]
-            })
-        ], BantaLogoComponent);
-        return BantaLogoComponent;
-    }());
+        return ChatModule;
+    }());
+    ChatModule.decorators = [
+        { type: core.NgModule, args: [{
+                    declarations: COMPONENTS$2,
+                    imports: [
+                        common.CommonModule,
+                        forms.FormsModule,
+                        icon.MatIconModule,
+                        button.MatButtonModule,
+                        EmojiModule
+                    ],
+                    exports: COMPONENTS$2
+                },] }
+    ];
 
     var LiveMessageComponent = /** @class */ (function () {
         function LiveMessageComponent() {
@@ -8001,21 +7982,21 @@
             get: function () {
                 return this._upvoted;
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         Object.defineProperty(LiveMessageComponent.prototype, "reported", {
             get: function () {
                 return this._reported;
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         Object.defineProperty(LiveMessageComponent.prototype, "selected", {
             get: function () {
                 return this._selected;
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         Object.defineProperty(LiveMessageComponent.prototype, "message", {
@@ -8026,7 +8007,7 @@
                 this._message = value;
                 this.viewType = this.getViewType(value);
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         LiveMessageComponent.prototype.getViewType = function (message) {
@@ -8045,36 +8026,22 @@
         LiveMessageComponent.prototype.select = function () {
             this._selected.next();
         };
-        __decorate([
-            core.Output(),
-            __metadata("design:type", rxjs.Observable),
-            __metadata("design:paramtypes", [])
-        ], LiveMessageComponent.prototype, "upvoted", null);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", rxjs.Observable),
-            __metadata("design:paramtypes", [])
-        ], LiveMessageComponent.prototype, "reported", null);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", rxjs.Observable),
-            __metadata("design:paramtypes", [])
-        ], LiveMessageComponent.prototype, "selected", null);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [Object])
-        ], LiveMessageComponent.prototype, "message", null);
-        LiveMessageComponent = __decorate([
-            core.Component({
-                selector: 'banta-live-message',
-                template: "\n        <ng-container *ngIf=\"message\">\n            <banta-live-chat-message\n                *ngIf=\"viewType === 'chat'\"\n                [message]=\"message\"\n                (upvoted)=\"upvote(message)\"\n                (reported)=\"report(message)\"\n                (selected)=\"select(message)\">\n            </banta-live-chat-message>\n\n            <banta-live-comment \n                *ngIf=\"viewType === 'comment'\"\n                [message]=\"message\"\n                (upvoted)=\"upvote(message)\"\n                (reported)=\"report(message)\"\n                (selected)=\"select(message)\">\n            </banta-live-comment>\n        </ng-container>\n    ",
-                styles: [""]
-            }),
-            __metadata("design:paramtypes", [])
-        ], LiveMessageComponent);
         return LiveMessageComponent;
-    }());
+    }());
+    LiveMessageComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'banta-live-message',
+                    template: "\n        <ng-container *ngIf=\"message\">\n            <banta-live-chat-message\n                *ngIf=\"viewType === 'chat'\"\n                [message]=\"message\"\n                (upvoted)=\"upvote(message)\"\n                (reported)=\"report(message)\"\n                (selected)=\"select(message)\">\n            </banta-live-chat-message>\n\n            <banta-live-comment \n                *ngIf=\"viewType === 'comment'\"\n                [message]=\"message\"\n                (upvoted)=\"upvote(message)\"\n                (reported)=\"report(message)\"\n                (selected)=\"select(message)\">\n            </banta-live-comment>\n        </ng-container>\n    ",
+                    styles: [""]
+                },] }
+    ];
+    LiveMessageComponent.ctorParameters = function () { return []; };
+    LiveMessageComponent.propDecorators = {
+        upvoted: [{ type: core.Output }],
+        reported: [{ type: core.Output }],
+        selected: [{ type: core.Output }],
+        message: [{ type: core.Input }]
+    };
 
     var CommentComponent = /** @class */ (function () {
         function CommentComponent() {
@@ -8088,28 +8055,28 @@
             get: function () {
                 return this._userSelected;
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         Object.defineProperty(CommentComponent.prototype, "reported", {
             get: function () {
                 return this._reported;
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         Object.defineProperty(CommentComponent.prototype, "upvoted", {
             get: function () {
                 return this._upvoted;
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         Object.defineProperty(CommentComponent.prototype, "selected", {
             get: function () {
                 return this._selected;
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         CommentComponent.prototype.report = function () {
@@ -8131,83 +8098,71 @@
             }
             return null;
         };
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], CommentComponent.prototype, "message", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], CommentComponent.prototype, "showReplyAction", void 0);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [])
-        ], CommentComponent.prototype, "userSelected", null);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [])
-        ], CommentComponent.prototype, "reported", null);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [])
-        ], CommentComponent.prototype, "upvoted", null);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [])
-        ], CommentComponent.prototype, "selected", null);
-        CommentComponent = __decorate([
-            core.Component({
-                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        <div class=\"avatar\" \r\n            (click)=\"selectUser()\"\r\n            [style.background-image]=\"avatarForUser(message.user)\"></div>\r\n        <label class=\"display-name\" (click)=\"selectUser()\">{{message.user.displayName}}</label>\r\n        <label class=\"username\" (click)=\"selectUser()\">@{{message.user.username}}</label>\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 class=\"content\" (click)=\"select()\">\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    </div>\r\n</div>\r\n",
-                styles: [":host{display:flex;flex-direction:column;position:relative;padding:.5em}:host:hover{background:#eee}:host .message-content .content{margin-left:4em;margin-right:3em}:host.abbreviated .message-content .content{max-height:8.5em;text-overflow:ellipsis;overflow-y:hidden}:host .actions{display:flex;padding-right:10px;margin-left:4em;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 label{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 label.username{color:#666;flex-shrink:0;flex-grow:1}.avatar{height:3em;width:3em;background-position:center;background-size:cover;background-color:#333;border-radius:100%;flex-shrink:0;flex-grow:0}.counted-action{display:flex;align-items:center}.count-indicator{font-size:9pt;padding:0 3px;border-radius:3px;border:1px solid #ccc;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 label{color:#fff}"]
-            })
-        ], CommentComponent);
         return CommentComponent;
-    }());
+    }());
+    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        <div class=\"avatar\" \r\n            (click)=\"selectUser()\"\r\n            [style.background-image]=\"avatarForUser(message.user)\"></div>\r\n        <label class=\"display-name\" (click)=\"selectUser()\">{{message.user.displayName}}</label>\r\n        <label class=\"username\" (click)=\"selectUser()\">@{{message.user.username}}</label>\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 class=\"content\" (click)=\"select()\">\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    </div>\r\n</div>\r\n",
+                    styles: [":host{display:flex;flex-direction:column;padding:.5em;position:relative}:host:hover{background:#eee}:host .message-content .content{margin-left:4em;margin-right:3em}:host.abbreviated .message-content .content{max-height:8.5em;overflow-y:hidden;text-overflow:ellipsis}:host .actions{align-items:center;display:flex;margin-left:4em;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 label{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 label.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:3em;width:3em}.counted-action{align-items:center;display:flex}.count-indicator{border:1px solid #ccc;border-radius:3px;color:#666;font-size:9pt;padding: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 label{color:#fff}"]
+                },] }
+    ];
+    CommentComponent.propDecorators = {
+        message: [{ type: core.Input }],
+        showReplyAction: [{ type: core.Input }],
+        userSelected: [{ type: core.Output }],
+        reported: [{ type: core.Output }],
+        upvoted: [{ type: core.Output }],
+        selected: [{ type: core.Output }]
+    };
 
     var CommentViewComponent = /** @class */ (function () {
-        function CommentViewComponent() {
+        function CommentViewComponent(backend) {
+            this.backend = backend;
             this._sourceSubs = new subsink.SubSink();
             this._selected = new rxjs.Subject();
             this._upvoted = new rxjs.Subject();
             this._reported = new rxjs.Subject();
             this._userSelected = new rxjs.Subject();
+            this.showEmptyState = true;
             this.allowReplies = true;
             this.menuMessage = null;
             this.messages = [];
-            this.maxMessages = 200;
+            this.maxMessages = 2000;
+            this.maxVisibleMessages = 200;
             this.newestLast = false;
+            this.isViewingMore = false;
+            this.isLoadingMore = false;
+            this.hasMore = false;
+            this.newMessages = [];
+            this.olderMessages = [];
         }
         Object.defineProperty(CommentViewComponent.prototype, "selected", {
             get: function () {
                 return this._selected;
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         Object.defineProperty(CommentViewComponent.prototype, "userSelected", {
             get: function () {
                 return this._userSelected;
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         Object.defineProperty(CommentViewComponent.prototype, "reported", {
             get: function () {
                 return this._reported;
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         Object.defineProperty(CommentViewComponent.prototype, "upvoted", {
             get: function () {
                 return this._upvoted;
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         Object.defineProperty(CommentViewComponent.prototype, "source", {
@@ -8222,9 +8177,11 @@
                 }
                 this._source = value;
                 if (value) {
-                    var messages = value.messages || [];
+                    var messages = (value.messages || []).slice();
+                    this.messages = messages;
+                    this.olderMessages = messages.splice(this.maxVisibleMessages, messages.length);
+                    this.hasMore = this.olderMessages.length > 0;
                     this._sourceSubs = new subsink.SubSink();
-                    this.messages = messages.slice();
                     this._sourceSubs.add(this._source.messageReceived
                         .subscribe(function (msg) { return _this.messageReceived(msg); }), this._source.messageSent
                         .subscribe(function (msg) { return _this.messageSent(msg); }));
@@ -8233,7 +8190,7 @@
                     }
                 }
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         CommentViewComponent.prototype.upvoteMessage = function (message) {
@@ -8243,22 +8200,82 @@
             this._reported.next(message);
         };
         CommentViewComponent.prototype.selectMessage = function (message) {
-            this._selected.next(message);
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    this._selected.next(message);
+                    return [2 /*return*/];
+                });
+            });
         };
         CommentViewComponent.prototype.selectMessageUser = function (message) {
             this._userSelected.next(message);
         };
+        CommentViewComponent.prototype.messageIdentity = function (chatMessage) {
+            return chatMessage.id;
+        };
+        CommentViewComponent.prototype.showNew = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var overflow;
+                return __generator(this, function (_a) {
+                    this.isViewingMore = false;
+                    this.messages = this.newMessages.splice(0, this.newMessages.length).concat(this.messages);
+                    overflow = this.messages.splice(this.maxVisibleMessages, this.messages.length);
+                    this.olderMessages = overflow.concat(this.olderMessages);
+                    this.olderMessages.splice(this.maxMessages - this.maxVisibleMessages, this.olderMessages.length);
+                    return [2 /*return*/];
+                });
+            });
+        };
+        CommentViewComponent.prototype.showMore = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var lastMessage, messages;
+                return __generator(this, function (_a) {
+                    switch (_a.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];
+                        case 1:
+                            if (!this.source.loadAfter) return [3 /*break*/, 3];
+                            this.isLoadingMore = true;
+                            lastMessage = this.messages[this.messages.length - 1];
+                            return [4 /*yield*/, this.source.loadAfter(lastMessage, 100)];
+                        case 2:
+                            messages = _a.sent();
+                            this.messages = this.messages.concat(messages);
+                            this.isLoadingMore = false;
+                            if (messages.length === 0)
+                                this.hasMore = false;
+                            return [3 /*break*/, 4];
+                        case 3:
+                            this.hasMore = false;
+                            _a.label = 4;
+                        case 4: return [2 /*return*/];
+                    }
+                });
+            });
+        };
         CommentViewComponent.prototype.addMessage = function (message) {
+            var destination = this.messages;
+            var bucket = this.olderMessages;
+            if (this.isViewingMore) {
+                destination = this.newMessages;
+                bucket = null;
+            }
             if (this.newestLast) {
-                while (this.messages.length + 1 > this.maxMessages)
-                    this.messages.shift();
-                this.messages.push(message);
+                destination.push(message);
+                var overflow = destination.splice(this.maxVisibleMessages, destination.length);
+                bucket === null || bucket === void 0 ? void 0 : bucket.push.apply(bucket, __spread(overflow));
             }
             else {
-                while (this.messages.length + 1 > this.maxMessages)
-                    this.messages.pop();
-                this.messages.unshift(message);
+                destination.unshift(message);
+                var overflow = destination.splice(this.maxVisibleMessages, destination.length);
+                bucket === null || bucket === void 0 ? void 0 : bucket.unshift.apply(bucket, __spread(overflow));
             }
+            if ((bucket === null || bucket === void 0 ? void 0 : bucket.length) > 0)
+                this.hasMore = true;
         };
         CommentViewComponent.prototype.messageReceived = function (message) {
             var _this = this;
@@ -8299,61 +8316,33 @@
                 url = user.avatarUrl;
             return "url(" + url + ")";
         };
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], CommentViewComponent.prototype, "allowReplies", void 0);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [])
-        ], CommentViewComponent.prototype, "selected", null);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [])
-        ], CommentViewComponent.prototype, "userSelected", null);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [])
-        ], CommentViewComponent.prototype, "reported", null);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [])
-        ], CommentViewComponent.prototype, "upvoted", null);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [Object])
-        ], CommentViewComponent.prototype, "source", null);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", String)
-        ], CommentViewComponent.prototype, "genericAvatarUrl", void 0);
-        __decorate([
-            core.ViewChild('messageContainer'),
-            __metadata("design:type", core.ElementRef)
-        ], CommentViewComponent.prototype, "messageContainer", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], CommentViewComponent.prototype, "maxMessages", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], CommentViewComponent.prototype, "newestLast", void 0);
-        CommentViewComponent = __decorate([
-            core.Component({
-                selector: 'banta-comment-view',
-                template: "<div class=\"message-container\">\r\n    <ng-content select=\"[data-before]\"></ng-content>\r\n    <banta-comment \r\n        *ngFor=\"let message of messages\"\r\n        class=\"abbreviated\"\r\n        [message]=\"message\"\r\n        [showReplyAction]=\"allowReplies\"\r\n        (userSelected)=\"selectMessageUser(message)\"\r\n        (upvoted)=\"upvoteMessage(message)\"\r\n        (reported)=\"reportMessage(message)\"\r\n        (selected)=\"selectMessage(message)\"\r\n        ></banta-comment>\r\n    <ng-content select=\":not([data-before])\"></ng-content>\r\n</div>",
-                styles: [":host{flex-grow:1;display:flex;flex-direction:column;opacity:1;transition:opacity .2s ease-in}.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}"]
-            }),
-            __metadata("design:paramtypes", [])
-        ], CommentViewComponent);
         return CommentViewComponent;
-    }());
+    }());
+    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\" *ngIf=\"isViewingMore\" href=\"javascript:;\" (click)=\"showNew()\">\r\n        Show \r\n        <ng-container *ngIf=\"newMessages.length === 1\">\r\n            {{newMessages.length}} new message\r\n        </ng-container>\r\n        <ng-container *ngIf=\"newMessages.length > 1\">\r\n            {{newMessages.length}} new messages\r\n        </ng-container>\r\n        <ng-container *ngIf=\"newMessages.length === 0\">\r\n            new messages\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    <banta-comment \r\n        *ngFor=\"let message of messages; trackBy: messageIdentity\"\r\n        class=\"abbreviated\"\r\n        [message]=\"message\"\r\n        [showReplyAction]=\"allowReplies\"\r\n        (userSelected)=\"selectMessageUser(message)\"\r\n        (upvoted)=\"upvoteMessage(message)\"\r\n        (reported)=\"reportMessage(message)\"\r\n        (selected)=\"selectMessage(message)\"\r\n        ></banta-comment>\r\n\r\n    <a mat-button class=\"nav\" *ngIf=\"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>",
+                    styles: [":host{display:flex;flex-direction:column;flex-grow:1;opacity:1;transition:opacity .2s ease-in}.message-container{background:#fff;color:#000;flex-grow:1;opacity:1;overflow-x:hidden;padding:.5em 1em .5em .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:#000;color:#fff}.empty-state{color:#666;margin:3em;text-align:center}:host-context(.mat-dark-theme) .empty-state{color:#666}a.nav{text-transform:uppercase;width:100%}.loading-more,a.nav{padding:2em;text-align:center}.loading-more{margin:0 auto;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}"]
+                },] }
+    ];
+    CommentViewComponent.ctorParameters = function () { return [
+        { type: ChatBackendService }
+    ]; };
+    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 }],
+        userSelected: [{ type: core.Output }],
+        reported: [{ type: core.Output }],
+        upvoted: [{ 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 }]
+    };
 
     /**
      * Comments component
@@ -8387,7 +8376,7 @@
             set: function (value) {
                 this._source = value;
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         Object.defineProperty(BantaCommentsComponent.prototype, "topicID", {
@@ -8397,22 +8386,22 @@
             set: function (value) {
                 this.setSourceFromTopicID(value);
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         BantaCommentsComponent.prototype.setSourceFromTopicID = function (topicID) {
             return __awaiter(this, void 0, void 0, function () {
-                var _a;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                var _b;
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
                         case 0:
                             if (this._source && this._source.close)
                                 this._source.close();
                             this._source = null;
-                            _a = this;
+                            _b = this;
                             return [4 /*yield*/, this.backend.getSourceForTopic(topicID)];
                         case 1:
-                            _a._source = _b.sent();
+                            _b._source = _c.sent();
                             return [2 /*return*/];
                     }
                 });
@@ -8425,14 +8414,14 @@
             get: function () {
                 return this._signInSelected;
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         Object.defineProperty(BantaCommentsComponent.prototype, "permissionDeniedError", {
             get: function () {
                 return this._permissionDeniedError;
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         BantaCommentsComponent.prototype.showPermissionDenied = function () {
@@ -8445,35 +8434,35 @@
                     return true;
                 return (_a = this.user.permissions) === null || _a === void 0 ? void 0 : _a.canComment(this.source);
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         Object.defineProperty(BantaCommentsComponent.prototype, "upvoted", {
             get: function () {
                 return this._upvoted;
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         Object.defineProperty(BantaCommentsComponent.prototype, "reported", {
             get: function () {
                 return this._reported;
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         Object.defineProperty(BantaCommentsComponent.prototype, "selected", {
             get: function () {
                 return this._selected;
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         Object.defineProperty(BantaCommentsComponent.prototype, "userSelected", {
             get: function () {
                 return this._userSelected;
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         BantaCommentsComponent.prototype.onKeyDown = function (event) {
@@ -8481,20 +8470,45 @@
         BantaCommentsComponent.prototype.insertEmoji = function (text) {
             this.newMessageText += text;
         };
+        BantaCommentsComponent.prototype.onReplyKeyDown = function (event) {
+        };
+        BantaCommentsComponent.prototype.insertReplyEmoji = function (text) {
+            this.replyMessage += text;
+        };
         BantaCommentsComponent.prototype.sendMessage = function () {
-            if (!this.source)
-                return;
-            var text = (this.newMessageText || '').trim();
-            this.newMessageText = '';
-            if (text === '')
-                return;
-            var message = {
-                user: this.user,
-                sentAt: Date.now(),
-                upvotes: 0,
-                message: text
-            };
-            this.source.send(message);
+            return __awaiter(this, void 0, void 0, function () {
+                var text, message, e_1;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            if (!this.source)
+                                return [2 /*return*/];
+                            text = (this.newMessageText || '').trim();
+                            this.newMessageText = '';
+                            if (text === '')
+                                return [2 /*return*/];
+                            message = {
+                                user: this.user,
+                                sentAt: Date.now(),
+                                upvotes: 0,
+                                message: text
+                            };
+                            _b.label = 1;
+                        case 1:
+                            _b.trys.push([1, 3, , 4]);
+                            return [4 /*yield*/, this.source.send(message)];
+                        case 2:
+                            _b.sent();
+                            return [3 /*break*/, 4];
+                        case 3:
+                            e_1 = _b.sent();
+                            console.error("Failed to send message: ", message);
+                            console.error(e_1);
+                            return [3 /*break*/, 4];
+                        case 4: return [2 /*return*/];
+                    }
+                });
+            });
         };
         BantaCommentsComponent.prototype.upvoteMessage = function (message) {
             this._upvoted.next(message);
@@ -8502,79 +8516,92 @@
         BantaCommentsComponent.prototype.reportMessage = function (message) {
             this._reported.next(message);
         };
+        BantaCommentsComponent.prototype.unselectMessage = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_b) {
+                    this._selected.next(null);
+                    this.selectedMessage = null;
+                    if (this.selectedMessageThread) {
+                        if (this.selectedMessageThread.close)
+                            this.selectedMessageThread.close();
+                        this.selectedMessageThread = null;
+                    }
+                    return [2 /*return*/];
+                });
+            });
+        };
         BantaCommentsComponent.prototype.selectMessage = function (message) {
-            this._selected.next(message);
+            return __awaiter(this, void 0, void 0, function () {
+                var _b;
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0:
+                            this._selected.next(message);
+                            this.selectedMessage = message;
+                            _b = this;
+                            return [4 /*yield*/, this.backend.getSourceForThread(this.topicID, message.id)];
+                        case 1:
+                            _b.selectedMessageThread = _c.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            });
         };
         BantaCommentsComponent.prototype.selectMessageUser = function (message) {
             this._userSelected.next(message);
         };
-        BantaCommentsComponent.ctorParameters = function () { return [
-            { type: BantaService },
-            { type: ChatBackendService }
-        ]; };
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [Object])
-        ], BantaCommentsComponent.prototype, "source", null);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", String),
-            __metadata("design:paramtypes", [Object])
-        ], BantaCommentsComponent.prototype, "topicID", null);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], BantaCommentsComponent.prototype, "signInLabel", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], BantaCommentsComponent.prototype, "sendLabel", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], BantaCommentsComponent.prototype, "permissionDeniedLabel", void 0);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", rxjs.Observable),
-            __metadata("design:paramtypes", [])
-        ], BantaCommentsComponent.prototype, "signInSelected", null);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", rxjs.Observable),
-            __metadata("design:paramtypes", [])
-        ], BantaCommentsComponent.prototype, "permissionDeniedError", null);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [])
-        ], BantaCommentsComponent.prototype, "upvoted", null);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [])
-        ], BantaCommentsComponent.prototype, "reported", null);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [])
-        ], BantaCommentsComponent.prototype, "selected", null);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [])
-        ], BantaCommentsComponent.prototype, "userSelected", null);
-        BantaCommentsComponent = __decorate([
-            core.Component({
-                selector: 'banta-comments',
-                template: "\r\n<form class=\"new-message\" (submit)=\"sendMessage()\">\r\n    <div class=\"text-container\">\r\n        <textarea \r\n            name=\"message\" \r\n            (keydown)=\"onKeyDown($event)\"\r\n            [(ngModel)]=\"newMessageText\"></textarea>\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\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                color=\"primary\"\r\n                [disabled]=\"!newMessageText\" \r\n                >{{sendLabel}}</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\r\n<banta-comment-view \r\n    [source]=\"source\"\r\n    (userSelected)=\"selectMessageUser($event)\"\r\n    (selected)=\"selectMessage($event)\"\r\n    (upvoted)=\"upvoteMessage($event)\"\r\n    (reported)=\"reportMessage($event)\"\r\n    ></banta-comment-view>",
-                styles: [":host{display:flex;flex-direction:column}form{display:flex;padding:.5em 0;align-items:center}form .text-container{position:relative;display:flex;flex-grow:1}form .text-container textarea{font-size:14pt;background-color:#fff;color:#333;border:1px solid #ccc;min-height:6em;width:100%}form .text-container emoji-selector-button{bottom:0;right:0;position:absolute}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}:host-context(.mat-dark-theme) form .text-container textarea{background:#000;color:#fff;border-color:#333}"]
-            }),
-            __metadata("design:paramtypes", [BantaService,
-                ChatBackendService])
-        ], BantaCommentsComponent);
+        BantaCommentsComponent.prototype.sendReply = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_b) {
+                    switch (_b.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()
+                            })];
+                        case 1:
+                            _b.sent();
+                            this.replyMessage = '';
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
         return BantaCommentsComponent;
-    }());
+    }());
+    BantaCommentsComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'banta-comments',
+                    template: "\r\n<div class=\"focused\" *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        Reply\r\n        <form class=\"new-message\" (submit)=\"sendReply()\">\r\n            <div class=\"text-container\">\r\n                <textarea \r\n                    name=\"message\" \r\n                    (keydown)=\"onReplyKeyDown($event)\"\r\n                    [(ngModel)]=\"replyMessage\"></textarea>\r\n                <emoji-selector-button \r\n                    class=\"top-right\"\r\n                    (selected)=\"insertReplyEmoji($event)\"\r\n                    ></emoji-selector-button>\r\n            </div>\r\n            <button [disabled]=\"!replyMessage\" \r\n                mat-raised-button color=\"primary\">Send</button>\r\n        </form>\r\n        <banta-comment-view \r\n            [source]=\"selectedMessageThread\"\r\n            [allowReplies]=\"false\"\r\n            [fixedHeight]=\"false\"\r\n            [showEmptyState]=\"false\"\r\n            ></banta-comment-view>\r\n    </div>\r\n</div>\r\n\r\n<form class=\"new-message\" (submit)=\"sendMessage()\" *ngIf=\"!selectedMessage\">\r\n    <div class=\"text-container\">\r\n        <textarea \r\n            name=\"message\" \r\n            placeholder=\"Type your comment\"\r\n            (keydown)=\"onKeyDown($event)\"\r\n            [(ngModel)]=\"newMessageText\"></textarea>\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                color=\"primary\"\r\n                [disabled]=\"!newMessageText\" \r\n                >{{sendLabel}}</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\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    ></banta-comment-view>",
+                    styles: [":host{flex-direction:column}:host,form{display:flex}form{align-items:center;padding:.5em 0}form .text-container{display:flex;flex-grow:1;position:relative}form .text-container textarea{background-color:#fff;border:1px solid #ccc;color:#333;font-size:14pt;min-height:6em;width:100%}form .text-container emoji-selector-button{bottom:0;position:absolute;right:0}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}:host-context(.mat-dark-theme) form .text-container textarea{background:#000;border-color:#333;color:#fff}.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}form.new-message{align-items:flex-start;display:flex}form.new-message mat-form-field{flex-grow:1}form.new-message button{margin-left:1em;margin-top:.5em}"]
+                },] }
+    ];
+    BantaCommentsComponent.ctorParameters = function () { return [
+        { type: BantaService },
+        { type: ChatBackendService }
+    ]; };
+    BantaCommentsComponent.propDecorators = {
+        source: [{ type: core.Input }],
+        fixedHeight: [{ type: core.Input }],
+        maxMessages: [{ type: core.Input }],
+        maxVisibleMessages: [{ type: core.Input }],
+        genericAvatarUrl: [{ type: core.Input }],
+        topicID: [{ type: core.Input }],
+        signInLabel: [{ type: core.Input }],
+        sendLabel: [{ type: core.Input }],
+        permissionDeniedLabel: [{ type: core.Input }],
+        signInSelected: [{ type: core.Output }],
+        permissionDeniedError: [{ type: core.Output }],
+        upvoted: [{ type: core.Output }],
+        reported: [{ type: core.Output }],
+        selected: [{ type: core.Output }],
+        userSelected: [{ type: core.Output }]
+    };
 
     var LiveCommentComponent = /** @class */ (function () {
         function LiveCommentComponent(backend) {
@@ -8587,21 +8614,21 @@
             get: function () {
                 return this._upvoted;
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         Object.defineProperty(LiveCommentComponent.prototype, "reported", {
             get: function () {
                 return this._reported;
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         Object.defineProperty(LiveCommentComponent.prototype, "selected", {
             get: function () {
                 return this._selected;
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         Object.defineProperty(LiveCommentComponent.prototype, "message", {
@@ -8623,7 +8650,7 @@
                     this.unsubscribe = this.backend.watchMessage(value, function (message) { return _this.message = message; });
                 }
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
         LiveCommentComponent.prototype.report = function () {
@@ -8635,39 +8662,24 @@
         LiveCommentComponent.prototype.select = function () {
             this._selected.next();
         };
-        LiveCommentComponent.ctorParameters = function () { return [
-            { type: ChatBackendService }
-        ]; };
-        __decorate([
-            core.Output(),
-            __metadata("design:type", rxjs.Observable),
-            __metadata("design:paramtypes", [])
-        ], LiveCommentComponent.prototype, "upvoted", null);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", rxjs.Observable),
-            __metadata("design:paramtypes", [])
-        ], LiveCommentComponent.prototype, "reported", null);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", rxjs.Observable),
-            __metadata("design:paramtypes", [])
-        ], LiveCommentComponent.prototype, "selected", null);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [Object])
-        ], LiveCommentComponent.prototype, "message", null);
-        LiveCommentComponent = __decorate([
-            core.Component({
-                selector: 'banta-live-comment',
-                template: "\n        <banta-comment \n            *ngIf=\"message\"\n            [message]=\"message\"\n            (upvoted)=\"upvote()\"\n            (reported)=\"report()\"\n            (selected)=\"select()\"\n            ></banta-comment>\n    ",
-                styles: [""]
-            }),
-            __metadata("design:paramtypes", [ChatBackendService])
-        ], LiveCommentComponent);
         return LiveCommentComponent;
-    }());
+    }());
+    LiveCommentComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'banta-live-comment',
+                    template: "\n        <banta-comment \n            *ngIf=\"message\"\n            [message]=\"message\"\n            (upvoted)=\"upvote()\"\n            (reported)=\"report()\"\n            (selected)=\"select()\"\n            ></banta-comment>\n    ",
+                    styles: [""]
+                },] }
+    ];
+    LiveCommentComponent.ctorParameters = function () { return [
+        { type: ChatBackendService }
+    ]; };
+    LiveCommentComponent.propDecorators = {
+        upvoted: [{ type: core.Output }],
+        reported: [{ type: core.Output }],
+        selected: [{ type: core.Output }],
+        message: [{ type: core.Input }]
+    };
 
     var COMPONENTS$3 = [
         CommentComponent,
@@ -8678,60 +8690,81 @@
     var CommentsModule = /** @class */ (function () {
         function CommentsModule() {
         }
-        CommentsModule = __decorate([
-            core.NgModule({
-                declarations: COMPONENTS$3,
-                imports: [
-                    common.CommonModule,
-                    forms.FormsModule,
-                    icon.MatIconModule,
-                    button.MatButtonModule,
-                    menu.MatMenuModule,
-                    BantaCommonModule,
-                    EmojiModule
-                ],
-                exports: COMPONENTS$3
-            })
-        ], CommentsModule);
         return CommentsModule;
-    }());
+    }());
+    CommentsModule.decorators = [
+        { type: core.NgModule, args: [{
+                    declarations: COMPONENTS$3,
+                    imports: [
+                        common.CommonModule,
+                        textField.TextFieldModule,
+                        forms.FormsModule,
+                        icon.MatIconModule,
+                        formField.MatFormFieldModule,
+                        input.MatInputModule,
+                        button.MatButtonModule,
+                        menu.MatMenuModule,
+                        progressSpinner.MatProgressSpinnerModule,
+                        BantaCommonModule,
+                        EmojiModule
+                    ],
+                    exports: COMPONENTS$3
+                },] }
+    ];
 
     var BantaSdkModule = /** @class */ (function () {
         function BantaSdkModule() {
         }
-        BantaSdkModule = __decorate([
-            core.NgModule({
-                imports: [
-                    common.CommonModule,
-                    forms.FormsModule,
-                    BantaCommonModule.forRoot(),
-                    CommentsModule,
-                    ChatModule,
-                    EmojiModule,
-                    icon.MatIconModule,
-                    button.MatButtonModule,
-                    tooltip.MatTooltipModule,
-                    menu.MatMenuModule,
-                    dialog.MatDialogModule,
-                    formField.MatFormFieldModule,
-                    input.MatInputModule
-                ],
-                declarations: [
-                    BantaComponent,
-                    BantaLogoComponent,
-                    LiveMessageComponent
-                ],
-                exports: [
-                    BantaComponent,
-                    BantaLogoComponent,
-                    LiveMessageComponent,
-                    ChatModule,
-                    CommentsModule
+        BantaSdkModule.forRoot = function () {
+            return {
+                ngModule: BantaSdkModule,
+                providers: [
+                    BantaService
                 ]
-            })
-        ], BantaSdkModule);
+            };
+        };
         return BantaSdkModule;
-    }());
+    }());
+    BantaSdkModule.decorators = [
+        { type: core.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        forms.FormsModule,
+                        BantaCommonModule,
+                        CommentsModule,
+                        ChatModule,
+                        EmojiModule,
+                        icon.MatIconModule,
+                        button.MatButtonModule,
+                        tooltip.MatTooltipModule,
+                        menu.MatMenuModule,
+                        dialog.MatDialogModule,
+                        formField.MatFormFieldModule,
+                        input.MatInputModule,
+                        progressSpinner.MatProgressSpinnerModule
+                    ],
+                    declarations: [
+                        BantaComponent,
+                        BantaLogoComponent,
+                        LiveMessageComponent
+                    ],
+                    exports: [
+                        BantaComponent,
+                        BantaLogoComponent,
+                        LiveMessageComponent,
+                        ChatModule,
+                        CommentsModule
+                    ]
+                },] }
+    ];
+
+    /*
+     * Public API Surface of sdk
+     */
+
+    /**
+     * Generated bundle index. Do not edit.
+     */
 
     exports.BantaChatComponent = BantaChatComponent;
     exports.BantaCommentsComponent = BantaCommentsComponent;