@banta/sdk 4.6.2 → 4.6.4

package/bundles/banta-sdk.umd.js

@@ -8620,6 +8620,7 @@
 
     var CommentViewComponent = /** @class */ (function () {
         function CommentViewComponent(backend) {
+            var _this = this;
             this.backend = backend;
             this._sourceSubs = new rxjs.Subscription();
             this._selected = new rxjs.Subject();
@@ -8638,6 +8639,7 @@
             this.menuMessage = null;
             this.messages = [];
             this.customSortEnabled = false;
+            this.sourceLoaded = new Promise(function (r) { return _this.markSourceLoaded = r; });
             this.maxMessages = 2000;
             this.maxVisibleMessages = 200;
             this.newestLast = false;
@@ -8655,6 +8657,61 @@
             enumerable: false,
             configurable: true
         });
+        /**
+         * Returns true if this message can be found within one of the message buffers (older, current, newer)
+         * @param message
+         */
+        CommentViewComponent.prototype.isMessageLoadedInContext = function (message) {
+            return this.olderMessages.find(function (x) { return x.id === message.id; })
+                || this.messages.find(function (x) { return x.id === message.id; })
+                || this.newMessages.find(function (x) { return x.id === message.id; });
+        };
+        CommentViewComponent.prototype.loadMessageInContext = function (message) {
+            return __awaiter(this, void 0, void 0, function () {
+                var pageSize, items, index, startIndex;
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0: return [4 /*yield*/, this.sourceLoaded];
+                        case 1:
+                            _c.sent();
+                            console.log("Loading message " + message.id + " in context...");
+                            _c.label = 2;
+                        case 2:
+                            if (!(this.hasMore && !this.isMessageLoadedInContext(message))) return [3 /*break*/, 4];
+                            console.log("...Need to load more comments to find " + message.id);
+                            return [4 /*yield*/, this.showMore()];
+                        case 3:
+                            _c.sent();
+                            return [3 /*break*/, 2];
+                        case 4:
+                            console.log("Finished loading comments, hasMore=" + this.hasMore);
+                            if (!this.isMessageLoadedInContext(message)) {
+                                console.error("Error while loading message in context: Failed to find message " + message.id + ", maybe it was deleted!");
+                                return [2 /*return*/, false];
+                            }
+                            pageSize = this.maxVisibleMessages;
+                            items = [].concat(this.olderMessages, this.messages, this.newMessages);
+                            index = items.findIndex(function (x) { return x.id === message.id; });
+                            if (index < 0) {
+                                console.error("Error while loading message in context: Message was not present in message list!");
+                                return [2 /*return*/, false];
+                            }
+                            console.log("Total messages: " + items.length);
+                            console.log("Page size: " + pageSize);
+                            console.log("Message index: " + index);
+                            startIndex = Math.max(0, index - pageSize / 2);
+                            console.log("Start index: " + index);
+                            this.newMessages = items.splice(0, startIndex);
+                            this.messages = items.splice(0, pageSize);
+                            this.olderMessages = items;
+                            console.log(this.olderMessages.length + " older messages");
+                            console.log(this.messages.length + " current messages");
+                            console.log(this.newMessages.length + " newer messages");
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
         /**
          * Get the CommentComponent instantiated for the given ChatMessage,
          * if it exists in the current view. Note that messages which are not
@@ -8796,6 +8853,8 @@
                             messages.forEach(function (m) { var _a; return (_a = m.transientState) !== null && _a !== void 0 ? _a : (m.transientState = {}); });
                             this.messages = this.newestLast ? messages.slice().reverse() : messages;
                             this.sortMessages();
+                            if (this.markSourceLoaded)
+                                this.markSourceLoaded();
                             return [2 /*return*/];
                     }
                 });
@@ -8821,6 +8880,7 @@
                     overflow = this.messages.splice(this.maxVisibleMessages, this.messages.length);
                     this.olderMessages = overflow.concat(this.olderMessages);
                     this.olderMessages.splice(this.maxMessages - this.maxVisibleMessages, this.olderMessages.length);
+                    this.hasMore = this.olderMessages.length > 0;
                     return [2 /*return*/];
                 });
             });
