@banta/sdk 4.5.1 → 4.5.4

package/bundles/banta-sdk.umd.js

@@ -8421,7 +8421,7 @@
         }
         CommentComponent.prototype.ngOnInit = function () {
             var _this = this;
-            var maxTime = 500;
+            var maxTime = 100;
             var minTime = 0;
             var randomTime = minTime + Math.random() * (maxTime - minTime);
             setTimeout(function () {
@@ -8577,7 +8577,7 @@
         { type: core.Component, args: [{
                     selector: 'banta-comment',
                     template: "\r\n<mat-menu #pointItemMenu=\"matMenu\">\r\n    <button mat-menu-item (click)=\"share()\">\r\n        <mat-icon>share</mat-icon>\r\n        Share\r\n    </button>\r\n    <button *ngIf=\"!mine\" mat-menu-item (click)=\"report()\">\r\n        <mat-icon>warning</mat-icon>\r\n        Report\r\n    </button>\r\n    <button *ngIf=\"mine\" [disabled]=\"!permissions?.canEdit\" mat-menu-item (click)=\"startEdit()\">\r\n        <mat-icon>edit</mat-icon>\r\n        Edit\r\n    </button>\r\n    <button *ngIf=\"mine\" [disabled]=\"!permissions?.canDelete\" mat-menu-item (click)=\"delete()\">\r\n        <mat-icon>delete</mat-icon>\r\n        Delete\r\n    </button>\r\n\r\n    <button *ngFor=\"let menuItem of customMenuItems\" mat-menu-item (click)=\"menuItem.action(message)\">\r\n        <mat-icon>{{menuItem.icon}}</mat-icon>\r\n        {{menuItem.label}}\r\n    </button>\r\n\r\n</mat-menu>\r\n\r\n<div class=\"message-content\">\r\n    <div class=\"user\">\r\n        <div class=\"user-1\">\r\n            <a\r\n                href=\"javascript:;\"\r\n                class=\"avatar\"\r\n                (click)=\"selectAvatar(message.user)\"\r\n                [style.background-image]=\"avatarForUser(message.user)\"></a>\r\n            <div class=\"user-identity\">\r\n                <a href=\"javascript:;\" class=\"display-name\" (click)=\"selectUser()\">{{message.user.displayName}}</a>\r\n                <a href=\"javascript:;\" class=\"username\" (click)=\"selectUsername(message.user)\">@{{message.user.username}}</a>\r\n            </div>\r\n        </div>\r\n        <div class=\"user-2\">\r\n            <span class=\"user-tag\" *ngIf=\"message.user.tag\">{{message.user.tag}}</span>\r\n            <banta-timestamp [value]=\"message.sentAt\"></banta-timestamp>\r\n            <span class=\"spacer\"></span>\r\n        </div>\r\n    </div>\r\n    <div class=\"content\" *ngIf=\"!editing\">\r\n        <span class=\"banta-message-content\" [innerHTML]=\"message.message | markdownToHtml\"></span>\r\n        <banta-attachments [attachments]=\"message.attachments\"></banta-attachments>\r\n        <ul class=\"message-facts\">\r\n            <li *ngIf=\"message.edits?.length > 0\">(Edited)</li>\r\n        </ul>\r\n    </div>\r\n    <div class=\"content\" *ngIf=\"editing\" style=\"padding-bottom: 2em;\">\r\n        <div>\r\n            <mat-form-field floatLabel=\"always\" appearance=\"outline\" style=\"width: 100%;\">\r\n                <mat-label>Edit Message</mat-label>\r\n                <textarea matInput [(ngModel)]=\"editedMessage\" [maxlength]=\"maxLength\"></textarea>\r\n            </mat-form-field>\r\n        </div>\r\n        <button mat-raised-button (click)=\"saveEdit()\">Save</button> &nbsp;\r\n        <button mat-button (click)=\"endEditing()\">Cancel</button>\r\n    </div>\r\n\r\n\r\n    <div class=\"actions\">\r\n        <div class=\"spacer\"></div>\r\n        <div class=\"counted-action\" *ngIf=\"showReplyAction\">\r\n            <button mat-button [matTooltip]=\"replyCount > 0 ? 'Replies' : 'Reply'\" matTooltipPosition=\"below\" (click)=\"select()\">\r\n                <mat-icon [inline]=\"true\">comment</mat-icon>\r\n                <span class=\"count-indicator\">\r\n                    {{replyCount > 0 ? 'Replies' : 'Reply'}}\r\n                    {{replyCount > 0 ? '(' + replyCount + ')' : ''}}\r\n                </span>\r\n            </button>\r\n        </div>\r\n        <div class=\"counted-action\" [class.active]=\"message.userState?.liked\">\r\n            <button \r\n                *ngIf=\"message.transientState?.liking\"\r\n                mat-icon-button \r\n                [disabled]=\"true\" \r\n                [matTooltip]=\"upvoting ? 'Please wait...' : message.userState?.liked ? 'Unlike' : 'Like'\" \r\n                matTooltipPosition=\"below\" \r\n                >\r\n                <mat-spinner [diameter]=\"15\" style=\"margin-left: 1em;\"></mat-spinner>\r\n            </button>\r\n            <button \r\n                *ngIf=\"!message.transientState?.liking\"\r\n                mat-button \r\n                [matTooltip]=\"permissions?.canLike ? upvoting ? 'Please wait...' : 'Like' : permissions?.canLikeErrorMessage\" \r\n                matTooltipPosition=\"below\" \r\n                (click)=\"message.userState?.liked ? unlike() : like()\" \r\n                >\r\n                <mat-icon [inline]=\"true\">thumb_up</mat-icon>\r\n                <span class=\"count-indicator\" *ngIf=\"message.likes > 0\">\r\n                    {{message.likes}}\r\n                </span>\r\n            </button>\r\n        </div>\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>\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;position:relative;padding:.5em;visibility:hidden}:host.new{visibility:visible;-webkit-animation-name:comment-appear;animation-name:comment-appear;-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-fill-mode:both;animation-fill-mode:both}:host.highlighted{background:#00223a;outline:2px solid #003277}:host.visible{visibility:visible}:host:hover{background:#eee}:host .message-content .content{margin-left:60px;margin-right:.5em}:host .message-content .attachments-row{margin-top:15px;display:flex;gap:10px}:host .message-content .attachments-row img{border-radius:10px;width:300px;max-width:100%;max-height:20em;-o-object-fit:cover;object-fit:cover}:host.abbreviated .message-content .content{text-overflow:ellipsis;overflow-y:hidden}:host .actions{display:flex;padding-right:10px;margin-left:60px;align-items:center}:host .actions button,banta-timestamp{color:#666;flex-shrink:0}banta-timestamp{font-size:10pt;margin-left:1em;text-align:right}.user{position:relative;margin:1em 0 0;display:flex;align-items:center;flex-wrap:wrap}.user .user-1,.user .user-2{display:flex;flex-wrap:nowrap;align-items:center;min-width:0}.user .user-2{margin:1em 0}.user .user-identity{display:flex;flex-direction:column;min-width:0}.user .display-name,.user .username{z-index:1;position:relative;padding:0 0 0 1em;font-size:10pt;color:#000;margin:0 auto 0 0;display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex-shrink:1;flex-grow:0;min-width:0}.user .display-name.username.username.username,.user .username.username.username.username{color:#666}.avatar{height:48px;width:48px;background-position:50%;background-size:cover;background-color:#333;border-radius:100%;flex-shrink:0;flex-grow:0}.counted-action{display:flex;align-items:center}.counted-action.active .count-indicator,.counted-action.active button{color:#00a5ff}.counted-action button .count-indicator{margin-left:.5em}.count-indicator{font-size:9pt;padding:0 0 0 3px;color:#666}:host-context(.mat-dark-theme) .count-indicator{border-color:#333}:host-context(.mat-dark-theme):hover{background:#060606}.user-tag,:host-context(.mat-dark-theme) .user .display-name,:host-context(.mat-dark-theme) .user .username{color:#fff}.user-tag{text-transform:uppercase;font-size:12px;border:1px solid #b27373;background:#7a412b;padding:3px 5px;margin:0 .5em 0 1em;border-radius:3px}.spacer{flex-shrink:1;flex-grow:1}ul.message-facts{margin:0;padding:0;color:#666}ul.message-facts li{list-style-type:none;border-left:1px solid #666;font-size:10pt;padding-left:.5em;margin-left:.5em;margin-top:.5em}ul.message-facts li:first-child{border-left:1px solid transparent;margin-left:0;padding-left:0}@media (max-width:400px){.avatar{height:32px;width:32px}:host .actions{margin-left:0;margin-top:.5em}:host .message-content .content{margin-left:44px;margin-right:.5em}}:host-context(.banta-mobile) .avatar{height:32px;width:32px}:host-context(.banta-mobile) :host .actions{margin-left:0;margin-top:.5em}:host-context(.banta-mobile) :host .message-content .content{margin-left:44px;margin-right:.5em}.card-attachment a{display:flex;align-items:flex-start;gap:1em;width:100%;border:1px solid #666;border-radius:4px;padding:1em;box-sizing:border-box;background-color:#191919}.card-attachment a img{width:300px;aspect-ratio:16/9;-o-object-fit:cover;object-fit:cover;border-radius:10px}.card-attachment a h1{margin:0;font-size:30px}"]
+                    styles: ["@-webkit-keyframes comment-appear{0%{transform:translate(6em)}to{transform:translate(0)}}@keyframes comment-appear{0%{transform:translate(6em)}to{transform:translate(0)}}:host{display:flex;flex-direction:column;position:relative;padding:.5em;visibility:hidden}:host.new{visibility:visible;-webkit-animation-name:comment-appear;animation-name:comment-appear;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:both;animation-fill-mode:both}:host.highlighted{background:#00223a;outline:2px solid #003277}:host.visible{visibility:visible}:host:hover{background:#eee}:host .message-content .content{margin-left:60px;margin-right:.5em}:host .message-content .attachments-row{margin-top:15px;display:flex;gap:10px}:host .message-content .attachments-row img{border-radius:10px;width:300px;max-width:100%;max-height:20em;-o-object-fit:cover;object-fit:cover}:host.abbreviated .message-content .content{text-overflow:ellipsis;overflow-y:hidden}:host .actions{display:flex;padding-right:10px;margin-left:60px;align-items:center}:host .actions button,banta-timestamp{color:#666;flex-shrink:0}banta-timestamp{font-size:10pt;margin-left:1em;text-align:right}.user{position:relative;margin:1em 0 0;display:flex;align-items:center;flex-wrap:wrap}.user .user-1,.user .user-2{display:flex;flex-wrap:nowrap;align-items:center;min-width:0}.user .user-2{margin:1em 0}.user .user-identity{display:flex;flex-direction:column;min-width:0}.user .display-name,.user .username{z-index:1;position:relative;padding:0 0 0 1em;font-size:10pt;color:#000;margin:0 auto 0 0;display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex-shrink:1;flex-grow:0;min-width:0}.user .display-name.username.username.username,.user .username.username.username.username{color:#666}.avatar{height:48px;width:48px;background-position:50%;background-size:cover;background-color:#333;border-radius:100%;flex-shrink:0;flex-grow:0}.counted-action{display:flex;align-items:center}.counted-action.active .count-indicator,.counted-action.active button{color:#00a5ff}.counted-action button .count-indicator{margin-left:.5em}.count-indicator{font-size:9pt;padding:0 0 0 3px;color:#666}:host-context(.mat-dark-theme) .count-indicator{border-color:#333}:host-context(.mat-dark-theme):hover{background:#060606}.user-tag,:host-context(.mat-dark-theme) .user .display-name,:host-context(.mat-dark-theme) .user .username{color:#fff}.user-tag{text-transform:uppercase;font-size:12px;border:1px solid #b27373;background:#7a412b;padding:3px 5px;margin:0 .5em 0 1em;border-radius:3px}.spacer{flex-shrink:1;flex-grow:1}ul.message-facts{margin:0;padding:0;color:#666}ul.message-facts li{list-style-type:none;border-left:1px solid #666;font-size:10pt;padding-left:.5em;margin-left:.5em;margin-top:.5em}ul.message-facts li:first-child{border-left:1px solid transparent;margin-left:0;padding-left:0}@media (max-width:400px){.avatar{height:32px;width:32px}:host .actions{margin-left:0;margin-top:.5em}:host .message-content .content{margin-left:44px;margin-right:.5em}}:host-context(.banta-mobile) .avatar{height:32px;width:32px}:host-context(.banta-mobile) :host .actions{margin-left:0;margin-top:.5em}:host-context(.banta-mobile) :host .message-content .content{margin-left:44px;margin-right:.5em}.card-attachment a{display:flex;align-items:flex-start;gap:1em;width:100%;border:1px solid #666;border-radius:4px;padding:1em;box-sizing:border-box;background-color:#191919}.card-attachment a img{width:300px;aspect-ratio:16/9;-o-object-fit:cover;object-fit:cover;border-radius:10px}.card-attachment a h1{margin:0;font-size:30px}"]
                 },] }
     ];
     CommentComponent.propDecorators = {
@@ -8758,13 +8758,14 @@
         CommentViewComponent.prototype.getInitialMessages = function () {
             return __awaiter(this, void 0, void 0, function () {
                 var messages;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
                         case 0: return [4 /*yield*/, this._source.getExistingMessages()];
                         case 1:
-                            messages = (_b.sent());
+                            messages = (_c.sent());
                             messages.forEach(function (m) { var _a; return (_a = m.transientState) !== null && _a !== void 0 ? _a : (m.transientState = {}); });
-                            this.messages = messages;
+                            this.messages = this.newestLast ? messages.slice().reverse() : messages;
+                            this.sortMessages();
                             return [2 /*return*/];
                     }
                 });
@@ -8775,14 +8776,18 @@
         };
         CommentViewComponent.prototype.showNew = function () {
             return __awaiter(this, void 0, void 0, function () {
-                var overflow;
-                return __generator(this, function (_b) {
-                    if (this.source && this.source.sortOrder !== common$1.CommentsOrder.NEWEST) {
-                        this.sortOrderChanged.next(common$1.CommentsOrder.NEWEST);
+                var naturalOrder, overflow;
+                return __generator(this, function (_c) {
+                    naturalOrder = common$1.CommentsOrder.NEWEST;
+                    if (this.source && this.source.sortOrder !== naturalOrder) {
+                        this.sortOrderChanged.next(naturalOrder);
                         return [2 /*return*/];
                     }
                     this.isViewingMore = false;
-                    this.messages = this.newMessages.splice(0, this.newMessages.length).concat(this.messages);
+                    if (this.newestLast)
+                        this.messages = this.messages.concat(this.newMessages.splice(0, this.newMessages.length));
+                    else
+                        this.messages = this.newMessages.splice(0, this.newMessages.length).concat(this.messages);
                     overflow = this.messages.splice(this.maxVisibleMessages, this.messages.length);
                     this.olderMessages = overflow.concat(this.olderMessages);
                     this.olderMessages.splice(this.maxMessages - this.maxVisibleMessages, this.olderMessages.length);
@@ -8791,38 +8796,45 @@
             });
         };
         CommentViewComponent.prototype.showMore = function () {
+            var _a, _b;
             return __awaiter(this, void 0, void 0, function () {
                 var nextPageSize, lastMessage, messages;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
                         case 0:
                             this.isViewingMore = true;
-                            if (!(this.olderMessages.length > 0)) return [3 /*break*/, 1];
-                            this.isLoadingMore = false;
-                            this.messages = this.messages.concat(this.olderMessages.splice(0, 50));
-                            return [3 /*break*/, 3];
-                        case 1:
+                            if (this.olderMessages.length > 0) {
+                                this.isLoadingMore = false;
+                                this.messages = this.messages.concat(this.olderMessages.splice(0, 50));
+                            }
                             this.isLoadingMore = true;
                             nextPageSize = 20;
-                            lastMessage = void 0;
-                            lastMessage = this.messages[this.messages.length - 1];
+                            if (this.newestLast) {
+                                lastMessage = (_a = this.olderMessages[0]) !== null && _a !== void 0 ? _a : this.messages[0];
+                            }
+                            else {
+                                lastMessage = (_b = this.olderMessages[this.olderMessages.length - 1]) !== null && _b !== void 0 ? _b : this.messages[this.messages.length - 1];
+                            }
+                            console.dir(lastMessage);
                             if (!lastMessage) {
                                 this.isLoadingMore = false;
                                 this.hasMore = false;
                                 return [2 /*return*/];
                             }
                             return [4 /*yield*/, this.source.loadAfter(lastMessage, nextPageSize)];
-                        case 2:
-                            messages = _b.sent();
+                        case 1:
+                            messages = _c.sent();
                             messages.forEach(function (m) { var _a; return (_a = m.transientState) !== null && _a !== void 0 ? _a : (m.transientState = {}); });
-                            this.messages = this.messages.concat(messages);
+                            if (this.newestLast)
+                                this.messages = messages.concat(this.messages);
+                            else
+                                this.messages = this.messages.concat(messages);
                             this.isLoadingMore = false;
                             if (messages.length === 0) {
                                 console.log("Reached the end of the list.");
                                 this.hasMore = false;
                             }
-                            _b.label = 3;
-                        case 3: return [2 /*return*/];
+                            return [2 /*return*/];
                     }
                 });
             });
@@ -8833,11 +8845,11 @@
                 (_a = message.transientState) !== null && _a !== void 0 ? _a : (message.transientState = {});
             var destination = this.messages;
             var bucket = this.olderMessages;
+            var newestLast = this.newestLast;
             if (this.isViewingMore) {
                 destination = this.newMessages;
                 bucket = null;
             }
-            var newestLast = this.newestLast;
             if (newestLast) {
                 destination.push(message);
                 var overflow = destination.splice(this.maxVisibleMessages, destination.length);
@@ -8850,6 +8862,51 @@
             }
             if ((bucket === null || bucket === void 0 ? void 0 : bucket.length) > 0)
                 this.hasMore = true;
+            message.pagingCursor = String(this.incrementPagingCursors());
+            this.sortMessages();
+        };
+        CommentViewComponent.prototype.incrementPagingCursors = function () {
+            var e_1, _c, e_2, _d;
+            if (this.source.sortOrder !== common$1.CommentsOrder.NEWEST)
+                return;
+            var maxPagingCursor = 0;
+            try {
+                for (var _e = __values([this.messages, this.olderMessages, this.newMessages]), _f = _e.next(); !_f.done; _f = _e.next()) {
+                    var group = _f.value;
+                    try {
+                        for (var group_1 = (e_2 = void 0, __values(group)), group_1_1 = group_1.next(); !group_1_1.done; group_1_1 = group_1.next()) {
+                            var message = group_1_1.value;
+                            if (message.pagingCursor) {
+                                var pagingCursor = Number(message.pagingCursor) + 1;
+                                if (pagingCursor > maxPagingCursor)
+                                    maxPagingCursor = pagingCursor;
+                                message.pagingCursor = String(pagingCursor);
+                            }
+                        }
+                    }
+                    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                    finally {
+                        try {
+                            if (group_1_1 && !group_1_1.done && (_d = group_1.return)) _d.call(group_1);
+                        }
+                        finally { if (e_2) throw e_2.error; }
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_f && !_f.done && (_c = _e.return)) _c.call(_e);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            return maxPagingCursor;
+        };
+        CommentViewComponent.prototype.sortMessages = function () {
+            var _this = this;
+            this.messages.sort(function (a, b) { return (a.sentAt - b.sentAt) * (_this.newestLast ? 1 : -1); });
+            this.olderMessages.sort(function (a, b) { return (a.sentAt - b.sentAt) * (_this.newestLast ? 1 : -1); });
+            this.newMessages.sort(function (a, b) { return (a.sentAt - b.sentAt) * (_this.newestLast ? 1 : -1); });
         };
         CommentViewComponent.prototype.messageReceived = function (message) {
             var _this = this;
@@ -8889,7 +8946,7 @@
     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\" [class.visible]=\"isViewingMore || customSortEnabled\" href=\"javascript:;\" (click)=\"showNew()\">\r\n        <mat-icon>file_upload</mat-icon>\r\n        New\r\n        <ng-container *ngIf=\"newMessages.length >= 1\">\r\n            ({{newMessages.length}})\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    <ng-container *ngFor=\"let message of messages; trackBy: messageIdentity\">\r\n        <banta-comment\r\n            *ngIf=\"!message.hidden\"\r\n            class=\"abbreviated\"\r\n            \r\n            [customMenuItems]=\"customMenuItems\"\r\n            [message]=\"message\"\r\n            [mine]=\"currentUser?.id === message.user?.id\"\r\n            [permissions]=\"source?.permissions\"\r\n            [showReplyAction]=\"allowReplies\"\r\n            [editing]=\"message.transientState.editing\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            (click)=\"isViewingMore = true\"\r\n            (editStarted)=\"startEditing(message)\"\r\n            (deleted)=\"deleteMessage(message)\"\r\n            (editEnded)=\"message.transientState.editing = false\"\r\n            (edited)=\"saveEdit(message, $event)\"\r\n            (userSelected)=\"selectMessageUser(message)\"\r\n            (avatarSelected)=\"selectAvatar($event)\"\r\n            (usernameSelected)=\"selectUsername($event)\"\r\n            (liked)=\"likeMessage(message)\"\r\n            (unliked)=\"unlikeMessage(message)\"\r\n            (reported)=\"reportMessage(message)\"\r\n            (selected)=\"selectMessage(message)\"\r\n            (shared)=\"sharedMessage($event)\"\r\n            ></banta-comment>\r\n        <div class=\"inline-replies-container\" *ngIf=\"selectedMessage === message\">\r\n            <ng-content select=\".inline-replies\"></ng-content>\r\n        </div>\r\n    </ng-container>\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]):not(.inline-replies)\"></ng-content>\r\n</div>\r\n",
+                    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]=\"!newestLast && (isViewingMore || customSortEnabled)\" href=\"javascript:;\" (click)=\"showNew()\">\r\n        <mat-icon>file_upload</mat-icon>\r\n        New\r\n        <ng-container *ngIf=\"newMessages.length >= 1\">\r\n            ({{newMessages.length}})\r\n        </ng-container>\r\n    </a>\r\n    <a mat-button class=\"nav\" [class.visible]=\"newestLast && hasMore && !isLoadingMore\" href=\"javascript:;\" (click)=\"showMore()\">Show earlier</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    <ng-container *ngFor=\"let message of messages; trackBy: messageIdentity\">\r\n        <banta-comment\r\n            *ngIf=\"!message.hidden\"\r\n            class=\"abbreviated\"\r\n            \r\n            [customMenuItems]=\"customMenuItems\"\r\n            [message]=\"message\"\r\n            [mine]=\"currentUser?.id === message.user?.id\"\r\n            [permissions]=\"source?.permissions\"\r\n            [showReplyAction]=\"allowReplies\"\r\n            [editing]=\"message.transientState.editing\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            (click)=\"isViewingMore = true\"\r\n            (editStarted)=\"startEditing(message)\"\r\n            (deleted)=\"deleteMessage(message)\"\r\n            (editEnded)=\"message.transientState.editing = false\"\r\n            (edited)=\"saveEdit(message, $event)\"\r\n            (userSelected)=\"selectMessageUser(message)\"\r\n            (avatarSelected)=\"selectAvatar($event)\"\r\n            (usernameSelected)=\"selectUsername($event)\"\r\n            (liked)=\"likeMessage(message)\"\r\n            (unliked)=\"unlikeMessage(message)\"\r\n            (reported)=\"reportMessage(message)\"\r\n            (selected)=\"selectMessage(message)\"\r\n            (shared)=\"sharedMessage($event)\"\r\n            ></banta-comment>\r\n        <div class=\"inline-replies-container\" *ngIf=\"selectedMessage === message\">\r\n            <ng-content select=\".inline-replies\"></ng-content>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <a mat-button class=\"nav\" [class.visible]=\"newestLast && (isViewingMore || customSortEnabled)\" href=\"javascript:;\" (click)=\"showNew()\">\r\n        <mat-icon>file_download</mat-icon>\r\n        New\r\n        <ng-container *ngIf=\"newMessages.length >= 1\">\r\n            ({{newMessages.length}})\r\n        </ng-container>\r\n    </a>\r\n    <a mat-button class=\"nav\" [class.visible]=\"!newestLast && 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]):not(.inline-replies)\"></ng-content>\r\n</div>\r\n",
                     styles: [":host{flex-grow:1;display:flex;flex-direction:column;opacity:1;transition:opacity .2s ease-in}.message-container{flex-grow:1;overflow-x:hidden;color:#111;background:#fff;padding:.5em 1em 3em .5em;opacity:1;transition:opacity .5s ease-in-out;position:relative}.message-container.no-scroll{height:auto;overflow-y:visible}.message-container.faded{opacity:.25}.message-container .overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:10}:host.fixed-height .message-container{overflow-y:auto}:host-context(.mat-dark-theme) .message-container{color:#fff;background:#111}.empty-state{text-align:center;margin:3em;color:#666}:host-context(.mat-dark-theme) .empty-state{color:#666}a.nav{position:absolute;right:.5em;z-index:10;text-align:center;opacity:0;transition:opacity .4s ease-in-out;pointer-events:none;border-radius:2em;background:#222}a.nav.visible{opacity:1;pointer-events:auto}.loading-more{padding:2em;text-align:center;margin:0 auto;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}@media (max-width:400px){.message-container{padding:0 0 3em}}"]
                 },] }
     ];
@@ -9598,6 +9655,7 @@
             });
         };
         BantaCommentsComponent.prototype.deleteMessage = function (message) {
+            var _a;
             return __awaiter(this, void 0, void 0, function () {
                 var e_6;
                 return __generator(this, function (_d) {
@@ -9617,6 +9675,8 @@
                             return [4 /*yield*/, this.source.deleteMessage(message.id)];
                         case 4:
                             _d.sent();
+                            if (((_a = this.selectedMessage) === null || _a === void 0 ? void 0 : _a.id) === message.id)
+                                this.unselectMessage();
                             return [3 /*break*/, 6];
                         case 5:
                             e_6 = _d.sent();
@@ -10638,23 +10698,27 @@
                 });
             });
         };
