@banta/sdk 0.0.35 → 1.0.1

package/bundles/banta-sdk.umd.js

@@ -357,7 +357,7 @@
         ], TimestampComponent.prototype, "value", null);
         TimestampComponent = __decorate([
             core.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: [""]
             })
@@ -368,20 +368,20 @@
     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([
             core.NgModule({
                 declarations: COMPONENTS,
                 imports: [
@@ -389,8 +389,8 @@
                 ],
                 exports: COMPONENTS
             })
-        ], EngageCommonModule);
-        return EngageCommonModule;
+        ], BantaCommonModule);
+        return BantaCommonModule;
     }());
 
     var EMOJIS = {
@@ -7130,7 +7130,7 @@
         ], ChatMessageComponent.prototype, "upvoted", null);
         ChatMessageComponent = __decorate([
             core.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}"]
             })
@@ -7231,8 +7231,8 @@
         ], LiveChatMessageComponent.prototype, "message", null);
         LiveChatMessageComponent = __decorate([
             core.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])
@@ -7346,7 +7346,7 @@
         };
         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;
@@ -7424,17 +7424,20 @@
         ], ChatViewComponent.prototype, "maxMessages", void 0);
         ChatViewComponent = __decorate([
             core.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", [core.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;
@@ -7452,14 +7455,14 @@
             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;
             },
@@ -7469,78 +7472,106 @@
             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)
@@ -7550,7 +7581,7 @@
             enumerable: true,
             configurable: true
         });
-        FirehoseChatComponent.prototype.sendMessage = function () {
+        BantaChatComponent.prototype.sendMessage = function () {
             if (!this.source)
                 return;
             var text = (this.newMessage.message || '').trim();
@@ -7565,7 +7596,7 @@
             };
             this.source.send(message);
         };
-        FirehoseChatComponent.ctorParameters = function () { return [
+        BantaChatComponent.ctorParameters = function () { return [
             { type: BantaService },
             { type: ChatBackendService },
             { type: core.ElementRef }
@@ -7574,71 +7605,76 @@
             core.Input(),
             __metadata("design:type", Object),
             __metadata("design:paramtypes", [Object])
-        ], FirehoseChatComponent.prototype, "source", null);
+        ], BantaChatComponent.prototype, "source", null);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String),
+            __metadata("design:paramtypes", [Object])
+        ], BantaChatComponent.prototype, "topicID", null);
         __decorate([
             core.Input(),
             __metadata("design:type", Object)
-        ], FirehoseChatComponent.prototype, "signInLabel", void 0);
+        ], BantaChatComponent.prototype, "signInLabel", void 0);
         __decorate([
             core.Input(),
             __metadata("design:type", Object)
-        ], FirehoseChatComponent.prototype, "sendLabel", void 0);
+        ], BantaChatComponent.prototype, "sendLabel", void 0);
         __decorate([
             core.Input(),
             __metadata("design:type", Object)
-        ], FirehoseChatComponent.prototype, "permissionDeniedLabel", void 0);
+        ], BantaChatComponent.prototype, "permissionDeniedLabel", void 0);
         __decorate([
             core.Output(),
             __metadata("design:type", rxjs.Observable),
             __metadata("design:paramtypes", [])
-        ], FirehoseChatComponent.prototype, "signInSelected", null);
+        ], BantaChatComponent.prototype, "signInSelected", null);
         __decorate([
             core.Output(),
             __metadata("design:type", rxjs.Observable),
             __metadata("design:paramtypes", [])
-        ], FirehoseChatComponent.prototype, "permissionDeniedError", null);
+        ], BantaChatComponent.prototype, "permissionDeniedError", null);
         __decorate([
             core.ViewChild('chatView', { static: true }),
             __metadata("design:type", ChatViewComponent)
-        ], FirehoseChatComponent.prototype, "chatView", void 0);
+        ], BantaChatComponent.prototype, "chatView", void 0);
         __decorate([
             core.Output(),
             __metadata("design:type", Object),
             __metadata("design:paramtypes", [])
-        ], FirehoseChatComponent.prototype, "selected", null);
+        ], BantaChatComponent.prototype, "selected", null);
         __decorate([
             core.Output(),
             __metadata("design:type", Object),
             __metadata("design:paramtypes", [])
-        ], FirehoseChatComponent.prototype, "reported", null);
+        ], BantaChatComponent.prototype, "reported", null);
         __decorate([
             core.Output(),
             __metadata("design:type", Object),
             __metadata("design:paramtypes", [])
-        ], FirehoseChatComponent.prototype, "upvoted", null);
+        ], BantaChatComponent.prototype, "upvoted", null);
         __decorate([
             core.Output(),
             __metadata("design:type", Object),
             __metadata("design:paramtypes", [])
-        ], FirehoseChatComponent.prototype, "userSelected", null);
-        FirehoseChatComponent = __decorate([
+        ], BantaChatComponent.prototype, "userSelected", null);
+        BantaChatComponent = __decorate([
             core.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,
                 core.ElementRef])
