@banta/sdk 3.0.1 → 3.1.2

package/bundles/banta-sdk.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('rxjs'), require('rxjs/operators'), require('@angular/core'), require('@angular/common'), require('@angular/platform-browser'), require('@angular/material/icon'), require('@angular/material/button'), require('subsink'), require('@angular/material/dialog'), require('@angular/forms'), require('@angular/material/menu'), require('@angular/material/progress-spinner'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/cdk/text-field'), require('@angular/material/tooltip')) :
-    typeof define === 'function' && define.amd ? define('@banta/sdk', ['exports', 'rxjs', 'rxjs/operators', '@angular/core', '@angular/common', '@angular/platform-browser', '@angular/material/icon', '@angular/material/button', 'subsink', '@angular/material/dialog', '@angular/forms', '@angular/material/menu', '@angular/material/progress-spinner', '@angular/material/form-field', '@angular/material/input', '@angular/cdk/text-field', '@angular/material/tooltip'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.banta = global.banta || {}, global.banta.sdk = {}), global.rxjs, global.rxjs.operators, global.ng.core, global.ng.common, global.ng.platformBrowser, global.ng.material.icon, global.ng.material.button, global.subsink, global.ng.material.dialog, global.ng.forms, global.ng.material.menu, global.ng.material.progressSpinner, global.ng.material.formField, global.ng.material.input, global.ng.cdk.textField, global.ng.material.tooltip));
-}(this, (function (exports, rxjs, operators, core, common, platformBrowser, icon, button, subsink, dialog, forms, menu, progressSpinner, formField, input, textField, tooltip) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('rxjs'), require('rxjs/operators'), require('@angular/core'), require('@angular/common'), require('@angular/platform-browser'), require('@angular/material/icon'), require('@angular/material/button'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/forms'), require('subsink'), require('@angular/material/dialog'), require('@angular/material/menu'), require('@angular/material/progress-spinner'), require('@angular/cdk/text-field'), require('@angular/material/tooltip')) :
+    typeof define === 'function' && define.amd ? define('@banta/sdk', ['exports', 'rxjs', 'rxjs/operators', '@angular/core', '@angular/common', '@angular/platform-browser', '@angular/material/icon', '@angular/material/button', '@angular/material/form-field', '@angular/material/input', '@angular/forms', 'subsink', '@angular/material/dialog', '@angular/material/menu', '@angular/material/progress-spinner', '@angular/cdk/text-field', '@angular/material/tooltip'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.banta = global.banta || {}, global.banta.sdk = {}), global.rxjs, global.rxjs.operators, global.ng.core, global.ng.common, global.ng.platformBrowser, global.ng.material.icon, global.ng.material.button, global.ng.material.formField, global.ng.material.input, global.ng.forms, global.subsink, global.ng.material.dialog, global.ng.material.menu, global.ng.material.progressSpinner, global.ng.cdk.textField, global.ng.material.tooltip));
+}(this, (function (exports, rxjs, operators, core, common, platformBrowser, icon, button, formField, input, forms, subsink, dialog, menu, progressSpinner, textField, tooltip) { 'use strict';
 
     function lazyConnection(options) {
         var obs = new rxjs.Observable(function (observer) {
@@ -7006,14 +7006,49 @@
         function EmojiSelectorPanelComponent(sanitizer) {
             this.sanitizer = sanitizer;
             this.activeCategory = 'people';
+            this.searchResults = [];
+            this.searchVisible = false;
             this.selected = new rxjs.Subject();
         }
+        Object.defineProperty(EmojiSelectorPanelComponent.prototype, "searchQuery", {
+            get: function () {
+                return this._searchQuery;
+            },
+            set: function (value) {
+                var _this = this;
+                this._searchQuery = value;
+                setTimeout(function () {
+                    _this.searchResults = Object.keys(EMOJIS).filter(function (k) { return k.includes(value); }).map(function (k) { return EMOJIS[k]; });
+                    _this.searchResults.splice(50, _this.searchResults.length);
+                    console.log("looking for '" + value + "' => " + _this.searchResults.length + " results");
+                });
+            },
+            enumerable: false,
+            configurable: true
+        });
+        EmojiSelectorPanelComponent.prototype.humanize = function (str) {
+            return str.replace(/(^| )[a-z]/g, function (k) { return k.toUpperCase(); }).replace(/_/g, ' ');
+        };
         EmojiSelectorPanelComponent.prototype.select = function (char) {
             this.selected.next(char);
         };
         EmojiSelectorPanelComponent.prototype.pairs = function (object) {
             return Object.keys(object).map(function (key) { return [key, object[key]]; });
         };
+        EmojiSelectorPanelComponent.prototype.hideSearch = function () {
+            var _this = this;
+            // because of the "outside click detection"
+            setTimeout(function () {
+                _this.searchVisible = false;
+            });
+        };
+        EmojiSelectorPanelComponent.prototype.showSearch = function () {
+            var _this = this;
+            // because of the "outside click detection"
+            setTimeout(function () {
+                _this.searchVisible = true;
+            });
+        };
         EmojiSelectorPanelComponent.prototype.ngOnInit = function () {
             var e_1, _a;
             var cats = {};
@@ -7057,8 +7092,8 @@
     EmojiSelectorPanelComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'emoji-selector-panel',
-                    template: "<div class=\"categories\">\r\n\t<a title=\"{{category.name}}\" mat-icon-button *ngFor=\"let category of categories\" (click)=\"activeCategory = category.name\">\r\n\t\t<mat-icon>{{category.icon}}</mat-icon>\r\n\t</a>\r\n</div>\r\n\r\n<div *ngFor=\"let category of categories\">\r\n\t<div class=\"emoji-list\" *ngIf=\"activeCategory && activeCategory == category.name\">\r\n\t\t<a href=\"javascript:;\" (click)=\"select(emoji.char)\" *ngFor=\"let emoji of category.emojis\" [innerHtml]=\"emoji.html || ''\">\r\n\t\t</a>\r\n\t</div>\r\n</div>",
-                    styles: [":host{background:#111;border:1px solid #333;border-radius:5px;display:flex;flex-direction:column;padding:.5em;width:calc(256px + 8em)}.emoji-list{flex-grow:1;height:20em;overflow-y:auto}.emoji-list a{background-color:#111;display:inline-block;margin:4px;padding:2px}.emoji-list a ::ng-deep .emoji{height:32px;width:32px}.emoji-list a:hover{background-color:#333}"]
+                    template: "<ng-container *ngIf=\"searchVisible\">\r\n\t<div class=\"search-box\" *ngIf=\"searchVisible\">\r\n\t\t<a mat-icon-button href=\"javascript:;\" (click)=\"hideSearch()\">\r\n\t\t\t<mat-icon>arrow_back</mat-icon>\r\n\t\t</a>\r\n\t\t<mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n\t\t\t<mat-label>Search for emoji</mat-label>\r\n\t\t\t<input name=\"search\" type=\"text\" matInput placeholder=\"Start typing\" [(ngModel)]=\"searchQuery\" />\r\n\t\t</mat-form-field>\r\n\t</div>\r\n\t<div class=\"emoji-list\">\r\n\t\t<a href=\"javascript:;\" (click)=\"select(emoji.char)\" \r\n\t\t\t*ngFor=\"let emoji of searchResults\" [innerHtml]=\"emoji.html || ''\">\r\n\t\t</a>\r\n\t</div>\r\n</ng-container>\r\n<ng-container *ngIf=\"!searchVisible\">\r\n\t<div class=\"categories\">\r\n\t\t<ng-container *ngIf=\"!searchVisible\">\r\n\t\t\t<a [title]=\"humanize(category.name)\" [class.active]=\"activeCategory === category.name\" mat-icon-button *ngFor=\"let category of categories\" (click)=\"activeCategory = category.name\">\r\n\t\t\t\t<mat-icon>{{category.icon}}</mat-icon>\r\n\t\t\t</a>\r\n\r\n\t\t\t<a title=\"Search\" [class.active] mat-icon-button (click)=\"showSearch()\">\r\n\t\t\t\t<mat-icon>search</mat-icon>\r\n\t\t\t</a>\r\n\t\t</ng-container>\r\n\t</div>\r\n\t<div *ngFor=\"let category of categories\">\r\n\t\t<div class=\"emoji-list\" *ngIf=\"activeCategory && activeCategory == category.name\">\r\n\t\t\t<a href=\"javascript:;\" (click)=\"select(emoji.char)\" \r\n\t\t\t\t*ngFor=\"let emoji of category.emojis\" [innerHtml]=\"emoji.html || ''\">\r\n\t\t\t</a>\r\n\t\t</div>\r\n\t</div>\r\n</ng-container>",
+                    styles: [":host{background:#111;border:1px solid #333;border-radius:5px;color:#fff;display:flex;flex-direction:column;padding:.5em;width:calc(288px + 9em)}.categories a{opacity:.25;transition:opacity .4s ease-in-out}.categories a:hover{opacity:.5}.categories a.active{opacity:1}.emoji-list{flex-grow:1;height:20em;overflow-y:auto}.emoji-list a{background-color:#111;display:inline-block;margin:4px;padding:2px}.emoji-list a ::ng-deep .emoji{height:32px;width:32px}.emoji-list a:hover{background-color:#333}.search-box{align-items:baseline;display:flex}.search-box mat-form-field{flex-grow:1}"]
                 },] }
     ];
     EmojiSelectorPanelComponent.ctorParameters = function () { return [
@@ -7082,6 +7117,11 @@
         });
         EmojiSelectorButtonComponent.prototype.ngOnDestroy = function () {
             this.removeListener();
+            this.panelElement.nativeElement.remove();
+        };
+        EmojiSelectorButtonComponent.prototype.ngAfterViewInit = function () {
+            var root = document.body.querySelector('[ng-version]') || document.body;
+            root.appendChild(this.panelElement.nativeElement);
         };
         EmojiSelectorButtonComponent.prototype.removeListener = function () {
             document.removeEventListener('click', this.clickListener);
@@ -7093,6 +7133,12 @@
                 return;
             }
             this.showEmojiPanel = true;
+            var pos = this.buttonElement.nativeElement.getBoundingClientRect();
+            var size = this.panelElement.nativeElement.getBoundingClientRect();
+            Object.assign(this.panelElement.nativeElement.style, {
+                top: pos.top + pos.height + "px",
+                right: Math.max(0, window.innerWidth - pos.left - pos.width) + "px"
+            });
             setTimeout(function () {
                 _this.clickListener = function (ev) {
                     var parent = ev.target;
@@ -7118,12 +7164,14 @@
     EmojiSelectorButtonComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'emoji-selector-button',
-                    template: "\n        <button mat-icon-button (click)=\"show()\">\n            <mat-icon>emoji_emotions</mat-icon>\n        </button>\n        <emoji-selector-panel \n            (selected)=\"insert($event)\"\n            [class.visible]=\"showEmojiPanel\"\n            ></emoji-selector-panel>\n    ",
-                    styles: ["\n        :host {\n            display: block;\n            position: relative;\n        }\n\n        emoji-selector-panel {\n            position: absolute;\n            bottom: 2.5em;\n            right: 0;\n            opacity: 0;\n            pointer-events: none;\n            z-index: 10;\n        }\n\n        emoji-selector-panel.visible {\n            pointer-events: initial;\n            opacity: 1;\n        }\n\n        button {\n            color: #666\n        }\n\n        :host.bottom-left emoji-selector-panel {\n            right: auto;\n            left: 0;\n        }\n\n        :host.top-right emoji-selector-panel {\n            top: 2.4em;\n            bottom: auto;\n        }\n\n        :host.top-left emoji-selector-panel {\n            top: 2.4em;\n            bottom: auto;\n            left: 0;\n            right: auto;\n        }\n    "]
+                    template: "\n        <button #button type=\"button\" mat-icon-button (click)=\"show()\">\n            <mat-icon>emoji_emotions</mat-icon>\n        </button>\n        <emoji-selector-panel \n            #panel\n            (selected)=\"insert($event)\"\n            [class.visible]=\"showEmojiPanel\"\n            ></emoji-selector-panel>\n    ",
+                    styles: ["\n        :host {\n            display: block;\n            position: relative;\n        }\n\n        emoji-selector-panel {\n            position: absolute;\n            /* bottom: 2.5em;\n            right: 0; */\n            opacity: 0;\n            pointer-events: none;\n            z-index: 10;\n        }\n\n        emoji-selector-panel.visible {\n            pointer-events: initial;\n            opacity: 1;\n        }\n\n        button {\n            color: #666\n        }\n\n        /* :host.bottom-left emoji-selector-panel {\n            right: auto;\n            left: 0;\n        }\n\n        :host.top-right emoji-selector-panel {\n            top: 2.4em;\n            bottom: auto;\n        }\n\n        :host.top-left emoji-selector-panel {\n            top: 2.4em;\n            bottom: auto;\n            left: 0;\n            right: auto;\n        } */\n    "]
                 },] }
     ];
     EmojiSelectorButtonComponent.propDecorators = {
-        selected: [{ type: core.Output }]
+        selected: [{ type: core.Output }],
+        panelElement: [{ type: core.ViewChild, args: ['panel', { read: core.ElementRef },] }],
+        buttonElement: [{ type: core.ViewChild, args: ['button', { read: core.ElementRef },] }]
     };
 
     var COMPONENTS$1 = [
@@ -7140,8 +7188,11 @@
                     declarations: COMPONENTS$1,
                     imports: [
                         common.CommonModule,
+                        forms.FormsModule,
                         icon.MatIconModule,
-                        button.MatButtonModule
+                        button.MatButtonModule,
+                        formField.MatFormFieldModule,
+                        input.MatInputModule
                     ],
                     exports: COMPONENTS$1
                 },] }
@@ -7168,8 +7219,6 @@
             this.pointSubChat = null;
             this.newPointSubMessage = {};
             this.genericAvatarUrl = 'https://gravatar.com/avatar/915c804e0be607a4ad766ddadea5c48a?s=512&d=https://codepen.io/assets/avatars/user-avatar-512x512-6e240cf350d2f1cc07c2bed234c3a3bb5f1b237023c204c782622e80d6b212ba.png';
-            // this.firehoseSource = new MockFirehoseSource();
-            // this.pointSource = new MockPointSource();
         }
         BantaComponent.prototype.ngOnInit = function () {
             var _this = this;
@@ -7387,7 +7436,7 @@
     BantaComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "banta",
-                    template: "\r\n<mat-menu #userMenu=\"matMenu\">\r\n    <ng-container *ngIf=\"currentUser\">\r\n        <button [disabled]=\"true\" mat-menu-item>{{currentUser.displayName}} (@{{currentUser.username}})</button>\r\n        <button mat-menu-item (click)=\"signOut()\">Sign Out</button>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!currentUser\">\r\n        <button mat-menu-item>Sign In</button>\r\n    </ng-container>\r\n    <button mat-menu-item>Help</button>\r\n</mat-menu>\r\n\r\n<div class=\"tabs\">\r\n    <div>\r\n        <a mat-button (click)=\"mobileFocus = 'chat'\">{{chatLabel}}</a>\r\n        <a mat-button (click)=\"mobileFocus = 'comments'\">{{commentsLabel}}</a>\r\n    </div>\r\n    <div class=\"spacer\"></div>\r\n    <div>\r\n        <ng-container *ngIf=\"currentUser\">\r\n            <button mat-button [matMenuTriggerFor]=\"userMenu\">\r\n                @{{currentUser.username}}\r\n            </button>\r\n            <button mat-icon-button (click)=\"showNotifications()\">\r\n                <mat-icon>notification_important</mat-icon>\r\n            </button>\r\n        </ng-container>\r\n        \r\n        <button mat-button *ngIf=\"!currentUser\" (click)=\"showSignIn()\">\r\n            Sign In\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"firehose\" [class.focus]=\"mobileFocus === 'chat'\">\r\n    <header>\r\n        <div>\r\n            <label (click)=\"mobileFocus = 'chat'\">{{chatLabel}}</label>\r\n            <div class=\"spacer\"></div>\r\n\r\n            <ng-container *ngIf=\"currentUser\">\r\n                <button mat-button [matMenuTriggerFor]=\"userMenu\">\r\n                    @{{currentUser.username}}\r\n                </button>\r\n                <button mat-icon-button (click)=\"showNotifications()\">\r\n                    <mat-icon>notification_important</mat-icon>\r\n                </button>\r\n            </ng-container>\r\n            \r\n            <button mat-button *ngIf=\"!currentUser\" (click)=\"showSignIn()\">\r\n                Sign In\r\n            </button>\r\n        </div>\r\n    </header>\r\n    <banta-chat \r\n        #firehose\r\n        [source]=\"firehoseSource\"\r\n        (signInSelected)=\"showSignIn()\"\r\n        (upvoted)=\"upvoteMessage($event)\"\r\n        (userSelected)=\"showProfile($event.user)\"\r\n        (reported)=\"reportMessage($event)\"\r\n        ></banta-chat>\r\n</div>\r\n\r\n<div class=\"aux\" [class.focus]=\"mobileFocus === 'aux'\" [class.open]=\"auxOpen\">\r\n    <header>\r\n        <div>\r\n            <label>{{auxTitle}}</label>\r\n            <div class=\"spacer\"></div>\r\n            <button mat-icon-button (click)=\"auxOpen = false\">\r\n                <mat-icon>close</mat-icon>\r\n            </button>\r\n        </div>\r\n    </header>\r\n    <div class=\"aux-contents\">\r\n        <ng-container *ngIf=\"auxMode === 'profile'\">\r\n            <ng-container *ngIf=\"profileUser\">\r\n\r\n                <div>\r\n                    <strong style=\"font-size: 125%;\">\r\n                        {{profileUser.displayName}}\r\n                    </strong>\r\n                    @{{profileUser.username}}\r\n                </div>\r\n\r\n                <br/>\r\n                <strong>Top Messages</strong>\r\n\r\n                <div>\r\n                    <em>Not yet available</em>\r\n                </div>\r\n\r\n                <br/>\r\n                <strong>Recent Messages</strong>\r\n\r\n                <div>\r\n                    <em>Not yet available</em>\r\n                </div>\r\n\r\n                <pre>{{profileUser | json}}</pre>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"auxMode === 'report'\">\r\n            <p>Are you sure you want to report this message?</p>\r\n\r\n            <banta-live-message [message]=\"reportedMessage\"></banta-live-message>\r\n\r\n            <div style=\"text-align: center;\">\r\n                <button mat-raised-button color=\"primary\" (click)=\"sendReport(reportedMessage)\">Yes, Report</button>\r\n                &nbsp;\r\n                <button mat-raised-button color=\"secondary\" (click)=\"auxOpen = false\">No, Cancel</button>\r\n            </div>\r\n\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"auxMode === 'notifications'\">\r\n\r\n            <div *ngIf=\"!notifications || notifications.length === 0\">\r\n                <em>You do not have any notifications yet</em>\r\n            </div>\r\n            \r\n            <div class=\"notifications\">\r\n                <div class=\"notification\" *ngFor=\"let notif of notifications\">\r\n                    <div>\r\n                        <ng-container *ngIf=\"notif.type === 'upvote'\">\r\n                            @{{notif.message?.user?.username}} upvoted your post\r\n                            \r\n                            <banta-live-message\r\n                                [message]=\"notif.message\"\r\n                                (upvoted)=\"upvoteMessage(notif.message)\"\r\n                                (reported)=\"reportMessage(notif.message)\"\r\n                                (selected)=\"goToMessage(notif.message)\">\r\n                            </banta-live-message>\r\n\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"notif.type === 'notice'\">\r\n                            <div>\r\n                                {{notif.message}}\r\n                            </div>\r\n                            <a mat-button target=\"_blank\" href=\"{{notif.actionUrl}}\">\r\n                                {{notif.actionLabel}}\r\n                            </a>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"notif.type === 'mention'\">\r\n                            You were mentioned by @{{notif.message?.user?.username}}\r\n\r\n                            <banta-live-message\r\n                                [message]=\"notif.message\"\r\n                                (upvoted)=\"upvoteMessage(notif.message)\"\r\n                                (reported)=\"reportMessage(notif.message)\"\r\n                                (selected)=\"goToMessage(notif.message)\">\r\n                            </banta-live-message>\r\n\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"notif.type === 'reply'\">\r\n                            @{{notif.replyMessage?.user?.username}} replied to your post\r\n                            \r\n                            <banta-live-message\r\n                                [message]=\"notif.replyMessage\"\r\n                                (upvoted)=\"upvoteMessage(notif.replyMessage)\"\r\n                                (reported)=\"reportMessage(notif.replyMessage)\"\r\n                                (selected)=\"goToMessage(notif.replyMessage)\">\r\n                            </banta-live-message>\r\n                        </ng-container>\r\n                    </div>\r\n\r\n                    <banta-timestamp [value]=\"notif.sentAt\"></banta-timestamp>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n<div class=\"points\" [class.focus]=\"mobileFocus === 'points'\">\r\n    <header>\r\n        <div>\r\n            <label>{{commentsLabel}}</label>\r\n        </div>\r\n    </header>\r\n    <div class=\"point-focus\">\r\n        <div class=\"actions\">\r\n            <button mat-button (click)=\"pointUnfocus()\">\r\n                <mat-icon>arrow_back</mat-icon>\r\n                Back\r\n            </button>\r\n\r\n            <div class=\"spacer\"></div>\r\n            \r\n            <ng-container *ngIf=\"pointOpen\">\r\n                <div class=\"counted-action\">\r\n                    <div class=\"count-indicator\">  \r\n                        {{pointOpen.upvotes}}\r\n                    </div>\r\n                    <button mat-icon-button>\r\n                        <mat-icon>thumb_up</mat-icon>\r\n                    </button>\r\n                </div>\r\n\r\n            </ng-container>\r\n        </div>\r\n\r\n        <div *ngIf=\"!pointSubChat\">\r\n            Error: No subchat\r\n        </div>\r\n        \r\n        <banta-comment-view\r\n            class=\"subcomments\"\r\n            *ngIf=\"pointSubChat\"\r\n            [newestLast]=\"true\"\r\n            [allowReplies]=\"false\"\r\n            [source]=\"pointSubChat\"\r\n            (upvoted)=\"upvoteMessage($event)\"\r\n            (reported)=\"reportMessage($event)\"\r\n            (userSelected)=\"showProfile($event.user)\"\r\n            >\r\n            \r\n            <banta-comment\r\n                class=\"focused-comment\"\r\n                data-before\r\n                *ngIf=\"pointOpen\"\r\n                (upvoted)=\"upvoteMessage(pointOpen)\"\r\n                (userSelected)=\"showProfile(pointOpen.user)\"\r\n                (reported)=\"reportMessage(pointOpen)\"\r\n                [showReplyAction]=\"false\"\r\n                [message]=\"pointOpen\"\r\n                ></banta-comment>\r\n        \r\n            <div class=\"message reply\">\r\n                Reply:\r\n                <form class=\"new-message\" (submit)=\"sendPointSubMessage()\">\r\n                    <textarea \r\n                        name=\"message\" \r\n                        (keydown)=\"newPointSubMessageKeyDown($event)\"\r\n                        [(ngModel)]=\"newPointSubMessage.message\"></textarea>\r\n                \r\n                    <div class=\"actions\">\r\n                        <button [disabled]=\"!newPointSubMessage.message\" \r\n                            mat-raised-button color=\"primary\">Send</button>\r\n                    </div>\r\n                </form>\r\n            </div>\r\n        </banta-comment-view>\r\n    </div>\r\n    <div class=\"points-section\">\r\n        <banta-comments\r\n            [source]=\"pointSource\"\r\n            (signInSelected)=\"showSignIn()\"\r\n            (upvoted)=\"upvoteMessage($event)\"\r\n            (reported)=\"reportMessage($event)\"\r\n            (selected)=\"goToMessage($event)\"\r\n            (userSelected)=\"showProfile($event.user)\"\r\n            ></banta-comments>\r\n    </div>\r\n</div>",
+                    template: "\r\n<mat-menu #userMenu=\"matMenu\">\r\n    <ng-container *ngIf=\"currentUser\">\r\n        <button [disabled]=\"true\" mat-menu-item>{{currentUser.displayName}} (@{{currentUser.username}})</button>\r\n        <button mat-menu-item (click)=\"signOut()\">Sign Out</button>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!currentUser\">\r\n        <button mat-menu-item>Sign In</button>\r\n    </ng-container>\r\n    <button mat-menu-item>Help</button>\r\n</mat-menu>\r\n\r\n<div class=\"tabs\">\r\n    <div>\r\n        <a mat-button (click)=\"mobileFocus = 'chat'\">{{chatLabel}}</a>\r\n        <a mat-button (click)=\"mobileFocus = 'comments'\">{{commentsLabel}}</a>\r\n    </div>\r\n    <div class=\"spacer\"></div>\r\n    <div>\r\n        <ng-container *ngIf=\"currentUser\">\r\n            <button mat-button [matMenuTriggerFor]=\"userMenu\">\r\n                @{{currentUser.username}}\r\n            </button>\r\n            <button mat-icon-button (click)=\"showNotifications()\">\r\n                <mat-icon>notification_important</mat-icon>\r\n            </button>\r\n        </ng-container>\r\n        \r\n        <button mat-button *ngIf=\"!currentUser\" (click)=\"showSignIn()\">\r\n            Sign In\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"firehose\" [class.focus]=\"mobileFocus === 'chat'\">\r\n    <header>\r\n        <div>\r\n            <label (click)=\"mobileFocus = 'chat'\">{{chatLabel}}</label>\r\n            <div class=\"spacer\"></div>\r\n\r\n            <ng-container *ngIf=\"currentUser\">\r\n                <button mat-button [matMenuTriggerFor]=\"userMenu\">\r\n                    @{{currentUser.username}}\r\n                </button>\r\n                <button mat-icon-button (click)=\"showNotifications()\">\r\n                    <mat-icon>notification_important</mat-icon>\r\n                </button>\r\n            </ng-container>\r\n            \r\n            <button mat-button *ngIf=\"!currentUser\" (click)=\"showSignIn()\">\r\n                Sign In\r\n            </button>\r\n        </div>\r\n    </header>\r\n    <banta-chat \r\n        #firehose\r\n        [source]=\"firehoseSource\"\r\n        (signInSelected)=\"showSignIn()\"\r\n        (upvoted)=\"upvoteMessage($event)\"\r\n        (userSelected)=\"showProfile($event.user)\"\r\n        (reported)=\"reportMessage($event)\"\r\n        ></banta-chat>\r\n</div>\r\n\r\n<div class=\"aux\" [class.focus]=\"mobileFocus === 'aux'\" [class.open]=\"auxOpen\">\r\n    <header>\r\n        <div>\r\n            <label>{{auxTitle}}</label>\r\n            <div class=\"spacer\"></div>\r\n            <button mat-icon-button (click)=\"auxOpen = false\">\r\n                <mat-icon>close</mat-icon>\r\n            </button>\r\n        </div>\r\n    </header>\r\n    <div class=\"aux-contents\">\r\n        <ng-container *ngIf=\"auxMode === 'profile'\">\r\n            <ng-container *ngIf=\"profileUser\">\r\n\r\n                <div>\r\n                    <strong style=\"font-size: 125%;\">\r\n                        {{profileUser.displayName}}\r\n                    </strong>\r\n                    @{{profileUser.username}}\r\n                </div>\r\n\r\n                <br/>\r\n                <strong>Top Messages</strong>\r\n\r\n                <div>\r\n                    <em>Not yet available</em>\r\n                </div>\r\n\r\n                <br/>\r\n                <strong>Recent Messages</strong>\r\n\r\n                <div>\r\n                    <em>Not yet available</em>\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"auxMode === 'report'\">\r\n            <p>Are you sure you want to report this message?</p>\r\n\r\n            <banta-live-message [message]=\"reportedMessage\"></banta-live-message>\r\n\r\n            <div style=\"text-align: center;\">\r\n                <button mat-raised-button color=\"primary\" (click)=\"sendReport(reportedMessage)\">Yes, Report</button>\r\n                &nbsp;\r\n                <button mat-raised-button color=\"secondary\" (click)=\"auxOpen = false\">No, Cancel</button>\r\n            </div>\r\n\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"auxMode === 'notifications'\">\r\n\r\n            <div *ngIf=\"!notifications || notifications.length === 0\">\r\n                <em>You do not have any notifications yet</em>\r\n            </div>\r\n            \r\n            <div class=\"notifications\">\r\n                <div class=\"notification\" *ngFor=\"let notif of notifications\">\r\n                    <div>\r\n                        <ng-container *ngIf=\"notif.type === 'upvote'\">\r\n                            @{{notif.message?.user?.username}} upvoted your post\r\n                            \r\n                            <banta-live-message\r\n                                [message]=\"notif.message\"\r\n                                (upvoted)=\"upvoteMessage(notif.message)\"\r\n                                (reported)=\"reportMessage(notif.message)\"\r\n                                (selected)=\"goToMessage(notif.message)\">\r\n                            </banta-live-message>\r\n\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"notif.type === 'notice'\">\r\n                            <div>\r\n                                {{notif.message}}\r\n                            </div>\r\n                            <a mat-button target=\"_blank\" href=\"{{notif.actionUrl}}\">\r\n                                {{notif.actionLabel}}\r\n                            </a>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"notif.type === 'mention'\">\r\n                            You were mentioned by @{{notif.message?.user?.username}}\r\n\r\n                            <banta-live-message\r\n                                [message]=\"notif.message\"\r\n                                (upvoted)=\"upvoteMessage(notif.message)\"\r\n                                (reported)=\"reportMessage(notif.message)\"\r\n                                (selected)=\"goToMessage(notif.message)\">\r\n                            </banta-live-message>\r\n\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"notif.type === 'reply'\">\r\n                            @{{notif.replyMessage?.user?.username}} replied to your post\r\n                            \r\n                            <banta-live-message\r\n                                [message]=\"notif.replyMessage\"\r\n                                (upvoted)=\"upvoteMessage(notif.replyMessage)\"\r\n                                (reported)=\"reportMessage(notif.replyMessage)\"\r\n                                (selected)=\"goToMessage(notif.replyMessage)\">\r\n                            </banta-live-message>\r\n                        </ng-container>\r\n                    </div>\r\n\r\n                    <banta-timestamp [value]=\"notif.sentAt\"></banta-timestamp>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n<div class=\"points\" [class.focus]=\"mobileFocus === 'points'\">\r\n    <header>\r\n        <div>\r\n            <label>{{commentsLabel}}</label>\r\n        </div>\r\n    </header>\r\n    <div class=\"point-focus\">\r\n        <div class=\"actions\">\r\n            <button mat-button (click)=\"pointUnfocus()\">\r\n                <mat-icon>arrow_back</mat-icon>\r\n                Back\r\n            </button>\r\n\r\n            <div class=\"spacer\"></div>\r\n            \r\n            <ng-container *ngIf=\"pointOpen\">\r\n                <div class=\"counted-action\">\r\n                    <div class=\"count-indicator\">  \r\n                        {{pointOpen.upvotes}}\r\n                    </div>\r\n                    <button mat-icon-button>\r\n                        <mat-icon>thumb_up</mat-icon>\r\n                    </button>\r\n                </div>\r\n\r\n            </ng-container>\r\n        </div>\r\n\r\n        <div *ngIf=\"!pointSubChat\">\r\n            Error: No subchat\r\n        </div>\r\n        \r\n        <banta-comment-view\r\n            class=\"subcomments\"\r\n            *ngIf=\"pointSubChat\"\r\n            [newestLast]=\"true\"\r\n            [allowReplies]=\"false\"\r\n            [source]=\"pointSubChat\"\r\n            (upvoted)=\"upvoteMessage($event)\"\r\n            (reported)=\"reportMessage($event)\"\r\n            (userSelected)=\"showProfile($event.user)\"\r\n            >\r\n            \r\n            <banta-comment\r\n                class=\"focused-comment\"\r\n                data-before\r\n                *ngIf=\"pointOpen\"\r\n                (upvoted)=\"upvoteMessage(pointOpen)\"\r\n                (userSelected)=\"showProfile(pointOpen.user)\"\r\n                (reported)=\"reportMessage(pointOpen)\"\r\n                [showReplyAction]=\"false\"\r\n                [message]=\"pointOpen\"\r\n                ></banta-comment>\r\n        \r\n            <div class=\"message reply\">\r\n                Reply:\r\n                <form class=\"new-message\" (submit)=\"sendPointSubMessage()\">\r\n                    <textarea \r\n                        name=\"message\" \r\n                        (keydown)=\"newPointSubMessageKeyDown($event)\"\r\n                        [(ngModel)]=\"newPointSubMessage.message\"></textarea>\r\n                \r\n                    <div class=\"actions\">\r\n                        <button [disabled]=\"!newPointSubMessage.message\" \r\n                            mat-raised-button color=\"primary\">Send</button>\r\n                    </div>\r\n                </form>\r\n            </div>\r\n        </banta-comment-view>\r\n    </div>\r\n    <div class=\"points-section\">\r\n        <banta-comments\r\n            [source]=\"pointSource\"\r\n            (signInSelected)=\"showSignIn()\"\r\n            (upvoted)=\"upvoteMessage($event)\"\r\n            (reported)=\"reportMessage($event)\"\r\n            (selected)=\"goToMessage($event)\"\r\n            (userSelected)=\"showProfile($event.user)\"\r\n            ></banta-comments>\r\n    </div>\r\n</div>",
                     styles: [":host{display:flex;flex-direction:row;height:40em;padding:.5em;position:relative}.counted-action{align-items:center;display:flex}.count-indicator{border:1px solid #333;border-radius:3px;font-size:9pt;padding:0 3px}header{margin-bottom:1em;position:relative}header div{align-items:center;display:flex;height:30px}header button{color:#666}header label{color:#333;font-size:12pt;font-weight:100;letter-spacing:2px;margin:0 auto 0 0;overflow-x:hidden;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;z-index:1}header:after,header label{display:block;position:relative}header:after{border:1px solid #ccc;content:\"\";height:0;width:100%;z-index:0}.points{display:flex;flex-direction:column;max-width:50em}:host.point-focus .points{max-width:50em;width:66%}:host.point-focus .points .points-section{opacity:0;pointer-events:none}:host.point-focus .points .point-focus{opacity:1;pointer-events:auto}:host.point-focus .points .point-focus .actions{display:flex}banta-comments{flex-grow:1}.points{flex-shrink:0;font-size:12pt;margin-left:.5em;max-width:30em;position:relative;transition:width .2s ease-in,max-width .2s ease-in;width:33%}.points .points-section{opacity:1;z-index:2}.points .point-focus,.points .points-section{display:flex;flex-direction:column;flex-grow:1;transition:opacity .2s ease-in}.points .point-focus{bottom:0;left:0;opacity:0;padding:.5em;position:absolute;right:0;top:1.75em;width:100%}.firehose{display:flex;flex-direction:column;flex-grow:1;font-size:10pt}form{align-items:center;display:flex;padding:.5em 0}form textarea{font-size:14pt;min-height:6em}form input[type=text],form textarea{background:#000;border:1px solid #333;color:#fff;width:100%}form input[type=text]{height:1em}form .actions{margin-left:1em}form button{display:block;margin:0 0 0 auto}.subcomments ::ng-deep banta-comment{font-size:10pt}.subcomments ::ng-deep banta-comment.focused-comment{background:#001321;color:#fff;font-size:12pt}.aux{display:flex;flex-direction:column;min-width:0;overflow-x:hidden;transition:width .4s ease-out,min-width .4s ease-out;width:0}.aux.open{min-width:18em;width:30em}.aux .aux-contents{align-items:center;display:flex;flex-direction:column;flex-grow:1;justify-content:center;max-width:100%;min-width:10em;width:30em}.notifications .notification{border-bottom:1px solid #333;padding:1em}.notifications .notification banta-timestamp{color:#999;display:block;font-size:9pt;text-align:right}.message.reply{padding:1em}.tabs{display:none}@media (max-width:1015px){:host{flex-direction:column}.tabs{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:rgba(0,0,0,.5);display:flex;left:0;position:absolute;right:0;top:0;width:100%;z-index:10}.points{margin-left:0;max-width:100%;width:100%}header{display:none}.aux,:host.point-focus .points{max-width:100%;width:100%}.aux{min-width:0}.aux,.firehose,.points{background:#000;bottom:0;left:0;position:absolute;right:0;top:2em;z-index:0}.aux.focus,.firehose.focus,.points.focus{z-index:2}}:host-context(.mat-dark-theme) :host{background:#090909;color:#fff}:host-context(.mat-dark-theme) form textarea{background:#ccc;color:#333}:host-context(.mat-dark-theme) header:after{border-color:#222}:host-context(.mat-dark-theme) header label{color:#aaa}"]
                 },] }
     ];
