@banta/sdk 0.0.35 → 1.0.1

package/fesm5/banta-sdk.js

@@ -153,7 +153,7 @@ var TimestampComponent = /** @class */ (function () {
     ], TimestampComponent.prototype, "value", null);
     TimestampComponent = __decorate([
         Component({
-            selector: 'engage-timestamp',
+            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: [""]
         })
@@ -164,20 +164,20 @@ var TimestampComponent = /** @class */ (function () {
 var COMPONENTS = [
     TimestampComponent
 ];
-var EngageCommonModule = /** @class */ (function () {
-    function EngageCommonModule() {
+var BantaCommonModule = /** @class */ (function () {
+    function BantaCommonModule() {
     }
-    EngageCommonModule_1 = EngageCommonModule;
-    EngageCommonModule.forRoot = function () {
+    BantaCommonModule_1 = BantaCommonModule;
+    BantaCommonModule.forRoot = function () {
         return {
-            ngModule: EngageCommonModule_1,
+            ngModule: BantaCommonModule_1,
             providers: [
                 BantaService
             ]
         };
     };
-    var EngageCommonModule_1;
-    EngageCommonModule = EngageCommonModule_1 = __decorate([
+    var BantaCommonModule_1;
+    BantaCommonModule = BantaCommonModule_1 = __decorate([
         NgModule({
             declarations: COMPONENTS,
             imports: [
@@ -185,8 +185,8 @@ var EngageCommonModule = /** @class */ (function () {
             ],
             exports: COMPONENTS
         })
-    ], EngageCommonModule);
-    return EngageCommonModule;
+    ], BantaCommonModule);
+    return BantaCommonModule;
 }());
 
 var EMOJIS = {
@@ -6926,7 +6926,7 @@ var ChatMessageComponent = /** @class */ (function () {
     ], ChatMessageComponent.prototype, "upvoted", null);
     ChatMessageComponent = __decorate([
         Component({
-            selector: 'engage-chat-message',
+            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}"]
         })
@@ -7027,8 +7027,8 @@ var LiveChatMessageComponent = /** @class */ (function () {
     ], LiveChatMessageComponent.prototype, "message", null);
     LiveChatMessageComponent = __decorate([
         Component({
-            selector: 'engage-live-chat-message',
-            template: "\n        <engage-chat-message \n            *ngIf=\"message\"\n            [message]=\"message\"\n            (upvoted)=\"upvote()\"\n            (reported)=\"report()\"\n            (selected)=\"select()\"\n            ></engage-chat-message>\n    ",
+            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])
@@ -7142,7 +7142,7 @@ var ChatViewComponent = /** @class */ (function () {
     };
     ChatViewComponent.prototype.jumpTo = function (message) {
         var element = this.elementRef.nativeElement;
-        var messageElement = element.querySelector("engage-chat-message[data-id=\"" + message.id + "\"]");
+        var messageElement = element.querySelector("banta-chat-message[data-id=\"" + message.id + "\"]");
         if (!messageElement) {
             alert("could not find message " + message.id);
             return;
@@ -7220,17 +7220,20 @@ var ChatViewComponent = /** @class */ (function () {
     ], ChatViewComponent.prototype, "maxMessages", void 0);
     ChatViewComponent = __decorate([
         Component({
-            selector: 'engage-chat-view',
-            template: "<div class=\"message-container\" #messageContainer>\r\n    <ng-content select=\"[data-before]\"></ng-content>\r\n    <engage-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        </engage-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}engage-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)}}"]
+            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", [ElementRef])
     ], ChatViewComponent);
     return ChatViewComponent;
 }());
 
-var FirehoseChatComponent = /** @class */ (function () {
-    function FirehoseChatComponent(banta, backend, elementRef) {
+/**
+ * Chat component
+ */
+var BantaChatComponent = /** @class */ (function () {
+    function BantaChatComponent(banta, backend, elementRef) {
         this.banta = banta;
         this.backend = backend;
         this.elementRef = elementRef;
@@ -7248,14 +7251,14 @@ var FirehoseChatComponent = /** @class */ (function () {
         this.showEmojiPanel = false;
         this.newMessage = {};
     }
-    FirehoseChatComponent.prototype.ngOnInit = function () {
+    BantaChatComponent.prototype.ngOnInit = function () {
         var _this = this;
         this._subs.add(this.banta.userChanged.subscribe(function (user) { return _this.user = user; }));
     };
-    FirehoseChatComponent.prototype.ngOnDestroy = function () {
+    BantaChatComponent.prototype.ngOnDestroy = function () {
         this._subs.unsubscribe();
     };
-    Object.defineProperty(FirehoseChatComponent.prototype, "source", {
+    Object.defineProperty(BantaChatComponent.prototype, "source", {
         get: function () {
             return this._source;
         },
@@ -7265,78 +7268,106 @@ var FirehoseChatComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(FirehoseChatComponent.prototype, "signInSelected", {
+    Object.defineProperty(BantaChatComponent.prototype, "topicID", {
+        get: function () {
+            return this._source.identifier;
+        },
+        set: function (value) {
+            this.setSourceFromTopicID(value);
+        },
+        enumerable: true,
+        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(FirehoseChatComponent.prototype, "permissionDeniedError", {
+    Object.defineProperty(BantaChatComponent.prototype, "permissionDeniedError", {
         get: function () {
             return this._permissionDeniedError;
         },
         enumerable: true,
         configurable: true
     });
-    FirehoseChatComponent.prototype.showSignIn = function () {
+    BantaChatComponent.prototype.showSignIn = function () {
         this._signInSelected.next();
     };
-    FirehoseChatComponent.prototype.sendPermissionError = function () {
+    BantaChatComponent.prototype.sendPermissionError = function () {
         this._permissionDeniedError.next();
     };
-    FirehoseChatComponent.prototype.insertEmoji = function (emoji) {
+    BantaChatComponent.prototype.insertEmoji = function (emoji) {
         var message = this.newMessage.message || '';
         this.newMessage.message = message + emoji;
     };
-    FirehoseChatComponent.prototype.onKeyDown = function (event) {
+    BantaChatComponent.prototype.onKeyDown = function (event) {
         // TODO
     };
-    FirehoseChatComponent.prototype.jumpToMessage = function (message) {
+    BantaChatComponent.prototype.jumpToMessage = function (message) {
         if (this.chatView)
             this.chatView.jumpTo(message);
     };
-    FirehoseChatComponent.prototype.select = function (message) {
+    BantaChatComponent.prototype.select = function (message) {
         this._selected.next(message);
     };
-    FirehoseChatComponent.prototype.selectUser = function (message) {
+    BantaChatComponent.prototype.selectUser = function (message) {
         this._userSelected.next(message);
     };
-    FirehoseChatComponent.prototype.report = function (message) {
+    BantaChatComponent.prototype.report = function (message) {
         this._reported.next(message);
     };
-    FirehoseChatComponent.prototype.upvote = function (message) {
+    BantaChatComponent.prototype.upvote = function (message) {
         this._upvoted.next(message);
     };
-    Object.defineProperty(FirehoseChatComponent.prototype, "selected", {
+    Object.defineProperty(BantaChatComponent.prototype, "selected", {
         get: function () {
             return this._selected;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(FirehoseChatComponent.prototype, "reported", {
+    Object.defineProperty(BantaChatComponent.prototype, "reported", {
         get: function () {
             return this._reported;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(FirehoseChatComponent.prototype, "upvoted", {
+    Object.defineProperty(BantaChatComponent.prototype, "upvoted", {
         get: function () {
             return this._upvoted;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(FirehoseChatComponent.prototype, "userSelected", {
+    Object.defineProperty(BantaChatComponent.prototype, "userSelected", {
         get: function () {
             return this._userSelected;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(FirehoseChatComponent.prototype, "canChat", {
+    Object.defineProperty(BantaChatComponent.prototype, "canChat", {
         get: function () {
             var _a;
             if (!this.user.permissions)
@@ -7346,7 +7377,7 @@ var FirehoseChatComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    FirehoseChatComponent.prototype.sendMessage = function () {
+    BantaChatComponent.prototype.sendMessage = function () {
         if (!this.source)
             return;
         var text = (this.newMessage.message || '').trim();
@@ -7361,7 +7392,7 @@ var FirehoseChatComponent = /** @class */ (function () {
         };
         this.source.send(message);
     };
-    FirehoseChatComponent.ctorParameters = function () { return [
+    BantaChatComponent.ctorParameters = function () { return [
         { type: BantaService },
         { type: ChatBackendService },
         { type: ElementRef }
@@ -7370,71 +7401,76 @@ var FirehoseChatComponent = /** @class */ (function () {
         Input(),
         __metadata("design:type", Object),
         __metadata("design:paramtypes", [Object])
-    ], FirehoseChatComponent.prototype, "source", null);
+    ], BantaChatComponent.prototype, "source", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [Object])
+    ], BantaChatComponent.prototype, "topicID", null);
     __decorate([
         Input(),
         __metadata("design:type", Object)
-    ], FirehoseChatComponent.prototype, "signInLabel", void 0);
+    ], BantaChatComponent.prototype, "signInLabel", void 0);
     __decorate([
         Input(),
         __metadata("design:type", Object)
-    ], FirehoseChatComponent.prototype, "sendLabel", void 0);
+    ], BantaChatComponent.prototype, "sendLabel", void 0);
     __decorate([
         Input(),
         __metadata("design:type", Object)
-    ], FirehoseChatComponent.prototype, "permissionDeniedLabel", void 0);
+    ], BantaChatComponent.prototype, "permissionDeniedLabel", void 0);
     __decorate([
         Output(),
         __metadata("design:type", Observable),
         __metadata("design:paramtypes", [])
-    ], FirehoseChatComponent.prototype, "signInSelected", null);
+    ], BantaChatComponent.prototype, "signInSelected", null);
     __decorate([
         Output(),
         __metadata("design:type", Observable),
         __metadata("design:paramtypes", [])
-    ], FirehoseChatComponent.prototype, "permissionDeniedError", null);
+    ], BantaChatComponent.prototype, "permissionDeniedError", null);
     __decorate([
         ViewChild('chatView', { static: true }),
         __metadata("design:type", ChatViewComponent)
-    ], FirehoseChatComponent.prototype, "chatView", void 0);
+    ], BantaChatComponent.prototype, "chatView", void 0);
     __decorate([
         Output(),
         __metadata("design:type", Object),
         __metadata("design:paramtypes", [])
-    ], FirehoseChatComponent.prototype, "selected", null);
+    ], BantaChatComponent.prototype, "selected", null);
     __decorate([
         Output(),
         __metadata("design:type", Object),
         __metadata("design:paramtypes", [])
-    ], FirehoseChatComponent.prototype, "reported", null);
+    ], BantaChatComponent.prototype, "reported", null);
     __decorate([
         Output(),
         __metadata("design:type", Object),
         __metadata("design:paramtypes", [])
-    ], FirehoseChatComponent.prototype, "upvoted", null);
+    ], BantaChatComponent.prototype, "upvoted", null);
     __decorate([
         Output(),
         __metadata("design:type", Object),
         __metadata("design:paramtypes", [])
-    ], FirehoseChatComponent.prototype, "userSelected", null);
-    FirehoseChatComponent = __decorate([
+    ], BantaChatComponent.prototype, "userSelected", null);
+    BantaChatComponent = __decorate([
         Component({
-            selector: 'engage-firehose',
-            template: "<engage-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    ></engage-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>",
+            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,
             ElementRef])
-    ], FirehoseChatComponent);
-    return FirehoseChatComponent;
+    ], BantaChatComponent);
+    return BantaChatComponent;
 }());
 
 var COMPONENTS$2 = [
     ChatMessageComponent,
     LiveChatMessageComponent,
     ChatViewComponent,
-    FirehoseChatComponent
+    BantaChatComponent
 ];
 var ChatModule = /** @class */ (function () {
     function ChatModule() {
@@ -7455,356 +7491,11 @@ var ChatModule = /** @class */ (function () {
     return ChatModule;
 }());
 
-var GENERIC_AVATAR_URL = 'https://gravatar.com/avatar/915c804e0be607a4ad766ddadea5c48a?s=512&d=https://codepen.io/assets/avatars/user-avatar-512x512-6e240cf350d2f1cc07c2bed234c3a3bb5f1b237023c204c782622e80d6b212ba.png';
-var MOCK_USERS = [
-    {
-        id: 'a',
-        avatarUrl: GENERIC_AVATAR_URL,
-        displayName: "Tom",
-        username: "tom"
-    }, {
-        id: 'b',
-        avatarUrl: GENERIC_AVATAR_URL,
-        displayName: "Dick",
-        username: "dick"
-    }, {
-        id: 'c',
-        avatarUrl: GENERIC_AVATAR_URL,
-        displayName: "Harry",
-        username: "harry"
-    }, {
-        id: 'd',
-        avatarUrl: GENERIC_AVATAR_URL,
-        displayName: "John",
-        username: "john"
-    }, {
-        id: 'e',
-        avatarUrl: GENERIC_AVATAR_URL,
-        displayName: "Wayne",
-        username: "wayne"
-    }, {
-        id: 'f',
-        avatarUrl: GENERIC_AVATAR_URL,
-        displayName: "Heather",
-        username: "heather"
-    }, {
-        id: 'g',
-        avatarUrl: GENERIC_AVATAR_URL,
-        displayName: "Mary",
-        username: "mary"
-    }, {
-        id: 'h',
-        avatarUrl: GENERIC_AVATAR_URL,
-        displayName: "Jennifer",
-        username: "jennifer"
-    }, {
-        id: 'i',
-        avatarUrl: GENERIC_AVATAR_URL,
-        displayName: "Kyle",
-        username: "kyle"
-    }, {
-        id: 'j',
-        avatarUrl: GENERIC_AVATAR_URL,
-        displayName: "Wanda",
-        username: "wanda"
-    }, {
-        id: 'k',
-        avatarUrl: GENERIC_AVATAR_URL,
-        displayName: "Josh",
-        username: "josh"
-    }, {
-        id: 'l',
-        avatarUrl: GENERIC_AVATAR_URL,
-        displayName: "Jane",
-        username: "jane"
-    }, {
-        id: 'm',
-        avatarUrl: GENERIC_AVATAR_URL,
-        displayName: "Joy",
-        username: "joy"
-    }, {
-        id: 'n',
-        avatarUrl: GENERIC_AVATAR_URL,
-        displayName: "Jesus",
-        username: "jesus"
-    }, {
-        id: 'o',
-        avatarUrl: GENERIC_AVATAR_URL,
-        displayName: "I bathe in Bernie's tears of joy",
-        username: "landem"
-    }, {
-        id: 'p',
-        avatarUrl: GENERIC_AVATAR_URL,
-        displayName: "The thing about socialism is that its the best",
-        username: "mangahead"
-    }, {
-        id: 'q',
-        avatarUrl: GENERIC_AVATAR_URL,
-        displayName: "If only I knew the first thing about this stuff",
-        username: "redstripe"
-    }, {
-        id: 'r',
-        avatarUrl: GENERIC_AVATAR_URL,
-        displayName: "Time is not something that should be treated unfairly",
-        username: "fantom"
-    }, {
-        id: 's',
-        avatarUrl: GENERIC_AVATAR_URL,
-        displayName: "What is the meaning of this capitalism?",
-        username: "ganjaking"
-    }, {
-        id: 't',
-        avatarUrl: GENERIC_AVATAR_URL,
-        displayName: "The world is not ready for us",
-        username: "leggo"
-    }, {
-        id: 'u',
-        avatarUrl: GENERIC_AVATAR_URL,
-        displayName: "Make or break, now is our time",
-        username: "mako"
-    }
-];
-var MockFirehoseSource = /** @class */ (function () {
-    function MockFirehoseSource() {
-        var _this = this;
-        this.identifier = 'mock';
-        this.currentUser = {
-            id: 'z',
-            username: 'liam',
-            displayName: 'Liam',
-            avatarUrl: GENERIC_AVATAR_URL
-        };
-        this._messages = [];
-        this._currentUserChanged = new BehaviorSubject(null);
-        this._messageReceived = new Subject();
-        this._messageSent = new Subject();
-        var randomMessages = [
-            "Whoa!",
-            "Cool!",
-            "Nifty!",
-            "Sweet!",
-            "@liam, awesome!",
-            "Crazy!",
-            "Wunderbar!",
-            "Lasagna!",
-            "Tacos!",
-            "@liam, Life is a box of chocolates, you never know which one... oh fuck it",
-            "Lorem ipsum dolor sit amet! Lorem ipsum dolor sit amet! LOREM IPSUM DOLOR SIT AMET GDI!",
-            "Lorem ipsum dolor sit amet! Lorem ipsum dolor sit amet! LOREM IPSUM DOLOR SIT AMET GDI! The orange one makes me dislike oranges. Orange orangutan is obsolete and unoriginal! Monkeys and such. Life is a box of chocolates, you never know which one... oh fuck it. Lorem ipsum dolor sit amet! Lorem ipsum dolor sit amet! LOREM IPSUM DOLOR SIT AMET GDI!",
-            "The orange one makes me dislike oranges. Orange orangutan is obsolete and unoriginal! Monkeys and such."
-        ];
-        setInterval(function () {
-            var messageText = randomMessages[Math.floor(randomMessages.length * Math.random())];
-            var user = MOCK_USERS[Math.floor(MOCK_USERS.length * Math.random())];
-            var message = {
-                user: user,
-                sentAt: Date.now(),
-                upvotes: 0,
-                message: messageText,
-                submessages: []
-            };
-            _this.addMessage(message);
-            _this.messageReceived.next(message);
-        }, 1000);
-        this._currentUserChanged.next(this.currentUser);
-    }
-    MockFirehoseSource.prototype.close = function () {
-        // TODO
-    };
-    MockFirehoseSource.prototype.addMessage = function (message) {
-        this._messages.push(message);
-    };
-    MockFirehoseSource.prototype.send = function (message) {
-        this.addMessage(message);
-        this._messageSent.next(message);
-    };
-    Object.defineProperty(MockFirehoseSource.prototype, "messages", {
-        get: function () {
-            return this._messages;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MockFirehoseSource.prototype, "currentUserChanged", {
-        get: function () {
-            return this._currentUserChanged;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MockFirehoseSource.prototype, "messageReceived", {
-        get: function () {
-            return this._messageReceived;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MockFirehoseSource.prototype, "messageSent", {
-        get: function () {
-            return this._messageSent;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    return MockFirehoseSource;
-}());
-var MockPointSource = /** @class */ (function () {
-    function MockPointSource() {
-        var _this = this;
-        this.identifier = 'mock-point';
-        this.currentUser = {
-            id: 'z',
-            username: 'liam',
-            displayName: 'Liam',
-            avatarUrl: GENERIC_AVATAR_URL
-        };
-        this._messages = [];
-        this._currentUserChanged = new BehaviorSubject(null);
-        this._messageReceived = new Subject();
-        this._messageSent = new Subject();
-        var randomPoints = [
-            "I think that Trump has a specific form of braindead called\n            \"Trumpitis\".",
-            "Other things that could be said will be said",
-            "If only things were as simple as they appear",
-            "Life is a box of chocolates, you never know which one... oh fuck it",
-            "More things that are done tomorrow may not be done today",
-            "Google is a useful tool to find things",
-            "Lorem ipsum dolor sit amet! Lorem ipsum dolor sit amet! LOREM IPSUM DOLOR SIT AMET GDI! The orange one makes me dislike oranges. Orange orangutan is obsolete and unoriginal! Monkeys and such. Life is a box of chocolates, you never know which one... oh fuck it. Lorem ipsum dolor sit amet! Lorem ipsum dolor sit amet! LOREM IPSUM DOLOR SIT AMET GDI! Lorem ipsum dolor sit amet! Lorem ipsum dolor sit amet! LOREM IPSUM DOLOR SIT AMET GDI! The orange one makes me dislike oranges. Orange orangutan is obsolete and unoriginal! Monkeys and such. Life is a box of chocolates, you never know which one... oh fuck it. Lorem ipsum dolor sit amet! Lorem ipsum dolor sit amet! LOREM IPSUM DOLOR SIT AMET GDI! Lorem ipsum dolor sit amet! Lorem ipsum dolor sit amet! LOREM IPSUM DOLOR SIT AMET GDI! The orange one makes me dislike oranges. Orange orangutan is obsolete and unoriginal! Monkeys and such. Life is a box of chocolates, you never know which one... oh fuck it. Lorem ipsum dolor sit amet! Lorem ipsum dolor sit amet! LOREM IPSUM DOLOR SIT AMET GDI! Lorem ipsum dolor sit amet! Lorem ipsum dolor sit amet! LOREM IPSUM DOLOR SIT AMET GDI! The orange one makes me dislike oranges. Orange orangutan is obsolete and unoriginal! Monkeys and such. Life is a box of chocolates, you never know which one... oh fuck it. Lorem ipsum dolor sit amet! Lorem ipsum dolor sit amet! LOREM IPSUM DOLOR SIT AMET GDI!"
-        ];
-        setInterval(function () {
-            var messageText = randomPoints[Math.floor(randomPoints.length * Math.random())];
-            var user = MOCK_USERS[Math.floor(MOCK_USERS.length * Math.random())];
-            var message = {
-                user: user,
-                sentAt: Date.now(),
-                upvotes: 0,
-                message: messageText,
-                submessages: [
-                    {
-                        user: _this.currentUser,
-                        message: "Good point!",
-                        sentAt: Date.now(),
-                        upvotes: 0
-                    },
-                    {
-                        user: {
-                            id: 'aa',
-                            avatarUrl: GENERIC_AVATAR_URL,
-                            displayName: 'FunnilyGuy',
-                            username: 'funnyguy'
-                        },
-                        sentAt: Date.now(),
-                        message: "What would this mean for Buttigieg?",
-                        upvotes: 0
-                    },
-                    {
-                        user: user,
-                        sentAt: Date.now(),
-                        message: "Klobucharino",
-                        upvotes: 0
-                    },
-                    {
-                        user: _this.currentUser,
-                        sentAt: Date.now(),
-                        message: "Good question!",
-                        upvotes: 0
-                    },
-                    {
-                        user: user,
-                        sentAt: Date.now(),
-                        message: "But whyigieg",
-                        upvotes: 0
-                    }
-                ]
-            };
-            _this.addMessage(message);
-            _this.messageReceived.next(message);
-        }, 5000);
-        this._currentUserChanged.next(this.currentUser);
-    }
-    MockPointSource.prototype.addMessage = function (message) {
-        this._messages.push(message);
-    };
-    Object.defineProperty(MockPointSource.prototype, "messages", {
-        get: function () {
-            return this._messages;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MockPointSource.prototype, "currentUserChanged", {
-        get: function () {
-            return this._currentUserChanged;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MockPointSource.prototype, "messageReceived", {
-        get: function () {
-            return this._messageReceived;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MockPointSource.prototype, "messageSent", {
-        get: function () {
-            return this._messageSent;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    MockPointSource.prototype.send = function (message) {
-        this.addMessage(message);
-        this._messageSent.next(message);
-    };
-    return MockPointSource;
-}());
-var MockSubpointSource = /** @class */ (function () {
-    function MockSubpointSource(parentSource, message) {
-        this.parentSource = parentSource;
-        this.message = message;
-        this.identifier = 'mock-subpoint';
-        this._messages = [];
-        this._messageReceived = new Subject();
-        this._messageSent = new Subject();
-        this._currentUserChanged = parentSource.currentUserChanged;
-        this._messages = message.submessages;
-    }
-    Object.defineProperty(MockSubpointSource.prototype, "messages", {
-        get: function () {
-            return this._messages;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MockSubpointSource.prototype, "messageReceived", {
-        get: function () {
-            return this._messageReceived;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MockSubpointSource.prototype, "messageSent", {
-        get: function () {
-            return this._messageSent;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MockSubpointSource.prototype, "currentUserChanged", {
-        get: function () {
-            return this._currentUserChanged;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    MockSubpointSource.prototype.send = function (message) {
-        //throw new Error("Method not implemented.");
-    };
-    return MockSubpointSource;
-}());
-var EngageComponent = /** @class */ (function () {
-    function EngageComponent(banta, backend, matDialog) {
+/**
+ * Unified chat and comments component
+ */
+var BantaComponent = /** @class */ (function () {
+    function BantaComponent(banta, backend, matDialog) {
         this.banta = banta;
         this.backend = backend;
         this.matDialog = matDialog;
@@ -7822,16 +7513,16 @@ var EngageComponent = /** @class */ (function () {
         // this.firehoseSource = new MockFirehoseSource();
         // this.pointSource = new MockPointSource();
     }
-    EngageComponent.prototype.ngOnInit = function () {
+    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;
         }));
     };
-    EngageComponent.prototype.newPointSubMessageKeyDown = function (event) {
+    BantaComponent.prototype.newPointSubMessageKeyDown = function (event) {
         // TODO
     };
-    EngageComponent.prototype.sendPointSubMessage = function () {
+    BantaComponent.prototype.sendPointSubMessage = function () {
         return __awaiter(this, void 0, void 0, function () {
             var text, message, e_1;
             return __generator(this, function (_a) {
@@ -7864,7 +7555,7 @@ var EngageComponent = /** @class */ (function () {
             });
         });
     };
-    EngageComponent.prototype.goToMessage = function (message) {
+    BantaComponent.prototype.goToMessage = function (message) {
         return __awaiter(this, void 0, void 0, function () {
             var targetMessage, parentMessage, viewType, _a, _b;
             return __generator(this, function (_c) {
@@ -7914,7 +7605,7 @@ var EngageComponent = /** @class */ (function () {
             });
         });
     };
-    EngageComponent.prototype.pointUnfocus = function () {
+    BantaComponent.prototype.pointUnfocus = function () {
         this.pointOpen = null;
         if (this.pointSubChat) {
             if (this.pointSubChat.close)
@@ -7922,19 +7613,19 @@ var EngageComponent = /** @class */ (function () {
             this.pointSubChat = null;
         }
     };
-    EngageComponent.prototype.ngOnDestroy = function () {
+    BantaComponent.prototype.ngOnDestroy = function () {
         this._subs.unsubscribe();
     };
-    EngageComponent.prototype.showAux = function (title, mode) {
+    BantaComponent.prototype.showAux = function (title, mode) {
         this.auxOpen = true;
         this.auxTitle = title;
         this.auxMode = mode;
         this.mobileFocus = 'aux';
     };
-    EngageComponent.prototype.showNotifications = function () {
+    BantaComponent.prototype.showNotifications = function () {
         this.showAux('Notifications', 'notifications');
     };
-    Object.defineProperty(EngageComponent.prototype, "topicID", {
+    Object.defineProperty(BantaComponent.prototype, "topicID", {
         get: function () {
             return this._topicID;
         },
@@ -7946,7 +7637,7 @@ var EngageComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    EngageComponent.prototype.connectToTopic = function (id) {
+    BantaComponent.prototype.connectToTopic = function (id) {
         return __awaiter(this, void 0, void 0, function () {
             var _a, _b;
             return __generator(this, function (_c) {
@@ -7965,17 +7656,17 @@ var EngageComponent = /** @class */ (function () {
             });
         });
     };
-    Object.defineProperty(EngageComponent.prototype, "signInSelected", {
+    Object.defineProperty(BantaComponent.prototype, "signInSelected", {
         get: function () {
             return this._signInSelected;
         },
         enumerable: true,
         configurable: true
     });
-    EngageComponent.prototype.showSignIn = function () {
+    BantaComponent.prototype.showSignIn = function () {
         this._signInSelected.next();
     };
-    EngageComponent.prototype.close = function () {
+    BantaComponent.prototype.close = function () {
         if (this.firehoseSource) {
             if (this.firehoseSource.close)
                 this.firehoseSource.close();
@@ -7987,25 +7678,25 @@ var EngageComponent = /** @class */ (function () {
             this.pointSource = null;
         }
     };
-    Object.defineProperty(EngageComponent.prototype, "hasPoint", {
+    Object.defineProperty(BantaComponent.prototype, "hasPoint", {
         get: function () {
             return this.pointOpen != null;
         },
         enumerable: true,
         configurable: true
     });
-    EngageComponent.prototype.closeAux = function () {
+    BantaComponent.prototype.closeAux = function () {
         this.auxOpen = false;
         this.mobileFocus = 'firehose';
     };
-    EngageComponent.prototype.getViewType = function (message) {
+    BantaComponent.prototype.getViewType = function (message) {
         if (message.topicId.endsWith('_firehose'))
             return 'chat';
         else if (message.topicId.endsWith('_thepoint'))
             return 'comment';
         return 'comment';
     };
-    EngageComponent.prototype.upvoteMessage = function (message) {
+    BantaComponent.prototype.upvoteMessage = function (message) {
         return __awaiter(this, void 0, void 0, function () {
             return __generator(this, function (_a) {
                 switch (_a.label) {
@@ -8024,66 +7715,66 @@ var EngageComponent = /** @class */ (function () {
             });
         });
     };
-    EngageComponent.prototype.showProfile = function (user) {
+    BantaComponent.prototype.showProfile = function (user) {
         this.profileUser = user;
         this.showAux("@" + user.username + "'s Profile", 'profile');
     };
-    EngageComponent.prototype.sendReport = function (message) {
+    BantaComponent.prototype.sendReport = function (message) {
         this.auxOpen = false;
         alert('would send report');
     };
-    EngageComponent.prototype.reportMessage = function (message) {
+    BantaComponent.prototype.reportMessage = function (message) {
         this.reportedMessage = message;
         this.showAux("Report message from @" + message.user.username, 'report');
     };
-    EngageComponent.ctorParameters = function () { return [
+    BantaComponent.ctorParameters = function () { return [
         { type: BantaService },
         { type: ChatBackendService },
         { type: MatDialog }
     ]; };
     __decorate([
         ViewChild('firehose', { static: true }),
-        __metadata("design:type", FirehoseChatComponent)
-    ], EngageComponent.prototype, "firehose", void 0);
+        __metadata("design:type", BantaChatComponent)
+    ], BantaComponent.prototype, "firehose", void 0);
     __decorate([
         Input(),
         __metadata("design:type", String),
         __metadata("design:paramtypes", [Object])
-    ], EngageComponent.prototype, "topicID", null);
+    ], BantaComponent.prototype, "topicID", null);
     __decorate([
         Output(),
         __metadata("design:type", Observable),
         __metadata("design:paramtypes", [])
-    ], EngageComponent.prototype, "signInSelected", null);
+    ], BantaComponent.prototype, "signInSelected", null);
     __decorate([
         HostBinding('class.point-focus'),
         __metadata("design:type", Object),
         __metadata("design:paramtypes", [])
-    ], EngageComponent.prototype, "hasPoint", null);
-    EngageComponent = __decorate([
+    ], BantaComponent.prototype, "hasPoint", null);
+    BantaComponent = __decorate([
         Component({
-            selector: "engage-chat",
-            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 = 'firehose'\">Firehose</a>\r\n        <a mat-button (click)=\"mobileFocus = 'points'\">The Point</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 === 'firehose'\">\r\n    <header>\r\n        <div>\r\n            <label (click)=\"mobileFocus = 'firehose'\">Firehose</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    <engage-firehose \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        ></engage-firehose>\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            <engage-live-message [message]=\"reportedMessage\"></engage-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                            <engage-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                            </engage-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                            <engage-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                            </engage-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                            <engage-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                            </engage-live-message>\r\n                        </ng-container>\r\n                    </div>\r\n\r\n                    <engage-timestamp [value]=\"notif.sentAt\"></engage-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>The Point</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        <engage-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            <engage-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                ></engage-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        </engage-comment-view>\r\n    </div>\r\n    <div class=\"points-section\">\r\n        <engage-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            ></engage-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}engage-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 engage-comment{font-size:10pt}.subcomments ::ng-deep engage-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 engage-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}"]
+            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 = 'firehose'\">Firehose</a>\r\n        <a mat-button (click)=\"mobileFocus = 'points'\">The Point</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 === 'firehose'\">\r\n    <header>\r\n        <div>\r\n            <label (click)=\"mobileFocus = 'firehose'\">Firehose</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>The Point</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,
             MatDialog])
-    ], EngageComponent);
-    return EngageComponent;
+    ], BantaComponent);
+    return BantaComponent;
 }());
 
-var EngageLogoComponent = /** @class */ (function () {
-    function EngageLogoComponent() {
+var BantaLogoComponent = /** @class */ (function () {
+    function BantaLogoComponent() {
     }
-    EngageLogoComponent = __decorate([
+    BantaLogoComponent = __decorate([
         Component({
-            selector: 'engage-logo',
+            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        "]
         })
-    ], EngageLogoComponent);
-    return EngageLogoComponent;
+    ], BantaLogoComponent);
+    return BantaLogoComponent;
 }());
 
 var LiveMessageComponent = /** @class */ (function () {
@@ -8162,8 +7853,8 @@ var LiveMessageComponent = /** @class */ (function () {
     ], LiveMessageComponent.prototype, "message", null);
     LiveMessageComponent = __decorate([
         Component({
-            selector: 'engage-live-message',
-            template: "\n        <ng-container *ngIf=\"message\">\n            <engage-live-chat-message\n                *ngIf=\"viewType === 'chat'\"\n                [message]=\"message\"\n                (upvoted)=\"upvote(message)\"\n                (reported)=\"report(message)\"\n                (selected)=\"select(message)\">\n            </engage-live-chat-message>\n\n            <engage-live-comment \n                *ngIf=\"viewType === 'comment'\"\n                [message]=\"message\"\n                (upvoted)=\"upvote(message)\"\n                (reported)=\"report(message)\"\n                (selected)=\"select(message)\">\n            </engage-live-comment>\n        </ng-container>\n    ",
+            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", [])
@@ -8256,9 +7947,9 @@ var CommentComponent = /** @class */ (function () {
     ], CommentComponent.prototype, "selected", null);
     CommentComponent = __decorate([
         Component({
-            selector: 'engage-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        <engage-timestamp [value]=\"message.sentAt\"></engage-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 engage-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}"]
+            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;
@@ -8441,8 +8132,8 @@ var CommentViewComponent = /** @class */ (function () {
     ], CommentViewComponent.prototype, "newestLast", void 0);
     CommentViewComponent = __decorate([
         Component({
-            selector: 'engage-comment-view',
-            template: "<div class=\"message-container\">\r\n    <ng-content select=\"[data-before]\"></ng-content>\r\n    <engage-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        ></engage-comment>\r\n    <ng-content select=\":not([data-before])\"></ng-content>\r\n</div>",
+            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", [])
@@ -8450,8 +8141,11 @@ var CommentViewComponent = /** @class */ (function () {
     return CommentViewComponent;
 }());
 
-var CommentsBoxComponent = /** @class */ (function () {
-    function CommentsBoxComponent(banta, backend) {
+/**
+ * Comments component
+ */
+var BantaCommentsComponent = /** @class */ (function () {
+    function BantaCommentsComponent(banta, backend) {
         this.banta = banta;
         this.backend = backend;
         this._upvoted = new Subject();
@@ -8465,14 +8159,14 @@ var CommentsBoxComponent = /** @class */ (function () {
         this._signInSelected = new Subject();
         this._permissionDeniedError = new Subject();
     }
-    CommentsBoxComponent.prototype.ngOnInit = function () {
+    BantaCommentsComponent.prototype.ngOnInit = function () {
         var _this = this;
         this._subs.add(this.banta.userChanged.subscribe(function (user) { return _this.user = user; }));
     };
-    CommentsBoxComponent.prototype.ngOnDestroy = function () {
+    BantaCommentsComponent.prototype.ngOnDestroy = function () {
         this._subs.unsubscribe();
     };
-    Object.defineProperty(CommentsBoxComponent.prototype, "source", {
+    Object.defineProperty(BantaCommentsComponent.prototype, "source", {
         get: function () {
             return this._source;
         },
@@ -8482,27 +8176,55 @@ var CommentsBoxComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    CommentsBoxComponent.prototype.showSignIn = function () {
+    Object.defineProperty(BantaCommentsComponent.prototype, "topicID", {
+        get: function () {
+            return this._source.identifier;
+        },
+        set: function (value) {
+            this.setSourceFromTopicID(value);
+        },
+        enumerable: true,
+        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) {
+                    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*/];
+                }
+            });
+        });
+    };
+    BantaCommentsComponent.prototype.showSignIn = function () {
         this._signInSelected.next();
     };
-    Object.defineProperty(CommentsBoxComponent.prototype, "signInSelected", {
+    Object.defineProperty(BantaCommentsComponent.prototype, "signInSelected", {
         get: function () {
             return this._signInSelected;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(CommentsBoxComponent.prototype, "permissionDeniedError", {
+    Object.defineProperty(BantaCommentsComponent.prototype, "permissionDeniedError", {
         get: function () {
             return this._permissionDeniedError;
         },
         enumerable: true,
         configurable: true
     });
-    CommentsBoxComponent.prototype.showPermissionDenied = function () {
+    BantaCommentsComponent.prototype.showPermissionDenied = function () {
         this._permissionDeniedError.next();
     };
-    Object.defineProperty(CommentsBoxComponent.prototype, "canComment", {
+    Object.defineProperty(BantaCommentsComponent.prototype, "canComment", {
         get: function () {
             var _a;
             if (!this.user.permissions)
@@ -8512,40 +8234,40 @@ var CommentsBoxComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(CommentsBoxComponent.prototype, "upvoted", {
+    Object.defineProperty(BantaCommentsComponent.prototype, "upvoted", {
         get: function () {
             return this._upvoted;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(CommentsBoxComponent.prototype, "reported", {
+    Object.defineProperty(BantaCommentsComponent.prototype, "reported", {
         get: function () {
             return this._reported;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(CommentsBoxComponent.prototype, "selected", {
+    Object.defineProperty(BantaCommentsComponent.prototype, "selected", {
         get: function () {
             return this._selected;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(CommentsBoxComponent.prototype, "userSelected", {
+    Object.defineProperty(BantaCommentsComponent.prototype, "userSelected", {
         get: function () {
             return this._userSelected;
         },
         enumerable: true,
         configurable: true
     });
-    CommentsBoxComponent.prototype.onKeyDown = function (event) {
+    BantaCommentsComponent.prototype.onKeyDown = function (event) {
     };
-    CommentsBoxComponent.prototype.insertEmoji = function (text) {
+    BantaCommentsComponent.prototype.insertEmoji = function (text) {
         this.newMessageText += text;
     };
-    CommentsBoxComponent.prototype.sendMessage = function () {
+    BantaCommentsComponent.prototype.sendMessage = function () {
         if (!this.source)
             return;
         var text = (this.newMessageText || '').trim();
@@ -8560,19 +8282,19 @@ var CommentsBoxComponent = /** @class */ (function () {
         };
         this.source.send(message);
     };
-    CommentsBoxComponent.prototype.upvoteMessage = function (message) {
+    BantaCommentsComponent.prototype.upvoteMessage = function (message) {
         this._upvoted.next(message);
     };
-    CommentsBoxComponent.prototype.reportMessage = function (message) {
+    BantaCommentsComponent.prototype.reportMessage = function (message) {
         this._reported.next(message);
     };
-    CommentsBoxComponent.prototype.selectMessage = function (message) {
+    BantaCommentsComponent.prototype.selectMessage = function (message) {
         this._selected.next(message);
     };
-    CommentsBoxComponent.prototype.selectMessageUser = function (message) {
+    BantaCommentsComponent.prototype.selectMessageUser = function (message) {
         this._userSelected.next(message);
     };
-    CommentsBoxComponent.ctorParameters = function () { return [
+    BantaCommentsComponent.ctorParameters = function () { return [
         { type: BantaService },
         { type: ChatBackendService }
     ]; };
@@ -8580,59 +8302,64 @@ var CommentsBoxComponent = /** @class */ (function () {
         Input(),
         __metadata("design:type", Object),
         __metadata("design:paramtypes", [Object])
-    ], CommentsBoxComponent.prototype, "source", null);
+    ], BantaCommentsComponent.prototype, "source", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [Object])
+    ], BantaCommentsComponent.prototype, "topicID", null);
     __decorate([
         Input(),
         __metadata("design:type", Object)
-    ], CommentsBoxComponent.prototype, "signInLabel", void 0);
+    ], BantaCommentsComponent.prototype, "signInLabel", void 0);
     __decorate([
         Input(),
         __metadata("design:type", Object)
-    ], CommentsBoxComponent.prototype, "sendLabel", void 0);
+    ], BantaCommentsComponent.prototype, "sendLabel", void 0);
     __decorate([
         Input(),
         __metadata("design:type", Object)
-    ], CommentsBoxComponent.prototype, "permissionDeniedLabel", void 0);
+    ], BantaCommentsComponent.prototype, "permissionDeniedLabel", void 0);
     __decorate([
         Output(),
         __metadata("design:type", Observable),
         __metadata("design:paramtypes", [])
-    ], CommentsBoxComponent.prototype, "signInSelected", null);
+    ], BantaCommentsComponent.prototype, "signInSelected", null);
     __decorate([
         Output(),
         __metadata("design:type", Observable),
         __metadata("design:paramtypes", [])
-    ], CommentsBoxComponent.prototype, "permissionDeniedError", null);
+    ], BantaCommentsComponent.prototype, "permissionDeniedError", null);
     __decorate([
         Output(),
         __metadata("design:type", Object),
         __metadata("design:paramtypes", [])
-    ], CommentsBoxComponent.prototype, "upvoted", null);
+    ], BantaCommentsComponent.prototype, "upvoted", null);
     __decorate([
         Output(),
         __metadata("design:type", Object),
         __metadata("design:paramtypes", [])
-    ], CommentsBoxComponent.prototype, "reported", null);
+    ], BantaCommentsComponent.prototype, "reported", null);
     __decorate([
         Output(),
         __metadata("design:type", Object),
         __metadata("design:paramtypes", [])
-    ], CommentsBoxComponent.prototype, "selected", null);
+    ], BantaCommentsComponent.prototype, "selected", null);
     __decorate([
         Output(),
         __metadata("design:type", Object),
         __metadata("design:paramtypes", [])
-    ], CommentsBoxComponent.prototype, "userSelected", null);
-    CommentsBoxComponent = __decorate([
+    ], BantaCommentsComponent.prototype, "userSelected", null);
+    BantaCommentsComponent = __decorate([
         Component({
-            selector: 'engage-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<engage-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    ></engage-comment-view>",
+            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])
-    ], CommentsBoxComponent);
-    return CommentsBoxComponent;
+    ], BantaCommentsComponent);
+    return BantaCommentsComponent;
 }());
 
 var LiveCommentComponent = /** @class */ (function () {
@@ -8719,8 +8446,8 @@ var LiveCommentComponent = /** @class */ (function () {
     ], LiveCommentComponent.prototype, "message", null);
     LiveCommentComponent = __decorate([
         Component({
-            selector: 'engage-live-comment',
-            template: "\n        <engage-comment \n            *ngIf=\"message\"\n            [message]=\"message\"\n            (upvoted)=\"upvote()\"\n            (reported)=\"report()\"\n            (selected)=\"select()\"\n            ></engage-comment>\n    ",
+            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])
@@ -8731,7 +8458,7 @@ var LiveCommentComponent = /** @class */ (function () {
 var COMPONENTS$3 = [
     CommentComponent,
     CommentViewComponent,
-    CommentsBoxComponent,
+    BantaCommentsComponent,
     LiveCommentComponent
 ];
 var CommentsModule = /** @class */ (function () {
@@ -8746,7 +8473,7 @@ var CommentsModule = /** @class */ (function () {
                 MatIconModule,
                 MatButtonModule,
                 MatMenuModule,
-                EngageCommonModule,
+                BantaCommonModule,
                 EmojiModule
             ],
             exports: COMPONENTS$3
@@ -8755,11 +8482,6 @@ var CommentsModule = /** @class */ (function () {
     return CommentsModule;
 }());
 
-var COMPONENTS$4 = [
-    EngageComponent,
-    EngageLogoComponent,
-    LiveMessageComponent
-];
 var BantaSdkModule = /** @class */ (function () {
     function BantaSdkModule() {
     }
@@ -8768,7 +8490,7 @@ var BantaSdkModule = /** @class */ (function () {
             imports: [
                 CommonModule,
                 FormsModule,
-                EngageCommonModule.forRoot(),
+                BantaCommonModule.forRoot(),
                 CommentsModule,
                 ChatModule,
                 EmojiModule,
@@ -8780,8 +8502,18 @@ var BantaSdkModule = /** @class */ (function () {
                 MatFormFieldModule,
                 MatInputModule
             ],
-            declarations: COMPONENTS$4,
-            exports: COMPONENTS$4
+            declarations: [
+                BantaComponent,
+                BantaLogoComponent,
+                LiveMessageComponent
+            ],
+            exports: [
+                BantaComponent,
+                BantaLogoComponent,
+                LiveMessageComponent,
+                ChatModule,
+                CommentsModule
+            ]
         })
     ], BantaSdkModule);
     return BantaSdkModule;
@@ -8795,5 +8527,5 @@ var BantaSdkModule = /** @class */ (function () {
  * Generated bundle index. Do not edit.
  */
 
-export { BantaSdkModule, BantaService, ChatBackendService, ChatMessageComponent, ChatModule, ChatViewComponent, CommentComponent, CommentViewComponent, CommentsBoxComponent, CommentsModule, EMOJIS, EmojiModule, EmojiSelectorButtonComponent, EmojiSelectorPanelComponent, EngageCommonModule, EngageComponent, EngageLogoComponent, FirehoseChatComponent, LiveChatMessageComponent, LiveCommentComponent, LiveMessageComponent, MockFirehoseSource, MockPointSource, MockSubpointSource, TimestampComponent, lazyConnection };
+export { BantaChatComponent, BantaCommentsComponent, BantaCommonModule, BantaComponent, BantaLogoComponent, BantaSdkModule, BantaService, ChatBackendService, ChatMessageComponent, ChatModule, ChatViewComponent, CommentComponent, CommentViewComponent, CommentsModule, EMOJIS, EmojiModule, EmojiSelectorButtonComponent, EmojiSelectorPanelComponent, LiveChatMessageComponent, LiveCommentComponent, LiveMessageComponent, TimestampComponent, lazyConnection };
 //# sourceMappingURL=banta-sdk.js.map