-        ], FirehoseChatComponent);
-        return FirehoseChatComponent;
+        ], BantaChatComponent);
+        return BantaChatComponent;
     }());
 
     var COMPONENTS$2 = [
         ChatMessageComponent,
         LiveChatMessageComponent,
         ChatViewComponent,
-        FirehoseChatComponent
+        BantaChatComponent
     ];
     var ChatModule = /** @class */ (function () {
         function ChatModule() {
@@ -7659,356 +7695,11 @@
         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 rxjs.BehaviorSubject(null);
-            this._messageReceived = new rxjs.Subject();
-            this._messageSent = new rxjs.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 rxjs.BehaviorSubject(null);
-            this._messageReceived = new rxjs.Subject();
-            this._messageSent = new rxjs.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 rxjs.Subject();
-            this._messageSent = new rxjs.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;
@@ -8026,16 +7717,16 @@
             // 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) {
@@ -8068,7 +7759,7 @@
                 });
             });
         };
-        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) {
@@ -8118,7 +7809,7 @@
                 });
             });
         };
-        EngageComponent.prototype.pointUnfocus = function () {
+        BantaComponent.prototype.pointUnfocus = function () {
             this.pointOpen = null;
             if (this.pointSubChat) {
                 if (this.pointSubChat.close)
@@ -8126,19 +7817,19 @@
                 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;
             },
@@ -8150,7 +7841,7 @@
             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) {
@@ -8169,17 +7860,17 @@
                 });
             });
         };
-        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();
@@ -8191,25 +7882,25 @@
                 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) {
@@ -8228,66 +7919,66 @@
                 });
             });
         };
-        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: dialog.MatDialog }
         ]; };
         __decorate([
             core.ViewChild('firehose', { static: true }),
-            __metadata("design:type", FirehoseChatComponent)
-        ], EngageComponent.prototype, "firehose", void 0);
+            __metadata("design:type", BantaChatComponent)
+        ], BantaComponent.prototype, "firehose", void 0);
         __decorate([
             core.Input(),
             __metadata("design:type", String),
             __metadata("design:paramtypes", [Object])
-        ], EngageComponent.prototype, "topicID", null);
+        ], BantaComponent.prototype, "topicID", null);
         __decorate([
             core.Output(),
             __metadata("design:type", rxjs.Observable),
             __metadata("design:paramtypes", [])
-        ], EngageComponent.prototype, "signInSelected", null);
+        ], BantaComponent.prototype, "signInSelected", null);
         __decorate([
             core.HostBinding('class.point-focus'),
             __metadata("design:type", Object),
             __metadata("design:paramtypes", [])
-        ], EngageComponent.prototype, "hasPoint", null);
-        EngageComponent = __decorate([
+        ], BantaComponent.prototype, "hasPoint", null);
+        BantaComponent = __decorate([
             core.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,
                 dialog.MatDialog])