@@ -9040,6 +9100,7 @@
             this.activatedRoute = activatedRoute;
             this.matSnackBar = matSnackBar;
             this.ngZone = ngZone;
+            this.viewReady = new Promise(function (r) { return _this.markViewReady = r; });
             // Loading Screen
             this._loadingMessage = '';
             this.loadingMessageVisible = false;
@@ -9057,6 +9118,7 @@
                 "We'll keep trying, but it's not looking great. \n            Commenting & chat services may be down. \n            If you continue to experience issues, please contact support.\n        "
             ];
             this.useInlineReplies = true;
+            this.loaded = new Promise(function (r) { return _this.markLoaded = r; });
             // Properties
             this._signInSelected = new rxjs.Subject();
             this._permissionDeniedError = new rxjs.Subject();
@@ -9093,6 +9155,7 @@
                 { hashtag: 'timeout', description: 'Cause a slow timeout error' },
                 { hashtag: 'slow', description: 'Be slow when this message is posted' },
             ];
+            this.loadingSharedComment = false;
             this.sendMessage = function (message) { return __awaiter(_this, void 0, void 0, function () {
                 var _a, intercept, e_1;
                 return __generator(this, function (_e) {
@@ -9225,6 +9288,7 @@
                 }
                 callback();
             }
+            this.markViewReady();
         };
         BantaCommentsComponent.prototype.ngOnDestroy = function () {
             this._subs.unsubscribe();
@@ -9344,6 +9408,7 @@
                 this.loadingMessage = "Here we go!";
                 setTimeout(function () {
                     _this.loading = false;
+                    _this.markLoaded();
                 }, 750);
                 return true;
             }
@@ -9378,6 +9443,7 @@
                     this._source.messages.forEach(function (m) { return _this.addParticipant(m); });
                     this._sourceSubscription.add(this._source.messageReceived.subscribe(function (m) { return _this.addParticipant(m); }));
                     this._sourceSubscription.add(this._source.messageSent.subscribe(function (m) { return _this.addParticipant(m); }));
+                    this._sourceSubscription.add(this._source.messageObserved.subscribe(function (m) { return _this.addParticipant(m); }));
                     this._sourceSubscription.add(this._source.messageUpdated.subscribe(function (msg) {
                         var _a;
                         console.log("comments received message: ", msg);
@@ -9478,7 +9544,10 @@
                 var comment = document.querySelectorAll("[data-comment-id=\"" + commentId + "\"]");
                 if (comment.length > 0) {
                     // comment.item(0).scroll({behavior: 'smooth'});
-                    comment.item(0).scrollIntoView();
+                    comment.item(0).scrollIntoView({
+                        inline: 'center',
+                        block: 'center'
+                    });
                 }
             }, 1000);
         };
@@ -9489,55 +9558,74 @@
                 return __generator(this, function (_e) {
                     switch (_e.label) {
                         case 0:
+                            this.loadingSharedComment = true;
                             source = this.source;
                             return [4 /*yield*/, source.ready];
                         case 1:
                             _e.sent();
-                            console.log("Navigating to shared comment with ID '" + id + "'...");
-                            _e.label = 2;
+                            return [4 /*yield*/, this.viewReady];
                         case 2:
-                            _e.trys.push([2, 4, , 5]);
-                            return [4 /*yield*/, this.source.get(id)];
+                            _e.sent();
+                            return [4 /*yield*/, this.loaded];
                         case 3:
-                            message = _e.sent();
-                            return [3 /*break*/, 5];
+                            _e.sent();
+                            console.log("Navigating to shared comment with ID '" + id + "'...");
+                            _e.label = 4;
                         case 4:
+                            _e.trys.push([4, 6, , 7]);
+                            return [4 /*yield*/, this.source.get(id)];
+                        case 5:
+                            message = _e.sent();
+                            return [3 /*break*/, 7];
+                        case 6:
                             e_3 = _e.sent();
                             console.error("Failed to find comment from URL: " + e_3.message);
+                            alert("Could not load desired comment. It may have been removed.");
                             return [2 /*return*/];
-                        case 5:
+                        case 7:
                             (_a = message.transientState) !== null && _a !== void 0 ? _a : (message.transientState = {});
-                            if (!message.parentMessageId) return [3 /*break*/, 11];
+                            if (!message.parentMessageId) return [3 /*break*/, 14];
                             return [4 /*yield*/, this.source.get(message.parentMessageId)];
-                        case 6:
+                        case 8:
                             parentMessage = _e.sent();
                             (_b = parentMessage.transientState) !== null && _b !== void 0 ? _b : (parentMessage.transientState = {});
+                            // Make sure that this message is loaded and visible to the user
+                            return [4 /*yield*/, this.commentView.loadMessageInContext(parentMessage)];
+                        case 9:
+                            // Make sure that this message is loaded and visible to the user
+                            _e.sent();
                             return [4 /*yield*/, this.selectMessage(parentMessage)];
-                        case 7:
+                        case 10:
                             thread = _e.sent();
                             // Need to re-retrieve the message within the new chat source to affect its
                             // transient state.
                             return [4 /*yield*/, thread.ready];
-                        case 8:
+                        case 11:
                             // Need to re-retrieve the message within the new chat source to affect its
                             // transient state.
                             _e.sent();
                             return [4 /*yield*/, thread.get(message.id)];
-                        case 9:
+                        case 12:
                             message = _e.sent();
                             (_c = message.transientState) !== null && _c !== void 0 ? _c : (message.transientState = {});
                             message.transientState.highlighted = true;
                             console.dir(message);
                             return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(function () { return resolve(); }, 500); })];
-                        case 10:
+                        case 13:
+                            _e.sent();
+                            return [3 /*break*/, 16];
+                        case 14: 
+                        // Make sure that this message is loaded and visible to the user
+                        return [4 /*yield*/, this.commentView.loadMessageInContext(message)];
+                        case 15:
+                            // Make sure that this message is loaded and visible to the user
                             _e.sent();
-                            return [3 /*break*/, 12];
-                        case 11:
                             (_d = message.transientState) !== null && _d !== void 0 ? _d : (message.transientState = {});
                             message.transientState.highlighted = true;
-                            _e.label = 12;
-                        case 12:
+                            _e.label = 16;
+                        case 16:
                             this.scrollToComment(id);
+                            this.loadingSharedComment = false;
                             return [2 /*return*/];
                     }
                 });
