@banta/sdk 4.6.3 → 4.6.5

package/fesm2015/banta-sdk.js

@@ -1,6 +1,6 @@
 import { Observable, Subject, BehaviorSubject, Subscription } from 'rxjs';
-import { publish } from 'rxjs/operators';
-import { Component, Input, ViewChild, Pipe, Output, HostBinding, NgModule, ElementRef, ViewChildren, Directive, NgZone, ContentChild, TemplateRef, Injectable, Inject } from '@angular/core';
+import { publish, take } from 'rxjs/operators';
+import { Component, Input, ViewChild, Pipe, ElementRef, Output, HostBinding, NgModule, ViewChildren, Directive, NgZone, ContentChild, TemplateRef, Injectable, Inject } from '@angular/core';
 import { marked, Renderer } from 'marked';
 import { sanitize } from 'dompurify';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -244,7 +244,8 @@ BantaTrustResourceUrlPipe.ctorParameters = () => [
 ];
 
 class BantaAttachmentComponent {
-    constructor() {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
         this.loading = false;
         this.editing = false;
         this.loadingMessage = 'Please wait...';
@@ -252,6 +253,13 @@ class BantaAttachmentComponent {
         this.errorMessage = 'An error has occurred';
         this.removed = new Subject();
         this.activated = new Subject();
+        this.loaded = new Subject();
+        this._viewLoaded = false;
+    }
+    get attachment() { return this._attachment; }
+    set attachment(value) {
+        this._attachment = value;
+        this.checkLoad();
     }
     ngOnInit() {
         if (typeof window !== 'undefined') {
@@ -262,6 +270,19 @@ class BantaAttachmentComponent {
             }, 100);
         }
     }
+    ngAfterViewInit() {
+        this._viewLoaded = true;
+        this.checkLoad();
+    }
+    checkLoad() {
+        var _a;
+        if (!this._attachment || !this._viewLoaded || !((_a = this.elementRef) === null || _a === void 0 ? void 0 : _a.nativeElement))
+            return;
+        if (typeof window === 'undefined')
+            this.loaded.next();
+        else
+            setTimeout(() => this.loaded.next(), 250);
+    }
     activate() {
         this.activated.next();
     }
@@ -309,7 +330,9 @@ BantaAttachmentComponent.decorators = [
                 styles: [":host{position:relative;display:block}:host.loading{outline:1px solid #333;padding:1em 0;width:300px;text-align:center}:host.loading mat-spinner{display:block;margin:0 auto .5em;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}a.card-attachment{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;margin:1em 0}a.card-attachment img{width:250px;aspect-ratio:16/9;-o-object-fit:cover;object-fit:cover;border-radius:10px}a.card-attachment.has-image h1{font-size:22px}a.card-attachment h1{min-width:0;margin:0 0 .5em;font-size:26px}a.card-attachment cite{min-width:0;opacity:.75;margin-top:1em;display:block;font-size:80%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}a.card-attachment .description{min-width:0;width:100%}a.card-attachment .summary{overflow-x:hidden;text-overflow:ellipsis}.remove-button{position:absolute;right:10px;top:10px;margin:0;z-index:1}a.image-attachment{width:300px;position:relative;text-align:center}a.image-attachment.with-border{outline:1px solid #333;padding:1em 0}a.image-attachment mat-spinner{display:block;margin:0 auto .5em;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}a.image-attachment mat-icon.error{display:block;font-size:48px;width:48px;height:48px;margin:0 auto .5em}a.image-attachment .error{color:#b76363}a.image-attachment img{width:300px;border-radius:10px;max-width:100%;max-height:20em;-o-object-fit:cover;object-fit:cover}iframe{border:none;width:100%;aspect-ratio:16/9}@media (max-width:700px){a.card-attachment{flex-direction:column}a.card-attachment img{width:100%}}"]
             },] }
 ];