-        ], EngageComponent);
-        return EngageComponent;
+        ], BantaComponent);
+        return BantaComponent;
     }());
 
-    var EngageLogoComponent = /** @class */ (function () {
-        function EngageLogoComponent() {
+    var BantaLogoComponent = /** @class */ (function () {
+        function BantaLogoComponent() {
         }
-        EngageLogoComponent = __decorate([
+        BantaLogoComponent = __decorate([
             core.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 () {
@@ -8366,8 +8057,8 @@
         ], LiveMessageComponent.prototype, "message", null);
         LiveMessageComponent = __decorate([
             core.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", [])
@@ -8460,9 +8151,9 @@
         ], CommentComponent.prototype, "selected", null);
         CommentComponent = __decorate([
             core.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;
@@ -8645,8 +8336,8 @@
         ], CommentViewComponent.prototype, "newestLast", void 0);
         CommentViewComponent = __decorate([
             core.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", [])
@@ -8654,8 +8345,11 @@
         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 rxjs.Subject();
@@ -8669,14 +8363,14 @@
             this._signInSelected = new rxjs.Subject();
             this._permissionDeniedError = new rxjs.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;
             },
@@ -8686,27 +8380,55 @@
             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)
@@ -8716,40 +8438,40 @@
             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();
@@ -8764,19 +8486,19 @@
             };
             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 }
         ]; };
@@ -8784,59 +8506,64 @@
             core.Input(),
             __metadata("design:type", Object),
             __metadata("design:paramtypes", [Object])
-        ], CommentsBoxComponent.prototype, "source", null);
+        ], BantaCommentsComponent.prototype, "source", null);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String),
+            __metadata("design:paramtypes", [Object])
+        ], BantaCommentsComponent.prototype, "topicID", null);
         __decorate([
             core.Input(),
             __metadata("design:type", Object)
-        ], CommentsBoxComponent.prototype, "signInLabel", void 0);
+        ], BantaCommentsComponent.prototype, "signInLabel", void 0);
         __decorate([
             core.Input(),
             __metadata("design:type", Object)
-        ], CommentsBoxComponent.prototype, "sendLabel", void 0);
+        ], BantaCommentsComponent.prototype, "sendLabel", void 0);
         __decorate([
             core.Input(),
             __metadata("design:type", Object)
-        ], CommentsBoxComponent.prototype, "permissionDeniedLabel", void 0);
+        ], BantaCommentsComponent.prototype, "permissionDeniedLabel", void 0);
         __decorate([
             core.Output(),
             __metadata("design:type", rxjs.Observable),
             __metadata("design:paramtypes", [])
-        ], CommentsBoxComponent.prototype, "signInSelected", null);
+        ], BantaCommentsComponent.prototype, "signInSelected", null);
         __decorate([
             core.Output(),
             __metadata("design:type", rxjs.Observable),
             __metadata("design:paramtypes", [])
-        ], CommentsBoxComponent.prototype, "permissionDeniedError", null);
+        ], BantaCommentsComponent.prototype, "permissionDeniedError", null);
         __decorate([
             core.Output(),
             __metadata("design:type", Object),
             __metadata("design:paramtypes", [])
-        ], CommentsBoxComponent.prototype, "upvoted", null);
+        ], BantaCommentsComponent.prototype, "upvoted", null);
         __decorate([
             core.Output(),
             __metadata("design:type", Object),
             __metadata("design:paramtypes", [])
-        ], CommentsBoxComponent.prototype, "reported", null);
+        ], BantaCommentsComponent.prototype, "reported", null);
         __decorate([
             core.Output(),
             __metadata("design:type", Object),
             __metadata("design:paramtypes", [])
-        ], CommentsBoxComponent.prototype, "selected", null);
+        ], BantaCommentsComponent.prototype, "selected", null);
         __decorate([
             core.Output(),
             __metadata("design:type", Object),
             __metadata("design:paramtypes", [])
-        ], CommentsBoxComponent.prototype, "userSelected", null);
-        CommentsBoxComponent = __decorate([
+        ], BantaCommentsComponent.prototype, "userSelected", null);
+        BantaCommentsComponent = __decorate([
             core.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 () {
@@ -8923,8 +8650,8 @@
         ], LiveCommentComponent.prototype, "message", null);
         LiveCommentComponent = __decorate([
             core.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])
@@ -8935,7 +8662,7 @@
     var COMPONENTS$3 = [
         CommentComponent,
         CommentViewComponent,
-        CommentsBoxComponent,
+        BantaCommentsComponent,
         LiveCommentComponent
     ];
     var CommentsModule = /** @class */ (function () {
@@ -8950,7 +8677,7 @@
                     icon.MatIconModule,
                     button.MatButtonModule,
                     menu.MatMenuModule,
-                    EngageCommonModule,
+                    BantaCommonModule,
                     EmojiModule
                 ],
                 exports: COMPONENTS$3
@@ -8959,11 +8686,6 @@
         return CommentsModule;
     }());
 