@@ -9849,8 +9937,8 @@
     BantaCommentsComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'banta-comments',
-                    template: "<ng-container *ngIf=\"loading\">\r\n    <div class=\"loading-screen\" [class.visible]=\"showLoadingScreen\">\r\n        <h1>Loading...</h1>\r\n        <div>\r\n            <mat-spinner [diameter]=\"300\" [strokeWidth]=\"2\"></mat-spinner>\r\n        </div>\r\n\r\n        <p class=\"loading-message\" [class.visible]=\"loadingMessageVisible\">{{loadingMessage}}</p>\r\n    </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"!loading\">\r\n    <div class=\"focused\" [class.visible]=\"selectedMessageVisible\" *ngIf=\"selectedMessage && !useInlineReplies\">\r\n\r\n        <div>\r\n            <a mat-button href=\"javascript:;\" (click)=\"unselectMessage()\">\r\n                <mat-icon>arrow_back</mat-icon>\r\n                Latest Comments\r\n            </a>\r\n        </div>\r\n\r\n        <banta-comment\r\n            [message]=\"selectedMessage\"\r\n            [liking]=\"selectedMessage.transientState.liking\"\r\n            [mine]=\"user?.id === selectedMessage.user?.id\"\r\n            [permissions]=\"source?.permissions\"\r\n            [showReplyAction]=\"false\"\r\n            [editing]=\"selectedMessage.transientState.editing\"\r\n            [maxLength]=\"maxCommentLength\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            (editStarted)=\"startEditing(selectedMessage)\"\r\n            (editEnded)=\"selectedMessage.transientState.editing = false\"\r\n            (edited)=\"saveEdit(selectedMessage, $event)\"\r\n            (userSelected)=\"selectMessageUser(selectedMessage)\"\r\n            (avatarSelected)=\"selectAvatar($event)\"\r\n            (usernameSelected)=\"selectUsername($event)\"\r\n            (liked)=\"likeMessage(source, selectedMessage)\"\r\n            (unliked)=\"unlikeMessage(source, selectedMessage)\"\r\n            (reported)=\"reportMessage(selectedMessage)\"\r\n            (selected)=\"selectMessage(selectedMessage)\"\r\n            (shared)=\"shareMessage($event)\"\r\n            (deleted)=\"deleteMessage(selectedMessage)\"\r\n            ></banta-comment>\r\n\r\n        <div class=\"replies\">\r\n\r\n            <ng-container *ngIf=\"!selectedMessageThread\">\r\n                <div class=\"loading\">\r\n                    <mat-spinner></mat-spinner>\r\n                </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"selectedMessageThread\">\r\n                <banta-comment-view\r\n                    class=\"replies\"\r\n                    #threadView\r\n                    [source]=\"selectedMessageThread\"\r\n                    [allowReplies]=\"false\"\r\n                    [fixedHeight]=\"false\"\r\n                    [showEmptyState]=\"false\"\r\n                    [newestLast]=\"true\"\r\n                    [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                    (liked)=\"likeMessage(selectedMessageThread, $event)\"\r\n                    (unliked)=\"unlikeMessage(selectedMessageThread, $event)\"\r\n                    (messageEdited)=\"editMessage(selectedMessageThread, $event.message, $event.newMessage)\"\r\n                    (reported)=\"reportMessage($event)\"\r\n                    (usernameSelected)=\"selectUsername($event)\"\r\n                    (avatarSelected)=\"selectAvatar($event)\"\r\n                    (shared)=\"shareMessage($event)\"\r\n                    (deleted)=\"deleteMessage($event)\"\r\n                    [customMenuItems]=\"customMenuItems\"\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                    [maxLength]=\"maxCommentLength\"\r\n                    [canComment]=\"source?.permissions?.canPost\"\r\n                    [signInLabel]=\"signInLabel\"\r\n                    [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n                    (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n                    [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n                    [user]=\"user\"\r\n                    [label]=\"postReplyLabel\"\r\n                    [submit]=\"sendReply\"\r\n                    [allowAttachments]=\"allowAttachments\"\r\n                    [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                    >\r\n                    <ng-container *ngTemplateOutlet=\"sendReplyOptionsTemplate\"></ng-container>\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 && !useInlineReplies\">\r\n        <banta-comment-field\r\n            [source]=\"source\"\r\n            [user]=\"user\"\r\n            [sendLabel]=\"sendLabel\"\r\n            [sendingLabel]=\"sendingLabel\"\r\n            [signInLabel]=\"signInLabel\"\r\n            [canComment]=\"source?.permissions?.canPost\"\r\n            [hashtags]=\"hashtags\"\r\n            [participants]=\"participants\"\r\n            [label]=\"postCommentLabel\"\r\n            [maxLength]=\"maxCommentLength\"\r\n            (editAvatarSelected)=\"showEditAvatar()\"\r\n            (signInSelected)=\"showSignIn()\"\r\n            [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n            (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n            [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n            [submit]=\"sendMessage\"\r\n            [allowAttachments]=\"allowAttachments\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            >\r\n        \r\n        </banta-comment-field>\r\n\r\n        <banta-comment-sort\r\n            [(sort)]=\"sortOrder\"></banta-comment-sort>\r\n\r\n        <banta-comment-view\r\n            #commentView\r\n            [class.faded]=\"selectedMessage && !useInlineReplies\"\r\n            [source]=\"source\"\r\n            [fixedHeight]=\"fixedHeight\"\r\n            [maxMessages]=\"maxMessages\"\r\n            [maxVisibleMessages]=\"maxVisibleMessages\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            [customMenuItems]=\"customMenuItems\"\r\n            (userSelected)=\"selectMessageUser($event)\"\r\n            (sortOrderChanged)=\"sortOrder = $event\"\r\n            (selected)=\"selectMessage($event)\"\r\n            (liked)=\"likeMessage(source, $event)\"\r\n            (unliked)=\"unlikeMessage(source, $event)\"\r\n            (messageEdited)=\"editMessage(source, $event.message, $event.newMessage)\"\r\n            (reported)=\"reportMessage($event)\"\r\n            (usernameSelected)=\"selectUsername($event)\"\r\n            (avatarSelected)=\"selectAvatar($event)\"\r\n            (shared)=\"shareMessage($event)\"\r\n            [selectedMessage]=\"selectedMessage\"\r\n            (deleted)=\"deleteMessage($event)\"\r\n            >\r\n            <div class=\"inline-replies\">\r\n                <div class=\"focused\" [class.visible]=\"selectedMessageVisible\" *ngIf=\"selectedMessage\">\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                                [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                                (liked)=\"likeMessage(selectedMessageThread, $event)\"\r\n                                (unliked)=\"unlikeMessage(selectedMessageThread, $event)\"\r\n                                (messageEdited)=\"editMessage(selectedMessageThread, $event.message, $event.newMessage)\"\r\n                                (reported)=\"reportMessage($event)\"\r\n                                (usernameSelected)=\"selectUsername($event)\"\r\n                                (avatarSelected)=\"selectAvatar($event)\"\r\n                                (shared)=\"shareMessage($event)\"\r\n                                (deleted)=\"deleteMessage($event)\"\r\n                                ></banta-comment-view>\r\n            \r\n                            <banta-comment-field\r\n                                [sendLabel]=\"replyLabel\"\r\n                                [sendingLabel]=\"sendingLabel\"\r\n                                [hashtags]=\"hashtags\"\r\n                                [participants]=\"participants\"\r\n                                (signInSelected)=\"showSignIn()\"\r\n                                [maxLength]=\"maxCommentLength\"\r\n                                (editAvatarSelected)=\"showEditAvatar()\"\r\n                                [source]=\"selectedMessageThread\"\r\n                                [canComment]=\"source?.permissions?.canPost\"\r\n                                [signInLabel]=\"signInLabel\"\r\n                                [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n                                (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n                                [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n                                [user]=\"user\"\r\n                                [label]=\"postReplyLabel\"\r\n                                [submit]=\"sendReply\"\r\n                                [allowAttachments]=\"allowAttachments\"\r\n                                [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                                >\r\n                                <ng-container *ngTemplateOutlet=\"sendReplyOptionsTemplate\"></ng-container>\r\n                            </banta-comment-field>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>            \r\n            </div>\r\n        </banta-comment-view>\r\n    </div>\r\n</ng-container>\r\n",
-                    styles: [":host{display:flex;flex-direction:column}@-webkit-keyframes select-comment{0%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes select-comment{0%{transform:scale(1.15)}to{transform:scale(1)}}.focused{-webkit-animation-name:select-comment;animation-name:select-comment;-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.focused .replies{margin-top:1em;margin-left:2em;border-left:2px solid #333;padding-left:2em}banta-comment-view{opacity:1;transition:opacity .4s ease-in-out}banta-comment-view.faded{opacity:.25}.loading{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:0 auto;min-height:16em}.main.hidden{display:none}.loading-screen{text-align:center;opacity:0;transition:opacity .25s ease-in-out}.loading-screen.visible{opacity:1}.loading-screen h1{font-weight:100}.loading-screen mat-spinner{margin:5em auto}.loading-screen .loading-message{opacity:0;transition:opacity .25s ease-in-out;width:500px;max-width:100%;margin:0 auto}.loading-screen .loading-message.visible{opacity:1}banta-comment-sort{margin:0 0 0 auto;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;display:block}.inline-replies{margin-left:4em}@media (max-width:500px){.focused .replies{margin-left:0}.inline-replies{margin-left:1em}.focused .replies{padding-left:.5em}banta-comment-sort{margin:0;width:100%}}:host-context(.banta-mobile) .focused .replies{margin-left:0}:host-context(.banta-mobile) .inline-replies{margin-left:1em}:host-context(.banta-mobile) .focused .replies{padding-left:.5em}:host-context(.banta-mobile) banta-comment-sort{margin:0;width:100%}"]
+                    template: "<ng-container *ngIf=\"loading\">\r\n    <div class=\"loading-screen\" [class.visible]=\"showLoadingScreen\">\r\n        <h1>Loading...</h1>\r\n        <div>\r\n            <mat-spinner [diameter]=\"300\" [strokeWidth]=\"2\"></mat-spinner>\r\n        </div>\r\n\r\n        <p class=\"loading-message\" [class.visible]=\"loadingMessageVisible\">{{loadingMessage}}</p>\r\n    </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"!loading\">\r\n    <div class=\"focused\" [class.visible]=\"selectedMessageVisible\" *ngIf=\"selectedMessage && !useInlineReplies\">\r\n\r\n        <div>\r\n            <a mat-button href=\"javascript:;\" (click)=\"unselectMessage()\">\r\n                <mat-icon>arrow_back</mat-icon>\r\n                Latest Comments\r\n            </a>\r\n        </div>\r\n\r\n        <banta-comment\r\n            [message]=\"selectedMessage\"\r\n            [liking]=\"selectedMessage.transientState.liking\"\r\n            [mine]=\"user?.id === selectedMessage.user?.id\"\r\n            [permissions]=\"source?.permissions\"\r\n            [showReplyAction]=\"false\"\r\n            [editing]=\"selectedMessage.transientState.editing\"\r\n            [maxLength]=\"maxCommentLength\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            (editStarted)=\"startEditing(selectedMessage)\"\r\n            (editEnded)=\"selectedMessage.transientState.editing = false\"\r\n            (edited)=\"saveEdit(selectedMessage, $event)\"\r\n            (userSelected)=\"selectMessageUser(selectedMessage)\"\r\n            (avatarSelected)=\"selectAvatar($event)\"\r\n            (usernameSelected)=\"selectUsername($event)\"\r\n            (liked)=\"likeMessage(source, selectedMessage)\"\r\n            (unliked)=\"unlikeMessage(source, selectedMessage)\"\r\n            (reported)=\"reportMessage(selectedMessage)\"\r\n            (selected)=\"selectMessage(selectedMessage)\"\r\n            (shared)=\"shareMessage($event)\"\r\n            (deleted)=\"deleteMessage(selectedMessage)\"\r\n            ></banta-comment>\r\n\r\n        <div class=\"replies\">\r\n\r\n            <ng-container *ngIf=\"!selectedMessageThread\">\r\n                <div class=\"loading\">\r\n                    <mat-spinner></mat-spinner>\r\n                </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"selectedMessageThread\">\r\n                <banta-comment-view\r\n                    class=\"replies\"\r\n                    #threadView\r\n                    [source]=\"selectedMessageThread\"\r\n                    [allowReplies]=\"false\"\r\n                    [fixedHeight]=\"false\"\r\n                    [showEmptyState]=\"false\"\r\n                    [newestLast]=\"true\"\r\n                    [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                    (liked)=\"likeMessage(selectedMessageThread, $event)\"\r\n                    (unliked)=\"unlikeMessage(selectedMessageThread, $event)\"\r\n                    (messageEdited)=\"editMessage(selectedMessageThread, $event.message, $event.newMessage)\"\r\n                    (reported)=\"reportMessage($event)\"\r\n                    (usernameSelected)=\"selectUsername($event)\"\r\n                    (avatarSelected)=\"selectAvatar($event)\"\r\n                    (shared)=\"shareMessage($event)\"\r\n                    (deleted)=\"deleteMessage($event)\"\r\n                    [customMenuItems]=\"customMenuItems\"\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                    [maxLength]=\"maxCommentLength\"\r\n                    [canComment]=\"source?.permissions?.canPost\"\r\n                    [signInLabel]=\"signInLabel\"\r\n                    [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n                    (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n                    [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n                    [user]=\"user\"\r\n                    [label]=\"postReplyLabel\"\r\n                    [submit]=\"sendReply\"\r\n                    [allowAttachments]=\"allowAttachments\"\r\n                    [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                    >\r\n                    <ng-container *ngTemplateOutlet=\"sendReplyOptionsTemplate\"></ng-container>\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 && !useInlineReplies\">\r\n        <banta-comment-field\r\n            [source]=\"source\"\r\n            [user]=\"user\"\r\n            [sendLabel]=\"sendLabel\"\r\n            [sendingLabel]=\"sendingLabel\"\r\n            [signInLabel]=\"signInLabel\"\r\n            [canComment]=\"source?.permissions?.canPost\"\r\n            [hashtags]=\"hashtags\"\r\n            [participants]=\"participants\"\r\n            [label]=\"postCommentLabel\"\r\n            [maxLength]=\"maxCommentLength\"\r\n            (editAvatarSelected)=\"showEditAvatar()\"\r\n            (signInSelected)=\"showSignIn()\"\r\n            [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n            (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n            [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n            [submit]=\"sendMessage\"\r\n            [allowAttachments]=\"allowAttachments\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            >\r\n        \r\n        </banta-comment-field>\r\n\r\n        <banta-comment-sort\r\n            [(sort)]=\"sortOrder\"></banta-comment-sort>\r\n\r\n        <div class=\"loading-comment\" *ngIf=\"loadingSharedComment\">\r\n            <h1>Loading desired comment...</h1>\r\n            <mat-spinner [diameter]=\"300\" [strokeWidth]=\"2\"></mat-spinner>\r\n            <p>\r\n                If there are a lot of comments, this might take awhile!\r\n            </p>\r\n        </div>\r\n        <banta-comment-view\r\n            #commentView\r\n            [class.faded]=\"selectedMessage && !useInlineReplies\"\r\n            [source]=\"source\"\r\n            [fixedHeight]=\"fixedHeight\"\r\n            [maxMessages]=\"maxMessages\"\r\n            [maxVisibleMessages]=\"maxVisibleMessages\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            [customMenuItems]=\"customMenuItems\"\r\n            (userSelected)=\"selectMessageUser($event)\"\r\n            (sortOrderChanged)=\"sortOrder = $event\"\r\n            (selected)=\"selectMessage($event)\"\r\n            (liked)=\"likeMessage(source, $event)\"\r\n            (unliked)=\"unlikeMessage(source, $event)\"\r\n            (messageEdited)=\"editMessage(source, $event.message, $event.newMessage)\"\r\n            (reported)=\"reportMessage($event)\"\r\n            (usernameSelected)=\"selectUsername($event)\"\r\n            (avatarSelected)=\"selectAvatar($event)\"\r\n            (shared)=\"shareMessage($event)\"\r\n            [selectedMessage]=\"selectedMessage\"\r\n            (deleted)=\"deleteMessage($event)\"\r\n            >\r\n            <div class=\"inline-replies\">\r\n                <div class=\"focused\" [class.visible]=\"selectedMessageVisible\" *ngIf=\"selectedMessage\">\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                                [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                                (liked)=\"likeMessage(selectedMessageThread, $event)\"\r\n                                (unliked)=\"unlikeMessage(selectedMessageThread, $event)\"\r\n                                (messageEdited)=\"editMessage(selectedMessageThread, $event.message, $event.newMessage)\"\r\n                                (reported)=\"reportMessage($event)\"\r\n                                (usernameSelected)=\"selectUsername($event)\"\r\n                                (avatarSelected)=\"selectAvatar($event)\"\r\n                                (shared)=\"shareMessage($event)\"\r\n                                (deleted)=\"deleteMessage($event)\"\r\n                                ></banta-comment-view>\r\n            \r\n                            <banta-comment-field\r\n                                [sendLabel]=\"replyLabel\"\r\n                                [sendingLabel]=\"sendingLabel\"\r\n                                [hashtags]=\"hashtags\"\r\n                                [participants]=\"participants\"\r\n                                (signInSelected)=\"showSignIn()\"\r\n                                [maxLength]=\"maxCommentLength\"\r\n                                (editAvatarSelected)=\"showEditAvatar()\"\r\n                                [source]=\"selectedMessageThread\"\r\n                                [canComment]=\"source?.permissions?.canPost\"\r\n                                [signInLabel]=\"signInLabel\"\r\n                                [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n                                (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n                                [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n                                [user]=\"user\"\r\n                                [label]=\"postReplyLabel\"\r\n                                [submit]=\"sendReply\"\r\n                                [allowAttachments]=\"allowAttachments\"\r\n                                [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                                >\r\n                                <ng-container *ngTemplateOutlet=\"sendReplyOptionsTemplate\"></ng-container>\r\n                            </banta-comment-field>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>            \r\n            </div>\r\n        </banta-comment-view>\r\n    </div>\r\n</ng-container>\r\n",
+                    styles: [":host{display:flex;flex-direction:column}@-webkit-keyframes select-comment{0%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes select-comment{0%{transform:scale(1.15)}to{transform:scale(1)}}.focused{-webkit-animation-name:select-comment;animation-name:select-comment;-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.focused .replies{margin-top:1em;margin-left:2em;border-left:2px solid #333;padding-left:2em}banta-comment-view{opacity:1;transition:opacity .4s ease-in-out}banta-comment-view.faded{opacity:.25}.loading{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:0 auto;min-height:16em}.main.hidden{display:none}.loading-screen{text-align:center;opacity:0;transition:opacity .25s ease-in-out}.loading-screen.visible{opacity:1}.loading-screen h1{font-weight:100}.loading-screen mat-spinner{margin:5em auto}.loading-screen .loading-message{opacity:0;transition:opacity .25s ease-in-out;width:500px;max-width:100%;margin:0 auto}.loading-screen .loading-message.visible{opacity:1}banta-comment-sort{margin:0 0 0 auto;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;display:block}.inline-replies{margin-left:4em}@media (max-width:500px){.focused .replies{margin-left:0}.inline-replies{margin-left:1em}.focused .replies{padding-left:.5em}banta-comment-sort{margin:0;width:100%}}:host-context(.banta-mobile) .focused .replies{margin-left:0}:host-context(.banta-mobile) .inline-replies{margin-left:1em}:host-context(.banta-mobile) .focused .replies{padding-left:.5em}:host-context(.banta-mobile) banta-comment-sort{margin:0;width:100%}.loading-comment{z-index:100;border:1px solid #333;background:#000;color:#fff;padding:1em;border-radius:4px;text-align:center}.loading-comment h1{font-weight:100;text-align:center}.loading-comment mat-spinner{margin:0 auto}"]
                 },] }
     ];
     BantaCommentsComponent.ctorParameters = function () { return [
@@ -10326,10 +10414,12 @@
                                     return [2 /*return*/];
                                 }
                                 if (event.key === 'Enter') {
-                                    this.activateAutoComplete(this.autocompleteOptions[this.autoCompleteSelected]);
-                                    event.stopPropagation();
-                                    event.preventDefault();
-                                    return [2 /*return*/];
+                                    if (this.autocompleteOptions[this.autoCompleteSelected]) {
+                                        this.activateAutoComplete(this.autocompleteOptions[this.autoCompleteSelected]);
+                                        event.stopPropagation();
+                                        event.preventDefault();
+                                        return [2 /*return*/];
+                                    }
                                 }
                                 if (event.key === 'ArrowUp') {
                                     if (this.autoCompleteSelected === 0)
@@ -10721,6 +10811,7 @@
             _this._messageReceived = new rxjs.Subject();
             _this._messageUpdated = new rxjs.Subject();
             _this._messageSent = new rxjs.Subject();
+            _this._messageObserved = new rxjs.Subject();
             _this.messages = [];
             _this.ready = new Promise(function (resolve) { return _this.markReady = resolve; });
             return _this;
@@ -10798,10 +10889,13 @@
         };
         ChatSource.prototype.mapOrUpdateMessage = function (message) {
             var existingMessage = this.messageMap.get(message.id);
-            if (existingMessage)
+            if (existingMessage) {
                 message = Object.assign(existingMessage, message);
-            else
+            }
+            else {
                 this.messageMap.set(message.id, message);
+                this._messageObserved.next(message);
+            }
             return message;
         };
         ChatSource.prototype.getExistingMessages = function () {
@@ -10920,6 +11014,11 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(ChatSource.prototype, "messageObserved", {
+            get: function () { return this._messageObserved.asObservable(); },
+            enumerable: false,
+            configurable: true
+        });
         ChatSource.prototype.send = function (message) {
             return __awaiter(this, void 0, void 0, function () {
                 return __generator(this, function (_b) {