-BantaAttachmentComponent.ctorParameters = () => [];
+BantaAttachmentComponent.ctorParameters = () => [
+    { type: ElementRef }
+];
 BantaAttachmentComponent.propDecorators = {
     attachment: [{ type: Input }],
     loading: [{ type: Input }],
@@ -319,6 +342,7 @@ BantaAttachmentComponent.propDecorators = {
     errorMessage: [{ type: Input }],
     removed: [{ type: Output }],
     activated: [{ type: Output }],
+    loaded: [{ type: Output }],
     isLoading: [{ type: HostBinding, args: ['class.loading',] }]
 };
 
@@ -326,6 +350,21 @@ class BantaAttachmentsComponent {
     constructor() {
         this.editing = false;
         this.remove = new Subject();
+        this.loaded = new Subject();
+        this.loadedAttachments = new WeakMap();
+    }
+    ngAfterViewInit() {
+    }
+    markAttachmentLoaded(attachment) {
+        this.loadedAttachments.set(attachment, true);
+        if (this.allAttachmentsLoaded)
+            this.loaded.next();
+    }
+    isAttachmentLoaded(attachment) {
+        return this.loadedAttachments.has(attachment);
+    }
+    get allAttachmentsLoaded() {
+        return this.attachments.every(x => this.isAttachmentLoaded(x));
     }
     removeAttachment(attachment) {
         this.remove.next(attachment);
@@ -351,11 +390,14 @@ class BantaAttachmentsComponent {
     get blockAttachments() {
         return this.attachments.filter(x => x.style === 'block' || x.type === 'card');
     }
+    attachmentId(index, attachment) {
+        return attachment.url;
+    }
 }
 BantaAttachmentsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'banta-attachments',
-                template: "<ng-container *ngIf=\"attachments?.length > 0\">\r\n    <banta-lightbox #lightbox></banta-lightbox>\r\n    <div class=\"block-attachments\">\r\n        <ng-container *ngFor=\"let attachment of blockAttachments\">\r\n            <banta-attachment \r\n                [attachment]=\"attachment\"\r\n                [editing]=\"editing\"\r\n                (removed)=\"removeAttachment(attachment)\"\r\n                (activated)=\"showLightbox(attachment)\"\r\n                ></banta-attachment>\r\n        </ng-container>\r\n    </div>\r\n\r\n    <div \r\n        class=\"inline-attachments\" \r\n        [class.single]=\"attachments?.length === 1\" \r\n        *ngIf=\"attachments && attachments?.length > 0\"\r\n        >\r\n        <ng-container *ngFor=\"let attachment of inlineAttachments\">\r\n            <banta-attachment \r\n                [attachment]=\"attachment\"\r\n                [editing]=\"editing\"\r\n                (removed)=\"removeAttachment(attachment)\"\r\n                (activated)=\"showLightbox(attachment)\"\r\n                ></banta-attachment>\r\n        </ng-container>\r\n    </div>\r\n</ng-container>",
+                template: "<ng-container *ngIf=\"attachments?.length > 0\">\r\n    <banta-lightbox #lightbox></banta-lightbox>\r\n    <div class=\"block-attachments\">\r\n        <ng-container *ngFor=\"let attachment of blockAttachments; trackBy: attachmentId\">\r\n            <banta-attachment \r\n                [attachment]=\"attachment\"\r\n                [editing]=\"editing\"\r\n                (loaded)=\"markAttachmentLoaded(attachment)\"\r\n                (removed)=\"removeAttachment(attachment)\"\r\n                (activated)=\"showLightbox(attachment)\"\r\n                ></banta-attachment>\r\n        </ng-container>\r\n    </div>\r\n\r\n    <div \r\n        class=\"inline-attachments\" \r\n        [class.single]=\"attachments?.length === 1\" \r\n        *ngIf=\"attachments && attachments?.length > 0\"\r\n        >\r\n        <ng-container *ngFor=\"let attachment of inlineAttachments; trackBy: attachmentId\">\r\n            <banta-attachment \r\n                [attachment]=\"attachment\"\r\n                [editing]=\"editing\"\r\n                (loaded)=\"markAttachmentLoaded(attachment)\"\r\n                (removed)=\"removeAttachment(attachment)\"\r\n                (activated)=\"showLightbox(attachment)\"\r\n                ></banta-attachment>\r\n        </ng-container>\r\n    </div>\r\n</ng-container>",
                 styles: [".block-attachments{display:flex;flex-direction:column}.block-attachments banta-attachment{width:100%}.inline-attachments{flex-direction:row;margin-top:15px;display:flex;gap:20px;flex-wrap:wrap}"]
             },] }
 ];