-    var COMPONENTS$4 = [
-        EngageComponent,
-        EngageLogoComponent,
-        LiveMessageComponent
-    ];
     var BantaSdkModule = /** @class */ (function () {
         function BantaSdkModule() {
         }
@@ -8972,7 +8694,7 @@
                 imports: [
                     common.CommonModule,
                     forms.FormsModule,
-                    EngageCommonModule.forRoot(),
+                    BantaCommonModule.forRoot(),
                     CommentsModule,
                     ChatModule,
                     EmojiModule,
@@ -8984,13 +8706,28 @@
                     formField.MatFormFieldModule,
                     input.MatInputModule
                 ],
-                declarations: COMPONENTS$4,
-                exports: COMPONENTS$4
+                declarations: [
+                    BantaComponent,
+                    BantaLogoComponent,
+                    LiveMessageComponent
+                ],
+                exports: [
+                    BantaComponent,
+                    BantaLogoComponent,
+                    LiveMessageComponent,
+                    ChatModule,
+                    CommentsModule
+                ]
             })
         ], BantaSdkModule);
         return BantaSdkModule;
     }());
 
+    exports.BantaChatComponent = BantaChatComponent;
+    exports.BantaCommentsComponent = BantaCommentsComponent;
+    exports.BantaCommonModule = BantaCommonModule;
+    exports.BantaComponent = BantaComponent;
+    exports.BantaLogoComponent = BantaLogoComponent;
     exports.BantaSdkModule = BantaSdkModule;
     exports.BantaService = BantaService;
     exports.ChatBackendService = ChatBackendService;
@@ -8999,22 +8736,14 @@
     exports.ChatViewComponent = ChatViewComponent;
     exports.CommentComponent = CommentComponent;
     exports.CommentViewComponent = CommentViewComponent;
-    exports.CommentsBoxComponent = CommentsBoxComponent;
     exports.CommentsModule = CommentsModule;
     exports.EMOJIS = EMOJIS;
     exports.EmojiModule = EmojiModule;
     exports.EmojiSelectorButtonComponent = EmojiSelectorButtonComponent;
     exports.EmojiSelectorPanelComponent = EmojiSelectorPanelComponent;
-    exports.EngageCommonModule = EngageCommonModule;
-    exports.EngageComponent = EngageComponent;
-    exports.EngageLogoComponent = EngageLogoComponent;
-    exports.FirehoseChatComponent = FirehoseChatComponent;
     exports.LiveChatMessageComponent = LiveChatMessageComponent;
     exports.LiveCommentComponent = LiveCommentComponent;
     exports.LiveMessageComponent = LiveMessageComponent;
-    exports.MockFirehoseSource = MockFirehoseSource;
-    exports.MockPointSource = MockPointSource;
-    exports.MockSubpointSource = MockSubpointSource;
     exports.TimestampComponent = TimestampComponent;
     exports.lazyConnection = lazyConnection;