@@ -7876,8 +7925,12 @@
         Object.defineProperty(BantaChatComponent.prototype, "canChat", {
             get: function () {
                 var _a;
+                if (!this.user)
+                    return false;
                 if (!this.user.permissions)
                     return true;
+                if (!this.user.permissions.canChat)
+                    return true;
                 return (_a = this.user.permissions) === null || _a === void 0 ? void 0 : _a.canChat(this.source);
             },
             enumerable: false,
@@ -8049,8 +8102,21 @@
             this._selected = new rxjs.Subject();
             this._upvoted = new rxjs.Subject();
             this._userSelected = new rxjs.Subject();
+            this.isNew = false;
+            this.visible = false;
             this.showReplyAction = true;
         }
+        CommentComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            var maxTime = 500;
+            var minTime = 0;
+            var randomTime = minTime + Math.random() * (maxTime - minTime);
+            setTimeout(function () {
+                _this.isNew = true;
+                _this.visible = true;
+                setTimeout(function () { return _this.isNew = false; }, 1000);
+            }, randomTime);
+        };
         Object.defineProperty(CommentComponent.prototype, "userSelected", {
             get: function () {
                 return this._userSelected;
@@ -8079,6 +8145,14 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(CommentComponent.prototype, "commentId", {
+            get: function () {
+                var _a;
+                return (_a = this.message) === null || _a === void 0 ? void 0 : _a.id;
+            },
+            enumerable: false,
+            configurable: true
+        });
         CommentComponent.prototype.report = function () {
             this._reported.next();
         };
@@ -8103,17 +8177,20 @@
     CommentComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'banta-comment',
-                    template: "\r\n<mat-menu #pointItemMenu=\"matMenu\">\r\n    <button mat-menu-item (click)=\"report()\">Report</button>\r\n    <button mat-menu-item>Help</button>\r\n</mat-menu>\r\n\r\n<div class=\"message-content\">\r\n    <div class=\"user\">\r\n        <div class=\"avatar\" \r\n            (click)=\"selectUser()\"\r\n            [style.background-image]=\"avatarForUser(message.user)\"></div>\r\n        <label class=\"display-name\" (click)=\"selectUser()\">{{message.user.displayName}}</label>\r\n        <label class=\"username\" (click)=\"selectUser()\">@{{message.user.username}}</label>\r\n\r\n        <button mat-icon-button [matMenuTriggerFor]=\"pointItemMenu\">\r\n            <mat-icon [inline]=\"true\">more_vert</mat-icon>\r\n        </button>\r\n    </div>\r\n    <div class=\"content\" (click)=\"select()\">\r\n        {{message.message}}\r\n    </div>\r\n    \r\n    <div class=\"actions\">\r\n        <banta-timestamp [value]=\"message.sentAt\"></banta-timestamp>\r\n        <div class=\"spacer\"></div>\r\n        <div class=\"counted-action\" *ngIf=\"showReplyAction\">\r\n            <div class=\"count-indicator\">\r\n                {{message.submessages?.length || 0}}\r\n            </div>\r\n            <button mat-icon-button matTooltip=\"Comment\" matTooltipPosition=\"below\" (click)=\"select()\">\r\n                <mat-icon [inline]=\"true\">comment</mat-icon>\r\n            </button>\r\n        </div>\r\n        <div class=\"counted-action\">\r\n            <div class=\"count-indicator\">  \r\n                {{message.upvotes}}\r\n            </div>\r\n            <button mat-icon-button matTooltip=\"Upvote\" matTooltipPosition=\"below\" (click)=\"upvote()\">\r\n                <mat-icon [inline]=\"true\">thumb_up</mat-icon>\r\n            </button>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
-                    styles: [":host{display:flex;flex-direction:column;padding:.5em;position:relative}:host:hover{background:#eee}:host .message-content .content{margin-left:4em;margin-right:3em}:host.abbreviated .message-content .content{max-height:8.5em;overflow-y:hidden;text-overflow:ellipsis}:host .actions{align-items:center;display:flex;margin-left:4em;padding-right:10px}:host .actions button{color:#666}:host .actions banta-timestamp{color:#666;font-size:10pt}.user{align-items:center;display:flex;margin:1em 0 0;position:relative}.user label{color:#000;display:block;flex-grow:0;flex-shrink:1;font-size:10pt;margin:0 auto 0 0;max-width:100%;overflow:hidden;padding:0 0 0 1em;position:relative;text-overflow:ellipsis;white-space:nowrap;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;z-index:1}.user label.username{color:#666;flex-grow:1;flex-shrink:0}.avatar{background-color:#333;background-position:50%;background-size:cover;border-radius:100%;flex-grow:0;flex-shrink:0;height:3em;width:3em}.counted-action{align-items:center;display:flex}.count-indicator{border:1px solid #ccc;border-radius:3px;color:#666;font-size:9pt;padding:0 3px}:host-context(.mat-dark-theme) .count-indicator{border-color:#333}:host-context(.mat-dark-theme):hover{background:#060606}:host-context(.mat-dark-theme) .user label{color:#fff}"]
+                    template: "\r\n<mat-menu #pointItemMenu=\"matMenu\">\r\n    <button mat-menu-item (click)=\"report()\">Report</button>\r\n    <button mat-menu-item>Help</button>\r\n</mat-menu>\r\n\r\n<div class=\"message-content\">\r\n    <div class=\"user\">\r\n        <a \r\n            href=\"javascript:;\"\r\n            class=\"avatar\"\r\n            (click)=\"selectUser()\"\r\n            [style.background-image]=\"avatarForUser(message.user)\"></a>\r\n        <a href=\"javascript:;\" class=\"display-name\" (click)=\"selectUser()\">{{message.user.displayName}}</a>\r\n        <a href=\"javascript:;\" class=\"username\" (click)=\"selectUser()\">@{{message.user.username}}</a>\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\">\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: ["@-webkit-keyframes comment-appear{0%{transform:translate(100vw)}to{transform:translate(0)}}@keyframes comment-appear{0%{transform:translate(100vw)}to{transform:translate(0)}}:host{display:flex;flex-direction:column;padding:.5em;position:relative;visibility:hidden}:host.new{-webkit-animation-duration:.4s;-webkit-animation-fill-mode:both;-webkit-animation-name:comment-appear;animation-duration:.4s;animation-fill-mode:both;animation-name:comment-appear}:host.new,:host.visible{visibility:visible}:host:hover{background:#eee}:host .message-content .content{margin-left:4em;margin-right:3em}:host.abbreviated .message-content .content{max-height:8.5em;overflow-y:hidden;text-overflow:ellipsis}:host .actions{align-items:center;display:flex;margin-left:4em;padding-right:10px}:host .actions button{color:#666}:host .actions banta-timestamp{color:#666;font-size:10pt}.user{align-items:center;display:flex;margin:1em 0 0;position:relative}.user .display-name,.user .username{color:#000;display:block;flex-grow:0;flex-shrink:1;font-size:10pt;margin:0 auto 0 0;max-width:100%;overflow:hidden;padding:0 0 0 1em;position:relative;text-overflow:ellipsis;white-space:nowrap;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;z-index:1}.user .display-name.username,.user .username.username{color:#666;flex-grow:1;flex-shrink:0}.avatar{background-color:#333;background-position:50%;background-size:cover;border-radius:100%;flex-grow:0;flex-shrink:0;height:3em;width:3em}.counted-action{align-items:center;display:flex}.count-indicator{border:1px solid #ccc;border-radius:3px;color:#666;font-size:9pt;padding:0 3px}:host-context(.mat-dark-theme) .count-indicator{border-color:#333}:host-context(.mat-dark-theme):hover{background:#060606}:host-context(.mat-dark-theme) .user .display-name,:host-context(.mat-dark-theme) .user .username{color:#fff}"]
                 },] }
     ];
     CommentComponent.propDecorators = {
+        isNew: [{ type: core.HostBinding, args: ['class.new',] }],
+        visible: [{ type: core.HostBinding, args: ['class.visible',] }],
         message: [{ type: core.Input }],
         showReplyAction: [{ type: core.Input }],
         userSelected: [{ type: core.Output }],
         reported: [{ type: core.Output }],
         upvoted: [{ type: core.Output }],
-        selected: [{ type: core.Output }]
+        selected: [{ type: core.Output }],
+        commentId: [{ type: core.HostBinding, args: ['attr.data-comment-id',] }]
     };
 
     var CommentViewComponent = /** @class */ (function () {
@@ -8210,7 +8287,7 @@
         CommentViewComponent.prototype.selectMessageUser = function (message) {
             this._userSelected.next(message);
         };
-        CommentViewComponent.prototype.messageIdentity = function (chatMessage) {
+        CommentViewComponent.prototype.messageIdentity = function (index, chatMessage) {
             return chatMessage.id;
         };
         CommentViewComponent.prototype.showNew = function () {
@@ -8321,8 +8398,8 @@
     CommentViewComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'banta-comment-view',
-                    template: "<div class=\"message-container\">\r\n    <ng-content select=\"[data-before]\"></ng-content>\r\n    \r\n    <a mat-button class=\"nav\" *ngIf=\"isViewingMore\" href=\"javascript:;\" (click)=\"showNew()\">\r\n        Show \r\n        <ng-container *ngIf=\"newMessages.length === 1\">\r\n            {{newMessages.length}} new message\r\n        </ng-container>\r\n        <ng-container *ngIf=\"newMessages.length > 1\">\r\n            {{newMessages.length}} new messages\r\n        </ng-container>\r\n        <ng-container *ngIf=\"newMessages.length === 0\">\r\n            new messages\r\n        </ng-container>\r\n    </a>\r\n\r\n    <ng-container *ngIf=\"messages.length === 0\">\r\n        <div class=\"empty-state\" *ngIf=\"showEmptyState\">\r\n            Be the first to comment!\r\n        </div>\r\n    </ng-container>\r\n    <banta-comment \r\n        *ngFor=\"let message of messages; trackBy: messageIdentity\"\r\n        class=\"abbreviated\"\r\n        [message]=\"message\"\r\n        [showReplyAction]=\"allowReplies\"\r\n        (userSelected)=\"selectMessageUser(message)\"\r\n        (upvoted)=\"upvoteMessage(message)\"\r\n        (reported)=\"reportMessage(message)\"\r\n        (selected)=\"selectMessage(message)\"\r\n        ></banta-comment>\r\n\r\n    <a mat-button class=\"nav\" *ngIf=\"hasMore && !isLoadingMore\" href=\"javascript:;\" (click)=\"showMore()\">Show more</a>\r\n\r\n    <div class=\"loading-more\" *ngIf=\"isLoadingMore\">\r\n        <mat-spinner></mat-spinner>\r\n    </div>\r\n\r\n    <!-- <div style=\"color: #666\">\r\n        n={{newMessages.length}}, m={{messages.length}}, o={{olderMessages.length}},\r\n        v={{maxVisibleMessages}}, M={{maxMessages}}\r\n    </div> -->\r\n\r\n    <ng-content select=\":not([data-before])\"></ng-content>\r\n</div>",
-                    styles: [":host{display:flex;flex-direction:column;flex-grow:1;opacity:1;transition:opacity .2s ease-in}.message-container{background:#fff;color:#000;flex-grow:1;opacity:1;overflow-x:hidden;padding:.5em 1em .5em .5em;position:relative;transition:opacity .5s ease-in-out}.message-container.no-scroll{height:auto;overflow-y:visible}.message-container.faded{opacity:.25}.message-container .overlay{bottom:0;left:0;position:absolute;right:0;top:0;z-index:10}:host.fixed-height .message-container{overflow-y:auto}:host-context(.mat-dark-theme) .message-container{background:#000;color:#fff}.empty-state{color:#666;margin:3em;text-align:center}:host-context(.mat-dark-theme) .empty-state{color:#666}a.nav{text-transform:uppercase;width:100%}.loading-more,a.nav{padding:2em;text-align:center}.loading-more{margin:0 auto;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}"]
+                    template: "<div class=\"message-container\">\r\n    <ng-content select=\"[data-before]\"></ng-content>\r\n    \r\n    <a mat-button class=\"nav\" [class.visible]=\"isViewingMore\" href=\"javascript:;\" (click)=\"showNew()\">\r\n        Show \r\n        <ng-container *ngIf=\"newMessages.length === 1\">\r\n            {{newMessages.length}} new message\r\n        </ng-container>\r\n        <ng-container *ngIf=\"newMessages.length > 1\">\r\n            {{newMessages.length}} new messages\r\n        </ng-container>\r\n        <ng-container *ngIf=\"newMessages.length === 0\">\r\n            new messages\r\n        </ng-container>\r\n    </a>\r\n\r\n    <ng-container *ngIf=\"messages.length === 0\">\r\n        <div class=\"empty-state\" *ngIf=\"showEmptyState\">\r\n            Be the first to comment!\r\n        </div>\r\n    </ng-container>\r\n    <banta-comment \r\n        *ngFor=\"let message of messages; trackBy: messageIdentity\"\r\n        class=\"abbreviated\"\r\n        [message]=\"message\"\r\n        (click)=\"isViewingMore = true\"\r\n        [showReplyAction]=\"allowReplies\"\r\n        (userSelected)=\"selectMessageUser(message)\"\r\n        (upvoted)=\"upvoteMessage(message)\"\r\n        (reported)=\"reportMessage(message)\"\r\n        (selected)=\"selectMessage(message)\"\r\n        ></banta-comment>\r\n\r\n    <a mat-button class=\"nav\" [class.visible]=\"hasMore && !isLoadingMore\" href=\"javascript:;\" (click)=\"showMore()\">Show more</a>\r\n\r\n    <div class=\"loading-more\" *ngIf=\"isLoadingMore\">\r\n        <mat-spinner></mat-spinner>\r\n    </div>\r\n\r\n    <!-- <div style=\"color: #666\">\r\n        n={{newMessages.length}}, m={{messages.length}}, o={{olderMessages.length}},\r\n        v={{maxVisibleMessages}}, M={{maxMessages}}\r\n    </div> -->\r\n\r\n    <ng-content select=\":not([data-before])\"></ng-content>\r\n</div>",
+                    styles: [":host{display:flex;flex-direction:column;flex-grow:1;opacity:1;transition:opacity .2s ease-in}.message-container{background:#fff;color:#111;flex-grow:1;opacity:1;overflow-x:hidden;padding:.5em 1em .5em .5em;position:relative;transition:opacity .5s ease-in-out}.message-container.no-scroll{height:auto;overflow-y:visible}.message-container.faded{opacity:.25}.message-container .overlay{bottom:0;left:0;position:absolute;right:0;top:0;z-index:10}:host.fixed-height .message-container{overflow-y:auto}:host-context(.mat-dark-theme) .message-container{background:#111;color:#fff}.empty-state{color:#666;margin:3em;text-align:center}:host-context(.mat-dark-theme) .empty-state{color:#666}a.nav{opacity:0;pointer-events:none;text-align:center;text-transform:uppercase;transition:opacity .4s ease-in-out;width:100%}a.nav.visible{opacity:1;pointer-events:auto}.loading-more{margin:0 auto;padding:2em;text-align:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}"]
                 },] }
     ];
     CommentViewComponent.ctorParameters = function () { return [
@@ -8348,19 +8425,34 @@
      * Comments component
      */
     var BantaCommentsComponent = /** @class */ (function () {
-        function BantaCommentsComponent(banta, backend) {
+        function BantaCommentsComponent(banta, backend, elementRef) {
             this.banta = banta;
             this.backend = backend;
+            this.elementRef = elementRef;
             this._upvoted = new rxjs.Subject();
             this._reported = new rxjs.Subject();
             this._selected = new rxjs.Subject();
             this._userSelected = new rxjs.Subject();
             this._subs = new subsink.SubSink();
+            this.hashtags = [
+                { hashtag: 'error', description: 'Cause an error' },
+                { hashtag: 'timeout', description: 'Cause a slow timeout error' },
+                { hashtag: 'slow', description: 'Be slow when this message is posted' },
+            ];
+            this.participants = [];
             this.signInLabel = 'Sign In';
             this.sendLabel = 'Send';
+            this.replyLabel = 'Reply';
+            this.sendingLabel = 'Sending';
             this.permissionDeniedLabel = 'Send';
+            this.postCommentLabel = 'Post a comment';
+            this.postReplyLabel = 'Post a reply';
             this._signInSelected = new rxjs.Subject();
             this._permissionDeniedError = new rxjs.Subject();
+            this._editAvatarSelected = new rxjs.Subject();
+            this.sending = false;
+            this.expandError = false;
+            this.selectedMessageVisible = false;
         }
         BantaCommentsComponent.prototype.ngOnInit = function () {
             var _this = this;
@@ -8392,6 +8484,7 @@
         BantaCommentsComponent.prototype.setSourceFromTopicID = function (topicID) {
             return __awaiter(this, void 0, void 0, function () {
                 var _b;
+                var _this = this;
                 return __generator(this, function (_c) {
                     switch (_c.label) {
                         case 0:
@@ -8402,14 +8495,41 @@
                             return [4 /*yield*/, this.backend.getSourceForTopic(topicID)];
                         case 1:
                             _b._source = _c.sent();
+                            this._source.messageReceived.subscribe(function (m) { return _this.addParticipant(m); });
+                            this._source.messageSent.subscribe(function (m) { return _this.addParticipant(m); });
+                            this._source.messages.forEach(function (m) { return _this.addParticipant(m); });
                             return [2 /*return*/];
                     }
                 });
             });
         };
+        BantaCommentsComponent.prototype.addParticipant = function (message) {
+            if (!message || !message.user || !message.user.id)
+                return;
+            var existing = this.participants.find(function (x) { return x.id === message.user.id; });
+            if (existing)
+                return;
+            this.participants.push(message.user);
+        };
         BantaCommentsComponent.prototype.showSignIn = function () {
             this._signInSelected.next();
         };
+        BantaCommentsComponent.prototype.showEditAvatar = function () {
+            this._editAvatarSelected.next();
+        };
+        Object.defineProperty(BantaCommentsComponent.prototype, "newMessageText", {
+            get: function () {
+                return this._newMessageText;
+            },
+            set: function (value) {
+                var _this = this;
+                this._newMessageText = value;
+                if (this._newMessageText === '' && this.sendError)
+                    setTimeout(function () { return _this.sendError = null; });
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(BantaCommentsComponent.prototype, "signInSelected", {
             get: function () {
                 return this._signInSelected;
@@ -8417,6 +8537,13 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(BantaCommentsComponent.prototype, "editAvatarSelected", {
+            get: function () {
+                return this._editAvatarSelected;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(BantaCommentsComponent.prototype, "permissionDeniedError", {
             get: function () {
                 return this._permissionDeniedError;
@@ -8430,8 +8557,12 @@
         Object.defineProperty(BantaCommentsComponent.prototype, "canComment", {
             get: function () {
                 var _a;
+                if (!this.user)
+                    return false;
                 if (!this.user.permissions)
                     return true;
+                if (!this.user.permissions.canComment)
+                    return true;
                 return (_a = this.user.permissions) === null || _a === void 0 ? void 0 : _a.canComment(this.source);
             },
             enumerable: false,
@@ -8475,6 +8606,16 @@
         BantaCommentsComponent.prototype.insertReplyEmoji = function (text) {
             this.replyMessage += text;
         };
+        BantaCommentsComponent.prototype.indicateError = function (message) {
+            var _this = this;
+            this.sendError = new Error(message);
+            setTimeout(function () {
+                _this.expandError = true;
+                setTimeout(function () {
+                    _this.expandError = false;
+                }, 5 * 1000);
+            });
+        };
         BantaCommentsComponent.prototype.sendMessage = function () {
             return __awaiter(this, void 0, void 0, function () {
                 var text, message, e_1;
@@ -8483,8 +8624,12 @@
                         case 0:
                             if (!this.source)
                                 return [2 /*return*/];
+                            this.sending = true;
+                            this.sendError = null;
+                            _b.label = 1;
+                        case 1:
+                            _b.trys.push([1, , 6, 7]);
                             text = (this.newMessageText || '').trim();
-                            this.newMessageText = '';
                             if (text === '')
                                 return [2 /*return*/];
                             message = {
@@ -8493,32 +8638,52 @@
                                 upvotes: 0,
                                 message: text
                             };
-                            _b.label = 1;
-                        case 1:
-                            _b.trys.push([1, 3, , 4]);
-                            return [4 /*yield*/, this.source.send(message)];
+                            _b.label = 2;
                         case 2:
-                            _b.sent();
-                            return [3 /*break*/, 4];
+                            _b.trys.push([2, 4, , 5]);
+                            return [4 /*yield*/, this.source.send(message)];
                         case 3:
+                            _b.sent();
+                            this.newMessageText = '';
+                            return [3 /*break*/, 5];
+                        case 4:
                             e_1 = _b.sent();
+                            this.indicateError("Could not send: " + e_1.message);
                             console.error("Failed to send message: ", message);
                             console.error(e_1);
-                            return [3 /*break*/, 4];
-                        case 4: return [2 /*return*/];
+                            return [3 /*break*/, 5];
+                        case 5: return [3 /*break*/, 7];
+                        case 6:
+                            this.sending = false;
+                            return [7 /*endfinally*/];
+                        case 7: return [2 /*return*/];
                     }
                 });
             });
         };
         BantaCommentsComponent.prototype.upvoteMessage = function (message) {
-            this._upvoted.next(message);
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            this._upvoted.next(message);
+                            return [4 /*yield*/, this.backend.upvoteMessage(message.topicId, message.parentMessageId ? message.parentMessageId : message.id, message.parentMessageId ? message.id : undefined)];
+                        case 1:
+                            _b.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            });
         };
         BantaCommentsComponent.prototype.reportMessage = function (message) {
             this._reported.next(message);
         };
         BantaCommentsComponent.prototype.unselectMessage = function () {
             return __awaiter(this, void 0, void 0, function () {
+                var message;
+                var _this = this;
                 return __generator(this, function (_b) {
+                    message = this.selectedMessage;
                     this._selected.next(null);
                     this.selectedMessage = null;
                     if (this.selectedMessageThread) {
@@ -8526,24 +8691,33 @@
                             this.selectedMessageThread.close();
                         this.selectedMessageThread = null;
                     }
+                    if (message)
+                        setTimeout(function () { return _this.scrollToMessage(message); });
                     return [2 /*return*/];
                 });
             });
         };
         BantaCommentsComponent.prototype.selectMessage = function (message) {
             return __awaiter(this, void 0, void 0, function () {
-                var _b;
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
-                        case 0:
-                            this._selected.next(message);
-                            this.selectedMessage = message;
-                            _b = this;
-                            return [4 /*yield*/, this.backend.getSourceForThread(this.topicID, message.id)];
-                        case 1:
-                            _b.selectedMessageThread = _c.sent();
-                            return [2 /*return*/];
-                    }
+                var _this = this;
+                return __generator(this, function (_b) {
+                    this._selected.next(message);
+                    this.selectedMessage = message;
+                    setTimeout(function () { return _this.selectedMessageVisible = true; });
+                    setTimeout(function () { return __awaiter(_this, void 0, void 0, function () {
+                        var _b;
+                        return __generator(this, function (_c) {
+                            switch (_c.label) {
+                                case 0:
+                                    _b = this;
+                                    return [4 /*yield*/, this.backend.getSourceForThread(this.topicID, message.id)];
+                                case 1:
+                                    _b.selectedMessageThread = _c.sent();
+                                    return [2 /*return*/];
+                            }
+                        });
+                    }); }, 250);
+                    return [2 /*return*/];
                 });
             });
         };
@@ -8572,20 +8746,29 @@
                 });
             });
         };
+        BantaCommentsComponent.prototype.scrollToMessage = function (message) {
+            var el = this.elementRef.nativeElement.querySelector("[data-comment-id=\"" + message.id + "\"]");
+            if (!el)
+                return;
+            el.scrollIntoView({ block: 'center', inline: 'start' });
+        };
         return BantaCommentsComponent;
     }());
     BantaCommentsComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'banta-comments',
-                    template: "\r\n<div class=\"focused\" *ngIf=\"selectedMessage\">\r\n\r\n    <div>\r\n        <a mat-button href=\"javascript:;\" (click)=\"unselectMessage()\">\r\n            <mat-icon>arrow_back</mat-icon>\r\n            Latest Comments\r\n        </a>\r\n    </div>\r\n\r\n    <banta-comment \r\n        [message]=\"selectedMessage\"\r\n        ></banta-comment>\r\n\r\n    <div class=\"replies\">\r\n        Reply\r\n        <form class=\"new-message\" (submit)=\"sendReply()\">\r\n            <div class=\"text-container\">\r\n                <textarea \r\n                    name=\"message\" \r\n                    (keydown)=\"onReplyKeyDown($event)\"\r\n                    [(ngModel)]=\"replyMessage\"></textarea>\r\n                <emoji-selector-button \r\n                    class=\"top-right\"\r\n                    (selected)=\"insertReplyEmoji($event)\"\r\n                    ></emoji-selector-button>\r\n            </div>\r\n            <button [disabled]=\"!replyMessage\" \r\n                mat-raised-button color=\"primary\">Send</button>\r\n        </form>\r\n        <banta-comment-view \r\n            [source]=\"selectedMessageThread\"\r\n            [allowReplies]=\"false\"\r\n            [fixedHeight]=\"false\"\r\n            [showEmptyState]=\"false\"\r\n            ></banta-comment-view>\r\n    </div>\r\n</div>\r\n\r\n<form class=\"new-message\" (submit)=\"sendMessage()\" *ngIf=\"!selectedMessage\">\r\n    <div class=\"text-container\">\r\n        <textarea \r\n            name=\"message\" \r\n            placeholder=\"Type your comment\"\r\n            (keydown)=\"onKeyDown($event)\"\r\n            [(ngModel)]=\"newMessageText\"></textarea>\r\n        <emoji-selector-button \r\n            class=\"top-right\"\r\n            (selected)=\"insertEmoji($event)\"\r\n            ></emoji-selector-button>\r\n    </div>\r\n    <div class=\"actions\">\r\n        <ng-container *ngIf=\"!user\">\r\n            <button \r\n                mat-raised-button \r\n                color=\"primary\"\r\n                type=\"button\"\r\n                (click)=\"showSignIn()\"\r\n                >{{signInLabel}}</button>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"user\">\r\n            <button \r\n                *ngIf=\"canComment\"\r\n                mat-raised-button \r\n                color=\"primary\"\r\n                [disabled]=\"!newMessageText\" \r\n                >{{sendLabel}}</button>\r\n            <button \r\n                *ngIf=\"!canComment\"\r\n                type=\"button\"\r\n                (click)=\"showPermissionDenied()\"\r\n                mat-raised-button \r\n                color=\"primary\"\r\n                >{{permissionDeniedLabel}}</button>\r\n        </ng-container>\r\n    </div>\r\n</form>\r\n\r\n<banta-comment-view \r\n    [class.faded]=\"selectedMessage\"\r\n    [source]=\"source\"\r\n    [fixedHeight]=\"fixedHeight\"\r\n    [maxMessages]=\"maxMessages\"\r\n    [maxVisibleMessages]=\"maxVisibleMessages\"\r\n    [genericAvatarUrl]=\"genericAvatarUrl\"\r\n    (userSelected)=\"selectMessageUser($event)\"\r\n    (selected)=\"selectMessage($event)\"\r\n    (upvoted)=\"upvoteMessage($event)\"\r\n    (reported)=\"reportMessage($event)\"\r\n    ></banta-comment-view>",
-                    styles: [":host{flex-direction:column}:host,form{display:flex}form{align-items:center;padding:.5em 0}form .text-container{display:flex;flex-grow:1;position:relative}form .text-container textarea{background-color:#fff;border:1px solid #ccc;color:#333;font-size:14pt;min-height:6em;width:100%}form .text-container emoji-selector-button{bottom:0;position:absolute;right:0}form input[type=text]{background:#000;border:1px solid #333;color:#fff;height:1em;width:100%}form .actions{margin-left:1em}form button{display:block;margin:0 0 0 auto}:host-context(.mat-dark-theme) form .text-container textarea{background:#000;border-color:#333;color:#fff}.focused .replies{margin-left:4em;margin-top:1em}banta-comment-view{opacity:1;transition:opacity .4s ease-in-out}banta-comment-view.faded{opacity:.25}form.new-message{align-items:flex-start;display:flex}form.new-message mat-form-field{flex-grow:1}form.new-message button{margin-left:1em;margin-top:.5em}"]
+                    template: "\r\n<div class=\"focused\" [class.visible]=\"selectedMessageVisible\" *ngIf=\"selectedMessage\">\r\n\r\n    <div>\r\n        <a mat-button href=\"javascript:;\" (click)=\"unselectMessage()\">\r\n            <mat-icon>arrow_back</mat-icon>\r\n            Latest Comments\r\n        </a>\r\n    </div>\r\n\r\n    <banta-comment \r\n        [message]=\"selectedMessage\"\r\n        ></banta-comment>\r\n\r\n    <div class=\"replies\">\r\n\r\n        <ng-container *ngIf=\"!selectedMessageThread\">\r\n            <div class=\"loading\">\r\n                <mat-spinner></mat-spinner>\r\n            </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"selectedMessageThread\">\r\n            <banta-comment-view \r\n                [source]=\"selectedMessageThread\"\r\n                [allowReplies]=\"false\"\r\n                [fixedHeight]=\"false\"\r\n                [showEmptyState]=\"false\"\r\n                [newestLast]=\"true\"\r\n                ></banta-comment-view>\r\n\r\n            <banta-comment-field\r\n                [sendLabel]=\"replyLabel\"\r\n                [sendingLabel]=\"sendingLabel\"\r\n                [hashtags]=\"hashtags\"\r\n                [participants]=\"participants\"\r\n                (signInSelected)=\"showSignIn()\"\r\n                (editAvatarSelected)=\"showEditAvatar()\"\r\n                [source]=\"selectedMessageThread\"\r\n                [canComment]=\"canComment\"\r\n                [signInLabel]=\"signInLabel\"\r\n                [user]=\"user\"\r\n                [label]=\"postReplyLabel\"\r\n                ></banta-comment-field>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"main\" [class.hidden]=\"selectedMessage\">\r\n    <banta-comment-field\r\n        [source]=\"source\"\r\n        [user]=\"user\"\r\n        [sendLabel]=\"sendLabel\"\r\n        [sendingLabel]=\"sendingLabel\"\r\n        [signInLabel]=\"signInLabel\"\r\n        [canComment]=\"canComment\"\r\n        [hashtags]=\"hashtags\"\r\n        [participants]=\"participants\"\r\n        [label]=\"postCommentLabel\"\r\n        (editAvatarSelected)=\"showEditAvatar()\"\r\n        (signInSelected)=\"showSignIn()\"\r\n        ></banta-comment-field>\r\n\r\n    <banta-comment-view \r\n        [class.faded]=\"selectedMessage\"\r\n        [source]=\"source\"\r\n        [fixedHeight]=\"fixedHeight\"\r\n        [maxMessages]=\"maxMessages\"\r\n        [maxVisibleMessages]=\"maxVisibleMessages\"\r\n        [genericAvatarUrl]=\"genericAvatarUrl\"\r\n        (userSelected)=\"selectMessageUser($event)\"\r\n        (selected)=\"selectMessage($event)\"\r\n        (upvoted)=\"upvoteMessage($event)\"\r\n        (reported)=\"reportMessage($event)\"\r\n        ></banta-comment-view>\r\n</div>",
+                    styles: [":host{display:flex;flex-direction:column}@-webkit-keyframes select-comment{0%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes select-comment{0%{transform:scale(1.15)}to{transform:scale(1)}}.focused{-webkit-animation-duration:.4s;-webkit-animation-fill-mode:both;-webkit-animation-name:select-comment;animation-duration:.4s;animation-fill-mode:both;animation-name:select-comment}.focused .replies{margin-left:4em;margin-top:1em}banta-comment-view{opacity:1;transition:opacity .4s ease-in-out}banta-comment-view.faded{opacity:.25}.loading{display:block;margin:0 auto;min-height:16em;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.main.hidden{display:none}"]
                 },] }
     ];
     BantaCommentsComponent.ctorParameters = function () { return [
         { type: BantaService },
-        { type: ChatBackendService }
+        { type: ChatBackendService },
+        { type: core.ElementRef }
     ]; };
     BantaCommentsComponent.propDecorators = {
+        hashtags: [{ type: core.Input }],
+        participants: [{ type: core.Input }],
         source: [{ type: core.Input }],
         fixedHeight: [{ type: core.Input }],
         maxMessages: [{ type: core.Input }],
@@ -8594,8 +8777,13 @@
         topicID: [{ type: core.Input }],
         signInLabel: [{ type: core.Input }],
         sendLabel: [{ type: core.Input }],
+        replyLabel: [{ type: core.Input }],
+        sendingLabel: [{ type: core.Input }],
         permissionDeniedLabel: [{ type: core.Input }],
+        postCommentLabel: [{ type: core.Input }],
+        postReplyLabel: [{ type: core.Input }],
         signInSelected: [{ type: core.Output }],
+        editAvatarSelected: [{ type: core.Output }],
         permissionDeniedError: [{ type: core.Output }],
         upvoted: [{ type: core.Output }],
         reported: [{ type: core.Output }],
@@ -8681,11 +8869,277 @@
         message: [{ type: core.Input }]
     };
 
+    var CommentFieldComponent = /** @class */ (function () {
+        function CommentFieldComponent() {
+            this.canComment = true;
+            this.signInSelected = new rxjs.Subject();
+            this.editAvatarSelected = new rxjs.Subject();
+            this.sending = false;
+            this.expandError = false;
+            this.text = '';
+            this.sendLabel = 'Send';
+            this.sendingLabel = 'Sending';
+            this.label = 'Post a comment';
+            this.permissionDeniedLabel = 'Unavailable';
+            this.signInLabel = 'Sign In';
+            this.participants = [];
+            this.autocompleteVisible = false;
+            this.autocompleteOptions = [];
+            this.autoCompleteSelected = 0;
+        }
+        CommentFieldComponent.prototype.ngAfterViewInit = function () {
+            var root = document.body.querySelector('[ng-version]') || document.body;
+            root.appendChild(this.autocompleteEl.nativeElement);
+        };
+        CommentFieldComponent.prototype.showAutoComplete = function (options) {
+            this.autoCompleteSelected = 0;
+            this.autocompleteOptions = options;
+            var pos = this.autocompleteContainerEl.nativeElement.getBoundingClientRect();
+            var size = this.autocompleteEl.nativeElement.getBoundingClientRect();
+            this.autocompleteEl.nativeElement.style.left = pos.left + "px";
+            this.autocompleteEl.nativeElement.style.top = pos.top + "px";
+            this.autocompleteEl.nativeElement.style.width = pos.width + "px";
+            this.autocompleteVisible = true;
+        };
+        CommentFieldComponent.prototype.activateAutoComplete = function (option) {
+            option.action();
+            this.dismissAutoComplete();
+        };
+        CommentFieldComponent.prototype.dismissAutoComplete = function () {
+            this.autocompleteVisible = false;
+            this.completionFunc = null;
+            this.completionPrefix = '';
+        };
+        CommentFieldComponent.prototype.indicateError = function (message) {
+            var _this = this;
+            this.sendError = new Error(message);
+            setTimeout(function () {
+                _this.expandError = true;
+                setTimeout(function () {
+                    _this.expandError = false;
+                }, 5 * 1000);
+            });
+        };
+        CommentFieldComponent.prototype.autocomplete = function (replacement) {
+            return __awaiter(this, void 0, void 0, function () {
+                var el;
+                return __generator(this, function (_a) {
+                    el = this.textareaEl.nativeElement;
+                    this.text = this.text.slice(0, el.selectionStart - this.completionPrefix.length) + replacement + this.text.slice(el.selectionStart);
+                    return [2 /*return*/];
+                });
+            });
+        };
+        CommentFieldComponent.prototype.insert = function (str) {
+            return __awaiter(this, void 0, void 0, function () {
+                var el;
+                return __generator(this, function (_a) {
+                    el = this.textareaEl.nativeElement;
+                    this.text = this.text.slice(0, el.selectionStart) + str + this.text.slice(el.selectionStart);
+                    return [2 /*return*/];
+                });
+            });
+        };
+        CommentFieldComponent.prototype.onKeyDown = function (event) {
+            return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            console.log(event.key);
+                            if (this.autocompleteVisible) {
+                                if (event.key === 'Escape') {
+                                    this.dismissAutoComplete();
+                                    return [2 /*return*/];
+                                }
+                                if (event.key === 'Shift') {
+                                    return [2 /*return*/];
+                                }
+                                if (event.key === 'Enter') {
+                                    this.activateAutoComplete(this.autocompleteOptions[this.autoCompleteSelected]);
+                                    event.stopPropagation();
+                                    event.preventDefault();
+                                    return [2 /*return*/];
+                                }
+                                if (event.key === 'ArrowUp') {
+                                    if (this.autoCompleteSelected === 0)
+                                        this.autoCompleteSelected = this.autocompleteOptions.length - 1;
+                                    else
+                                        this.autoCompleteSelected = this.autoCompleteSelected - 1;
+                                    event.stopPropagation();
+                                    event.preventDefault();
+                                    return [2 /*return*/];
+                                }
+                                else if (event.key === 'ArrowDown') {
+                                    this.autoCompleteSelected = (this.autoCompleteSelected + 1) % this.autocompleteOptions.length;
+                                    event.stopPropagation();
+                                    event.preventDefault();
+                                    return [2 /*return*/];
+                                }
+                            }
+                            if (!(event.key === 'Enter' && event.ctrlKey)) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this.sendMessage()];
+                        case 1:
+                            _a.sent();
+                            return [2 /*return*/];
+                        case 2:
+                            if (this.completionFunc) {
+                                if (event.key === 'Backspace') {
+                                    this.completionPrefix = this.completionPrefix.slice(0, this.completionPrefix.length - 1);
+                                    if (this.completionPrefix === '') {
+                                        this.dismissAutoComplete();
+                                        return [2 /*return*/];
+                                    }
+                                }
+                                else if (event.key === ' ' || event.key.length > 1) {
+                                    this.dismissAutoComplete();
+                                    return [2 /*return*/];
+                                }
+                                else {
+                                    this.completionPrefix += event.key;
+                                }
+                                this.showAutoComplete(this.completionFunc(this.completionPrefix));
+                            }
+                            else {
+                                if (event.key === ':') {
+                                    this.startAutoComplete(event, function (prefix) {
+                                        prefix = prefix.slice(1);
+                                        // makes :-), :-( etc work (as they are ":)" etc in the db)
+                                        if (prefix.startsWith('-'))
+                                            prefix = prefix.slice(1);
+                                        return Object.keys(EMOJIS)
+                                            .filter(function (k) { return k.includes(prefix) || EMOJIS[k].keywords.some(function (kw) { return kw.includes(prefix); }); })
+                                            .map(function (k) { return ({
+                                            label: EMOJIS[k].char + " " + k,
+                                            action: function () { return _this.autocomplete(EMOJIS[k].char); }
+                                        }); })
+                                            .slice(0, 5);
+                                    });
+                                }
+                                else if (event.key === '@') {
+                                    this.startAutoComplete(event, function (prefix) {
+                                        prefix = prefix.slice(1);
+                                        return _this.participants.filter(function (x) { return x.username.includes(prefix); })
+                                            .map(function (p) { return ({
+                                            label: "@" + p.username + " -- " + p.displayName,
+                                            action: function () { return _this.autocomplete("@" + p.username); }
+                                        }); });
+                                    });
+                                }
+                                else if (event.key === '#') {
+                                    this.startAutoComplete(event, function (prefix) {
+                                        prefix = prefix.slice(1);
+                                        return _this.hashtags
+                                            .filter(function (ht) { return ht.hashtag.includes(prefix); })
+                                            .map(function (ht) { return ({
+                                            label: "#" + ht.hashtag + (ht.description ? " -- " + ht.description : ""),
+                                            action: function () { return _this.autocomplete("#" + ht.hashtag); }
+                                        }); })
+                                            .slice(0, 5);
+                                    });
+                                }
+                            }
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        CommentFieldComponent.prototype.startAutoComplete = function (event, completionFunc) {
+            this.completionPrefix = event.key;
+            this.completionFunc = completionFunc;
+            this.showAutoComplete(this.completionFunc(this.completionPrefix));
+        };
+        CommentFieldComponent.prototype.onBlur = function () {
+            var _this = this;
+            setTimeout(function () { return _this.dismissAutoComplete(); }, 250);
+        };
+        CommentFieldComponent.prototype.insertEmoji = function (text) {
+            this.text += text;
+        };
+        CommentFieldComponent.prototype.showSignIn = function () {
+            this.signInSelected.next();
+        };
+        CommentFieldComponent.prototype.showEditAvatar = function () {
+            this.editAvatarSelected.next();
+        };
+        CommentFieldComponent.prototype.sendMessage = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var text, message, e_1;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!this.source)
+                                return [2 /*return*/];
+                            this.sending = true;
+                            this.sendError = null;
+                            _a.label = 1;
+                        case 1:
+                            _a.trys.push([1, , 6, 7]);
+                            text = (this.text || '').trim();
+                            if (text === '')
+                                return [2 /*return*/];
+                            message = {
+                                user: this.user,
+                                sentAt: Date.now(),
+                                upvotes: 0,
+                                message: text
+                            };
+                            _a.label = 2;
+                        case 2:
+                            _a.trys.push([2, 4, , 5]);
+                            return [4 /*yield*/, this.source.send(message)];
+                        case 3:
+                            _a.sent();
+                            this.text = '';
+                            return [3 /*break*/, 5];
+                        case 4:
+                            e_1 = _a.sent();
+                            this.indicateError("Could not send: " + e_1.message);
+                            console.error("Failed to send message: ", message);
+                            console.error(e_1);
+                            return [3 /*break*/, 5];
+                        case 5: return [3 /*break*/, 7];
+                        case 6:
+                            this.sending = false;
+                            return [7 /*endfinally*/];
+                        case 7: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        return CommentFieldComponent;
+    }());
+    CommentFieldComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'banta-comment-field',
+                    template: "<form class=\"new-message\" (submit)=\"sendMessage()\">\r\n    <div class=\"avatar-container\">\r\n        <a  href=\"javascript:;\" \r\n            class=\"avatar\" \r\n            (click)=\"showEditAvatar()\" \r\n            [style.background-image]=\"'url(' + user?.avatarUrl + ')'\"\r\n            ></a>\r\n    </div>\r\n    <div class=\"text-container\">\r\n        <div class=\"field-container\">\r\n            <mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n                <mat-label>{{label}}</mat-label>\r\n                <textarea \r\n                    #textarea\r\n                    name=\"message\" \r\n                    placeholder=\"Type your comment\"\r\n                    matInput\r\n                    cdkTextareaAutosize \r\n                    (keydown)=\"onKeyDown($event)\"\r\n                    (blur)=\"onBlur()\"\r\n                    [disabled]=\"sending\"\r\n                    [(ngModel)]=\"text\"></textarea>\r\n            </mat-form-field>\r\n            <div #autocompleteContainer class=\"autocomplete-container\">\r\n                <div #autocomplete class=\"autocomplete\" [class.visible]=\"autocompleteVisible\">\r\n\r\n                    <div>\r\n                        <strong>{{completionPrefix}}</strong>...\r\n                    </div>\r\n\r\n                    <a \r\n                        mat-button \r\n                        *ngFor=\"let option of autocompleteOptions; index as index\" \r\n                        (click)=\"activateAutoComplete(option)\"\r\n                        [class.active]=\"autoCompleteSelected === index\" \r\n                        >\r\n                        {{option.label}}\r\n                    </a>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <mat-spinner *ngIf=\"sending\" class=\"icon loading\" diameter=\"18\" strokeWidth=\"2\"></mat-spinner>\r\n        <div *ngIf=\"sendError\" class=\"error-message\" [class.expanded]=\"expandError\">\r\n            <mat-icon *ngIf=\"sendError\">error</mat-icon>\r\n            {{sendError.message}}\r\n        </div>\r\n        <emoji-selector-button \r\n            class=\"top-right\"\r\n            (selected)=\"insertEmoji($event)\"\r\n            ></emoji-selector-button>\r\n    </div>\r\n    <div class=\"actions\">\r\n        <ng-container *ngIf=\"!user\">\r\n            <button \r\n                mat-raised-button \r\n                color=\"primary\"\r\n                type=\"button\"\r\n                (click)=\"showSignIn()\"\r\n                >{{signInLabel}}</button>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"user\">\r\n            <button \r\n                *ngIf=\"canComment\"\r\n                mat-raised-button \r\n                class=\"send\"\r\n                color=\"primary\"\r\n                [disabled]=\"!text || sending\" \r\n                >\r\n                <mat-icon *ngIf=\"!sending\">chevron_right</mat-icon>\r\n                <mat-spinner *ngIf=\"sending\" class=\"icon\" diameter=\"18\" strokeWidth=\"2\"></mat-spinner>\r\n                <ng-container *ngIf=\"!sending\">\r\n                    {{sendLabel}}\r\n                </ng-container>\r\n                <ng-container *ngIf=\"sending\">\r\n                    {{sendingLabel}}\r\n                </ng-container>\r\n\r\n                </button>\r\n            <button \r\n                *ngIf=\"!canComment\"\r\n                type=\"button\"\r\n                (click)=\"showPermissionDenied()\"\r\n                mat-raised-button \r\n                color=\"primary\"\r\n                >{{permissionDeniedLabel}}</button>\r\n        </ng-container>\r\n    </div>\r\n</form>\r\n",
+                    styles: ["@-webkit-keyframes comment-field-appear{0%{opacity:0;transform:translateY(128px)}to{opacity:1;transform:translate(0)}}@keyframes comment-field-appear{0%{opacity:0;transform:translateY(128px)}to{opacity:1;transform:translate(0)}}:host{-webkit-animation-delay:.4s;-webkit-animation-duration:.8s;-webkit-animation-fill-mode:both;-webkit-animation-name:comment-field-appear;animation-delay:.4s;animation-duration:.8s;animation-fill-mode:both;animation-name:comment-field-appear;display:block;margin:0 2em 0 0}.avatar-container{display:flex;justify-content:flex-end;width:calc(48px + 1.75em)}.avatar-container .avatar{background:pink;background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:100%;height:48px;margin-right:.75em;margin-top:.75em;width:48px}form{align-items:center;display:flex;padding:.5em 0}form .text-container{display:flex;flex-grow:1;position:relative}form .text-container textarea{font-size:14pt;width:100%}form .text-container textarea[disabled]{opacity:.5}form .text-container mat-form-field{margin-bottom:1em}form .text-container emoji-selector-button{bottom:0;position:absolute;right:0}form .text-container .error-message,form .text-container mat-spinner.loading{bottom:.5em;left:.5em;position:absolute}form .text-container .error-message{color:#683333;max-width:1.5em;overflow-x:hidden;transition:max-width 2s ease-in-out;white-space:nowrap}form .text-container .error-message.expanded,form .text-container .error-message:hover{max-width:100%}form .text-container .error-message mat-icon{vertical-align:middle}form input[type=text]{background:#000;border:1px solid #333;color:#fff;height:1em;width:100%}form .actions{margin-left:1em}form button{display:block;margin:0 0 0 auto}form.new-message{align-items:flex-start;display:flex}form.new-message .field-container{display:flex;flex-direction:column;flex-grow:1}form.new-message mat-form-field{width:100%}form.new-message button{margin:1.25em 0 0 1em}button.send{min-width:9em}textarea{max-height:7em}.autocomplete-container{pointer-events:none;position:relative;top:-2em;width:calc(100% - 2em)}.autocomplete{background:#333;display:flex;flex-direction:column;padding:.5em;pointer-events:none;position:absolute;visibility:hidden;z-index:100}.autocomplete.visible{pointer-events:auto;visibility:visible}.autocomplete a{text-align:left;width:100%}.autocomplete a.active{background:#555}"]
+                },] }
+    ];
+    CommentFieldComponent.propDecorators = {
+        source: [{ type: core.Input }],
+        user: [{ type: core.Input }],
+        canComment: [{ type: core.Input }],
+        signInSelected: [{ type: core.Output }],
+        editAvatarSelected: [{ type: core.Output }],
+        sendLabel: [{ type: core.Input }],
+        sendingLabel: [{ type: core.Input }],
+        label: [{ type: core.Input }],
+        permissionDeniedLabel: [{ type: core.Input }],
+        signInLabel: [{ type: core.Input }],
+        autocompleteEl: [{ type: core.ViewChild, args: ['autocomplete',] }],
+        autocompleteContainerEl: [{ type: core.ViewChild, args: ['autocompleteContainer',] }],
+        textareaEl: [{ type: core.ViewChild, args: ['textarea',] }],
+        hashtags: [{ type: core.Input }],
+        participants: [{ type: core.Input }]
+    };
+
     var COMPONENTS$3 = [
         CommentComponent,
         CommentViewComponent,
         BantaCommentsComponent,
-        LiveCommentComponent
+        LiveCommentComponent,
+        CommentFieldComponent
     ];
     var CommentsModule = /** @class */ (function () {
         function CommentsModule() {
@@ -8778,6 +9232,7 @@
     exports.ChatModule = ChatModule;
     exports.ChatViewComponent = ChatViewComponent;
     exports.CommentComponent = CommentComponent;
+    exports.CommentFieldComponent = CommentFieldComponent;
     exports.CommentViewComponent = CommentViewComponent;
     exports.CommentsModule = CommentsModule;
     exports.EMOJIS = EMOJIS;