@@ -363,7 +405,8 @@ BantaAttachmentsComponent.propDecorators = {
     attachments: [{ type: Input }],
     editing: [{ type: Input }],
     lightbox: [{ type: ViewChild, args: ['lightbox',] }],
-    remove: [{ type: Output }]
+    remove: [{ type: Output }],
+    loaded: [{ type: Output }]
 };
 
 const COMPONENTS = [
@@ -7867,6 +7910,8 @@ class CommentComponent {
         this.isNew = false;
         this.visible = false;
         this.showReplyAction = true;
+        this.loaded = new Subject();
+        this.isLoaded = false;
         this.mine = false;
         this.editing = false;
         this._editStarted = new Subject();
@@ -7887,10 +7932,35 @@ class CommentComponent {
             setTimeout(() => this.isNew = false, 1000);
         }, randomTime);
     }
+    markAttachmentsLoaded() {
+        this.isLoaded = true;
+        this.loaded.next();
+    }
     get isHighlighted() {
         var _a, _b, _c;
         return (_c = (_b = (_a = this.message) === null || _a === void 0 ? void 0 : _a.transientState) === null || _b === void 0 ? void 0 : _b.highlighted) !== null && _c !== void 0 ? _c : false;
     }
+    get message() {
+        return this._message;
+    }
+    set message(value) {
+        var _a;
+        this._message = value;
+        if (((_a = this._message.attachments) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            this.isLoaded = false;
+        }
+        else {
+            this.isLoaded = true;
+            this.loaded.next();
+        }
+    }
+    waitForLoad() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.isLoaded)
+                return true;
+            yield this.loaded.pipe(take(1)).toPromise();
+        });
+    }
     get userSelected() {
         return this._userSelected.asObservable();
     }
@@ -7972,7 +8042,7 @@ class CommentComponent {
 CommentComponent.decorators = [
     { type: 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",
+                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 \r\n            [attachments]=\"message.attachments\"\r\n            (loaded)=\"markAttachmentsLoaded()\"\r\n            ></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(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}"]
             },] }
 ];