+        ChatSource.prototype.mapOrUpdateMessages = function (messages) {
+            var _this = this;
+            return messages.map(function (message) { return _this.mapOrUpdateMessage(message); });
+        };
+        ChatSource.prototype.mapOrUpdateMessage = function (message) {
+            var existingMessage = this.messageMap.get(message.id);
+            if (existingMessage)
+                message = Object.assign(existingMessage, message);
+            else
+                this.messageMap.set(message.id, message);
+            return message;
+        };
         ChatSource.prototype.getExistingMessages = function () {
             return __awaiter(this, void 0, void 0, function () {
                 var messages;
-                var _this = this;
                 return __generator(this, function (_b) {
                     switch (_b.label) {
                         case 0: return [4 /*yield*/, this.peer.getExistingMessages()];
                         case 1:
                             messages = _b.sent();
-                            messages = messages.map(function (message) {
-                                var existingMessage = _this.messageMap.get(message.id);
-                                if (existingMessage)
-                                    message = Object.assign(existingMessage, message);
-                                else
-                                    _this.messageMap.set(message.id, message);
-                                return message;
-                            });
+                            messages = this.mapOrUpdateMessages(messages);
                             return [2 /*return*/, messages];
                     }
                 });
@@ -10737,8 +10801,7 @@
         };
         ChatSource.prototype.onChatMessage = function (message) {
             if (this.messageMap.has(message.id)) {
-                Object.assign(this.messageMap.get(message.id), message);
-                this._messageUpdated.next(message);
+                return this.mapOrUpdateMessage(message);
             }
             else if (!message.hidden) {
                 // Only process non-hidden messages through here. 
@@ -10778,12 +10841,18 @@
         };
         ChatSource.prototype.loadAfter = function (message, count) {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_b) {
-                    if (!message)
-                        return [2 /*return*/];
-                    if (!message.pagingCursor)
-                        return [2 /*return*/, []];
-                    return [2 /*return*/, this.peer.loadAfter(Number(message.pagingCursor), count)];
+                var _b;
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0:
+                            if (!message)
+                                return [2 /*return*/];
+                            if (!message.pagingCursor)
+                                return [2 /*return*/, []];
+                            _b = this.mapOrUpdateMessages;
+                            return [4 /*yield*/, this.peer.loadAfter(Number(message.pagingCursor), count)];
+                        case 1: return [2 /*return*/, _b.apply(this, [_c.sent()])];
+                    }
                 });
             });
         };