@@ -7987,6 +8057,7 @@ CommentComponent.propDecorators = {
     message: [{ type: Input }],
     customMenuItems: [{ type: Input }],
     showReplyAction: [{ type: Input }],
+    loaded: [{ type: Output }],
     userSelected: [{ type: Output }],
     usernameSelected: [{ type: Output }],
     avatarSelected: [{ type: Output }],
@@ -8057,7 +8128,6 @@ class CommentViewComponent {
                 console.log(`...Need to load more comments to find ${message.id}`);
                 yield this.showMore();
             }
-            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 false;
@@ -8069,17 +8139,11 @@ class CommentViewComponent {
                 console.error(`Error while loading message in context: Message was not present in message list!`);
                 return false;
             }
-            console.log(`Total messages: ${items.length}`);
-            console.log(`Page size: ${pageSize}`);
-            console.log(`Message index: ${index}`);
             let 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`);
+            this.isViewingMore = true;
         });
     }
     /**
@@ -8215,7 +8279,6 @@ class CommentViewComponent {
             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;
@@ -8276,6 +8339,17 @@ class CommentViewComponent {
         }
         return maxPagingCursor;
     }
+    /**
+     * Wait for all currently visible comments to be fully loaded, including all attachments.
+     * Doing this will prevent layout shift when scrolling to a specific comment.
+     */
+    waitForAllCommentsToLoad() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield new Promise(r => setTimeout(r, 100));
+            yield this.sourceLoaded;
+            yield Promise.all(this.comments.map(x => x.waitForLoad()));
+        });
+    }
     sortMessages() {
         if (!this.source)
             return;
@@ -8437,6 +8511,7 @@ class BantaCommentsComponent {
             { hashtag: 'slow', description: 'Be slow when this message is posted' },
         ];
         this.loadingSharedComment = false;
+        this.sharedCommentMissing = false;
         this.sendMessage = (message) => __awaiter(this, void 0, void 0, function* () {
             var _a;
             try {
@@ -8508,10 +8583,6 @@ class BantaCommentsComponent {
     }
     get isMobileSized() { return this.width < 500; }
     ngAfterViewInit() {
-        this.threadViewQuery.changes.subscribe(changes => {
-            console.log(`i see changes...`);
-            console.dir(changes);
-        });
         if (typeof window !== 'undefined') {
             let callback = () => {
                 let size = this.elementRef.nativeElement.getBoundingClientRect();
@@ -8643,11 +8714,13 @@ class BantaCommentsComponent {
         if (value) {
             if (this.sharedCommentID) {
                 this.navigateToSharedComment(this.sharedCommentID);
+                this.lastSharedCommentID = this.sharedCommentID;
                 this.sharedCommentID = null;
             }
             this._source.messages.forEach(m => this.addParticipant(m));
             this._sourceSubscription.add(this._source.messageReceived.subscribe(m => this.addParticipant(m)));
             this._sourceSubscription.add(this._source.messageSent.subscribe(m => this.addParticipant(m)));
+            this._sourceSubscription.add(this._source.messageObserved.subscribe(m => this.addParticipant(m)));
             this._sourceSubscription.add(this._source.messageUpdated.subscribe(msg => {
                 var _a;
                 console.log(`comments received message: `, msg);
@@ -8689,23 +8762,25 @@ class BantaCommentsComponent {
     }
     // UI Interactions
     scrollToComment(commentId) {
-        if (typeof window === 'undefined')
-            return;
-        setTimeout(() => {
-            const comment = document.querySelectorAll(`[data-comment-id="${commentId}"]`);
-            if (comment.length > 0) {
-                // comment.item(0).scroll({behavior: 'smooth'});
-                comment.item(0).scrollIntoView({
+        return __awaiter(this, void 0, void 0, function* () {
+            if (typeof window === 'undefined')
+                return;
+            yield this.commentView.waitForAllCommentsToLoad();
+            const comment = document.querySelector(`[data-comment-id="${commentId}"]`);
+            if (comment) {
+                comment.scrollIntoView({
                     inline: 'center',
                     block: 'center'
                 });
             }
-        }, 1000);
+        });
     }
     navigateToSharedComment(id) {
         var _a, _b, _c, _d;
         return __awaiter(this, void 0, void 0, function* () {
             this.loadingSharedComment = true;
+            yield new Promise(r => setTimeout(r, 10));
+            this.sharedCommentMissing = false;
             let source = this.source;
             yield source.ready;
             yield this.viewReady;
@@ -8717,7 +8792,17 @@ class BantaCommentsComponent {
             }
             catch (e) {
                 console.error(`Failed to find comment from URL: ${e.message}`);
-                alert(`Could not load desired comment. It may have been removed.`);
+                this.sharedCommentMissing = true;
+                this.loadingSharedComment = false;
+                if (typeof window !== 'undefined') {
+                    setTimeout(() => {
+                        let notice = this.element.querySelector('.loading-comment');
+                        notice.scrollIntoView({
+                            block: 'center',
+                            inline: 'center'
+                        });
+                    }, 200);
+                }
                 return;
             }
             (_a = message.transientState) !== null && _a !== void 0 ? _a : (message.transientState = {});
@@ -8744,8 +8829,8 @@ class BantaCommentsComponent {
                 (_d = message.transientState) !== null && _d !== void 0 ? _d : (message.transientState = {});
                 message.transientState.highlighted = true;
             }
-            this.scrollToComment(id);
             this.loadingSharedComment = false;
+            yield this.scrollToComment(id);
         });
     }
     handlePermissionDenied(errorMessage) {
@@ -8943,8 +9028,8 @@ class BantaCommentsComponent {
 BantaCommentsComponent.decorators = [
     { type: 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        <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}"]
+                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 the comment you linked to...</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        <div class=\"loading-comment\" *ngIf=\"!loadingSharedComment && lastSharedCommentID\">\r\n            <ng-container *ngIf=\"sharedCommentMissing\">\r\n\r\n                <a class=\"close\" mat-icon-button matTooltip=\"Close this notice\" href=\"javascript:;\" (click)=\"lastSharedCommentID = null\">\r\n                    <mat-icon>close</mat-icon>\r\n                </a>\r\n\r\n                <h1>\r\n                    <mat-icon>error</mat-icon>\r\n                    Uh oh!\r\n                </h1>\r\n\r\n                <p>The comment you linked to can't be found! It may have been removed.</p>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!sharedCommentMissing\">\r\n                <a class=\"close\" mat-icon-button matTooltip=\"Close this notice\" href=\"javascript:;\" (click)=\"lastSharedCommentID = null\">\r\n                    <mat-icon>close</mat-icon>\r\n                </a>\r\n                <button mat-button (click)=\"navigateToSharedComment(lastSharedCommentID)\">\r\n                    <mat-icon>move_down</mat-icon> Jump to shared comment\r\n                </button>\r\n            </ng-container>\r\n        </div>\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%}.loading-comment{z-index:100;border:1px solid #333;background:#000;color:#fff;padding:1em;border-radius:4px;text-align:center;position:relative}.loading-comment a.close{position:absolute;top:1em;right:1em}.loading-comment h1{font-weight:100;text-align:center}.loading-comment mat-spinner{margin:0 auto}"]
             },] }
 ];
 BantaCommentsComponent.ctorParameters = () => [
@@ -9280,10 +9365,12 @@ class CommentFieldComponent {
                     return;
                 }
                 if (event.key === 'Enter') {
-                    this.activateAutoComplete(this.autocompleteOptions[this.autoCompleteSelected]);
-                    event.stopPropagation();
-                    event.preventDefault();
-                    return;
+                    if (this.autocompleteOptions[this.autoCompleteSelected]) {
+                        this.activateAutoComplete(this.autocompleteOptions[this.autoCompleteSelected]);
+                        event.stopPropagation();
+                        event.preventDefault();
+                        return;
+                    }
                 }
                 if (event.key === 'ArrowUp') {
                     if (this.autoCompleteSelected === 0)
@@ -9616,6 +9703,7 @@ class ChatSource extends SocketRPC {
         this._messageReceived = new Subject();
         this._messageUpdated = new Subject();
         this._messageSent = new Subject();
+        this._messageObserved = new Subject();
         this.messages = [];
         this.ready = new Promise(resolve => this.markReady = resolve);
     }
@@ -9658,10 +9746,13 @@ class ChatSource extends SocketRPC {
     }
     mapOrUpdateMessage(message) {
         let 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;
     }
     getExistingMessages() {
@@ -9730,6 +9821,7 @@ class ChatSource extends SocketRPC {
     get messageReceived() { return this._messageReceived.asObservable(); }
     get messageUpdated() { return this._messageUpdated.asObservable(); }
     get messageSent() { return this._messageSent.asObservable(); }
+    get messageObserved() { return this._messageObserved.asObservable(); }
     send(message) {
         return __awaiter(this, void 0, void 0, function* () {
             yield this.ensureConnection();